:root{--bg:#0e0f0f;--panel:#151616;--text:#e8e4dc;--muted:#aaa69e;--brass:#9a7445;--brass-soft:#c09a63;--line:rgba(255,255,255,.11);--serif:Georgia,"Times New Roman",serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.6;background-image:radial-gradient(circle at 20% 0%,rgba(255,255,255,.025),transparent 35%),linear-gradient(180deg,#0b0c0c,#101111 55%,#0b0c0c)}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header{position:sticky;top:0;z-index:50;height:78px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:0 4vw;background:rgba(7,8,8,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.055)}.brand-mini{display:flex;align-items:center;gap:10px;font-family:var(--serif);letter-spacing:.18em}.brand-mini img{width:38px;height:38px;object-fit:cover;border-radius:50%;filter:grayscale(1) contrast(1.1)}.site-nav{display:flex;justify-content:center;gap:30px}.site-nav a{position:relative;font-size:.78rem;text-transform:uppercase;letter-spacing:.18em;color:#c8c4bc}.site-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-12px;height:1px;background:var(--brass-soft);transition:right .25s ease}.site-nav a:hover::after,.site-nav a.active::after{right:0}.header-cta,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 24px;border:1px solid var(--brass);text-transform:uppercase;letter-spacing:.16em;font-size:.75rem;transition:.25s ease;background:transparent;color:var(--text)}.header-cta:hover,.btn-primary:hover{background:var(--brass);color:#111}.btn-primary{background:rgba(154,116,69,.12)}.btn-ghost{border-color:rgba(255,255,255,.22)}.btn-ghost:hover{border-color:var(--brass);color:var(--brass-soft)}.menu-toggle{display:none;background:none;border:0;width:44px;height:44px;padding:8px}.menu-toggle span:not(.sr-only){display:block;height:1px;background:#ddd;margin:7px 0}.hero{min-height:760px;position:relative;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid var(--line)}.hero-media{position:absolute;inset:0;background:radial-gradient(circle at 70% 35%,rgba(146,92,47,.20),transparent 26%),radial-gradient(circle at 30% 50%,rgba(149,151,150,.07),transparent 34%),linear-gradient(145deg,#050606 20%,#101111 58%,#070808 100%)}.steel-line{position:absolute;height:120px;width:95%;left:-8%;border:1px solid rgba(170,170,165,.12);border-radius:999px;transform:rotate(-20deg)}.steel-line-a{top:22%;box-shadow:0 0 80px rgba(255,255,255,.04) inset}.steel-line-b{top:50%;left:20%;width:90%}.wood-glow{position:absolute;width:72%;height:150px;right:-12%;bottom:11%;transform:rotate(-18deg);background:linear-gradient(90deg,transparent,rgba(116,58,20,.22),rgba(89,44,18,.10),transparent);filter:blur(10px)}.grain{position:absolute;inset:0;opacity:.22;background-image:radial-gradient(rgba(255,255,255,.14) .45px,transparent .45px);background-size:4px 4px;mix-blend-mode:overlay}.hero-content{position:relative;z-index:2;text-align:center;width:min(1180px,96vw);padding:52px 0 40px}.hero-logo-stage{position:relative;width:min(980px,92vw);margin:0 auto 18px;overflow:hidden;isolation:isolate}.hero-logo{width:100%;margin:0;display:block;mix-blend-mode:screen;filter:brightness(.18) contrast(1.08);animation:logoReveal 4.6s cubic-bezier(.22,.72,.18,1) .15s forwards}.hero-logo-stage::after{content:"";position:absolute;inset:5% 0;background:linear-gradient(90deg,transparent 0%,rgba(255,248,229,.04) 34%,rgba(255,248,229,.92) 49%,rgba(255,248,229,.18) 58%,transparent 76%);transform:translateX(-130%) skewX(-13deg);mix-blend-mode:screen;filter:blur(12px);animation:shineSweep 3.7s cubic-bezier(.2,.7,.2,1) .45s forwards;pointer-events:none}.logo-shine{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,rgba(255,246,222,.18),transparent 46%);opacity:0;mix-blend-mode:screen;animation:ambientWake 4.4s ease .3s forwards;pointer-events:none}.hero-kicker{text-transform:uppercase;letter-spacing:.36em;font-size:.82rem;color:#d2cec4}.hero-kicker i{display:inline-block;width:5px;height:5px;margin:0 16px;background:var(--brass);transform:rotate(45deg);vertical-align:middle}.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:30px}.scroll-cue{position:absolute;bottom:26px;width:48px;height:48px;display:grid;place-items:center;z-index:3}.scroll-cue span{width:17px;height:17px;border-right:1px solid var(--brass-soft);border-bottom:1px solid var(--brass-soft);transform:rotate(45deg);animation:bob 2s ease-in-out infinite}.section{padding:96px 5vw}.intro{display:grid;grid-template-columns:1fr 1fr;min-height:500px;align-items:center;gap:6vw;background:linear-gradient(90deg,#101111,#151311)}.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.32em;color:var(--brass-soft);margin:0 0 14px}.intro h1,.contact h2,.appointment h2{font-family:var(--serif);font-weight:400;line-height:1.05;font-size:clamp(2.5rem,5vw,4.4rem);margin:0 0 20px}.intro-copy>p:last-child{max-width:600px;color:var(--muted);font-size:1.05rem}.rule{width:58px;height:1px;background:var(--brass);margin:24px 0}.intro-art{display:grid;place-items:center}.metal-plate{width:min(520px,90%);aspect-ratio:1.9/1;border:1px solid rgba(255,255,255,.12);border-radius:8px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(255,255,255,.04),transparent 35%),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),#0d0e0e;box-shadow:0 18px 50px rgba(0,0,0,.45),inset 0 0 45px rgba(255,255,255,.025)}.metal-plate span{font-family:var(--serif);font-size:clamp(2.6rem,6vw,5.5rem);letter-spacing:.22em;color:#9d9b95;text-shadow:0 2px 0 #111}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;background:#0d0e0e;padding-top:32px}.service-card{min-height:330px;padding:38px 34px;border:1px solid var(--line);background:radial-gradient(circle at top right,rgba(154,116,69,.08),transparent 38%),linear-gradient(180deg,#171818,#111212);transition:transform .3s ease,border-color .3s ease}.service-card:hover{transform:translateY(-6px);border-color:rgba(154,116,69,.5)}.service-icon{width:50px;height:50px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;color:var(--brass-soft);font-family:var(--serif)}.service-card h2{font-family:var(--serif);font-weight:400;font-size:1.85rem;margin:26px 0 10px}.service-card p{color:var(--muted);max-width:30ch}.service-card a{display:inline-flex;gap:16px;margin-top:30px;text-transform:uppercase;letter-spacing:.18em;font-size:.72rem;color:var(--brass-soft)}.process{background:#111212;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.section-heading{display:flex;align-items:center;justify-content:center;gap:22px;margin-bottom:48px}.section-heading span{width:80px;height:1px;background:var(--brass)}.section-heading h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.2em;font-size:1.05rem}.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;max-width:1200px;margin:0 auto 46px}.step{position:relative;padding:0 18px}.step b{width:44px;height:44px;border:1px solid var(--brass);border-radius:50%;display:grid;place-items:center;margin:0 auto 20px;font-family:var(--serif);font-weight:400}.step:not(:last-child)::after{content:"";position:absolute;top:22px;left:calc(50% + 30px);width:calc(100% - 60px);height:1px;background:rgba(255,255,255,.12)}.step h3{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.12em;font-size:.9rem}.step p{font-size:.9rem;color:var(--muted)}.appointment{min-height:420px;display:grid;place-items:center;text-align:center;background:radial-gradient(circle at center,rgba(154,116,69,.12),transparent 32%),linear-gradient(120deg,#101010,#171412 50%,#101010)}.appointment-inner{max-width:700px}.appointment p:not(.eyebrow){color:var(--muted);max-width:600px;margin:0 auto 28px}.contact{display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:#0d0e0e}.contact-copy>p:not(.eyebrow){color:var(--muted);max-width:55ch}.contact-list{margin:32px 0 0}.contact-list>div{display:grid;grid-template-columns:140px 1fr;padding:13px 0;border-bottom:1px solid var(--line)}.contact-list dt{text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--brass-soft)}.contact-list dd{margin:0;color:#c9c6bf}.contact-form{display:grid;gap:18px}.contact-form label,.transfer-modal label{display:grid;gap:8px;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:#bcb8b0}input,select,textarea{width:100%;border:1px solid rgba(255,255,255,.13);background:#151616;color:var(--text);padding:14px 15px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--brass)}textarea{resize:vertical}.form-note{font-size:.78rem;color:#888;line-height:1.5}.footer{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:38px;padding:54px 5vw 24px;background:#0a0b0b;border-top:1px solid var(--line)}.footer-brand img{width:70px;height:70px;object-fit:cover;border-radius:50%;filter:grayscale(1)}.footer-brand strong{display:block;font-family:var(--serif);font-size:1.35rem;letter-spacing:.18em;margin-top:12px}.footer-brand span,.footer-col p{display:block;color:#8f8c85;font-size:.86rem}.footer-col h2{text-transform:uppercase;font-size:.72rem;letter-spacing:.18em;font-weight:500;color:#d3cfc6}.footer-bottom{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:20px;color:#74716c;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}.transfer-modal{width:min(620px,calc(100% - 32px));border:1px solid rgba(154,116,69,.45);background:#111212;color:var(--text);padding:36px;box-shadow:0 30px 100px rgba(0,0,0,.7)}.transfer-modal::backdrop{background:rgba(0,0,0,.75);backdrop-filter:blur(6px)}.transfer-modal h2{font-family:var(--serif);font-weight:400;font-size:2.2rem;margin:0 0 12px}.transfer-modal form{display:grid;gap:16px;margin-top:24px}.modal-close{position:absolute;right:16px;top:12px;border:0;background:none;color:#aaa;font-size:2rem}.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}@keyframes heroIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}@keyframes logoReveal{0%{filter:brightness(.12) contrast(1.1)}42%{filter:brightness(.30) contrast(1.08)}72%{filter:brightness(.72) contrast(1.04)}100%{filter:brightness(1) contrast(1.02)}}@keyframes shineSweep{0%{transform:translateX(-135%) skewX(-13deg);opacity:0}12%{opacity:.9}72%{opacity:.85}100%{transform:translateX(135%) skewX(-13deg);opacity:0}}@keyframes ambientWake{0%,25%{opacity:0}65%{opacity:.65}100%{opacity:.22}}@keyframes bob{0%,100%{transform:translateY(-4px) rotate(45deg)}50%{transform:translateY(4px) rotate(45deg)}}@media(max-width:980px){.site-header{grid-template-columns:1fr auto;height:68px}.menu-toggle{display:block}.header-cta{display:none}.site-nav{display:none;position:absolute;top:68px;left:0;right:0;padding:18px 5vw 26px;background:#090a0a;border-bottom:1px solid var(--line);flex-direction:column;gap:0}.site-nav.open{display:flex}.site-nav a{padding:14px 0}.site-nav a::after{display:none}.hero{min-height:650px}.intro,.contact{grid-template-columns:1fr}.intro-art{order:-1}.services{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.step:nth-child(2)::after{display:none}.footer{grid-template-columns:1fr 1fr}}@media(max-width:640px){.section{padding:72px 22px}.brand-mini span{font-size:.82rem}.hero{min-height:610px}.hero-content{padding-top:30px}.hero-logo-stage{width:100vw;margin-left:calc(50% - 50vw);margin-bottom:14px}.hero-logo{width:100%}.hero-kicker{font-size:.68rem;letter-spacing:.20em;line-height:2}.hero-kicker i{margin:0 7px}.hero-actions{flex-direction:column;align-items:stretch;padding:0 18px}.services{padding:22px}.steps{grid-template-columns:1fr}.step::after{display:none!important}.footer{grid-template-columns:1fr;padding:42px 22px 20px}.footer-bottom{flex-direction:column;gap:10px}.contact-list>div{grid-template-columns:1fr;gap:3px}.metal-plate{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}


/* ==========================================================
   V3 HERO — approved 626 mark becomes the page background
   V2 layout below the hero is intentionally unchanged.
   ========================================================== */

.hero-background-logo{
  min-height:760px;
  isolation:isolate;
  background:#070808;
}

/* The V2 atmospheric background remains, but the logo now lives inside it. */
.hero-background-logo .hero-media{
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(154,116,69,.10), transparent 40%),
    radial-gradient(circle at 24% 30%, rgba(255,255,255,.035), transparent 30%),
    linear-gradient(145deg,#050606 12%,#0d0e0e 54%,#060707 100%);
}

/* Exact approved mark, transparent — no square/card/background around it. */
.hero-logo-background,
.hero-logo-light{
  position:absolute;
  z-index:2;
  left:50%;
  top:48%;
  width:min(1180px, 94vw);
  aspect-ratio:1035 / 575;
  transform:translate(-50%,-50%);
  pointer-events:none;
}

.hero-logo-background{
  background:url("hero-logo.png") center / contain no-repeat;
  opacity:.08;
  filter:brightness(.18) contrast(1.12) saturate(.68);
  animation:backgroundLogoWake 3.1s cubic-bezier(.22,.7,.15,1) .08s forwards;
  will-change:opacity,filter;
}

/* The light is clipped to the actual metal shape of the logo.
   It sweeps across the mark rather than across a square image. */
.hero-logo-light{
  -webkit-mask:url("hero-logo.png") center / contain no-repeat;
  mask:url("hero-logo.png") center / contain no-repeat;
  background:
    linear-gradient(
      103deg,
      transparent 0%,
      transparent 35%,
      rgba(176,137,89,.10) 42%,
      rgba(255,246,223,.98) 49%,
      rgba(210,178,128,.42) 54%,
      transparent 63%,
      transparent 100%
    );
  background-size:280% 100%;
  background-position:125% 50%;
  opacity:0;
  mix-blend-mode:screen;
  animation:backgroundLogoSweep 2.65s cubic-bezier(.16,.67,.2,1) .15s both;
  will-change:background-position,opacity;
}

/* Soft edge falloff ties the emblem into the hero instead of presenting it as an object. */
.hero-logo-vignette{
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(5,6,6,.35) 0%,transparent 19%,transparent 71%,rgba(5,6,6,.68) 100%),
    radial-gradient(ellipse at 50% 46%,transparent 32%,rgba(5,6,6,.08) 59%,rgba(5,6,6,.54) 100%);
}

