/* ============================================================================
   TRADENAKSHA DESIGN SYSTEM — v4 "Hex Sigil"
   Matched to the official TradeNaksha logo: hexagonal sapphire/green/gold
   geometry, circuit core, elegant gold serif wordmark.
   Single source of truth for every page on tradenaksha.com
   ----------------------------------------------------------------------------
   HOW TO USE
   1. Every page links this file. Pages must not define their own colors,
      fonts, radii, shadows or spacing — only compose the components below.
   2. Page-specific layout is allowed (grids, ordering) but must be built
      from the tokens (var(--space-*), var(--r-*), etc.).
   3. New components get added HERE, documented, then reused everywhere.

   DESIGN DECISIONS (the "why")
   ─ Palette source: the TradeNaksha brand artwork — an engineered geometric
     orb in deep navy, sapphire blue, emerald green and metallic gold with
     circuit-trace linework. The palette below is sampled from it:
        navy   → surfaces and depth (the backdrop)
        gold   → the "precision metal" accent: CTAs, eyebrows, hairlines
        sapphire / emerald → the two facet hues: cards, icons, status
   ─ Ornament language: faceted triangles + circuit-trace geometry, used as
     quiet, low-opacity texture and one hero medallion. Circuitry says
     "technology" honestly; it is not finance, charts, maps or blueprints.
   ─ Positioning unchanged: an engineering company. So the jewel palette is
     applied with restraint — hairline gold, deep grounds, generous space —
     never gradient-heavy or ornamental for its own sake.
   ─ Type: Archivo display / IBM Plex Sans body / IBM Plex Mono labels.
     The mono voice now renders in gold: engraved-metal metadata.
   ============================================================================ */


/* ============================================================================
   1. TOKENS
   ============================================================================ */
