/* ═══════════════════════════════════════════════════════════════
   ROOFING TEMPLATE — Premium CSS v4
   Dark/Light theme · GPU-only animations · Unique scroll reveals
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   ★  CSS CONFIG ZONE — Edit these variables to match your brand
   ══════════════════════════════════════════════════════════════

   PRIMARY COLOR        ── --cfg-primary (hex)
   ACCENT / GLOW        ── auto-derived from primary
   NAV HEIGHT           ── --cfg-nav-height
   NAV BLUR             ── --cfg-nav-blur
   BORDER RADIUS        ── --cfg-radius-card, --cfg-radius-btn
   CARD GLOW INTENSITY  ── --cfg-glow-strength (0–1)
   ANIMATION SPEED      ── --cfg-speed-fast, --cfg-speed-slow
   DARK BG TONES        ── --cfg-dark-bg / --cfg-dark-bg2 / --cfg-dark-bg3
   LIGHT BG TONES       ── --cfg-light-bg / --cfg-light-bg2 / --cfg-light-bg3
   SECTION ALT DARK     ── --cfg-dark-sec-alt / --cfg-dark-sec-cream
   SECTION ALT LIGHT    ── --cfg-light-sec-alt / --cfg-light-sec-cream
   LOADER SPEED         ── --cfg-loader-interval (ms, set in JS CONFIG)

   ╔══════════════════════════════════════════════════════════╗
   ║   ← ONLY EDIT BELOW THIS LINE →                         ║
   ╚══════════════════════════════════════════════════════════╝ */
:root {
  /* ── Brand primary color ─────────────────────────── */
  --cfg-primary:          #C41E3A;   /* ← your brand hex  */

  /* ── Dark theme backgrounds ──────────────────────── */
  --cfg-dark-bg:          #080808;   /* page base         */
  --cfg-dark-bg2:         #111827;   /* alternate section */
  --cfg-dark-bg3:         #0f0f0f;   /* cards / footer    */
  --cfg-dark-sec-alt:     #111827;   /* services bg       */
  --cfg-dark-sec-cream:   #0f1318;   /* why-us bg         */

  /* ── Light theme backgrounds ─────────────────────── */
  --cfg-light-bg:         #fafafa;
  --cfg-light-bg2:        #f0ede8;
  --cfg-light-bg3:        #ffffff;
  --cfg-light-sec-alt:    #ede9e3;
  --cfg-light-sec-cream:  #ffffff;

  /* ── Border radius ───────────────────────────────── */
  --cfg-radius-card:      20px;      /* service / review cards */
  --cfg-radius-btn:       4px;       /* buttons               */
  --cfg-radius-pill:      100px;     /* pill badges           */

  /* ── Card glow intensity (0 = off, 1 = full) ─────── */
  --cfg-glow-strength:    1;

  /* ── Animation speed scale ───────────────────────── */
  --cfg-speed-fast:       0.35s;
  --cfg-speed-slow:       0.85s;

  /* ── Nav ──────────────────────────────────────────── */
  --cfg-nav-height:       72px;
  --cfg-nav-blur:         24px;

  /* ╔══════════════════════════════════════════════════╗
     ║   ← STOP EDITING HERE — derived tokens below →  ║
     ╚══════════════════════════════════════════════════╝ */

  /* Derived from --cfg-primary — update if you change it */
  --p:            var(--cfg-primary);
  --p-glow:       color-mix(in srgb, var(--cfg-primary) 35%, transparent);
  --p-soft:       color-mix(in srgb, var(--cfg-primary) 10%, transparent);

  --ease:cubic-bezier(.22,1,.36,1); --ease-back:cubic-bezier(.34,1.56,.64,1);
  --f-hero:'Playfair Display',serif; --f-syne:'Syne',sans-serif;
  --f-fraunces:'Fraunces',serif; --f-corm:'Cormorant Garamond',serif;
  --f-body:'Plus Jakarta Sans',sans-serif;
  --bg:var(--cfg-dark-bg); --bg2:var(--cfg-dark-bg2); --bg3:var(--cfg-dark-bg3);
  --surface:rgba(255,255,255,.04); --surface2:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.1); --border2:rgba(255,255,255,.06);
  --text:#ffffff; --text2:rgba(255,255,255,.62); --text3:rgba(255,255,255,.35);
  --card-bg:rgba(255,255,255,.04); --card-border:rgba(255,255,255,.1);
  --form-bg:rgba(255,255,255,.05); --form-border:rgba(255,255,255,.1);
  --input-bg:rgba(255,255,255,.07); --input-border:rgba(255,255,255,.14);
  --sec-alt:var(--cfg-dark-sec-alt); --sec-cream:var(--cfg-dark-sec-cream);
  --pill-bg:rgba(255,255,255,.05); --pill-border:rgba(255,255,255,.1);
  --shadow:rgba(0,0,0,.4); --grid-line:color-mix(in srgb, var(--cfg-primary) 7%, transparent);
  --tt:background .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease;
}
[data-theme="light"] {
  --bg:var(--cfg-light-bg); --bg2:var(--cfg-light-bg2); --bg3:var(--cfg-light-bg3);
  --surface:rgba(0,0,0,.03); --surface2:rgba(0,0,0,.06);
  --border:rgba(0,0,0,.1); --border2:rgba(0,0,0,.06);
  --text:#0a0a0a; --text2:rgba(0,0,0,.62); --text3:rgba(0,0,0,.38);
  --card-bg:#ffffff; --card-border:rgba(0,0,0,.09);
  --form-bg:#f4f0eb; --form-border:rgba(0,0,0,.08);
  --input-bg:#ffffff; --input-border:rgba(0,0,0,.13);
  --sec-alt:var(--cfg-light-sec-alt); --sec-cream:var(--cfg-light-sec-cream);
  --pill-bg:#ffffff; --pill-border:rgba(0,0,0,.09);
  --shadow:rgba(0,0,0,.1); --grid-line:color-mix(in srgb, var(--cfg-primary) 5.5%, transparent);
}

/* ── RESET ────────────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--f-body);color:var(--text);background:var(--bg);overflow-x:hidden;transition:var(--tt)}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
@media(min-width:768px){.wrap{padding:0 48px}}

/* ── LOADER ───────────────────────────────────────────────── */
.loader{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .9s var(--ease) .1s,visibility .9s .1s}
.loader.out{opacity:0;visibility:hidden;pointer-events:none}
.ldr-grid{position:absolute;inset:0;background-image:linear-gradient(color-mix(in srgb, var(--p) 6%, transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb, var(--p) 6%, transparent) 1px,transparent 1px);background-size:52px 52px;opacity:0;animation:ldrGI .8s ease .2s forwards}
@keyframes ldrGI{to{opacity:1}}
.ldr-glow{position:absolute;width:600px;height:600px;top:50%;left:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb, var(--p) 20%, transparent) 0%,transparent 60%);animation:ldrGL 2.4s ease-in-out infinite alternate;will-change:transform}
@keyframes ldrGL{from{transform:translate(-50%,-50%) scale(.85)}to{transform:translate(-50%,-50%) scale(1.1)}}
.ldr-scan{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,color-mix(in srgb, var(--p) 4%, transparent) 50%,transparent 55%);background-size:100% 120px;animation:ldrSC 1.8s linear infinite;pointer-events:none}
@keyframes ldrSC{from{background-position:0 -120px}to{background-position:0 100vh}}
.ldr-corner{position:absolute;width:18px;height:18px}
.ldr-corner::before,.ldr-corner::after{content:'';position:absolute;background:color-mix(in srgb, var(--p) 60%, transparent)}
.ldr-corner--tl{top:28px;left:28px}.ldr-corner--tl::before{top:0;left:0;width:100%;height:1.5px}.ldr-corner--tl::after{top:0;left:0;width:1.5px;height:100%}
.ldr-corner--tr{top:28px;right:28px}.ldr-corner--tr::before{top:0;right:0;width:100%;height:1.5px}.ldr-corner--tr::after{top:0;right:0;width:1.5px;height:100%}
.ldr-corner--bl{bottom:28px;left:28px}.ldr-corner--bl::before{bottom:0;left:0;width:100%;height:1.5px}.ldr-corner--bl::after{bottom:0;left:0;width:1.5px;height:100%}
.ldr-corner--br{bottom:28px;right:28px}.ldr-corner--br::before{bottom:0;right:0;width:100%;height:1.5px}.ldr-corner--br::after{bottom:0;right:0;width:1.5px;height:100%}
.ldr-ring{width:160px;height:160px;position:relative}
.ldr-ring svg{position:absolute;inset:0;width:100%;height:100%;animation:ldrSP 3s linear infinite;will-change:transform}
@keyframes ldrSP{to{transform:rotate(360deg)}}
.ldr-ring svg circle{fill:none;stroke:color-mix(in srgb, var(--p) 12%, transparent);stroke-width:1.5}
.ldr-ring svg .arc{stroke:color-mix(in srgb, var(--p) 75%, transparent);stroke-width:2;stroke-dasharray:80 420;stroke-linecap:round;animation:ldrAR 2s ease-in-out infinite}
@keyframes ldrAR{0%{stroke-dasharray:5 495;stroke-dashoffset:0}50%{stroke-dasharray:200 300}100%{stroke-dasharray:5 495;stroke-dashoffset:-500}}
.ldr-inner{position:absolute;inset:22px;border-radius:50%;border:1px solid transparent;border-top-color:color-mix(in srgb, var(--p) 60%, transparent);border-right-color:color-mix(in srgb, var(--p) 30%, transparent);animation:ldrSP 1.4s ease-in-out infinite reverse;will-change:transform}
.ldr-logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.ldr-name{font-family:var(--f-syne);font-size:.63rem;font-weight:800;letter-spacing:.28em;color:#fff;opacity:0;animation:ldrFD .5s ease .5s forwards;white-space:nowrap;text-transform:uppercase}
@keyframes ldrFD{to{opacity:1}}
.ldr-mark{width:22px;height:1.5px;background:var(--p);box-shadow:0 0 8px color-mix(in srgb, var(--p) 90%, transparent);opacity:0;animation:ldrFD .4s ease .8s forwards}
.ldr-pct{font-family:var(--f-hero);font-size:5rem;font-weight:900;color:rgba(255,255,255,.05);letter-spacing:-.04em;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:0}
.ldr-bottom{position:absolute;bottom:52px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:2}
.ldr-bar{width:180px;height:1px;background:rgba(255,255,255,.06);position:relative;overflow:visible}
.ldr-fill{height:100%;width:0;background:linear-gradient(90deg,transparent,var(--p));transition:width 2s cubic-bezier(.1,0,.2,1)}
.loader.active .ldr-fill{width:100%}
.ldr-fill::after{content:'';position:absolute;right:0;top:-3px;width:5px;height:5px;border-radius:50%;background:var(--p);box-shadow:0 0 12px var(--p),0 0 24px color-mix(in srgb, var(--p) 50%, transparent)}
.ldr-label{font-family:var(--f-syne);font-size:.55rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.2)}

