/* ============================================================
   Indiexis — listing designs

   Loaded only by /<slug> pages. Every skin is scoped to its body
   class (`body.d-aurora`, `body.d-cipher`, …) so the eight
   designs can disagree about type, colour, radius and rhythm
   without ever reaching each other — or the rest of the site.

   Shared plumbing (the enquiry form, the hours card, the map,
   the share row) is styled once below and then re-skinned per
   design, so a fix to the plumbing lands everywhere at once.

   Root font-size is 62.5%, so 1rem = 10px throughout.
   ============================================================ */

/* ============================================================
   FOUNDATION — what all eight listing designs agree on
   ============================================================ */
/* The shared muted grey reaches only 3.0:1 on these papers, which is under
   what body copy needs. Listing pages darken it; the directory keeps its own. */
body.pg-biz{--d-radius:16px;--d-gap:1.6rem;--fg-muted:#626a75}
body.pg-biz main{overflow-x:clip}

/* Section anchors must clear both sticky bars. */
body.pg-biz section[id]{scroll-margin-top:calc(var(--nav-h) + var(--subnav-h) + 2rem)}

/* The "open now" badge is injected by site.js with a fixed class, so every
   design inherits a legible default and only overrides the surface it sits on. */
body.pg-biz .bh-open{display:inline-flex;align-items:center;padding:.4rem 1.1rem;border-radius:999px;font-size:1.05rem;font-weight:700;border:1px solid;white-space:nowrap}
body.pg-biz .bh-open .dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.6rem}
body.pg-biz .bh-open.is-open{background:rgba(22,163,74,.12);border-color:rgba(22,163,74,.4);color:#15803d}
body.pg-biz .bh-open.is-open .dot{background:#16a34a}
body.pg-biz .bh-open.is-shut{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.34);color:#b91c1c}
body.pg-biz .bh-open.is-shut .dot{background:#dc2626}
body.pg-biz .d-on-dark .bh-open.is-open{background:rgba(95,211,155,.16);border-color:rgba(95,211,155,.45);color:#8ee9bb}
body.pg-biz .d-on-dark .bh-open.is-shut{background:rgba(220,96,96,.16);border-color:rgba(220,96,96,.45);color:#ffb3b3}

/* Shared reveal easing: designs differ in how far things travel, not how. */
body.pg-biz .reveal{transition:opacity .75s var(--ease),transform .75s var(--ease)}

/* Two shared button variants were drawn white-on-dark, for heroes these
   designs no longer have. Inside a listing — which is light all the way
   down now — they become their light-surface equivalents, once, instead of
   being patched over in eight places. */
body.pg-biz .btn-glass{background:#fff;border-color:var(--border-strong);color:var(--fg-primary);backdrop-filter:none;-webkit-backdrop-filter:none}
body.pg-biz .btn-glass:hover{background:var(--bg-inset);border-color:var(--fg-primary);transform:translateY(-2px)}
body.pg-biz .btn-ghost-light{background:transparent;border-color:var(--border-strong);color:var(--fg-primary)}
body.pg-biz .btn-ghost-light:hover{background:#fff;border-color:var(--fg-primary);transform:translateY(-2px)}

/* Shared components from style.css that pair a brand fill with white text.
   Scoped to a listing, because --biz-deep is only published there. */
body.pg-biz .btn-onbiz,
body.pg-biz .hours-row.is-today .hd::after{background:var(--biz-deep)}
body.pg-biz .btn-onbiz:hover{filter:brightness(1.12)}
/* The closed-hours red only reached 3.2:1 on these papers. */
body.pg-biz .hours-row .ht.closed{color:#c23030}

/* Utility wrappers every design's sections sit inside. */
.d-wrap{max-width:var(--max-w);margin:0 auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   1 — AURORA  ·  soft gradient retail
   ============================================================ */
body.d-aurora{font-family:'Plus Jakarta Sans','Segoe UI',Arial,sans-serif;--d-radius:26px}
body.d-aurora h1,body.d-aurora h2,body.d-aurora h3{letter-spacing:-.03em}
body.d-aurora .mono,body.d-aurora .hours-row .ht{font-family:'IBM Plex Mono',ui-monospace,monospace}

.au-hero{position:relative;overflow:hidden;padding:calc(var(--nav-h) + 6rem) 3rem 7rem;background:var(--bg-primary)}
/* Soft edges come from the gradient rather than a filter. A blur(70px) over
   an area this size is re-computed every frame the blobs move, which is a
   large per-frame cost for something a radial gradient renders once. */
.au-mesh{position:absolute;inset:-20% -10% auto -10%;height:140%;z-index:0;opacity:.85;pointer-events:none}
.au-mesh i{position:absolute;display:block;border-radius:50%}
.au-mesh i:nth-child(1){width:64vw;height:64vw;left:-14vw;top:-6vw;background:radial-gradient(closest-side,rgba(var(--biz-rgb),.5),rgba(var(--biz-rgb),0))}
.au-mesh i:nth-child(2){width:56vw;height:56vw;right:-12vw;top:-14vw;background:radial-gradient(closest-side,rgba(var(--biz-rgb),.34),rgba(var(--biz-rgb),0))}
.au-mesh i:nth-child(3){width:52vw;height:52vw;left:30vw;bottom:-18vw;background:radial-gradient(closest-side,rgba(var(--biz-rgb),.24),rgba(var(--biz-rgb),0))}
.au-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:5rem;align-items:center}
.au-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:1.15rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--biz-deep);background:rgba(var(--biz-rgb),.1);padding:.6rem 1.3rem;border-radius:999px;margin-bottom:1.8rem}
.au-hero h1{font-size:clamp(3.4rem,5.4vw,5.8rem);font-weight:800;line-height:1.02;margin-bottom:1.2rem}
.au-tag{font-size:clamp(1.6rem,2.1vw,2.2rem);font-weight:600;color:var(--fg-soft);line-height:1.35;margin-bottom:1.4rem}
.au-lede{font-size:1.45rem;color:var(--fg-muted);line-height:1.7;max-width:52ch}
.au-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:2.8rem}
.au-facts{display:flex;flex-wrap:wrap;gap:1rem;margin-top:3rem}
.au-facts li{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:999px;padding:.9rem 1.8rem;display:flex;align-items:baseline;gap:.8rem;box-shadow:var(--shadow-sm)}
.au-facts b{font-size:1.7rem;font-weight:800;color:var(--biz-deep)}
.au-facts span{font-size:1.1rem;color:var(--fg-muted);font-weight:600}

.au-hero-art{position:relative}
.au-shot{border-radius:var(--d-radius);overflow:hidden;aspect-ratio:4/3;background:var(--bg-inset);box-shadow:0 30px 70px rgba(11,13,16,.18);border:1px solid var(--border-color);transform:rotate(-1.4deg)}
.au-shot img{width:100%;height:100%;object-fit:cover}
.au-shot-mono{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:8rem;font-weight:800;color:rgba(255,255,255,.4)}
.au-chip{position:absolute;display:inline-flex;align-items:center;gap:.8rem;background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:999px;padding:.9rem 1.6rem;font-size:1.15rem;font-weight:700;box-shadow:var(--shadow-md);white-space:nowrap}
.au-chip-a{left:-1.5rem;bottom:2.5rem}
.au-chip-b{right:-1rem;top:1.8rem}
.au-logo{width:30px;height:30px;border-radius:50%;background:var(--bg-inset);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:800;color:var(--biz-deep);overflow:hidden;flex-shrink:0}
.au-logo img{width:100%;height:100%;object-fit:contain;background:#fff}

.au-body{padding-bottom:2rem}
.au-sec{padding:7rem 3rem}
.au-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.au-sec-tint{background:var(--bg-secondary)}
.au-sec-head{margin-bottom:4rem;max-width:var(--max-w)}
.au-sec-head>*{max-width:660px}
.au-sec-head-mid>*{margin-left:auto;margin-right:auto}
.au-sec-head-mid{margin-left:auto;margin-right:auto;text-align:center}
.au-label{display:inline-block;font-size:1.1rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--biz-deep);margin-bottom:1.1rem}
.au-sec-head h2{font-size:clamp(2.6rem,4vw,3.8rem);font-weight:800;line-height:1.1}
.au-sec-head p{font-size:1.35rem;color:var(--fg-muted);margin-top:1.2rem;line-height:1.65}

.au-about{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;align-items:start}
.au-story{font-size:1.45rem;line-height:1.85;color:var(--fg-soft)}
.au-story p+p{margin-top:1.5rem}
.au-card-facts{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--d-radius);padding:2.8rem;box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--nav-h) + var(--subnav-h) + 2rem)}
.au-card-facts h3{font-size:1.15rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);margin-bottom:1.8rem}
.au-card-facts dl>div{display:flex;justify-content:space-between;gap:1.5rem;padding:1.1rem 0;border-bottom:1px dashed var(--border-color);align-items:baseline}
.au-card-facts dl>div:last-child{border-bottom:none}
.au-card-facts dt{font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-muted)}
.au-card-facts dd{font-size:1.25rem;font-weight:600;text-align:right;overflow-wrap:anywhere}
.au-card-facts dd a{color:var(--biz-deep)}
.au-card-facts .btn{margin-top:2.2rem}

.au-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.8rem}
.au-hl-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--d-radius);padding:3rem 2.4rem;text-align:center;box-shadow:var(--shadow-sm);transition:transform .35s var(--ease),box-shadow .35s}
.au-hl-drop{transform:translateY(1.8rem)}
.au-hl-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.au-hl-drop:hover{transform:translateY(1.2rem)}
.au-hl-ico{width:64px;height:64px;border-radius:22px;display:flex;align-items:center;justify-content:center;font-size:2.2rem;color:#fff;background:linear-gradient(135deg,var(--biz),var(--biz-light));margin:0 auto 1.8rem;box-shadow:0 10px 26px rgba(var(--biz-rgb),.35)}
.au-hl-card h3{font-size:1.5rem;font-weight:800;margin-bottom:.8rem}
.au-hl-card p{font-size:1.2rem;color:var(--fg-muted);line-height:1.65}

.au-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.au-svc-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--d-radius);padding:2.8rem 2.4rem;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.au-svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:rgba(var(--biz-rgb),.5)}
.au-svc-ico{width:56px;height:56px;border-radius:20px;display:flex;align-items:center;justify-content:center;font-size:2rem;color:var(--biz-deep);background:rgba(var(--biz-rgb),.12);margin-bottom:1.8rem}
.au-svc-card h3{font-size:1.55rem;font-weight:800;margin-bottom:.8rem}
.au-svc-card p{font-size:1.2rem;color:var(--fg-muted);line-height:1.65;flex:1}
.au-svc-ask{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--border-color);font-size:1.1rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--biz-deep);display:inline-flex;align-items:center;gap:.7rem}
.au-svc-ask i{transition:transform .25s}
.au-svc-card:hover .au-svc-ask i{transform:translateX(5px)}

/* The shelf reads sideways: a rail of cards you push through, which is
   what a shelf is. Falls back to nothing worse than a scrolling row. */
.au-prod{display:flex;gap:1.8rem;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;padding:0 0 1.4rem;scroll-padding-left:0}
.au-prod::-webkit-scrollbar{display:none}
.au-prod>*{flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:start}
.au-prod-hint{display:flex;align-items:center;gap:.8rem;margin-top:.6rem;font-size:1.08rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted)}
.au-prod-hint i{color:var(--biz-deep)}
.au-prod-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--d-radius);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s}
.au-prod-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.au-prod-img{position:relative;aspect-ratio:1/1;background:var(--bg-inset);overflow:hidden}
.au-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.au-prod-card:hover .au-prod-img img{transform:scale(1.07)}
/* The placeholder only — the price pill is a span in here too, and this
   selector outranks its own class. */
.au-prod-img>span[aria-hidden]{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:4.2rem;color:rgba(255,255,255,.55)}
.au-prod-price{position:absolute;left:1.2rem;bottom:1.2rem;background:var(--bg-card);color:var(--biz-deep);font-weight:800;font-size:1.35rem;padding:.55rem 1.2rem;border-radius:999px;box-shadow:var(--shadow-sm)}
.au-prod-body{padding:2rem;display:flex;flex-direction:column;flex:1;gap:.7rem}
.au-prod-body h3{font-size:1.45rem;font-weight:800;line-height:1.3}
.au-prod-body p{font-size:1.18rem;color:var(--fg-muted);line-height:1.6;flex:1}
.au-prod-buy{margin-top:.8rem;align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;background:#25D366;color:#fff;font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:.8rem 1.5rem;border-radius:999px;transition:transform .25s,filter .25s}
.au-prod-buy:hover{transform:translateY(-2px);filter:brightness(1.07)}

.au-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.4rem}
.au-gal-item{position:relative;aspect-ratio:4/3;border-radius:var(--d-radius);overflow:hidden;border:none;padding:0;width:100%;display:block;transition:transform .35s var(--ease),box-shadow .35s}
.au-gal-item:hover{transform:scale(1.03);box-shadow:var(--shadow-lg);z-index:2}
.au-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.au-gal-item:hover img{transform:scale(1.08)}
.au-gal-zoom{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,13,16,.42);color:#fff;font-size:1.9rem;opacity:0;transition:opacity .3s}
.au-gal-item:hover .au-gal-zoom,.au-gal-item:focus-visible .au-gal-zoom{opacity:1}

.au-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem}
.au-rev-card{background:var(--bg-card);border:1.5px solid var(--border-color);border-radius:var(--d-radius);padding:2.8rem 2.4rem;display:flex;flex-direction:column;box-shadow:var(--shadow-sm)}
.au-rev-stars{color:#f5a524;font-size:1.15rem;display:flex;gap:.25rem;margin-bottom:1.4rem}
.au-rev-card blockquote{font-size:1.3rem;line-height:1.75;color:var(--fg-soft);flex:1}
.au-rev-card figcaption{display:flex;align-items:center;gap:1.1rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--border-color)}
.au-rev-card figcaption span:last-child{display:flex;flex-direction:column}
.au-rev-card figcaption b{font-size:1.25rem;font-weight:700}
.au-rev-card figcaption small{font-size:1.05rem;color:var(--fg-muted)}
.au-rev-av{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:800;color:#fff;flex-shrink:0}

body.d-aurora .hours-card{margin:0 auto;max-width:900px}
body.d-aurora .hours-row{border-radius:18px}
.au-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}
body.d-aurora .ci,body.d-aurora .contact-form{border-radius:var(--d-radius)}
body.d-aurora .biz-map{border-radius:var(--d-radius)}

.au-cta{margin:2rem 3rem 0;border-radius:32px;padding:6rem 4rem;text-align:center;color:#fff;position:relative;overflow:hidden;max-width:calc(var(--max-w) - 2rem);margin-left:auto;margin-right:auto}
.au-cta::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 80% -20%,rgba(255,255,255,.22) 0,transparent 48%)}
.au-cta h3{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:800;margin-bottom:1.2rem;position:relative}
.au-cta p{font-size:1.45rem;opacity:.92;max-width:600px;margin:0 auto 2.8rem;position:relative;line-height:1.65}
.au-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap;position:relative}
.au-cta .btn:not(.btn-ghost-light){background:#fff;color:var(--gray-12)}
body.d-aurora .biz-share,body.d-aurora .biz-listed{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   2 — CIPHER  ·  the security readout

   An instrument, not a brochure. A HUD frame that never leaves
   the hero, a scan that sweeps it once on arrival, monospace
   readouts, and headings that resolve out of noise. Light
   throughout: a bright console rather than a dark one, because
   the page has to be read on a phone in daylight.
   ============================================================ */
body.d-cipher{font-family:'Inter','Segoe UI',Arial,sans-serif;--d-radius:2px;
  --cp-ink:#0a0e14;--cp-dim:#59626f;--cp-faint:#616b77;
  --cp-paper:#eef2f7;--cp-card:#fff;
  --cp-rule:rgba(10,14,20,.14);--cp-hair:rgba(10,14,20,.07);
  --cp-ok:#0d7a35}
body.d-cipher h1,body.d-cipher h2,body.d-cipher h3,body.d-cipher .mono{font-family:'JetBrains Mono',ui-monospace,monospace}
body.d-cipher .btn{border-radius:2px;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.04em}

/* ---- hero ---- */
.cp-hero{position:relative;background:var(--cp-paper);color:var(--cp-ink);
  padding:calc(var(--nav-h) + 7rem) 3rem 7rem;overflow:hidden}
.cp-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--cp-hair) 1px,transparent 1px),linear-gradient(90deg,var(--cp-hair) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 25%,transparent 88%);
  -webkit-mask-image:radial-gradient(ellipse 90% 80% at 50% 0%,#000 25%,transparent 88%)}
.cp-bleed{position:absolute;inset:0;opacity:.06}
.cp-bleed img{width:100%;height:100%;object-fit:cover;filter:grayscale(1)}

/* The sweep: one pass, on arrival, then gone. An instrument that
   re-scans forever is a screensaver. */
.cp-scan{position:absolute;left:0;right:0;top:0;height:170px;pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(var(--biz-rgb),.16) 55%,rgba(var(--biz-rgb),.5) 82%,transparent);
  animation:cp-sweep 2.1s var(--e-quint) 1 both}
@keyframes cp-sweep{from{transform:translateY(-180px);opacity:0}
  12%{opacity:1}
  to{transform:translateY(110vh);opacity:0}}

/* The frame. Four brackets, nothing else — enough to read as an
   instrument without drawing a box around the content. */
.cp-hud{position:absolute;inset:2.2rem 2.2rem;pointer-events:none}
.cp-hud-c{position:absolute;width:26px;height:26px;border:1px solid rgba(var(--biz-rgb),.55)}
.cp-hud-tl{left:0;top:0;border-right:0;border-bottom:0}
.cp-hud-tr{right:0;top:0;border-left:0;border-bottom:0}
.cp-hud-bl{left:0;bottom:0;border-right:0;border-top:0}
.cp-hud-br{right:0;bottom:0;border-left:0;border-top:0}

.cp-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto}
.cp-eyebrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--cp-dim);margin-bottom:2.4rem}
.cp-sep{color:var(--cp-rule)}
.cp-live{display:inline-flex;align-items:center;gap:.6rem;background:rgba(13,122,53,.1);
  color:var(--cp-ok);border:1px solid rgba(13,122,53,.3);padding:.4rem 1rem;font-weight:600;letter-spacing:.12em}
