/* ═══════════════════════════════════════════════════════════════
   MAIN SITE STYLESHEET — "DARBAR"

   Implements the AmritVastu mockup, homepage direction 1b: dark ink
   hero, asymmetric editorial grid, gold ticker, services as numbered
   rows, parchment body, light footer.

   Palette   parchment · sindoor red · temple gold · ink brown
   Type      Marcellus (display) · Cormorant Garamond (body) · Jost (UI)

   Three rules worth knowing before you restyle:
     1. Anything marked "REQUIRED" below is behavioural, not cosmetic
        — the JS toggles those classes. Keep the property that does
        the showing/hiding; restyle everything else freely.
     2. Colours, spacing and fonts all come from the tokens in :root.
        Change those first — most of the page follows.
     3. Email templates do NOT use this file (mail clients ignore
        external CSS). Their colours live in config/site.php.
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── DESIGN TOKENS — start here ───────────────────────────────── */
:root {
  /* Ink & text */
  --ink:        #2E2018;   /* primary text                        */
  --ink-mid:    #5C4A38;   /* secondary text                      */
  --ink-light:  #8A6A32;   /* muted text, eyebrows, captions      */
  --ink-body:   #4A3728;   /* long-form body copy                 */

  /* Brand */
  --accent:     #7A2718;   /* sindoor red — links, marks, rules   */
  --accent-alt: #B8862F;   /* temple gold — hover, numerals       */
  --sindoor:    #C0392B;   /* brighter red — primary CTA on dark  */
  --gold:       #C9A961;   /* gold band, gold buttons             */
  --gold-soft:  #E5C68F;   /* gold text on dark                   */
  --gold-dim:   #A98A4F;   /* muted gold label on dark            */

  /* Surfaces */
  --paper:      #F7EEDC;   /* page background — parchment         */
  --paper-alt:  #EFE2C8;   /* alternating band                    */
  --paper-warm: #F3E7D0;   /* warm panel, inset blocks            */
  --card:       #FFFBF3;   /* card background                     */
  --line:       #E4D3B2;   /* borders & rules on parchment        */
  --line-soft:  #E0CFAC;   /* lighter rule                        */

  /* Dark side */
  --dark:       #231A14;   /* hero, nav, inverted sections        */
  --dark-panel: #2C211A;   /* raised panel inside a dark section  */
  --dark-line:  #3A2C21;   /* border on dark                      */
  --dark-line-2:#6B5237;   /* brighter border on dark (ghost btn) */
  --on-dark:    #C7B392;   /* body copy on dark                   */
  --on-dark-dim:#B9A382;   /* muted copy on dark                  */

  /* Neutrals used on both sides */
  --cream:      #F7EEDC;   /* headings & bright text on dark      */
  --muted:      #B0A08C;   /* input placeholder on light          */
  --muted-dark: #7A6A55;   /* input placeholder on dark           */

  --ok:         #2F6B4F;   /* success message                     */
  --bad:        #A5342A;   /* error message                       */

  --font-body:    'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-display: 'Marcellus', Georgia, serif;
  --font-ui:      'Jost', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --gap:      1.5rem;
  --pad-x:    5vw;         /* horizontal page padding */
  --section-y: 5.5rem;     /* vertical section rhythm */
  --maxw:     1280px;
  --radius:   0;           /* the design is deliberately square-cornered */

  --nav-h:    92px;        /* fixed nav height — hero/page tops clear this */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  font-size: 1.06rem;      /* Cormorant runs small — this is its "16px" */
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: var(--accent); }
a:hover { color: var(--accent-alt); }
::selection { background: var(--accent); color: var(--paper); }

/* Shared section wrapper */
.section-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
section        { padding: var(--section-y) 0; }
/* Nav tabs jump to homepage sections; keep the heading clear of the fixed nav */
section[id]    { scroll-margin-top: var(--nav-h); }

.section-label { font-family: var(--font-ui); font-size: .7rem; font-weight: 400;
                 letter-spacing: .3em; text-transform: uppercase;
                 color: var(--ink-light); margin-bottom: 1rem; }
.section-title { font-family: var(--font-display); font-size: 2.6rem; font-weight: 400;
                 line-height: 1.18; margin-bottom: 1rem; color: var(--ink);
                 text-wrap: pretty; }
.section-title em { font-style: normal; color: var(--accent); }

/* The recurring gold diamond used as a section ornament */
.ornament { color: var(--accent-alt); font-size: .9rem; margin-top: 1rem; }

/* ── SCROLL REVEAL — REQUIRED ─────────────────────────────────
   reveal.js adds .visible when the element scrolls into view.
   Keep a hidden→shown transition of some kind, or delete both
   rules to disable the effect entirely (the class is harmless). */
.reveal          { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible  { opacity: 1; transform: none; }
.reveal-delay-1  { transition-delay: .1s; }
.reveal-delay-2  { transition-delay: .2s; }
.reveal-delay-3  { transition-delay: .3s; }
.reveal-delay-4  { transition-delay: .4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── HONEYPOT — REQUIRED ──────────────────────────────────────
   Anti-bot field. It must stay in the DOM and stay invisible.
   Do not use display:none — some bots skip those. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── INTRO SPLASH — REQUIRED ──────────────────────────────────
   splash.js removes the node after 3.3s, but this animation must
   hide it on its own so the site can never be stuck behind it.
   If you shorten the animation, shorten the timeout in splash.js. */
.splash-intro {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--dark);
  animation: splashOut .6s ease 2.4s forwards;
}
.splash-intro img { width: clamp(240px, 45vmin, 600px); }
@keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* ── NAV ──────────────────────────────────────────────────────
   nav.js toggles .scrolled past 60px of scroll. The homepage nav
   sits transparent over the dark hero; inner pages ship with
   .scrolled already applied so they are solid from the start. */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  padding: 1.4rem var(--pad-x);
  background: transparent;
  border-bottom: 1px solid transparent;
  color: var(--paper);
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
nav.site-nav.scrolled {
  background: var(--dark);
  border-bottom-color: var(--dark-line);
  padding-top: 1rem; padding-bottom: 1rem;
}

.nav-logo      { display: flex; align-items: center; gap: .9rem; text-decoration: none; color: inherit; }
.nav-logo img  { height: 44px; width: auto; }
.nav-logo-text { font-family: var(--font-display); font-size: 1.45rem; line-height: 1;
                 letter-spacing: .05em; color: var(--cream); }
.nav-logo-text span {
  display: block; margin-top: .4rem;
  font-family: var(--font-ui); font-size: .58rem; font-weight: 300;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-dim);
}