:root{
  /* ---- Color: navy grounds (sampled from artwork backdrop) --------------- */
  --navy:           #0A1424;   /* deepest ground — dark sections, footer     */
  --navy-2:         #101E33;   /* raised dark surface (cards on dark)        */
  --navy-3:         #172943;   /* highest dark surface (inputs, hovers)      */

  /* ---- Color: light grounds (warm ivory — complements gold) -------------- */
  --paper:          #F7F5EE;   /* page background on light sections          */
  --paper-2:        #EFECE1;   /* recessed light surface                     */
  --white:          #FFFEFA;   /* cards on light                             */

  /* ---- Color: text -------------------------------------------------------- */
  --text:           #101C2F;   /* primary text on light (navy-cast ink)      */
  --text-muted:     #4E5A6E;
  --text-inverse:   #F2F1EA;   /* primary text on navy                       */
  --text-inverse-muted: #93A0B4;

  /* ---- Color: gold (the precision-metal accent) ---------------------------
     Gold is the brand's voice of craft. Three grades:
       --gold        bright metal — on navy: lines, labels, ornament
       --gold-btn    button surface (navy text on top — AA contrast)
       --gold-deep   gold as TEXT on light grounds (darkened for contrast)  */
  --gold:           #D4AF5E;
  --gold-btn:       #C29B45;
  --gold-strong:    #AA8433;   /* button hover / pressed                     */
  --gold-deep:      #79601F;
  --gold-tint:      #F3EBD7;   /* subtle gold wash on light                  */

  /* ---- Color: facet hues (emerald replaces sapphire as primary accent) --- */
  --sapphire:       #0F5C3F;   /* CHANGED: deep emerald replaces blue        */
  --sapphire-deep:  #084C3A;   /* CHANGED: darker emerald (for contrast)     */
  --sapphire-glow:  #4DB896;   /* CHANGED: lighter emerald (accents/hover)   */
  --emerald:        #1A7A54;   /* ADJUSTED: medium emerald (complementary)   */
  --emerald-deep:   #0F5C3F;   /* ADJUSTED: aligns with new primary          */
  --emerald-glow:   #4DB896;   /* ADJUSTED: luxury emerald glow              */
  --cyan:           #3EC9DC;   /* tiny node accents only (unchanged)         */

  /* ---- Color: lines --------------------------------------------------------
     Hairlines now carry emerald tint on dark grounds for cohesion.         */
  --line:           #E2DDCC;
  --line-strong:    #C9C2A9;
  --line-dark:      #2A3A55;   /* preserved for text contrast                */
  --line-gold-dark: rgba(212,175,94,.28);  /* gold hairline on navy         */
  --line-emerald:   rgba(15,92,63,.25);    /* emerald hairline on navy      */

  /* ---- Color: status (functional only) ------------------------------------ */
  --ok:             #3D7A2F;
  --ok-dark:        #82C368;
  --warn:           #B97E12;
  --error:          #B3372F;

  /* ---- Typography   /* ---- Typography ------------------------------------------------------------
     Display now mirrors the logo wordmark: an elegant high-contrast serif
     (Cormorant Garamond), used ONLY at large sizes (h1, h2, logo) where its
     detail survives. UI, card titles and body stay IBM Plex Sans so the
     site still reads "engineering", not "luxury hotel".                    */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  --fs-h1: clamp(2.9rem, 6vw, 4.6rem);
  --fs-h2: clamp(2.1rem, 4vw, 3rem);
  --fs-h3: 1.3rem;
  --fs-h4: 1.05rem;
  --fs-lead: clamp(1.05rem, 1.6vw, 1.2rem);
  --fs-body: 1rem;
  --fs-small: .9rem;
  --fs-mono: .78rem;

  --lh-tight: 1.08;
  --lh-body: 1.65;
  --track-display: -0.005em;
  --track-mono: 0.12em;

  /* ---- Spacing scale (4px base) — s1..s12 ---------------------------------- */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10: 128px; --s11: 160px; --s12: 192px;

  --section-pad: clamp(var(--s9), 11vw, var(--s11));
  --section-head-gap: clamp(var(--s7), 6vw, var(--s8));

  /* ---- Radii ---------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  /* ---- Shadows --------------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgba(10,20,36,.06), 0 4px 12px rgba(10,20,36,.06);
  --shadow-2: 0 2px 4px rgba(10,20,36,.08), 0 18px 44px -14px rgba(10,20,36,.28);

  /* ---- Motion ----------------------------------------------------------------- */
  --ease: cubic-bezier(.25,.8,.3,1);
  --t-fast: .18s;
  --t-med:  .3s;
  --t-slow: .7s;

  /* ---- Layout (breakpoints in @media: 560 / 760 / 900 / 1000) ----------------- */
  --w-max: 1160px;
  --w-prose: 68ch;
  --pad-x: clamp(20px, 5vw, 44px);

  /* ---- Ornament: tileable facet pattern (triangles from the orb) --------------
     Two ready-made backgrounds. Opacity is deliberately near-subliminal:
     texture you feel more than see. Use via .pattern-facets / -light.       */
  --pattern-facets-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Cg fill='none' stroke='%23D4AF5E' stroke-opacity='.07'%3E%3Cpath d='M0 56L32 0l32 56z'/%3E%3Cpath d='M-32 56L0 0l32 56zM32 56L64 0l96 56z'/%3E%3C/g%3E%3C/svg%3E");
  --pattern-facets-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='56'%3E%3Cg fill='none' stroke='%23101C2F' stroke-opacity='.045'%3E%3Cpath d='M0 56L32 0l32 56z'/%3E%3Cpath d='M-32 56L0 0l32 56z'/%3E%3C/g%3E%3C/svg%3E");
}


/* ============================================================================
   2. RESET + BASE
   ============================================================================ */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img, svg, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