/* Keep the V2 CTA/kicker placement, but let the mark own the hero visually. */
.hero-content-background{
  z-index:5;
  align-self:stretch;
  min-height:760px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  padding:80px 0 92px;
  width:min(900px,90vw);
}

.hero-content-background .hero-kicker{
  text-shadow:0 2px 20px rgba(0,0,0,.95);
}

.hero-content-background .hero-actions{
  margin-top:24px;
}

@keyframes backgroundLogoWake{
  0%{
    opacity:.035;
    filter:brightness(.10) contrast(1.16) saturate(.40);
  }
  28%{
    opacity:.11;
    filter:brightness(.19) contrast(1.14) saturate(.48);
  }
  58%{
    opacity:.43;
    filter:brightness(.48) contrast(1.10) saturate(.58);
  }
  82%{
    opacity:.78;
    filter:brightness(.78) contrast(1.07) saturate(.66);
  }
  100%{
    opacity:.94;
    filter:brightness(.96) contrast(1.04) saturate(.70);
  }
}

@keyframes backgroundLogoSweep{
  0%{
    opacity:0;
    background-position:125% 50%;
  }
  12%{opacity:.20}
  35%{opacity:.72}
  62%{opacity:1}
  88%{opacity:.38}
  100%{
    opacity:0;
    background-position:-125% 50%;
  }
}

/* Once revealed, a faint stationary glow keeps the steel alive without looping a flashy animation. */
.hero-background-logo::after{
  content:"";
  position:absolute;
  z-index:4;
  left:50%;
  top:47%;
  width:min(1120px,90vw);
  height:58%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  background:radial-gradient(ellipse at center,rgba(183,144,93,.10),transparent 67%);
  animation:heroAmbientSettle 3.8s ease 1.3s forwards;
}

@keyframes heroAmbientSettle{
  0%{opacity:0}
  55%{opacity:.20}
  100%{opacity:.10}
}

@media(max-width:980px){
  .hero-logo-background,
  .hero-logo-light{
    width:min(1050px,112vw);
    top:46%;
  }
  .hero-content-background{
    min-height:650px;
    padding-bottom:76px;
  }
}

@media(max-width:640px){
  .hero-background-logo{min-height:610px}
  .hero-logo-background,
  .hero-logo-light{
    width:138vw;
    max-width:none;
    top:43%;
  }
  .hero-content-background{
    min-height:610px;
    padding:42px 18px 72px;
  }
  .hero-content-background .hero-actions{
    width:100%;
    padding:0;
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-logo-background{
    opacity:.94;
    filter:brightness(.96) contrast(1.04) saturate(.70);
    animation:none!important;
  }
  .hero-logo-light,
  .hero-background-logo::after{
    animation:none!important;
    opacity:0;
  }
}


/* ==========================================================
   V6 OPENING — CLEAN SEQUENCE
   DARK → ONE BIG FLASH → LOGO FULLY VISIBLE → SMOKE
   Built from V3 specifically so there is NO old small bore flash.
   ========================================================== */

/* Turn off V3's old moving highlight sweep. */
.hero-logo-light{
  display:none !important;
  animation:none !important;
}

/* The approved logo starts nearly black and snaps/reveals at the flash peak,
   then stays visible for the rest of the visit. */
.hero-logo-background{
  opacity:.025;
  filter:brightness(.055) contrast(1.18) saturate(.45);
  animation:v7LogoReveal 1.45s cubic-bezier(.18,.74,.18,1) .22s forwards;
}

/* Keep only a faint ambient glow after the reveal. */
.hero-background-logo::after{
  animation:v6Ambient 2.0s ease 1.0s forwards !important;
  opacity:0;
}

/* One single flash covering the entire hero.
   No separate flash in either 6. */
.hero-page-flash{
  position:absolute;
  inset:0;
  z-index:10;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 44%,
      rgba(255,252,239,1) 0%,
      rgba(255,239,204,.95) 15%,
      rgba(225,183,124,.68) 32%,
      rgba(159,104,52,.30) 51%,
      transparent 74%),
    rgba(255,246,225,.26);
  mix-blend-mode:screen;
  animation:v6WholeHeroFlash .82s cubic-bezier(.12,.82,.22,1) .46s both;
}

/* Effects layer exactly follows the logo footprint, so the smoke origins
   move with the logo at desktop/tablet/mobile sizes. */
.hero-effects{
  position:absolute;
  z-index:9;
  left:50%;
  top:48%;
  width:min(1180px,94vw);
  aspect-ratio:1035 / 575;
  transform:translate(-50%,-50%);
  pointer-events:none;
  overflow:visible;
}

/* Approximate centers of the circular bores within the approved mark. */
.smoke-emitter{
  position:absolute;
  width:20%;
  height:54%;
  top:48%;
  transform:translate(-50%,-10%);
  pointer-events:none;
}
.smoke-left{ left:25.5%; }
.smoke-right{ left:74.5%; }

.smoke-puff{
  position:absolute;
  left:50%;
  bottom:6%;
  width:46%;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,0) scale(.20);
  background:
    radial-gradient(circle at 44% 44%,
      rgba(224,226,223,.50) 0%,
      rgba(178,181,178,.34) 33%,
      rgba(122,126,123,.18) 56%,
      rgba(80,83,81,.07) 69%,
      transparent 78%);
  box-shadow:
    -16px 7px 26px rgba(205,207,204,.06),
    18px -8px 30px rgba(205,207,204,.05);
  filter:blur(6px);
  mix-blend-mode:screen;
  animation:v6Smoke 4.15s cubic-bezier(.16,.58,.28,1) forwards;
}

/* Left and right are intentionally not perfect mirrors. */
.smoke-left .p1{--dx:-16px;--rise:150px;--grow:1.35;animation-delay:1.12s;width:46%}
.smoke-left .p2{--dx:20px;--rise:190px;--grow:1.55;animation-delay:1.40s;width:42%;left:42%}
.smoke-left .p3{--dx:-34px;--rise:225px;--grow:1.72;animation-delay:1.72s;width:38%;left:57%}
.smoke-left .p4{--dx:38px;--rise:260px;--grow:1.92;animation-delay:2.04s;width:32%;left:48%}
.smoke-left .p5{--dx:-46px;--rise:290px;--grow:2.08;animation-delay:2.38s;width:28%;left:54%}

.smoke-right .p1{--dx:18px;--rise:158px;--grow:1.40;animation-delay:1.20s;width:45%}
.smoke-right .p2{--dx:-22px;--rise:198px;--grow:1.58;animation-delay:1.50s;width:41%;left:58%}
.smoke-right .p3{--dx:36px;--rise:232px;--grow:1.76;animation-delay:1.82s;width:36%;left:43%}
.smoke-right .p4{--dx:-42px;--rise:266px;--grow:1.96;animation-delay:2.14s;width:31%;left:53%}
.smoke-right .p5{--dx:49px;--rise:300px;--grow:2.12;animation-delay:2.48s;width:27%;left:46%}

@keyframes v7LogoReveal{
  0%,34%{
    opacity:.018;
    filter:brightness(.045) contrast(1.18) saturate(.42);
  }
  /* The ONE full-page flash hits here. */
  44%{
    opacity:1;
    filter:brightness(1.34) contrast(1.00) saturate(.74);
  }
  /* Flash fades, but the mark stays fully present. */
  60%{
    opacity:1;
    filter:brightness(1.10) contrast(1.03) saturate(.72);
  }
  100%{
    opacity:1;
    filter:brightness(1.00) contrast(1.04) saturate(.70);
  }
}

@keyframes v6WholeHeroFlash{
  0%,18%{opacity:0}
  28%{opacity:.16}
  38%{opacity:1}
  45%{opacity:.92}
  57%{opacity:.24}
  72%{opacity:.06}
  100%{opacity:0}
}

@keyframes v6Ambient{
  0%{opacity:0}
  48%{opacity:.17}
  100%{opacity:.10}
}

@keyframes v6Smoke{
  0%{
    opacity:0;
    transform:translate(-50%,8px) scale(.20);
    filter:blur(4px);
  }
  15%{opacity:.40}
  34%{
    opacity:.34;
    transform:translate(calc(-50% + var(--dx)),calc(var(--rise) * -.34)) scale(.72);
    filter:blur(8px);
  }
  66%{
    opacity:.17;
    transform:translate(calc(-50% + var(--dx)),calc(var(--rise) * -.72)) scale(var(--grow));
    filter:blur(13px);
  }
  100%{
    opacity:0;
    transform:translate(calc(-50% + var(--dx)),calc(var(--rise) * -1)) scale(calc(var(--grow) * 1.18));
    filter:blur(20px);
  }
}

/* Match the V3 logo's responsive geometry. */
@media(max-width:980px){
  .hero-effects{
    width:min(1050px,112vw);
    top:46%;
  }
}

@media(max-width:640px){
  .hero-effects{
    width:138vw;
    max-width:none;
    top:43%;
  }
  .smoke-emitter{
    width:18%;
    height:50%;
  }
}

/* Accessibility: no flash/smoke, logo is simply visible. */
@media(prefers-reduced-motion:reduce){
  .hero-logo-background{
    opacity:1 !important;
    filter:brightness(1) contrast(1.04) saturate(.70) !important;
    animation:none !important;
  }
  .hero-page-flash,
  .hero-effects{
    display:none !important;
  }
  .hero-background-logo::after{
    animation:none !important;
    opacity:.10 !important;
  }
}


/* V7 safety: final logo state is guaranteed after the opening. */
@media (prefers-reduced-motion:no-preference){
  .hero-background-logo .hero-logo-background{
    animation-fill-mode:forwards;
  }
}


/* ==========================================================
   V8 SMOKE FIX
   Fuller + smoother smoke, no animated blur, no invalid calc math.
   ========================================================== */

.smoke-emitter{
  width:22%;
  height:62%;
  top:47%;
  transform:translate(-50%,-8%);
  overflow:visible;
}