.nav-links   { display: flex; gap: 2rem; list-style: none; }
.nav-links a { font-family: var(--font-ui); font-size: .8rem; font-weight: 300;
               letter-spacing: .09em; text-transform: uppercase;
               text-decoration: none; color: var(--on-dark);
               padding-bottom: 3px; border-bottom: 1.5px solid transparent; }
.nav-links a:hover,
.nav-links a.is-current { color: var(--gold-soft); border-bottom-color: var(--accent-alt); }

.nav-cta {
  font-family: var(--font-ui); font-size: .76rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: .8rem 1.5rem; border: 1px solid var(--gold); color: var(--gold-soft);
  border-radius: var(--radius); white-space: nowrap;
  transition: background .25s ease, color .25s ease;
}
.nav-cta:hover { background: var(--gold); color: var(--dark); }

.nav-hamburger      { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
.nav-hamburger span { display: block; width: 24px; height: 1.5px; background: var(--on-dark); }

/* ── MOBILE DRAWER — REQUIRED ─────────────────────────────────
   nav.js toggles .open. Keep whatever moves it on/off screen. */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.6rem;
  background: var(--dark); color: var(--paper);
  transform: translateX(100%); transition: transform .35s ease;
}
.mobile-nav.open   { transform: none; }
.mobile-nav a      { font-family: var(--font-ui); font-size: 1.05rem; font-weight: 300;
                     text-transform: uppercase; letter-spacing: .12em;
                     color: var(--on-dark); text-decoration: none; }
.mobile-nav a:hover { color: var(--gold-soft); }
.mobile-nav-close  { position: absolute; top: 1.5rem; right: 1.5rem;
                     background: none; border: 0; color: var(--gold-soft);
                     font-size: 2rem; line-height: 1; cursor: pointer; }

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-primary, .btn-secondary {
  display: inline-block; font-family: var(--font-ui); font-size: .8rem; font-weight: 400;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  padding: 1.05rem 2rem; border-radius: var(--radius); cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.btn-primary   { background: var(--accent); color: var(--paper); border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--dark); border-color: var(--dark); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--paper); }

/* On a dark background the pair flips to bright red + gold outline */
.on-dark .btn-primary,
.btn-primary.on-dark   { background: var(--sindoor); border-color: var(--sindoor); color: #FFF7EA; }
.on-dark .btn-primary:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }
.on-dark .btn-secondary,
.btn-secondary.on-dark { color: var(--gold-soft); border-color: var(--dark-line-2); background: transparent; }
.on-dark .btn-secondary:hover { background: var(--gold); border-color: var(--gold); color: var(--dark); }

/* Small uppercase "Details →" link used all over the design */
.link-arrow { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .16em;
              text-transform: uppercase; text-decoration: none; color: var(--accent);
              display: inline-block; }
.link-arrow:hover { color: var(--accent-alt); }

/* ── HERO — 1b "Darbar": dark, asymmetric ─────────────────── */
#hero {
  position: relative;
  background: var(--dark);
  color: var(--cream);
  padding: 0;
}
.hero-bg-pattern,
.mandala-wrap,
.hero-badge-spin { /* decorative slots — fill or delete */ }

.hero-content {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x);
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 4rem;
  align-items: center; min-height: 640px;
}
.hero-left  { padding: calc(var(--nav-h) + 3.5rem) 0 4.5rem; min-width: 0; }   /* min-width: stops the stats ticker widening the column */
.hero-right { padding: calc(var(--nav-h) + 2rem) 0 3rem; min-width: 0; }

/* Eyebrow with the rule to its left, as in the mockup */
.hero-eyebrow {
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--font-ui); font-size: .7rem; font-weight: 300;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 1.6rem;
}
.hero-eyebrow::before { content: ''; width: 44px; height: 1px; background: var(--accent-alt); flex: none; }

.hero-h1 {
  font-family: var(--font-display); font-size: 4rem; font-weight: 400;
  line-height: 1.1; margin-bottom: 1.4rem; color: var(--cream);
  max-width: 16ch; text-wrap: pretty;
}
/* px, not ch — Cormorant's ch is narrow enough that 34ch measured ~300px */
.hero-desc  { color: var(--on-dark); font-size: 1.24rem; line-height: 1.6;
              margin-bottom: 2.4rem; max-width: 520px; text-wrap: pretty; }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap; margin-bottom: 3rem; }

/* The stat row is a single rule-topped line in this direction */
.hero-stats       { padding-top: 1.6rem; border-top: 1px solid var(--dark-line); }
.hero-stats-track { --ticker-gap: 1.8rem; align-items: baseline; }

/* ── TICKER — REQUIRED ───────────────────────────────────────
   .ticker > .ticker-track. hero.js adds .is-ticker (plus a cloned copy of
   the items) only when the line would wrap; otherwise it stays static.
   The -50% loop relies on the track's trailing padding matching its gap.
   .ticker-only children show only while scrolling (e.g. a separator
   between the end of one loop and the start of the next). */