ul, ol{ list-style:none; }
::selection{ background:var(--sapphire); color:#fff; }

:focus-visible{ outline:2px solid var(--sapphire); outline-offset:3px; border-radius:4px; }
.on-dark :focus-visible{ outline-color:var(--gold); }

.skip-link{
  position:absolute; left:var(--s4); top:-56px; z-index:300;
  background:var(--navy); color:var(--text-inverse); padding:var(--s3) var(--s5);
  border-radius:var(--r-sm); font-size:var(--fs-small);
  transition:top var(--t-fast) var(--ease);
}
.skip-link:focus{ top:var(--s4); }


/* ============================================================================
   3. TYPOGRAPHY COMPONENTS
   ============================================================================ */
h1, h2{
  font-family:var(--font-display);
  font-weight:700;
  letter-spacing:var(--track-display);
  line-height:var(--lh-tight);
  text-wrap:balance;
}
h1{ font-size:var(--fs-h1); }
h2{ font-size:var(--fs-h2); }
h3, h4{
  font-family:var(--font-body);
  font-weight:600;
  letter-spacing:-0.01em;
  line-height:1.3;
  text-wrap:balance;
}
h3{ font-size:var(--fs-h3); }
h4{ font-size:var(--fs-h4); line-height:1.4; }

.lead{ font-size:var(--fs-lead); color:var(--text-muted); max-width:var(--w-prose); }
.on-dark .lead{ color:var(--text-inverse-muted); }

/* .label — the engineering voice: mono, uppercase, letterspaced, gold.
   On light grounds it uses --gold-deep for contrast (engraved bronze). */
.label{
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);
  text-transform:uppercase;
  font-weight:500;
}

/* .eyebrow — section marker above every h2. Gold rule + gold text. */
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-mono);
  letter-spacing:var(--track-mono);
  text-transform:uppercase;
  font-weight:500;
  color:var(--gold-deep);
  display:inline-flex; align-items:center; gap:var(--s3);
  margin-bottom:var(--s5);
}
.eyebrow::before{ content:""; width:20px; height:2px; background:currentColor; }
.on-dark .eyebrow{ color:var(--gold); }

.prose{ max-width:var(--w-prose); }
.prose p + p{ margin-top:var(--s4); }
.prose a{ color:var(--sapphire); border-bottom:1px solid currentColor; }
.on-dark .prose a{ color:var(--sapphire-glow); }


/* ============================================================================
   4. LAYOUT PRIMITIVES
   ============================================================================ */
.wrap{ max-width:var(--w-max); margin-inline:auto; padding-inline:var(--pad-x); }

.section{ padding-block:var(--section-pad); }
.section--flush{ padding-top:0; }

.section-head{ max-width:720px; margin-bottom:var(--section-head-gap); }
.section-head h2{ margin-bottom:var(--s4); }

/* .on-dark — navy region. All components adapt automatically. */
.on-dark{ background:var(--navy); color:var(--text-inverse); }

/* .pattern-facets — the orb's triangular facets as near-subliminal texture.
   Combine with .on-dark for gold facets on navy, or use -light on paper.   */
.pattern-facets{ background-image:var(--pattern-facets-dark); }
.pattern-facets-light{ background-image:var(--pattern-facets-light); }

.grid{ display:grid; gap:var(--s5); grid-template-columns:repeat(var(--cols, 3), 1fr); }
@media (max-width:1000px){ .grid{ grid-template-columns:repeat(min(var(--cols, 3), 2), 1fr); } }
@media (max-width:640px){ .grid{ grid-template-columns:1fr; } }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s7), 6vw, var(--s9)); align-items:center; }
@media (max-width:900px){ .split{ grid-template-columns:1fr; } }