.cp-live>span{width:7px;height:7px;border-radius:50%;background:currentColor;animation:cp-pulse 2s ease-in-out infinite}
@keyframes cp-pulse{0%,100%{opacity:1}50%{opacity:.2}}

.cp-name{font-size:clamp(3.6rem,7.6vw,9rem);font-weight:700;letter-spacing:-.055em;line-height:.92;margin-bottom:1.8rem}
.cp-tag{font-size:clamp(1.6rem,2.3vw,2.4rem);font-weight:500;color:var(--cp-dim);line-height:1.3;max-width:26ch;margin-bottom:3rem}

/* The readout: field, value, hairline. Fields land in sequence, which is
   the only place this design animates anything on load besides the sweep. */
.cp-readout{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 3.4rem;margin-bottom:3rem;max-width:960px}
.cp-readout>div{display:flex;gap:1.4rem;align-items:baseline;padding:1rem 0;
  border-bottom:1px solid var(--cp-hair);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.22rem}
body.fx .cp-readout>div{animation:cp-land .5s var(--e-quint) both;animation-delay:calc(.35s + var(--i,0) * .07s)}
@keyframes cp-land{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cp-readout dt{color:var(--biz-deep);min-width:7ch;flex-shrink:0}
.cp-readout dt::after{content:':'}
.cp-readout dd{color:var(--cp-ink);overflow-wrap:anywhere}

.cp-lede{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.24rem;
  color:var(--cp-dim);line-height:1.8;max-width:76ch;margin-bottom:2.8rem}
.cp-actions{display:flex;flex-wrap:wrap;gap:1.1rem}
.cp-stats{display:flex;flex-wrap:wrap;margin-top:3.4rem;border-top:1px solid var(--cp-rule);padding-top:2.4rem;max-width:760px}
.cp-stats>div{flex:1 1 130px;padding-right:2rem}
.cp-stats>div+div{border-left:1px solid var(--cp-rule);padding-left:2rem}
.cp-stats b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:2.6rem;font-weight:700;color:var(--biz-deep);line-height:1;font-variant-numeric:tabular-nums}
.cp-stats span{font-size:1rem;text-transform:uppercase;letter-spacing:.13em;color:var(--cp-faint);margin-top:.6rem;display:block}
.cp-open{margin-top:2.4rem}

/* ---- the feed ---- */
.cp-feed{overflow:hidden;background:var(--cp-card);border-top:1px solid var(--cp-rule);border-bottom:1px solid var(--cp-rule);padding:1.1rem 0}
.cp-feed-track{display:flex;width:max-content;animation:cp-run 44s linear infinite}
.cp-feed-item{display:inline-flex;align-items:center;gap:.8rem;padding:0 2.6rem;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.1rem;color:var(--cp-dim);
  white-space:nowrap;border-right:1px solid var(--cp-hair)}
.cp-feed-item i{color:var(--biz-deep);font-style:normal}
@keyframes cp-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cp-feed-track{animation:none}.cp-scan{display:none}.cp-live>span{animation:none}}

/* ---- sections ---- */
.cp-body{background:var(--bg-primary)}
.cp-sec{padding:7rem 3rem;border-bottom:1px solid var(--border-color)}
.cp-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.cp-sec-tint{background:var(--cp-paper)}
.cp-sec-head{margin-bottom:3.6rem;max-width:var(--max-w);position:relative;padding-left:6rem}
.cp-sec-head>*{max-width:720px}
.cp-sec-n{position:absolute;left:0;top:.1rem;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:1.5rem;font-weight:700;color:var(--cp-rule);max-width:none}
.cp-label{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.06rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--biz-deep);margin-bottom:1rem}
.cp-sec-head h2{font-size:clamp(2.6rem,4.8vw,4.2rem);font-weight:700;letter-spacing:-.045em;line-height:1.02}
.cp-sec-head p{font-size:1.3rem;color:var(--fg-muted);margin-top:1.1rem;line-height:1.7}

.cp-about{display:grid;grid-template-columns:1.6fr 1fr;gap:3.6rem;align-items:start}
.cp-prose{font-size:1.4rem;line-height:1.9;color:var(--fg-soft)}
.cp-prose p+p{margin-top:1.5rem}
.cp-meta{border:1px solid var(--cp-rule);background:var(--cp-card);padding:2.4rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.cp-meta h3{font-size:1.08rem;text-transform:uppercase;letter-spacing:.16em;color:var(--cp-faint);margin-bottom:1.8rem}
.cp-meta dl>div{display:flex;justify-content:space-between;gap:1.2rem;padding:.9rem 0;
  border-bottom:1px solid var(--cp-hair);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.15rem;align-items:baseline}
.cp-meta dt{color:var(--fg-muted);flex-shrink:0}
.cp-meta dd{text-align:right;overflow-wrap:anywhere}
.cp-meta dd a{color:var(--biz-deep)}
.cp-meta .btn{margin-top:2rem}

/* ---- the lattice ---- */
.cp-lattice{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  border-top:1px solid var(--cp-rule);border-left:1px solid var(--cp-rule);background:var(--cp-card)}
.cp-cell{position:relative;padding:3rem 2.6rem;border-right:1px solid var(--cp-rule);border-bottom:1px solid var(--cp-rule);
  transition:background .3s,transform .35s var(--e-quint),box-shadow .35s}
.cp-cell::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--biz);
  transform:scaleY(0);transform-origin:top;transition:transform .35s var(--e-quint)}
.cp-cell:hover{background:#fbfcfe;transform:translateY(-3px);box-shadow:0 16px 42px rgba(10,14,20,.1);z-index:2}
.cp-cell:hover::before{transform:scaleY(1)}
.cp-cell-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.05rem;color:var(--cp-faint);letter-spacing:.12em}
.cp-cell-ico{display:block;font-size:1.9rem;color:var(--biz-deep);margin:1.6rem 0 1.4rem;transition:transform .35s var(--e-quint)}
.cp-cell:hover .cp-cell-ico{transform:translateY(-3px)}
.cp-cell h3{font-size:1.42rem;font-weight:700;letter-spacing:-.02em;margin-bottom:.8rem}
.cp-cell p{font-size:1.18rem;color:var(--fg-muted);line-height:1.7}

/* ---- capability rows ---- */
.cp-svc{border-top:1px solid var(--cp-rule)}
.cp-svc-row{display:grid;grid-template-columns:auto auto 1fr auto;gap:2rem;align-items:center;
  padding:2.6rem 1rem;border-bottom:1px solid var(--cp-rule);transition:background .3s,padding-left .35s var(--e-quint)}
.cp-svc-row:hover{background:var(--cp-card);padding-left:2.2rem}
.cp-svc-n{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.15rem;color:var(--cp-faint)}
.cp-svc-ico{width:46px;height:46px;border:1px solid var(--cp-rule);display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;color:var(--biz-deep);flex-shrink:0;transition:background .3s,color .3s,border-color .3s}
.cp-svc-row:hover .cp-svc-ico{background:var(--biz-deep);color:#fff;border-color:var(--biz-deep)}
.cp-svc-body h3{font-size:1.6rem;font-weight:700;letter-spacing:-.025em;margin-bottom:.5rem}
.cp-svc-body p{font-size:1.2rem;color:var(--fg-muted);line-height:1.7;max-width:74ch}
.cp-svc-go{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.06rem;text-transform:uppercase;
  letter-spacing:.1em;color:var(--biz-deep);display:inline-flex;align-items:center;gap:.7rem;white-space:nowrap}
.cp-svc-go i{transition:transform .25s}
.cp-svc-row:hover .cp-svc-go i{transform:translateX(5px)}

/* ---- captures ---- */
.cp-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;
  background:var(--cp-rule);border:1px solid var(--cp-rule)}
.cp-gal-item{position:relative;aspect-ratio:4/3;overflow:hidden;padding:0;width:100%;display:block;background:var(--cp-card)}
.cp-gal-item img{width:100%;height:100%;object-fit:cover;filter:grayscale(.45) contrast(1.04);transition:filter .4s,transform .6s var(--e-quint)}
.cp-gal-item:hover img{filter:none;transform:scale(1.05)}
.cp-gal-tag{position:absolute;left:1rem;top:1rem;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:1rem;letter-spacing:.1em;color:#fff;background:rgba(10,14,20,.72);padding:.3rem .7rem}
.cp-gal-scan{position:absolute;left:0;right:0;top:0;height:2px;background:var(--biz);
  opacity:0;transition:opacity .25s}
.cp-gal-item:hover .cp-gal-scan{opacity:1;animation:cp-gal-sweep 1.4s linear infinite}
@keyframes cp-gal-sweep{from{transform:translateY(0)}to{transform:translateY(calc(100% * 150))}}
@media(prefers-reduced-motion:reduce){.cp-gal-item:hover .cp-gal-scan{animation:none}}

/* ---- signed off ---- */
.cp-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem}
.cp-rev-card{border:1px solid var(--cp-rule);border-left:3px solid var(--biz);background:var(--cp-card);padding:2.4rem;
  transition:transform .3s var(--e-quint),box-shadow .3s}
.cp-rev-card:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(10,14,20,.09)}
.cp-rev-card blockquote{font-size:1.25rem;line-height:1.78;color:var(--fg-soft);position:relative;padding-left:2rem}
.cp-rev-card blockquote::before{content:'>';position:absolute;left:0;top:0;
  font-family:'JetBrains Mono',ui-monospace,monospace;color:var(--biz-deep);font-weight:700}
.cp-rev-card figcaption{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;
  border-top:1px solid var(--cp-hair);font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.12rem}
.cp-rev-av{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:1.25rem;flex-shrink:0}
.cp-rev-card figcaption small{color:var(--fg-muted)}

/* ---- shared plumbing ---- */
body.d-cipher .hours-card{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;
  background:var(--cp-rule);border:1px solid var(--cp-rule);max-width:var(--max-w)}
body.d-cipher .hours-row{border:none;border-radius:0;background:var(--cp-card);font-family:'JetBrains Mono',ui-monospace,monospace}
.cp-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:start}
body.d-cipher .ci,body.d-cipher .contact-form,body.d-cipher .biz-map,
body.d-cipher .cf-field input,body.d-cipher .cf-field textarea,body.d-cipher .ci-ico{border-radius:2px}
body.d-cipher .ci,body.d-cipher .contact-form{border-color:var(--cp-rule)}
body.d-cipher .contact-form h3{font-family:'JetBrains Mono',ui-monospace,monospace}

.cp-cta{background:var(--cp-paper);border-top:1px solid var(--cp-rule);padding:6.5rem 3rem;text-align:center}
.cp-cta-in{max-width:var(--max-w);margin:0 auto}
.cp-cta-cmd{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.2rem;color:var(--biz-deep);margin-bottom:1.6rem}
.cp-cta h3{font-size:clamp(2.4rem,4.4vw,3.8rem);font-weight:700;letter-spacing:-.045em;color:var(--cp-ink);margin-bottom:2.8rem}
.cp-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-cipher .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ---- the masthead, in the same instrument ---- */
body.d-cipher .bx-nav{background:color-mix(in srgb,var(--cp-card) 88%,transparent);border-bottom-color:var(--cp-hair)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-cipher .bx-nav{background:var(--cp-card)}}
body.d-cipher .bx-nav.scrolled{border-bottom-color:var(--cp-rule);box-shadow:0 1px 0 var(--cp-hair),0 8px 24px rgba(10,14,20,.05)}
body.d-cipher .bx-brand-mark{border-radius:2px;font-family:'JetBrains Mono',ui-monospace,monospace}
body.d-cipher .bx-brand-txt b{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.48rem;letter-spacing:-.03em}
body.d-cipher .bx-brand-txt small{font-family:'JetBrains Mono',ui-monospace,monospace}
body.d-cipher .bx-nav-links a{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:1.06rem;letter-spacing:.03em}
body.d-cipher .bx-nav-links a::before{content:'/';margin-right:.35rem;color:var(--cp-rule)}
body.d-cipher .bx-nav-cta{border-radius:2px;font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.05em}
body.d-cipher .bx-foot{background:var(--cp-paper);border-top:1px solid var(--cp-rule)}
body.d-cipher .bx-foot-col h2,body.d-cipher .bx-foot-col li,body.d-cipher .bx-foot-bottom{font-family:'JetBrains Mono',ui-monospace,monospace}
body.d-cipher .bx-foot-col h2{letter-spacing:.13em}
body.d-cipher .bx-foot-col li{font-size:1.14rem}

/* ============================================================
   3 — NEXUS  ·  the constellation

   A network drawn as one. Nodes are the members, threads join
   them, and the field leans away from the pointer as it moves
   through — the interaction is the subject. Below the fold the
   same idea becomes structure: services hang off a single thread
   running down the margin.
   ============================================================ */
body.d-nexus{font-family:'Inter','Segoe UI',Arial,sans-serif;
  --nx-field:#f0faf8;--nx-ink:#062b27;--nx-rule:rgba(6,43,39,.13)}
body.d-nexus h1,body.d-nexus h2,body.d-nexus h3,body.d-nexus .nx-counters b{
  font-family:'Space Grotesk','Segoe UI',Arial,sans-serif;letter-spacing:-.035em}

/* ---- hero ---- */
.nx-hero{position:relative;background:var(--nx-field);color:var(--nx-ink);
  padding:calc(var(--nav-h) + 4rem) 3rem 0;overflow:hidden}

/* The field sits behind the copy and spans the hero. --mx/--my are written
   by script as the pointer moves; without script they stay at centre and
   the constellation is simply still. */
.nx-field{position:relative;z-index:0;height:clamp(300px,44vh,480px);max-width:var(--max-w);margin:0 auto;--mx:50;--my:50}
.nx-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nx-threads line{stroke:rgba(var(--biz-rgb),.3);stroke-width:.12;vector-effect:non-scaling-stroke}
.nx-threads .nx-spoke{stroke:rgba(var(--biz-rgb),.16)}
.nx-nodes{position:absolute;inset:0}

/* Each node is placed at its seat, then nudged by how far the pointer is
   from the centre. The nudge is small and per-node, so the field reads as
   depth rather than as one layer sliding. */
.nx-node{position:absolute;left:var(--nx);top:var(--ny);width:clamp(46px,5vw,72px);aspect-ratio:1;
  margin:calc(clamp(46px,5vw,72px) / -2) 0 0 calc(clamp(46px,5vw,72px) / -2);
  transform:translate3d(calc((var(--mx) - 50) * var(--d,.16) * 1px),calc((var(--my) - 50) * var(--d,.16) * 1px),0);
  transition:transform .6s var(--e-quint)}
.nx-node:nth-child(3n){--d:.3}
.nx-node:nth-child(3n+1){--d:.1}
.nx-node-in{display:flex;width:100%;height:100%;border-radius:50%;overflow:hidden;
  background:#fff;border:1px solid rgba(var(--biz-rgb),.34);box-shadow:0 8px 22px rgba(6,43,39,.12);
  align-items:center;justify-content:center;color:var(--biz-deep);font-size:1.3rem;
  animation:nx-bob 7s ease-in-out infinite alternate}
.nx-node:nth-child(2n) .nx-node-in{animation-duration:9s;animation-delay:-2s}
.nx-node:nth-child(3n) .nx-node-in{animation-duration:11s;animation-delay:-4s}
.nx-node-in img{width:100%;height:100%;object-fit:cover}
@keyframes nx-bob{from{transform:translateY(-5px)}to{transform:translateY(5px)}}

.nx-core{position:absolute;left:50%;top:50%;width:clamp(96px,10vw,132px);aspect-ratio:1;
  margin:calc(clamp(96px,10vw,132px) / -2) 0 0 calc(clamp(96px,10vw,132px) / -2);
  border-radius:50%;overflow:hidden;background:#fff;display:flex;
  box-shadow:0 0 0 10px rgba(var(--biz-rgb),.1),0 20px 46px rgba(6,43,39,.16);z-index:2}
.nx-core img{width:100%;height:100%;object-fit:contain;padding:14px;background:#fff}
.nx-core>span{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:3rem;font-weight:800;color:#fff}

.nx-hero-in{position:relative;z-index:3;max-width:820px;margin:0 auto;text-align:center;padding:2.5rem 0 5rem}
.nx-eyebrow{display:inline-flex;align-items:center;gap:.8rem;font-size:1.12rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--biz-deep);margin-bottom:1.6rem}
.nx-hero h1{font-size:clamp(4rem,8.5vw,10rem);font-weight:700;line-height:.94;color:var(--nx-ink);margin-bottom:1.4rem}
.nx-tag{font-size:clamp(1.7rem,2.5vw,2.6rem);color:rgba(6,43,39,.8);font-weight:500;line-height:1.3;margin-bottom:1.4rem}
.nx-lede{font-size:1.38rem;color:rgba(6,43,39,.74);line-height:1.75;max-width:58ch;margin:0 auto}
.nx-actions{display:flex;gap:1.1rem;justify-content:center;flex-wrap:wrap;margin-top:3rem}
.nx-openline{margin-top:2.2rem}

.nx-counters{position:relative;z-index:3;max-width:var(--max-w);margin:0 auto;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--nx-rule)}
.nx-counters>div{padding:3rem 2rem;text-align:center;border-right:1px solid var(--nx-rule)}
.nx-counters>div:last-child{border-right:none}
.nx-counters b{display:block;font-size:clamp(3.4rem,5.6vw,5.4rem);font-weight:700;color:var(--biz-deep);
  line-height:1;font-variant-numeric:tabular-nums}
.nx-counters span{display:block;margin-top:.8rem;font-size:1.08rem;text-transform:uppercase;
  letter-spacing:.14em;color:rgba(6,43,39,.72)}

/* ---- sections ---- */
.nx-body{background:var(--bg-primary)}
.nx-sec{padding:7rem 3rem}
.nx-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.nx-sec-tint{background:var(--nx-field)}
.nx-sec-head{margin-bottom:4rem;max-width:var(--max-w)}
.nx-sec-head>*{max-width:680px}
.nx-mid{text-align:center}
.nx-mid>*{margin-left:auto;margin-right:auto}
.nx-label{display:inline-block;font-size:1.1rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--biz-deep);margin-bottom:1.2rem;position:relative;padding-left:3.4rem}
.nx-label::before{content:'';position:absolute;left:0;top:50%;width:2.6rem;height:1px;background:var(--biz)}
.nx-mid .nx-label{padding-left:0}
.nx-mid .nx-label::before{display:none}
.nx-sec-head h2{font-size:clamp(2.8rem,5vw,4.4rem);font-weight:700;line-height:1.02}
.nx-sec-head p{font-size:1.35rem;color:var(--fg-muted);margin-top:1.2rem;line-height:1.7}