.ticker       { overflow: hidden; }
.ticker-track { display: flex; flex-wrap: wrap; column-gap: var(--ticker-gap, 2rem); }
.ticker-track > * { white-space: nowrap; }
.ticker.is-ticker .ticker-track {
  flex-wrap: nowrap; justify-content: flex-start; width: max-content;
  padding-right: var(--ticker-gap, 2rem);
  animation: ticker 20s linear infinite;
}
.ticker:not(.is-ticker) .ticker-only { display: none; }
@keyframes ticker { to { transform: translateX(-50%); } }
.hero-stat-num   { font-family: var(--font-ui); font-size: .74rem; font-weight: 400;
                   letter-spacing: .16em; text-transform: uppercase; color: var(--gold-dim); }
.hero-stat-label { display: none; }   /* the number line carries its own words */

/* Carousel — REQUIRED
   hero.js toggles .is-active on slides and dots. The slides stack
   absolutely, so the carousel needs an explicit height. In this
   direction it is the tall 4:5 image panel on the right. */
.hero-carousel { position: relative; height: 520px; overflow: hidden;
                 background: var(--dark-panel); border: 1px solid var(--dark-line); }
.hero-slide    { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-slide img       { width: 100%; height: 100%; object-fit: cover; }
.hero-slide-overlay   { position: absolute; inset: 0;
                        background: linear-gradient(transparent 45%, rgba(35,26,20,.88)); }
.hero-slide-cap       { position: absolute; left: 1.8rem; bottom: 1.6rem; right: 1.8rem; color: var(--cream); }
.hero-slide-tag       { font-family: var(--font-ui); font-size: .64rem; font-weight: 300;
                        letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.hero-slide-title     { font-family: var(--font-display); font-size: 1.35rem; margin-top: .4rem; }

.hero-carousel-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 1.1rem; }
.hero-dots   { display: flex; gap: .55rem; }
.hero-dot    { width: 8px; height: 8px; padding: 0; border: 1px solid var(--gold-dim);
               background: transparent; border-radius: 50%; cursor: pointer;
               transition: background .25s ease; }
.hero-dot.is-active { background: var(--gold); border-color: var(--gold); }
.hero-arrows { display: flex; gap: .5rem; }
.hero-arrows button { background: none; border: 1px solid var(--dark-line); color: var(--gold-soft);
                      width: 36px; height: 36px; cursor: pointer; font-size: 1.05rem; line-height: 1;
                      transition: border-color .25s ease, color .25s ease; }
.hero-arrows button:hover { border-color: var(--gold); color: var(--gold); }

/* ── GOLD TICKER BAND ─────────────────────────────────────────
   The .elements-band markup reused as the mockup's gold promise
   strip. .element-desc is optional — omit it for a single line. */
.elements-band {
  padding: 1.1rem var(--pad-x);
  background: var(--gold); color: var(--dark); text-align: center;
}
.elements-band.is-ticker   { padding-left: 0; padding-right: 0; }   /* run edge to edge */
.elements-band-track       { --ticker-gap: 2rem; justify-content: space-between; row-gap: 1rem; }
.element-item   { display: flex; align-items: center; gap: .5rem; }
.element-symbol { font-size: .7rem; color: var(--accent); }
.element-name   { font-family: var(--font-ui); font-size: .72rem; font-weight: 400;
                  letter-spacing: .22em; text-transform: uppercase; }
.element-desc   { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .1em;
                  text-transform: uppercase; opacity: .65; }

/* ── SERVICES — numbered editorial rows ───────────────────── */
#services { background: var(--paper); }

.services-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 2rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--dark); padding-bottom: 1.1rem; margin-bottom: 0;
}
.services-header .section-label { margin-bottom: .5rem; }
.services-header .section-title { font-size: 2.1rem; margin-bottom: 0; }
.services-intro { color: var(--ink-mid); font-size: 1.1rem; max-width: 42ch; }

/* One column of rows, not a card grid */
.services-grid { display: flex; flex-direction: column; }

.service-card {
  display: grid; grid-template-columns: 60px 1.1fr 1.6fr 140px;
  gap: 1.5rem; align-items: center;
  padding: 1.7rem 0; border-bottom: 1px solid var(--line-soft);
  transition: background .25s ease;
}
.service-card:hover { background: var(--card); }
.service-icon  { font-family: var(--font-display); font-size: .88rem; letter-spacing: .14em;
                 color: var(--accent-alt); }
.service-title { font-family: var(--font-display); font-size: 1.55rem; font-weight: 400;
                 color: var(--ink); line-height: 1.25; }
.service-desc  { color: var(--ink-mid); font-size: 1.08rem; line-height: 1.5; }
.service-link  { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .16em;
                 text-transform: uppercase; text-decoration: none; text-align: right;
                 color: var(--accent); white-space: nowrap; }
.service-link:hover { color: var(--accent-alt); }

/* ── APPROACH — "Why people call" editorial split ─────────── */
#approach { background: var(--paper); padding-top: 0; }
.approach-inner { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; }
.approach-text  { color: var(--ink-mid); font-size: 1.1rem; margin-bottom: 2rem; }

/* The four reasons sit as a 2×2 grid on the right */
.approach-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2rem 2.8rem; }
.step        { display: block; }
.step-num    { display: none; }   /* this direction titles the reasons, not numbers them */
.step-title  { font-family: var(--font-display); font-size: 1.35rem; font-weight: 400;
               color: var(--accent); margin-bottom: .5rem; }
.step-desc   { color: var(--ink-body); font-size: 1.1rem; line-height: 1.6; }

.approach-image-wrap    { position: relative; }
.approach-img-outer img { width: 100%; border: 1px solid var(--line); }
.approach-badge         { padding: 1.2rem 1.4rem; background: var(--dark); color: var(--paper);
                          display: inline-block; margin-top: 1.2rem; }
.approach-badge-num     { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); }
.approach-badge-label   { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em;
                          text-transform: uppercase; color: var(--on-dark-dim); margin-top: .3rem; }