/* ── THEME TOGGLE ─────────────────────────────────────────── */
.theme-btn{position:relative;width:50px;height:26px;border-radius:100px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer;transition:all .3s var(--ease);flex-shrink:0}
.theme-btn::before{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--p);transition:transform .35s var(--ease);box-shadow:0 0 8px var(--p-glow)}
[data-theme="light"] .theme-btn::before{transform:translateX(22px)}
.theme-btn:hover{border-color:var(--p)}
.t-ico{position:absolute;top:50%;font-size:.7rem;transform:translateY(-50%);pointer-events:none;transition:opacity .25s}
.t-moon{left:5px;opacity:1}.t-sun{right:4px;opacity:0}
[data-theme="light"] .t-moon{opacity:0}[data-theme="light"] .t-sun{opacity:1}

/* ── NAV ──────────────────────────────────────────────────── */

/* Shimmer sweep keyframe */
@keyframes navShimmer{0%{transform:translateX(-100%) skewX(-15deg)}100%{transform:translateX(400%) skewX(-15deg)}}
@keyframes navFadeIn{from{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:400;
  padding:0 24px;
  background:linear-gradient(180deg,rgba(8,8,8,.72) 0%,rgba(8,8,8,.0) 100%);
  backdrop-filter:blur(0px);
  -webkit-backdrop-filter:blur(0px);
  transition:
    background .5s var(--ease),
    backdrop-filter .5s var(--ease),
    -webkit-backdrop-filter .5s var(--ease),
    box-shadow .5s var(--ease);
  /* NO border-bottom — use box-shadow for soft divider instead */
  border-bottom:none;
  animation:navFadeIn .6s var(--ease) .2s both;
  overflow:hidden;
}

/* Ambient glow blob in nav — top-right */
.nav::before{
  content:'';
  position:absolute;
  top:-40px;right:80px;
  width:340px;height:120px;
  border-radius:50%;
  background:radial-gradient(ellipse,var(--p-glow) 0%,transparent 65%);
  pointer-events:none;
  opacity:0;
  transition:opacity .6s var(--ease);
  filter:blur(18px);
}

/* Shimmer sweep line */
.nav::after{
  content:'';
  position:absolute;
  inset-y:0;
  width:60px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.06),transparent);
  pointer-events:none;
  animation:navShimmer 4.5s ease-in-out 2s infinite;
}

/* Scrolled state — full glassy effect */
.nav.solid{
  background:rgba(6,6,6,.82);
  backdrop-filter:blur(var(--cfg-nav-blur));
  -webkit-backdrop-filter:blur(var(--cfg-nav-blur));
  /* Soft feathered divider via box-shadow only — no hard line */
  box-shadow:
    0 1px 0 rgba(255,255,255,.04),
    0 8px 40px rgba(0,0,0,.5),
    0 0 0 0.5px rgba(255,255,255,.05);
}
.nav.solid::before{opacity:.6;}

[data-theme="light"] .nav{
  background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.0) 100%);
}
[data-theme="light"] .nav::before{
  background:radial-gradient(ellipse,color-mix(in srgb,var(--cfg-primary) 15%,transparent) 0%,transparent 70%);
}
[data-theme="light"] .nav.solid{
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(var(--cfg-nav-blur));
  -webkit-backdrop-filter:blur(var(--cfg-nav-blur));
  box-shadow:
    0 1px 0 rgba(0,0,0,.05),
    0 8px 32px rgba(0,0,0,.08);
  /* No hard border line */
}

.nav__wrap{
  max-width:1200px;margin:0 auto;
  display:flex;align-items:center;
  justify-content:space-between;
  height:var(--cfg-nav-height);
  gap:16px;
  position:relative;z-index:1;
}

/* Brand — fits exactly to content width, shrinks with fluid font if name is long */
.nav__brand{
  display:flex;align-items:center;gap:8px;
  flex:0 1 auto;        /* don't grow beyond content, can shrink */
  min-width:0;
  width:fit-content;    /* take only as much as text needs */
  text-decoration:none;
}
.nav__brand img{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1.5px solid color-mix(in srgb,var(--cfg-primary) 40%,transparent);
  display:none;flex-shrink:0;
  box-shadow:0 0 12px var(--p-glow);
  transition:box-shadow .4s,border-color .4s;
}
.nav__brand img.loaded{display:block}
.nav__brand:hover img{box-shadow:0 0 22px var(--p-glow);border-color:var(--p)}
.nav__name{
  font-family:var(--f-syne);font-weight:800;
  /* Fluid font: clamps between 0.58rem and 0.95rem based on viewport */
  font-size:clamp(0.58rem, 1.8vw, 0.95rem);
  letter-spacing:clamp(0.01em, 0.4vw, 0.06em);
  color:var(--text);text-transform:uppercase;
  /* Allow wrapping at very small sizes — NO ellipsis */
  white-space:nowrap;
  overflow:visible;
  /* Compress text slightly if needed */
  font-stretch:condensed;
  transition:color .3s;
  line-height:1.1;
}
.nav__brand:hover .nav__name{color:var(--p)}

/* Nav dot accent beside logo */
.nav__brand::before{
  content:'';
  flex-shrink:0;
  width:5px;height:5px;
  border-radius:50%;
  background:var(--p);
  box-shadow:0 0 8px var(--p-glow),0 0 16px var(--p-glow);
  animation:dp 2.4s ease-in-out infinite;
  display:none; /* only shows at desktop */
}
@media(min-width:1024px){.nav__brand::before{display:block}}

/* Links */
.nav__links{display:none;gap:2px;position:relative}
.nav__links a{
  color:var(--text2);
  font-family:var(--f-body);font-size:.81rem;font-weight:500;
  padding:8px 13px;border-radius:var(--cfg-radius-btn);
  transition:all .25s var(--ease);
  letter-spacing:.01em;
  position:relative;overflow:hidden;
}
/* Underline slide-in */
.nav__links a:not(.nav__cta-link)::after{
  content:'';position:absolute;
  bottom:4px;left:13px;right:13px;
  height:1.5px;
  background:linear-gradient(90deg,transparent,var(--p),transparent);
  transform:scaleX(0);transform-origin:center;
  transition:transform .3s var(--ease);
  border-radius:2px;
}
.nav__links a:not(.nav__cta-link):hover{color:var(--text);background:var(--surface2)}
.nav__links a:not(.nav__cta-link):hover::after{transform:scaleX(1)}

/* CTA link */
.nav__cta-link{
  background:linear-gradient(135deg,var(--p),color-mix(in srgb,var(--p) 70%,#000))!important;
  color:#fff!important;
  padding:9px 18px!important;
  border-radius:var(--cfg-radius-btn)!important;
  border:1px solid color-mix(in srgb,var(--p) 60%,transparent)!important;
  box-shadow:0 4px 18px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.15)!important;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)!important;
}
.nav__cta-link:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 28px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.2)!important;
}

/* Phone pill */
.nav__call{
  display:none;align-items:center;gap:8px;
  background:color-mix(in srgb,var(--cfg-primary) 10%,transparent);
  border:1px solid color-mix(in srgb,var(--cfg-primary) 28%,transparent);
  color:var(--text);font-family:var(--f-body);font-size:.8rem;font-weight:600;
  padding:8px 16px;border-radius:var(--cfg-radius-pill);
  transition:all .3s var(--ease);flex-shrink:0;white-space:nowrap;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  position:relative;overflow:hidden;
}
/* Shimmer on call button */
.nav__call::after{
  content:'';position:absolute;inset-y:0;left:-60px;width:40px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent);
  animation:navShimmer 3s ease-in-out 1.2s infinite;
}
.nav__call:hover{
  background:var(--p);color:#fff;border-color:var(--p);
  box-shadow:0 6px 22px var(--p-glow),inset 0 1px 0 rgba(255,255,255,.2);
  transform:translateY(-2px);
}
.nav__call-icon{
  width:24px;height:24px;background:var(--p);
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 0 10px var(--p-glow);
  transition:box-shadow .3s,transform .3s var(--ease);
}
.nav__call:hover .nav__call-icon{box-shadow:0 0 18px var(--p-glow);transform:scale(1.1) rotate(-8deg)}