.smoke-puff{
  position:absolute;
  left:50%;
  bottom:2%;
  width:44%;
  aspect-ratio:1;
  border-radius:50%;
  opacity:0;
  transform:translate3d(-50%,8px,0) scale(.24);
  background:
    radial-gradient(circle at 42% 40%,
      rgba(228,230,227,.56) 0%,
      rgba(191,194,190,.40) 27%,
      rgba(150,154,151,.24) 48%,
      rgba(112,116,113,.11) 65%,
      transparent 78%);
  box-shadow:
    -20px 8px 28px rgba(214,216,213,.07),
    22px -10px 32px rgba(214,216,213,.06);
  filter:blur(7px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:v8SmokeFlow 4.8s cubic-bezier(.18,.56,.24,1) forwards;
}

/* LEFT bore — fuller plume with staggered, slightly irregular paths */
.smoke-left .p1{--x1:-8px; --x2:-18px; --x3:-28px; --y1:-54px; --y2:-126px; --y3:-220px; --s1:.78; --s2:1.32; --s3:1.82; animation-delay:1.08s; width:48%}
.smoke-left .p2{--x1:12px; --x2:24px; --x3:34px; --y1:-62px; --y2:-142px; --y3:-242px; --s1:.82; --s2:1.38; --s3:1.92; animation-delay:1.26s; width:45%; left:44%}
.smoke-left .p3{--x1:-16px; --x2:-30px; --x3:-44px; --y1:-69px; --y2:-158px; --y3:-260px; --s1:.86; --s2:1.46; --s3:2.02; animation-delay:1.44s; width:42%; left:56%}
.smoke-left .p4{--x1:18px; --x2:34px; --x3:48px; --y1:-77px; --y2:-174px; --y3:-278px; --s1:.88; --s2:1.52; --s3:2.12; animation-delay:1.63s; width:39%; left:48%}
.smoke-left .p5{--x1:-20px; --x2:-38px; --x3:-52px; --y1:-86px; --y2:-188px; --y3:-292px; --s1:.92; --s2:1.60; --s3:2.20; animation-delay:1.83s; width:36%; left:53%}
.smoke-left .p6{--x1:10px; --x2:20px; --x3:38px; --y1:-94px; --y2:-202px; --y3:-306px; --s1:.96; --s2:1.66; --s3:2.28; animation-delay:2.03s; width:34%; left:46%}
.smoke-left .p7{--x1:-14px; --x2:-24px; --x3:-36px; --y1:-102px; --y2:-214px; --y3:-320px; --s1:1.00; --s2:1.70; --s3:2.34; animation-delay:2.24s; width:31%; left:55%}
.smoke-left .p8{--x1:16px; --x2:28px; --x3:42px; --y1:-108px; --y2:-226px; --y3:-334px; --s1:1.02; --s2:1.74; --s3:2.40; animation-delay:2.46s; width:29%; left:49%}

/* RIGHT bore — similar volume, different drift so it feels natural */
.smoke-right .p1{--x1:9px; --x2:20px; --x3:30px; --y1:-56px; --y2:-130px; --y3:-224px; --s1:.78; --s2:1.34; --s3:1.84; animation-delay:1.12s; width:47%}
.smoke-right .p2{--x1:-12px; --x2:-24px; --x3:-36px; --y1:-64px; --y2:-146px; --y3:-246px; --s1:.82; --s2:1.40; --s3:1.94; animation-delay:1.31s; width:44%; left:56%}
.smoke-right .p3{--x1:17px; --x2:31px; --x3:46px; --y1:-72px; --y2:-162px; --y3:-266px; --s1:.86; --s2:1.48; --s3:2.04; animation-delay:1.50s; width:41%; left:45%}
.smoke-right .p4{--x1:-18px; --x2:-34px; --x3:-49px; --y1:-80px; --y2:-178px; --y3:-282px; --s1:.90; --s2:1.54; --s3:2.14; animation-delay:1.70s; width:38%; left:52%}
.smoke-right .p5{--x1:21px; --x2:39px; --x3:54px; --y1:-88px; --y2:-192px; --y3:-296px; --s1:.94; --s2:1.62; --s3:2.22; animation-delay:1.90s; width:35%; left:47%}
.smoke-right .p6{--x1:-10px; --x2:-21px; --x3:-39px; --y1:-96px; --y2:-206px; --y3:-310px; --s1:.98; --s2:1.68; --s3:2.30; animation-delay:2.11s; width:33%; left:54%}
.smoke-right .p7{--x1:15px; --x2:25px; --x3:38px; --y1:-104px; --y2:-218px; --y3:-324px; --s1:1.00; --s2:1.72; --s3:2.36; animation-delay:2.32s; width:30%; left:46%}
.smoke-right .p8{--x1:-16px; --x2:-29px; --x3:-43px; --y1:-110px; --y2:-230px; --y3:-338px; --s1:1.03; --s2:1.76; --s3:2.42; animation-delay:2.54s; width:28%; left:51%}

@keyframes v8SmokeFlow{
  0%{
    opacity:0;
    transform:translate3d(-50%,8px,0) scale(.24);
  }
  12%{
    opacity:.46;
  }
  34%{
    opacity:.40;
    transform:translate3d(calc(-50% + var(--x1)),var(--y1),0) scale(var(--s1));
  }
  62%{
    opacity:.24;
    transform:translate3d(calc(-50% + var(--x2)),var(--y2),0) scale(var(--s2));
  }
  82%{
    opacity:.12;
    transform:translate3d(calc(-50% + var(--x3)),var(--y3),0) scale(var(--s3));
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--x3)),calc(var(--y3) - 28px),0) scale(calc(var(--s3) + .16));
  }
}

/* More visible on desktop without becoming a giant cloud */
@media(min-width:981px){
  .smoke-puff{filter:blur(8px)}
}

/* Slightly tighter on mobile to keep performance smooth */
@media(max-width:640px){
  .smoke-emitter{width:20%;height:56%}
  .smoke-puff{
    filter:blur(5px);
    opacity:0;
  }
}


/* ==========================================================
   V9 SMOKE TUNING
   - Starts higher, from inside the two bores
   - Thicker at the mouth
   - Smoother, softer plume
   ========================================================== */

/* Move emitters upward so the smoke starts INSIDE each circular 6,
   rather than below the lower edge of the logo. */
.smoke-emitter{
  width:25%;
  height:68%;
  top:34.5%;
  transform:translate(-50%,0);
  overflow:visible;
}

/* Bore centers for the approved logo */
.smoke-left{ left:25.5%; }
.smoke-right{ left:74.5%; }

/* Add a soft continuous haze at each bore mouth so the plume feels connected
   instead of appearing as separate bubbles. */
.smoke-emitter::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:20%;
  width:64%;
  height:28%;
  border-radius:50%;
  transform:translateX(-50%) scale(.55);
  opacity:0;
  background:
    radial-gradient(ellipse at center,
      rgba(220,222,219,.40) 0%,
      rgba(184,187,184,.26) 38%,
      rgba(126,130,127,.12) 64%,
      transparent 82%);
  filter:blur(10px);
  mix-blend-mode:screen;
  animation:v9MouthHaze 2.1s ease-out 1.05s forwards;
  will-change:transform,opacity;
}

/* Larger, softer smoke bodies. */
.smoke-puff{
  bottom:18%;
  width:58%;
  opacity:0;
  transform:translate3d(-50%,0,0) scale(.28);
  background:
    radial-gradient(circle at 46% 45%,
      rgba(232,234,231,.50) 0%,
      rgba(199,202,198,.38) 28%,
      rgba(157,161,157,.24) 48%,
      rgba(113,117,114,.12) 65%,
      transparent 82%);
  box-shadow:
    -28px 10px 42px rgba(220,222,219,.07),
    30px -14px 46px rgba(220,222,219,.06);
  filter:blur(10px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:v9SmokeFlow 5.4s cubic-bezier(.18,.56,.22,1) forwards;
}

/* LEFT bore */
.smoke-left .p1{--x1:-5px;  --x2:-14px; --x3:-22px; --y1:-48px; --y2:-118px; --y3:-210px; --s1:.92; --s2:1.48; --s3:1.95; animation-delay:1.08s; width:62%}
.smoke-left .p2{--x1:9px;   --x2:18px;  --x3:28px;  --y1:-56px; --y2:-130px; --y3:-228px; --s1:.96; --s2:1.55; --s3:2.02; animation-delay:1.28s; width:59%; left:45%}
.smoke-left .p3{--x1:-12px; --x2:-25px; --x3:-36px; --y1:-64px; --y2:-144px; --y3:-245px; --s1:1.00; --s2:1.62; --s3:2.10; animation-delay:1.50s; width:55%; left:56%}
.smoke-left .p4{--x1:15px;  --x2:28px;  --x3:40px;  --y1:-72px; --y2:-160px; --y3:-264px; --s1:1.04; --s2:1.69; --s3:2.18; animation-delay:1.72s; width:51%; left:48%}
.smoke-left .p5{--x1:-18px; --x2:-32px; --x3:-46px; --y1:-82px; --y2:-178px; --y3:-282px; --s1:1.08; --s2:1.76; --s3:2.26; animation-delay:1.95s; width:47%; left:54%}
.smoke-left .p6{--x1:12px;  --x2:24px;  --x3:36px;  --y1:-90px; --y2:-194px; --y3:-300px; --s1:1.12; --s2:1.82; --s3:2.34; animation-delay:2.18s; width:43%; left:46%}
.smoke-left .p7{--x1:-11px; --x2:-20px; --x3:-31px; --y1:-98px; --y2:-208px; --y3:-316px; --s1:1.15; --s2:1.88; --s3:2.42; animation-delay:2.42s; width:39%; left:55%}
.smoke-left .p8{--x1:14px;  --x2:26px;  --x3:39px;  --y1:-105px;--y2:-222px; --y3:-332px; --s1:1.18; --s2:1.94; --s3:2.50; animation-delay:2.66s; width:36%; left:49%}

/* RIGHT bore */
.smoke-right .p1{--x1:6px;   --x2:15px;  --x3:24px;  --y1:-50px; --y2:-120px; --y3:-214px; --s1:.92; --s2:1.50; --s3:1.98; animation-delay:1.12s; width:61%}
.smoke-right .p2{--x1:-9px;  --x2:-18px; --x3:-28px; --y1:-58px; --y2:-134px; --y3:-232px; --s1:.96; --s2:1.57; --s3:2.05; animation-delay:1.32s; width:58%; left:55%}
.smoke-right .p3{--x1:13px;  --x2:25px;  --x3:37px;  --y1:-66px; --y2:-148px; --y3:-250px; --s1:1.00; --s2:1.64; --s3:2.12; animation-delay:1.54s; width:54%; left:44%}
.smoke-right .p4{--x1:-15px; --x2:-29px; --x3:-42px; --y1:-74px; --y2:-164px; --y3:-268px; --s1:1.04; --s2:1.71; --s3:2.20; animation-delay:1.76s; width:50%; left:52%}
.smoke-right .p5{--x1:18px;  --x2:33px;  --x3:47px;  --y1:-84px; --y2:-182px; --y3:-286px; --s1:1.08; --s2:1.78; --s3:2.28; animation-delay:1.99s; width:46%; left:47%}
.smoke-right .p6{--x1:-12px; --x2:-24px; --x3:-36px; --y1:-92px; --y2:-198px; --y3:-304px; --s1:1.12; --s2:1.84; --s3:2.36; animation-delay:2.22s; width:42%; left:54%}
.smoke-right .p7{--x1:11px;  --x2:21px;  --x3:32px;  --y1:-100px;--y2:-212px; --y3:-320px; --s1:1.15; --s2:1.90; --s3:2.44; animation-delay:2.46s; width:38%; left:46%}
.smoke-right .p8{--x1:-14px; --x2:-26px; --x3:-39px; --y1:-107px;--y2:-226px; --y3:-336px; --s1:1.18; --s2:1.96; --s3:2.52; animation-delay:2.70s; width:35%; left:51%}

@keyframes v9MouthHaze{
  0%{
    opacity:0;
    transform:translateX(-50%) scale(.50);
  }
  22%{opacity:.36}
  56%{
    opacity:.28;
    transform:translateX(-50%) translateY(-24px) scale(.92);
  }
  100%{
    opacity:0;
    transform:translateX(-50%) translateY(-72px) scale(1.28);
  }
}

@keyframes v9SmokeFlow{
  0%{
    opacity:0;
    transform:translate3d(-50%,0,0) scale(.28);
  }
  10%{opacity:.48}
  30%{
    opacity:.43;
    transform:translate3d(calc(-50% + var(--x1)),var(--y1),0) scale(var(--s1));
  }
  58%{
    opacity:.29;
    transform:translate3d(calc(-50% + var(--x2)),var(--y2),0) scale(var(--s2));
  }
  80%{
    opacity:.15;
    transform:translate3d(calc(-50% + var(--x3)),var(--y3),0) scale(var(--s3));
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--x3)),calc(var(--y3) - 34px),0) scale(calc(var(--s3) + .18));
  }
}

