/* ============================================================
   BRIDAL ART STUDIO — shared stylesheet for every page.
   No framework, no build step. Colours are named from the
   studio's own materials, not from a generic wedding template.
   ============================================================ */

:root{
  --kohl:        #191418;   /* surma / kajal — warm near-black */
  --aubergine:   #2B1826;   /* velvet jewellery box, nikah-night plum */
  --aubergine-2: #3B2233;
  --marigold:    #E39A1F;   /* genda phool — strung at every mehndi */
  --marigold-lo: #8F5A08;   /* AA-safe marigold for small text on light */
  --rosewater:   #D9AEB0;

  --sans: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --disp: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;

  --s--1: clamp(0.80rem, 0.77rem + 0.14vw, 0.875rem);
  --s-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.0625rem);
  --s-1:  clamp(1.19rem, 1.11rem + 0.36vw, 1.40rem);
  --s-2:  clamp(1.48rem, 1.30rem + 0.78vw, 1.95rem);
  --s-3:  clamp(1.85rem, 1.50rem + 1.55vw, 2.85rem);
  --s-4:  clamp(2.35rem, 1.65rem + 3.05vw, 4.30rem);
  --s-5:  clamp(3.00rem, 1.60rem + 6.40vw, 7.20rem);

  --gut: clamp(1.15rem, 4vw, 4rem);
  --max: 1320px;
  --rule: 1px;
  --hdr: 3.75rem;
  --dur: .45s;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

html[data-theme="light"]{
  color-scheme: light;
  --bg:#EFEBE4; --bg-2:#F8F5F0;
  --fg:#241B22; --fg-mute:#6B6058;
  --line:rgba(36,27,34,.16); --line-2:rgba(36,27,34,.09);
  --accent:var(--marigold-lo); --accent-fill:var(--marigold); --on-accent:#1C1216;
  --invert-bg:var(--aubergine); --invert-fg:#F3EDEA; --invert-mute:#C4B2BC;
  --invert-line:rgba(243,237,234,.18);
}
html[data-theme="dark"]{
  color-scheme: dark;
  --bg:#171018; --bg-2:#211823;
  --fg:#F1EAEC; --fg-mute:#A99CA3;
  --line:rgba(241,234,236,.17); --line-2:rgba(241,234,236,.09);
  --accent:#F0AE3C; --accent-fill:#F0AE3C; --on-accent:#1C1216;
  --invert-bg:#0F0A10; --invert-fg:#F1EAEC; --invert-mute:#A99CA3;
  --invert-line:rgba(241,234,236,.15);
}
/* Any block that paints itself dark re-points the tokens, so accents,
   hairlines and muted text stay legible inside it. */
.sec--dark,.ft,.sheet,.hero,.social,.band--dark{
  --bg:var(--invert-bg);
  --bg-2:rgba(255,255,255,.045);
  --fg:var(--invert-fg);
  --fg-mute:var(--invert-mute);
  --line:var(--invert-line);
  --line-2:rgba(241,234,236,.09);
  --accent:#F0AE3C;
  --accent-fill:var(--marigold);
  --on-accent:#1C1216;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr) + .5rem);
  overscroll-behavior-y:none;
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;scroll-snap-type:none!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
body{
  background:var(--bg); color:var(--fg);
  font-family:var(--sans); font-size:var(--s-0); line-height:1.62;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,iframe{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-fill); outline-offset:3px; border-radius:2px;
}
h1,h2,h3{
  font-family:var(--disp); font-weight:400; line-height:1.03;
  letter-spacing:-.018em; text-wrap:balance;
  font-variation-settings:'opsz' 96,'SOFT' 18,'WONK' 1;
}
h4,h5{font-family:var(--sans);font-weight:600;line-height:1.25}
p{text-wrap:pretty}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.wrap--tight{max-width:980px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--accent-fill);color:var(--on-accent);padding:.7rem 1.1rem;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ============ Header ============ */
.hdr{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 85%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(16px); backdrop-filter:saturate(1.4) blur(16px);
  border-bottom:var(--rule) solid var(--line-2);
}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;overflow:hidden;pointer-events:none}
.prog i{display:block;height:100%;background:var(--accent-fill);transform:scaleX(0);transform-origin:0 50%}
@supports (animation-timeline: scroll()){
  .prog i{animation:progGrow linear both;animation-timeline:scroll(root block)}
  @keyframes progGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.hdr__in{display:flex;align-items:center;gap:1rem;min-height:var(--hdr)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;flex:1;min-width:0}
.brand .pin{flex:none;width:9px;height:9px;background:var(--accent-fill);transform:rotate(45deg);transition:transform .6s var(--ease-out)}
.brand:hover .pin{transform:rotate(225deg)}
.brand b{font-family:var(--disp);font-weight:500;font-size:var(--s-0);letter-spacing:-.01em;white-space:nowrap;font-variation-settings:'opsz' 20,'SOFT' 10,'WONK' 0}
.brand span{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);white-space:nowrap}
@media (max-width:640px){.brand span{display:none}}

.nav{display:none}
@media (min-width:1080px){
  .nav{display:flex;gap:1.35rem;align-items:center}
  .nav a{text-decoration:none;font-size:var(--s--1);color:var(--fg-mute);position:relative;padding-block:.35rem;white-space:nowrap;transition:color var(--dur) var(--ease)}
  .nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--accent-fill);transition:right var(--dur) var(--ease)}
  .nav a:hover,.nav a[aria-current="page"]{color:var(--fg)}
  .nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
}
.hdr__act{display:flex;align-items:center;gap:.5rem}
.iconbtn{
  display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:none;
  background:none;border:var(--rule) solid var(--line);cursor:pointer;
  transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.iconbtn:hover{border-color:var(--fg);background:var(--bg-2)}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="dark"] .ic-moon{display:none}
html[data-theme="light"] .ic-sun{display:none}
@media (min-width:1080px){.menubtn{display:none}}
.hdr__cta{display:none}
@media (min-width:1080px){
  .hdr__cta{display:inline-flex;align-items:center;gap:.45rem;background:var(--accent-fill);color:var(--on-accent);
    text-decoration:none;font-size:var(--s--1);font-weight:600;padding:.6rem 1rem;white-space:nowrap;
    transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease)}
  .hdr__cta:hover{filter:brightness(1.07);transform:translateY(-1px)}
}

/* ============ Mobile menu ============ */
.sheet{
  position:fixed;inset:0;z-index:90;background:var(--invert-bg);color:var(--invert-fg);
  display:flex;flex-direction:column;padding:var(--gut);overflow-y:auto;
  transform:translateY(-100%);transition:transform .55s var(--ease-out);visibility:hidden;
}
.sheet[data-open="true"]{transform:none;visibility:visible}
.sheet__top{display:flex;justify-content:space-between;align-items:center;min-height:var(--hdr);margin-bottom:1.4rem}
.sheet__top .iconbtn{border-color:var(--invert-line)}
.sheet nav{display:flex;flex-direction:column;gap:.1rem}
.sheet nav a{
  text-decoration:none;font-family:var(--disp);font-size:var(--s-2);font-weight:300;
  padding:.42rem 0;border-bottom:var(--rule) solid var(--invert-line);
  display:flex;justify-content:space-between;align-items:baseline;
  font-variation-settings:'opsz' 60,'SOFT' 20,'WONK' 1;
  opacity:0;transform:translateY(12px);
}
.sheet[data-open="true"] nav a{opacity:1;transform:none;transition:opacity .5s var(--ease-out) calc(var(--i)*45ms), transform .5s var(--ease-out) calc(var(--i)*45ms)}
.sheet nav a i{font-style:normal;font-family:var(--sans);font-size:.7rem;color:var(--marigold);font-variant-numeric:tabular-nums}
.sheet nav a[aria-current="page"]{color:var(--marigold)}
.sheet__foot{margin-top:auto;padding-top:1.5rem;font-size:var(--s--1);color:var(--invert-mute)}
.sheet__foot a{color:var(--invert-fg)}
.sheet .sociallinks{margin-top:1.2rem}