/* Right cluster */
.nav__right{
  display:flex;align-items:center;gap:8px;
  flex-shrink:0; /* ← KEY FIX: right side never shrinks */
}

/* Hide theme toggle on mobile */
#theme-btn-nav{display:none}

/* Hamburger */
.ham{display:flex;flex-direction:column;gap:5px;padding:8px;flex-shrink:0}
.ham span{
  display:block;height:1.5px;background:var(--text);border-radius:2px;
  transition:all .35s var(--ease);
  box-shadow:0 0 4px rgba(255,255,255,.04);
}
.ham span:first-child{width:22px}.ham span:last-child{width:14px}
.ham:hover span{width:22px;background:var(--p);box-shadow:0 0 8px var(--p-glow)}

@media(min-width:1024px){
  .nav__links{display:flex}
  .nav__call{display:flex}
  .ham{display:none}
  #theme-btn-nav{display:flex}
  .nav__brand{max-width:none}
}

/* ── DRAWER ───────────────────────────────────────────────── */
.drawer{position:fixed;top:0;right:-100%;width:min(340px,92vw);height:100vh;background:var(--bg);z-index:600;display:flex;flex-direction:column;padding:0 0 40px;transition:right .5s var(--ease);box-shadow:-8px 0 48px var(--shadow);border-left:1px solid var(--border2)}
.drawer.open{right:0}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--border2)}
.drawer__name{font-family:var(--f-syne);font-weight:800;font-size:.95rem;letter-spacing:.07em;text-transform:uppercase;color:var(--text)}
.drawer__close{color:var(--text3);padding:4px;transition:color .2s}.drawer__close:hover{color:var(--text)}
.drawer__links{padding:16px 0;flex:1}
.drawer__links li a{display:flex;align-items:center;gap:16px;color:var(--text2);font-family:var(--f-body);font-size:1rem;font-weight:500;padding:16px 28px;border-bottom:1px solid var(--border2);transition:all .2s}
.drawer__links li a span{font-family:var(--f-syne);font-size:.62rem;font-weight:700;letter-spacing:.14em;color:var(--text3)}
.drawer__links li a:hover{color:var(--text);background:var(--surface);padding-left:36px}
.drawer__foot{padding:0 28px}
.drawer__call{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--p);color:#fff;font-family:var(--f-body);font-weight:600;font-size:.95rem;padding:15px;border-radius:8px;transition:all .25s}
.drawer__call:hover{transform:translateY(-2px);box-shadow:0 8px 28px var(--p-glow)}
.drawer__scrim{position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);z-index:550;display:none}
.drawer__scrim.open{display:block}

/* ── HERO ─────────────────────────────────────────────────── */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;color:#fff;overflow:hidden;padding-top:72px}
.hero__canvas{position:absolute;inset:0;z-index:0}
/* Grid + glows — GPU composited, no layout */
.hc__grid{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:64px 64px;opacity:0;animation:hcGI 1.2s ease .4s forwards}
@keyframes hcGI{to{opacity:1}}
.hc__glow{position:absolute;border-radius:50%;pointer-events:none;will-change:transform}
.hc__glow--1{width:700px;height:700px;right:-180px;top:-180px;background:radial-gradient(circle,color-mix(in srgb, var(--p) 38%, transparent) 0%,color-mix(in srgb, var(--p) 14%, transparent) 35%,transparent 62%);animation:hcG1 10s ease-in-out infinite alternate}
.hc__glow--2{width:440px;height:440px;left:-60px;bottom:-60px;background:radial-gradient(circle,color-mix(in srgb, var(--p) 20%, transparent) 0%,transparent 65%);animation:hcG2 13s ease-in-out infinite alternate-reverse}
@keyframes hcG1{from{transform:scale(1)}to{transform:scale(1.2) translate(-18px,14px)}}
@keyframes hcG2{from{transform:scale(1)}to{transform:scale(1.15) translate(14px,-18px)}}
/* Lines */
.hc__lines{position:absolute;inset:0;overflow:hidden}
.hcl{position:absolute;height:1.5px;background:linear-gradient(90deg,transparent,color-mix(in srgb, var(--p) 32%, transparent),transparent);will-change:opacity}
.hcl--1{width:70%;top:22%;left:-5%;transform:rotate(-11deg);animation:hcLP 5s ease-in-out infinite alternate}
.hcl--2{width:48%;top:46%;left:38%;transform:rotate(-11deg);opacity:.6;animation:hcLP 7s ease-in-out infinite alternate-reverse}
.hcl--3{width:58%;top:68%;left:-3%;transform:rotate(-11deg);opacity:.45;animation:hcLP 9s ease-in-out infinite alternate}
@keyframes hcLP{from{opacity:.15}to{opacity:.85}}
/* Dot matrix — right side only, no animation to save GPU */
.hc__dots{position:absolute;right:5%;top:14%;width:240px;height:240px;background-image:radial-gradient(circle,color-mix(in srgb, var(--p) 28%, transparent) 1.5px,transparent 1.5px);background-size:20px 20px;mask-image:radial-gradient(circle at center,black 30%,transparent 70%);-webkit-mask-image:radial-gradient(circle at center,black 30%,transparent 70%)}
.hc__photo{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease .5s}
.hc__photo.loaded{opacity:.22}
.hc__vignette{position:absolute;inset:0;background:linear-gradient(108deg,rgba(0,0,0,.97) 0%,rgba(0,0,0,.87) 36%,rgba(0,0,0,.52) 70%,rgba(0,0,0,.3) 100%)}
/* Body */
.hero__body{position:relative;z-index:2;flex:1;max-width:1200px;margin:0 auto;width:100%;padding:60px 24px 40px;display:grid;grid-template-columns:1fr;gap:48px;align-items:center}
@media(min-width:900px){.hero__body{grid-template-columns:1fr 290px;padding:70px 48px 40px;gap:64px}}
.hero__eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-body);font-size:.73rem;font-weight:500;color:rgba(255,255,255,.55);letter-spacing:.07em;margin-bottom:20px;opacity:0;animation:rU .7s ease .6s forwards}
.eyebrow__dot{width:7px;height:7px;border-radius:50%;background:var(--p);box-shadow:0 0 0 4px color-mix(in srgb, var(--p) 22%, transparent),0 0 14px color-mix(in srgb, var(--p) 90%, transparent);animation:dp 2.2s ease-in-out infinite}
@keyframes dp{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--p) 22%, transparent),0 0 12px color-mix(in srgb, var(--p) 80%, transparent)}50%{box-shadow:0 0 0 8px color-mix(in srgb, var(--p) 0%, transparent),0 0 20px var(--p)}}
.hero__h1{display:flex;flex-direction:column;margin-bottom:18px}
.h1__row{display:block;font-family:var(--f-hero);font-size:clamp(3.2rem,9vw,7rem);font-weight:900;line-height:.95;letter-spacing:-.025em;opacity:0;transform:translateY(54px);animation:rU 1s var(--ease) forwards}
.h1__row:nth-child(1){animation-delay:.82s}
.h1__row:nth-child(2){animation-delay:.97s}
.h1__row:nth-child(3){animation-delay:1.12s}
@keyframes rU{to{opacity:1;transform:none}}
.h1__row--serif{font-style:italic;font-size:clamp(2.6rem,7.5vw,6rem);color:rgba(255,255,255,.9)}
.h1__row--outline{-webkit-text-stroke:2px rgba(255,255,255,.42);-webkit-text-fill-color:transparent;text-shadow:0 0 40px color-mix(in srgb, var(--p) 42%, transparent)}
.hero__desc{font-family:var(--f-body);font-size:.96rem;color:rgba(255,255,255,.6);line-height:1.85;margin-bottom:28px;max-width:460px;opacity:0;animation:rU .8s ease 1.38s forwards}
.hero__actions-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;opacity:0;animation:rU .8s ease 1.58s forwards}
.hero__theme-wrap{display:flex;align-items:center;gap:8px;margin-left:4px}
.hero__theme-label{font-family:var(--f-body);font-size:.68rem;font-weight:500;color:rgba(255,255,255,.36);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.hbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:.88rem;padding:13px 23px;border-radius:4px;transition:all .3s var(--ease);letter-spacing:.02em;white-space:nowrap;cursor:pointer}
.hbtn--fill{background:var(--p);color:#fff;border:2px solid var(--p);box-shadow:0 4px 18px color-mix(in srgb, var(--p) 28%, transparent)}
.hbtn--fill:hover{transform:translateY(-2px);box-shadow:0 10px 30px color-mix(in srgb, var(--p) 45%, transparent)}
.hbtn--outline{background:rgba(255,255,255,.05);color:#fff;border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px)}
.hbtn--outline:hover{background:#fff;color:#0a0a0a;border-color:#fff}
/* Stat cards */
.hero__right{display:grid;grid-template-columns:1fr 1fr;gap:12px;opacity:0;animation:rL 1s ease 1.05s forwards}
@media(min-width:900px){.hero__right{grid-template-columns:1fr;gap:10px}}
@keyframes rL{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
.hstat-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.03),color-mix(in srgb, var(--p) 2%, transparent));
  border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:24px 20px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 8px rgba(0,0,0,.15),
    0 12px 32px rgba(0,0,0,.28);
  transition:transform .45s var(--ease),box-shadow .5s var(--ease),border-color .35s;
}
.hstat-card:hover{
  transform:translateY(-4px) scale(1.03);
  border-color:color-mix(in srgb, var(--p) 42%, transparent);
  box-shadow:0 2px 0 rgba(255,255,255,.14) inset,0 18px 48px rgba(0,0,0,.3),0 0 0 1px color-mix(in srgb, var(--p) 18%, transparent),0 0 40px color-mix(in srgb, var(--p) 10%, transparent);
}
.hstat-card__glow{position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,color-mix(in srgb, var(--p) 22%, transparent),transparent 60%);opacity:0;transition:opacity .4s}
.hstat-card:hover .hstat-card__glow{opacity:1}
.hstat-card--accent{
  background:linear-gradient(145deg,color-mix(in srgb, var(--p) 18%, transparent),color-mix(in srgb, var(--p) 8%, transparent));
  border-color:color-mix(in srgb, var(--p) 30%, transparent);
  box-shadow:0 2px 0 rgba(255,255,255,.1) inset,0 8px 28px color-mix(in srgb, var(--p) 12%, transparent);
}
.hstat-card--accent:hover{
  background:linear-gradient(145deg,color-mix(in srgb, var(--p) 26%, transparent),color-mix(in srgb, var(--p) 14%, transparent));
  box-shadow:0 2px 0 rgba(255,255,255,.14) inset,0 18px 48px color-mix(in srgb, var(--p) 20%, transparent),0 0 0 1px color-mix(in srgb, var(--p) 35%, transparent),0 0 50px color-mix(in srgb, var(--p) 15%, transparent);
}
.hstat-card__n{position:relative;z-index:2;font-family:var(--f-hero);font-size:2.2rem;font-weight:900;color:#fff;margin-bottom:4px;line-height:1}
.hstat-card--accent .hstat-card__n{color:var(--p);text-shadow:0 0 20px color-mix(in srgb, var(--p) 60%, transparent)}
.hstat-card__l{position:relative;z-index:2;font-family:var(--f-body);font-size:.67rem;font-weight:500;color:rgba(255,255,255,.42);line-height:1.4;text-transform:uppercase;letter-spacing:.07em}
/* Strip */
.hero__strip{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:16px 24px;max-width:1200px;margin:0 auto;width:100%;opacity:0;animation:rU .7s ease 1.85s forwards}
@media(min-width:768px){.hero__strip{padding:16px 48px}}
.hstrip__badges{display:flex;flex-wrap:wrap;gap:8px}
.hstrip__badge{font-family:var(--f-body);font-size:.68rem;font-weight:500;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.1);padding:5px 12px;border-radius:100px;letter-spacing:.03em;background:rgba(255,255,255,.03)}
.hstrip__scroll{display:flex;align-items:center;gap:7px;font-family:var(--f-body);font-size:.69rem;font-weight:500;color:rgba(255,255,255,.3);letter-spacing:.08em;text-transform:uppercase;transition:color .2s;white-space:nowrap}
.hstrip__scroll:hover{color:rgba(255,255,255,.7)}
.hstrip__scroll svg{animation:bY 2.4s ease-in-out infinite}
@keyframes bY{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

/* ── SECTION COMMONS ──────────────────────────────────────── */
.sec-head{text-align:center;margin-bottom:58px}
.sec-tag{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-syne);font-size:.65rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--p);margin-bottom:14px}
.sec-tag::before,.sec-tag::after{content:'';display:block;width:26px;height:1.5px;background:linear-gradient(90deg,transparent,var(--p),transparent)}
.sec-tag--dark{color:var(--text3)}.sec-tag--dark::before,.sec-tag--dark::after{background:linear-gradient(90deg,transparent,var(--text3),transparent)}
.sec-tag--light{color:rgba(255,255,255,.42)}.sec-tag--light::before,.sec-tag--light::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent)}
.sec-h2{line-height:1.06;margin-bottom:14px;color:var(--text)}
.sh--playfair{font-family:var(--f-hero);font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:700}
.sh--syne{font-family:var(--f-syne);font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:800;text-transform:uppercase;letter-spacing:-.01em}
.sh--fraunces{font-family:var(--f-fraunces);font-size:clamp(2.1rem,5.5vw,3.4rem);font-weight:300;letter-spacing:-.01em}
.sh--cormorant{font-family:var(--f-corm);font-size:clamp(2.3rem,6vw,3.9rem);font-weight:400}
.sh--jakarta{font-family:var(--f-body);font-size:clamp(1.9rem,5vw,3.1rem);font-weight:700}
.sec-h2 em{font-style:italic;color:var(--p);text-shadow:0 0 20px color-mix(in srgb, var(--p) 28%, transparent)}
.sec-p{font-size:.97rem;color:var(--text2);max-width:520px;margin:0 auto;line-height:1.8}

