/* ============================================================================
   SuburbIQ — "Private Dossier" design system
   ----------------------------------------------------------------------------
   Reconciled with the existing SuburbIQ brand (assets/brand.css):
     · INK ramp kept WARM (#1a1a18 family) — not the cool near-black in the
       reference brief — so it sits next to the live site without clashing.
     · ACCENT ramp is built around the established brand GOLD (#c9a84c).
       All five stops preserved, per brief. Gold is the brand's primary
       accent carrier (logo "IQ", eyebrows, primary CTA hover).
     · TEAL (#1d4a4a) and the traffic-light GREEN/AMBER/RED are retained as
       *semantic* accents (emphasis italics + BUY/REVIEW/WALK verdicts).
   Single ink ramp · single paper · one confident accent ramp · hairline
   borders instead of grey boxes or drop-shadows. No pure black, no pure white.
   ============================================================================ */

:root{
  /* ---- INK — warm near-black, never #000 ---------------------------------- */
  --ink:          #15150f;   /* deepest  — page ground for dark sections       */
  --ink-soft:     #1a1a18;   /* base ink — brand canonical                     */
  --ink-panel:    #24241f;   /* raised panel on dark                           */
  --ink-line:     rgba(246,243,236,.12);
  --on-ink:       #f6f3ec;   /* paper-on-ink text                              */
  --on-ink-soft:  rgba(246,243,236,.66);
  --on-ink-mute:  rgba(246,243,236,.42);

  /* ---- PAPER — off-white, never #fff -------------------------------------- */
  --paper:        #f6f3ec;
  --paper-warm:   #efeadd;   /* raised card on paper                           */
  --paper-deep:   #e7e1d2;   /* recessed well                                  */
  --paper-dim:    rgba(246,243,236,.55);

  /* ---- ACCENT RAMP — built on brand GOLD, all five stops ------------------ */
  --accent-ember:  #5a4420;  /* deepest  — on-paper micro-marks, deep rules    */
  --accent-deep:   #8a6d1e;  /* brand gold-deep — eyebrows on paper            */
  --accent-mid:    #b8973f;
  --accent:        #c9a84c;  /* primary  — brand gold                          */
  --accent-bright: #e0bd5e;  /* highlight — brand gold-bright, on-ink eyebrows */

  /* ---- SEMANTIC accents (kept from brand) --------------------------------- */
  --teal:        #1d4a4a;    /* editorial emphasis italics                     */
  --teal-bright: #2f6e6b;
  --green:       #2e7a4a;    /* verdict BUY                                     */
  --green-soft:  #d6e8dc;
  --amber:       #c9a84c;    /* verdict REVIEW (== gold)                       */
  --red:         #b13a2e;    /* verdict WALK                                   */
  --red-soft:    #f0d6d2;

  /* ---- HAIRLINES — accent at low alpha, NOT grey -------------------------- */
  --line:         rgba(201,168,76,.22);
  --line-strong:  rgba(201,168,76,.42);
  --line-ink:     rgba(246,243,236,.16);   /* hairline on dark ground         */
  --ink-rule:     #1a1a18;                  /* full-strength editorial rule    */

  /* ---- MOTION ------------------------------------------------------------- */
  --ease:    cubic-bezier(.2,.7,.2,1);   /* fast start, long gentle settle     */
  --reveal:  1.3s;                        /* scroll-reveal duration            */

  /* ---- RHYTHM ------------------------------------------------------------- */
  --space:   0.25rem;   /* 4px base grid */
  --radius:  0;         /* square corners — max 2px anywhere */
  --maxw:    1180px;

  /* ---- TYPE --------------------------------------------------------------- */
  --display: "Newsreader", "Playfair Display", Georgia, serif;  /* editorial   */
  --serif:   "Newsreader", Georgia, serif;
  --sans:    "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* body */
  --mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;       /* metrics, labels, §, coords */
}

/* ============================================================================
   RESET / BASE
   ============================================================================ */
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  font-size:17px;
  line-height:1.6;
  background:var(--paper);
  color:var(--ink-soft);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","cv05","tnum";
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input{ font-family:inherit; }
img,svg{ display:block; max-width:100%; }

/* paper grain — barely-there, carried over from brand for material feel */
.dq-grain::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.4;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================================
   TYPE SCALE — display serif, mono labels/metrics, sans body
   line-height tightens toward ~1.0 at display sizes
   ============================================================================ */
.dq-display{
  font-family:var(--display); font-weight:400;
  font-size:clamp(48px, 8.4vw, 104px);
  line-height:.98; letter-spacing:-.025em;
}
.dq-h1{ font-family:var(--display); font-weight:500; font-size:clamp(36px,5.2vw,64px); line-height:1.02; letter-spacing:-.022em; }
.dq-h2{ font-family:var(--display); font-weight:500; font-size:clamp(28px,3.6vw,44px); line-height:1.08; letter-spacing:-.02em; }
.dq-h3{ font-family:var(--display); font-weight:500; font-size:clamp(21px,2.2vw,28px); line-height:1.18; letter-spacing:-.014em; }
.dq-em{ font-style:italic; color:var(--teal); font-weight:500; }     /* editorial accent italic */
.dq-em-gold{ font-style:italic; color:var(--accent-deep); font-weight:500; }
.dq-lede{ font-family:var(--serif); font-size:clamp(17px,1.5vw,20px); line-height:1.5; color:var(--ink-soft); max-width:62ch; }
.dq-prose{ font-family:var(--serif); font-size:16.5px; line-height:1.72; color:var(--ink-soft); max-width:68ch; }
.dq-prose + .dq-prose{ margin-top:1em; }