.approach-quote         { margin-top: 1.6rem; border-left: 3px solid var(--accent); padding: .3rem 0 .3rem 1.2rem; }
.approach-quote p       { font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink); }
.approach-quote cite    { display: block; margin-top: .7rem; font-family: var(--font-ui);
                          font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
                          color: var(--ink-light); font-style: normal; }

/* ── ABOUT ────────────────────────────────────────────────── */
#about { background: var(--paper-alt); }
.about-inner       { display: grid; grid-template-columns: 1fr 1.4fr; gap: 4rem; align-items: start; }
.about-image-wrap  { position: relative; }
.about-accent-line { width: 60px; height: 2px; background: var(--accent-alt); margin-bottom: 1.2rem; }
.about-img-frame     { border: 1px solid var(--line); background: var(--card); padding: .6rem; }
.about-img-frame img { width: 100%; }
.about-tag         { display: inline-block; margin-top: 1.2rem; padding: .55rem 1.1rem;
                     background: var(--dark); color: var(--gold-soft);
                     font-family: var(--font-ui); font-size: .64rem;
                     letter-spacing: .18em; text-transform: uppercase; }
.about-bio         { color: var(--ink-body); font-size: 1.15rem; line-height: 1.7;
                     margin-bottom: 1rem; text-wrap: pretty; }
.about-bio.lead    { font-size: 1.4rem; line-height: 1.55; color: var(--ink); }

.credentials    { display: grid; gap: .7rem; margin: 1.8rem 0; }
.cred-item      { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
                  font-size: 1.1rem; color: var(--ink-body); }
.cred-dot       { width: 7px; height: 7px; background: var(--accent); margin-top: .62em;
                  transform: rotate(45deg); }

.about-sign      { border-top: 1px solid var(--line); padding-top: 1.2rem; margin-top: 1.8rem; }
.about-sign-name { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink); }
.about-sign-role { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .18em;
                   text-transform: uppercase; color: var(--ink-light); margin-top: .3rem; }

/* ── TESTIMONIALS — hairline card grid ────────────────────── */
#testimonials { background: var(--paper); }
.testimonials-header { margin-bottom: 3rem; }

/* 1px gaps over a line-coloured bed give the mockup's hairline grid */
.testimonials-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.testimonial        { background: var(--card); padding: 2.2rem;
                      display: flex; flex-direction: column; gap: 1rem; }
.testimonial-stars  { color: var(--gold); letter-spacing: .35em; font-size: .8rem; }
.testimonial-text   { color: var(--ink); font-size: 1.2rem; line-height: 1.55; margin: 0; }
.testimonial-author { display: flex; align-items: center; gap: .9rem; margin-top: auto; }
.testimonial-avatar { width: 38px; height: 38px; flex: none;
                      display: flex; align-items: center; justify-content: center;
                      background: var(--dark); color: var(--gold-soft);
                      font-family: var(--font-display); font-size: 1rem; }
.testimonial-name   { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .18em;
                      text-transform: uppercase; color: var(--ink-light); }
.testimonial-city   { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .1em;
                      color: var(--ink-light); opacity: .8; }

/* ── INSIGHTS (homepage article cards, injected by main.js) ── */
#insights        { background: var(--paper-alt); }
.insights-header { display: flex; justify-content: space-between; align-items: end;
                   gap: 2rem; flex-wrap: wrap; margin-bottom: 3rem; }
.insights-link   { font-family: var(--font-ui); font-size: .74rem; letter-spacing: .16em;
                   text-transform: uppercase; text-decoration: none; color: var(--accent); }
.insights-grid   { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: var(--gap); }
.insights-empty  { grid-column: 1 / -1; color: var(--ink-light); padding: 2rem 0;
                   font-family: var(--font-ui); font-size: .85rem; }

.insight-card    { display: block; background: var(--card); border: 1px solid var(--line-soft);
                   text-decoration: none; color: inherit;
                   transition: border-color .25s ease, transform .25s ease; }
.insight-card:hover { border-color: var(--accent-alt); transform: translateY(-3px); }
.insight-img     { width: 100%; height: 190px; object-fit: cover; }
.insight-body    { padding: 1.6rem; }
.insight-tag     { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .2em;
                   text-transform: uppercase; color: var(--accent-alt); margin-bottom: .6rem; }
.insight-title   { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400;
                   line-height: 1.3; color: var(--ink); margin-bottom: .5rem; }
.insight-excerpt { color: var(--ink-mid); font-size: 1.05rem; line-height: 1.55; }

/* ── CONTACT — dark split, form on the raised panel ───────── */
#contact { background: var(--dark); color: var(--cream); padding: 0; }
.contact-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch;
                 max-width: none; padding: 0; }
#contact .section-inner { max-width: none; padding: 0; }
#contact .section-label { color: var(--gold); }

.contact-left  { padding: 4.75rem var(--pad-x) 4.75rem;
                 display: flex; flex-direction: column; justify-content: center; }
.contact-title { font-family: var(--font-display); font-size: 2.9rem; font-weight: 400;
                 line-height: 1.18; margin-bottom: 1rem; color: var(--cream); text-wrap: pretty; }
.contact-title em { font-style: normal; color: var(--gold); }
.contact-desc  { color: var(--on-dark); font-size: 1.2rem; line-height: 1.6;
                 margin-bottom: 2rem; max-width: 40ch; }

.contact-info      { display: grid; gap: 1rem; }
.contact-info-item { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; }
.contact-info-icon { color: var(--gold); font-size: .8rem; line-height: 1.7; }
.contact-info-text   { color: var(--on-dark); font-size: 1.08rem; }
.contact-info-text a { color: var(--on-dark); text-decoration: none; }
.contact-info-text a:hover { color: var(--gold-soft); }

.contact-right { background: var(--dark-panel); border-left: 1px solid var(--dark-line);
                 padding: 4rem var(--pad-x) 4rem; }