/* ── SERVICES ─────────────────────────────────────────────── */
.sec-services{background:var(--sec-alt);padding:96px 0;position:relative;overflow:hidden}
.sec-services__bg{position:absolute;inset:0;pointer-events:none}
.srv-bg-dots{position:absolute;inset:0;background-image:radial-gradient(circle,color-mix(in srgb, var(--p) 10%, transparent) 1.5px,transparent 1.5px);background-size:30px 30px;mask-image:linear-gradient(135deg,transparent 10%,black 45%,transparent 90%);-webkit-mask-image:linear-gradient(135deg,transparent 10%,black 45%,transparent 90%)}
.sec-services .sec-h2{color:var(--text)}
.sec-services .sec-p{color:var(--text2)}
.srv-grid{display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:640px){.srv-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.srv-grid{grid-template-columns:repeat(3,1fr)}}

/* ════ SERVICE CARD — Architectural glass tile
   Concept: Each card is a floating frosted pane with a unique
   prismatic edge, a soft crimson nebula orb that drifts on hover,
   and a light-speed shimmer streak across the face.
   Hover: lifts forward, border ignites, orb blooms.
════════════════════════════════════════════════════════════ */
.srv-card {
  position: relative;
  overflow: hidden;
  cursor: default;
  border-radius: 24px;
  padding: 40px 32px 38px;
  /* Layered glass */
  background:
    linear-gradient(160deg, rgba(255,255,255,.072) 0%, rgba(255,255,255,.018) 55%, color-mix(in srgb, var(--p) 4%, transparent) 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  /* Inset gloss top + shadow */
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 4px 8px rgba(0,0,0,.15),
    0 16px 48px rgba(0,0,0,.28);
  transition:
    opacity .7s var(--ease),
    transform .6s var(--ease),
    border-color .5s,
    box-shadow .6s var(--ease);
}
[data-theme="light"] .srv-card {
  background: linear-gradient(160deg,
    rgba(255,255,255,.98) 0%,
    rgba(248,244,240,.92) 55%,
    color-mix(in srgb, var(--p) 5%, rgba(255,255,255,.85)) 100%);
  border-color: rgba(255,255,255,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 1px 3px rgba(0,0,0,.06),
    0 12px 40px rgba(0,0,0,.10),
    0 0 0 1px rgba(0,0,0,.05);
}
.srv-card:hover {
  transform: translateY(-14px) scale(1.025);
  border-color: color-mix(in srgb, var(--p) 55%, transparent);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 4px 8px rgba(0,0,0,.1),
    0 40px 80px rgba(0,0,0,.38),
    0 0 0 1px color-mix(in srgb, var(--p) 25%, transparent),
    0 0 100px color-mix(in srgb, var(--p) 12%, transparent);
}
[data-theme="light"] .srv-card:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.04),
    0 1px 2px rgba(0,0,0,.05),
    0 28px 64px rgba(0,0,0,.14),
    0 0 0 1.5px color-mix(in srgb, var(--p) 35%, transparent),
    0 0 80px color-mix(in srgb, var(--p) 12%, transparent);
}

/* ── Orb: drifts from top-right on hover ── */
.srv-card__orb {
  position: absolute;
  width: 260px; height: 260px;
  border-radius: 50%;
  top: -100px; right: -80px;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--p) 32%, transparent) 0%,
    color-mix(in srgb, var(--p) 10%, transparent) 40%,
    transparent 68%);
  filter: blur(28px);
  opacity: .5;
  transition: opacity .7s var(--ease), transform .8s var(--ease);
}
.srv-card:hover .srv-card__orb {
  opacity: 1;
  transform: scale(1.6) translate(-18px, 18px);
}

/* ── Shimmer: diagonal light streak ── */
.srv-card__shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    112deg,
    transparent 30%,
    rgba(255,255,255,.11) 48%,
    rgba(255,255,255,.04) 52%,
    transparent 70%
  );
  transform: translateX(-150%) skewX(-12deg);
  transition: transform .8s var(--ease);
}
.srv-card:hover .srv-card__shine { transform: translateX(150%) skewX(-12deg); }

/* ── Top border: draws from center outward ── */
.srv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--p) 60%, transparent),
    var(--p),
    color-mix(in srgb, var(--p) 60%, transparent),
    transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--p) 80%, transparent), 0 0 40px color-mix(in srgb, var(--p) 30%, transparent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .7s var(--ease);
}
.srv-card:hover::before { transform: scaleX(1); }