/* Slightly lower blur on mobile to keep Safari smooth. */
@media(max-width:640px){
  .smoke-emitter{
    width:23%;
    height:62%;
    top:33.5%;
  }
  .smoke-puff{filter:blur(7px)}
  .smoke-emitter::before{filter:blur(8px)}
}


/* ==========================================================
   V10 SMOKE — SINGLE ROLLING PLUME
   Goal: BOOM → one continuous cloud rises → dissipates.
   No repeated "puff, puff, puff" effect.
   ========================================================== */

/* Move the source higher so it clearly begins inside the bores. */
.smoke-emitter{
  top:27.5%;
  width:26%;
  height:70%;
  transform:translate(-50%,0);
  overflow:visible;
}

/* Hide the old staggered particle puffs completely. */
.smoke-emitter .smoke-puff{
  display:none !important;
}

/* Main thick smoke body.
   Multiple radial gradients are baked into ONE moving plume. */
.smoke-emitter::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:20%;
  width:92%;
  height:66%;
  transform:translate3d(-50%,0,0) scale(.72);
  transform-origin:50% 78%;
  opacity:0;
  border-radius:48% 52% 44% 56% / 58% 44% 56% 42%;
  background:
    radial-gradient(ellipse at 50% 78%,
      rgba(226,228,225,.52) 0%,
      rgba(190,193,190,.38) 22%,
      rgba(148,152,149,.22) 42%,
      transparent 63%),
    radial-gradient(ellipse at 37% 57%,
      rgba(215,218,214,.42) 0%,
      rgba(160,164,160,.24) 34%,
      transparent 61%),
    radial-gradient(ellipse at 65% 46%,
      rgba(206,209,205,.38) 0%,
      rgba(148,152,149,.20) 36%,
      transparent 63%),
    radial-gradient(ellipse at 48% 28%,
      rgba(191,195,191,.28) 0%,
      rgba(135,139,136,.13) 42%,
      transparent 68%);
  filter:blur(11px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:v10SmokeColumn 4.6s cubic-bezier(.18,.58,.22,1) 1.08s forwards;
}

/* Softer outer haze moves at the same time, making the plume feel thick
   without creating separate puffs. */
.smoke-emitter::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:22%;
  width:110%;
  height:72%;
  transform:translate3d(-50%,0,0) scale(.68);
  transform-origin:50% 80%;
  opacity:0;
  border-radius:50%;
  background:
    radial-gradient(ellipse at 50% 72%,
      rgba(205,208,205,.22) 0%,
      rgba(155,159,156,.14) 34%,
      rgba(110,114,111,.07) 56%,
      transparent 74%);
  filter:blur(18px);
  mix-blend-mode:screen;
  will-change:transform,opacity;
  backface-visibility:hidden;
  animation:v10SmokeHaze 4.9s cubic-bezier(.18,.58,.22,1) 1.08s forwards;
}

/* A little asymmetry keeps it natural, but both clouds still rise as one event. */
.smoke-left::before{
  --drift-mid:-16px;
  --drift-end:-34px;
}
.smoke-right::before{
  --drift-mid:14px;
  --drift-end:32px;
}
.smoke-left::after{
  --drift-mid:-11px;
  --drift-end:-27px;
}
.smoke-right::after{
  --drift-mid:10px;
  --drift-end:25px;
}

@keyframes v10SmokeColumn{
  0%{
    opacity:0;
    transform:translate3d(-50%,4px,0) scale(.72);
  }
  /* Smoke appears as one mass immediately after the flash. */
  9%{
    opacity:.58;
    transform:translate3d(-50%,-8px,0) scale(.86);
  }
  28%{
    opacity:.54;
    transform:translate3d(calc(-50% + var(--drift-mid)),-78px,0) scale(1.08);
  }
  55%{
    opacity:.36;
    transform:translate3d(calc(-50% + var(--drift-mid)),-168px,0) scale(1.42);
  }
  78%{
    opacity:.17;
    transform:translate3d(calc(-50% + var(--drift-end)),-250px,0) scale(1.76);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-330px,0) scale(2.05);
  }
}

@keyframes v10SmokeHaze{
  0%{
    opacity:0;
    transform:translate3d(-50%,10px,0) scale(.68);
  }
  12%{
    opacity:.32;
    transform:translate3d(-50%,-2px,0) scale(.88);
  }
  34%{
    opacity:.28;
    transform:translate3d(calc(-50% + var(--drift-mid)),-92px,0) scale(1.20);
  }
  62%{
    opacity:.18;
    transform:translate3d(calc(-50% + var(--drift-mid)),-188px,0) scale(1.56);
  }
  84%{
    opacity:.08;
    transform:translate3d(calc(-50% + var(--drift-end)),-276px,0) scale(1.90);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-344px,0) scale(2.12);
  }
}

/* Slightly tighter on small screens, still one continuous plume. */
@media(max-width:640px){
  .smoke-emitter{
    top:26%;
    width:24%;
    height:66%;
  }
  .smoke-emitter::before{filter:blur(8px)}
  .smoke-emitter::after{filter:blur(13px)}
}


/* ==========================================================
   V11 SMOKE — SMOOTHER MOTION
   Same V10 concept, just softened:
   - gentler appearance after the flash
   - slower acceleration
   - smoother rise
   - softer fade
   ========================================================== */

.smoke-emitter::before{
  animation:v11SmokeColumn 5.25s cubic-bezier(.22,.48,.20,1) 1.10s forwards !important;
}

.smoke-emitter::after{
  animation:v11SmokeHaze 5.55s cubic-bezier(.22,.48,.20,1) 1.10s forwards !important;
}

/* Main plume: no sudden pop-in, more continuous rise. */
@keyframes v11SmokeColumn{
  0%{
    opacity:0;
    transform:translate3d(-50%,6px,0) scale(.74);
  }
  8%{
    opacity:.18;
    transform:translate3d(-50%,0,0) scale(.80);
  }
  18%{
    opacity:.46;
    transform:translate3d(-50%,-22px,0) scale(.92);
  }
  36%{
    opacity:.50;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .45)),-92px,0) scale(1.14);
  }
  58%{
    opacity:.34;
    transform:translate3d(calc(-50% + var(--drift-mid)),-176px,0) scale(1.43);
  }
  78%{
    opacity:.18;
    transform:translate3d(calc(-50% + (var(--drift-end) * .82)),-252px,0) scale(1.72);
  }
  92%{
    opacity:.06;
    transform:translate3d(calc(-50% + var(--drift-end)),-306px,0) scale(1.94);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-338px,0) scale(2.06);
  }
}

/* Outer haze trails the main plume slightly for a softer, more natural fade. */
@keyframes v11SmokeHaze{
  0%{
    opacity:0;
    transform:translate3d(-50%,10px,0) scale(.70);
  }
  10%{
    opacity:.10;
    transform:translate3d(-50%,4px,0) scale(.77);
  }
  22%{
    opacity:.28;
    transform:translate3d(-50%,-28px,0) scale(.94);
  }
  40%{
    opacity:.30;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .42)),-106px,0) scale(1.20);
  }
  62%{
    opacity:.20;
    transform:translate3d(calc(-50% + var(--drift-mid)),-194px,0) scale(1.52);
  }
  82%{
    opacity:.10;
    transform:translate3d(calc(-50% + (var(--drift-end) * .80)),-270px,0) scale(1.80);
  }
  94%{
    opacity:.03;
    transform:translate3d(calc(-50% + var(--drift-end)),-320px,0) scale(2.00);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-348px,0) scale(2.10);
  }
}

/* Slightly soften the cloud edges. */
@media(min-width:641px){
  .smoke-emitter::before{filter:blur(13px)}
  .smoke-emitter::after{filter:blur(21px)}
}


/* ==========================================================
   V12 SMOKE — ULTRA SMOOTH
   Same concept, but optimized for Safari:
   - only two continuous smoke layers per bore
   - no blend mode
   - fixed blur (never animated)
   - longer travel and softer fade
   - mostly constant upward velocity
   ========================================================== */

.smoke-emitter{
  contain:paint;
  isolation:isolate;
}

.smoke-emitter::before,
.smoke-emitter::after{
  mix-blend-mode:normal !important;
  backface-visibility:hidden;
  transform-style:preserve-3d;
}

/* Dense inner plume */
.smoke-emitter::before{
  opacity:0;
  filter:blur(12px) !important;
  animation:v12InnerSmoke 6.2s linear 1.08s forwards !important;
}

/* Wide trailing veil */
.smoke-emitter::after{
  opacity:0;
  filter:blur(18px) !important;
  animation:v12OuterSmoke 6.5s linear 1.08s forwards !important;
}

@keyframes v12InnerSmoke{
  0%{
    opacity:0;
    transform:translate3d(-50%,8px,0) scale(.74);
  }
  7%{
    opacity:.12;
    transform:translate3d(-50%,-6px,0) scale(.80);
  }
  16%{
    opacity:.34;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .12)),-34px,0) scale(.91);
  }
  28%{
    opacity:.42;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .30)),-78px,0) scale(1.06);
  }
  42%{
    opacity:.38;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .52)),-130px,0) scale(1.23);
  }
  58%{
    opacity:.29;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .72)),-190px,0) scale(1.43);
  }
  72%{
    opacity:.19;
    transform:translate3d(calc(-50% + (var(--drift-end) * .78)),-244px,0) scale(1.62);
  }
  84%{
    opacity:.11;
    transform:translate3d(calc(-50% + (var(--drift-end) * .90)),-292px,0) scale(1.79);
  }
  93%{
    opacity:.045;
    transform:translate3d(calc(-50% + var(--drift-end)),-330px,0) scale(1.92);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-360px,0) scale(2.02);
  }
}

@keyframes v12OuterSmoke{
  0%{
    opacity:0;
    transform:translate3d(-50%,12px,0) scale(.70);
  }
  10%{
    opacity:.08;
    transform:translate3d(-50%,-2px,0) scale(.80);
  }
  20%{
    opacity:.20;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .10)),-40px,0) scale(.94);
  }
  34%{
    opacity:.26;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .28)),-92px,0) scale(1.12);
  }
  50%{
    opacity:.22;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .52)),-154px,0) scale(1.34);
  }
  66%{
    opacity:.16;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .70)),-216px,0) scale(1.55);
  }
  80%{
    opacity:.10;
    transform:translate3d(calc(-50% + (var(--drift-end) * .80)),-274px,0) scale(1.74);
  }
  92%{
    opacity:.035;
    transform:translate3d(calc(-50% + var(--drift-end)),-326px,0) scale(1.91);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-358px,0) scale(2.02);
  }
}

/* A touch less opacity on mobile makes the effect cleaner and easier on Safari GPU. */
@media(max-width:640px){
  .smoke-emitter::before{filter:blur(9px) !important}
  .smoke-emitter::after{filter:blur(14px) !important}
}


/* ==========================================================
   V13 SMOKE EDGE FIX
   Fixes the straight/clean cutoff line at the end of the plume.
   ========================================================== */

/* V12 used contain:paint for Safari performance, but that can create
   a hard rectangular clipping edge as the smoke leaves the emitter.
   Let the smoke render beyond the emitter instead. */
.smoke-emitter{
  contain:none !important;
  overflow:visible !important;
}

/* Feather the smoke itself so even at the end of the animation there is
   no visible rectangular edge. */
.smoke-emitter::before,
.smoke-emitter::after{
  -webkit-mask-image:
    radial-gradient(ellipse at 50% 62%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.98) 48%,
      rgba(0,0,0,.72) 67%,
      rgba(0,0,0,.32) 82%,
      rgba(0,0,0,0) 100%);
  mask-image:
    radial-gradient(ellipse at 50% 62%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.98) 48%,
      rgba(0,0,0,.72) 67%,
      rgba(0,0,0,.32) 82%,
      rgba(0,0,0,0) 100%);
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;
  mask-size:100% 100%;
}

/* Slightly extend the final fade so opacity reaches zero before the cloud
   visually leaves its natural feathered area. */