/* ============================================================================
   5. BUTTONS
   Primary is gold metal with navy text (AA contrast) — the brand handshake.
   ============================================================================ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  font-family:var(--font-body); font-weight:600; font-size:.95rem;
  padding:13px 26px; border-radius:var(--r-md);
  transition:background var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn svg{ transition:transform var(--t-fast) var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn--primary{ background:var(--gold-btn); color:var(--navy); }
.btn--primary:hover{ background:var(--gold-strong); }

.btn--secondary{ border:1px solid var(--line-strong); color:var(--text); background:transparent; }
.btn--secondary:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }
.on-dark .btn--secondary{ border-color:var(--line-gold-dark); color:var(--text-inverse); }
.on-dark .btn--secondary:hover{ border-color:var(--gold); color:var(--gold); }

.btn--quiet{
  padding:0; border-radius:0; gap:var(--s2);
  color:var(--sapphire); font-size:var(--fs-small);
  border-bottom:1px solid transparent;
}
.btn--quiet:hover{ border-bottom-color:currentColor; }
.on-dark .btn--quiet{ color:var(--gold); }


/* ============================================================================
   6. CARDS
   On navy, cards carry a gold hairline top edge — a facet catching light.
   ============================================================================ */
.card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s6);
}
.on-dark .card{
  background:var(--navy-2);
  border-color:var(--line-dark);
  border-top-color:var(--line-gold-dark);
}

.card--link{
  display:block;
  transition:border-color var(--t-med) var(--ease),
             box-shadow var(--t-med) var(--ease),
             transform var(--t-med) var(--ease);
}
.card--link:hover{
  border-color:var(--gold-btn);
  box-shadow:var(--shadow-2);
  transform:translateY(-3px);
}
.on-dark .card--link:hover{ border-color:var(--gold); }

.card .card-kicker{ margin-bottom:var(--s4); color:var(--gold-deep); }
.on-dark .card .card-kicker{ color:var(--gold); }
.card h3, .card h4{ margin-bottom:var(--s2); }
.card p{ font-size:var(--fs-small); color:var(--text-muted); }
.on-dark .card p{ color:var(--text-inverse-muted); }
.card .btn--quiet{ margin-top:var(--s4); }

/* .icon-tile — feature-card icon. Alternate sapphire / emerald via modifier
   to echo the orb's two facet hues (default sapphire).                     */
.icon-tile{
  width:40px; height:40px; border-radius:var(--r-sm);
  background:rgba(36,86,196,.1); color:var(--sapphire);
  display:grid; place-items:center; margin-bottom:var(--s4);
}
.icon-tile--emerald{ background:rgba(78,140,63,.12); color:var(--emerald-deep); }
.on-dark .icon-tile{ background:rgba(110,150,232,.12); color:var(--sapphire-glow); }
.on-dark .icon-tile--emerald{ background:rgba(130,195,104,.12); color:var(--emerald-glow); }


/* ============================================================================
   7. CHIPS + STATUS
   ============================================================================ */
.chip{
  display:inline-flex; align-items:center; gap:var(--s2);
  border:1px solid var(--line-strong); border-radius:100px;
  padding:9px 18px; font-size:var(--fs-small); font-weight:500;
  background:var(--white);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:hover{ border-color:var(--gold-btn); color:var(--gold-deep); }
.on-dark .chip{ background:var(--navy-2); border-color:var(--line-dark); }
.on-dark .chip:hover{ border-color:var(--gold); color:var(--gold); }

.status{
  font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:var(--track-mono); text-transform:uppercase;
  display:inline-flex; align-items:center; gap:var(--s2);
}
.status::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; }
.status--ok{ color:var(--ok); }
.on-dark .status--ok{ color:var(--ok-dark); }
.status--gold{ color:var(--gold-deep); }
.on-dark .status--gold{ color:var(--gold); }


/* ============================================================================
   8. TERMINAL PANEL
   Signature component, restyled as engraved navy + gold. Emerald = success,
   sapphire = keywords, gold = prompt. Use sparingly: hero, case studies, 404.
   ============================================================================ */