/* Form. .full makes a field span both columns. */
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-group   { display: flex; flex-direction: column; gap: .5rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-family: var(--font-ui); font-size: .64rem; font-weight: 400;
                    letter-spacing: .2em; text-transform: uppercase; color: var(--gold-dim); }
.form-group input,
.form-group select,
.form-group textarea {
  font-family: var(--font-body); font-size: 1.1rem; color: var(--cream);
  padding: .7rem 0; border: 0; border-bottom: 1px solid var(--dark-line);
  background: transparent; border-radius: 0;
}
.form-group select option { background: var(--dark-panel); color: var(--cream); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--muted-dark); }
.form-group textarea { min-height: 110px; resize: vertical;
                       border: 1px solid var(--dark-line); padding: .8rem; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline: none; border-color: var(--gold); }

.form-consent { display: flex; align-items: flex-start; gap: .7rem; cursor: pointer;
                font-family: var(--font-ui); font-size: .8rem; font-weight: 300;
                text-transform: none; letter-spacing: 0; color: var(--on-dark); }
.form-consent input { accent-color: var(--gold); margin-top: .15rem; }

/* Form feedback — REQUIRED
   main.js writes text here and adds .success or .error. Empty by
   default, so it must not reserve space when there is no message. */
.form-message          { grid-column: 1 / -1; font-family: var(--font-ui); font-size: .85rem; }
.form-message:empty    { display: none; }
.form-message.success  { color: #8FD6B4; }
.form-message.error    { color: #F0A79C; }

.form-submit { grid-column: 1 / -1; font-family: var(--font-ui); font-size: .8rem;
               letter-spacing: .14em; text-transform: uppercase; cursor: pointer;
               padding: 1.1rem; border: 0; border-radius: var(--radius);
               background: var(--gold); color: var(--dark);
               transition: background .25s ease; }
.form-submit:hover    { background: var(--gold-soft); }
.form-submit:disabled { opacity: .6; cursor: default; }

/* ── FOOTER — light parchment, as in 1b ───────────────────── */
footer.site-footer { background: var(--paper); color: var(--ink-body);
                     padding: 3.5rem var(--pad-x) 1.5rem; border-top: 1px solid var(--line-soft); }
.footer-grid       { max-width: var(--maxw); margin: 0 auto;
                     display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; }

.footer-brand-row { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.footer-logo      { height: 40px; width: auto; }
.footer-wordmark  { font-family: var(--font-display); font-size: 1.35rem; color: var(--ink);
                    letter-spacing: .04em; }
.footer-subline   { font-family: var(--font-ui); font-size: .58rem; letter-spacing: .24em;
                    text-transform: uppercase; color: var(--ink-light); margin-top: .3rem; }
.footer-blurb     { font-size: 1.08rem; line-height: 1.55; color: var(--ink-mid);
                    margin-bottom: 1.8rem; max-width: 30ch; }

.footer-heading   { font-family: var(--font-ui); font-size: .62rem; letter-spacing: .22em;
                    text-transform: uppercase; color: var(--ink-light); margin-bottom: 1rem; }
.footer-col a     { display: block; font-size: 1.02rem; color: var(--ink-body);
                    text-decoration: none; margin-bottom: .6rem; }
.footer-col a:hover { color: var(--accent); }

.footer-newsletter  { max-width: 340px; }
.newsletter-form    { display: flex; gap: .5rem; }
.newsletter-form input {
  flex: 1; font-family: var(--font-body); font-size: 1.05rem; padding: .7rem .8rem;
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.newsletter-form input::placeholder { color: var(--muted); }
.newsletter-form input:focus { outline: none; border-color: var(--accent-alt); }
.newsletter-form button { padding: 0 1.2rem; cursor: pointer; border: 0;
                          background: var(--accent); color: var(--paper); font-size: 1rem; }
.newsletter-form button:hover    { background: var(--dark); }
.newsletter-form button:disabled { opacity: .6; cursor: default; }

/* Newsletter feedback — REQUIRED (footer.js adds .success / .error) */
.newsletter-msg          { font-family: var(--font-ui); font-size: .8rem; margin-top: .6rem; }
.newsletter-msg:empty    { display: none; }
.newsletter-msg.success  { color: var(--ok); }
.newsletter-msg.error    { color: var(--bad); }

.footer-contact-row { display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
                      font-size: 1.02rem; line-height: 1.45; color: var(--ink-body); margin-bottom: .75rem; }
.footer-contact-row > span:last-child { padding-top: .2rem; }
.footer-contact-row a { color: var(--ink-body); text-decoration: none; }
.footer-contact-row a:hover { color: var(--accent); }
.footer-contact-ico   { display: flex; align-items: center; justify-content: center;
                        width: 30px; height: 30px; border-radius: 50%;
                        background: var(--paper-warm); border: 1px solid var(--line); color: var(--accent); }
.footer-contact-ico svg { width: 14px; height: 14px; }

.footer-socials   { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-socials a { display: flex; align-items: center; justify-content: center;
                    width: 36px; height: 36px; border-radius: 50%;
                    border: 1px solid var(--line); color: var(--ink-mid); text-decoration: none;
                    transition: border-color .2s, color .2s; }
.footer-socials a svg   { width: 16px; height: 16px; }
.footer-socials a:hover { border-color: var(--accent); color: var(--accent); }

.footer-bottom  { max-width: var(--maxw); margin: 2.5rem auto 0; padding: 1.2rem 0 0;
                  border-top: 1px solid var(--line-soft);
                  display: flex; justify-content: space-between; align-items: center;
                  gap: 1rem; flex-wrap: wrap;
                  font-family: var(--font-ui); font-size: .72rem; color: var(--ink-light); }
.footer-bottom a          { color: var(--ink-light); text-decoration: none; }
.footer-bottom a:hover    { color: var(--accent); }
.footer-bottom-right      { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.footer-madewith          { opacity: .8; }
.footer-lock              { display: inline-flex; opacity: .4; }   /* discreet admin link */
.footer-lock svg          { width: 13px; height: 13px; }
.footer-lock:hover        { opacity: 1; }

/* Slim footer — used on the legal & unsubscribe pages */
.footer-slim        { background: var(--dark); color: var(--on-dark); padding: 1.5rem var(--pad-x); }
.footer-slim-inner  { max-width: var(--maxw); margin: 0 auto;
                      display: flex; justify-content: space-between; align-items: center;
                      gap: 1rem; flex-wrap: wrap;
                      font-family: var(--font-ui); font-size: .74rem; }
.footer-slim-links       { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.footer-slim-inner a     { color: var(--gold-soft); text-decoration: none; }

/* ═══════════════════════════════════════════════════════════════
   INNER PAGES
   Shared by services.php, service.php, about.php, process.php and
   cases.php. All five are static templates — no database behind
   them — so their copy is edited directly in the PHP file.
   ═══════════════════════════════════════════════════════════════ */

/* ── Page header (the band under the nav on every inner page) ── */
.page-hero {
  padding: calc(var(--nav-h) + 3.5rem) var(--pad-x) 3rem;
  background: var(--paper-warm); border-bottom: 1px solid var(--line);
}
.page-hero-inner { max-width: var(--maxw); margin: 0 auto; }
.page-crumb  { font-family: var(--font-ui); font-size: .68rem; letter-spacing: .2em;
               text-transform: uppercase; color: var(--ink-light); margin-bottom: 1rem; }
.page-crumb a { color: var(--ink-light); text-decoration: none; }
.page-crumb a:hover { color: var(--accent); }
.page-title  { font-family: var(--font-display); font-size: 3.1rem; font-weight: 400;
               line-height: 1.12; color: var(--ink); text-wrap: pretty; }
.page-sub    { font-size: 1.25rem; line-height: 1.6; color: var(--ink-mid);
               margin-top: .9rem; max-width: 62ch; text-wrap: pretty; }

/* Dark variant — used by process.php */
.page-hero.is-dark { background: var(--dark); border-bottom-color: var(--dark-line); text-align: center; }
.page-hero.is-dark .page-crumb { color: var(--gold); }
.page-hero.is-dark .page-title { color: var(--cream); }
.page-hero.is-dark .page-sub   { color: var(--on-dark); margin-left: auto; margin-right: auto; }

/* Filter chips (services listing, cases listing) */
.chip-row { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 2rem; }
.chip {
  font-family: var(--font-ui); font-size: .78rem; letter-spacing: .08em;
  padding: .65rem 1.25rem; border: 1px solid var(--line);
  color: var(--ink-body); background: transparent; cursor: pointer;
  text-decoration: none; border-radius: var(--radius);
}
.chip:hover      { border-color: var(--accent); color: var(--accent); }
.chip.is-active  { background: var(--accent); border-color: var(--accent); color: var(--paper); }

/* ── Services listing: image + copy cards, two up ─────────── */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.svc-card { display: grid; grid-template-columns: 220px 1fr;
            background: var(--card); border: 1px solid var(--line);
            text-decoration: none; color: inherit;
            transition: border-color .25s ease; }
.svc-card:hover { border-color: var(--accent-alt); }
.svc-card-media { background: var(--paper-alt); }
.svc-card-media img { width: 100%; height: 100%; object-fit: cover; }
.svc-card-body  { padding: 2rem; }
.svc-kicker { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .2em;
              text-transform: uppercase; color: var(--accent-alt); }
.svc-name   { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink);
              margin-top: .7rem; }
.svc-copy   { color: var(--ink-mid); font-size: 1.1rem; line-height: 1.55; margin-top: .7rem; }
.svc-meta   { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.2rem;
              font-family: var(--font-ui); font-size: .68rem; letter-spacing: .14em;
              text-transform: uppercase; color: var(--ink-light); }
.svc-card .link-arrow { margin-top: 1.2rem; }

/* ── Service detail ───────────────────────────────────────── */
.svc-detail-hero { display: grid; grid-template-columns: 1.25fr 1fr;
                   background: var(--paper-warm); border-bottom: 1px solid var(--line); }
.svc-detail-hero .page-hero { padding-left: var(--pad-x); padding-right: 3rem;
                              background: none; border: 0; }
.svc-detail-media { background: var(--paper-alt); min-height: 380px; }
.svc-detail-media img { width: 100%; height: 100%; object-fit: cover; }

.svc-body-grid { display: grid; grid-template-columns: 1fr 380px; gap: 3.5rem;
                 max-width: var(--maxw); margin: 0 auto; padding: 4rem var(--pad-x); }
.svc-h2 { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; color: var(--ink); }
.svc-h2 + * { margin-top: 1.6rem; }
.svc-points { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.svc-point  { border-top: 1px solid var(--line); padding-top: 1rem; }
.svc-point-title { font-family: var(--font-display); font-size: 1.25rem; color: var(--accent); }
.svc-point-copy  { color: var(--ink-mid); font-size: 1.08rem; line-height: 1.55; margin-top: .5rem; }

/* Timed agenda rows ("How the visit runs") */
.agenda-row { display: grid; grid-template-columns: 110px 1fr; gap: 1.5rem;
              padding: 1.35rem 0; border-bottom: 1px solid var(--line); }
.agenda-time  { font-family: var(--font-display); font-size: 1rem; color: var(--accent-alt); }
.agenda-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); }
.agenda-copy  { color: var(--ink-mid); font-size: 1.08rem; line-height: 1.5; margin-top: .35rem; }

/* Pull quote block */
.pullquote { margin-top: 3rem; padding: 2.2rem; background: var(--paper-warm);
             border-left: 3px solid var(--accent); }
.pullquote p    { font-style: italic; font-size: 1.4rem; line-height: 1.5; color: var(--ink); }
.pullquote cite { display: block; margin-top: 1rem; font-family: var(--font-ui);
                  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase;
                  color: var(--ink-light); font-style: normal; }

/* Booking / aside cards */
.aside-stack { display: flex; flex-direction: column; gap: 1.4rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.aside-card  { border: 1px solid var(--line); background: var(--card); padding: 2rem; }
.aside-card.is-warm { background: var(--paper-warm); }
.aside-card.is-dark { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
.aside-card.is-dark .aside-label { color: var(--gold-dim); }
.aside-card.is-dark .aside-title { color: var(--cream); }
.aside-label { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .22em;
               text-transform: uppercase; color: var(--ink-light); }
.aside-title { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin-top: .5rem; }
.aside-copy  { color: var(--ink-mid); font-size: 1.05rem; line-height: 1.55; margin-top: .5rem; }
.aside-card.is-dark .aside-copy { color: var(--on-dark); }

.price-row  { display: flex; align-items: baseline; gap: .55rem; margin-top: .6rem; }
.price      { font-family: var(--font-display); font-size: 2.35rem; color: var(--ink); }
.price-note { font-size: 1.05rem; color: var(--ink-mid); }

.tick-list  { display: grid; gap: .75rem; margin-top: 1.4rem; padding-top: 1.25rem;
              border-top: 1px solid var(--line); }
.tick       { display: grid; grid-template-columns: auto 1fr; gap: .7rem;
              font-size: 1.05rem; color: var(--ink-body); }
.tick::before { content: '◆'; color: var(--accent); font-size: .7rem; line-height: 1.9; }

/* Full-width button used inside the aside cards */
.btn-block { display: block; width: 100%; text-align: center; margin-top: .7rem;
             font-family: var(--font-ui); font-size: .76rem; letter-spacing: .14em;
             text-transform: uppercase; text-decoration: none; padding: 1rem;
             border: 1px solid transparent; cursor: pointer; }
.btn-block.is-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); }
.btn-block.is-primary:hover { background: var(--dark); border-color: var(--dark); color: var(--paper); }
.btn-block.is-ghost   { border-color: var(--ink); color: var(--ink); }
.btn-block.is-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-block.is-gold    { background: var(--gold); color: var(--dark); border-color: var(--gold); }
.btn-block.is-gold:hover { background: var(--gold-soft); }

/* ── Process: numbered timeline rows ──────────────────────── */
.proc-row { display: grid; grid-template-columns: 130px 1fr 280px; gap: 2.5rem;
            padding: 2.2rem 0; border-bottom: 1px solid var(--line); align-items: start; }
.proc-num   { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent-alt); line-height: 1; }
.proc-when  { font-family: var(--font-ui); font-size: .66rem; letter-spacing: .18em;
              text-transform: uppercase; color: var(--ink-light); margin-top: .5rem; }
.proc-title { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); }
.proc-copy  { color: var(--ink-body); font-size: 1.12rem; line-height: 1.6; margin-top: .6rem; max-width: 58ch; }
.proc-aside { background: var(--paper-warm); padding: 1.25rem; }
.proc-aside-label { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .2em;
                    text-transform: uppercase; color: var(--ink-light); }
.proc-aside-value { font-family: var(--font-display); font-size: 1.35rem; color: var(--accent); margin-top: .35rem; }

/* ── FAQ (native <details>, no JS) ────────────────────────── */
.faq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; }
.faq-item  { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 1.25rem 0;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  font-size: 1.2rem; color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; color: var(--accent); font-size: 1.25rem; flex: none; }
.faq-item[open] summary::after { content: '−'; }
.faq-item p { color: var(--ink-mid); font-size: 1.1rem; line-height: 1.6;
              padding-bottom: 1.35rem; max-width: 56ch; }

/* ── Case studies ─────────────────────────────────────────── */
.case-feature { display: grid; grid-template-columns: 1.4fr 1fr;
                background: var(--card); border-bottom: 1px solid var(--line); }
.case-feature-body  { padding: 3.5rem var(--pad-x); }
.case-feature-media { background: var(--paper-alt); min-height: 420px; }
.case-feature-media img { width: 100%; height: 100%; object-fit: cover; }
.case-kicker { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .2em;
               text-transform: uppercase; color: var(--accent-alt); }
.case-title  { font-family: var(--font-display); font-size: 2.3rem; line-height: 1.2;
               color: var(--ink); margin-top: .8rem; text-wrap: pretty; }
.case-cols   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; }
.case-col-label { font-family: var(--font-ui); font-size: .64rem; letter-spacing: .18em;
                  text-transform: uppercase; color: var(--ink-light); }
.case-col-copy  { color: var(--ink-body); font-size: 1.08rem; line-height: 1.55; margin-top: .5rem; }

.case-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
             gap: 1.5rem; }