/* ── Bottom-right prismatic corner ── */
.srv-card::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 0 0 58px 58px;
  border-color: transparent transparent color-mix(in srgb, var(--p) 6%, transparent) transparent;
  transition: border-bottom-color .5s, filter .5s;
}
.srv-card:hover::after {
  border-bottom-color: color-mix(in srgb, var(--p) 22%, transparent);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--p) 50%, transparent));
}

.srv-card__num {
  font-family: var(--f-syne);
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--p);
  margin-bottom: 22px;
  opacity: .65;
}
.srv-card__icon {
  width: 56px; height: 56px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--p) 20%, transparent), color-mix(in srgb, var(--p) 5%, transparent));
  border: 1px solid color-mix(in srgb, var(--p) 24%, transparent);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  box-shadow: 0 4px 20px color-mix(in srgb, var(--p) 14%, transparent), inset 0 1px 0 rgba(255,255,255,.2);
  transition: all .5s var(--ease);
  position: relative;
  z-index: 1;
}
.srv-card:hover .srv-card__icon {
  background: linear-gradient(150deg, var(--p), #a0182e);
  border-color: color-mix(in srgb, var(--p) 70%, transparent);
  box-shadow:
    0 12px 36px color-mix(in srgb, var(--p) 55%, transparent),
    0 0 0 5px color-mix(in srgb, var(--p) 12%, transparent),
    0 0 0 10px color-mix(in srgb, var(--p) 4%, transparent),
    inset 0 1px 0 rgba(255,255,255,.3);
  transform: scale(1.14) rotate(-6deg);
}
.srv-card__icon svg {
  width: 24px; height: 24px;
  color: color-mix(in srgb, var(--p) 85%, transparent);
  transition: color .35s, transform .5s;
  position: relative; z-index: 1;
}
.srv-card:hover .srv-card__icon svg { color: #fff; transform: rotate(6deg); }
/* Icon inner glow — subtle ring that expands */
.srv-card__icon-glow {
  position: absolute;
  inset: -6px;
  border-radius: 18px;
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 30%, transparent) 0%, transparent 70%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.srv-card:hover .srv-card__icon-glow { opacity: 1; }


.srv-card__name {
  font-family: var(--f-syne);
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.srv-card__short {
  font-family: var(--f-body);
  font-size: .75rem;
  font-weight: 600;
  color: var(--p);
  margin-bottom: 14px;
  letter-spacing: .02em;
  opacity: .9;
}
.srv-card__desc {
  font-family: var(--f-body);
  font-size: .85rem;
  line-height: 1.84;
  color: var(--text2);
  transition: color .3s;
}
.srv-card:hover .srv-card__desc { color: var(--text); }

/* ════ WHY CARD — Obsidian slab with neon spine
   Concept: Solid dark-matter slab. A vertical neon wire 
   grows up the left edge like electricity. The number
   watermark pulses. Icon floats + rotates. A subtle
   radial nebula blooms from the bottom-right.
   Totally different geometry from service cards.
════════════════════════════════════════════════════════════ */
/* ── WHY CHOOSE US ────────────────────────────────────────── */
.sec-why { background: var(--sec-cream); padding: 96px 0; position: relative; overflow: hidden; }
.sec-why__bg { position: absolute; inset: 0; pointer-events: none; }
.why-arc { position: absolute; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--p) 7%, transparent); }
.why-arc--1 { width: 700px; height: 700px; right: -220px; bottom: -220px; }
.why-arc--2 { width: 460px; height: 460px; right: -80px; bottom: -80px; border-color: color-mix(in srgb, var(--p) 10%, transparent); }
.why-watermark { position: absolute; bottom: -80px; right: -40px; width: 380px; color: var(--text); pointer-events: none; }
.why-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media(min-width:640px) { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .why-grid { grid-template-columns: repeat(3,1fr); } }

.why-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 40px 30px 36px 38px; /* extra left for neon strip */
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 2px 4px rgba(0,0,0,.08),
    0 12px 36px var(--shadow);
  transition:
    opacity .75s var(--ease),
    transform .5s var(--ease),
    border-color .4s,
    box-shadow .5s var(--ease);
}
[data-theme="light"] .why-card {
  background: linear-gradient(155deg,
    rgba(255,255,255,.96) 0%,
    rgba(252,249,245,.9) 60%,
    color-mix(in srgb, var(--p) 4%, rgba(255,255,255,.88)) 100%);
  border-color: rgba(255,255,255,.8);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 2px 4px rgba(0,0,0,.05),
    0 12px 36px rgba(0,0,0,.09),
    0 0 0 1px rgba(0,0,0,.04);
}
.why-card:hover {
  transform: translateY(-10px) rotate(.4deg);
  border-color: color-mix(in srgb, var(--p) 22%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 0 0 1px color-mix(in srgb, var(--p) 14%, transparent),
    0 32px 72px rgba(0,0,0,.34),
    0 0 80px color-mix(in srgb, var(--p) 7%, transparent);
}
[data-theme="light"] .why-card:hover {
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 0 0 1.5px color-mix(in srgb, var(--p) 30%, transparent),
    0 24px 60px rgba(0,0,0,.13),
    0 0 60px color-mix(in srgb, var(--p) 10%, transparent);
}

/* ── Neon spine: grows upward from bottom ── */
.why-card::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 3px; height: 0;
  background: linear-gradient(0deg,
    var(--p) 0%,
    color-mix(in srgb, var(--p) 70%, transparent) 50%,
    color-mix(in srgb, var(--p) 20%, transparent) 80%,
    transparent 100%);
  box-shadow: 2px 0 20px color-mix(in srgb, var(--p) 60%, transparent), 4px 0 40px color-mix(in srgb, var(--p) 30%, transparent);
  border-radius: 0 3px 3px 0;
  transition: height .6s var(--ease);
}
.why-card:hover::before { height: 75%; }

/* ── Top gloss ridge ── */
.why-card::after {
  content: '';
  position: absolute;
  top: 0; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  pointer-events: none;
}
[data-theme="light"] .why-card::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), transparent);
}

/* ── Nebula orb bottom-right ── */
.why-card__orb {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  bottom: -130px; right: -110px;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--p) 20%, transparent) 0%,
    color-mix(in srgb, var(--p) 6%, transparent) 45%,
    transparent 68%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity .65s var(--ease), transform .75s var(--ease);
}
.why-card:hover .why-card__orb { opacity: 1; transform: scale(1.25) translate(-10px,-10px); }

/* ── Ghost number watermark ── */
.why-card__num {
  position: absolute;
  top: 10px; right: 18px;
  font-family: var(--f-corm);
  font-size: 5.5rem;
  font-weight: 400;
  font-style: italic;
  color: color-mix(in srgb, var(--p) 4%, transparent);
  line-height: 1;
  pointer-events: none;
  transition: color .4s, transform .5s var(--ease);
  user-select: none;
}
[data-theme="light"] .why-card__num { color: color-mix(in srgb, var(--p) 6%, transparent); }
.why-card:hover .why-card__num {
  color: color-mix(in srgb, var(--p) 11%, transparent);
  transform: scale(1.05) rotate(-3deg);
}

/* ── Icon with double-ring pulse ── */
.why-card__icon {
  width: 56px; height: 56px;
  background: linear-gradient(145deg, color-mix(in srgb, var(--p) 14%, transparent), color-mix(in srgb, var(--p) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--p) 22%, transparent);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--p) 10%, transparent);
  transition: all .5s var(--ease);
  position: relative; z-index: 1;
}
.why-card:hover .why-card__icon {
  background: var(--p);
  border-color: color-mix(in srgb, var(--p) 60%, transparent);
  transform: rotate(-7deg) scale(1.12);
  box-shadow:
    0 10px 32px color-mix(in srgb, var(--p) 48%, transparent),
    0 0 0 6px color-mix(in srgb, var(--p) 10%, transparent),
    0 0 0 12px color-mix(in srgb, var(--p) 4%, transparent);
}
.why-card__icon svg {
  width: 24px; height: 24px;
  color: color-mix(in srgb, var(--p) 75%, transparent);
  transition: color .35s, transform .5s;
}
.why-card:hover .why-card__icon svg { color: #fff; transform: rotate(7deg); }

/* ── Expanding rule ── */
.why-card__rule {
  width: 28px; height: 1.5px;
  margin: 16px 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--p), color-mix(in srgb, var(--p) 20%, transparent));
  opacity: .5;
  transition: width .5s var(--ease), opacity .35s, box-shadow .35s;
}
.why-card:hover .why-card__rule {
  width: 56px; opacity: 1;
  box-shadow: 0 0 12px color-mix(in srgb, var(--p) 55%, transparent);
}

.why-card h3 {
  font-family: 'DM Sans', var(--f-syne), sans-serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 11px;
  letter-spacing: -.02em;
  line-height: 1.25;
}
.why-card p {
  font-family: var(--f-body);
  font-size: .86rem;
  color: var(--text2);
  line-height: 1.86;
  transition: color .3s;
}
.why-card:hover p { color: var(--text2); }

/* ════ GALLERY ═══════════════════════════════════════════════ */
.sec-gallery { background: var(--bg3); padding: 96px 0; position: relative; overflow: hidden; }
.sec-gallery::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.gal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media(min-width:768px) { .gal-grid { grid-template-columns: repeat(3,1fr); } }