.terminal{
  background:var(--navy);
  border:1px solid var(--line-gold-dark);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-2);
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--text-inverse);
}
.terminal-bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--s3) var(--s4);
  border-bottom:1px solid var(--line-gold-dark);
  color:var(--gold);
  font-size:var(--fs-mono); letter-spacing:var(--track-mono); text-transform:uppercase;
}
.terminal-bar .dots{ display:flex; gap:6px; }
.terminal-bar .dots i{ width:9px; height:9px; border-radius:50%; background:var(--navy-3); border:1px solid var(--line-gold-dark); }
.terminal-body{ padding:var(--s5) var(--s5) var(--s6); display:grid; gap:10px; }
.terminal-line{
  display:flex; align-items:baseline; gap:var(--s3);
  opacity:0; transform:translateY(4px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.terminal.on .terminal-line{ opacity:1; transform:none; }
.terminal-line .t-prompt{ color:var(--gold); user-select:none; }
.terminal-line .t-ok{ color:var(--emerald-glow); }
.terminal-line .t-key{ color:var(--sapphire-glow); }
.terminal-line .t-dim{ color:var(--text-inverse-muted); }
.terminal-caret{
  display:inline-block; width:8px; height:14px; background:var(--gold);
  animation:caret 1.1s steps(1) infinite; vertical-align:text-bottom;
}
@keyframes caret{ 50%{ opacity:0; } }


/* ============================================================================
   9. MEDALLION
   The hero ornament: the brand orb rebuilt as crisp inline SVG — faceted
   ring (sapphire/emerald), engraved gold circuit traces, gold core.
   Markup pattern (see homepage):
     <div class="medallion"><svg class="medallion-svg">…</svg></div>
   CSS classes inside the SVG:
     .md-gold-line (strokes) .md-sapphire .md-sapphire-d .md-emerald
     .md-emerald-d (facet fills) .md-node (cyan nodes) .md-ring (rotates)
   Up-close crop: place inside an overflow:hidden hero and offset it.
   ============================================================================ */
.medallion{ position:relative; }
.medallion-svg{ width:100%; height:auto; display:block; }
.md-gold-line{ fill:none; stroke:var(--gold); }
.md-gold-fill{ fill:var(--gold); }
.md-sapphire{ fill:var(--sapphire); }
.md-sapphire-d{ fill:var(--sapphire-deep); }
.md-emerald{ fill:var(--emerald); }
.md-emerald-d{ fill:var(--emerald-deep); }
.md-navy{ fill:var(--navy-2); }
.md-node{ fill:var(--cyan); }
.md-sapphire-line{ fill:none; stroke:var(--sapphire); }
.md-green-line{ fill:none; stroke:var(--emerald); }
.md-ring{
  transform-origin:center;
  animation:md-rotate 140s linear infinite;
}
@keyframes md-rotate{ to{ transform:rotate(360deg); } }


/* ============================================================================
   9b. ORNAMENT DIVIDER
   The flourish beneath the logo wordmark: gold hairline, angle brackets,
   central diamond. Use sparingly — footer, About, section closings.
   Markup: <div class="ornament" aria-hidden="true"><i></i><span>◇</span><i></i></div>
   ============================================================================ */
.ornament{
  display:flex; align-items:center; justify-content:center; gap:var(--s3);
  color:var(--gold-deep);
}
.on-dark .ornament, .footer .ornament{ color:var(--gold); }
.ornament i{ display:block; height:1px; width:min(120px, 28vw); background:currentColor; opacity:.55; }
.ornament span{
  font-size:.8rem; line-height:1; letter-spacing:.35em; text-indent:.35em;
  display:inline-flex; align-items:center;
}


/* ============================================================================
   10. NAVIGATION (identical on every page)
   Dark-first: the nav lives on navy (hero is navy) and stays navy on scroll.
   ============================================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  color:var(--text-inverse);
  transition:background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.nav.scrolled{
  background:rgba(10,20,36,.9);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 1px 0 var(--line-gold-dark);
}
.nav-inner{ display:flex; align-items:center; justify-content:space-between; height:72px; }

/* Wordmark mirrors the official logo: gold serif. The mark is a slot —
   holds the placeholder hexagram SVG now, the official logo image later:
     <span class="logo-mark"><img src="/assets/logo-mark.png" alt=""></span> */
.logo{
  font-family:var(--font-display); font-weight:700; font-size:1.35rem;
  letter-spacing:.01em;
  color:var(--gold);
  display:inline-flex; align-items:center; gap:var(--s3);
}
.logo-mark{ width:34px; height:34px; flex-shrink:0; display:block; }
.logo-mark svg, .logo-mark img{ width:100%; height:100%; display:block; }
.logo em{ font-style:normal; color:var(--gold); }

.nav-links{ display:flex; align-items:center; gap:var(--s6); }
.nav-links a{
  font-size:var(--fs-small); font-weight:500; color:var(--text-inverse-muted);
  transition:color var(--t-fast);
}
.nav-links a:hover, .nav-links a[aria-current="page"]{ color:var(--gold); }
.nav .btn{ padding:10px 20px; font-size:.88rem; }
.nav-cta{ display:flex; align-items:center; gap:var(--s4); }

.nav-toggle{ display:none; width:44px; height:44px; position:relative; z-index:110; }
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:2px; background:var(--gold);
  border-radius:2px;
  transition:transform var(--t-med) var(--ease), opacity var(--t-fast), top var(--t-med) var(--ease);
}
.nav-toggle span:nth-child(1){ top:15px; }
.nav-toggle span:nth-child(2){ top:21px; }
.nav-toggle span:nth-child(3){ top:27px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ top:21px; transform:rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ top:21px; transform:rotate(-45deg); }

@media (max-width:900px){
  .nav-toggle{ display:block; }
  .nav-menu{
    position:fixed; inset:0; background:var(--navy);
    background-image:var(--pattern-facets-dark);
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    padding:var(--pad-x); gap:var(--s2);
    transform:translateY(-102%); transition:transform .45s var(--ease);
  }
  .nav-menu.open{ transform:translateY(0); }
  .nav-links{ flex-direction:column; align-items:flex-start; gap:var(--s2); }
  .nav-links a{
    font-family:var(--font-display); font-weight:600; font-size:1.8rem; color:var(--text-inverse);
    padding:var(--s2) 0;
  }
  .nav-cta{ margin-top:var(--s6); }
}
@media (min-width:901px){
  .nav-menu{ display:flex; align-items:center; gap:var(--s7); }
}


/* ============================================================================
   11. FORMS
   ============================================================================ */
.form{ display:grid; gap:var(--s4); }
.field{ display:grid; gap:var(--s2); }
.field label{ font-size:var(--fs-small); font-weight:500; color:var(--text-muted); }
.on-dark .field label{ color:var(--text-inverse-muted); }

.field input, .field select, .field textarea{
  font:inherit; width:100%;
  color:var(--text);
  background:var(--white);
  border:1px solid var(--line-strong);
  border-radius:var(--r-sm);
  padding:12px 14px;
  transition:border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field textarea{ min-height:110px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold-btn); box-shadow:0 0 0 3px var(--gold-tint);
}
.on-dark .field input, .on-dark .field select, .on-dark .field textarea{
  background:var(--navy-3); border-color:var(--line-dark); color:var(--text-inverse);
}
.on-dark .field input:focus, .on-dark .field select:focus, .on-dark .field textarea:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(212,175,94,.18);
}
.field select{
  appearance:none;
  background-image:linear-gradient(45deg, transparent 50%, currentColor 50%),
                   linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:calc(100% - 19px) 55%, calc(100% - 14px) 55%;
  background-size:5px 5px; background-repeat:no-repeat;
}
.form-hint{ font-size:.82rem; color:var(--text-muted); }
.on-dark .form-hint{ color:var(--text-inverse-muted); }