.case-card { background: var(--card); border: 1px solid var(--line-soft); }
.case-card-media { height: 170px; background: var(--paper-alt); }
.case-card-media img { width: 100%; height: 100%; object-fit: cover; }
.case-card-body  { padding: 1.6rem; }
.case-card-title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.3;
                   color: var(--ink); margin-top: .7rem; }
.case-card-copy  { color: var(--ink-mid); font-size: 1.05rem; line-height: 1.55; margin-top: .6rem; }

/* Milestone / credential rows (about.php, cases.php) */
.milestone { display: grid; grid-template-columns: 90px 1fr; gap: 1.5rem;
             padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.milestone-year { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-alt); }
.milestone-copy { color: var(--ink-body); font-size: 1.1rem; line-height: 1.5; }
/* Wider label column, for named rows rather than years */
.milestone.is-wide { grid-template-columns: 190px 1fr; }
.milestone.is-wide .milestone-year { font-size: 1rem; line-height: 1.35; }

/* ── Full-width closing CTA band ──────────────────────────── */
.cta-band { background: var(--accent); color: var(--cream); padding: 3.25rem var(--pad-x); }
.cta-band-inner { max-width: var(--maxw); margin: 0 auto;
                  display: flex; justify-content: space-between; align-items: center;
                  gap: 2rem; flex-wrap: wrap; }