/* ---- THE signature: wide-tracked mono labels ------------------------------ */
.dq-label{
  font-family:var(--mono); font-weight:500;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-deep);
}
.dq-label--ink{ color:var(--accent-bright); }
.dq-label--mute{ color:var(--ink-soft); opacity:.7; letter-spacing:.24em; }

/* flanking-dash supertitle (editorial section mark) */
.dq-mark{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--mono); font-weight:500;
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--accent-deep);
}
.dq-mark::before{ content:""; width:30px; height:1px; background:currentColor; opacity:.55; }

/* § section sigil — always mono */
.dq-sigil{ font-family:var(--mono); font-weight:500; }

/* numerals / metric values / coordinates — ALWAYS mono, tabular */
.dq-num{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }

/* ============================================================================
   LAYOUT
   ============================================================================ */
.dq-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
.dq-section{ position:relative; padding:clamp(56px,9vw,120px) 0; }
.dq-section--tight{ padding:clamp(40px,6vw,72px) 0; }

/* hairline editorial rule */
.dq-rule{ height:1px; background:var(--ink-rule); opacity:.9; border:0; }
.dq-rule--hair{ height:1px; background:var(--line-strong); }

/* ============================================================================
   COMPONENTS
   ============================================================================ */

/* ---- N° register number --------------------------------------------------- */
.dq-no{
  font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums;
  font-size:12px; letter-spacing:.18em; color:var(--accent-deep);
}
.dq-no sup{ font-size:.7em; }

/* ---- coordinate precision cue --------------------------------------------- */
.dq-coord{
  font-family:var(--mono); font-weight:400; font-variant-numeric:tabular-nums;
  font-size:11px; letter-spacing:.16em; color:var(--ink-soft); opacity:.72;
}

/* ---- buttons — square, hairline, mono label ------------------------------- */
.dq-btn{
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  font-family:var(--mono); font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:14px 26px; border-radius:var(--radius);
  border:1px solid var(--ink-rule); background:var(--ink-soft); color:var(--paper);
  transition:background var(--reveal) var(--ease), color var(--reveal) var(--ease),
             border-color var(--reveal) var(--ease);
}
.dq-btn:hover{ background:var(--accent); border-color:var(--accent); color:var(--ink-soft); }
.dq-btn--gold{ background:var(--accent); border-color:var(--accent); color:var(--ink-soft); }
.dq-btn--gold:hover{ background:var(--accent-deep); border-color:var(--accent-deep); color:var(--paper); }
.dq-btn--ghost{ background:transparent; color:var(--ink-soft); }
.dq-btn--ghost:hover{ background:var(--ink-soft); color:var(--paper); border-color:var(--ink-soft); }
.dq-btn--ghost-ink{ background:transparent; color:var(--paper); border-color:var(--line-strong); }
.dq-btn--ghost-ink:hover{ background:var(--accent); color:var(--ink-soft); border-color:var(--accent); }
.dq-btn .dq-arrow{ transition:transform var(--reveal) var(--ease); }
.dq-btn:hover .dq-arrow{ transform:translateX(4px); }

/* ---- panels — hairline, square, no shadow --------------------------------- */
.dq-panel{ border:1px solid var(--line-strong); background:var(--paper); padding:clamp(28px,4vw,44px); }
.dq-panel--warm{ background:var(--paper-warm); }
.dq-panel--ink{ background:var(--ink-soft); color:var(--paper); border-color:var(--ink-panel); }
.dq-panel--ink .dq-prose{ color:var(--on-ink-soft); }

/* ---- metric cells — values in MONO (the data-brand move) ------------------ */
.dq-metrics{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:1px; background:var(--line-strong); border:1px solid var(--line-strong);
}
.dq-metric{ background:var(--paper); padding:22px 20px; }
.dq-metric__k{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); opacity:.7; margin-bottom:10px; }
.dq-metric__v{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; font-size:clamp(22px,2.4vw,30px); line-height:1; letter-spacing:-.02em; color:var(--ink-soft); }
.dq-metric__n{ font-family:var(--mono); font-size:10px; letter-spacing:.04em; color:var(--ink-soft); opacity:.62; margin-top:8px; }
.dq-metric__v.is-good{ color:var(--green); }
.dq-metric__v.is-warn{ color:var(--accent-deep); }
.dq-metric__v.is-risk{ color:var(--red); }