/* Card wrapper — NO overflow:hidden here, that was killing the boxes */
.gal-item {
  position: relative;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg2);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 4px 8px rgba(0,0,0,.1),
    0 16px 48px rgba(0,0,0,.24);
  transition:
    opacity .75s var(--ease),
    transform .6s var(--ease),
    border-color .45s,
    box-shadow .55s var(--ease);
  /* Clip children to rounded corners without overflow:hidden on parent */
}
.gal-item:hover {
  transform: translateY(-8px) scale(1.015);
  border-color: color-mix(in srgb, var(--p) 45%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 0 0 1px color-mix(in srgb, var(--p) 22%, transparent),
    0 32px 80px rgba(0,0,0,.38),
    0 0 70px color-mix(in srgb, var(--p) 10%, transparent);
}
[data-theme="light"] .gal-item:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 0 0 1px color-mix(in srgb, var(--p) 20%, transparent),
    0 24px 64px rgba(0,0,0,.15);
}

/* Corner spotlight — on the item itself */
.gal-item::before {
  content: '';
  position: absolute; inset: 0; z-index: 10;
  border-radius: 20px;
  background: radial-gradient(circle at 0% 0%,
    color-mix(in srgb, var(--p) 12%, transparent) 0%,
    transparent 55%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s;
}
.gal-item:hover::before { opacity: 1; }

/* Bottom glow bar */
.gal-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--p), color-mix(in srgb, var(--p) 40%, transparent), transparent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--p) 60%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .65s var(--ease);
  z-index: 10; border-radius: 0 0 20px 20px;
}
.gal-item:hover::after { transform: scaleX(1); }

/* ── The before/after image pair ── */
.gal-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  position: relative;
  /* FIXED: explicit height, not min-height, so children can use height:100% */
  height: 260px;
  border-radius: 18px 18px 0 0;
  overflow: hidden; /* clip images to card corners — safe here, not on .gal-item */
}
@media(min-width:480px)  { .gal-pair { height: 290px; } }
@media(min-width:768px)  { .gal-pair { height: 230px; } }
@media(min-width:900px)  { .gal-pair { height: 260px; } }
@media(min-width:1100px) { .gal-pair { height: 300px; } }

/* ── Each half (Before / After) ── */
.gal-box {
  position: relative;
  overflow: hidden;
  /* height:100% works now that .gal-pair has explicit height */
  height: 100%;
  /* Rich placeholder background — always visible */
  background: linear-gradient(155deg,
    color-mix(in srgb, var(--p) 18%, var(--bg2)) 0%,
    var(--bg2) 50%,
    color-mix(in srgb, var(--p) 8%, var(--bg3)) 100%);
}

/* Dot matrix texture on placeholder */
.gal-box::before {
  content: '';
  position: absolute; inset: 0; z-index: 0;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--p) 20%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  opacity: 0.5;
}

/* Placeholder icon */
.gal-placeholder {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px;
  pointer-events: none;
  transition: opacity .4s;
}
.gal-placeholder svg {
  width: 36px; height: 36px;
  color: color-mix(in srgb, var(--p) 45%, transparent);
  filter: drop-shadow(0 0 8px var(--p-glow));
}
.gal-placeholder span {
  font-family: var(--f-syne);
  font-size: .5rem; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text3);
}
.gal-box.img-loaded .gal-placeholder { opacity: 0; }

/* Real image — sits above placeholder */
.gal-box img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block; z-index: 2;
  opacity: 0;
  transition: opacity .6s ease, transform .8s var(--ease), filter .55s;
}
.gal-box img.loaded { opacity: 1; }
.gal-box:hover img { transform: scale(1.07); filter: brightness(1.08) saturate(1.08); }

/* Gradient overlay — above image */
.gal-box::after {
  content: '';
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.1) 55%, transparent 100%);
  transition: opacity .45s;
}
.gal-box:hover::after { opacity: .55; }

/* Before / After label tags */
.gal-tag {
  position: absolute;
  bottom: 10px; left: 10px;
  z-index: 5; /* above overlay */
  font-family: var(--f-syne);
  font-size: .55rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.gal-tag--b {
  background: rgba(0,0,0,.65);
  color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14);
}
.gal-tag--a {
  background: var(--p); color: #fff;
  box-shadow: 0 4px 18px color-mix(in srgb, var(--p) 45%, transparent);
}

/* VS divider chip */
.gal-pair::after {
  content: 'VS';
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6;
  font-family: var(--f-syne);
  font-size: .48rem; font-weight: 800; letter-spacing: .14em;
  color: #fff;
  background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.2);
  padding: 4px 8px; border-radius: 4px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Meta strip */
.gal-meta {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border-top: 1px solid var(--border2);
  border-radius: 0 0 18px 18px;
  transition: background .35s;
}
.gal-item:hover .gal-meta { background: color-mix(in srgb, var(--p) 7%, transparent); }
[data-theme="light"] .gal-item:hover .gal-meta { background: color-mix(in srgb, var(--p) 4%, transparent); }
.gal-meta span {
  font-family: var(--f-syne); font-size: .54rem;
  font-weight: 700; letter-spacing: .22em;
  color: var(--p); flex-shrink: 0; opacity: .8;
}
.gal-meta p {
  font-family: var(--f-body); font-size: .78rem;
  color: var(--text2); line-height: 1.4;
}

/* ════ REVIEW CARD — Luxury testimonial scroll
   Concept: A floating illuminated parchment. Giant serif quote
   mark, warm vignette, stars glow like embers on hover. The
   avatar ring ignites. The card uses a warm off-white tint
   (not pure cold glass) — uniquely editorial vs service cards.
════════════════════════════════════════════════════════════ */
/* ── REVIEWS ──────────────────────────────────────────────── */
.sec-reviews { background: var(--sec-alt); padding: 96px 0; position: relative; overflow: hidden; }
.sec-reviews__bg { position: absolute; inset: 0; pointer-events: none; }
.rev-bg-glow {
  position: absolute;
  width: 700px; height: 700px;
  left: -200px; top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 8%, transparent), transparent 65%);
}
.rev-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
@media(min-width:640px) { .rev-grid { grid-template-columns: repeat(2,1fr); } }
@media(min-width:1024px) { .rev-grid { grid-template-columns: repeat(3,1fr); } }

.rev-card {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 34px 28px 30px;
  /* Warm, slightly cream-tinted glass */
  background: linear-gradient(155deg,
    rgba(255,250,245,.07) 0%,
    rgba(255,245,238,.02) 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 4px 8px rgba(0,0,0,.12),
    0 14px 44px rgba(0,0,0,.22);
  transition:
    opacity .7s var(--ease-back),
    transform .6s var(--ease-back),
    border-color .45s,
    box-shadow .6s var(--ease);
}
[data-theme="light"] .rev-card {
  background: linear-gradient(155deg, #fffaf6 0%, #fff9f4 100%);
  border-color: rgba(180,140,100,.14);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 2px 4px rgba(0,0,0,.05),
    0 12px 40px rgba(0,0,0,.08);
}
.rev-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: color-mix(in srgb, var(--p) 40%, transparent);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 0 0 1px color-mix(in srgb, var(--p) 18%, transparent),
    0 36px 80px rgba(0,0,0,.32),
    0 0 90px color-mix(in srgb, var(--p) 10%, transparent);
}
[data-theme="light"] .rev-card:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 1px color-mix(in srgb, var(--p) 18%, transparent),
    0 24px 60px rgba(0,0,0,.12),
    0 0 55px color-mix(in srgb, var(--p) 7%, transparent);
}

/* ── Ambient orb from center-top ── */
.rev-card__orb {
  position: absolute;
  width: 300px; height: 300px;
  border-radius: 50%;
  top: -100px; left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--p) 16%, transparent) 0%,
    color-mix(in srgb, var(--p) 4%, transparent) 45%,
    transparent 68%);
  filter: blur(32px);
  opacity: 0;
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.rev-card:hover .rev-card__orb {
  opacity: 1;
  transform: translateX(-50%) translateY(16px) scale(1.25);
}

/* ── Giant serif quote ── */
.rev-card__quote {
  position: absolute;
  top: 4px; right: 16px;
  font-family: var(--f-corm);
  font-size: 7rem;
  line-height: 1;
  pointer-events: none;
  color: color-mix(in srgb, var(--p) 8%, transparent);
  transition: color .45s, transform .55s var(--ease);
  user-select: none;
}
[data-theme="light"] .rev-card__quote { color: color-mix(in srgb, var(--p) 9%, transparent); }
.rev-card:hover .rev-card__quote {
  color: color-mix(in srgb, var(--p) 17%, transparent);
  transform: scale(1.12) rotate(-6deg);
}

/* ── Stars: ember glow on hover ── */
.rev-stars {
  display: block;
  font-size: .88rem;
  letter-spacing: 3px;
  margin-bottom: 16px;
  color: var(--p);
  text-shadow: 0 0 10px color-mix(in srgb, var(--p) 35%, transparent);
  transition: text-shadow .45s, letter-spacing .35s var(--ease);
}
.rev-card:hover .rev-stars {
  text-shadow:
    0 0 20px color-mix(in srgb, var(--p) 90%, transparent),
    0 0 40px color-mix(in srgb, var(--p) 45%, transparent),
    0 0 60px color-mix(in srgb, var(--p) 20%, transparent);
  letter-spacing: 4px;
}

.rev-text {
  font-family: var(--f-corm);
  font-size: 1.02rem;
  font-style: italic;
  color: var(--text2);
  line-height: 1.82;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
  transition: color .3s;
}
.rev-card:hover .rev-text { color: var(--text); }