.cta-band-title { font-family: var(--font-display); font-size: 2rem; }
.cta-band-copy  { font-size: 1.2rem; color: var(--gold-soft); margin-top: .5rem; max-width: 55ch; }
.cta-band-btn   { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .14em;
                  text-transform: uppercase; text-decoration: none; white-space: nowrap;
                  padding: 1.05rem 2rem; background: var(--paper); color: var(--accent); }
.cta-band-btn:hover { background: var(--dark); color: var(--paper); }

.cta-band.is-dark { background: var(--dark); }
.cta-band.is-dark .cta-band-btn { background: var(--gold); color: var(--dark); }
.cta-band.is-dark .cta-band-btn:hover { background: var(--gold-soft); }

/* Section that alternates onto the warm band */
.band-warm { background: var(--paper-warm); }
.band-alt  { background: var(--paper-alt); }

/* ── LEGAL / UNSUBSCRIBE PAGES ────────────────────────────── */
.legal-page      { padding: calc(var(--nav-h) + 3rem) var(--pad-x) var(--section-y); }
.legal-inner     { max-width: 720px; margin: 0 auto; }
.legal-centered  { text-align: center; }
.legal-inner h1  { font-family: var(--font-display); font-size: 2.5rem; font-weight: 400; margin-bottom: .5rem; }
.legal-inner h2  { font-family: var(--font-display); font-size: 1.45rem; font-weight: 400; margin: 2rem 0 .6rem; }
.legal-inner p,
.legal-inner li  { color: var(--ink-mid); margin-bottom: .8rem; }
.legal-inner ul  { padding-left: 1.25rem; }
.legal-updated   { font-family: var(--font-ui); font-size: .7rem; letter-spacing: .18em;
                   text-transform: uppercase; color: var(--ink-light); margin-bottom: 2rem; }