.smoke-emitter::before{
  animation:v13InnerSmoke 6.35s linear 1.08s forwards !important;
}
.smoke-emitter::after{
  animation:v13OuterSmoke 6.65s linear 1.08s forwards !important;
}

@keyframes v13InnerSmoke{
  0%{
    opacity:0;
    transform:translate3d(-50%,8px,0) scale(.74);
  }
  7%{
    opacity:.12;
    transform:translate3d(-50%,-6px,0) scale(.80);
  }
  16%{
    opacity:.34;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .12)),-34px,0) scale(.91);
  }
  28%{
    opacity:.42;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .30)),-78px,0) scale(1.06);
  }
  42%{
    opacity:.38;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .52)),-130px,0) scale(1.23);
  }
  58%{
    opacity:.29;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .72)),-190px,0) scale(1.43);
  }
  72%{
    opacity:.18;
    transform:translate3d(calc(-50% + (var(--drift-end) * .78)),-244px,0) scale(1.62);
  }
  84%{
    opacity:.09;
    transform:translate3d(calc(-50% + (var(--drift-end) * .90)),-292px,0) scale(1.79);
  }
  91%{
    opacity:.035;
    transform:translate3d(calc(-50% + var(--drift-end)),-318px,0) scale(1.90);
  }
  96%{
    opacity:.010;
    transform:translate3d(calc(-50% + var(--drift-end)),-338px,0) scale(1.98);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-350px,0) scale(2.02);
  }
}

@keyframes v13OuterSmoke{
  0%{
    opacity:0;
    transform:translate3d(-50%,12px,0) scale(.70);
  }
  10%{
    opacity:.08;
    transform:translate3d(-50%,-2px,0) scale(.80);
  }
  20%{
    opacity:.20;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .10)),-40px,0) scale(.94);
  }
  34%{
    opacity:.26;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .28)),-92px,0) scale(1.12);
  }
  50%{
    opacity:.22;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .52)),-154px,0) scale(1.34);
  }
  66%{
    opacity:.15;
    transform:translate3d(calc(-50% + (var(--drift-mid) * .70)),-216px,0) scale(1.55);
  }
  80%{
    opacity:.085;
    transform:translate3d(calc(-50% + (var(--drift-end) * .80)),-274px,0) scale(1.74);
  }
  90%{
    opacity:.030;
    transform:translate3d(calc(-50% + var(--drift-end)),-314px,0) scale(1.88);
  }
  96%{
    opacity:.008;
    transform:translate3d(calc(-50% + var(--drift-end)),-338px,0) scale(1.98);
  }
  100%{
    opacity:0;
    transform:translate3d(calc(-50% + var(--drift-end)),-350px,0) scale(2.02);
  }
}


/* ==========================================================
   V17 — MINIMAL PERSONAL SERVICE
   Built from V13. The hero/flash/logo/smoke above is untouched.
   No illustrated objects, no fake room, no fake case.
   ========================================================== */

.personal-service-minimal{
  position:relative;
  min-height:520px;
  padding:120px 6vw 115px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  background:
    radial-gradient(circle at 50% 120%,rgba(94,66,42,.10),transparent 42%),
    linear-gradient(180deg,#0d0e0e 0%,#111110 52%,#0c0d0d 100%);
}

.personal-service-minimal::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-4;
  pointer-events:none;
  opacity:.26;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.009) 0 1px,
      transparent 1px 4px
    );
}

.personal-service-minimal::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(154,116,69,.18) 20%,
    rgba(255,255,255,.06) 50%,
    rgba(154,116,69,.18) 80%,
    transparent
  );
}

.psm-inner{
  position:relative;
  z-index:3;
  width:min(980px,100%);
  text-align:center;
}

.psm-k,
.psm-line,
.psm-inner h1,
.psm-tagline{
  opacity:0;
}

.psm-k{
  margin:0;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(180,157,128,.72);
  transform:translateY(8px);
}

.psm-line{
  width:0;
  height:1px;
  margin:22px auto 28px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(154,116,69,.52) 20%,
    rgba(200,177,145,.68) 50%,
    rgba(154,116,69,.52) 80%,
    transparent 100%
  );
}

.psm-inner h1{
  position:relative;
  display:inline-block;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(3.6rem,8vw,7.4rem);
  line-height:.94;
  font-weight:400;
  letter-spacing:-.035em;
  color:#ece8e0;
  transform:translateY(20px);
  text-shadow:0 8px 34px rgba(0,0,0,.28);
}

.psm-tagline{
  margin:24px 0 0;
  font-family:var(--serif);
  font-size:clamp(1.25rem,2.35vw,2rem);
  line-height:1.25;
  font-style:italic;
  letter-spacing:.012em;
  color:#aaa198;
  transform:translateY(14px);
}

.psm-light{
  position:absolute;
  z-index:-2;
  width:min(920px,85vw);
  height:360px;
  left:50%;
  top:50%;
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-48%) scale(.78);
  filter:blur(34px);
  background:radial-gradient(
    ellipse,
    rgba(194,149,94,.13) 0%,
    rgba(124,83,46,.055) 42%,
    transparent 72%
  );
}

.psm-sheen{
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:-32%;
  width:24%;
  opacity:0;
  transform:skewX(-18deg);
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.018),
    rgba(218,191,155,.08),
    rgba(255,255,255,.02),
    transparent
  );
  filter:blur(3px);
}

/* One restrained scroll-triggered sequence */
.personal-service-minimal.psm-active .psm-light{
  animation:psmLight 1.9s cubic-bezier(.18,.65,.22,1) .10s forwards;
}

.personal-service-minimal.psm-active .psm-k{
  animation:psmFadeUp .72s ease .42s forwards;
}

.personal-service-minimal.psm-active .psm-line{
  animation:psmLine 1.15s cubic-bezier(.22,.72,.2,1) .58s forwards;
}

.personal-service-minimal.psm-active h1{
  animation:psmFadeUp .92s cubic-bezier(.2,.72,.22,1) .78s forwards;
}

.personal-service-minimal.psm-active .psm-tagline{
  animation:psmFadeUp .86s ease 1.08s forwards;
}

.personal-service-minimal.psm-active .psm-sheen{
  animation:psmSheen 1.55s ease 1.72s forwards;
}

@keyframes psmLight{
  0%{
    opacity:0;
    transform:translate(-50%,-48%) scale(.78);
  }
  45%{opacity:.60}
  100%{
    opacity:1;
    transform:translate(-50%,-48%) scale(1);
  }
}

@keyframes psmFadeUp{
  from{
    opacity:0;
    transform:translateY(18px);
    filter:blur(3px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes psmLine{
  0%{
    opacity:0;
    width:0;
  }
  28%{opacity:.62}
  100%{
    opacity:1;
    width:min(330px,58vw);
  }
}

@keyframes psmSheen{
  0%{
    left:-32%;
    opacity:0;
  }
  18%{opacity:.55}
  70%{opacity:.28}
  100%{
    left:116%;
    opacity:0;
  }
}

@media(max-width:640px){
  .personal-service-minimal{
    min-height:430px;
    padding:92px 7vw 90px;
  }

  .psm-k{
    font-size:.66rem;
  }

  .psm-line{
    margin-top:18px;
    margin-bottom:24px;
  }

  .psm-inner h1{
    font-size:clamp(3.2rem,16vw,5rem);
  }

  .psm-tagline{
    margin-top:20px;
    font-size:1.26rem;
  }

  .psm-light{
    width:110vw;
    height:300px;
  }
}

@media(prefers-reduced-motion:reduce){
  .personal-service-minimal .psm-k,
  .personal-service-minimal .psm-line,
  .personal-service-minimal h1,
  .personal-service-minimal .psm-tagline,
  .personal-service-minimal .psm-light{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  .personal-service-minimal .psm-line{
    width:min(330px,58vw) !important;
  }

  .personal-service-minimal .psm-sheen{
    display:none !important;
  }
}


/* ==========================================================
   V18 — TWO SUBTLE SHOTGUN SHELLS
   Adds only two shell drops to the approved V17 block.
   Hero and all prior page animation remain untouched.
   ========================================================== */

.psm-shell-stage{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.psm-shell{
  position:absolute;
  top:-70px;
  width:18px;
  height:58px;
  border-radius:7px 7px 4px 4px;
  opacity:0;
  transform-origin:50% 50%;
  background:
    linear-gradient(90deg,
      #101111 0%,
      #262322 18%,
      #3a2f29 42%,
      #1d1c1c 72%,
      #0d0e0e 100%);
  border:1px solid rgba(255,255,255,.055);
  box-shadow:
    inset 2px 0 4px rgba(255,255,255,.025),
    inset -3px 0 6px rgba(0,0,0,.28),
    0 10px 14px rgba(0,0,0,.18);
}

.psm-shell::before{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height:15px;
  border-radius:2px 2px 4px 4px;
  background:
    linear-gradient(90deg,
      #5c4328 0%,
      #a47c4c 18%,
      #c7a26d 42%,
      #8a653c 67%,
      #49341f 100%);
  border-top:1px solid rgba(240,208,159,.18);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.08),
    0 2px 5px rgba(0,0,0,.28);
}

.psm-shell::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:3px;
  width:6px;
  height:6px;
  transform:translateX(-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at 42% 35%,#b9905e 0 28%,#684b2f 54%,#2f2318 100%);
  box-shadow:inset 0 0 1px rgba(255,255,255,.20);
}

.psm-shell i{
  position:absolute;
  left:3px;
  right:3px;
  top:4px;
  height:8px;
  border-radius:5px 5px 3px 3px;
  background:linear-gradient(180deg,#1b1b1b,#0c0d0d);
  opacity:.65;
}

.psm-shell-one{
  left:69%;
}

.psm-shell-two{
  left:74%;
}

/* The shells arrive after the text, then settle and remain nearly in shadow. */
.personal-service-minimal.psm-active .psm-shell-one{
  animation:psmShellOne 1.58s cubic-bezier(.22,.64,.26,1) 1.68s forwards;
}

.personal-service-minimal.psm-active .psm-shell-two{
  animation:psmShellTwo 1.66s cubic-bezier(.22,.64,.26,1) 1.86s forwards;
}

@keyframes psmShellOne{
  0%{
    opacity:0;
    transform:translate3d(0,-48px,0) rotate(-18deg);
  }
  8%{opacity:.82}
  63%{
    opacity:.82;
    transform:translate3d(18px,395px,0) rotate(204deg);
  }
  76%{
    opacity:.78;
    transform:translate3d(24px,377px,0) rotate(222deg);
  }
  86%{
    opacity:.72;
    transform:translate3d(28px,389px,0) rotate(232deg);
  }
  100%{
    opacity:.34;
    transform:translate3d(31px,392px,0) rotate(236deg);
  }
}

@keyframes psmShellTwo{
  0%{
    opacity:0;
    transform:translate3d(0,-55px,0) rotate(22deg);
  }
  8%{opacity:.78}
  61%{
    opacity:.80;
    transform:translate3d(-26px,404px,0) rotate(-218deg);
  }
  74%{
    opacity:.76;
    transform:translate3d(-32px,384px,0) rotate(-237deg);
  }
  86%{
    opacity:.68;
    transform:translate3d(-35px,395px,0) rotate(-246deg);
  }
  100%{
    opacity:.30;
    transform:translate3d(-38px,398px,0) rotate(-250deg);
  }
}

/* Keep shells away from the headline on narrower screens. */
@media(max-width:980px){
  .psm-shell-one{left:72%}
  .psm-shell-two{left:80%}
}

@media(max-width:640px){
  .psm-shell{
    width:15px;
    height:48px;
  }

  .psm-shell::before{
    height:13px;
  }

  .psm-shell-one{left:74%}
  .psm-shell-two{left:84%}

  @keyframes psmShellOne{
    0%{opacity:0;transform:translate3d(0,-45px,0) rotate(-18deg)}
    8%{opacity:.76}
    63%{opacity:.76;transform:translate3d(10px,318px,0) rotate(204deg)}
    76%{opacity:.72;transform:translate3d(14px,301px,0) rotate(221deg)}
    86%{opacity:.66;transform:translate3d(16px,311px,0) rotate(231deg)}
    100%{opacity:.28;transform:translate3d(18px,314px,0) rotate(235deg)}
  }

  @keyframes psmShellTwo{
    0%{opacity:0;transform:translate3d(0,-48px,0) rotate(22deg)}
    8%{opacity:.72}
    61%{opacity:.74;transform:translate3d(-14px,325px,0) rotate(-218deg)}
    74%{opacity:.70;transform:translate3d(-18px,307px,0) rotate(-237deg)}
    86%{opacity:.62;transform:translate3d(-20px,316px,0) rotate(-246deg)}
    100%{opacity:.26;transform:translate3d(-22px,319px,0) rotate(-250deg)}
  }
}

@media(prefers-reduced-motion:reduce){
  .psm-shell-stage{display:none !important;}
}


/* ==========================================================
   V19 — PHYSICS SHELL DROP
   V18 shells now use JS physics instead of landing/sticking.
   They can bounce off individual visible letters, then fall off the section.
   Everything else remains unchanged.
   ========================================================== */

.personal-service-minimal.psm-active .psm-shell-one,
.personal-service-minimal.psm-active .psm-shell-two{
  animation:none !important;
}

.psm-shell{
  left:0 !important;
  top:0 !important;
  opacity:0;
  will-change:transform,opacity;
  transform:translate3d(-100px,-100px,0) rotate(0deg);
}

.psm-shell.psm-live{
  opacity:.84;
}

.psm-shell.psm-exit{
  opacity:0;
  transition:opacity .28s ease;
}

/* Character wrappers are visually neutral; they exist only for collision math. */
.psm-hit-char{
  display:inline-block;
  position:relative;
}

/* Preserve normal word spacing when text is wrapped into individual characters. */
.psm-hit-space{
  display:inline-block;
  width:.28em;
}

@media(prefers-reduced-motion:reduce){
  .psm-shell-stage{display:none !important;}
}


/* ==========================================================
   V21 — SIGNATURE REVEAL SERVICES
   Built from V19. Only the Services block is replaced.
   ========================================================== */

.services-signature{
  position:relative;
  padding:118px 6vw 132px;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 6%,rgba(154,116,69,.065),transparent 24%),
    linear-gradient(180deg,#0b0c0c 0%,#0e0f0f 56%,#0b0c0c 100%);
  border-top:1px solid rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.025);
}

.services-signature::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.006) 0 1px,
      transparent 1px 5px
    );
}

.services-signature-inner{
  position:relative;
  z-index:2;
  width:min(1120px,100%);
  margin:0 auto;
}

.services-signature-head{
  position:relative;
  padding-bottom:52px;
}

.services-k{
  margin:0 0 12px;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(180,157,128,.70);
}

.services-word{
  position:relative;
  display:inline-block;
  margin:0;
  font-family:var(--serif);
  font-size:clamp(2.7rem,5.6vw,5.1rem);
  line-height:1;
  font-weight:400;
  letter-spacing:-.025em;
  color:#eae6de;
  opacity:0;
  transform:translateY(10px);
  text-shadow:0 0 0 rgba(194,149,94,0);
}

.services-glow-line{
  position:absolute;
  left:0;
  bottom:27px;
  width:0;
  height:1px;
  opacity:0;
  background:linear-gradient(
    90deg,
    rgba(188,149,99,.78),
    rgba(255,255,255,.34) 48%,
    rgba(188,149,99,.26) 72%,
    transparent
  );
  box-shadow:
    0 0 12px rgba(176,132,79,.20),
    0 0 28px rgba(176,132,79,.08);
}

.services-signature-list{
  border-top:1px solid rgba(154,116,69,.15);
}

.signature-service{
  position:relative;
  display:flex;
  align-items:center;
  min-height:190px;
  text-decoration:none;
  border-bottom:1px solid rgba(154,116,69,.13);
  overflow:hidden;
}

.signature-service::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:1px;
  opacity:.55;
  background:linear-gradient(
    90deg,
    rgba(154,116,69,.23),
    rgba(255,255,255,.04) 54%,
    transparent 88%
  );
}

.signature-service::after{
  content:"";
  position:absolute;
  left:-18%;
  top:50%;
  width:22%;
  height:44%;
  transform:translateY(-50%) skewX(-17deg);
  opacity:0;
  pointer-events:none;
  filter:blur(3px);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.015),
    rgba(204,171,128,.07),
    rgba(255,255,255,.015),
    transparent
  );
}