.nx-about{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;align-items:start}
.nx-prose{font-size:1.4rem;line-height:1.88;color:var(--fg-soft)}
.nx-prose p+p{margin-top:1.5rem}
.nx-lead{font-size:1.7rem;line-height:1.66;color:var(--fg-primary);font-weight:500}
.nx-side{border-left:2px solid var(--biz);padding-left:2.6rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.nx-side dl>div{padding:1.1rem 0;border-bottom:1px solid var(--border-color)}
.nx-side dt{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);margin-bottom:.4rem}
.nx-side dd{font-size:1.3rem;font-weight:600;overflow-wrap:anywhere}
.nx-side dd a{color:var(--biz-deep)}
.nx-side .btn{margin-top:2.2rem}

.nx-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:3.4rem 2rem}
.nx-hl-item{text-align:center}
.nx-hl-ring{width:78px;height:78px;border-radius:50%;background:#fff;border:1px solid rgba(var(--biz-rgb),.4);
  display:flex;align-items:center;justify-content:center;font-size:2.1rem;color:var(--biz-deep);
  margin:0 auto 1.8rem;position:relative;transition:background .35s,color .35s,transform .35s var(--e-quint)}
.nx-hl-ring::before{content:'';position:absolute;inset:-9px;border-radius:50%;
  border:1px solid rgba(var(--biz-rgb),.2);transition:inset .35s var(--e-quint),opacity .35s}
.nx-hl-item:hover .nx-hl-ring{background:var(--biz-deep);color:#fff;transform:translateY(-4px)}
.nx-hl-item:hover .nx-hl-ring::before{inset:-16px;opacity:.5}
.nx-hl-item h3{font-size:1.5rem;font-weight:600;margin-bottom:.8rem}
.nx-hl-item p{font-size:1.2rem;color:var(--fg-muted);line-height:1.72}

/* ---- the thread ---- */
.nx-thread{position:relative;padding-left:5.4rem;max-width:var(--max-w)}
.nx-thread::before{content:'';position:absolute;left:1.55rem;top:1rem;bottom:1rem;width:1px;background:var(--nx-rule)}
.nx-stop{position:relative;display:grid;grid-template-columns:auto 1fr auto;gap:1.8rem;align-items:center;
  padding:2.4rem 1.5rem;border-bottom:1px solid var(--border-color);transition:background .3s,transform .35s var(--e-quint)}
.nx-stop:hover{background:var(--nx-field);transform:translateX(5px)}
.nx-dot{position:absolute;left:-3.95rem;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;
  background:#fff;border:2px solid var(--biz);transition:background .3s,transform .3s var(--e-back)}
.nx-stop:hover .nx-dot{background:var(--biz);transform:scale(1.35)}
.nx-stop-n{font-family:'Space Grotesk',sans-serif;font-size:1.5rem;font-weight:700;color:var(--border-strong);transition:color .3s}
.nx-stop:hover .nx-stop-n{color:var(--biz-deep)}
.nx-stop-body h3{font-size:1.7rem;font-weight:600;display:flex;align-items:center;gap:1rem;margin-bottom:.5rem}
.nx-stop-body h3 i{font-size:1.3rem;color:var(--biz-deep)}
.nx-stop-body p{font-size:1.22rem;color:var(--fg-muted);line-height:1.7;max-width:70ch}
.nx-stop-go{width:46px;height:46px;border-radius:50%;border:1px solid var(--border-strong);display:flex;
  align-items:center;justify-content:center;color:var(--fg-muted);flex-shrink:0;
  transition:background .3s,color .3s,border-color .3s,transform .3s}
.nx-stop:hover .nx-stop-go{background:var(--biz-deep);border-color:var(--biz-deep);color:#fff;transform:translateX(4px)}

.nx-prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:2rem}
.nx-prod-card{border:1px solid var(--border-color);border-radius:var(--r-3);padding:2rem;background:var(--bg-card);
  display:flex;flex-direction:column;transition:border-color .3s,transform .3s var(--e-quint),box-shadow .3s}
.nx-prod-card:hover{border-color:var(--biz);transform:translateY(-5px);box-shadow:0 18px 44px rgba(6,43,39,.1)}
.nx-prod-img{aspect-ratio:16/10;border-radius:var(--r-2);overflow:hidden;background:var(--bg-inset);margin-bottom:1.6rem}
.nx-prod-img img{width:100%;height:100%;object-fit:cover}
.nx-prod-card h3{font-size:1.5rem;font-weight:600;margin-bottom:.6rem}
.nx-prod-price{font-size:1.6rem;font-weight:700;color:var(--biz-deep);margin-bottom:.8rem}
.nx-prod-card>p{font-size:1.18rem;color:var(--fg-muted);line-height:1.68;flex:1}
.nx-prod-go{margin-top:1.8rem;display:inline-flex;align-items:center;gap:.7rem;font-size:1.1rem;font-weight:700;color:var(--biz-deep)}

.nx-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.2rem}
.nx-gal-item{aspect-ratio:1;border-radius:50%;overflow:hidden;border:2px solid rgba(var(--biz-rgb),.3);
  padding:0;width:100%;display:block;transition:transform .35s var(--e-quint),border-color .35s,box-shadow .35s}
.nx-gal-item:hover{transform:scale(1.05);border-color:var(--biz);box-shadow:0 14px 34px rgba(6,43,39,.16)}
.nx-gal-item img{width:100%;height:100%;object-fit:cover}

.nx-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:2rem}
.nx-rev-card{border:1px solid var(--border-color);border-radius:var(--r-3);padding:3.4rem 2.4rem 2.4rem;
  background:var(--bg-card);position:relative;margin-top:26px;transition:transform .3s var(--e-quint),box-shadow .3s}
.nx-rev-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(6,43,39,.1)}
.nx-rev-av{position:absolute;top:-26px;left:2.4rem;width:52px;height:52px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:#fff;border:3px solid var(--bg-primary)}
.nx-rev-card blockquote{font-size:1.28rem;line-height:1.78;color:var(--fg-soft)}
.nx-rev-card figcaption{margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border-color);
  display:flex;flex-direction:column;gap:.2rem}
.nx-rev-card figcaption b{font-size:1.25rem;font-weight:600}
.nx-rev-card figcaption small{font-size:1.05rem;color:var(--fg-muted)}

body.d-nexus .hours-card{max-width:900px;margin:0 auto}
.nx-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}

.nx-cta{position:relative;background:var(--nx-field);color:var(--nx-ink);padding:7rem 3rem;text-align:center;
  overflow:hidden;border-top:1px solid var(--nx-rule)}
.nx-cta-rings{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.nx-cta-rings i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border-radius:50%;
  border:1px solid rgba(var(--biz-rgb),.16);display:block}
.nx-cta-rings i:nth-child(1){width:280px;height:280px}
.nx-cta-rings i:nth-child(2){width:500px;height:500px;border-color:rgba(var(--biz-rgb),.1)}
.nx-cta-rings i:nth-child(3){width:760px;height:760px;border-color:rgba(var(--biz-rgb),.06)}
.nx-cta h3{position:relative;z-index:2;font-size:clamp(2.6rem,4.6vw,4rem);font-weight:700;margin-bottom:1.2rem}
.nx-cta p{position:relative;z-index:2;font-size:1.4rem;color:rgba(6,43,39,.74);max-width:600px;margin:0 auto 2.8rem;line-height:1.65}
.nx-cta-row{position:relative;z-index:2;display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-nexus .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ---- masthead ---- */
body.d-nexus .bx-nav{background:color-mix(in srgb,var(--nx-field) 88%,transparent);border-bottom-color:var(--nx-rule)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-nexus .bx-nav{background:var(--nx-field)}}
body.d-nexus .bx-brand-mark{border-radius:50%;box-shadow:0 0 0 4px rgba(var(--biz-rgb),.16)}
body.d-nexus .bx-brand-txt b{font-family:'Space Grotesk','Segoe UI',sans-serif}
body.d-nexus .bx-nav-links{gap:.6rem}
body.d-nexus .bx-nav-links a{height:auto;padding:.9rem 1.4rem;border-radius:999px;font-size:1.12rem;transition:background .25s,color .25s}
body.d-nexus .bx-nav-links a::after{display:none}
body.d-nexus .bx-nav-links a:hover{background:rgba(var(--biz-rgb),.1);color:var(--nx-ink)}
body.d-nexus .bx-nav-links a.active{background:rgba(var(--biz-rgb),.14);color:var(--biz-deep)}
body.d-nexus .bx-foot{background:var(--nx-field);border-top-color:var(--nx-rule);position:relative;overflow:hidden}
body.d-nexus .bx-foot::before{content:'';position:absolute;left:50%;top:-40%;width:760px;height:760px;margin-left:-380px;
  border-radius:50%;border:1px solid rgba(var(--biz-rgb),.12);
  box-shadow:0 0 0 90px rgba(var(--biz-rgb),.05),0 0 0 190px rgba(var(--biz-rgb),.03);pointer-events:none}
body.d-nexus .bx-foot-in,body.d-nexus .bx-foot-bottom{position:relative;z-index:1}
body.d-nexus .bx-foot-brand .bx-brand-txt b{font-family:'Space Grotesk','Segoe UI',sans-serif}

/* ============================================================
   4 — LEDGER  ·  ruled financial paper
   ============================================================ */
body.d-ledger{font-family:'Inter','Segoe UI',Arial,sans-serif;--paper:#faf7f0;--rule:rgba(11,13,16,.1)}
body.d-ledger h1,body.d-ledger h2,body.d-ledger h3,body.d-ledger blockquote{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.015em}

.lg-hero{position:relative;background:var(--paper);padding:calc(var(--nav-h) + 5.5rem) 3rem 6rem;overflow:hidden;border-bottom:1px solid var(--rule)}
.lg-rule-bg{position:absolute;inset:0;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 37px,var(--rule) 37px,var(--rule) 38px);opacity:.55;mask-image:linear-gradient(to bottom,#000,transparent 85%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 85%)}
.lg-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;gap:4.5rem;align-items:center}
.lg-eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-size:1.12rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--biz-deep);margin-bottom:1.8rem}
.lg-hero h1{font-size:clamp(3.4rem,5.6vw,6rem);font-weight:700;line-height:1.02;margin-bottom:1.4rem}
.lg-tag{font-size:clamp(1.6rem,2.2vw,2.3rem);color:var(--fg-soft);line-height:1.38;margin-bottom:1.6rem;font-family:'Fraunces',Georgia,serif;font-weight:400;font-style:italic}
.lg-lede{font-size:1.4rem;color:var(--fg-muted);line-height:1.75;max-width:54ch}
.lg-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:2.8rem}
.lg-openline{margin-top:2rem}

.lg-card{background:var(--bg-card);border:1px solid var(--rule);box-shadow:0 24px 60px rgba(11,13,16,.1)}
.lg-card-top{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-inset)}
.lg-card-top img{width:100%;height:100%;object-fit:cover}
.lg-card-mono{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:5rem;font-weight:800;color:rgba(255,255,255,.4);font-family:'Fraunces',Georgia,serif}
.lg-card-logo{position:absolute;right:1.4rem;bottom:1.4rem;width:56px;height:56px;background:#fff;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:1.9rem;font-weight:800;color:var(--biz-deep);overflow:hidden;box-shadow:var(--shadow-sm)}
.lg-card-logo img{width:100%;height:100%;object-fit:contain;padding:7px;background:#fff}
.lg-card-rows{padding:.6rem 2rem}
.lg-card-rows>div{display:flex;justify-content:space-between;gap:1.4rem;align-items:baseline;padding:1.2rem 0;border-bottom:1px solid var(--rule)}
.lg-card-rows>div:last-child{border-bottom:none}
.lg-card-rows dt{font-size:1.05rem;text-transform:uppercase;letter-spacing:.11em;color:var(--fg-muted);font-weight:600}
.lg-card-rows dd{font-family:'Fraunces',Georgia,serif;font-size:1.6rem;font-weight:600;text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.lg-card-rows dd a{color:var(--biz-deep);font-size:1.3rem}
.lg-card-note{display:flex;align-items:center;gap:.7rem;padding:1.4rem 2rem;border-top:1px solid var(--rule);font-size:1.1rem;color:var(--fg-muted)}
.lg-card-note i{color:var(--green-4)}

.lg-body{background:var(--bg-primary)}
.lg-sec{padding:7rem 3rem}
.lg-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.lg-sec-tint{background:var(--paper)}
.lg-sec-head{margin-bottom:3.6rem;max-width:var(--max-w);border-bottom:2px solid var(--fg-primary);padding-bottom:1.8rem}
.lg-sec-head>*{max-width:700px}
.lg-label{display:block;font-size:1.08rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--biz-deep);margin-bottom:1rem}
.lg-sec-head h2{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.08}
.lg-sec-head p{font-size:1.32rem;color:var(--fg-muted);margin-top:1.1rem;line-height:1.7;font-family:'Inter',sans-serif}

.lg-about{display:grid;grid-template-columns:1.6fr 1fr;gap:4rem;align-items:start}
.lg-prose{font-size:1.42rem;line-height:1.9;color:var(--fg-soft);column-gap:3rem}
.lg-prose p+p{margin-top:1.5rem}
.lg-drop::first-letter{font-family:'Fraunces',Georgia,serif;font-size:5.4rem;font-weight:700;float:left;line-height:.82;margin:.5rem .9rem 0 0;color:var(--biz-deep)}
.lg-facts{background:var(--paper);border:1px solid var(--rule);padding:2.6rem;position:sticky;top:calc(var(--nav-h) + var(--subnav-h) + 2rem)}
.lg-facts h3{font-size:1.1rem;font-family:'Inter',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);margin-bottom:1.6rem}
.lg-facts dl>div{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--rule)}
.lg-facts dl>div:last-child{border-bottom:none}
.lg-facts dt{font-size:1.1rem;color:var(--fg-muted);font-weight:600}
.lg-facts dd{font-size:1.25rem;font-weight:600;text-align:right;overflow-wrap:anywhere}
.lg-facts dd a{color:var(--biz-deep)}
.lg-facts .btn{margin-top:2rem}

.lg-hl{border-top:1px solid var(--rule)}
.lg-hl-row{display:grid;grid-template-columns:auto 1fr;gap:2.4rem;padding:2.6rem 0;border-bottom:1px solid var(--rule);align-items:start}
.lg-hl-n{font-family:'Fraunces',Georgia,serif;font-size:3.2rem;font-weight:700;color:var(--biz-deep);line-height:1;opacity:.5}
.lg-hl-row h3{font-size:1.7rem;display:flex;align-items:center;gap:1rem;margin-bottom:.7rem}
.lg-hl-row h3 i{font-size:1.3rem;color:var(--biz-deep)}
.lg-hl-row p{font-size:1.25rem;color:var(--fg-muted);line-height:1.75;max-width:74ch}

.lg-svc{border-top:1px solid var(--rule)}
.lg-svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:2rem;align-items:center;padding:2.4rem 1rem;border-bottom:1px solid var(--rule);transition:background .3s}
.lg-svc-row:hover{background:var(--paper)}
.lg-svc-ico{width:52px;height:52px;border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;font-size:1.7rem;color:var(--biz-deep);flex-shrink:0;transition:background .3s,color .3s}
.lg-svc-row:hover .lg-svc-ico{background:var(--biz-deep);color:#fff;border-color:var(--biz-deep)}
.lg-svc-main h3{font-size:1.65rem;margin-bottom:.5rem}
.lg-svc-main p{font-size:1.22rem;color:var(--fg-muted);line-height:1.7;max-width:72ch}
.lg-svc-go{font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--biz-deep);display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap}
.lg-svc-go i{transition:transform .25s}
.lg-svc-row:hover .lg-svc-go i{transform:translateX(4px)}

.lg-table-wrap{overflow-x:auto}
.lg-table{width:100%;border-collapse:collapse;min-width:640px}
.lg-table th,.lg-table td{text-align:left;padding:1.6rem 1.4rem;border-bottom:1px solid var(--rule);font-size:1.25rem;vertical-align:top}
.lg-table thead th{font-family:'Inter',sans-serif;font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);font-weight:700;border-bottom:2px solid var(--fg-primary)}
.lg-table tbody th{font-family:'Fraunces',Georgia,serif;font-size:1.5rem;font-weight:600;width:26%}
.lg-table td{color:var(--fg-muted);line-height:1.65}
.lg-right{text-align:right!important}
.lg-amt{font-family:'Fraunces',Georgia,serif;font-size:1.6rem;font-weight:600;color:var(--biz-deep)!important;white-space:nowrap}
.lg-table a{color:var(--biz-deep);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.lg-table tbody tr:hover{background:var(--paper)}

.lg-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.lg-gal-item{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--rule);padding:0;width:100%;display:block;transition:box-shadow .3s}
.lg-gal-item:hover{box-shadow:var(--shadow-md)}
.lg-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.lg-gal-item:hover img{transform:scale(1.05)}

.lg-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:3rem}
.lg-rev-card{border-top:2px solid var(--fg-primary);padding-top:2rem}
.lg-rev-card blockquote{font-size:1.55rem;line-height:1.7;font-style:italic;color:var(--fg-soft);margin-bottom:1.6rem}
.lg-rev-card figcaption{font-family:'Inter',sans-serif;font-size:1.18rem;color:var(--fg-muted)}
.lg-rev-card figcaption b{color:var(--fg-primary);font-weight:700}

body.d-ledger .hours-card{max-width:var(--max-w)}
body.d-ledger .hours-row{border-radius:2px;border-color:var(--rule)}
.lg-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}
body.d-ledger .ci,body.d-ledger .contact-form,body.d-ledger .biz-map,body.d-ledger .cf-field input,body.d-ledger .cf-field textarea{border-radius:3px}
body.d-ledger .ci{border-color:var(--rule)}
body.d-ledger .contact-form{border-color:var(--rule)}
body.d-ledger .contact-form h3{font-size:2rem}