/* ============================================================================
   12. LIST ROWS
   ============================================================================ */
.rows{ border-top:1px solid var(--line); }
.on-dark .rows{ border-color:var(--line-gold-dark); }
.row{
  display:grid; grid-template-columns:200px 1fr;
  gap:var(--s5); padding-block:var(--s6);
  border-bottom:1px solid var(--line);
}
.on-dark .row{ border-color:var(--line-gold-dark); }
.row .row-key{ color:var(--gold-deep); }
.on-dark .row .row-key{ color:var(--gold); }
.row h3{ margin-bottom:var(--s2); }
.row p{ color:var(--text-muted); max-width:var(--w-prose); }
.on-dark .row p{ color:var(--text-inverse-muted); }
@media (max-width:640px){ .row{ grid-template-columns:1fr; gap:var(--s3); } }


/* ============================================================================
   13. FOOTER (identical on every page)
   ============================================================================ */
.footer{
  background:var(--navy); color:var(--text-inverse-muted);
  background-image:var(--pattern-facets-dark);
  padding-block:var(--s8) var(--s6);
  border-top:1px solid var(--line-gold-dark);
}
.footer .logo{ color:var(--text-inverse); margin-bottom:var(--s4); }
.footer-grid{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--s7); margin-bottom:var(--s8);
}
.footer-brand p{ font-size:var(--fs-small); max-width:32ch; }
.footer-col h4{
  font-family:var(--font-mono); font-size:var(--fs-mono);
  letter-spacing:var(--track-mono); text-transform:uppercase;
  color:var(--gold); font-weight:500; margin-bottom:var(--s4);
}
.footer-col ul{ display:grid; gap:var(--s3); }
.footer-col a{ font-size:var(--fs-small); transition:color var(--t-fast); }
.footer-col a:hover{ color:var(--gold); }
.footer-col a.hl{ color:var(--gold); }
.footer-base{
  border-top:1px solid var(--line-gold-dark); padding-top:var(--s5);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--s3);
  font-size:.82rem;
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s6); } }