/* ---- verdict block -------------------------------------------------------- */
.dq-verdict{
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  padding:22px 26px; border:1px solid var(--line-strong); background:var(--ink-soft); color:var(--paper);
}
.dq-verdict__word{ font-family:var(--display); font-weight:500; font-size:clamp(34px,4vw,48px); line-height:.92; letter-spacing:-.02em; }
.dq-verdict__meta{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-bright); margin-top:10px; }
.dq-verdict.is-buy{  box-shadow:inset 4px 0 0 var(--green); }
.dq-verdict.is-review{ box-shadow:inset 4px 0 0 var(--accent); }
.dq-verdict.is-walk{ box-shadow:inset 4px 0 0 var(--red); }

/* ---- traffic-light pill --------------------------------------------------- */
.dq-tl{ display:inline-block; padding:4px 11px; font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; border-radius:var(--radius); }
.dq-tl.buy{ background:var(--green); color:var(--paper); }
.dq-tl.review{ background:var(--accent); color:var(--ink-soft); }
.dq-tl.walk{ background:var(--red); color:var(--paper); }

/* ---- score bar (sub-scores) ----------------------------------------------- */
.dq-bar{ position:relative; height:2px; background:var(--line-strong); margin-top:12px; }
.dq-bar__fill{ position:absolute; inset:0 auto 0 0; height:100%; background:var(--accent); width:0; transition:width var(--reveal) var(--ease); }

/* ============================================================================
   SCROLL-REVEAL — slow, var(--reveal) on var(--ease)
   ============================================================================ */
.dq-reveal{ opacity:0; transform:translateY(22px); transition:opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); will-change:opacity,transform; }
.dq-reveal.is-in{ opacity:1; transform:none; }
.dq-reveal[data-d="1"]{ transition-delay:.08s; }
.dq-reveal[data-d="2"]{ transition-delay:.16s; }
.dq-reveal[data-d="3"]{ transition-delay:.24s; }
.dq-reveal[data-d="4"]{ transition-delay:.32s; }

/* ============================================================================
   MARQUEE — slow suburb-name divider (~50s)
   ============================================================================ */
.dq-marquee{ overflow:hidden; border-top:1px solid var(--ink-rule); border-bottom:1px solid var(--ink-rule); padding:18px 0; background:var(--paper); }
.dq-marquee__track{ display:inline-flex; white-space:nowrap; will-change:transform; animation:dq-march 50s linear infinite; }
.dq-marquee__item{ font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(24px,3vw,38px); color:var(--ink-soft); opacity:.34; padding:0 .5em; }
.dq-marquee__item::after{ content:"§"; font-family:var(--mono); font-style:normal; font-size:.5em; color:var(--accent); vertical-align:middle; margin-left:.9em; opacity:.8; }
@keyframes dq-march{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============================================================================
   COUNTED PRELOADER — "Compiling report 00 → 100"
   ============================================================================ */
.dq-preloader{ position:fixed; inset:0; z-index:9999; background:var(--ink); color:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px;
  transition:opacity .6s var(--ease), visibility .6s var(--ease); }
.dq-preloader.is-done{ opacity:0; visibility:hidden; }
.dq-preloader__label{ font-family:var(--mono); font-size:11px; letter-spacing:.32em; text-transform:uppercase; color:var(--accent-bright); }
.dq-preloader__count{ font-family:var(--mono); font-weight:500; font-variant-numeric:tabular-nums; font-size:clamp(64px,13vw,150px); line-height:1; letter-spacing:-.03em; }
.dq-preloader__sub{ font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--on-ink-mute); }
.dq-preloader__bar{ width:min(340px,60vw); height:1px; background:var(--line-ink); position:relative; }
.dq-preloader__bar i{ position:absolute; inset:0 auto 0 0; height:100%; width:0; background:var(--accent); }

/* ============================================================================
   PINNED SCROLL-ZOOM HERO
   ============================================================================ */
.dq-zoom{ position:relative; height:100vh; overflow:hidden; background:var(--ink); }
.dq-zoom__media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform-origin:center center; will-change:transform; transform:scale(.62); }
.dq-zoom__scrim{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(21,21,15,.34) 0%, rgba(21,21,15,.12) 38%, rgba(21,21,15,.62) 100%); pointer-events:none; }
.dq-zoom__cap{ position:absolute; left:0; right:0; bottom:clamp(28px,5vw,56px); z-index:2; }

/* ============================================================================
   FOCUS / A11Y
   ============================================================================ */
:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:3px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width:900px){
  .dq-metrics{ grid-template-columns:repeat(3,1fr); }
  .dq-wrap{ padding:0 22px; }
}
@media (max-width:560px){
  .dq-metrics{ grid-template-columns:repeat(2,1fr); }
  body{ font-size:16px; }
}

/* ============================================================================
   REDUCED MOTION — honour the user's setting everywhere
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .dq-reveal{ opacity:1; transform:none; }
  .dq-marquee__track{ animation:none; }
  .dq-zoom{ height:auto; }
  .dq-zoom__media{ position:relative; transform:none !important; height:clamp(360px,62vh,640px); }
}