/* ── Divider ── */
.rev-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--p) 35%, transparent), transparent);
  margin-bottom: 18px;
  opacity: .4;
  transition: opacity .4s, background .4s;
}
.rev-card:hover .rev-divider { opacity: .9; }

.rev-person { display: flex; align-items: center; gap: 13px; position: relative; z-index: 2; }
.rev-av {
  width: 42px; height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-syne);
  font-size: .84rem;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255,255,255,.12);
  box-shadow: 0 4px 16px rgba(0,0,0,.3);
  transition: transform .45s var(--ease), box-shadow .45s, border-color .35s;
}
.rev-card:hover .rev-av {
  transform: scale(1.12);
  border-color: color-mix(in srgb, var(--p) 40%, transparent);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 0 4px color-mix(in srgb, var(--p) 14%, transparent);
}
.rev-person h4 {
  font-family: var(--f-body);
  font-size: .86rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.rev-person p {
  font-family: var(--f-body);
  font-size: .72rem;
  color: var(--text3);
  letter-spacing: .03em;
}

/* ── EMERGENCY ────────────────────────────────────────────── */
.emg{background:linear-gradient(135deg,var(--p) 0%,#9e1028 100%);padding:32px 24px;display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;text-align:center;position:relative;overflow:hidden}
.emg::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:30px 30px;pointer-events:none}
@media(min-width:900px){.emg{padding:36px 64px;gap:32px;justify-content:center;text-align:center}}
.emg__live{display:flex;align-items:center;gap:6px;font-family:var(--f-syne);font-size:.6rem;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.75);white-space:nowrap;flex-shrink:0}
.emg__live span{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.9);animation:ld 1.5s ease-in-out infinite}
@keyframes ld{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.6)}}
.emg__text strong{display:block;font-family:var(--f-syne);font-size:clamp(1.1rem,3vw,1.75rem);font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:#fff;margin-bottom:5px}
.emg__text p{font-family:var(--f-body);font-size:.88rem;color:rgba(255,255,255,.82)}
.emg__btn{display:inline-flex;align-items:center;gap:9px;flex-shrink:0;background:#fff;color:var(--p);font-family:var(--f-body);font-weight:700;font-size:.9rem;padding:14px 26px;border-radius:4px;border:2px solid #fff;transition:all .3s var(--ease);white-space:nowrap}
.emg__btn:hover{background:transparent;color:#fff}

/* ════ AREA PILL — Crystal location badge
   Concept: Compact crystal tile. Perfectly flat vs card's depth.
   On hover: a micro crimson orb materialises behind the text,
   a shimmer stripe sweeps left-to-right, the tile lifts
   and a tiny dot blinks into existence. Pure delight at small scale.
════════════════════════════════════════════════════════════ */
/* ── AREAS ──────────────────────────────────────────────────── */
.sec-areas { background: var(--bg); padding: 96px 0; position: relative; overflow: hidden; }
.sec-areas__bg { position: absolute; inset: 0; pointer-events: none; }
.areas-mesh {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
}
.areas-orb {
  position: absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 6%, transparent) 0%, transparent 60%);
  pointer-events: none;
  filter: blur(10px);
}
.areas-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
@media(min-width:480px) { .areas-grid { grid-template-columns: repeat(3,1fr); } }
@media(min-width:768px) { .areas-grid { grid-template-columns: repeat(4,1fr); } }

.area-pill {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  padding: 18px 14px 16px;
  text-align: center;
  cursor: default;
  /* Faceted crystal face */
  background: linear-gradient(150deg,
    rgba(255,255,255,.065) 0%,
    rgba(255,255,255,.022) 50%,
    rgba(255,255,255,.008) 100%);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.15),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(0,0,0,.1),
    0 8px 24px rgba(0,0,0,.18);
  font-family: var(--f-body);
  font-size: .82rem;
  font-weight: 600;
  color: var(--text2);
  letter-spacing: .03em;
  transition:
    opacity .45s var(--ease-back),
    transform .45s var(--ease-back),
    border-color .35s,
    color .3s,
    box-shadow .45s var(--ease);
}
[data-theme="light"] .area-pill {
  background: linear-gradient(150deg, #ffffff 0%, #f4f0ec 100%);
  border-color: rgba(0,0,0,.08);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 2px 4px rgba(0,0,0,.04),
    0 6px 20px rgba(0,0,0,.07);
}
.area-pill:hover {
  transform: translateY(-6px) scale(1.06);
  border-color: color-mix(in srgb, var(--p) 50%, transparent);
  color: var(--text);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 0 0 1px color-mix(in srgb, var(--p) 22%, transparent),
    0 20px 48px rgba(0,0,0,.3),
    0 0 36px color-mix(in srgb, var(--p) 14%, transparent);
}
[data-theme="light"] .area-pill:hover {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    0 0 0 1px color-mix(in srgb, var(--p) 22%, transparent),
    0 16px 40px rgba(0,0,0,.12),
    0 0 28px color-mix(in srgb, var(--p) 8%, transparent);
}

/* Micro nebula orb behind text */
.area-pill::before {
  content: '';
  position: absolute;
  width: 120px; height: 120px;
  border-radius: 50%;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%) scale(0);
  pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--p) 28%, transparent) 0%, transparent 65%);
  filter: blur(16px);
  opacity: 0;
  transition: transform .5s var(--ease), opacity .4s;
}
.area-pill:hover::before { transform: translate(-50%,-50%) scale(1.4); opacity: 1; }

/* Shimmer streak */
.area-pill::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(112deg,
    transparent 30%,
    rgba(255,255,255,.13) 50%,
    transparent 70%);
  transform: translateX(-150%);
  transition: transform .6s var(--ease);
  pointer-events: none;
}
.area-pill:hover::after { transform: translateX(150%); }

/* ── CONTACT ──────────────────────────────────────────────── */
.sec-contact{background:var(--bg3);padding:96px 0;position:relative;overflow:hidden}
.sec-contact__bg{position:absolute;inset:0;pointer-events:none}
.ct-mesh{position:absolute;inset:0;background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);background-size:40px 40px}
.ct-grid{display:grid;grid-template-columns:1fr;gap:44px;position:relative}
@media(min-width:900px){.ct-grid{grid-template-columns:1fr 1.35fr;gap:70px}}
.ct-info{display:flex;flex-direction:column;gap:18px}
.ct-row{display:flex;gap:15px;align-items:flex-start}
.ct-icon{width:44px;height:44px;flex-shrink:0;background:var(--p-soft);border:1px solid color-mix(in srgb, var(--p) 15%, transparent);border-radius:10px;display:flex;align-items:center;justify-content:center;transition:all .3s}
.ct-row:hover .ct-icon{background:var(--p);border-color:var(--p);box-shadow:0 6px 20px color-mix(in srgb, var(--p) 32%, transparent)}
.ct-icon svg{width:17px;height:17px;color:var(--p);transition:color .3s}
.ct-row:hover .ct-icon svg{color:#fff}
.ct-row strong{display:block;font-family:var(--f-body);font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text3);margin-bottom:4px}
.ct-val{display:block;font-family:var(--f-body);font-weight:500;font-size:.88rem;color:var(--text)}
a.ct-val:hover{color:var(--p)}
.hours-display{white-space:pre-line;line-height:2;font-size:.84rem}
.ct-badges{display:flex;flex-wrap:wrap;gap:7px;padding-top:6px}
.ct-badge{font-family:var(--f-body);font-size:.68rem;font-weight:600;padding:5px 13px;background:var(--p-soft);color:var(--p);border-radius:100px;border:1px solid color-mix(in srgb, var(--p) 15%, transparent);letter-spacing:.03em}
/* ══ CONTACT FORM CARD — premium glass panel ══ */
/* ════ CONTACT FORM — Deep glass vault
   Concept: Heavy, solid glass safe — you trust this form.
   Thick inset shadows, a persistent red nebula in the corner,
   gloss top edge. The card itself is the most premium thing
   on the page — you know your data is safe here.
════════════════════════════════════════════════════════════ */
.ct-form-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  padding: 44px;
  background: linear-gradient(158deg,
    rgba(255,255,255,.07) 0%,
    rgba(255,255,255,.025) 55%,
    color-mix(in srgb, var(--p) 4%, transparent) 100%);
  border: 1px solid rgba(255,255,255,.11);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.16),
    inset 0 -1px 0 rgba(0,0,0,.2),
    inset 1px 0 0 rgba(255,255,255,.06),
    inset -1px 0 0 rgba(255,255,255,.04),
    0 4px 8px rgba(0,0,0,.12),
    0 20px 60px rgba(0,0,0,.32);
}
[data-theme="light"] .ct-form-wrap {
  background: linear-gradient(158deg, #ffffff 0%, #faf5f0 100%);
  border-color: rgba(0,0,0,.07);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 2px 4px rgba(0,0,0,.04),
    0 16px 56px rgba(0,0,0,.09);
}

/* Persistent nebula orb top-right */
.ct-form-wrap::before {
  content: '';
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  top: -140px; right: -120px;
  pointer-events: none;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--p) 20%, transparent) 0%,
    color-mix(in srgb, var(--p) 6%, transparent) 45%,
    transparent 68%);
  filter: blur(36px);
}