.lg-cta{background:var(--paper);border-top:2px solid var(--fg-primary);border-bottom:1px solid var(--rule);padding:6rem 3rem;text-align:center}
.lg-cta h3{font-size:clamp(2.4rem,4vw,3.6rem);margin-bottom:1.2rem}
.lg-cta p{font-size:1.4rem;color:var(--fg-muted);max-width:600px;margin:0 auto 2.8rem;line-height:1.7}
.lg-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-ledger .biz-share,body.d-ledger .biz-listed{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   THE SHELL — every listing's own masthead and footer

   A listing page carries no Indiexis chrome. It gets a nav
   built from its own mark and its own sections, and a footer
   that belongs to the business, so the page reads as that
   company's website. The structure below is shared; each design
   re-skins it further down, because a masthead that ignored the
   page underneath it would give the whole thing away.
   ============================================================ */
.bx-nav{position:fixed;top:0;left:0;width:100%;z-index:100;height:var(--nav-h);background:color-mix(in srgb,var(--bg-primary) 86%,transparent);backdrop-filter:blur(20px) saturate(1.5);-webkit-backdrop-filter:blur(20px) saturate(1.5);border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
@supports not (background:color-mix(in srgb,red 50%,blue)){.bx-nav{background:var(--bg-primary)}}
.bx-nav.scrolled{border-bottom-color:var(--border-color);box-shadow:0 6px 28px rgba(11,13,16,.07)}
.bx-nav-in{max-width:var(--max-w);margin:0 auto;height:100%;padding:0 3rem;display:flex;align-items:center;gap:2rem}

.bx-brand{display:flex;align-items:center;gap:1.1rem;flex-shrink:0;min-width:0}
.bx-brand-mark{width:40px;height:40px;border-radius:12px;background:var(--biz-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.7rem;font-weight:800;line-height:1;overflow:hidden;flex-shrink:0}
.bx-brand-mark img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.bx-brand-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.bx-brand-txt b{font-size:1.6rem;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bx-brand-txt small{font-size:1.02rem;color:var(--fg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}

.bx-nav-links{display:flex;align-items:center;gap:2.2rem;height:100%;margin-left:auto;min-width:0}
.bx-nav-links a{position:relative;height:100%;display:flex;align-items:center;font-size:1.16rem;font-weight:700;color:var(--fg-muted);white-space:nowrap;transition:color .25s}
.bx-nav-links a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2.5px;background:var(--biz);transform:scaleX(0);transition:transform .25s var(--ease)}
.bx-nav-links a:hover{color:var(--fg-primary)}
.bx-nav-links a.active{color:var(--biz-deep)}
.bx-nav-links a.active::after{transform:scaleX(1)}

.bx-nav-end{display:flex;align-items:center;gap:1.2rem;flex-shrink:0;margin-left:auto}
.bx-nav-cta{display:inline-flex;align-items:center;gap:.7rem;background:var(--biz-deep);color:#fff;padding:1rem 2rem;border-radius:999px;font-size:1.14rem;font-weight:700;white-space:nowrap;transition:filter .25s,transform .25s var(--ease),box-shadow .25s}
.bx-nav-cta:hover{filter:brightness(1.09);transform:translateY(-2px);box-shadow:0 8px 22px rgba(var(--biz-rgb),.42)}

.bx-sheet-name{font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.18em;color:var(--biz-deep);margin-bottom:1rem}
/* The shared sheet is painted in the directory accent. On a listing it is
   the business speaking, so it borrows the listing colour instead. */
.bx-sheet a:hover{color:var(--biz-deep)}
.bx-sheet .mm-cta{color:var(--biz-deep);border-color:var(--biz-deep)}
.bx-sheet .mm-cta:hover{background:var(--biz-deep);color:#fff}

/* ---- the footer ---- */
.bx-foot{background:var(--bg-secondary);border-top:1px solid var(--border-color);padding:6.5rem 3rem 3rem}
.bx-foot-in{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:2.1fr 1fr 1.15fr 1.35fr;gap:3rem}
/* FAQ band at the top of the listing footer — colours come from the footer
   it sits in (currentColor), so it reads right on light and dark designs. */
.bx-faq{max-width:var(--max-w);margin:0 auto 5.5rem;padding-bottom:5rem;border-bottom:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.bx-faq h2{font-size:clamp(2rem,2.6vw,2.6rem);line-height:1.2;margin:0 0 2rem;letter-spacing:-.01em}
.bx-faq-list{display:grid;gap:1rem;max-width:880px}
.bx-faq details{border:1px solid color-mix(in srgb,currentColor 16%,transparent);border-radius:12px;padding:0 1.8rem;transition:border-color .2s}
.bx-faq details[open]{border-color:color-mix(in srgb,currentColor 45%,transparent)}
.bx-faq summary{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding:1.6rem 0;font-weight:700;font-size:1.55rem;line-height:1.4;cursor:pointer;list-style:none}
.bx-faq summary::-webkit-details-marker{display:none}
.bx-faq summary i{opacity:.7;flex-shrink:0;transition:transform .25s}
.bx-faq details[open] summary i{transform:rotate(45deg)}
.bx-faq details p{margin:0;padding:0 0 1.8rem;font-size:1.45rem;line-height:1.7;opacity:.85;max-width:none}
.bx-foot-brand .bx-brand{margin-bottom:1.8rem}
.bx-foot-brand .bx-brand-mark{width:46px;height:46px;font-size:1.9rem}
.bx-foot-brand .bx-brand-txt b{font-size:2rem;white-space:normal}
.bx-foot-brand>p{font-size:1.25rem;color:var(--fg-muted);line-height:1.75;max-width:42ch;margin-bottom:2.2rem}
.bx-foot-cta{display:flex;gap:.9rem;flex-wrap:wrap}
.bx-foot-col h2{font-size:1.05rem;font-weight:800;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-muted);margin-bottom:1.8rem}
.bx-foot-col li{margin-bottom:1.1rem;font-size:1.22rem;color:var(--fg-soft);line-height:1.5}
/* A footer link is navigation rather than prose, so it owes a 24px target;
   the credit line below sits inside a sentence, where that does not apply. */
.bx-foot-col a{display:inline-flex;align-items:center;min-height:24px;transition:color .25s}
.bx-foot-col a:hover{color:var(--biz-deep)}
.bx-foot-reach li,.bx-foot-reach a{display:flex;gap:.9rem;align-items:flex-start;overflow-wrap:anywhere}
.bx-foot-reach a{min-height:24px}
.bx-foot-reach i{color:var(--biz-deep);width:15px;flex-shrink:0;margin-top:.4rem;font-size:1.15rem}

.bx-foot-bottom{max-width:var(--max-w);margin:4.5rem auto 0;padding-top:2.4rem;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;gap:1.2rem 2.4rem;flex-wrap:wrap;font-size:1.1rem;color:var(--fg-muted)}
.bx-credit a{color:var(--biz-deep);font-weight:700}
.bx-credit a:hover{text-decoration:underline}
.bx-managed{flex-basis:100%;text-align:center;font-weight:600}
.bx-managed a{color:var(--biz-deep);font-weight:700}
.bx-managed a:hover{text-decoration:underline}

/* The nav is the page's only fixed bar, so section anchors clear it alone. */
body.pg-biz{--subnav-h:0px}


/* ============================================================
   THE SHELL, PER DESIGN

   Same markup, eight mastheads. Every one of them is light — a
   listing is a shop window, and shop windows are lit — but no two
   are lit the same way: one is an editor chrome, one a membership
   bar, one a masthead with nothing in it but tracking and a rule.
   ============================================================ */

/* AURORA — soft, rounded, floats over the mesh. */
body.d-aurora .bx-nav{background:color-mix(in srgb,var(--bg-primary) 78%,transparent)}
body.d-aurora .bx-brand-mark{border-radius:14px;box-shadow:0 6px 18px rgba(var(--biz-rgb),.35)}
body.d-aurora .bx-nav-cta{box-shadow:0 6px 18px rgba(var(--biz-rgb),.3)}
body.d-aurora .bx-foot{background:var(--bg-card);position:relative;overflow:hidden}
body.d-aurora .bx-foot::before{content:'';position:absolute;left:-10%;top:-60%;width:50vw;height:120%;background:rgba(var(--biz-rgb),.16);filter:blur(80px);pointer-events:none}
body.d-aurora .bx-foot-in,body.d-aurora .bx-foot-bottom{position:relative;z-index:1}



/* LEDGER — a letterhead: ruled, serif, square. */
body.d-ledger .bx-nav{background:color-mix(in srgb,var(--paper) 92%,transparent);border-bottom:1px solid var(--rule)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-ledger .bx-nav{background:var(--paper)}}
body.d-ledger .bx-nav.scrolled{box-shadow:0 1px 0 var(--rule),0 8px 24px rgba(11,13,16,.05)}
body.d-ledger .bx-brand-mark{border-radius:3px;font-family:'Fraunces',Georgia,serif}
body.d-ledger .bx-brand-txt b{font-family:'Fraunces',Georgia,serif;font-weight:600;font-size:1.72rem;letter-spacing:-.015em}
body.d-ledger .bx-nav-links a{font-size:1.1rem;text-transform:uppercase;letter-spacing:.11em;font-weight:700}
body.d-ledger .bx-nav-cta{border-radius:3px;text-transform:uppercase;letter-spacing:.09em;font-size:1.05rem}
body.d-ledger .bx-foot{background:var(--paper);border-top:2px solid var(--fg-primary)}
body.d-ledger .bx-foot-brand .bx-brand-txt b{font-family:'Fraunces',Georgia,serif;font-weight:600}
body.d-ledger .bx-foot-col h2{letter-spacing:.16em}
body.d-ledger .bx-foot-bottom{border-top-color:var(--rule)}

/* IVORY — nothing but tracking and a gold hairline, over the photograph. */
body.d-ivory .bx-nav{background:linear-gradient(to bottom,rgba(251,247,240,.92),rgba(251,247,240,0));backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom-color:transparent;height:calc(var(--nav-h) + 10px)}
body.d-ivory .bx-nav.scrolled{background:rgba(251,247,240,.96);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom-color:var(--iv-rule);height:var(--nav-h);box-shadow:none}
body.d-ivory .bx-brand-mark{border-radius:0;background:transparent;border:1px solid var(--biz);color:var(--biz-deep);font-family:'Cormorant Garamond',Georgia,serif;font-size:1.9rem;font-weight:600}
body.d-ivory .bx-brand-mark img{padding:3px}
body.d-ivory .bx-brand-txt b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:2rem;letter-spacing:.02em;color:var(--iv-ink)}
body.d-ivory .bx-brand-txt small{font-family:'Jost','Segoe UI',sans-serif;font-size:.95rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(42,33,20,.72);max-width:22ch}
body.d-ivory .bx-nav-links a{font-family:'Jost','Segoe UI',sans-serif;font-size:1.04rem;font-weight:400;text-transform:uppercase;letter-spacing:.2em;color:rgba(42,33,20,.74)}
body.d-ivory .bx-nav-links a:hover{color:var(--iv-ink)}
body.d-ivory .bx-nav-links a::after{background:var(--biz);height:1px}
body.d-ivory .bx-nav-cta{background:transparent;border:1px solid var(--biz);color:var(--biz-deep);border-radius:0;font-family:'Jost','Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.2em;font-size:.98rem;font-weight:400;padding:1.1rem 2.2rem}
body.d-ivory .bx-nav-cta:hover{background:var(--biz-deep);color:#fff;transform:none;box-shadow:none;filter:none}
body.d-ivory .bx-foot{background:#fff;border-top:1px solid var(--iv-rule)}
body.d-ivory .bx-foot-brand .bx-brand-txt b{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:2.6rem;letter-spacing:.01em}
body.d-ivory .bx-foot-col h2{font-family:'Jost','Segoe UI',sans-serif;letter-spacing:.24em;font-weight:400;color:var(--biz-deep)}
body.d-ivory .bx-foot-col li{font-family:'Jost','Segoe UI',sans-serif;font-weight:300}
body.d-ivory .bx-foot-bottom{font-family:'Jost','Segoe UI',sans-serif;font-weight:300;letter-spacing:.04em;border-top-color:var(--iv-rule)}

/* SIGNAL — a trading-desk header: square, mono, hard rules. */
body.d-signal .bx-nav{background:color-mix(in srgb,var(--bg-secondary) 94%,transparent);border-bottom:1px solid var(--border-strong)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-signal .bx-nav{background:var(--bg-secondary)}}
body.d-signal .bx-nav.scrolled{box-shadow:0 8px 24px rgba(11,13,16,.06)}
body.d-signal .bx-brand-mark{border-radius:2px;font-family:'IBM Plex Mono',ui-monospace,monospace}
body.d-signal .bx-brand-txt b{font-size:1.58rem}
body.d-signal .bx-brand-txt small{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:.98rem}
body.d-signal .bx-nav-links a{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.06rem;text-transform:uppercase;letter-spacing:.08em}
body.d-signal .bx-nav-cta{border-radius:2px;font-family:'IBM Plex Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em;font-size:1.04rem}
body.d-signal .bx-foot{background:var(--bg-secondary);border-top:3px solid var(--biz)}
body.d-signal .bx-foot-col h2{font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.14em}
body.d-signal .bx-foot-col li{font-size:1.18rem}
body.d-signal .bx-foot-bottom{font-family:'IBM Plex Mono',ui-monospace,monospace}


/* COUNSEL — a practice letterhead: warm paper, a serif name, a rule under it. */
body.d-counsel .bx-nav{background:color-mix(in srgb,var(--paper) 93%,transparent);border-bottom:1px solid var(--rule)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-counsel .bx-nav{background:var(--paper)}}
body.d-counsel .bx-nav.scrolled{box-shadow:0 6px 22px rgba(42,26,2,.07)}
body.d-counsel .bx-brand-mark{border-radius:50%;font-family:'Lora',Georgia,serif;font-weight:600}
body.d-counsel .bx-brand-txt b{font-family:'Lora',Georgia,serif;font-weight:600;font-size:1.68rem;letter-spacing:-.005em}
body.d-counsel .bx-brand-txt small{font-size:1.02rem;font-style:italic}
body.d-counsel .bx-nav-links a{font-size:1.14rem;font-weight:600}
body.d-counsel .bx-nav-cta{border-radius:6px;font-weight:600}
body.d-counsel .bx-foot{background:var(--paper);border-top:1px solid var(--rule)}
body.d-counsel .bx-foot-brand .bx-brand-txt b{font-family:'Lora',Georgia,serif;font-weight:600}
body.d-counsel .bx-foot-col h2{letter-spacing:.16em}
body.d-counsel .bx-foot-bottom{border-top-color:var(--rule)}

/* ============================================================
   5 — IVORY  ·  cream editorial

   Cream paper, gold hairlines and an enormous display serif. The
   photographs carry the page, so the signature effect belongs to
   them: the hero drifts slowly across its own frame, and every
   picture below wipes open from its lower edge as it arrives.
   ============================================================ */
body.d-ivory{font-family:'Jost','Segoe UI',Arial,sans-serif;font-weight:300;--d-radius:0px;
  --iv-paper:#fbf7f0;--iv-ink:#2a2114;--iv-rule:rgba(42,33,20,.16);--iv-hair:rgba(42,33,20,.09)}
body.d-ivory h1,body.d-ivory h2,body.d-ivory h3,body.d-ivory blockquote{font-family:'Cormorant Garamond',Georgia,serif;font-weight:400;letter-spacing:.01em;color:var(--iv-ink)}
body.d-ivory .btn{border-radius:0;font-family:'Jost','Segoe UI',sans-serif;font-weight:400;letter-spacing:.2em;text-transform:uppercase;font-size:1rem}

/* ---- hero: the photograph, then the title on cream beneath it ---- */
.iv-hero{position:relative;min-height:min(88vh,840px);display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--nav-h) + 8rem) 3rem 6rem;overflow:hidden;background:var(--iv-paper)}
.iv-hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.iv-hero-bg img{width:100%;height:100%;object-fit:cover}
/* -- signature effect: the frame drifts -------------------------------- */
.iv-hero-bg img{animation:iv-drift 26s ease-in-out infinite alternate;transform-origin:58% 42%}
@keyframes iv-drift{from{transform:scale(1.04)}to{transform:scale(1.13) translate(-1.5%,-1%)}}
@media(prefers-reduced-motion:reduce){.iv-hero-bg img{animation:none;transform:scale(1.04)}}
.iv-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(251,247,240,.32) 0%,rgba(251,247,240,.08) 26%,rgba(251,247,240,.86) 72%,var(--iv-paper) 100%)}
.iv-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;width:100%}
.iv-eyebrow{font-size:1.05rem;text-transform:uppercase;letter-spacing:.42em;color:var(--biz-deep);margin-bottom:2.2rem;font-weight:400}
.iv-rule{display:block;width:74px;height:1px;background:var(--biz);margin-bottom:2.6rem}
.iv-hero h1{font-size:clamp(4.2rem,8.6vw,9.4rem);line-height:.94;margin-bottom:2rem;max-width:16ch}
.iv-tag{font-size:clamp(1.5rem,2vw,2rem);font-weight:300;font-style:italic;color:rgba(42,33,20,.72);font-family:'Cormorant Garamond',Georgia,serif;max-width:46ch;line-height:1.45}
.iv-actions{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:3.4rem}
.iv-btn{background:var(--biz-deep);color:#fff;border:1px solid var(--biz-deep);padding:1.5rem 3rem}
.iv-btn:hover{background:transparent;color:var(--biz-deep);transform:none;box-shadow:none}
.iv-btn-ghost{background:transparent;color:var(--iv-ink);border-color:var(--iv-rule)}
.iv-btn-ghost:hover{background:var(--iv-ink);color:var(--iv-paper);border-color:var(--iv-ink)}
.iv-openline{margin-top:2.6rem}
.iv-scroll{position:absolute;left:50%;bottom:2.4rem;z-index:3;width:26px;height:44px;margin-left:-13px;border:1px solid var(--iv-rule);border-radius:14px;display:flex;justify-content:center;padding-top:8px}
.iv-scroll span{width:2px;height:8px;background:var(--biz);border-radius:2px;animation:iv-fall 1.9s var(--ease) infinite}
@keyframes iv-fall{0%{opacity:0;transform:translateY(-5px)}35%{opacity:1}100%{opacity:0;transform:translateY(16px)}}
@media(prefers-reduced-motion:reduce){.iv-scroll span{animation:none}}

/* ---- marquee: the service list read as a title sequence ---- */
.iv-marquee{overflow:hidden;border-top:1px solid var(--iv-rule);border-bottom:1px solid var(--iv-rule);padding:2rem 0;background:#fff}
.iv-marquee-track{display:flex;align-items:center;gap:2.4rem;width:max-content;animation:iv-slide 48s linear infinite}
.iv-marquee-track span{font-family:'Cormorant Garamond',Georgia,serif;font-size:clamp(2rem,3.4vw,3.2rem);color:rgba(42,33,20,.28);white-space:nowrap}
.iv-marquee-track i{color:var(--biz-deep);font-size:1.4rem;font-style:normal}
@keyframes iv-slide{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.iv-marquee-track{animation:none}}

/* ---- sections ---- */
.iv-body{background:var(--iv-paper)}
.iv-sec{padding:9rem 3rem}
.iv-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.iv-sec-head{margin-bottom:5rem;max-width:var(--max-w)}
.iv-sec-head>*{max-width:760px}
.iv-label{display:block;font-size:1rem;text-transform:uppercase;letter-spacing:.42em;color:var(--biz-deep);margin-bottom:1.8rem}
.iv-sec-head h2{font-size:clamp(3rem,5.4vw,5.4rem);line-height:1.02}
.iv-sec-head p{font-size:1.32rem;font-weight:300;color:rgba(42,33,20,.74);margin-top:1.6rem;line-height:1.8;max-width:56ch}

.iv-about{display:grid;grid-template-columns:1.55fr .85fr;gap:6rem;align-items:start}
.iv-prose{font-size:1.4rem;font-weight:300;line-height:2;color:rgba(42,33,20,.78)}
.iv-prose p+p{margin-top:1.8rem}
.iv-lead{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.3rem;font-weight:300;line-height:1.55;color:var(--iv-ink)}
.iv-about-side{border-left:1px solid var(--iv-rule);padding-left:3rem}
.iv-fact{padding-bottom:2rem;margin-bottom:2rem;border-bottom:1px solid var(--iv-hair)}
.iv-fact:last-of-type{border-bottom:none;margin-bottom:1rem}
.iv-fact b{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:3.6rem;font-weight:400;color:var(--biz-deep);line-height:1}
.iv-fact span{display:block;font-size:.98rem;text-transform:uppercase;letter-spacing:.26em;color:rgba(42,33,20,.72);margin-top:.8rem}
.iv-side-link{display:inline-flex;align-items:center;gap:.8rem;font-size:1.1rem;text-transform:uppercase;letter-spacing:.18em;color:var(--biz-deep);border-bottom:1px solid rgba(var(--biz-rgb),.4);padding-bottom:.4rem;transition:color .25s,border-color .25s}
.iv-side-link:hover{color:var(--iv-ink);border-color:var(--iv-ink)}

/* ---- highlights: a numbered manifesto ---- */
.iv-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--iv-rule);border:1px solid var(--iv-rule)}
.iv-hl-item{background:var(--iv-paper);padding:4rem 3rem;transition:background .4s}
.iv-hl-item:hover{background:#fff}
.iv-hl-n{display:block;font-family:'Cormorant Garamond',Georgia,serif;font-size:1.5rem;color:var(--biz-deep);margin-bottom:2.4rem;letter-spacing:.1em}
.iv-hl-item h3{font-size:2.3rem;margin-bottom:1.2rem;line-height:1.15}
.iv-hl-item p{font-size:1.2rem;font-weight:300;color:rgba(42,33,20,.74);line-height:1.85}

/* ---- services: an index, ruled, the number in the margin ---- */
.iv-svc{border-top:1px solid var(--iv-rule)}
.iv-svc-item{display:grid;grid-template-columns:auto 1fr auto;gap:3rem;align-items:baseline;padding:3.4rem 1rem;border-bottom:1px solid var(--iv-rule);transition:background .35s,padding-left .35s var(--ease)}
.iv-svc-item:hover{background:#fff;padding-left:2rem}
.iv-svc-n{font-family:'Cormorant Garamond',Georgia,serif;font-size:1.4rem;color:var(--biz-deep);letter-spacing:.1em;min-width:3ch}
.iv-svc-body h3{font-size:clamp(2rem,3vw,2.9rem);margin-bottom:.9rem;line-height:1.12}
.iv-svc-body p{font-size:1.2rem;font-weight:300;color:rgba(42,33,20,.74);line-height:1.8;max-width:70ch}
.iv-svc-go{font-size:1rem;text-transform:uppercase;letter-spacing:.24em;color:var(--biz-deep);white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:.3rem;transition:border-color .25s,color .25s}
.iv-svc-item:hover .iv-svc-go{border-color:var(--biz-deep)}
.iv-svc-go:hover{color:var(--iv-ink);border-color:var(--iv-ink)}

/* ---- packages ---- */
.iv-prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:4rem 3rem}
.iv-prod-card h3{font-size:2.2rem;margin:2rem 0 .8rem}
.iv-prod-card p{font-size:1.18rem;font-weight:300;color:rgba(42,33,20,.74);line-height:1.8}
.iv-prod-img{position:relative;aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center;font-size:3.4rem;color:rgba(255,255,255,.75)}
.iv-prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.iv-prod-card:hover .iv-prod-img img{transform:scale(1.06)}
.iv-prod-foot{display:flex;justify-content:space-between;align-items:baseline;gap:1.4rem;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--iv-rule)}
.iv-prod-price{font-family:'Cormorant Garamond',Georgia,serif;font-size:2rem;color:var(--biz-deep)}
.iv-prod-foot a{font-size:1rem;text-transform:uppercase;letter-spacing:.22em;color:rgba(42,33,20,.74);transition:color .25s}
.iv-prod-foot a:hover{color:var(--biz-deep)}

/* ---- gallery: a printed spread, every third frame running wide ----
   -- signature effect: each frame wipes open from its lower edge. */
.iv-gallery{padding:9rem 3rem;background:#fff}
.iv-gallery>.iv-sec-head{max-width:var(--max-w);margin:0 auto 5rem}
.iv-gal{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.iv-gal-item{position:relative;aspect-ratio:3/4;overflow:hidden;padding:0;width:100%;display:block;background:var(--iv-paper)}
/* Clipped only once a script is there to open it again. */
.iv-gal-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:38%;background:linear-gradient(to top,rgba(0,0,0,.5),transparent);opacity:0;transition:opacity .35s;pointer-events:none}
.iv-gal-item:hover::after{opacity:1}
body.fx .iv-gal-item{clip-path:inset(0 0 100% 0);transition:clip-path 1s var(--ease)}
body.fx .iv-gal-item.revealed{clip-path:inset(0 0 0 0)}
.iv-gal-wide{grid-column:span 2;aspect-ratio:3/2}
.iv-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.iv-gal-item:hover img{transform:scale(1.05)}
.iv-gal-cap{position:absolute;z-index:2;left:1.6rem;bottom:1.4rem;font-size:.95rem;letter-spacing:.24em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.55);opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.iv-gal-item:hover .iv-gal-cap{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){body.fx .iv-gal-item{clip-path:none;transition:none}}

/* ---- praise ---- */
.iv-sec-quotes{background:#fff}
.iv-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:4rem}
.iv-rev-card blockquote{font-family:'Cormorant Garamond',Georgia,serif;font-size:2.1rem;font-weight:300;font-style:italic;line-height:1.55;margin-bottom:2.2rem}
.iv-rev-card figcaption{font-size:1rem;text-transform:uppercase;letter-spacing:.24em;color:var(--biz-deep);display:flex;flex-direction:column;gap:.5rem}
.iv-rev-card figcaption span{color:rgba(42,33,20,.72);letter-spacing:.16em}

/* ---- shared plumbing, re-cut square ---- */
body.d-ivory .hours-card{max-width:var(--max-w)}
body.d-ivory .hours-row{border-radius:0;background:#fff;border-color:var(--iv-rule)}
.iv-contact{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:start}
body.d-ivory .ci,body.d-ivory .contact-form,body.d-ivory .biz-map,body.d-ivory .cf-field input,body.d-ivory .cf-field textarea,body.d-ivory .ci-ico{border-radius:0}
body.d-ivory .ci,body.d-ivory .contact-form{border-color:var(--iv-rule);background:#fff}
body.d-ivory .contact-form h3{font-size:2.4rem}
body.d-ivory .biz-share-btn{border-radius:0;border-color:var(--iv-rule)}

.iv-cta{padding:9rem 3rem;text-align:center;background:var(--iv-paper);border-top:1px solid var(--iv-rule)}
.iv-cta .iv-rule{margin:0 auto 3rem}
.iv-cta h3{font-size:clamp(2.8rem,5vw,5rem);max-width:20ch;margin:0 auto 3.4rem;line-height:1.08}
.iv-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-ivory .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   6 — SIGNAL  ·  market data desk

   Dense on purpose. Boxed tiles, a running ticker, hard 1px
   rules and tabular figures — the visual grammar of a terminal
   people check for numbers. Nothing rounds; nothing floats.
   ============================================================ */
body.d-signal{font-family:'IBM Plex Sans','Segoe UI',Arial,sans-serif;--d-radius:2px;--sg-rule:var(--border-strong)}
body.d-signal h1,body.d-signal h2,body.d-signal h3{letter-spacing:-.02em;font-weight:600}
body.d-signal .mono,body.d-signal .hours-row .ht{font-family:'IBM Plex Mono',ui-monospace,monospace}
body.d-signal .btn{border-radius:2px;letter-spacing:.06em}

/* ---- hero: copy on the left, a snapshot panel on the right ---- */
.sg-hero{position:relative;background:var(--bg-primary);padding:calc(var(--nav-h) + 5rem) 3rem 5rem;border-bottom:1px solid var(--sg-rule)}
.sg-hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(var(--border-color) 1px,transparent 1px);background-size:100% 34px;mask-image:linear-gradient(to bottom,#000,transparent 70%);-webkit-mask-image:linear-gradient(to bottom,#000,transparent 70%);opacity:.7;pointer-events:none}
.sg-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:4rem;align-items:center}
.sg-eyebrow{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.1rem;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-muted);margin-bottom:2rem}
.sg-live{display:inline-flex;align-items:center;gap:.6rem;background:rgba(22,163,74,.12);color:#15803d;border:1px solid rgba(22,163,74,.34);padding:.4rem 1rem;font-weight:600;letter-spacing:.1em}
.sg-live>span{width:7px;height:7px;border-radius:50%;background:currentColor;animation:sg-pulse 2s ease-in-out infinite}
@keyframes sg-pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.sg-live>span{animation:none}}
.sg-hero h1{font-size:clamp(3.2rem,5.4vw,5.6rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;margin-bottom:1.4rem}
.sg-tag{font-size:clamp(1.5rem,2vw,2.1rem);font-weight:500;color:var(--fg-soft);line-height:1.38;margin-bottom:1.4rem}
.sg-lede{font-size:1.36rem;color:var(--fg-muted);line-height:1.72;max-width:54ch}
.sg-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:2.8rem}
.sg-openline{margin-top:2.2rem}

.sg-panel{border:1px solid var(--sg-rule);background:var(--bg-card);box-shadow:var(--shadow-md)}
.sg-panel-bar{display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding:1.1rem 1.6rem;border-bottom:1px solid var(--sg-rule);background:var(--bg-inset);font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.02rem;letter-spacing:.1em;font-weight:600}
.sg-panel-tag{color:var(--fg-muted)}
.sg-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border-color)}
.sg-tile{background:var(--bg-card);padding:2rem 1.8rem}
.sg-tile:last-child:nth-child(odd){grid-column:span 2}
.sg-tile b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:2.8rem;font-weight:600;line-height:1;color:var(--biz-deep);font-variant-numeric:tabular-nums}
.sg-tile span{display:block;font-size:1rem;text-transform:uppercase;letter-spacing:.13em;color:var(--fg-muted);margin-top:.8rem}
.sg-panel-img{border-top:1px solid var(--sg-rule);aspect-ratio:16/9;overflow:hidden;background:var(--bg-inset)}
.sg-panel-img img{width:100%;height:100%;object-fit:cover}
.sg-panel-foot{display:flex;align-items:center;gap:1rem;padding:1.4rem 1.6rem;border-top:1px solid var(--sg-rule);font-size:1.18rem;font-weight:600}
.sg-panel-logo{width:34px;height:34px;flex-shrink:0;background:var(--biz-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;overflow:hidden}
.sg-panel-logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:3px}
.sg-panel-since{margin-left:auto;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1rem;letter-spacing:.1em;color:var(--fg-muted);font-weight:500}

/* ---- ticker: the strip that made the page feel live ----
   -- signature effect: the meters fill. Each bar carries its own width as
   a custom property and animates to it the first time the section is seen,
   so the numbers arrive rather than simply being there. */
.sg-ticker{overflow:hidden;background:var(--bg-secondary);border-top:1px solid var(--sg-rule);border-bottom:1px solid var(--sg-rule);padding:1rem 0}
.sg-ticker-track{display:flex;width:max-content;animation:sg-run 42s linear infinite}
.sg-tick{display:inline-flex;align-items:center;gap:.7rem;padding:0 2.4rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.12rem;color:var(--fg-soft);white-space:nowrap;border-right:1px solid var(--border-color)}
.sg-tick i{color:#0f8a3c;font-size:1rem}
@keyframes sg-run{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.sg-ticker-track{animation:none}}

/* ---- sections ---- */
.sg-body{background:var(--bg-primary)}
.sg-sec{padding:7rem 3rem;border-bottom:1px solid var(--border-color)}
.sg-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.sg-sec-tint{background:var(--bg-secondary)}
.sg-sec-head{margin-bottom:3.6rem;max-width:var(--max-w)}
.sg-sec-head>*{max-width:720px}
.sg-label{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.06rem;text-transform:uppercase;letter-spacing:.16em;color:var(--biz-deep);margin-bottom:1rem}
.sg-sec-head h2{font-size:clamp(2.3rem,3.8vw,3.4rem);line-height:1.1;letter-spacing:-.03em}
.sg-sec-head p{font-size:1.3rem;color:var(--fg-muted);margin-top:1.1rem;line-height:1.7}

.sg-about{display:grid;grid-template-columns:1.6fr 1fr;gap:3.5rem;align-items:start}
.sg-prose{font-size:1.38rem;line-height:1.85;color:var(--fg-soft)}
.sg-prose p+p{margin-top:1.5rem}
.sg-box{border:1px solid var(--sg-rule);background:var(--bg-card);padding:2.4rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.sg-box h3{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.06rem;text-transform:uppercase;letter-spacing:.14em;color:var(--fg-muted);margin-bottom:1.8rem}
.sg-box dl>div{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:1rem 0;border-bottom:1px solid var(--border-color)}
.sg-box dl>div:last-child{border-bottom:none}
.sg-box dt{font-size:1.1rem;color:var(--fg-muted);flex-shrink:0}
.sg-box dd{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.18rem;font-weight:500;text-align:right;overflow-wrap:anywhere}
.sg-box dd a{color:var(--biz-deep)}
.sg-box .btn{margin-top:2rem}

/* ---- strengths: boxed, with a meter under each ---- */
.sg-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--sg-rule);border:1px solid var(--sg-rule)}
.sg-hl-box{background:var(--bg-card);padding:2.8rem 2.4rem;position:relative;transition:background .3s}
.sg-hl-box:hover{background:var(--bg-inset)}
.sg-hl-ix{position:absolute;right:2rem;top:2rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.05rem;color:var(--border-strong);font-weight:600}
.sg-hl-box>i{display:block;font-size:2rem;color:var(--biz-deep);margin-bottom:1.8rem}
.sg-hl-box h3{font-size:1.5rem;margin-bottom:.8rem}
.sg-hl-box p{font-size:1.18rem;color:var(--fg-muted);line-height:1.7;margin-bottom:2rem}
.sg-hl-bar{display:block;height:4px;background:var(--bg-inset);overflow:hidden}
.sg-hl-bar i{display:block;height:100%;background:var(--biz);width:0;transition:width 1.1s var(--ease)}
.revealed .sg-hl-bar i,.sg-hl-box.revealed .sg-hl-bar i{width:var(--w,70%)}
@media(prefers-reduced-motion:reduce){.sg-hl-bar i{transition:none;width:var(--w,70%)}}

/* ---- services ---- */
.sg-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1px;background:var(--sg-rule);border:1px solid var(--sg-rule)}
.sg-svc-box{background:var(--bg-card);padding:2.8rem 2.4rem;display:flex;flex-direction:column;transition:background .3s}
.sg-svc-box:hover{background:var(--bg-inset)}
.sg-svc-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.8rem}
.sg-svc-top i{font-size:2rem;color:var(--biz-deep)}
.sg-svc-ix{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.05rem;color:var(--border-strong);font-weight:600}
.sg-svc-box h3{font-size:1.5rem;margin-bottom:.8rem}
.sg-svc-box p{font-size:1.18rem;color:var(--fg-muted);line-height:1.7}
.sg-svc-go{margin-top:auto;padding-top:1.8rem;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.06rem;text-transform:uppercase;letter-spacing:.1em;color:var(--biz-deep);display:inline-flex;align-items:center;gap:.7rem}
.sg-svc-go i{transition:transform .25s}
.sg-svc-box:hover .sg-svc-go i{transform:translateX(4px)}

/* ---- products ---- */
.sg-prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1.6rem}
.sg-prod-box{border:1px solid var(--sg-rule);background:var(--bg-card);padding:2.2rem;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s var(--ease)}
.sg-prod-box:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.sg-prod-img{aspect-ratio:16/10;overflow:hidden;background:var(--bg-inset);margin:-2.2rem -2.2rem 1.8rem}
.sg-prod-img img{width:100%;height:100%;object-fit:cover}
.sg-prod-box h3{font-size:1.45rem;margin-bottom:.7rem}
.sg-prod-box p{font-size:1.16rem;color:var(--fg-muted);line-height:1.7}
.sg-prod-foot{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;margin-top:auto;padding-top:1.8rem}
.sg-prod-price{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:1.7rem;font-weight:600;color:var(--biz-deep);font-variant-numeric:tabular-nums}
.sg-prod-foot a{display:inline-flex;align-items:center;gap:.6rem;font-size:1.08rem;font-weight:600;color:var(--fg-muted);transition:color .25s}
.sg-prod-foot a:hover{color:var(--biz-deep)}

/* ---- gallery ---- */
.sg-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--sg-rule);border:1px solid var(--sg-rule)}
.sg-gal-item{aspect-ratio:4/3;overflow:hidden;padding:0;width:100%;display:block;background:var(--bg-card)}
.sg-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.sg-gal-item:hover img{transform:scale(1.05)}