.signature-service-text{
  display:flex;
  align-items:baseline;
  flex-wrap:nowrap;
  font-family:var(--serif);
  font-size:clamp(3.1rem,7vw,6.9rem);
  line-height:.98;
  letter-spacing:-.045em;
  font-weight:400;
  color:#ece8df;
  text-shadow:0 7px 28px rgba(0,0,0,.24);
}

.svc-char{
  display:inline-block;
  opacity:0;
  clip-path:inset(0 100% 0 0);
  transform:translateY(6px) rotate(-.7deg);
  transform-origin:left bottom;
  filter:blur(.8px);
}

.svc-space{
  display:inline-block;
  width:.28em;
}

.signature-service.ink-active .svc-char{
  animation:svcInkWrite .24s cubic-bezier(.22,.7,.24,1) forwards;
  animation-delay:calc(var(--i) * 55ms);
}

.signature-service.ink-active::after{
  animation:svcNibGlow 1.18s ease .08s forwards;
}

@keyframes svcInkWrite{
  0%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
    transform:translateY(6px) rotate(-.7deg);
    filter:blur(1px);
  }
  45%{
    opacity:.72;
    clip-path:inset(0 40% 0 0);
    transform:translateY(2px) rotate(-.25deg);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
    transform:translateY(0) rotate(0);
    filter:blur(0);
  }
}

@keyframes svcNibGlow{
  0%{
    left:-18%;
    opacity:0;
  }
  18%{opacity:.42}
  72%{opacity:.16}
  100%{
    left:108%;
    opacity:0;
  }
}

.services-signature.services-signature-active .services-word{
  animation:servicesTitleGlow 1.25s cubic-bezier(.2,.68,.2,1) .16s forwards;
}

.services-signature.services-signature-active .services-glow-line{
  animation:servicesLineDraw 1.08s cubic-bezier(.22,.72,.2,1) .42s forwards;
}

@keyframes servicesTitleGlow{
  0%{
    opacity:0;
    transform:translateY(10px);
    text-shadow:0 0 0 rgba(194,149,94,0);
  }
  50%{
    opacity:1;
    text-shadow:
      0 0 12px rgba(194,149,94,.16),
      0 0 34px rgba(194,149,94,.06);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    text-shadow:0 0 0 rgba(194,149,94,0);
  }
}

@keyframes servicesLineDraw{
  0%{
    width:0;
    opacity:0;
  }
  24%{opacity:.75}
  100%{
    width:min(340px,46vw);
    opacity:1;
  }
}

@media(hover:hover) and (pointer:fine){
  .signature-service:hover .signature-service-text{
    color:#f4efe6;
  }
}

@media(max-width:760px){
  .services-signature{
    padding:92px 6vw 102px;
  }

  .services-signature-head{
    padding-bottom:42px;
  }

  .signature-service{
    min-height:138px;
  }

  .signature-service-text{
    font-size:clamp(2.7rem,12vw,4.6rem);
  }
}

@media(max-width:460px){
  .signature-service{
    min-height:124px;
  }

  .signature-service-text{
    font-size:clamp(2.35rem,11vw,3.8rem);
  }

  .svc-space{
    width:.22em;
  }
}

@media(prefers-reduced-motion:reduce){
  .services-word,
  .services-glow-line,
  .svc-char{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
  }

  .services-glow-line{
    width:min(340px,46vw) !important;
  }

  .signature-service::after{
    display:none !important;
  }
}


/* ==========================================================
   V22 — TRANSFER PROCESS / ONE SHOT THROUGH 1→2→3→4
   Built from V21. All blocks above this section are untouched.
   ========================================================== */

.process-shot{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.process-shot .section-heading,
.process-shot .steps,
.process-shot > .btn{
  position:relative;
  z-index:2;
}

.process-shot-layer{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  overflow:hidden;
}

.process-bullet{
  position:absolute;
  left:0;
  top:0;
  width:38px;
  height:11px;
  opacity:0;
  will-change:transform,opacity;
  transform-origin:50% 50%;
  clip-path:polygon(0 8%,72% 8%,100% 50%,72% 92%,0 92%);
  border-radius:5px 0 0 5px;
  background:
    linear-gradient(
      180deg,
      #d0aa70 0%,
      #8a6134 20%,
      #c99a5a 43%,
      #6d4928 68%,
      #bc8b50 100%
    );
  box-shadow:
    0 1px 0 rgba(255,255,255,.22),
    0 4px 8px rgba(0,0,0,.30);
}

.process-bullet::before{
  content:"";
  position:absolute;
  left:0;
  top:1px;
  width:9px;
  height:9px;
  border-radius:4px 0 0 4px;
  background:linear-gradient(180deg,#716d66,#343532 58%,#5f5b55);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.10);
}

.process-bullet::after{
  content:"";
  position:absolute;
  right:88%;
  top:50%;
  width:58px;
  height:7px;
  transform:translateY(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    rgba(198,159,106,.025) 22%,
    rgba(222,188,141,.16) 100%
  );
  filter:blur(4px);
  opacity:.72;
}

.process-bullet.is-live{
  opacity:1;
}

.process-bullet.is-gone{
  opacity:0;
  transition:opacity .13s ease;
}

.step-number-target{
  position:relative;
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 20px;
}

.step-number-target > b,
.step-number-ghost{
  position:absolute;
  inset:5px;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin:0;
  border-radius:50%;
  font-family:var(--serif);
  font-weight:400;
  font-size:1rem;
}

.step-number-target > b{
  z-index:2;
  border:1px solid var(--brass);
  color:var(--text);
  background:#111212;
  box-shadow:0 0 0 rgba(154,116,69,0);
  will-change:transform,opacity,filter;
}

.step-number-ghost{
  z-index:1;
  color:rgba(181,150,112,.18);
  border:1px solid rgba(154,116,69,.16);
  opacity:0;
  transform:scale(.92);
  transition:
    opacity .5s ease .10s,
    transform .55s ease .10s;
}

/* Override original direct .step b spacing now that it sits in a target wrapper. */
.process-shot .step b{
  margin:0;
}

.step-number-target.is-hit .step-number-ghost{
  opacity:1;
  transform:scale(1);
}

.step-number-target.is-hit > b{
  animation:processNumberKnock .72s cubic-bezier(.18,.62,.22,1) forwards;
}

.step:nth-child(1) .step-number-target.is-hit > b{
  --knock-x:-32px;
  --knock-y:-46px;
  --knock-r:-24deg;
}

.step:nth-child(2) .step-number-target.is-hit > b{
  --knock-x:24px;
  --knock-y:-52px;
  --knock-r:31deg;
}

.step:nth-child(3) .step-number-target.is-hit > b{
  --knock-x:-22px;
  --knock-y:-48px;
  --knock-r:-34deg;
}

.step:nth-child(4) .step-number-target.is-hit > b{
  --knock-x:34px;
  --knock-y:-44px;
  --knock-r:27deg;
}

@keyframes processNumberKnock{
  0%{
    opacity:1;
    transform:translate3d(0,0,0) rotate(0) scale(1);
    filter:blur(0);
    box-shadow:0 0 0 rgba(154,116,69,0);
  }
  10%{
    transform:translate3d(4px,0,0) rotate(2deg) scale(.96);
    box-shadow:0 0 18px rgba(185,139,80,.18);
  }
  38%{
    opacity:.92;
    transform:
      translate3d(
        calc(var(--knock-x) * .38),
        calc(var(--knock-y) * .48),
        0
      )
      rotate(calc(var(--knock-r) * .48))
      scale(.93);
  }
  100%{
    opacity:0;
    transform:
      translate3d(var(--knock-x),var(--knock-y),0)
      rotate(var(--knock-r))
      scale(.78);
    filter:blur(1.4px);
    box-shadow:0 0 0 rgba(154,116,69,0);
  }
}

.process-impact{
  position:absolute;
  z-index:5;
  width:12px;
  height:12px;
  margin:-6px 0 0 -6px;
  border-radius:50%;
  pointer-events:none;
  background:radial-gradient(
    circle,
    rgba(255,238,205,.95) 0 10%,
    rgba(213,164,100,.72) 18%,
    rgba(154,116,69,.20) 48%,
    transparent 72%
  );
  box-shadow:
    0 0 10px rgba(214,169,108,.32),
    0 0 24px rgba(154,116,69,.14);
  animation:processImpactFlash .34s ease-out forwards;
}

.process-impact::before,
.process-impact::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:1px;
  transform-origin:0 50%;
  background:linear-gradient(90deg,rgba(223,185,132,.62),transparent);
  opacity:.64;
}

.process-impact::before{
  transform:rotate(31deg);
}

.process-impact::after{
  transform:rotate(-37deg);
}

@keyframes processImpactFlash{
  0%{
    opacity:0;
    transform:scale(.35);
  }
  28%{
    opacity:1;
    transform:scale(1);
  }
  100%{
    opacity:0;
    transform:scale(2.1);
  }
}

@media(max-width:640px){
  .process-bullet{
    width:32px;
    height:10px;
  }

  .process-bullet::after{
    width:42px;
  }
}

@media(prefers-reduced-motion:reduce){
  .process-shot-layer{
    display:none !important;
  }

  .step-number-ghost{
    display:none !important;
  }

  .step-number-target > b{
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
}


/* ==========================================================
   V23 — TRANSFER NUMBERS FALL AWAY
   Override V22's short knock animation. The numbered circles now
   get kicked loose and fall completely out of the Transfer section.
   ========================================================== */

.process-shot .step-number-target.is-hit > b{
  animation:none !important;
  will-change:transform,opacity,filter;
}

/* JS adds this while gravity is carrying the number off-screen. */
.process-shot .step-number-target > b.is-falling{
  z-index:6;
  pointer-events:none;
}


/* ==========================================================
   V24 — BY APPOINTMENT / YOUR TIME. RESERVED.
   Built from V23. Everything above this block remains untouched.
   Pure CSS clock — no image assets.
   ========================================================== */

.appointment-reserved{
  position:relative;
  min-height:620px;
  padding:118px 6vw 122px;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  background:
    radial-gradient(circle at 74% 46%,rgba(154,116,69,.055),transparent 33%),
    linear-gradient(180deg,#0c0d0d 0%,#10100f 52%,#0b0c0c 100%);
  border-top:1px solid rgba(255,255,255,.025);
  border-bottom:1px solid rgba(255,255,255,.025);
}

.appointment-reserved::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-3;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.006) 0 1px,
      transparent 1px 5px
    );
}