/* Gloss top edge */
.ct-form-wrap::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.26), transparent);
  pointer-events: none;
}
[data-theme="light"] .ct-form-wrap::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), transparent);
}
.f2col{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:480px){.f2col{grid-template-columns:1fr 1fr}}
.fg{display:flex;flex-direction:column;gap:5px;margin-bottom:11px}
.fg label{font-family:var(--f-body);font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text3)}
.fg input,.fg select,.fg textarea{width:100%;padding:12px 15px;border:1.5px solid var(--input-border);border-radius:8px;font-family:var(--f-body);font-size:.88rem;background:var(--input-bg);color:var(--text);transition:border-color .25s,box-shadow .25s}
.fg input:focus,.fg select:focus,.fg textarea:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px color-mix(in srgb, var(--p) 10%, transparent)}
.fg textarea{resize:vertical}
.fg select option{background:var(--bg);color:var(--text)}
.f-submit{width:100%;padding:15px;background:var(--p);color:#fff;font-family:var(--f-body);font-size:.9rem;font-weight:700;border:2px solid var(--p);border-radius:8px;cursor:pointer;transition:all .3s var(--ease);letter-spacing:.02em;box-shadow:0 4px 18px color-mix(in srgb, var(--p) 28%, transparent)}
.f-submit:hover{background:transparent;color:var(--p);box-shadow:none}
.f-submit:disabled{opacity:.6;cursor:not-allowed}
.f-note{text-align:center;font-family:var(--f-body);font-size:.73rem;color:var(--text3);margin-top:9px}
.f-success{display:none;text-align:center;padding:52px 20px}
.f-success__icon{font-size:3rem;margin-bottom:12px}
.f-success h3{font-family:var(--f-fraunces);font-size:1.8rem;margin-bottom:8px;color:var(--text)}
.f-success p{font-family:var(--f-body);color:var(--text2);margin-bottom:20px}
.f-err{color:var(--p);font-size:.7rem;margin-top:4px;display:block}
.f-error-msg{background:color-mix(in srgb, var(--p) 8%, transparent);border:1px solid color-mix(in srgb, var(--p) 20%, transparent);border-radius:8px;padding:11px 14px;font-family:var(--f-body);font-size:.83rem;color:var(--p);margin-bottom:11px;display:none}

/* ── FOOTER ───────────────────────────────────────────────── */
.footer{background:var(--bg3);border-top:1px solid var(--border2);padding:44px 24px 0}
.footer__wrap{display:flex;flex-direction:column;gap:18px;padding-bottom:28px;border-bottom:1px solid var(--border2)}
@media(min-width:768px){.footer__wrap{flex-direction:row;justify-content:space-between;align-items:center}}
.footer__name{font-family:var(--f-syne);font-weight:800;font-size:1.4rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text)}
.footer__tag{font-family:var(--f-body);font-size:.79rem;color:var(--text3);margin-top:4px}
.footer__social{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.social-link{
  width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);
  border:1px solid var(--border);
  color:var(--text3);
  transition:all .3s var(--ease);
  position:relative;overflow:hidden;
}
.social-link::after{
  content:'';position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,var(--p-glow) 0%,transparent 70%);
  opacity:0;transition:opacity .3s;
}
.social-link:hover{
  background:var(--p);color:#fff;border-color:var(--p);
  transform:translateY(-3px) scale(1.1);
  box-shadow:0 8px 24px var(--p-glow);
}
.social-link:hover::after{opacity:1}
.footer__badges{display:flex;flex-wrap:wrap;gap:7px}
.f-badge{font-family:var(--f-body);font-size:.67rem;font-weight:500;padding:5px 12px;border:1px solid var(--border);border-radius:100px;color:var(--text3);letter-spacing:.04em}
.footer__bar{padding:18px 0;display:flex;flex-direction:column;gap:4px;max-width:1200px;margin:0 auto}
.footer__bar p{font-family:var(--f-body);font-size:.77rem;color:var(--text3)}
.footer__legal{font-size:.69rem!important;opacity:.5}

/* ── FAB ──────────────────────────────────────────────────── */
.fab{position:fixed;bottom:24px;right:24px;z-index:300;background:var(--p);color:#fff;display:flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:700;font-size:.84rem;padding:13px 22px;border-radius:100px;box-shadow:0 8px 28px color-mix(in srgb, var(--p) 40%, transparent);opacity:0;pointer-events:none;transform:translateY(10px);transition:all .35s var(--ease)}
.fab.show{opacity:1;pointer-events:auto;transform:none}
.fab:hover{transform:scale(1.05);box-shadow:0 12px 40px color-mix(in srgb, var(--p) 52%, transparent)}
@media(min-width:1024px){.fab{display:none}}

/* ══════════════════════════════════════════════════════════════
   SCROLL REVEAL — UNIQUE PER SECTION (GPU-only transforms)
══════════════════════════════════════════════════════════════ */

/* SERVICES: cards split-fly from alternating sides with 3D tilt */
.srv-card{opacity:0;will-change:opacity,transform}
.srv-card:nth-child(odd){transform:translateX(-56px) rotateY(-10deg)}
.srv-card:nth-child(even){transform:translateX(56px) rotateY(10deg)}
.srv-card.sr-in{opacity:1;transform:none}
.srv-card:nth-child(1){transition-delay:.04s}.srv-card:nth-child(2){transition-delay:.12s}.srv-card:nth-child(3){transition-delay:.20s}
.srv-card:nth-child(4){transition-delay:.28s}.srv-card:nth-child(5){transition-delay:.36s}.srv-card:nth-child(6){transition-delay:.44s}

/* Section tags: scale from center */
.sec-tag{opacity:0;transform:scaleX(.6);transform-origin:center;transition:opacity .45s var(--ease),transform .45s var(--ease)}
.sec-tag.sr-in{opacity:1;transform:none}

/* Headings: blur + rise */
.sec-h2{opacity:0;filter:blur(10px);transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease),filter .85s,color .4s}
.sec-h2.sr-in{opacity:1;filter:none;transform:none}

/* Sub-paragraphs: simple fade rise */
.sec-p{opacity:0;transform:translateY(16px);transition:opacity .75s var(--ease),transform .75s var(--ease),color .4s}
.sec-p.sr-in{opacity:1;transform:none}

/* WHY cards: each rotates from a different angle + scale */
.why-card{opacity:0;will-change:opacity,transform}
.why-card:nth-child(3n+1){transform:translateY(48px) rotate(-2deg)}
.why-card:nth-child(3n+2){transform:translateY(64px) scale(.91)}
.why-card:nth-child(3n+3){transform:translateY(48px) rotate(2deg)}
.why-card.sr-in{opacity:1;transform:none}
.why-card:nth-child(1){transition-delay:.03s}.why-card:nth-child(2){transition-delay:.10s}.why-card:nth-child(3){transition-delay:.17s}
.why-card:nth-child(4){transition-delay:.24s}.why-card:nth-child(5){transition-delay:.31s}.why-card:nth-child(6){transition-delay:.38s}

/* GALLERY: fade + rise — no clip-path (clip-path was hiding boxes entirely) */
.gal-item{opacity:0;transform:translateY(40px);will-change:opacity,transform;transition:opacity .75s var(--ease),transform .75s var(--ease)}
.gal-item.sr-in{opacity:1;transform:none}
.gal-item:nth-child(1){transition-delay:.04s}.gal-item:nth-child(2){transition-delay:.16s}.gal-item:nth-child(3){transition-delay:.28s}

/* REVIEWS: bounce from bottom with spring back */
.rev-card{opacity:0;transform:translateY(56px) scale(.93);will-change:opacity,transform}
.rev-card.sr-in{opacity:1;transform:none}
.rev-card:nth-child(1){transition-delay:.05s}.rev-card:nth-child(2){transition-delay:.13s}.rev-card:nth-child(3){transition-delay:.21s}
.rev-card:nth-child(4){transition-delay:.29s}.rev-card:nth-child(5){transition-delay:.37s}.rev-card:nth-child(6){transition-delay:.45s}

/* EMG: horizontal slam from left */
.emg{opacity:0;transform:translateX(-72px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.emg.sr-in{opacity:1;transform:none}

/* AREA PILLS: scale-pop radiating outward with random tiny rotation */
.area-pill{opacity:0;transform:scale(.6);will-change:opacity,transform;transition:opacity .45s var(--ease-back),transform .45s var(--ease-back),background .25s,border-color .25s,color .25s,box-shadow .25s}
.area-pill.sr-in{opacity:1;transform:scale(1)}

/* CONTACT: split entry from sides */
.ct-info{opacity:0;transform:translateX(-48px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.ct-info.sr-in{opacity:1;transform:none}
.ct-form-wrap{opacity:0;transform:translateX(48px);transition:opacity .75s var(--ease),transform .75s var(--ease),background .4s,border-color .4s,box-shadow .4s}
.ct-form-wrap.sr-in{opacity:1;transform:none}
.ct-form-wrap{transition-delay:.12s}

/* FOOTER */
.footer__left{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.footer__left.sr-in{opacity:1;transform:none}
.footer__badges{opacity:0;transform:translateY(26px);transition:opacity .65s var(--ease) .14s,transform .65s var(--ease) .14s}
.footer__badges.sr-in{opacity:1;transform:none}

/* Reduced-motion & disabled override */
.no-animate .srv-card,.no-animate .why-card,.no-animate .rev-card,.no-animate .gal-item,
.no-animate .area-pill,.no-animate .emg,.no-animate .ct-info,.no-animate .ct-form-wrap,
.no-animate .footer__left,.no-animate .footer__badges,.no-animate .sec-tag,
.no-animate .sec-h2,.no-animate .sec-p{opacity:1!important;transform:none!important;filter:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}