/* ---- clients ---- */
.sg-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem}
.sg-rev-box{border:1px solid var(--sg-rule);border-top:3px solid var(--biz);background:var(--bg-card);padding:2.4rem}
.sg-rev-stars{display:flex;gap:.3rem;color:var(--amber-5);font-size:1.15rem;margin-bottom:1.6rem}
.sg-rev-box blockquote{font-size:1.24rem;line-height:1.78;color:var(--fg-soft)}
.sg-rev-box figcaption{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem;padding-top:1.4rem;border-top:1px solid var(--border-color);font-size:1.16rem}
.sg-rev-av{width:34px;height:34px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.25rem}
.sg-rev-box figcaption small{color:var(--fg-muted)}

/* ---- shared plumbing ---- */
body.d-signal .hours-card{gap:1px;background:var(--sg-rule);border:1px solid var(--sg-rule);max-width:var(--max-w)}
body.d-signal .hours-row{border:none;border-radius:0;font-family:'IBM Plex Mono',ui-monospace,monospace}
.sg-contact{display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:start}
body.d-signal .ci,body.d-signal .contact-form,body.d-signal .biz-map,body.d-signal .cf-field input,body.d-signal .cf-field textarea,body.d-signal .ci-ico{border-radius:2px}
body.d-signal .ci,body.d-signal .contact-form{border-color:var(--sg-rule)}