/* ============================================================================
   14. MOTION
   ============================================================================ */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
.reveal.on{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s; }
.reveal-d2{ transition-delay:.2s; }
.reveal-d3{ transition-delay:.3s; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001s !important;
    animation-iteration-count:1 !important;
    transition-duration:.001s !important;
  }
  .reveal, .terminal-line{ opacity:1 !important; transform:none !important; }
  .terminal-caret{ animation:none; }
  .md-ring{ animation:none; }
}


/* ============================================================================
   15. UTILITIES (small, intentional set)
   ============================================================================ */
.text-muted{ color:var(--text-muted); }
.on-dark .text-muted{ color:var(--text-inverse-muted); }
.text-gold{ color:var(--gold-deep); }
.on-dark .text-gold{ color:var(--gold); }
.mt-2{ margin-top:var(--s2); } .mt-4{ margin-top:var(--s4); }
.mt-6{ margin-top:var(--s6); } .mt-8{ margin-top:var(--s8); }
.max-prose{ max-width:var(--w-prose); }


/* ================================================================================
   LOGO & WORDMARK (production freeze version 1.0)
   ================================================================================ */

.logo {
  display: flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  color: var(--text-inverse);
  font-size: var(--fs-h3);
  font-weight: 600;
  transition: opacity 200ms ease;
}

.logo:hover { opacity: 0.85; }

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  color: var(--gold);
}

.logo-mark svg { 
  width: 100%; 
  height: 100%;
  stroke: currentColor;
}

.logo-wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--gold);
  font-family: Georgia, "Cormorant Garamond", serif;
  font-size: 18px;
  font-weight: 600;
  font-style: italic;
  letter-spacing: -0.5px;
  min-width: 140px;
}

.logo-wordmark svg { 
  width: 100%; 
  height: auto;
  fill: currentColor;
}