.appointment-reserved-inner{
  position:relative;
  z-index:4;
  width:min(1120px,100%);
  margin:0 auto;
  text-align:left;
}

.appointment-k{
  margin:0 0 16px;
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(180,157,128,.70);
}

.appointment-label{
  margin:0 0 26px;
  opacity:0;
  transform:translateY(10px);
}

.appointment-reserved h2{
  margin:0;
  max-width:760px;
  font-family:var(--serif);
  font-size:clamp(4rem,8.6vw,8rem);
  line-height:.88;
  font-weight:400;
  letter-spacing:-.045em;
  color:#ece8df;
  opacity:0;
  transform:translateY(22px);
  text-shadow:0 10px 34px rgba(0,0,0,.30);
}

.appointment-cta{
  margin-top:42px;
  opacity:0;
  transform:translateY(12px);
}

/* Oversized, faint clock integrated into the background. */
.appointment-clock{
  position:absolute;
  z-index:1;
  width:min(760px,64vw);
  aspect-ratio:1/1;
  right:-7%;
  top:50%;
  transform:translateY(-50%);
  opacity:.10;
  pointer-events:none;
}

.clock-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  border:1px solid rgba(194,164,126,.40);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.018),transparent 58%),
    repeating-conic-gradient(
      from -90deg,
      rgba(205,176,139,.62) 0deg .55deg,
      transparent .55deg 6deg
    );
  -webkit-mask:
    radial-gradient(circle at center,
      transparent 0 76%,
      #000 76.3% 77.6%,
      transparent 77.9% 88.8%,
      #000 89.1% 90.8%,
      transparent 91.2% 100%);
  mask:
    radial-gradient(circle at center,
      transparent 0 76%,
      #000 76.3% 77.6%,
      transparent 77.9% 88.8%,
      #000 89.1% 90.8%,
      transparent 91.2% 100%);
  box-shadow:
    0 0 50px rgba(154,116,69,.05),
    inset 0 0 80px rgba(255,255,255,.008);
}

.clock-ring{
  position:absolute;
  inset:12.5%;
  border-radius:50%;
  border:1px solid rgba(201,173,137,.12);
}

.clock-center{
  position:absolute;
  left:50%;
  top:50%;
  width:11px;
  height:11px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:rgba(190,155,110,.72);
  box-shadow:0 0 12px rgba(154,116,69,.18);
}

.clock-hand{
  position:absolute;
  left:50%;
  bottom:50%;
  transform-origin:50% 100%;
  border-radius:999px;
}

.clock-hour{
  width:4px;
  height:24%;
  margin-left:-2px;
  background:linear-gradient(180deg,rgba(215,195,168,.65),rgba(137,107,72,.45));
  transform:rotate(-32deg);
}

.clock-minute{
  width:2px;
  height:34%;
  margin-left:-1px;
  background:linear-gradient(180deg,rgba(225,210,190,.72),rgba(146,113,76,.48));
  transform:rotate(62deg);
}

.clock-second{
  width:1px;
  height:39%;
  margin-left:-.5px;
  background:linear-gradient(180deg,rgba(188,145,92,.95),rgba(154,116,69,.55));
  transform:rotate(-92deg);
  box-shadow:0 0 5px rgba(154,116,69,.22);
  opacity:0;
}

/* One-time entrance sequence. */
.appointment-reserved.appointment-active .appointment-label{
  animation:appointmentLabelIn .72s ease .22s forwards;
}

.appointment-reserved.appointment-active h2{
  animation:appointmentTitleIn 1s cubic-bezier(.2,.72,.22,1) .46s forwards;
}

.appointment-reserved.appointment-active .appointment-cta{
  animation:appointmentCtaIn .72s ease 1.18s forwards;
}

.appointment-reserved.appointment-active .appointment-clock{
  animation:appointmentClockWake 1.5s ease .10s forwards;
}

.appointment-reserved.appointment-active .clock-hour{
  animation:appointmentHourSet 1.5s cubic-bezier(.18,.72,.18,1) .34s forwards;
}

.appointment-reserved.appointment-active .clock-minute{
  animation:appointmentMinuteSet 1.5s cubic-bezier(.18,.72,.18,1) .34s forwards;
}

.appointment-reserved.appointment-active .clock-second{
  animation:appointmentSecondSweep 2.1s cubic-bezier(.22,.68,.18,1) .42s forwards;
}

@keyframes appointmentLabelIn{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes appointmentTitleIn{
  0%{
    opacity:0;
    transform:translateY(22px);
    filter:blur(3px);
    text-shadow:0 0 0 rgba(154,116,69,0);
  }
  52%{
    opacity:1;
    filter:blur(0);
    text-shadow:
      0 0 18px rgba(154,116,69,.10),
      0 8px 30px rgba(0,0,0,.28);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
    text-shadow:0 10px 34px rgba(0,0,0,.30);
  }
}

@keyframes appointmentCtaIn{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes appointmentClockWake{
  0%{
    opacity:.02;
    transform:translateY(-50%) scale(.96);
    filter:blur(2px);
  }
  100%{
    opacity:.11;
    transform:translateY(-50%) scale(1);
    filter:blur(0);
  }
}

@keyframes appointmentHourSet{
  0%{transform:rotate(-52deg)}
  100%{transform:rotate(-32deg)}
}

@keyframes appointmentMinuteSet{
  0%{transform:rotate(26deg)}
  100%{transform:rotate(62deg)}
}

@keyframes appointmentSecondSweep{
  0%{
    opacity:0;
    transform:rotate(-92deg);
  }
  8%{opacity:.80}
  82%{opacity:.72}
  100%{
    opacity:0;
    transform:rotate(268deg);
  }
}

@media(max-width:820px){
  .appointment-reserved{
    min-height:560px;
    padding:96px 6vw 104px;
  }

  .appointment-clock{
    width:640px;
    max-width:92vw;
    right:-33%;
    opacity:.07;
  }

  .appointment-reserved h2{
    max-width:82%;
    font-size:clamp(3.6rem,13vw,6.2rem);
  }
}

@media(max-width:560px){
  .appointment-reserved{
    min-height:500px;
    padding:82px 7vw 88px;
  }

  .appointment-reserved h2{
    max-width:100%;
    font-size:clamp(3.3rem,16vw,5.1rem);
  }

  .appointment-clock{
    width:540px;
    max-width:none;
    right:-58%;
    opacity:.065;
  }

  .appointment-cta{
    margin-top:34px;
  }
}

@media(prefers-reduced-motion:reduce){
  .appointment-reserved .appointment-label,
  .appointment-reserved h2,
  .appointment-reserved .appointment-cta{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    animation:none !important;
  }

  .appointment-reserved .appointment-clock{
    opacity:.10 !important;
    transform:translateY(-50%) !important;
    animation:none !important;
    filter:none !important;
  }

  .appointment-reserved .clock-hour{
    transform:rotate(-32deg) !important;
    animation:none !important;
  }

  .appointment-reserved .clock-minute{
    transform:rotate(62deg) !important;
    animation:none !important;
  }

  .appointment-reserved .clock-second{
    display:none !important;
  }
}


/* ==========================================================
   V25 — CLOCK VISIBILITY FIX
   The V24 clock face used a mask on the parent element, which also
   clipped most of the clock hands. This version separates the dial
   markings from the face so the hands remain fully visible.
   Everything else is unchanged.
   ========================================================== */

.appointment-clock{
  opacity:.16;
}

.clock-face{
  /* Remove the parent mask so child hands are no longer clipped. */
  -webkit-mask:none !important;
  mask:none !important;

  border:1px solid rgba(194,164,126,.32);
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.012),transparent 60%);
}

/* Fine minute/tick ring */
.clock-face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(205,176,139,.54) 0deg .55deg,
      transparent .55deg 6deg
    );
  -webkit-mask:
    radial-gradient(circle at center,
      transparent 0 88.4%,
      #000 88.8% 90.8%,
      transparent 91.2% 100%);
  mask:
    radial-gradient(circle at center,
      transparent 0 88.4%,
      #000 88.8% 90.8%,
      transparent 91.2% 100%);
  opacity:.78;
}

/* Slightly stronger hour marks */
.clock-face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(
      from -90deg,
      rgba(219,191,153,.72) 0deg 1deg,
      transparent 1deg 30deg
    );
  -webkit-mask:
    radial-gradient(circle at center,
      transparent 0 82.2%,
      #000 82.7% 85.8%,
      transparent 86.2% 100%);
  mask:
    radial-gradient(circle at center,
      transparent 0 82.2%,
      #000 82.7% 85.8%,
      transparent 86.2% 100%);
  opacity:.68;
}

.clock-ring{
  inset:14%;
  border-color:rgba(201,173,137,.15);
}

.clock-center{
  width:13px;
  height:13px;
  background:rgba(194,158,112,.82);
  box-shadow:
    0 0 10px rgba(154,116,69,.22),
    0 0 22px rgba(154,116,69,.08);
}

.clock-hour{
  width:4px;
  height:24%;
  margin-left:-2px;
  background:linear-gradient(
    180deg,
    rgba(225,207,183,.82),
    rgba(144,111,72,.58)
  );
}

.clock-minute{
  width:2px;
  height:35%;
  margin-left:-1px;
  background:linear-gradient(
    180deg,
    rgba(233,218,198,.88),
    rgba(150,115,75,.60)
  );
}

.clock-second{
  background:linear-gradient(
    180deg,
    rgba(202,154,93,.98),
    rgba(154,116,69,.72)
  );
  box-shadow:0 0 7px rgba(154,116,69,.30);
}

/* Make the wake-up settle to the new visible opacity. */
@keyframes appointmentClockWake{
  0%{
    opacity:.03;
    transform:translateY(-50%) scale(.96);
    filter:blur(2px);
  }
  100%{
    opacity:.16;
    transform:translateY(-50%) scale(1);
    filter:blur(0);
  }
}

@media(max-width:820px){
  .appointment-clock{
    opacity:.12;
  }
}

@media(max-width:560px){
  .appointment-clock{
    opacity:.10;
  }
}

@media(prefers-reduced-motion:reduce){
  .appointment-reserved .appointment-clock{
    opacity:.16 !important;
  }
}