.legal-back      { font-family: var(--font-ui); font-size: .78rem; text-decoration: none; }
.legal-back-wrap { margin-top: 2rem; }
.form-error-text { color: var(--bad); }

.unsub-form        { display: flex; gap: .5rem; justify-content: center; margin: 1.5rem 0; flex-wrap: wrap; }
.unsub-form input  { font-family: var(--font-body); font-size: 1.05rem; padding: .75rem; min-width: 260px;
                     border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.unsub-form button { font-family: var(--font-ui); font-size: .78rem; letter-spacing: .12em;
                     text-transform: uppercase; padding: .75rem 1.5rem; cursor: pointer;
                     border: 0; border-radius: var(--radius);
                     background: var(--accent); color: var(--paper); }

/* ── BARE GRID CELLS ──────────────────────────────────────────
   These class names exist in the HTML but carry no rules, because
   their parent grid already positions them:
     .approach-left               (child of .approach-inner)
     .about-content               (child of .about-inner)
   They are kept in the markup as ready-made hooks. Add rules here
   when your design needs to treat a column differently. */

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-h1        { font-size: 3.2rem; }
  .service-card   { grid-template-columns: 44px 1fr 130px; }
  .service-desc   { display: none; }   /* the row keeps name + action on tablets */
  .svc-body-grid  { grid-template-columns: 1fr; }
  .aside-stack    { position: static; }
  .proc-row       { grid-template-columns: 100px 1fr; }
  .proc-aside     { grid-column: 2; justify-self: start; }
  .case-feature   { grid-template-columns: 1fr; }
  .case-feature-media { min-height: 260px; order: -1; }
}

@media (max-width: 900px) {
  :root { --nav-h: 76px; }
  .nav-links, .nav-cta { display: none; }
  .nav-hamburger       { display: flex; }

  .hero-content,
  .approach-inner,
  .about-inner,
  .contact-inner,
  .faq-split,
  .svc-grid,
  .svc-detail-hero { grid-template-columns: 1fr; }

  .hero-content  { gap: 2.5rem; min-height: 0; }
  .hero-left     { padding: calc(var(--nav-h) + 2.5rem) 0 0; }
  .hero-right    { padding: 0 0 3rem; }
  .hero-h1       { font-size: 2.6rem; max-width: none; }
  .hero-carousel { height: 340px; }

  .approach-steps { grid-template-columns: 1fr; gap: 1.6rem; }
  .contact-left, .contact-right { padding-left: var(--pad-x); padding-right: var(--pad-x); }
  .contact-right { border-left: 0; border-top: 1px solid var(--dark-line); }
  .page-title    { font-size: 2.3rem; }
  .svc-card      { grid-template-columns: 1fr; }
  .svc-card-media { height: 200px; }
  .case-cols     { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
  :root { --section-y: 3.5rem; }
  .contact-form   { grid-template-columns: 1fr; }
  .footer-grid    { grid-template-columns: 1fr; }
  .hero-carousel  { height: 280px; }
  .hero-h1        { font-size: 2.15rem; }
  .section-title  { font-size: 1.9rem; }
  .page-title     { font-size: 1.95rem; }

  /* Service rows stack into a simple two-line block */
  .service-card   { grid-template-columns: 40px 1fr; gap: .5rem 1rem; }
  .service-link   { grid-column: 2; text-align: left; }
  .svc-points     { grid-template-columns: 1fr; }
  .proc-row       { grid-template-columns: 1fr; gap: .5rem; }
  .proc-aside     { grid-column: 1; }
  .agenda-row     { grid-template-columns: 70px 1fr; gap: 1rem; }
  .elements-band-track { justify-content: flex-start; row-gap: .75rem; }
  .cta-band-inner { flex-direction: column; align-items: flex-start; }
}