/* ============================================================================
   zara.css — shared Zara Consult design system (drpb.ch clone + conversion layer)
   Canonical token + component layer for the multi-page HTML prototype.
   Extracted verbatim from mockups/home-v7.html (the keeper homepage) so every page
   shares ONE token layer (PLAN.md Step 1), then extended below with inner-page
   components (page-hero / accordion / team-grid / contact locations / nav state).
   home-v7.html still inlines the same system; migrate it to link this when convenient.
   Fonts: GT Super Display + Unica77 LL (client licensed) in ./fonts/.
   ============================================================================ */
  @font-face{font-family:"GT Super Display";src:url("fonts/GTSuperDisplay-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
  @font-face{font-family:"Unica77 LL Web";src:url("fonts/Unica77LLWeb-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}

  /* --- METRIC-MATCHED FALLBACKS — the anti-reflow layer (2026-07-25) -----------
     The licensed faces are only DISCOVERED after the whole stylesheet chain has
     downloaded, so first paint is always the fallback and the real face swaps in
     after it. Georgia sets 5.5% wider than GT Super and Arial 3.9% wider than
     Unica77, so that swap re-wrapped every paragraph and visibly jumped the page
     ~1s in. These two faces re-scale the local fallback to the real font's own
     metrics, so the pre-swap and post-swap text occupy the SAME box.
     Numbers are measured, not guessed: node tools/font-metrics.mjs re-derives
     them (canvas measureText widths + fontBoundingBox ascent/descent, the
     next/font formula — overrides are divided by size-adjust because size-adjust
     scales them too). Re-run it if a font file is ever replaced.
     line-gap-override:0% is deliberate — every line-height in this system is an
     explicit unitless number, so a font's own line gap never enters the layout.
     Each must sit IMMEDIATELY after the real family in --serif/--sans — put it
     after system-ui and the un-matched system face wins the pre-swap paint. */
  @font-face{font-family:"GT Super Fallback";src:local("Georgia");
    size-adjust:95.13%;ascent-override:96.71%;descent-override:25.23%;line-gap-override:0%}
  @font-face{font-family:"Unica77 Fallback";src:local("Arial");
    size-adjust:97.63%;ascent-override:98.33%;descent-override:24.58%;line-gap-override:0%}
  :root{
    --blue:#011E93;            /* drpb cobalt — FOREGROUND / pop on white + light sections */
    --navy:#0D1F3C;            /* Zara navy — DARK-SECTION BACKGROUNDS (white text on it) */
    --navy-2:#16294a;
    --red:#990000;             /* RARE accent — reserved for PRIMARY CTAs only (≤~10%) */
    --red-2:#7d0000;
    /* ⛔ THE LIGHT BLUE IS RETIRED (George, 2026-08-03): "I don't like this light blue, don't
       use it anywhere else from now on." --tint WAS #EDEFF8 and painted the alternating
       section bands site-wide; it is now white, so every band that used it goes white and the
       colour cannot come back through the token. Do NOT reintroduce a pale blue surface, and
       do not "restore" this value. Where a surface genuinely needs to separate from white
       (hover feedback, image wells) use --wash, which is NEUTRAL grey, not blue. */
    --paper:#ffffff; --tint:#ffffff; --wash:#F2F2F3; --tint-2:#E1F0F1; --ink:#011E93;
    /* --muted was #5C6982 (5.5:1 on white: legal, but it read grey and washed out in the
       FAQ answers and every card excerpt). Darkened 2026-08-03: same hue (219°), now 8.4:1
       on white and ≥7:1 on --tint and --tint-2, so body copy clears AAA on every ground it
       lands on. Still far lighter than --navy headings (16.4:1), so hierarchy is intact. */
    --muted:#414E67; --line:rgba(1,30,147,.16);
    --serif:"GT Super Display","GT Super Fallback",Georgia,serif;
    --sans:"Unica77 LL Web","Unica77 Fallback",system-ui,-apple-system,Arial,sans-serif;
    --maxw:1280px; --pad:clamp(1.25rem,5vw,4rem); --sec:clamp(5rem,11vw,10rem);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);font-weight:300;color:var(--blue);background:var(--paper);
       font-size:18px;line-height:1.55;letter-spacing:.03em;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  [id]{scroll-margin-top:7rem}
  .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}
  h1,h2{font-family:var(--serif);font-weight:300;color:var(--blue);line-height:1.0;letter-spacing:-.012em}
  h1{font-size:clamp(2.8rem,8.4vw,6.875rem)}                 /* ~110px */
  .display{font-family:var(--serif);font-weight:300;color:var(--blue);line-height:1.1;letter-spacing:-.01em;
           font-size:clamp(1.9rem,4.2vw,3.25rem)}
  .label{font-size:1.125rem;color:var(--blue);text-align:center;letter-spacing:.02em}
  .body{font-size:1.125rem;color:var(--blue);font-weight:300;letter-spacing:.03em}
  .dotlink{display:inline-flex;align-items:center;gap:.7em;color:var(--blue);font-weight:400;font-size:1.05rem;letter-spacing:.02em}
  .dotlink::before{content:"";width:.6em;height:.6em;border-radius:50%;background:var(--blue);flex:none}
  .dotlink:hover{opacity:.6}

  /* BUTTONS (sharp corners, flat — matches the v6 form factor; red = primary CTA only) */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-family:var(--sans);
       font-weight:500;font-size:1rem;letter-spacing:.03em;line-height:1;padding:1rem 1.6rem;min-height:52px;
       border:1.5px solid transparent;cursor:pointer;text-align:center;
       transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
  .btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
  .btn-primary:hover{background:var(--red-2);border-color:var(--red-2)}
  .btn-secondary{background:transparent;color:var(--blue);border-color:var(--blue)}
  .btn-secondary:hover{background:var(--blue);color:#fff}
  .btn-on-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
  .btn-on-dark:hover{background:#fff;color:var(--navy)}
  .btn-sm{padding:.7rem 1.15rem;min-height:44px;font-size:.95rem}
  .cta-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
  a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
    outline:2.5px solid var(--red);outline-offset:3px}

  /* FLOATING LIQUID-GLASS NAV (drpb structure): fixed, inset top:1.5rem + sides, SHARP corners, layered */
  .site-header{position:fixed;left:0;right:0;top:1.5rem;z-index:50;padding-inline:1.25rem}
  .glass-bar{position:relative;max-width:1280px;margin:0 auto;padding:1.1rem 1.9rem;overflow:hidden;
             box-shadow:0 6px 60px rgba(0,0,0,.04),0 0 83px rgba(0,0,0,.06)}   /* drpb soft float — NO border lines */
  .glass-effect,.glass-tint,.glass-shine{position:absolute;inset:0;pointer-events:none}
  /* drpb "liquid glass" (Apple-style): SVG displacement REFRACTION + a tiny blur, very see-through — NOT a heavy frost */
  /* Refraction applied to the BACKDROP ONLY (backdrop-filter url(...)), so the bar's own surface
     + edges stay perfectly clean — the displacement bends what's BEHIND the bar, never the bar itself. */
  .glass-effect{-webkit-backdrop-filter:blur(8px) url(#glass-distortion);backdrop-filter:blur(8px) url(#glass-distortion)}
  .glass-tint{background:rgba(255,255,255,.40)}  /* uniform frost layer (not displaced) */
  .glass-shine{box-shadow:inset 2px 2px 1px rgba(255,255,255,.10),inset -1px -1px 1px 1px rgba(255,255,255,.05)}
  .glass-content{position:relative;z-index:2}
  .nav-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.1rem 2rem}
  /* real logo (navy on transparent) as the wordmark; text kept for a11y but visually replaced */
  .brand{display:inline-block;flex:none;height:32px;aspect-ratio:1100/240;   /* real logo webp is 1100×240 */
         background:url("img/zara-logo.webp") left center/contain no-repeat;
         text-indent:-9999px;overflow:hidden;white-space:nowrap;font-size:0;color:transparent}
  .f-left .brand{height:44px}   /* a touch larger in the footer */
  .nav-collapsible{display:flex;align-items:center;gap:clamp(1.4rem,2.4vw,2.4rem)}
  .navigation-menu{display:flex;gap:clamp(1.4rem,2.4vw,2.4rem);font-size:1.05rem;color:var(--blue);font-weight:400;list-style:none;align-items:center}
  .navigation-menu a:hover{opacity:.55}
  .lang{display:flex;gap:.85rem;list-style:none;font-size:1rem;color:var(--blue);font-weight:400}
  .lang .active{font-weight:600} .lang a:not(.active){opacity:.55}
  .nav-cta{align-self:center}
  .hamburger{display:none;background:none;border:0;cursor:pointer;padding:.3rem;margin-left:auto}
  @media (max-width:1279px){
    .hamburger{display:inline-flex}
    .nav-row{row-gap:0}   /* no empty-line gap below the brand/hamburger when the menu is closed → keeps them vertically centered */
    /* CONTAINED dropdown (drpb mobile): the floating glass bar expands downward to its OWN width —
       NOT a full-screen overlay. Links centered; the glass + side margins are preserved. */
    .nav-collapsible{flex-basis:100%;flex-direction:column;align-items:center;gap:0;
         max-height:0;overflow:hidden;opacity:0;
         transition:max-height .42s ease,opacity .3s ease,margin-top .42s ease}
    .nav-collapsible.open{max-height:78vh;opacity:1;margin-top:1.7rem;padding-bottom:.6rem;overflow-y:auto}
    .navigation-menu{flex-direction:column;align-items:center;gap:1.5rem;width:100%}
    .navigation-menu a{font-family:var(--serif);font-weight:300;font-size:clamp(1.7rem,6.5vw,2.4rem);color:var(--blue);line-height:1.1}
    .navigation-menu a:hover{opacity:.55}
    .lang{margin-top:1.6rem;justify-content:center;gap:1.3rem;font-size:1.1rem}
    .nav-cta{display:none}                 /* no CTA button in the mobile menu (matches drpb) */
  }
  body:has(.nav-collapsible.open) .sticky-cta{display:none}   /* hide the sticky bottom bar while the menu is open */

  /* HERO: full-bleed photo, overlaid light-serif headline + positioning lede + CTAs + trust line */
  .hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;background:#0a1830;overflow:hidden}
  .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.08) contrast(1.02)}
  .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,31,60,.12) 0%,rgba(13,31,60,0) 22%,rgba(10,22,46,.62) 100%)}
  .hero-in{position:relative;z-index:2;width:100%;padding-bottom:clamp(2.5rem,5vw,4.5rem)}
  .hero h1{color:#fff;max-width:15ch}
  .hero .lede{color:#fff;max-width:46ch;margin-top:1.4rem;font-weight:300;
              font-size:clamp(1.1rem,1.7vw,1.4rem);line-height:1.45;letter-spacing:.02em;text-shadow:0 1px 18px rgba(8,18,38,.45)}
  .hero .cta-row{margin-top:2.1rem}
  .hero .trustline{color:rgba(255,255,255,.9);font-size:.95rem;margin-top:1.6rem;letter-spacing:.04em}

  /* INTRO */
  .intro{padding-block:var(--sec)}
  .intro .body{max-width:48ch;font-size:clamp(1.2rem,1.8vw,1.5rem);line-height:1.5}

  /* SERVICES: pale-tint centered blocks (now anchors → inquiry funnel) */
  .services{padding-bottom:var(--sec)}
  .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .svc{background:var(--tint);min-height:clamp(180px,18vw,240px);display:flex;align-items:center;justify-content:center;
       text-align:center;padding:2rem;transition:background .3s}
  .svc:nth-child(3n-1){background:var(--tint-2)}
  .svc:hover{background:#E3E9F4}
  .svc .nm{font-family:var(--serif);font-weight:300;font-size:clamp(1.5rem,2.2vw,2rem);color:var(--blue);line-height:1.1}
  .svc-foot{display:flex;justify-content:space-between;align-items:flex-start;gap:2rem;margin-top:2.4rem;flex-wrap:wrap}
  .svc-foot .body{max-width:46ch;color:var(--blue);font-size:1rem}

  /* STATS */
  .stats-wrap{padding-block:var(--sec)}
  .label.tiny{margin-bottom:clamp(2.5rem,5vw,4rem)}
  .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
  .stat .n{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,5vw,4.4rem);color:var(--blue);line-height:.95;letter-spacing:-.02em}
  .stat .c{font-size:.95rem;color:var(--muted);margin-top:.9rem}

  /* STATEMENT */
  .statement{padding-block:var(--sec);text-align:center}
  .statement .display{max-width:22ch;margin:0 auto}
  .statement .meta{margin-top:2.6rem;display:flex;justify-content:center}

  /* STEPS (drpb timeline style) + seam CTA */
  .how{padding-block:var(--sec)}
  .how .label.tiny{margin-bottom:clamp(2.5rem,5vw,4rem)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.5rem,3vw,3rem)}
  .step .sn{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,4vw,3.6rem);color:var(--blue);line-height:1}
  .step h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;margin:1rem 0 .6rem;color:var(--blue)}
  .step p{font-size:.98rem;color:var(--muted);font-weight:300}
  .how .cta-row{justify-content:center;margin-top:clamp(2.8rem,5vw,4.2rem);flex-direction:column;gap:.9rem}
  .how .cta-sub{font-size:.95rem;color:var(--muted)}

  /* PEOPLE: big serif headline + TWO FLUSH images (gap:0) */
  .people{padding-block:var(--sec)}
  .people .label.tiny{margin-bottom:.8rem}
  .people .hd{text-align:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
  .people .photos{display:grid;grid-template-columns:1fr 1fr;gap:0}      /* flush — no spacing */
  .people figure{position:relative;height:clamp(320px,40vw,560px);overflow:hidden;background:#0a1830}
  .people img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15) contrast(1.02)}

  /* TESTIMONIALS + trust strip (social proof near the decision) */
  .tmo{padding-block:var(--sec)}
  .tmo .label.tiny{margin-bottom:clamp(2.5rem,5vw,4rem)}
  .tmo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,3.5vw,3.4rem)}
  .quote{display:flex;flex-direction:column;gap:1.3rem}
  .quote .q{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.32;color:var(--blue)}
  .quote .q::before{content:"“"}
  .quote .q::after{content:"”"}
  .quote .who{font-size:.95rem;color:var(--muted);line-height:1.5}
  .quote .who strong{color:var(--blue);font-weight:500;display:block;letter-spacing:.02em}
  .trust-strip{margin-top:clamp(3rem,6vw,5rem);border-top:1px solid var(--line);padding-top:2.6rem;
       display:flex;flex-wrap:wrap;gap:1rem 2.8rem;align-items:center;justify-content:center;
       color:var(--muted);font-size:.95rem;letter-spacing:.03em}
  .trust-strip .ti{display:inline-flex;align-items:center;gap:.55rem}
  .trust-strip .stars{color:var(--blue);letter-spacing:.12em}

  /* INSIGHTS: centered label + one big image framed by pale-tint panels */
  .insights{padding-block:var(--sec)}
  .insights .label.tiny{margin-bottom:clamp(2.5rem,5vw,4rem)}
  .ins-stage{background:var(--tint-2);max-width:1180px;margin:0 auto;display:flex;justify-content:center;padding:clamp(2rem,4.5vw,4rem)}
  .ins-stage figure{position:relative;width:min(700px,100%);aspect-ratio:16/10;overflow:hidden;background:#102444}
  .ins-stage img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12)}
  .ins-stage figcaption{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;
        font-family:var(--serif);font-weight:300;font-size:clamp(1.4rem,2.4vw,2.1rem);color:#fff;line-height:1.2;
        background:linear-gradient(0deg,rgba(13,31,60,.40),rgba(13,31,60,.12))}
  .insights .meta{margin-top:2rem}

  /* LEAD CAPTURE — navy dark section (the one dark surface) + white form card = conversion climax */
  .lead{background:var(--navy);color:#fff;padding-block:var(--sec)}
  .lead .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
  .lead .label{color:rgba(255,255,255,.7);text-align:left;margin-bottom:1rem}
  .lead h2{color:#fff;max-width:16ch}
  .lead .lead-copy{color:rgba(255,255,255,.86);max-width:42ch;margin-top:1.4rem;font-size:1.1rem;line-height:1.55}
  .lead-contacts{margin-top:2.4rem;display:flex;flex-direction:column;gap:.7rem;font-size:1.08rem}
  .lead-contacts a{color:#fff;border-bottom:1px solid rgba(255,255,255,.45);padding-bottom:2px;width:fit-content}
  .lead-contacts a:hover{border-color:#fff}
  .lead-micro{margin-top:2rem;font-size:.9rem;color:rgba(255,255,255,.62);max-width:42ch;line-height:1.55}
  .form-card{background:#fff;padding:clamp(1.6rem,3vw,2.6rem)}
  .form-card .fc-h{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--blue);margin-bottom:1.6rem;line-height:1.15}
  .field{margin-bottom:1.15rem}
  .field label{display:block;font-size:.9rem;color:var(--blue);margin-bottom:.5rem;letter-spacing:.03em;font-weight:400}
  .field .req{color:var(--red)}
  .field input,.field select,.field textarea{width:100%;font-family:var(--sans);font-size:1rem;font-weight:300;
       color:var(--blue);background:#fff;border:1px solid var(--line);padding:.85rem 1rem;letter-spacing:.02em}
  .field input::placeholder,.field textarea::placeholder{color:#66728C}  /* was #9aa3b8 = 2.5:1; now 4.8:1, still clearly lighter than typed text */
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 2px rgba(1,30,147,.14)}
  .field textarea{min-height:118px;resize:vertical}
  .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.15rem}
  .grid-2 .field{margin-bottom:0}
  .consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--muted);margin:.3rem 0 1.4rem;line-height:1.5}
  .consent input{margin-top:.15rem;flex:none;width:18px;height:18px;accent-color:var(--red)}
  .consent a{color:var(--blue);border-bottom:1px solid var(--line)}
  .form-card .btn{width:100%}
  .form-note{font-size:.8rem;color:var(--muted);margin-top:1rem;text-align:center}

  /* FOOTER: pale tint */
  footer{background:var(--tint-2);padding-block:clamp(4rem,8vw,7rem) 2.5rem}
  .f-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;min-height:clamp(320px,32vw,440px)}
  .f-left{display:flex;flex-direction:column;justify-content:space-between;gap:3rem}
  .f-right{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;text-align:right;gap:3rem}
  .f-right .display{max-width:12ch}
  .f-contact{color:var(--blue);font-weight:300;line-height:1.9}
  .f-links{display:flex;gap:1.8rem;flex-wrap:wrap;justify-content:flex-end}
  .f-links a:hover{opacity:.6}
  .f-bottom{margin-top:3rem;font-size:.8rem;color:var(--muted)}

  /* STICKY MOBILE CTA BAR (client-requested) */
  .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:.6rem;padding:.65rem;
       background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
       border-top:1px solid var(--line)}
  .sticky-cta .btn{flex:1;min-height:50px;padding-inline:.8rem}

  @media (max-width:980px){
    .svc-grid{grid-template-columns:repeat(2,1fr)}
    .stats,.steps{grid-template-columns:repeat(2,1fr);gap:3rem 2rem}
    .people .photos{grid-template-columns:1fr}
    .tmo-grid{grid-template-columns:1fr;gap:2.4rem}
    .lead .wrap{grid-template-columns:1fr;gap:2.6rem}
    .f-grid{grid-template-columns:1fr;min-height:0;gap:3rem}
    .f-right{align-items:flex-start;text-align:left}.f-links{justify-content:flex-start}
  }
  @media (max-width:768px){
    .sticky-cta{display:flex}
    footer{padding-bottom:6rem}            /* clear the sticky bar */
  }
  @media (max-width:680px){
    body{font-size:16px}
    .site-header{top:1rem;padding-inline:1rem}
    .glass-bar{padding:1rem 1.3rem}
    .svc-grid{grid-template-columns:1fr}
    .grid-2{grid-template-columns:1fr;gap:1.15rem}
    .grid-2 .field{margin-bottom:1.15rem}
    .hero .cta-row .btn{flex:1}
  }
  @media (prefers-reduced-motion: reduce){
    *{transition:none !important;animation:none !important}
    html{scroll-behavior:auto}
  }

  /* ==========================================================================
     INNER-PAGE COMPONENTS (extend the home system; not used by home-v7)
     ========================================================================== */

  /* Nav active state — the current page's menu item */
  .navigation-menu a[aria-current="page"]{color:var(--blue);border-bottom:1.5px solid var(--blue);padding-bottom:3px}

  /* Inner-page hero — same full-bleed photo + overlaid serif, but shorter than home's 100vh */
  .hero.inner{min-height:clamp(440px,72vh,760px)}
  .hero.inner h1{max-width:18ch}
  .hero.inner .lede{max-width:50ch}

  /* ACCORDION (drpb "range of services" list) — hairline rows, serif label, +/− that morphs */
  .acc-wrap{padding-bottom:var(--sec)}
  .acc{max-width:1000px;margin:0 auto;border-top:1px solid var(--line)}
  .acc details{border-bottom:1px solid var(--line)}
  .acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:2rem;
       padding:clamp(1.3rem,2.6vw,2rem) 0;font-family:var(--serif);font-weight:300;
       font-size:clamp(1.3rem,2.4vw,1.85rem);color:var(--blue);line-height:1.18;transition:opacity .25s ease}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary:hover{opacity:.6}
  .acc .ico{flex:none;width:1.05em;height:1.05em;position:relative;margin-top:.15em}
  .acc .ico::before,.acc .ico::after{content:"";position:absolute;background:var(--blue);transition:transform .3s ease,opacity .3s ease}
  .acc .ico::before{top:50%;left:0;right:0;height:1.5px;transform:translateY(-50%)}
  .acc .ico::after{left:50%;top:0;bottom:0;width:1.5px;transform:translateX(-50%)}
  .acc details[open] .ico::after{transform:translateX(-50%) scaleY(0);opacity:0}   /* + morphs to − */
  .acc .panel{padding:.2rem 0 clamp(1.6rem,2.6vw,2.3rem);max-width:66ch}
  .acc .panel p{font-size:1rem;color:var(--muted);font-weight:300;line-height:1.6}   /* body-sm 16px (drpb accordion) */
  /* 2026-07-30: the reset zeroes every margin, so until now a panel could only ever
     hold ONE paragraph — a second one butted straight onto the first. The client's
     own FAQ copy breaks six of the ten homepage answers into 2-3 paragraphs, so the
     gap has to exist. It was true of no panel on the site before this, so nothing
     that already shipped moves. */
  .acc .panel p + p{margin-top:.85rem}
  .acc .panel ul{margin:.95rem 0 0;padding-left:1.15rem;color:var(--muted);font-size:1rem;line-height:1.7}
  .acc .panel li{margin-bottom:.35rem}

  /* TEAM GRID (drpb people grid) — pale-tint tiles, name in serif + role, alternating tint */
  .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
  .member{background:var(--tint);min-height:clamp(150px,15vw,190px);display:flex;flex-direction:column;
       align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.6rem;transition:background .3s ease}
  .member:nth-child(3n-1){background:var(--tint-2)}
  .member:hover{background:#E3E9F4}
  .member .mn{font-family:var(--serif);font-weight:300;font-size:clamp(1.2rem,1.7vw,1.5rem);color:var(--blue);line-height:1.1}
  .member .mr{font-size:.85rem;color:var(--muted);letter-spacing:.04em}

  /* CONTACT LOCATIONS / details (drpb 3-column locations block) */
  .loc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
  .loc h3{font-family:var(--serif);font-weight:400;font-size:1.3rem;color:var(--blue);margin-bottom:.9rem;line-height:1.15}
  .loc p{font-size:1rem;color:var(--muted);line-height:1.75}
  .loc a{color:var(--blue);border-bottom:1px solid var(--line);padding-bottom:1px}
  .loc a:hover{border-color:var(--blue)}
  .loc .dotlink{margin-top:1rem;border:0}

  /* WIDE PHOTO BAND (drpb expertise contact-CTA photo) */
  .photoband{position:relative;height:clamp(300px,40vw,540px);overflow:hidden;background:#0a1830}
  .photoband img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.02)}

  @media (max-width:980px){
    .team-grid{grid-template-columns:repeat(2,1fr)}
    .loc-grid{grid-template-columns:1fr;gap:2.4rem}
  }
  @media (max-width:680px){
    .team-grid{grid-template-columns:1fr}
  }

  /* ==========================================================================
     v3 POSITIONING COMPONENTS (homepage home-v8; reusable on inner pages)
     Source of truth: docs/POSITIONING-v3.md §6. Photography is a positioning
     asset → real photos are styled PLACEHOLDERS here, never stock/skyline/beach.
     ========================================================================== */

  /* Styled photo placeholder (no stock/picsum — real team/office/founder pending) */
  .ph{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
      background:var(--tint);color:var(--muted);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;padding:1.2rem}
  .ph.tint2{background:var(--tint-2)}
  .ph.dark{background:#0e2244;color:rgba(255,255,255,.55)}
  .ph::after{content:"◻ photo pending"}
  .ph[data-label]::after{content:attr(data-label)}
  .hero .ph-hint{position:absolute;top:34%;left:0;right:0;text-align:center;color:rgba(255,255,255,.30);
      font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;z-index:1}

  /* TRUST BAND (v3 §3) — AGA credential → Established 2001 → annual-throughput stats */
  .trustband{padding-block:clamp(3rem,6.5vw,5.5rem);border-bottom:1px solid var(--line)}
  .aga{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1.1rem 1.7rem;text-align:center;margin:0 auto}
  .aga-logo{flex:none;width:124px;height:50px;display:flex;align-items:center;justify-content:center;
       border:1px solid var(--line);color:var(--muted);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.2}
  .aga p{font-size:1.05rem;color:var(--blue);line-height:1.45;max-width:44ch;text-align:left}
  .aga strong{font-weight:500}
  .estline{text-align:center;font-family:var(--serif);font-weight:300;color:var(--blue);
       font-size:clamp(1.4rem,2.4vw,2rem);margin:clamp(2.2rem,4.5vw,3.2rem) 0 clamp(2.2rem,4.5vw,3rem)}
  .trustband .stats{border-top:1px solid var(--line);padding-top:clamp(2.4rem,5vw,3.4rem)}

  /* "A REAL FIRM, NOT A FORMATION AGENT" (v3 §4) — in-house departments + founder */
  .firm-hd{text-align:center;max-width:34ch;margin:0 auto}
  .depts{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(2.2rem,4.5vw,3.2rem)}
  .dept{border:1px solid var(--line);padding:.7rem 1.25rem;font-family:var(--serif);font-weight:300;
        font-size:clamp(1.05rem,1.5vw,1.35rem);color:var(--blue);line-height:1}
  .founder{display:flex;align-items:center;gap:1.4rem;justify-content:center;margin-top:clamp(2.6rem,5vw,3.6rem);flex-wrap:wrap}
  .founder .ph{width:92px;height:92px;flex:none;font-size:.58rem}
  .founder .fc-name{font-family:var(--serif);font-weight:300;font-size:1.35rem;color:var(--blue);line-height:1.1}
  .founder .fc-role{font-size:.88rem;color:var(--muted);margin-top:.3rem}

  /* "WILL YOUR HOME TAX OFFICE ACCEPT IT?" (v3 §5) — the differentiator, on a tint band */
  .taxbox{background:var(--tint)}
  .taxbox .inner{max-width:780px;margin:0 auto;text-align:center}
  .taxbox h2{margin-bottom:1.5rem}
  .taxbox .body{font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.6;color:var(--blue);max-width:64ch;margin:0 auto}
  .taxbox .body strong{font-weight:500}
  .taxbox .body+.body{margin-top:1.1rem}
  .taxbox .meta{margin-top:2.1rem;display:flex;justify-content:center}

  /* Tenure tag on testimonials (v3 §6 — length of relationship as the headline metric) */
  .quote .tenure{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3vw,2.7rem);
       color:var(--blue);line-height:1;margin-bottom:.2rem}

  /* COMPARISON table (v3 §8 "why Bulgaria — and when it's NOT right") */
  .compare{width:100%;border-collapse:collapse;margin-top:clamp(2.2rem,4vw,3rem)}
  .compare th,.compare td{text-align:left;padding:1rem;border-bottom:1px solid var(--line);vertical-align:top}
  .compare th{font-weight:500;color:var(--muted);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
  .compare td:first-child{font-family:var(--serif);font-weight:300;font-size:1.2rem;color:var(--blue);white-space:nowrap}
  .compare td{font-size:1rem;color:var(--blue)}
  .compare td .bf{color:var(--muted)}
  .compare tr.hl td{background:var(--tint-2)}

  /* Reassurance list (lead form, v3 §9 — banking + named-person promises) */
  .reassure{list-style:none;margin-top:1.8rem;display:flex;flex-direction:column;gap:.85rem}
  .reassure li{display:flex;gap:.7rem;align-items:flex-start;color:rgba(255,255,255,.9);font-size:1rem;line-height:1.5}
  .reassure li::before{content:"";flex:none;width:.5rem;height:.5rem;margin-top:.5rem;background:#fff;border-radius:50%}

  @media (max-width:860px){
    .compare th:nth-child(2),.compare td:nth-child(2){display:none}   /* drop the middle column */
    .aga p{text-align:center}
  }