/* ============ Logo lockups ============ */
.ft__logo{width:clamp(11rem,20vw,15rem);height:auto;border:var(--rule) solid var(--invert-line)}
.sheet__logo{width:clamp(9rem,42vw,12rem);height:auto;border:var(--rule) solid var(--invert-line)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.4rem;text-decoration:none;font-weight:600;font-size:var(--s-0);
  border:var(--rule) solid transparent;cursor:pointer;background:none;
  transition:transform var(--dur) var(--ease), filter var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn--fill{background:var(--accent-fill);color:var(--on-accent)}
.btn--fill:hover{filter:brightness(1.08);transform:translateY(-2px)}
.btn--ghost-l{border-color:rgba(243,237,234,.42);color:#F3EDEA}
.btn--ghost-l:hover{background:rgba(243,237,234,.1);transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);color:var(--fg)}
.btn--ghost:hover{border-color:var(--fg);background:var(--bg-2);transform:translateY(-2px)}
.btn--block{width:100%}
.btn--sm{padding:.62rem 1rem;font-size:var(--s--1)}

/* ============ HERO — full-bleed, snaps to the viewport ============ */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:calc(100svh - var(--hdr));
  display:flex;align-items:flex-end;
  background:var(--aubergine);color:#F3EDEA;
  scroll-snap-align:start;
}
/* Page banners. Tall enough that a crop still reads as a photograph
   rather than a sliver of fabric, on a phone as much as on a desktop. */
.hero--short{min-height:clamp(20rem,46svh,26rem);align-items:flex-end}
@media (min-width:900px){.hero--short{min-height:clamp(24rem,44svh,30rem)}}
/* Form pages carry no banner photo: a face behind the type only competes
   with the form underneath. Same dark frame, so it still reads as a header. */
.hero--plain{
  min-height:0;
  background:
    radial-gradient(64% 54% at 88% 6%, rgba(227,154,31,.22), transparent 70%),
    radial-gradient(52% 46% at 2% 98%, rgba(217,174,176,.15), transparent 72%),
    var(--aubergine);
  border-bottom:var(--rule) solid rgba(243,237,234,.10);
}
.hero--plain .hero__in{padding-block:clamp(2.2rem,5vw,3.2rem) clamp(2.2rem,5vw,3.4rem)}
.hero--plain .hero__h{font-size:clamp(3.2rem,5vw,6rem);line-height:.92;max-width:13ch}
.hero--plain .hero__lede{max-width:42ch;font-size:clamp(1.1rem,2vw,1.45rem)}
.hero__bg{position:absolute;inset:0;z-index:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.3s var(--ease-out);
  background:
    radial-gradient(60% 46% at 78% 14%, rgba(227,154,31,.26), transparent 70%),
    radial-gradient(54% 44% at 10% 84%, rgba(217,174,176,.20), transparent 72%),
    var(--aubergine-2);
}
.hero__slide[data-state="active"]{opacity:1}
.hero__slide img,.hero__slide picture{position:absolute;inset:0;width:100%;height:100%}
.hero__slide img{object-fit:cover;object-position:center 28%}
.hero__slide[data-state="active"] img{animation:kenburns 11s var(--ease) forwards}
.hero--short .hero__slide img{animation:none}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.hero__slide[data-state="active"] img{animation:none}}
/* placeholder marker, visible only while there is no <img> */
.hero__slide:not(:has(img))::after{
  content:attr(data-slot);position:absolute;inset:0;display:grid;
  place-content:start end;padding:1.1rem 1.2rem;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,237,234,.42);
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(243,237,234,.045) 11px 12px);
}
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top, rgba(20,10,17,.93) 0%, rgba(20,10,17,.66) 34%, rgba(20,10,17,.22) 64%, rgba(20,10,17,.45) 100%),
    linear-gradient(to right, rgba(20,10,17,.78) 0%, rgba(20,10,17,.28) 52%, transparent 78%);
}
/* Banner scrim: heavy under the type at the bottom-left, and clearing
   fast to the right so the photograph is still a photograph. */