.sg-cta{background:var(--bg-secondary);color:var(--fg-soft);padding:6rem 3rem;border-top:3px solid var(--biz);border-bottom:1px solid var(--sg-rule)}
.sg-cta-in{max-width:var(--max-w);margin:0 auto;text-align:center}
.sg-cta h3{font-size:clamp(2.2rem,3.8vw,3.4rem);margin-bottom:1.2rem;letter-spacing:-.03em}
.sg-cta p{font-size:1.36rem;color:var(--fg-muted);max-width:600px;margin:0 auto 2.8rem;line-height:1.7}
.sg-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-signal .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   7 — VITRINE  ·  the cabinet

   Bodoni, a lot of air, and one structural idea: the collection
   travels sideways while the page scrolls down. The pinned stage
   is the whole design — everything around it is deliberately
   quiet so that the moment it starts moving is the thing you
   remember about the site.
   ============================================================ */
body.d-vitrine{font-family:'Jost','Segoe UI',Arial,sans-serif;font-weight:300;--d-radius:0px;
  --vt-paper:#f6f3f1;--vt-ink:#1b0730;--vt-rule:rgba(27,7,48,.16);--vt-hair:rgba(27,7,48,.08)}
body.d-vitrine h1,body.d-vitrine h2,body.d-vitrine h3,body.d-vitrine blockquote,
body.d-vitrine .vt-plate-price,body.d-vitrine .vt-facts dd{
  font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400}
body.d-vitrine .btn{border-radius:0;font-family:'Jost','Segoe UI',sans-serif;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;font-size:1rem}

/* ---- hero ---- */
.vt-hero{background:var(--vt-paper);padding:calc(var(--nav-h) + 8rem) 3rem 0;position:relative}
.vt-hero-in{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:5rem;align-items:center}
.vt-eyebrow{font-size:1rem;text-transform:uppercase;letter-spacing:.42em;color:var(--biz-deep);margin-bottom:2.4rem}
.vt-hero h1{font-size:clamp(4.4rem,10vw,13rem);letter-spacing:-.015em;line-height:.9;margin-bottom:2rem}
.vt-tag{font-size:clamp(1.8rem,2.6vw,2.8rem);font-style:italic;color:var(--fg-soft);
  font-family:'Bodoni Moda',Didot,Georgia,serif;line-height:1.42;margin-bottom:1.6rem}
.vt-lede{font-size:1.32rem;color:var(--fg-muted);line-height:1.85;max-width:46ch}
.vt-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:3.2rem}
.vt-btn{background:var(--vt-ink);color:var(--vt-paper);border:1px solid var(--vt-ink);padding:1.5rem 3rem}
.vt-btn:hover{background:var(--biz-deep);border-color:var(--biz-deep);color:#fff;transform:none;box-shadow:none}
.vt-btn-ghost{background:transparent;color:var(--vt-ink)}
.vt-btn-ghost:hover{background:var(--vt-ink);color:var(--vt-paper);border-color:var(--vt-ink)}
.vt-openline{margin-top:2.4rem}

.vt-hero-plate{margin:0}
.vt-plate-img{aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 34px 70px rgba(27,7,48,.16)}
.vt-plate-img img{width:100%;height:100%;object-fit:cover}
.vt-plate-mono{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:7rem;color:rgba(255,255,255,.6)}
.vt-hero-plate figcaption{margin-top:1.4rem;text-align:right;font-size:.96rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--fg-muted)}

.vt-facts{max-width:var(--max-w);margin:6rem auto 0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border-top:1px solid var(--vt-rule)}
.vt-facts>div{padding:2.4rem 2rem 3.4rem;border-right:1px solid var(--vt-rule)}
.vt-facts>div:last-child{border-right:none}
.vt-facts dt{font-size:.96rem;text-transform:uppercase;letter-spacing:.24em;color:var(--fg-muted);margin-bottom:1rem}
.vt-facts dd{font-size:clamp(2.6rem,3.4vw,3.6rem);line-height:1;font-variant-numeric:tabular-nums}

/* ---- sections ---- */
.vt-body{background:var(--bg-primary)}
.vt-sec{padding:9rem 3rem}
.vt-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.vt-sec-tint{background:var(--vt-paper)}
.vt-sec-head{margin-bottom:5rem;max-width:var(--max-w)}
.vt-sec-head>*{max-width:760px}
.vt-mid{text-align:center}
.vt-mid>*{margin-left:auto;margin-right:auto}
.vt-label{display:block;font-size:.98rem;text-transform:uppercase;letter-spacing:.42em;color:var(--biz-deep);margin-bottom:1.8rem}
.vt-sec-head h2{font-size:clamp(3.2rem,6vw,6rem);line-height:.96}
.vt-sec-head p{font-size:1.3rem;color:var(--fg-muted);margin-top:1.6rem;line-height:1.85;max-width:54ch}

.vt-about{display:grid;grid-template-columns:1.5fr .8fr;gap:6rem;align-items:start}
.vt-prose{font-size:1.36rem;line-height:2;color:var(--fg-soft)}
.vt-prose p+p{margin-top:1.8rem}
.vt-lead{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:2.2rem;font-weight:400;line-height:1.5;color:var(--fg-primary)}
.vt-side dl>div{padding:1.6rem 0;border-bottom:1px solid var(--vt-rule)}
.vt-side dl>div:first-child{border-top:1px solid var(--vt-rule)}
.vt-side dt{font-size:.94rem;text-transform:uppercase;letter-spacing:.24em;color:var(--fg-muted);margin-bottom:.7rem}
.vt-side dd{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:1.7rem;overflow-wrap:anywhere}
.vt-side dd a{color:var(--biz-deep)}

.vt-hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:5rem 4rem}
.vt-hl-item{text-align:center}
.vt-hl-n{display:block;font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:3.6rem;color:var(--biz-deep);line-height:1;margin-bottom:1.8rem}
.vt-hl-item h3{font-size:2rem;margin-bottom:1rem;line-height:1.2}
.vt-hl-item p{font-size:1.2rem;color:var(--fg-muted);line-height:1.85;max-width:34ch;margin:0 auto}

.vt-svc{border-top:1px solid var(--vt-rule)}
.vt-svc-row{display:grid;grid-template-columns:auto 1fr auto;gap:3rem;align-items:baseline;
  padding:3rem 1rem;border-bottom:1px solid var(--vt-rule);transition:background .35s,padding-left .35s var(--e-quint)}
.vt-svc-row:hover{background:var(--vt-paper);padding-left:2rem}
.vt-svc-n{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:1.5rem;color:var(--biz-deep);min-width:3ch}
.vt-svc-row h3{font-size:clamp(1.9rem,2.8vw,2.7rem);line-height:1.15;grid-column:2;margin-bottom:.8rem}
.vt-svc-row p{grid-column:2;font-size:1.2rem;color:var(--fg-muted);line-height:1.8;max-width:68ch}
.vt-svc-go{grid-column:3;grid-row:1/span 2;align-self:center;font-size:.98rem;text-transform:uppercase;
  letter-spacing:.24em;color:var(--fg-muted);white-space:nowrap;border-bottom:1px solid transparent;
  padding-bottom:.3rem;transition:color .25s,border-color .25s}
.vt-svc-row:hover .vt-svc-go{color:var(--biz-deep);border-color:var(--biz-deep)}

/* ============================================================
   THE CABINET

   The section is tall. The stage inside it sticks to the top of
   the viewport, and the track inside the stage is pushed left by
   how far through the section you have scrolled. The travel is
   derived from --n, the number of plates, so nothing has to be
   measured at runtime.

   Where scroll timelines are not available the stage stops being
   sticky and the track becomes an ordinary horizontal scroller —
   the same markup, the same content, one less flourish.
   ============================================================ */
.vt-case{background:var(--vt-paper);border-top:1px solid var(--vt-rule);border-bottom:1px solid var(--vt-rule);
  padding:9rem 0 0}
.vt-case-head{max-width:var(--max-w);margin:0 auto 4rem;padding:0 3rem}
.vt-case-hint{display:flex;align-items:center;gap:1rem;margin-top:2rem;font-size:.96rem;
  text-transform:uppercase;letter-spacing:.26em;color:var(--fg-muted)}
.vt-case-hint i{color:var(--biz-deep)}

.vt-case-stage{overflow-x:auto;scrollbar-width:none;padding-bottom:9rem}
.vt-case-stage::-webkit-scrollbar{display:none}
.vt-case-track{display:flex;gap:4rem;padding:0 3rem;width:max-content}

.vt-plate{flex:0 0 clamp(260px,32vw,420px);display:flex;flex-direction:column}
.vt-plate-shot{aspect-ratio:3/4;overflow:hidden;display:flex;align-items:center;justify-content:center;
  font-size:3.4rem;color:rgba(255,255,255,.7);margin-bottom:2rem}
.vt-plate-shot img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-quint)}
.vt-plate:hover .vt-plate-shot img{transform:scale(1.05)}
.vt-plate-n{display:block;font-size:.92rem;text-transform:uppercase;letter-spacing:.26em;
  color:var(--fg-muted);margin-bottom:1rem}
.vt-plate-txt h3{font-size:2rem;line-height:1.2;margin-bottom:.6rem}
.vt-plate-price{font-size:1.6rem;color:var(--biz-deep);margin-bottom:.9rem}
.vt-plate-desc{font-size:1.18rem;color:var(--fg-muted);line-height:1.8;margin-bottom:1.4rem}
.vt-plate-ask{display:inline-flex;align-items:center;gap:.8rem;font-size:.98rem;text-transform:uppercase;
  letter-spacing:.24em;color:var(--vt-ink);border-bottom:1px solid var(--vt-rule);padding-bottom:.4rem;
  transition:color .25s,border-color .25s}
.vt-plate-ask:hover{color:var(--biz-deep);border-color:var(--biz-deep)}
.vt-plate-ask i{transition:transform .25s}
.vt-plate-ask:hover i{transform:translateX(4px)}

/* The pinned state is opt-in: the script adds .is-pinned only where it can
   actually drive it, so without a script the section keeps its natural
   height and the track stays an ordinary horizontal scroller.

   --p is scroll progress through the pinned range, 0 to 1, written by the
   handler. Everything else is arithmetic the browser does on the compositor. */
.vt-case.is-pinned{height:calc(100vh + var(--n) * 78vh);padding-bottom:0;position:relative}
.vt-case.is-pinned .vt-case-stage{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
  display:flex;align-items:center;overflow:hidden;padding-bottom:0}
.vt-case.is-pinned .vt-case-track{will-change:transform;
  transform:translate3d(calc(var(--travel,0px) * var(--p,0)),0,0)}

/* ---- editorial ---- */
.vt-gal{display:grid;grid-template-columns:repeat(12,1fr);gap:2rem}
.vt-gal-item{position:relative;overflow:hidden;padding:0;width:100%;display:block;background:var(--bg-inset)}
.vt-gal-item::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40%;
  background:linear-gradient(to top,rgba(0,0,0,.55),transparent);pointer-events:none}
.vt-gal-1{grid-column:span 7;aspect-ratio:4/3}
.vt-gal-2{grid-column:span 5;aspect-ratio:3/4;align-self:end}
.vt-gal-3{grid-column:span 5;aspect-ratio:3/4}
.vt-gal-4{grid-column:span 7;aspect-ratio:4/3;align-self:start}
.vt-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--e-quint)}
.vt-gal-item:hover img{transform:scale(1.04)}
.vt-gal-cap{position:absolute;z-index:2;left:1.6rem;bottom:1.4rem;font-family:'Jost','Segoe UI',sans-serif;
  font-size:.94rem;text-transform:uppercase;letter-spacing:.24em;color:#fff}

.vt-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:5rem 4rem}
.vt-rev-card{text-align:center}
.vt-rev-card blockquote{font-size:2rem;font-style:italic;line-height:1.55;color:var(--fg-primary);margin-bottom:2rem}
.vt-rev-card figcaption{font-size:.98rem;text-transform:uppercase;letter-spacing:.24em;color:var(--fg-muted)}

body.d-vitrine .hours-card{max-width:900px;margin:0 auto}
body.d-vitrine .hours-row{border-radius:0;border-color:var(--vt-rule)}
.vt-contact{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:start}
body.d-vitrine .ci,body.d-vitrine .contact-form,body.d-vitrine .biz-map,
body.d-vitrine .cf-field input,body.d-vitrine .cf-field textarea,body.d-vitrine .ci-ico{border-radius:0}
body.d-vitrine .ci,body.d-vitrine .contact-form{border-color:var(--vt-rule)}
body.d-vitrine .contact-form h3{font-size:2.2rem}
body.d-vitrine .biz-share-btn{border-radius:0}

.vt-cta{background:var(--vt-paper);padding:9rem 3rem;text-align:center;border-top:1px solid var(--vt-rule)}
.vt-cta h3{font-size:clamp(3rem,6vw,6rem);line-height:1;margin-bottom:1.6rem}
.vt-cta p{font-family:'Bodoni Moda',Didot,Georgia,serif;font-size:1.36rem;font-style:italic;
  color:var(--fg-muted);max-width:52ch;margin:0 auto 3.4rem;line-height:1.7}
.vt-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-vitrine .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ---- masthead ---- */
body.d-vitrine .bx-nav{background:color-mix(in srgb,var(--vt-paper) 88%,transparent);border-bottom:1px solid var(--vt-rule)}
@supports not (background:color-mix(in srgb,red 50%,blue)){body.d-vitrine .bx-nav{background:var(--vt-paper)}}
body.d-vitrine .bx-nav.scrolled{box-shadow:none;border-bottom-color:var(--vt-ink)}
body.d-vitrine .bx-brand-mark{border-radius:0;background:transparent;color:var(--vt-ink);
  border:1px solid var(--vt-ink);font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;font-size:1.8rem}
body.d-vitrine .bx-brand-mark img{padding:3px}
body.d-vitrine .bx-brand-txt b{font-family:'Bodoni Moda',Didot,Georgia,serif;font-weight:400;
  font-size:2rem;letter-spacing:.06em;text-transform:uppercase}
body.d-vitrine .bx-brand-txt small{font-family:'Jost','Segoe UI',sans-serif;font-size:.94rem;
  text-transform:uppercase;letter-spacing:.22em}
body.d-vitrine .bx-nav-links a{font-family:'Jost','Segoe UI',sans-serif;font-size:1.02rem;
  font-weight:400;text-transform:uppercase;letter-spacing:.22em}
body.d-vitrine .bx-nav-links a::after{height:1px;background:var(--vt-ink)}
body.d-vitrine .bx-nav-links a.active{color:var(--vt-ink)}
body.d-vitrine .bx-nav-cta{background:var(--vt-ink);color:var(--vt-paper);border-radius:0;
  font-family:'Jost','Segoe UI',sans-serif;text-transform:uppercase;letter-spacing:.2em;
  font-size:.96rem;font-weight:400;padding:1.1rem 2.2rem}