/* ==========================================================
   V26 — CLOCK CENTERING FIX
   Keeps the V25 appointment block, but makes every dial element share
   the exact same center point. Also removes the unrelated circular
   background glow that could read as an off-center second dial.
   ========================================================== */

/* Keep the section atmosphere, but remove the separate circular glow. */
.appointment-reserved{
  background:
    linear-gradient(180deg,#0c0d0d 0%,#10100f 52%,#0b0c0c 100%) !important;
}

/* One mathematical center for the complete dial. */
.appointment-clock{
  aspect-ratio:1 / 1;
}

.clock-face{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:transparent !important;
  box-shadow:0 0 46px rgba(154,116,69,.035) !important;
}

/* Keep all rings concentric with the same center. */
.clock-ring{
  position:absolute;
  inset:14%;
  border-radius:50%;
  border:1px solid rgba(201,173,137,.14);
  transform:none !important;
}

/* Explicit center pivot. */
.clock-center{
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) !important;
  z-index:5;
}

/* Anchor every hand at exactly 50% / 50%.
   Using top + translate is more reliable visually than bottom:50%. */
.clock-hand{
  left:50% !important;
  top:50% !important;
  bottom:auto !important;
  margin-left:0 !important;
  transform-origin:50% 100% !important;
  z-index:4;
}

.clock-hour{
  transform:translate(-50%,-100%) rotate(-32deg);
}

.clock-minute{
  transform:translate(-50%,-100%) rotate(62deg);
}

.clock-second{
  transform:translate(-50%,-100%) rotate(-92deg);
}

/* Rebuild the hand-set animations with the centering translation included,
   so animation can never pull the hands away from the dial center. */
@keyframes appointmentHourSet{
  0%{
    transform:translate(-50%,-100%) rotate(-52deg);
  }
  100%{
    transform:translate(-50%,-100%) rotate(-32deg);
  }
}

@keyframes appointmentMinuteSet{
  0%{
    transform:translate(-50%,-100%) rotate(26deg);
  }
  100%{
    transform:translate(-50%,-100%) rotate(62deg);
  }
}

@keyframes appointmentSecondSweep{
  0%{
    opacity:0;
    transform:translate(-50%,-100%) rotate(-92deg);
  }
  8%{opacity:.80}
  82%{opacity:.72}
  100%{
    opacity:0;
    transform:translate(-50%,-100%) rotate(268deg);
  }
}

@media(prefers-reduced-motion:reduce){
  .appointment-reserved .clock-hour{
    transform:translate(-50%,-100%) rotate(-32deg) !important;
  }

  .appointment-reserved .clock-minute{
    transform:translate(-50%,-100%) rotate(62deg) !important;
  }
}


/* ==========================================================
   V27 — APPOINTMENTS & INQUIRIES
   Built from V26. Everything above Contact remains unchanged.
   ========================================================== */

.contact-refined{
  position:relative;
  grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);
  align-items:center;
  gap:8vw;
  padding-top:118px;
  padding-bottom:122px;
  background:
    radial-gradient(circle at 82% 44%,rgba(154,116,69,.055),transparent 28%),
    linear-gradient(180deg,#0c0d0d 0%,#0f1010 52%,#0b0c0c 100%);
  border-top:1px solid rgba(255,255,255,.025);
}

.contact-refined::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.006) 0 1px,
      transparent 1px 5px
    );
}

.contact-form-refined,
.contact-mark{
  position:relative;
  z-index:2;
}

.contact-form-refined{
  width:min(620px,100%);
  gap:20px;
}

.contact-form-refined label{
  color:rgba(207,202,193,.72);
}

.contact-form-refined input,
.contact-form-refined select,
.contact-form-refined textarea{
  background:rgba(255,255,255,.018);
  border-color:rgba(255,255,255,.10);
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.contact-form-refined input:focus,
.contact-form-refined select:focus,
.contact-form-refined textarea:focus{
  outline:none;
  border-color:rgba(176,132,79,.52);
  background:rgba(255,255,255,.028);
  box-shadow:
    0 0 0 1px rgba(176,132,79,.10),
    0 0 22px rgba(154,116,69,.045);
}

.contact-form-refined .form-note{
  margin-top:-4px;
  max-width:44ch;
  color:rgba(170,165,156,.52);
  font-size:.72rem;
  line-height:1.5;
}

.contact-mark{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-height:420px;
}

.contact-626-logo{
  width:min(190px,42%);
  height:auto;
  margin:0 0 34px;
  opacity:.72;
  filter:
    brightness(.86)
    contrast(1.03);
}

.contact-mark h2{
  margin:0;
  max-width:560px;
  font-family:var(--serif);
  font-size:clamp(3.7rem,7.2vw,7rem);
  line-height:.92;
  font-weight:400;
  letter-spacing:-.04em;
  color:#ece8df;
  text-shadow:0 10px 34px rgba(0,0,0,.28);
}

@media(max-width:980px){
  .contact-refined{
    grid-template-columns:1fr;
    gap:62px;
  }

  .contact-mark{
    order:-1;
    min-height:0;
    padding-bottom:12px;
  }

  .contact-626-logo{
    width:150px;
    max-width:36vw;
    margin-bottom:26px;
  }

  .contact-form-refined{
    width:100%;
    max-width:680px;
  }
}

@media(max-width:640px){
  .contact-refined{
    padding-top:82px;
    padding-bottom:88px;
    gap:48px;
  }

  .contact-mark h2{
    font-size:clamp(3.1rem,15vw,5rem);
  }

  .contact-626-logo{
    width:120px;
    margin-bottom:22px;
  }
}


/* ==========================================================
   V28 — CONTACT LAYOUT + LOGO REVEAL
   Built from V27. Everything above Contact remains untouched.
   ========================================================== */

/* Explicitly keep title/logo LEFT and form RIGHT on desktop. */
.contact-v28{
  grid-template-columns:minmax(360px,.90fr) minmax(0,1fr);
  gap:8vw;
}

.contact-mark-v28{
  order:1;
}

.contact-v28 .contact-form-refined{
  order:2;
  justify-self:end;
}

/* Logo stage gives the mark room to animate without looking boxed-in. */
.contact-logo-stage{
  position:relative;
  width:min(190px,42%);
  margin:0 0 34px;
  overflow:hidden;
  isolation:isolate;
}

.contact-v28 .contact-626-logo{
  display:block;
  width:100%;
  max-width:none;
  margin:0;
  opacity:.045;
  transform:scale(.965);
  filter:
    brightness(.34)
    contrast(1.12)
    blur(1.8px);
  will-change:transform,opacity,filter;
}

.contact-logo-sheen{
  position:absolute;
  top:-20%;
  bottom:-20%;
  left:-45%;
  width:28%;
  opacity:0;
  transform:skewX(-18deg);
  pointer-events:none;
  background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.03),
    rgba(220,188,145,.24),
    rgba(255,255,255,.055),
    transparent
  );
  filter:blur(2px);
  mix-blend-mode:screen;
}

.contact-v28 .contact-mark h2{
  opacity:0;
  transform:translateY(18px);
  filter:blur(2px);
}

.contact-v28 .contact-form-refined{
  opacity:0;
  transform:translateY(20px);
}

/* One-time scroll reveal:
   dim maker's mark -> sharpen/brighten -> one metallic light pass -> headline -> form. */
.contact-v28.contact-v28-active .contact-626-logo{
  animation:contactLogoResolve 1.45s cubic-bezier(.18,.70,.20,1) .12s forwards;
}

.contact-v28.contact-v28-active .contact-logo-sheen{
  animation:contactLogoSheen 1.18s ease 1.02s forwards;
}

.contact-v28.contact-v28-active .contact-mark h2{
  animation:contactHeadingIn .92s cubic-bezier(.20,.72,.22,1) .72s forwards;
}

.contact-v28.contact-v28-active .contact-form-refined{
  animation:contactFormIn .92s cubic-bezier(.20,.72,.22,1) 1.02s forwards;
}

@keyframes contactLogoResolve{
  0%{
    opacity:.045;
    transform:scale(.965);
    filter:
      brightness(.34)
      contrast(1.12)
      blur(1.8px);
  }
  45%{
    opacity:.42;
    transform:scale(.985);
    filter:
      brightness(.68)
      contrast(1.08)
      blur(.45px);
  }
  100%{
    opacity:.76;
    transform:scale(1);
    filter:
      brightness(.88)
      contrast(1.03)
      blur(0);
  }
}

@keyframes contactLogoSheen{
  0%{
    left:-45%;
    opacity:0;
  }
  18%{opacity:.72}
  68%{opacity:.30}
  100%{
    left:122%;
    opacity:0;
  }
}

@keyframes contactHeadingIn{
  from{
    opacity:0;
    transform:translateY(18px);
    filter:blur(2px);
  }
  to{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes contactFormIn{
  from{
    opacity:0;
    transform:translateY(20px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width:980px){
  .contact-v28{
    grid-template-columns:1fr;
  }

  .contact-mark-v28{
    order:1;
  }

  .contact-v28 .contact-form-refined{
    order:2;
    justify-self:start;
  }

  .contact-logo-stage{
    width:150px;
    max-width:36vw;
    margin-bottom:26px;
  }
}

@media(max-width:640px){
  .contact-logo-stage{
    width:120px;
    margin-bottom:22px;
  }
}

@media(prefers-reduced-motion:reduce){
  .contact-v28 .contact-626-logo,
  .contact-v28 .contact-mark h2,
  .contact-v28 .contact-form-refined{
    animation:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }

  .contact-v28 .contact-626-logo{
    opacity:.76 !important;
  }

  .contact-logo-sheen{
    display:none !important;
  }
}


/* ==========================================================
   V29 — REDUNDANT CTA CLEANUP
   Built from V28. All polished animations/blocks remain unchanged.
   ========================================================== */

/* Slightly reduce only the three animated service names. */
.signature-service-text{
  font-size:clamp(2.75rem,6vw,5.9rem);
}

@media(max-width:760px){
  .signature-service-text{
    font-size:clamp(2.4rem,10.5vw,4.05rem);
  }
}

@media(max-width:460px){
  .signature-service-text{
    font-size:clamp(2.15rem,10vw,3.4rem);
  }
}


/* V48 — mobile polish */
@media(max-width:640px){
  body{overflow-x:hidden}
  p,a,button,label,dd,dt{overflow-wrap:anywhere}
  h1,h2,h3{
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .section-heading{gap:12px;margin-bottom:34px}
  .section-heading span{width:36px}
  .section-heading h2{
    max-width:72vw;
    text-align:center;
    line-height:1.35;
    letter-spacing:.12em;
  }
  .step h3{line-height:1.45;letter-spacing:.08em}
  .step p{max-width:34rem;margin-left:auto;margin-right:auto}
}


/* V49 — heading wrapping fix */
@media(max-width:640px){
  .services-signature h2,
  .services-signature .services-title,
  .personal-service h2{
    overflow-wrap:normal!important;
    word-break:normal!important;
    hyphens:none!important;
  }
}


/* V50 — keep Personal Service words intact while preserving shell collisions */
.psm-hit-word{
  display:inline-block;
  white-space:nowrap;
}
.psm-hit-char{
  display:inline;
}
@media(max-width:640px){
  .psm-inner h1{
    max-width:100%;
    font-size:clamp(3.25rem,16vw,5.15rem);
    line-height:.96;
    text-align:center;
  }
}


/* V51 — homepage hero logo mobile fit */
@media(max-width:640px){
  .hero-logo,
  .hero-logo-wrap img,
  .hero-logo img{
    max-width:82vw!important;
    width:auto!important;
    height:auto!important;
    object-fit:contain!important;
  }

  .hero-logo-wrap,
  .hero-logo{
    overflow:visible!important;
    padding-left:12px;
    padding-right:12px;
    box-sizing:border-box;
  }
}


/* V52 — actual homepage hero logo mobile fit
   The live hero uses background/mask layers rather than .hero-logo <img>. */
@media(max-width:640px){
  .hero-background-logo .hero-logo-background,
  .hero-background-logo .hero-logo-light,
  .hero-background-logo .hero-effects{
    width:92vw!important;
    max-width:92vw!important;
    left:50%!important;
    top:43%!important;
    transform:translate(-50%,-50%)!important;
  }

  .hero-background-logo::after{
    width:88vw!important;
  }
}