.hero--short .hero__scrim{
  background:
    linear-gradient(to top, rgba(20,10,17,.90) 0%, rgba(20,10,17,.52) 46%, rgba(20,10,17,.14) 82%, rgba(20,10,17,.28) 100%),
    linear-gradient(to right, rgba(20,10,17,.74) 0%, rgba(20,10,17,.22) 54%, rgba(20,10,17,0) 82%);
}
.hero__in{position:relative;z-index:2;width:100%;padding-block:clamp(2.2rem,6vw,4rem) clamp(4.4rem,8vw,5.5rem)}
.hero__place{
  display:inline-flex;align-items:center;gap:.6rem;font-size:var(--s--1);color:var(--rosewater);
  letter-spacing:.02em;margin-bottom:clamp(.9rem,2.5vw,1.4rem);
}
.hero__place s{width:1.6rem;height:1px;background:var(--rosewater);opacity:.65;display:block}
h1.hero__h{
  font-size:var(--s-5);font-weight:300;line-height:.85;letter-spacing:-.04em;max-width:16ch;
  font-variation-settings:'opsz' 144,'SOFT' 26,'WONK' 1;
  text-shadow:0 2px 40px rgba(12,6,10,.5);
}
h1.hero__h em{font-style:normal;font-weight:600;color:var(--marigold);font-variation-settings:'opsz' 144,'SOFT' 8,'WONK' 0}
html.js h1.hero__h > span{display:block;overflow:hidden}
html.js h1.hero__h > span > i{display:block;font-style:inherit;transform:translateY(105%);animation:lineUp 1s var(--ease-out) forwards;animation-delay:calc(.15s + var(--i)*.11s)}
@keyframes lineUp{to{transform:none}}
@media (prefers-reduced-motion: reduce){html.js h1.hero__h > span > i{transform:none;animation:none}}
.hero__lede{max-width:46ch;margin-top:clamp(1rem,2.5vw,1.5rem);color:#E6DBE0;font-size:var(--s-1);line-height:1.5}
.hero__lede b{color:#F3EDEA;font-weight:600}
.hero__btns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:clamp(1.3rem,3vw,1.8rem)}

.trust{
  display:flex;flex-wrap:wrap;align-items:center;gap:.45rem 1.3rem;
  margin-top:clamp(1.3rem,3vw,1.9rem);padding-top:clamp(1rem,2.5vw,1.3rem);
  border-top:var(--rule) solid rgba(243,237,234,.18);font-size:var(--s--1);color:#E6DBE0;
}
.trust b{color:#F3EDEA;font-weight:600}
.trust .stars{color:var(--marigold);letter-spacing:.05em}
.trust span{display:inline-flex;align-items:center;gap:.4rem}

/* hero slideshow controls, pinned to the bottom edge */
.hero__ui{
  position:absolute;left:0;right:0;bottom:0;z-index:3;
  display:flex;align-items:center;gap:1rem;
  padding:0 var(--gut) clamp(1rem,2.5vw,1.5rem);
  max-width:var(--max);margin-inline:auto;
}
.dots{display:flex;gap:.45rem;flex:1;max-width:14rem}
.dots button{
  flex:1;height:2px;padding:0;border:0;cursor:pointer;
  background:rgba(243,237,234,.3);position:relative;overflow:hidden;
}
.dots button::after{content:'';position:absolute;inset:0;background:var(--marigold);transform:scaleX(0);transform-origin:0 50%}
.dots button[aria-current="true"]::after{transform:scaleX(1);transition:transform .5s var(--ease-out)}
.dots button[aria-current="true"][data-timing="true"]::after{animation:tick 6.5s linear forwards}
@keyframes tick{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hero__cap{font-size:var(--s--1);color:#C9B9C2;flex:1;text-align:right;min-height:1.4em}
@media (max-width:700px){.hero__cap{display:none}}
.hero__cue{
  position:absolute;right:var(--gut);bottom:clamp(3rem,7vw,4.5rem);z-index:3;
  writing-mode:vertical-rl;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(243,237,234,.65);text-decoration:none;display:flex;align-items:center;gap:.6rem;
}
.hero__cue::after{content:'';width:1px;height:2.6rem;background:linear-gradient(rgba(243,237,234,.7),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:0 0}50%{transform:scaleY(1);transform-origin:0 0}51%{transform-origin:0 100%}100%{transform:scaleY(.2);transform-origin:0 100%}}
@media (max-width:900px){.hero__cue{display:none}}

/* ============ Scroll snap (the "mix": hero snaps, rest is free) ============ */
@media (min-width:900px) and (prefers-reduced-motion: no-preference){
  html.snaphero{scroll-snap-type:y proximity}
  html.snaphero .snap{scroll-snap-align:start;scroll-snap-stop:normal}
}

/* ============ SOCIAL BAR ============ */
.social{background:var(--invert-bg);color:var(--invert-fg);border-block:var(--rule) solid var(--invert-line)}
.social__in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;
  padding-block:clamp(1rem,2.5vw,1.5rem);
}
.social__t{font-size:var(--s--1);color:var(--invert-mute);display:flex;align-items:center;gap:.6rem}
.social__t s{width:1.6rem;height:1px;background:var(--marigold);display:block}
.sociallinks{display:flex;flex-wrap:wrap;gap:.5rem}
.sociallinks a{
  display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;
  padding:.5rem .85rem;border:var(--rule) solid var(--invert-line);font-size:var(--s--1);font-weight:500;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease),color var(--dur) var(--ease);
}
.sociallinks a:hover{background:var(--marigold);border-color:var(--marigold);color:var(--on-accent);transform:translateY(-2px)}
.sociallinks svg{width:16px;height:16px;flex:none;fill:currentColor}
.sociallinks a b{font-weight:600}
@media (max-width:560px){.sociallinks a b{display:none}.sociallinks a{padding:.6rem .75rem}}

/* ============ STICKY SOCIAL RAIL ============
   The reference for this was the old stacked-colour-block sidebar you
   see on blogs. Same idea, restrained: a glass pill on the left edge
   that stays out of the way, and only opens up when you reach for it.
   Each row takes its brand colour on hover and slides its name out.
   ============================================ */
.rail-social{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:55;
  display:none;flex-direction:column;gap:2px;padding:6px 6px 6px 0;
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px); backdrop-filter:saturate(1.5) blur(14px);
  border:var(--rule) solid var(--line-2);border-left:0;
  border-radius:0 14px 14px 0;
  box-shadow:0 10px 34px rgba(0,0,0,.10);
}
@media (min-width:1180px){.rail-social{display:flex}}
.rail-social__mark{
  display:grid;place-items:center;width:2.6rem;height:2.6rem;margin-bottom:4px;
  border-bottom:var(--rule) solid var(--line-2);
}
.rail-social__mark i{width:9px;height:9px;background:var(--accent-fill);transform:rotate(45deg);display:block}
.rail-social a{
  position:relative;display:flex;align-items:center;gap:0;
  height:2.6rem;width:2.6rem;padding-left:.85rem;
  text-decoration:none;color:var(--fg-mute);overflow:hidden;
  border-radius:0 9px 9px 0;
  transition:width .38s var(--ease-out), background .3s var(--ease), color .3s var(--ease), padding-left .38s var(--ease-out);
}
.rail-social a svg{width:17px;height:17px;flex:none;fill:currentColor}
.rail-social a b{
  font-size:var(--s--1);font-weight:600;white-space:nowrap;
  opacity:0;margin-left:.6rem;transition:opacity .28s var(--ease) .06s;
}
.rail-social a:hover,.rail-social a:focus-visible{
  width:11.5rem;color:#fff;background:var(--brand,var(--accent-fill));
}
.rail-social a:hover b,.rail-social a:focus-visible b{opacity:1}
.rail-social a:focus-visible{outline-offset:-2px}

/* brand colours, used only on hover */
.rail-social a[data-net="instagram"]{--brand:#C13584}
.rail-social a[data-net="facebook"] {--brand:#1877F2}
.rail-social a[data-net="tiktok"]   {--brand:#111}
.rail-social a[data-net="youtube"]  {--brand:#FF0000}
.rail-social a[data-net="pinterest"]{--brand:#E60023}
.rail-social a[data-net="whatsapp"] {--brand:#25D366}
html[data-theme="dark"] .rail-social a[data-net="tiktok"]{--brand:#333}

@media (prefers-reduced-motion: reduce){
  .rail-social a{transition:background .01s, color .01s}
  .rail-social a:hover,.rail-social a:focus-visible{width:11.5rem}
}

/* The rail has to reach every device, but a 35px bar pinned to the left
   edge of a 375px phone sits straight on top of the copy. So it changes
   shape instead of disappearing:

     1180px+   full rail, label slides out on hover
     768-1179  same rail, icons only, and the page is nudged clear of it
     under 768 a horizontal strip in the bottom-left corner, tucked above
               the call bar and clear of the floating WhatsApp button on
               the right, so it never covers a line of text
   ============================================================ */
@media (max-width:1179px){
  .rail-social{display:flex;gap:0;padding:4px 3px 4px 0;border-radius:0 11px 11px 0}
  .rail-social__mark{display:none}
  .rail-social a{width:2.15rem;height:2.15rem;padding-left:0;justify-content:center;border-radius:0 7px 7px 0}
  .rail-social a svg{width:15px;height:15px}
  .rail-social a b{display:none}
  .rail-social a:hover,.rail-social a:focus-visible{width:2.15rem}
}
@media (min-width:768px) and (max-width:1179px){
  .wrap{padding-left:calc(var(--gut) + 2.4rem)}
}
@media (max-width:767px){
  .rail-social{
    left:.5rem;right:auto;top:auto;bottom:calc(4.7rem + env(safe-area-inset-bottom));
    transform:translateY(calc(100% + 5.4rem));flex-direction:row;gap:2px;padding:3px;
    border:var(--rule) solid var(--line-2);border-radius:11px;
    transition:transform .45s var(--ease-out);
  }
  .rail-social[data-show="true"]{transform:none}
  .rail-social:not([data-show="true"]){pointer-events:none}
  @media (prefers-reduced-motion: reduce){.rail-social{transition:none}}
  .rail-social a{width:2rem;height:2rem;border-radius:7px}
  .rail-social a:hover,.rail-social a:focus-visible{width:2rem}
  .rail-social a svg{width:15px;height:15px}
}

/* ============ Section frame ============ */
.sec{padding-block:clamp(3.2rem,9vw,6.5rem);position:relative}
.sec--alt{background:var(--bg-2);border-block:var(--rule) solid var(--line-2)}
.sec--dark{background:var(--invert-bg);color:var(--invert-fg)}
.sec--pt0{padding-top:0}
.sec__head{max-width:64ch;margin-bottom:clamp(1.8rem,5vw,3rem)}
.sec__head--mid{margin-inline:auto;text-align:center}
.sec__num{
  display:inline-flex;align-items:center;gap:.6rem;font-size:.7rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-variant-numeric:tabular-nums;margin-bottom:.9rem;
}
.sec__num s{width:2.2rem;height:1px;background:currentColor;opacity:.45;display:block}
.sec h2{font-size:var(--s-3);font-weight:400;font-variation-settings:'opsz' 120,'SOFT' 22,'WONK' 1}
.lede{margin-top:.9rem;color:var(--fg-mute);font-size:var(--s-1);line-height:1.55;max-width:58ch}
.sec__head--mid .lede{margin-inline:auto}
.mute{color:var(--fg-mute)}
.fine{font-size:var(--s--1);color:var(--fg-mute)}
.stars{color:var(--accent);letter-spacing:.06em}

/* ============ Stat strip ============ */
.strip{border-block:var(--rule) solid var(--line);background:var(--bg-2)}
.strip ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin-inline:auto}
@media (min-width:900px){.strip ul{grid-template-columns:repeat(4,1fr)}}
.strip li{padding:1.2rem var(--gut);border-bottom:var(--rule) solid var(--line-2)}
.strip li+li{border-left:var(--rule) solid var(--line-2)}
@media (min-width:900px){.strip li{border-bottom:0}}
.strip b{display:block;font-family:var(--disp);font-size:var(--s-2);font-weight:500;line-height:1;letter-spacing:-.02em;font-variation-settings:'opsz' 48,'SOFT' 14,'WONK' 0;font-variant-numeric:tabular-nums}
.strip span{display:block;font-size:var(--s--1);color:var(--fg-mute);margin-top:.32rem}

/* ============ Plates (image slots) ============ */
.plate{
  position:relative;aspect-ratio:var(--ar,4/5);width:100%;
  border:var(--rule) dashed var(--line);background:var(--bg-2);
  display:grid;place-content:center;text-align:center;gap:.25rem;padding:.8rem;
  color:var(--fg-mute);overflow:hidden;
}
.plate::after{
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(135deg,transparent 0 9px,var(--line-2) 9px 10px);
}
.plate b{display:block;font-size:var(--s--1);font-weight:600;color:var(--fg);letter-spacing:-.005em}
.plate span{display:block;font-size:.68rem;letter-spacing:.09em;text-transform:uppercase}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.plate:has(img){border-style:solid;border-color:transparent}
.plate:has(img)::after{display:none}

/* ============ Service cards ============ */
.svcs{display:grid;gap:clamp(.8rem,2vw,1.4rem);grid-template-columns:1fr}
@media (min-width:680px){.svcs{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.svcs{grid-template-columns:repeat(3,1fr)}}
.svc{
  position:relative;display:flex;flex-direction:column;text-decoration:none;
  border:var(--rule) solid var(--line);background:var(--bg-2);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.svc:hover{border-color:var(--fg);transform:translateY(-4px)}
.svc .plate{border:0;--ar:16/11}
.svc__body{padding:clamp(1rem,2.5vw,1.4rem);display:flex;flex-direction:column;gap:.5rem;flex:1}
.svc h3{font-size:var(--s-1);font-variation-settings:'opsz' 32,'SOFT' 16,'WONK' 0}
.svc p{font-size:var(--s--1);color:var(--fg-mute);flex:1}
.svc__foot{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-top:.7rem;border-top:var(--rule) solid var(--line-2)}
.svc__p{font-family:var(--disp);font-size:var(--s-2);letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 48,'SOFT' 6,'WONK' 0}
.svc__p u{text-decoration:none;font-family:var(--sans);font-size:.6em;color:var(--fg-mute);font-weight:500}
.svc__go{font-size:var(--s--1);font-weight:600;color:var(--accent)}
.svc:hover .svc__go{text-decoration:underline;text-underline-offset:3px}

/* ============ Price ledger ============ */
.tabs{display:flex;gap:.4rem;overflow-x:auto;scrollbar-width:none;margin-bottom:1.5rem;padding-bottom:.2rem;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{
  white-space:nowrap;padding:.6rem 1rem;border:var(--rule) solid var(--line);
  background:none;cursor:pointer;font-size:var(--s--1);font-weight:500;color:var(--fg-mute);
  transition:all var(--dur) var(--ease);
}
.tab:hover{border-color:var(--fg);color:var(--fg)}
.tab[aria-selected="true"],.tab[aria-pressed="true"]{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.ledger{border-top:var(--rule) solid var(--line)}
.row{
  display:grid;grid-template-columns:1fr auto;gap:.3rem 1.5rem;align-items:baseline;
  padding:1.1rem 0;border-bottom:var(--rule) solid var(--line-2);
  position:relative;transition:padding-left .4s var(--ease-out);
}
.row::before{
  content:'';position:absolute;left:-.85rem;top:1.35rem;width:.45rem;height:.45rem;
  background:var(--accent-fill);transform:rotate(45deg) scale(0);transition:transform .4s var(--ease-out);
}
@media (min-width:640px) and (hover:hover){
  .row:hover{padding-left:.85rem}
  .row:hover::before{transform:rotate(45deg) scale(1)}
}
.row:last-child{border-bottom:var(--rule) solid var(--line)}
.row__t{font-weight:600;font-size:var(--s-0);letter-spacing:-.005em}
.row__d{grid-column:1/-1;font-size:var(--s--1);color:var(--fg-mute);max-width:66ch}
.row__p{
  font-family:var(--disp);font-size:var(--s-2);font-weight:400;line-height:1;white-space:nowrap;
  letter-spacing:-.025em;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 60,'SOFT' 6,'WONK' 0;
}
.row__p u{text-decoration:none;font-family:var(--sans);font-size:.62em;color:var(--fg-mute);font-weight:500}
.row--feature{background:linear-gradient(90deg, color-mix(in srgb, var(--accent-fill) 11%, transparent), transparent 62%);padding-inline:.85rem;margin-inline:-.85rem}
.flagtag{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--on-accent);background:var(--accent-fill);padding:.16rem .45rem;margin-left:.55rem;vertical-align:.14em}
.chips{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.5rem}
.chips span{font-size:.72rem;border:var(--rule) solid var(--line);padding:.2rem .5rem;color:var(--fg-mute)}
.addbtn{
  grid-column:1/-1;justify-self:start;margin-top:.6rem;font-size:var(--s--1);font-weight:600;
  background:none;border:0;padding:.25rem 0;cursor:pointer;color:var(--accent);
  border-bottom:1px solid currentColor;transition:opacity var(--dur) var(--ease);text-decoration:none;
}
.addbtn:hover{opacity:.7}
.group{margin-top:2.4rem}
.group:first-of-type{margin-top:0}
.group__t{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem}
.group__t s{flex:1;height:1px;background:var(--line);display:block}
.panel[hidden]{display:none}
.note{border-left:2px solid var(--accent-fill);padding:.15rem 0 .15rem .95rem;font-size:var(--s--1);color:var(--fg-mute);margin-top:1.4rem;max-width:66ch}

.compare{margin-top:clamp(1.8rem,4vw,2.6rem);border:var(--rule) solid var(--line);padding:clamp(1.1rem,3vw,1.7rem);background:var(--bg-2);display:grid;gap:1.2rem}
@media (min-width:820px){.compare{grid-template-columns:1.3fr 1fr;align-items:center;gap:2.5rem}}
.compare h3{font-size:var(--s-2);font-weight:400;font-variation-settings:'opsz' 48,'SOFT' 20,'WONK' 1}
.compare p{margin-top:.5rem;color:var(--fg-mute);font-size:var(--s--1);max-width:54ch}
.compare dl{display:grid;gap:.5rem;margin:0}
.compare div{display:flex;justify-content:space-between;gap:1rem;border-bottom:var(--rule) solid var(--line-2);padding-bottom:.45rem;font-size:var(--s--1)}
.compare dt{color:var(--fg-mute)}
.compare dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ============ Estimator ============ */
.est{display:grid;gap:clamp(1.5rem,4vw,2.5rem)}
@media (min-width:1040px){.est{grid-template-columns:minmax(0,1fr) minmax(340px,.7fr);align-items:start}}
.field{border-bottom:var(--rule) solid var(--invert-line);padding-block:1.1rem}
.field:first-child{border-top:var(--rule) solid var(--invert-line)}
.field__l{display:block;font-weight:600;font-size:var(--s-0);margin-bottom:.15rem}
.field__h{font-size:var(--s--1);color:var(--invert-mute);margin-bottom:.7rem}
.seg{display:flex;flex-wrap:wrap;gap:.4rem}
.seg button{padding:.55rem .9rem;border:var(--rule) solid var(--invert-line);background:none;color:inherit;cursor:pointer;font-size:var(--s--1);font-weight:500;transition:all var(--dur) var(--ease)}
.seg button:hover{border-color:var(--invert-fg)}
.seg button[aria-pressed="true"]{background:var(--marigold);border-color:var(--marigold);color:var(--on-accent)}
.counts{display:grid;gap:.55rem}
.count{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.count>span{font-size:var(--s--1)}
.stepper{display:flex;align-items:center;border:var(--rule) solid var(--invert-line);flex:none}
.stepper button{width:2.4rem;height:2.4rem;background:none;border:0;color:inherit;cursor:pointer;font-size:1.05rem;line-height:1;transition:background var(--dur) var(--ease)}
.stepper button:hover{background:rgba(255,255,255,.1)}
.stepper input{width:2.6rem;height:2.4rem;text-align:center;background:none;border:0;border-inline:var(--rule) solid var(--invert-line);font-variant-numeric:tabular-nums;font-weight:600;-moz-appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ins{display:grid;gap:.75rem;grid-template-columns:1fr}
@media (min-width:520px){.ins{grid-template-columns:1fr 1fr}}
.ins label{display:block;font-size:var(--s--1);color:var(--invert-mute);margin-bottom:.3rem}
.ins input,.ins select{width:100%;padding:.65rem .7rem;background:rgba(255,255,255,.05);border:var(--rule) solid var(--invert-line);color:inherit;color-scheme:dark}
.ins select option{background:#1d1218;color:#f6f0ee}
.ins input::-webkit-calendar-picker-indicator{filter:invert(.85)}
.check{display:flex;align-items:flex-start;gap:.65rem;cursor:pointer;font-size:var(--s--1)}
.check input{width:1.1rem;height:1.1rem;accent-color:var(--marigold);margin-top:.22rem;flex:none}
.quote{position:sticky;top:calc(var(--hdr) + 1rem);border:var(--rule) solid var(--invert-line);background:rgba(255,255,255,.045);padding:clamp(1.15rem,3vw,1.7rem)}
.quote__k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold)}
.quote__big{font-family:var(--disp);font-size:var(--s-4);font-weight:500;line-height:.95;letter-spacing:-.035em;margin-block:.35rem .1rem;font-variant-numeric:tabular-nums;font-variation-settings:'opsz' 144,'SOFT' 8,'WONK' 0;transition:opacity .25s var(--ease)}
.quote__big.flash{opacity:.3}
.quote__sub{font-size:var(--s--1);color:var(--invert-mute)}
.bill{list-style:none;padding:0;margin:1.2rem 0 0;border-top:var(--rule) solid var(--invert-line)}
.bill li{display:flex;justify-content:space-between;gap:1rem;padding:.48rem 0;border-bottom:var(--rule) solid rgba(255,255,255,.07);font-size:var(--s--1)}
.bill li span:last-child{font-variant-numeric:tabular-nums;white-space:nowrap}
.bill li.is-quoted span:last-child{color:var(--marigold)}
.flags{margin-top:1rem;display:grid;gap:.5rem}
.flag{display:flex;gap:.55rem;font-size:var(--s--1);color:var(--invert-mute);line-height:1.45}
.flag s{color:var(--marigold);text-decoration:none;flex:none}
.quote__btns{display:grid;gap:.5rem;margin-top:1.25rem}

/* ============ Gallery ============ */
.filters{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.5rem}
.grid{display:grid;gap:clamp(.6rem,1.6vw,1rem);grid-template-columns:repeat(2,1fr)}
@media (min-width:780px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1140px){.grid{grid-template-columns:repeat(5, minmax(0,1fr));max-width:1180px;margin-inline:auto}}
.grid--3{grid-template-columns:repeat(2,1fr)}
@media (min-width:780px){.grid--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.grid--3{grid-template-columns:repeat(4, minmax(0,1fr))}}
.cell--wide{grid-column:span 2}
.cell{position:relative;overflow:hidden}
.cell .plate{transition:transform .8s var(--ease-out)}
@media (hover:hover){.cell:hover .plate{transform:scale(1.04)}}
.cell button.open{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;cursor:zoom-in}
.gallery-empty{padding:2rem 0;text-align:center;color:var(--fg-mute)}

/* ============ Drifting band ============ */
.band{overflow:hidden;border-block:var(--rule) solid var(--line);background:var(--bg-2);padding-block:clamp(.9rem,2vw,1.4rem)}
.band__track{display:flex;gap:clamp(.6rem,1.5vw,1rem);width:max-content;animation:drift 68s linear infinite}
.band--rev .band__track{animation-direction:reverse;animation-duration:82s}
.band:hover .band__track,.band:focus-within .band__track{animation-play-state:paused}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.band__track>*{flex:none;width:clamp(150px,22vw,250px)}
@media (prefers-reduced-motion: reduce){.band{overflow-x:auto}.band__track{animation:none}}

/* ============ REELS ============
   Vertical 9:16 cards. They work two ways:
   - with a <video> inside .reel__media  -> autoplays muted in view,
     click unmutes and expands
   - with only an <img> + a link         -> acts as a poster that
     opens the reel on Instagram
   ================================================ */
.reels{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,62vw);
  gap:clamp(.6rem,1.6vw,1rem);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:1rem;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);
  scrollbar-width:thin;overscroll-behavior-x:contain;
}
@media (min-width:640px){.reels{grid-auto-columns:minmax(210px,32vw)}}
@media (min-width:1000px){
  .reels{grid-auto-flow:row;grid-template-columns:repeat(4,1fr);overflow:visible;
    margin-inline:0;padding-inline:0;scroll-snap-type:none}
}
@media (min-width:1280px){.reels{grid-template-columns:repeat(5,1fr)}}
.reel{
  position:relative;scroll-snap-align:start;background:var(--bg-2);
  border:var(--rule) solid var(--line);overflow:hidden;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.reel:hover{border-color:var(--fg);transform:translateY(-4px)}
.reel__media{position:relative;aspect-ratio:9/16;width:100%;overflow:hidden;background:var(--aubergine)}
.reel__media video,.reel__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__media::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(20,10,17,.82) 0%,rgba(20,10,17,.18) 38%,transparent 62%);
}
.reel__ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:.25rem;text-align:center;
  color:rgba(243,237,234,.55);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  background:repeating-linear-gradient(135deg,transparent 0 10px,rgba(243,237,234,.05) 10px 11px);
}
.reel__ph b{display:block;color:#F3EDEA;font-size:var(--s--1);letter-spacing:-.005em;text-transform:none}
.reel__badge{
  position:absolute;top:.6rem;right:.6rem;z-index:3;width:2rem;height:2rem;border-radius:50%;
  display:grid;place-items:center;background:rgba(20,10,17,.6);color:#F3EDEA;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.reel__badge svg{width:13px;height:13px;fill:currentColor}
.reel__play{
  position:absolute;inset:0;z-index:4;width:100%;height:100%;border:0;background:none;cursor:pointer;
  display:grid;place-items:center;color:#F3EDEA;
}
.reel__play i{
  width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:rgba(243,237,234,.18);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(243,237,234,.45);transition:transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.reel:hover .reel__play i{transform:scale(1.1);background:var(--marigold);border-color:var(--marigold);color:var(--on-accent)}
.reel__play svg{width:16px;height:16px;fill:currentColor;margin-left:2px}
.reel[data-playing="true"] .reel__play i{opacity:0}
.reel__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:.7rem .8rem;
  font-size:var(--s--1);color:#F3EDEA;line-height:1.35;pointer-events:none;
}
.reel__cap span{display:block;font-size:.66rem;color:var(--rosewater);letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}
@media (prefers-reduced-motion: reduce){.reel__media video{display:none}}

/* ============ BEFORE / AFTER ============ */
/* A comparison of two faces wants a portrait frame, not a letterbox.
   Cropping a near-square source to 3:2 cut the tops of heads off, and a
   full-width stage made every pair feel like a billboard. 4:5 at 600px
   keeps the whole head in and lets you take the pair in at a glance. */
.ba{display:grid;gap:clamp(1.2rem,3vw,2rem);max-width:600px;margin-inline:auto}
.ba__stage{
  position:relative;aspect-ratio:4/5;width:100%;overflow:hidden;
  border:var(--rule) solid var(--line);background:var(--bg-2);touch-action:pan-y;cursor:ew-resize;
  user-select:none;-webkit-user-select:none;
}
.ba__half{position:absolute;inset:0}
.ba__half img{width:100%;height:100%;object-fit:cover}
.ba__half--after{clip-path:inset(0 0 0 var(--pos,50%))}
.ba__half--before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba__ph{position:absolute;inset:0;display:grid;place-content:center;gap:.3rem;text-align:center;color:var(--fg-mute);
  background:repeating-linear-gradient(135deg,transparent 0 10px,var(--line-2) 10px 11px)}
.ba__ph b{color:var(--fg);font-size:var(--s--1)}
.ba__ph span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase}
.ba__handle{
  position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:var(--marigold);
  z-index:3;pointer-events:none;transform:translateX(-1px);
}
.ba__handle::after{
  content:'';position:absolute;top:50%;left:50%;width:2.6rem;height:2.6rem;
  transform:translate(-50%,-50%) rotate(45deg);
  background:var(--marigold);box-shadow:0 4px 18px rgba(0,0,0,.28);
}
.ba__grip{
  position:absolute;top:50%;left:var(--pos,50%);z-index:4;transform:translate(-50%,-50%);
  width:2.8rem;height:2.8rem;border:0;background:none;cursor:ew-resize;color:var(--on-accent);
  display:grid;place-items:center;
}
.ba__grip svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1}
.ba__tag{
  position:absolute;top:.8rem;z-index:3;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;padding:.28rem .6rem;background:rgba(20,10,17,.72);color:#F3EDEA;pointer-events:none;
}
.ba__tag--b{left:.8rem}
.ba__tag--a{right:.8rem;background:var(--marigold);color:var(--on-accent)}
.ba__meta{margin-top:.9rem}
.ba__meta h3{font-size:var(--s-1);font-variation-settings:'opsz' 32,'SOFT' 16,'WONK' 0}
.ba__meta p{font-size:var(--s--1);color:var(--fg-mute);margin-top:.25rem}
/* full-screen snapping panels for the before/after page */
.baScroller{overscroll-behavior-y:contain}
@media (prefers-reduced-motion: reduce){.baScroller{scroll-snap-type:none}}
.baPanel{padding-block:clamp(2rem,6vw,4rem);min-height:auto}
@media (min-width:900px){.baPanel{min-height:auto;padding-block:clamp(2rem,5vw,3.4rem)}}

/* ============ About ============ */
.two{display:grid;gap:clamp(1.8rem,5vw,3.5rem)}
@media (min-width:920px){.two{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}}
.two--even{grid-template-columns:1fr}
@media (min-width:920px){.two--even{grid-template-columns:1fr 1fr;align-items:center}}
blockquote.pull{
  font-family:var(--disp);font-size:var(--s-2);font-weight:300;line-height:1.24;letter-spacing:-.02em;
  border-left:2px solid var(--accent-fill);padding-left:clamp(1rem,3vw,1.6rem);margin-block:1.6rem;
  font-variation-settings:'opsz' 72,'SOFT' 30,'WONK' 1;
}
blockquote.pull cite{display:block;font-family:var(--sans);font-style:normal;font-size:var(--s--1);color:var(--fg-mute);margin-top:.8rem;letter-spacing:0}
.prose p+p{margin-top:1rem}

/* ============ REVIEWS — floating columns ============ */
.floatwrap{display:grid;gap:clamp(.7rem,2vw,1rem);grid-template-columns:1fr;overflow:hidden;
  max-height:min(78svh,44rem);position:relative}
@media (min-width:760px){.floatwrap{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1120px){.floatwrap{grid-template-columns:repeat(3,1fr)}}
.floatwrap::before,.floatwrap::after{
  content:'';position:absolute;left:0;right:0;height:5rem;z-index:2;pointer-events:none;
}
.floatwrap::before{top:0;background:linear-gradient(var(--bg),transparent)}
.floatwrap::after{bottom:0;background:linear-gradient(transparent,var(--bg))}
.floatcol{display:grid;gap:clamp(.7rem,2vw,1rem);align-content:start;animation:floatUp var(--t,54s) linear infinite}
.floatcol--b{animation-direction:reverse;--t:66s}
.floatcol--c{--t:60s}
@keyframes floatUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.floatwrap:hover .floatcol,.floatwrap:focus-within .floatcol{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .floatwrap{max-height:none;overflow:visible}
  .floatcol{animation:none}
  .floatwrap::before,.floatwrap::after{display:none}
}
.rev{border:var(--rule) solid var(--line);padding:1.3rem;background:var(--bg-2);display:flex;flex-direction:column;gap:.7rem;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.rev:hover{border-color:var(--fg);transform:translateY(-3px)}
.rev .q{font-family:var(--disp);font-size:2.2rem;line-height:.55;color:var(--accent);font-variation-settings:'opsz' 48,'SOFT' 40,'WONK' 1}
.rev p{font-size:var(--s-0);line-height:1.55}
.rev footer{margin-top:auto;padding-top:.6rem;border-top:var(--rule) solid var(--line-2);font-size:var(--s--1)}
.rev footer b{display:block;font-weight:600}
.rev footer span{color:var(--fg-mute)}
.rev__stars{color:var(--accent);font-size:var(--s--1);letter-spacing:.08em}

/* ============ Steps ============ */
.steps{list-style:none;padding:0;margin:0;display:grid;gap:0;border-top:var(--rule) solid var(--line)}
@media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}}
.steps li{padding:1.4rem 0;border-bottom:var(--rule) solid var(--line)}
@media (min-width:900px){
  .steps li{padding:1.7rem clamp(1rem,2.5vw,2rem);border-bottom:0;border-left:var(--rule) solid var(--line)}
  .steps li:first-child{padding-left:0;border-left:0}
}
.steps b{display:block;font-family:var(--disp);font-size:var(--s-2);font-weight:500;color:var(--accent);line-height:1;margin-bottom:.5rem;font-variation-settings:'opsz' 48,'SOFT' 0,'WONK' 0}
.steps h3{font-size:var(--s-1);margin-bottom:.35rem;font-variation-settings:'opsz' 32,'SOFT' 16,'WONK' 0}

.steps-link{display:grid;gap:clamp(.7rem,2vw,1rem);margin-top:clamp(1.6rem,4vw,2.4rem)}
@media (min-width:820px){.steps-link{grid-template-columns:repeat(3,1fr)}}
.steps-link .svc__body{gap:.6rem}

/* ============ Contract page ============ */
.contract-head{
  margin-top:clamp(1.8rem,4vw,2.6rem);padding:clamp(1rem,2.5vw,1.4rem);
  border:var(--rule) solid var(--line);background:var(--bg-2);
  font-size:var(--s--1);color:var(--fg-mute);line-height:1.6;
}
.contract-head p:first-child{font-family:var(--disp);font-size:var(--s-1);color:var(--fg);margin-bottom:.5rem;
  font-variation-settings:'opsz' 32,'SOFT' 14,'WONK' 0}
.clauses{border-top:var(--rule) solid var(--line)}
.clause{padding:1.3rem 0;border-bottom:var(--rule) solid var(--line-2)}
.clause h3{
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;
}
.clause p{font-size:var(--s-0);line-height:1.6;max-width:70ch}
.clause__init{
  display:inline-flex;align-items:center;gap:.6rem;margin-top:.8rem;
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
}
.clause__init s{display:block;width:4.5rem;height:1px;background:var(--line);text-decoration:none}
.intake{display:grid;gap:.1rem;border-top:var(--rule) solid var(--line)}
@media (min-width:680px){.intake{grid-template-columns:1fr 1fr;gap:.1rem 2rem}}
.intake__row{display:flex;align-items:baseline;gap:.8rem;padding:.7rem 0;border-bottom:var(--rule) solid var(--line-2)}
.intake__row span{font-size:var(--s--1);white-space:nowrap}
.intake__row s{flex:1;height:1px;background:var(--line);text-decoration:none;display:block}

/* ============ Contact form ============ */
.cform{margin-top:1.4rem}
.cform__trap{position:absolute;left:-9999px}
.cform .ins label em{color:var(--accent);font-style:normal}
.cform textarea{
  width:100%;padding:.65rem .7rem;background:var(--bg-2);
  border:var(--rule) solid var(--line);color:inherit;font-family:inherit;resize:vertical;
}
.cform .ins input,.cform .ins select{background:var(--bg-2);border-color:var(--line)}
.cform .ins label{color:var(--fg-mute)}
.cform .check span em{color:var(--accent);font-style:normal}
.field--light{border-color:var(--line)}
.field--light .field__l{color:var(--fg)}
.cradio{display:grid;gap:.5rem}
.cradio label{display:flex;align-items:center;gap:.6rem;font-size:var(--s--1);cursor:pointer}
.cradio input{accent-color:var(--accent-fill);width:1.05rem;height:1.05rem;flex:none}

/* ============ Map + contact ============ */
.mapwrap{position:relative;border:var(--rule) solid var(--line);background:var(--bg-2);overflow:hidden;aspect-ratio:16/11}
@media (min-width:900px){.mapwrap{aspect-ratio:auto;height:100%;min-height:22rem}}
.mapwrap iframe{width:100%;height:100%;border:0;filter:saturate(.9)}
html[data-theme="dark"] .mapwrap iframe{filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(.95)}
.mapcard{
  position:absolute;left:.9rem;bottom:.9rem;right:.9rem;z-index:2;max-width:22rem;
  background:var(--bg);border:var(--rule) solid var(--line);padding:1rem 1.1rem;
}
.mapcard b{display:block;font-weight:600;margin-bottom:.2rem}
.mapcard p{font-size:var(--s--1);color:var(--fg-mute)}
.mapcard a{display:inline-block;margin-top:.6rem;font-size:var(--s--1);font-weight:600;color:var(--accent);text-underline-offset:3px}

.cards{display:grid;gap:0;border-top:var(--rule) solid var(--line)}
@media (min-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
.cc{padding:1.35rem 0;border-bottom:var(--rule) solid var(--line-2)}
@media (min-width:900px){
  .cc{padding:1.6rem clamp(1rem,2.5vw,2rem)}
  .cc:nth-child(odd){padding-left:0;border-right:var(--rule) solid var(--line-2)}
}
.cc h3{font-size:var(--s-1);margin-bottom:.35rem;font-variation-settings:'opsz' 32,'SOFT' 16,'WONK' 0}
.cc a{font-weight:600;text-decoration-color:var(--accent);text-underline-offset:4px;display:inline-block;padding-block:.25rem}

/* ============ CTA band ============ */
.cta{background:var(--invert-bg);color:var(--invert-fg);padding-block:clamp(2.6rem,7vw,4.5rem);text-align:center}
.cta h2{font-size:var(--s-3);font-weight:300;font-variation-settings:'opsz' 120,'SOFT' 28,'WONK' 1}
.cta p{margin-top:.9rem;color:var(--invert-mute);max-width:46ch;margin-inline:auto}
.cta__btns{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.5rem}

/* ============ Footer ============ */
.ft{background:var(--invert-bg);color:var(--invert-fg);padding-block:clamp(2.4rem,6vw,4rem) 6.5rem;border-top:var(--rule) solid var(--invert-line)}
@media (min-width:1080px){.ft{padding-bottom:clamp(2.4rem,6vw,4rem)}}
.ft__top{display:grid;gap:2rem;padding-bottom:2rem;border-bottom:var(--rule) solid var(--invert-line)}
@media (min-width:900px){.ft__top{grid-template-columns:1.5fr 1fr 1fr 1fr}}
.ft h2{font-size:var(--s-2);font-weight:300;font-variation-settings:'opsz' 90,'SOFT' 28,'WONK' 1}
.ft ul{list-style:none;padding:0;margin:.6rem 0 0;display:grid;gap:.45rem;font-size:var(--s--1)}
.ft ul a{display:inline-block;padding-block:.2rem}
.ft a{color:var(--invert-fg)}
.ft a.btn--fill{color:var(--on-accent)}
.ft__k{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--marigold)}
.ft__bot{display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;padding-top:1.4rem;font-size:var(--s--1);color:var(--invert-mute)}
.ft__credit{display:inline-flex;align-items:center;gap:.7rem;margin-left:auto;padding:.42rem .9rem .42rem .45rem;border:1px solid rgba(243,237,234,.26);border-radius:999px;background:rgba(6,4,6,.4);color:#F3EDEA;font-weight:600;text-decoration:none;box-shadow:0 10px 22px rgba(0,0,0,.18)}
.ft__credit:hover{border-color:rgba(227,154,31,.7);text-decoration:none}
.ft__credit-mark{position:relative;display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:radial-gradient(circle at 35% 35%, #f6d2b5 0%, #e9a68a 32%, #d8836f 58%, #3c2a27 63%, #2a1a19 100%);box-shadow:inset 0 0 0 2px rgba(247,225,192,.88)}
.ft__credit-mark::before,.ft__credit-mark::after{content:"";position:absolute;inset:0;border-radius:50%}
.ft__credit-mark::before{background:radial-gradient(circle, rgba(255,255,255,0) 0 52%, rgba(123,167,108,.9) 53% 58%, rgba(255,255,255,0) 59% 100%);transform:rotate(18deg)}
.ft__credit-mark::after{background:radial-gradient(circle, rgba(255,255,255,0) 0 52%, rgba(123,167,108,.8) 53% 58%, rgba(255,255,255,0) 59% 100%);transform:rotate(90deg)}
.ft__credit-mark i{position:relative;z-index:1;width:.6rem;height:.6rem;border-radius:50%;background:#f5e5c0;box-shadow:0 0 0 3px rgba(243,237,234,.18)}

/* ============ Floating WhatsApp + mobile bar ============ */
.fab{
  position:fixed;right:1rem;bottom:1rem;z-index:70;width:3.4rem;height:3.4rem;border-radius:50%;
  background:#25D366;color:#07301A;display:grid;place-items:center;text-decoration:none;
  box-shadow:0 8px 26px rgba(0,0,0,.26);transform:scale(0);transition:transform .45s var(--ease-out);
}
.fab[data-show="true"]{transform:scale(1)}
.fab:hover{filter:brightness(1.06)}
.fab svg{width:26px;height:26px}
@media (max-width:1079px){
  .fab{bottom:4.6rem;width:3rem;height:3rem}
  .fab svg{width:22px;height:22px}
}
.bar{
  position:fixed;left:0;right:0;bottom:0;z-index:65;display:grid;grid-template-columns:1fr 1fr;
  background:var(--bg-2);border-top:var(--rule) solid var(--line);
  box-shadow:0 -6px 22px rgba(0,0,0,.09);
  transform:translateY(110%);transition:transform .45s var(--ease-out);
  padding-bottom:env(safe-area-inset-bottom);
}
.bar[data-show="true"]{transform:none}
@media (min-width:1080px){.bar{display:none}}
.bar a{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem .5rem;text-decoration:none;font-weight:600;font-size:var(--s--1)}
.bar a+a{background:var(--accent-fill);color:var(--on-accent)}
.bar svg{width:17px;height:17px;flex:none}

/* ============ Reel viewer ============
   Holds the official Instagram embed. The iframe is inserted by JS on
   click and removed on close, so no Instagram request is made until
   somebody asks for one, and none keeps running afterwards. */
.rv-modal{
  position:fixed;inset:0;z-index:130;display:none;place-items:center;
  background:rgba(15,10,16,.95);padding:1rem;
}
.rv-modal[data-open="true"]{display:grid}
.rv-modal__frame{
  width:min(100%,420px);max-height:82svh;overflow:auto;
  border-radius:12px;background:#fff;
  -webkit-overflow-scrolling:touch;
}
.rv-modal__frame iframe{display:block;width:100%;border:0;min-height:min(78svh,720px)}
.rv-modal__x{
  position:absolute;top:.6rem;right:.8rem;z-index:2;
  width:2.6rem;height:2.6rem;border:0;border-radius:50%;cursor:pointer;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;
}
.rv-modal__x:hover{background:rgba(255,255,255,.22)}
.rv-modal__cap{margin-top:.9rem;text-align:center}
.rv-modal__cap a{color:var(--rosewater);font-size:var(--s--1)}
/* the play control is a real link now, so it needs the button's look back */
.reels__foot{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.4rem}
.reels__foot .fine{color:var(--fg-mute);font-size:var(--s--1)}

/* ============ Lightbox ============ */
.lb{position:fixed;inset:0;z-index:120;background:rgba(15,10,16,.95);display:none;place-items:center;padding:1rem}
.lb[data-open="true"]{display:grid}
.lb img{max-width:min(100%,1200px);max-height:86vh;object-fit:contain}
.lb__x{position:absolute;top:1rem;right:1rem;width:2.7rem;height:2.7rem;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:2.9rem;height:3.5rem;background:rgba(0,0,0,.35);border:0;color:#fff;cursor:pointer;font-size:1.3rem}
.lb__nav.prev{left:.5rem}.lb__nav.next{right:.5rem}
.lb__cap{position:absolute;bottom:1.1rem;left:0;right:0;text-align:center;color:#D9CFD5;font-size:var(--s--1)}

/* ============ Reveal on scroll ============ */
html.js .rv{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease-out) var(--d,0ms),transform .75s var(--ease-out) var(--d,0ms)}
html.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){html.js .rv{opacity:1;transform:none}}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html.js .rv{opacity:1;transform:none;transition:none;animation:rise 1s linear both;animation-timeline:view();animation-range:entry 4% entry 46%}
    @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  }
}

/* ============ Print ============ */
@media print{
  .hdr,.sheet,.fab,.bar,.tabs,.filters,.band,.lb,.hero__ui,.hero__cue,.addbtn,.social,.cta,.ft__top,.floatwrap{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .panel[hidden]{display:block!important}
  html.js .rv{opacity:1!important;transform:none!important;animation:none!important}
  .sec{padding-block:1rem;break-inside:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
}