body.d-vitrine .bx-nav-cta:hover{background:var(--biz-deep);color:#fff;transform:none;box-shadow:none}
body.d-vitrine .bx-foot{background:var(--vt-paper);border-top:1px solid var(--vt-ink)}
body.d-vitrine .bx-foot-brand .bx-brand-txt b{font-family:'Bodoni Moda',Didot,Georgia,serif;
  font-weight:400;font-size:2.8rem;letter-spacing:.05em}
body.d-vitrine .bx-foot-col h2{font-family:'Jost','Segoe UI',sans-serif;font-weight:400;letter-spacing:.26em}
body.d-vitrine .bx-foot-col li{font-family:'Jost','Segoe UI',sans-serif;font-weight:300;font-size:1.25rem}
body.d-vitrine .bx-foot-bottom{font-family:'Jost','Segoe UI',sans-serif;font-weight:300;border-top-color:var(--vt-rule)}

@media(max-width:1024px){
  .vt-hero-in{grid-template-columns:1fr;gap:3.2rem}
  .vt-hero-plate{max-width:440px}
  .vt-about{grid-template-columns:1fr;gap:3.2rem}
  .vt-contact{grid-template-columns:1fr;gap:3.2rem}
  .vt-gal{grid-template-columns:repeat(2,1fr);gap:1.6rem}
  .vt-gal-1,.vt-gal-2,.vt-gal-3,.vt-gal-4{grid-column:span 1;aspect-ratio:3/4;align-self:auto}
}
@media(max-width:767px){
  .vt-hero{padding:calc(var(--nav-h) + 4rem) 1.6rem 0}
  .vt-sec,.vt-cta{padding-left:1.6rem;padding-right:1.6rem}
  .vt-sec{padding-top:6rem;padding-bottom:6rem}
  .vt-case{padding-top:6rem}
  .vt-case-head{padding:0 1.6rem;margin-bottom:3rem}
  .vt-case-track{padding:0 1.6rem;gap:2.4rem}
  .vt-case-stage{padding-bottom:6rem}
  .vt-plate{flex-basis:clamp(230px,72vw,300px)}
  .vt-gal{grid-template-columns:1fr}
  .vt-facts{margin-top:4rem;grid-template-columns:1fr 1fr}
  .vt-facts>div{padding:1.8rem 1.4rem 2.4rem}
  .vt-facts>div:nth-child(2n){border-right:none}
  .vt-svc-row{grid-template-columns:auto 1fr;gap:1.4rem;padding:2.4rem .4rem}
  .vt-svc-row:hover{padding-left:.4rem}
  .vt-svc-go{grid-column:2;grid-row:auto;justify-self:start;margin-top:1.2rem;align-self:auto}
  .vt-hero h1{letter-spacing:-.02em}
  body.d-vitrine .biz-share{padding-left:1.6rem;padding-right:1.6rem}
}
@media(max-width:480px){
  .vt-facts{grid-template-columns:1fr}
  .vt-facts>div{border-right:none;border-bottom:1px solid var(--vt-rule)}
  .vt-facts>div:last-child{border-bottom:none}
  .vt-actions .btn{flex:1 1 100%}
}

/* ============================================================
   8 — COUNSEL  ·  professional authority

   Warm paper, a portrait that leads, serif numerals, credentials
   stated plainly and never dressed up. For a practice where the
   person is the product, so the page is quiet and the claims are
   only the ones the listing actually made.
   ============================================================ */
body.d-counsel{font-family:'Source Sans 3','Segoe UI',Arial,sans-serif;--d-radius:6px;--paper:#f7f3ec;--rule:rgba(42,26,2,.14)}
body.d-counsel h1,body.d-counsel h2,body.d-counsel h3,body.d-counsel blockquote{font-family:'Lora',Georgia,serif;font-weight:600;letter-spacing:-.012em}
body.d-counsel .btn{border-radius:6px;letter-spacing:.05em}

/* ---- hero: copy leads, portrait sits beside it in a framed plate ---- */
.cn-hero{background:var(--paper);padding:calc(var(--nav-h) + 5.5rem) 3rem 0;position:relative;overflow:hidden}
.cn-hero::before{content:'';position:absolute;right:-12%;top:-30%;width:46vw;height:130%;background:radial-gradient(circle at 50% 50%,rgba(var(--biz-rgb),.13),transparent 62%);pointer-events:none}
.cn-hero-in{position:relative;z-index:2;max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:1.2fr .8fr;gap:5rem;align-items:center;padding-bottom:5rem}
.cn-eyebrow{display:inline-block;font-size:1.06rem;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--biz-deep);margin-bottom:1.8rem}
.cn-hero h1{font-size:clamp(3.2rem,5.4vw,5.4rem);line-height:1.04;margin-bottom:1.4rem}
.cn-tag{font-family:'Lora',Georgia,serif;font-size:clamp(1.55rem,2.1vw,2.2rem);font-style:italic;font-weight:400;color:var(--fg-soft);line-height:1.42;margin-bottom:1.6rem}
.cn-lede{font-size:1.38rem;color:var(--fg-muted);line-height:1.8;max-width:52ch}
.cn-actions{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:3rem}
.cn-openline{margin-top:2.2rem}

.cn-portrait{margin:0}
.cn-portrait-frame{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:6px;display:flex;align-items:center;justify-content:center;box-shadow:0 26px 60px rgba(42,26,2,.22);border:6px solid var(--bg-card)}
.cn-portrait-frame img{width:100%;height:100%;object-fit:cover}
.cn-portrait-mono{font-family:'Lora',Georgia,serif;font-size:6rem;font-weight:600;color:rgba(255,255,255,.55)}
.cn-portrait figcaption{margin-top:1.4rem;text-align:center;font-size:1.12rem;font-style:italic;color:var(--fg-muted)}
.cn-credentials{max-width:var(--max-w);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));border-top:1px solid var(--rule)}
.cn-credentials>div{padding:2.4rem 2rem 3.2rem;border-right:1px solid var(--rule)}
.cn-credentials>div:last-child{border-right:none}
.cn-credentials dt{font-size:1.02rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-muted);margin-bottom:.9rem}
.cn-credentials dd{font-family:'Lora',Georgia,serif;font-size:2.4rem;font-weight:600;line-height:1;color:var(--biz-deep)}

/* ---- sections ---- */
.cn-body{background:var(--bg-primary)}
.cn-sec{padding:7.5rem 3rem}
.cn-sec>*{max-width:var(--max-w);margin-left:auto;margin-right:auto}
.cn-sec-tint{background:var(--paper)}
.cn-sec-head{margin-bottom:4rem;max-width:var(--max-w)}
.cn-sec-head>*{max-width:720px}
.cn-mid>*{margin-left:auto;margin-right:auto}
.cn-mid{margin-left:auto;margin-right:auto;text-align:center}
.cn-label{display:block;font-size:1.04rem;font-weight:700;text-transform:uppercase;letter-spacing:.17em;color:var(--biz-deep);margin-bottom:1.1rem}
.cn-sec-head h2{font-size:clamp(2.4rem,4vw,3.6rem);line-height:1.1}
.cn-sec-head p{font-size:1.34rem;color:var(--fg-muted);margin-top:1.2rem;line-height:1.75}
.cn-mid p{margin-left:auto;margin-right:auto}

.cn-about{display:grid;grid-template-columns:1.55fr .85fr;gap:4rem;align-items:start}
.cn-prose{font-size:1.42rem;line-height:1.92;color:var(--fg-soft)}
.cn-prose p+p{margin-top:1.6rem}
.cn-lead{font-family:'Lora',Georgia,serif;font-size:1.85rem;font-weight:400;line-height:1.62;color:var(--fg-primary)}
.cn-about-side{background:var(--paper);border:1px solid var(--rule);border-radius:6px;padding:2.6rem;position:sticky;top:calc(var(--nav-h) + 2rem)}
.cn-about-side h3{font-family:'Source Sans 3',sans-serif;font-size:1.08rem;font-weight:700;text-transform:uppercase;letter-spacing:.15em;color:var(--fg-muted);margin-bottom:1.8rem}
.cn-about-side dl>div{display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;padding:1.1rem 0;border-bottom:1px solid var(--rule)}
.cn-about-side dl>div:last-child{border-bottom:none}
.cn-about-side dt{font-size:1.14rem;color:var(--fg-muted);flex-shrink:0}
.cn-about-side dd{font-family:'Lora',Georgia,serif;font-size:1.32rem;font-weight:600;text-align:right;overflow-wrap:anywhere}
.cn-about-side dd a{color:var(--biz-deep)}
.cn-about-side .btn{margin-top:2rem}

/* ---- approach ---- */
.cn-pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:3rem}
.cn-pillar{text-align:center;padding:0 1rem}
.cn-pillar-n{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--biz);font-family:'Lora',Georgia,serif;font-size:1.5rem;font-weight:600;color:var(--biz-deep);margin-bottom:1.8rem}
.cn-pillar h3{font-size:1.85rem;margin-bottom:.9rem;line-height:1.24}
.cn-pillar p{font-size:1.22rem;color:var(--fg-muted);line-height:1.8;max-width:36ch;margin:0 auto}

/* ---- practice areas, as an accordion that is still fully readable closed ---- */
.cn-svc{border-top:1px solid var(--rule)}
.cn-svc-item{border-bottom:1px solid var(--rule)}
.cn-svc-item summary{display:flex;align-items:center;gap:1.6rem;padding:2.2rem .6rem;list-style:none;transition:color .25s}
.cn-svc-item summary::-webkit-details-marker{display:none}
.cn-svc-item summary:hover{color:var(--biz-deep)}
.cn-svc-n{font-family:'Lora',Georgia,serif;font-size:1.3rem;color:var(--biz-deep);min-width:3ch}
.cn-svc-title{font-family:'Lora',Georgia,serif;font-size:1.7rem;font-weight:600;flex:1;display:flex;align-items:center;gap:1rem}
.cn-svc-title i{font-size:1.3rem;color:var(--biz-deep)}
.cn-svc-mark{color:var(--fg-muted);font-size:1.15rem;transition:transform .3s var(--ease)}
.cn-svc-item[open] .cn-svc-mark{transform:rotate(45deg);color:var(--biz-deep)}
.cn-svc-body{padding:0 .6rem 2.4rem 5.2rem}
.cn-svc-body p{font-size:1.28rem;color:var(--fg-muted);line-height:1.85;max-width:66ch;margin-bottom:1.4rem}
.cn-svc-body a{display:inline-flex;align-items:center;gap:.7rem;font-size:1.14rem;font-weight:700;color:var(--biz-deep)}
.cn-svc-body a i{transition:transform .25s}
.cn-svc-body a:hover i{transform:translateX(4px)}

/* ---- engagements ---- */
.cn-prod{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:2rem}
.cn-prod-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;padding:2.4rem;display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s}
.cn-prod-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.cn-prod-img{aspect-ratio:16/10;overflow:hidden;border-radius:4px;background:var(--bg-inset);margin-bottom:1.8rem}
.cn-prod-img img{width:100%;height:100%;object-fit:cover}
.cn-prod-card h3{font-size:1.6rem;margin-bottom:.6rem}
.cn-prod-price{font-family:'Lora',Georgia,serif;font-size:1.8rem;font-weight:600;color:var(--biz-deep);margin-bottom:.9rem}
.cn-prod-card>p{font-size:1.2rem;color:var(--fg-muted);line-height:1.75}
.cn-prod-go{margin-top:auto;padding-top:1.8rem;display:inline-flex;align-items:center;gap:.7rem;font-size:1.12rem;font-weight:700;color:var(--biz-deep)}
.cn-prod-go i{transition:transform .25s}
.cn-prod-card:hover .cn-prod-go i{transform:translateX(4px)}

/* ---- gallery ---- */
.cn-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.cn-gal-item{aspect-ratio:4/3;overflow:hidden;border-radius:6px;padding:0;width:100%;display:block;background:var(--bg-inset);transition:box-shadow .3s}
.cn-gal-item:hover{box-shadow:var(--shadow-md)}
.cn-gal-item img{width:100%;height:100%;object-fit:cover;transition:transform .55s var(--ease)}
.cn-gal-item:hover img{transform:scale(1.05)}

/* ---- references ---- */
.cn-rev{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2.4rem}
.cn-rev-card{background:var(--bg-card);border:1px solid var(--rule);border-radius:6px;padding:2.8rem}
.cn-rev-card>i{font-size:2rem;color:var(--biz-deep);opacity:.35;margin-bottom:1.4rem;display:block}
.cn-rev-card blockquote{font-family:'Lora',Georgia,serif;font-size:1.42rem;font-weight:400;font-style:italic;line-height:1.75;color:var(--fg-soft)}
.cn-rev-card figcaption{display:flex;align-items:center;gap:1.1rem;margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--rule)}
.cn-rev-av{width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.4rem;font-family:'Lora',Georgia,serif}
.cn-rev-card figcaption b{display:block;font-size:1.22rem}
.cn-rev-card figcaption small{display:block;font-size:1.08rem;color:var(--fg-muted)}

/* ---- shared plumbing ---- */
body.d-counsel .hours-card{max-width:900px;margin:0 auto}
body.d-counsel .hours-row{border-radius:6px;border-color:var(--rule)}
.cn-contact{display:grid;grid-template-columns:1fr 1.05fr;gap:2.4rem;align-items:start}
body.d-counsel .ci,body.d-counsel .contact-form,body.d-counsel .biz-map{border-radius:6px;border-color:var(--rule)}
body.d-counsel .contact-form h3{font-family:'Lora',Georgia,serif;font-size:2rem}

.cn-cta{background:var(--paper);color:var(--fg-soft);padding:7rem 3rem;text-align:center;border-top:1px solid var(--rule)}
.cn-cta h3{font-size:clamp(2.4rem,4.2vw,3.8rem);margin-bottom:1.2rem;line-height:1.12}
.cn-cta p{font-family:'Lora',Georgia,serif;font-size:1.4rem;font-style:italic;max-width:56ch;margin:0 auto 3rem;line-height:1.7}
.cn-cta-row{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}
body.d-counsel .biz-share{max-width:var(--max-w);margin-left:auto;margin-right:auto;padding-left:3rem;padding-right:3rem}

/* ============================================================
   SIGNATURE MOTION — one idea per design

   The pieces below are the half of each effect that belongs in
   CSS; the half that needs to know when an element arrived, or
   where the pointer is, lives in assets/site.js. Everything here
   is decoration over a page that is already complete and already
   readable, and all of it stands down under reduced motion.
   ============================================================ */

/* AURORA — the mesh never settles. Three blobs on different clocks, so the
   gradient behind the hero keeps changing shape without ever repeating. */
.au-mesh i{animation:au-drift 22s ease-in-out infinite alternate;will-change:transform}
.au-mesh i:nth-child(2){animation-duration:29s;animation-delay:-7s}
.au-mesh i:nth-child(3){animation-duration:36s;animation-delay:-14s}
@keyframes au-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7%,-5%,0) scale(1.16)}}
/* and the product shot leans towards the pointer (transform set in site.js) */
.au-shot{transition:transform .45s var(--ease),box-shadow .45s}
.au-hero-art:hover .au-shot{box-shadow:0 44px 90px rgba(11,13,16,.24)}

/* LEDGER — a hairline rules itself down the row you are reading. */
.lg-svc-row{position:relative}
.lg-svc-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--biz);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.lg-svc-row:hover::before{transform:scaleY(1)}
.lg-table tbody tr{transition:background .3s}
.lg-amt{font-variant-numeric:tabular-nums}


/* COUNSEL — the pillars arrive in order rather than all at once, and the
   rule under a section heading draws itself in. */
.cn-pillar{transition-delay:calc(var(--i,0) * .1s)}
.cn-sec-head h2{position:relative;display:inline-block;padding-bottom:1.2rem}
.cn-sec-head h2::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--biz);transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease) .15s}
.cn-sec-head.revealed h2::after,.revealed .cn-sec-head h2::after{transform:scaleX(1)}
.cn-mid h2{display:block}
.cn-mid h2::after{left:50%;width:120px;margin-left:-60px;transform-origin:center}
.cn-credentials dd{font-variant-numeric:tabular-nums}

/* ORBIT / CONSOLE / SIGNAL / IVORY keep their motion beside their own
   blocks above, because in those four the effect is the design rather than
   a flourish laid over it. */

@media(prefers-reduced-motion:reduce){
  .au-mesh i{animation:none}
  .au-shot,.lg-svc-row::before,.cn-sec-head h2::after{transition:none}
  .cn-sec-head h2::after{transform:scaleX(1)}
}

/* ============================================================
   THE CRAFT LAYER

   What separates an award-shelf site from a competent one is
   rarely a feature — it is grain on the paper, type that moves
   as you read it, a cursor that knows what it is over, and
   easing that feels authored rather than defaulted. The pieces
   below are shared by all eight designs; each design then uses
   them at its own intensity.

   None of it is a dependency. Scroll-linked motion is CSS
   `animation-timeline`, which browsers that lack it simply skip,
   leaving the finished layout behind. Everything is off under
   `prefers-reduced-motion`.
   ============================================================ */

body.pg-biz{
  /* Authored easing. The browser default and a plain ease-out both
     read as "no one chose this"; these are the curves that make a
     move feel like it has weight. */
  --e-expo:cubic-bezier(.16,1,.3,1);
  --e-quint:cubic-bezier(.22,1,.36,1);
  --e-inout:cubic-bezier(.83,0,.17,1);
  --e-back:cubic-bezier(.34,1.56,.64,1);
}

/* ---- grain -----------------------------------------------------------
   A single inline turbulence tile over the whole page at very low
   opacity. It costs nothing, never loads, and is the difference between
   a flat screen colour and something that looks printed. */
.fx-grain{position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.055;contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
  /* No blend mode: a fixed full-viewport multiply re-composites the whole
     screen every paint, which is a lot to pay for texture. */
  background-repeat:repeat}

/* ---- cursor ----------------------------------------------------------
   Two elements: a dot that tracks exactly, and a ring that lags behind
   it. The lag is the whole trick — it reads as physical. Only ever built
   on a device that has a real pointer. */
.fx-cursor{position:fixed;left:0;top:0;z-index:9999;pointer-events:none;opacity:0;transition:opacity .3s}
body.fx-cursor-on .fx-cursor{opacity:1}
.fx-cursor-dot,.fx-cursor-ring{position:absolute;left:0;top:0;border-radius:50%;
  transform:translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%)}
.fx-cursor-dot{width:6px;height:6px;background:var(--biz-deep)}
.fx-cursor-ring{width:38px;height:38px;border:1px solid var(--biz-deep);opacity:.5;
  transition:width .3s var(--e-quint),height .3s var(--e-quint),opacity .3s,background .3s}
body.fx-hot .fx-cursor-ring{width:64px;height:64px;opacity:.9;background:rgba(var(--biz-rgb),.1)}
body.fx-cursor-on{cursor:none}
body.fx-cursor-on a,body.fx-cursor-on button,body.fx-cursor-on summary,
body.fx-cursor-on input,body.fx-cursor-on textarea,body.fx-cursor-on select{cursor:none}

/* ---- magnetic ---------------------------------------------------------
   A primary action that leans towards the pointer as it approaches. The
   transform is set from script; the transition is what makes it settle
   back rather than snap. */
.fx-magnet{transition:transform .5s var(--e-quint)}

/* ---- kinetic type -----------------------------------------------------
   A headline arrives a line at a time from behind its own baseline. The
   markup is split into <span class="ln"><i>…</i></span> by script, so with
   no script the heading is simply a heading. */
.fx-split .ln{display:block;overflow:hidden}
.fx-split .ln>i{display:block;font-style:inherit}
/* An animation rather than a transition, and gated on the class the script
   adds synchronously. A transition needs a second frame to trigger, and a
   background tab is not given one — which would leave the headline parked
   below its own mask. An animation with "both" fill cannot do that: it
   always resolves to its last frame. */
body.fx .fx-split .ln>i{animation:fx-line .95s var(--e-expo) both}
@keyframes fx-line{from{transform:translateY(105%)}to{transform:none}}
body.fx .fx-split .ln:nth-child(2)>i{animation-delay:.08s}
body.fx .fx-split .ln:nth-child(3)>i{animation-delay:.16s}
body.fx .fx-split .ln:nth-child(4)>i{animation-delay:.24s}
body.fx .fx-split .ln:nth-child(5)>i{animation-delay:.32s}

/* ---- scroll-linked motion --------------------------------------------
   Native scroll timelines. A browser without them runs none of this and
   gets the static layout, which is the correct fallback — so there is no
   polyfill and no scroll listener behind it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Parallax: an element drifts against the scroll across its own pass
       through the viewport. `--par` sets how far. */
    .fx-par{animation:fx-par linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
    @keyframes fx-par{from{transform:translate3d(0,calc(var(--par,6vh) * -1),0)}to{transform:translate3d(0,var(--par,6vh),0)}}

    /* A figure that opens as it arrives and stays open. */
    .fx-rise{animation:fx-rise .1s linear both;animation-timeline:view();animation-range:entry 5% entry 62%}
    @keyframes fx-rise{from{opacity:0;transform:translate3d(0,42px,0)}to{opacity:1;transform:none}}

    /* An image that settles into its frame once, as it arrives. This was a
       scale scrubbed across the whole scroll range, which keeps a transform
       live on a full-size bitmap the entire time it is near the viewport —
       expensive enough to stall the renderer on the heaviest page here. A
       one-shot settle reads the same and is finished in under a second. */
    .fx-zoom img{animation:fx-zoom 1.1s var(--e-expo) both;animation-timeline:view();animation-range:entry 0% entry 55%}
    @keyframes fx-zoom{from{transform:scale(1.05)}to{transform:scale(1)}}

    /* A rule that draws itself across the width of its section. */
    .fx-draw{transform-origin:left;animation:fx-draw linear both;animation-timeline:view();animation-range:entry 10% cover 30%}
    @keyframes fx-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

    /* Type that tightens as it settles — small, and only on display sizes. */
    .fx-track{animation:fx-track linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    @keyframes fx-track{from{letter-spacing:.06em;opacity:.55}to{letter-spacing:inherit;opacity:1}}
  }
}

/* A pinned stage: the section holds while its contents change. Sticky is
   enough for this and works everywhere. */
.fx-pin{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;align-items:center;overflow:hidden}

/* A horizontal rail that reads as a deliberate break in the page rhythm
   rather than an overflow accident. */
.fx-rail{display:flex;gap:2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:1rem;-webkit-overflow-scrolling:touch}
.fx-rail::-webkit-scrollbar{display:none}
.fx-rail>*{scroll-snap-align:start;flex:0 0 auto}

@media(prefers-reduced-motion:reduce){
  body.fx .fx-split .ln>i{animation:none}
  .fx-magnet{transition:none}
  .fx-grain{display:none}
}

/* ============================================================
   DISPLAY SCALE

   The single thing that separated these pages from the work they
   were being measured against was nerve with type. A name set at
   56px is a heading; the same name at 11vw is the page. Each
   design's hero headline is re-cut here, along with the tracking
   and the measure that only become problems at that size.

   Everything is clamped, so the floor is what a 360px phone gets
   and the ceiling stops the largest desktop from going absurd.
   ============================================================ */

/* Optical corrections that only matter once type is this large: at
   display sizes the default tracking reads loose and lines read far
   apart, and a headline wants its line breaks chosen rather than left
   to chance. */
/* Only the hero headline: balancing runs the line breaker repeatedly,
   which is worth it once on display type and wasteful everywhere else. */
body.pg-biz h1[data-split],body.pg-biz .fx-split{text-wrap:balance}
body.pg-biz .fx-split .ln>i{padding-bottom:.06em}  /* descenders clear the mask */

/* AURORA — the name is the shopfront sign. */
.au-hero h1{font-size:clamp(4.4rem,9vw,11rem);letter-spacing:-.045em;line-height:.92;margin-bottom:1.8rem}
.au-tag{font-size:clamp(1.7rem,2.4vw,2.6rem);line-height:1.28;max-width:20ch}
.au-lede{font-size:1.5rem;max-width:46ch}
.au-hero-in{gap:6rem;align-items:center}
.au-sec-head h2{font-size:clamp(2.8rem,5vw,4.6rem);letter-spacing:-.04em;line-height:1.02}



/* LEDGER — a broadsheet masthead, and the serif can take the size. */
.lg-hero h1{font-size:clamp(4.4rem,9.5vw,12rem);letter-spacing:-.03em;line-height:.9}
.lg-tag{font-size:clamp(1.8rem,2.6vw,2.8rem);line-height:1.26}
.lg-sec-head h2{font-size:clamp(2.8rem,5.2vw,4.8rem);line-height:1}
.lg-hero-in{gap:5.5rem}

/* IVORY — the largest of the eight; the photograph can hold it. */
.iv-hero h1{font-size:clamp(4.6rem,11vw,14rem);letter-spacing:-.025em;line-height:.88;max-width:14ch}
.iv-tag{font-size:clamp(1.7rem,2.4vw,2.6rem)}
.iv-sec-head h2{font-size:clamp(3.2rem,6vw,6.4rem);line-height:.96}

/* SIGNAL — dense elsewhere, so the headline is the one place it opens up. */
.sg-hero h1{font-size:clamp(4rem,8vw,9rem);letter-spacing:-.05em;line-height:.92}
.sg-tag{font-size:clamp(1.6rem,2.2vw,2.3rem);line-height:1.3}
.sg-sec-head h2{font-size:clamp(2.6rem,4.6vw,4rem);letter-spacing:-.04em;line-height:1.04}
.sg-tile b{font-size:clamp(3rem,4vw,3.8rem);letter-spacing:-.03em}


/* COUNSEL — a monograph: the name, then a lot of air. */
.cn-hero h1{font-size:clamp(4rem,8vw,9.5rem);letter-spacing:-.035em;line-height:.94}
.cn-tag{font-size:clamp(1.7rem,2.4vw,2.5rem);line-height:1.3}
.cn-sec-head h2{font-size:clamp(2.6rem,4.8vw,4.2rem);line-height:1.04}
.cn-credentials dd{font-size:clamp(2.6rem,3.4vw,3.6rem)}

/* At display sizes the hero needs more room above and below it than the
   old scale allowed, or the type crowds the edges of its own section. */
.au-hero{padding-top:calc(var(--nav-h) + 8rem);padding-bottom:9rem}
.lg-hero{padding-top:calc(var(--nav-h) + 7rem);padding-bottom:8rem}
.sg-hero{padding-top:calc(var(--nav-h) + 7rem);padding-bottom:7rem}
.cn-hero{padding-top:calc(var(--nav-h) + 7rem)}

@media(max-width:767px){
  /* The ceilings above are desktop ambitions; a phone needs the floors and
     a tighter rhythm around them. */
  .au-hero{padding-top:calc(var(--nav-h) + 4rem);padding-bottom:5rem}
  .lg-hero,.sg-hero,.cn-hero,.nx-hero{padding-top:calc(var(--nav-h) + 4rem)}
  .au-tag,.nx-tag,.lg-tag,.iv-tag,.sg-tag,.cn-tag{max-width:none}
  .iv-hero h1,.lg-hero h1{letter-spacing:-.02em}
}

/* ============================================================
   RESPONSIVE — all eight designs

   Most visitors reach a listing from a WhatsApp link on a phone,
   so this is the layout that matters most. The rules are grouped
   by breakpoint rather than by design: nearly every design solves
   a narrow screen the same way — drop the second column, unpin
   the sticky aside, pull the padding in — and saying that once is
   both shorter and harder to get inconsistently wrong.

   Vitrine keeps its breakpoints beside its own block, because its
   pinned cabinet has to unpin at a specific width and that rule
   belongs next to the thing it undoes.
   ============================================================ */
@media(max-width:1024px){
  /* Every two-column body becomes one column, in source order. */
  .au-hero-in,.au-about,.au-contact,
  .cp-about,.cp-contact,
  .nx-about,.nx-contact,
  .lg-hero-in,.lg-about,.lg-contact,
  .iv-about,.iv-contact,
  .sg-hero-in,.sg-about,.sg-contact,
  .cn-hero-in,.cn-about,.cn-contact{grid-template-columns:1fr;gap:3.2rem}

  /* A sidebar that pins itself beside prose has nothing to pin to now. */
  .au-card-facts,.cp-meta,.nx-side,.lg-facts,.sg-box,.cn-about-side{position:static}

  .iv-about-side{border-left:none;border-top:1px solid var(--iv-rule);padding-left:0;padding-top:3rem}
  .iv-gal{grid-template-columns:repeat(2,1fr)}
  .iv-gal-wide{grid-column:span 2;aspect-ratio:16/9}

  .cn-portrait-frame{max-width:420px;margin:0 auto}
  .cn-hero-in{padding-bottom:4rem}

  .sg-tiles{grid-template-columns:repeat(4,1fr)}
  .sg-panel{max-width:620px}

  /* The constellation needs less spread once the hero narrows, or the
     nodes collide with the copy sitting on top of them. */
  .nx-field{height:clamp(260px,36vh,380px)}

  /* The footer's four columns become two. */
  .bx-foot-in{grid-template-columns:1fr 1fr;gap:3.4rem}
  .bx-foot-brand{grid-column:1/-1}
}

@media(max-width:767px){
  /* The masthead keeps the mark and the call to action; the section
     links move into the sheet behind the burger. */
  .bx-nav-in{padding:0 1.6rem;gap:1.2rem}
  .bx-nav-links{display:none}
  .bx-brand-txt small{display:none}
  .bx-brand-txt b{font-size:1.45rem;max-width:min(42vw,24ch)}
  .bx-brand-mark{width:36px;height:36px;font-size:1.5rem}
  .bx-nav-cta{padding:.85rem 1.4rem;font-size:1.05rem}
  .bx-nav-cta span{display:none}
  .bx-nav-end{gap:.6rem}

  .bx-foot{padding:4.5rem 1.6rem 2.5rem}
  .bx-foot-in{grid-template-columns:1fr;gap:3rem}
  .bx-foot-bottom{margin-top:3.4rem;flex-direction:column;align-items:flex-start;text-align:left}

  /* Section padding: 3rem of gutter is a lot on a 360px screen. */
  .au-hero,.cp-hero,.nx-hero,.lg-hero,.iv-hero,.sg-hero,.cn-hero,
  .au-sec,.cp-sec,.nx-sec,.lg-sec,.iv-sec,.iv-gallery,.sg-sec,.cn-sec,
  .au-cta,.cp-cta,.nx-cta,.lg-cta,.iv-cta,.sg-cta,.cn-cta{padding-left:1.6rem;padding-right:1.6rem}
  .au-sec,.cp-sec,.nx-sec,.lg-sec,.sg-sec,.cn-sec{padding-top:5rem;padding-bottom:5rem}
  .iv-sec,.iv-gallery{padding-top:6rem;padding-bottom:6rem}
  .iv-sec-head{margin-bottom:3.4rem}

  body.d-aurora .biz-share,body.d-cipher .biz-share,body.d-nexus .biz-share,
  body.d-ledger .biz-share,body.d-ivory .biz-share,body.d-signal .biz-share,
  body.d-counsel .biz-share{padding-left:1.6rem;padding-right:1.6rem}

  /* Hero art that only earns its space on a wide screen. */
  .iv-hero{min-height:auto;padding-top:calc(var(--nav-h) + 6rem);padding-bottom:5rem}
  .iv-scroll{display:none}
  .iv-hero h1{max-width:none;font-size:clamp(3.4rem,11vw,5rem)}
  .iv-svc-item{grid-template-columns:auto 1fr;gap:1.6rem;padding:2.6rem .4rem}
  .iv-svc-item:hover{padding-left:.4rem}
  .iv-svc-go{grid-column:2;justify-self:start;margin-top:1.4rem}
  .iv-gal,.iv-gal-wide{grid-template-columns:1fr;grid-column:span 1}
  .iv-gal-item,.iv-gal-wide{aspect-ratio:4/3}
  .iv-marquee-track span{font-size:2rem}

  /* Cipher: the readout stacks, and the HUD brackets pull in. */
  .cp-hero{padding-top:calc(var(--nav-h) + 4.5rem);padding-bottom:5rem}
  .cp-hud{inset:1.2rem}
  .cp-readout{grid-template-columns:1fr;gap:0}
  .cp-stats>div+div{border-left:none;padding-left:0}
  .cp-sec-head{padding-left:0}
  .cp-sec-n{position:static;display:block;margin-bottom:.6rem}
  .cp-svc-row{grid-template-columns:auto 1fr;gap:1.2rem 1.4rem;padding:2.4rem .4rem}
  .cp-svc-row:hover{padding-left:.4rem}
  .cp-svc-ico{display:none}
  .cp-svc-go{grid-column:2;justify-self:start;margin-top:1.2rem}

  /* Nexus: the field is decoration at this width, and the copy needs the
     room more than the constellation does. */
  .nx-hero{padding-top:calc(var(--nav-h) + 2.5rem)}
  .nx-hero-in{padding:1.5rem 0 4rem}
  .nx-field{height:clamp(210px,30vh,300px)}
  .nx-thread{padding-left:3.4rem}
  .nx-thread::before{left:.75rem}
  .nx-dot{left:-2.9rem}
  .nx-stop{grid-template-columns:auto 1fr;gap:1.2rem;padding:2.2rem .6rem}
  .nx-stop:hover{transform:none}
  .nx-stop-go{grid-column:2;justify-self:start;margin-top:1.2rem}

  .cn-credentials{grid-template-columns:1fr 1fr}
  .cn-credentials>div{padding:1.8rem 1.4rem 2.4rem}
  .cn-credentials>div:nth-child(2n){border-right:none}
  .cn-svc-body{padding-left:.6rem}
  .cn-svc-item summary{gap:1rem;padding:1.8rem .4rem}
  .cn-svc-title{font-size:1.45rem}

  .sg-tiles{grid-template-columns:repeat(2,1fr)}
  .sg-panel{max-width:none}
  .sg-hero::before{display:none}
  .sg-prod-img{margin:-2.2rem -2.2rem 1.6rem}

  .au-facts{gap:.8rem}
  .lg-hero,.sg-hero,.cn-hero{padding-top:calc(var(--nav-h) + 4rem)}
  .au-tag,.nx-tag,.lg-tag,.iv-tag,.sg-tag,.cn-tag{max-width:none}
  .iv-hero h1,.lg-hero h1{letter-spacing:-.02em}
}

@media(max-width:480px){
  .cn-credentials{grid-template-columns:1fr}
  .cn-credentials>div{border-right:none;border-bottom:1px solid var(--rule)}
  .cn-credentials>div:last-child{border-bottom:none}
  .sg-tiles{grid-template-columns:1fr}
  .iv-hl-item{padding:3rem 2rem}
  .cp-lattice{grid-template-columns:1fr}
  .au-hero,.lg-hero,.sg-hero,.cn-hero{padding-top:calc(var(--nav-h) + 3.5rem)}
  .iv-actions .btn,.nx-actions .btn{flex:1 1 100%}
}

@media print{
  .bx-nav,.bx-sheet,.iv-marquee,.sg-ticker,.iv-scroll,.cp-feed,.cp-scan,.cp-hud,.nx-field,.fx-grain,.fx-cursor{display:none!important}
  .bx-foot{background:#fff!important;color:#000!important;border-top:1px solid #000;padding:2rem 0 0}
  .bx-foot-cta,.bx-credit{display:none!important}
  .iv-hero,.iv-body,.iv-sec-quotes,.cp-hero,.nx-hero,.sg-cta,.cn-cta,.iv-cta{background:#fff!important;color:#000!important}
  .iv-hero h1,.iv-sec-head h2,.iv-hl-item h3{color:#000!important}
  .iv-veil,.iv-hero-bg{display:none!important}
}

/* A listing with no WhatsApp or email gets a card in place of the form
   (see _shared.js enquiryForm). Designs restyle it like the form. */
body.pg-biz .contact-form.cf-none p{font-size:1.5rem;color:var(--fg-muted);margin-bottom:2rem;line-height:1.6}
body.pg-biz .cf-social{display:flex;gap:1rem;justify-content:center;margin-top:1.8rem}

/* Preview listings: reviewable, not yet public. */
.bx-preview{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:150;display:flex;align-items:center;gap:.8rem;padding:1rem 1.8rem;border-radius:999px;background:#0d0f14;color:#fff;font-size:1.3rem;font-weight:600;box-shadow:0 12px 30px rgba(0,0,0,.25);white-space:nowrap}
.bx-preview i{color:#fbbf24}

/* Designs that give the mark a white tile: without a logo, the monogram
   letter takes the listing colour instead of vanishing white-on-white. */
body.d-bento .bx-brand-mark,body.d-brutal .bx-brand-mark,body.d-chrome .bx-brand-mark,body.d-compound .bx-brand-mark,body.d-ember .bx-brand-mark,body.d-estate .bx-brand-mark,body.d-forge .bx-brand-mark,body.d-hamper .bx-brand-mark,body.d-kilovolt .bx-brand-mark,body.d-kindred .bx-brand-mark,body.d-maison .bx-brand-mark,body.d-obsidian .bx-brand-mark,body.d-orbit .bx-brand-mark,body.d-pulse .bx-brand-mark,body.d-rank .bx-brand-mark,body.d-swiss .bx-brand-mark,body.d-umbrella .bx-brand-mark,body.d-vault .bx-brand-mark{color:var(--biz-deep)}