/* ==========================================================================
   Swarm Protective Services — design system
   Direction: BLACKOUT. Near-black surfaces, one gold accent, hairline
   structure, photography carrying the weight. Saira display / Archivo body.

   Motion policy: every scroll-linked effect runs on a CSS scroll timeline
   (compositor thread, no scroll listeners). JS only provides the
   IntersectionObserver fallback for browsers without scroll timelines.
   ========================================================================== */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root{
  --ink-0:#08090A;
  --ink-1:#0D1011;
  --ink-2:#13171A;
  --ink-3:#1B2124;

  --gold:#B8914E;
  --gold-hi:#D6B274;
  --gold-dim:#7C6134;
  --bone:#E7E4D3;
  --bone-2:#B6B3A6;
  --mute:#8D8C84;

  --rule:rgba(231,228,211,.11);
  --rule-2:rgba(231,228,211,.055);

  --display:'Saira','Saira Fallback',system-ui,sans-serif;
  --body:'Archivo','Archivo Fallback',system-ui,sans-serif;

  --t-xs:.7rem; --t-sm:.82rem;

  --gut:20px;
  --maxw:1240px;
  --sect:76px;
  --topbar:62px;

  --xo:cubic-bezier(.16,1,.3,1);
  --spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,
    .937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 60%,1.006 76.2%,1);
}
@media (min-width:760px){ :root{ --gut:38px; --sect:112px } }
@media (min-width:1180px){ :root{ --gut:56px; --sect:140px } }

/* metric-matched fallbacks — kills the shift when the webfonts swap in */
@font-face{font-family:'Saira Fallback';src:local('Arial Narrow'),local('Arial');
  size-adjust:92%;ascent-override:96%;descent-override:26%;line-gap-override:0%}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica');
  size-adjust:99%;ascent-override:95%;descent-override:25%;line-gap-override:0%}

/* ---------- 2. Base ------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--topbar) + 12px);
  scrollbar-gutter:stable;
  color-scheme:dark;
  interpolate-size:allow-keywords;
}
body{
  margin:0;background:var(--ink-0);color:var(--bone);
  font-family:var(--body);font-size:16.5px;line-height:1.62;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
p{margin:0 0 1.05em;text-wrap:pretty} p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.05em;padding-left:1.15em}
li{margin-bottom:.4em}
hr{border:0;border-top:1px solid var(--rule);margin:0}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:1px}
::selection{background:var(--gold);color:#0A0B0C}

h1,h2,h3,h4{
  font-family:var(--display);margin:0;
  font-variation-settings:"wdth" 112,"wght" 800;
  text-transform:uppercase;line-height:.98;letter-spacing:-.004em;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,11.2vw,6.6rem);line-height:.9;letter-spacing:-.018em}
h2,.h2ish{font-size:clamp(1.95rem,5.6vw,3.4rem);letter-spacing:-.012em}
h3{font-size:clamp(1.12rem,2.3vw,1.42rem);font-variation-settings:"wdth" 110,"wght" 750}
h4{font-size:1rem;font-variation-settings:"wdth" 108,"wght" 700;letter-spacing:.03em}
.h2ish{font-family:var(--display);text-transform:uppercase;line-height:.98;
  font-variation-settings:"wdth" 112,"wght" 800;margin:0 0 30px}

.skip{position:absolute;left:-9999px;top:8px;z-index:99;
  background:var(--gold);color:#0A0B0C;padding:12px 18px;border-radius:2px;
  font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;text-decoration:none}
.skip:focus{left:8px}

/* ---------- 3. Layout ---------------------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut);position:relative;z-index:3}
section{padding-block:var(--sect);position:relative}
.alt{background:var(--ink-1)}

.rail{display:grid;gap:26px}
@media (min-width:900px){
  .rail{grid-template-columns:186px minmax(0,1fr);gap:56px;align-items:start}
  .rail--wide{grid-template-columns:230px minmax(0,1fr)}
}
.rail__label{
  font-family:var(--display);font-size:var(--t-sm);
  font-variation-settings:"wdth" 106,"wght" 650;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold);padding-top:.38em;
}
.rail__label span{
  display:block;margin-top:.7em;font-family:var(--body);font-size:var(--t-sm);
  letter-spacing:0;text-transform:none;color:var(--mute);font-weight:400;line-height:1.5;
}
@media (min-width:900px){ .rail__label{position:sticky;top:calc(var(--topbar) + 28px)} }

.eyebrow{
  font-family:var(--display);font-size:var(--t-sm);
  font-variation-settings:"wdth" 106,"wght" 650;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 16px;
}
.lede{font-size:clamp(1.04rem,2.1vw,1.24rem);line-height:1.55;color:var(--bone-2);max-width:56ch}
.lede strong{color:var(--bone);font-weight:600}
.sub{color:var(--mute);font-size:var(--t-sm);line-height:1.55}
.stack>*+*{margin-top:20px}

.ticks{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:30px;color:var(--bone-2);font-size:.97rem;
  line-height:1.5;margin:0}
.ticks li::before{
  content:"";position:absolute;left:0;top:.45em;width:14px;height:8px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);
}

/* ---------- 4. Masthead -------------------------------------------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:60;
  border-bottom:1px solid transparent;
  transition:background .35s var(--xo),border-color .35s var(--xo);
}
.topbar.is-stuck{background:rgba(8,9,10,.9);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--rule)}
.mast{display:flex;align-items:center;gap:18px;padding:9px var(--gut);min-height:62px}
.mast__logo{flex:0 0 auto;display:block}
.mast__logo img{width:128px}
@media (min-width:1080px){ .mast__logo img{width:164px} }
.mast__nav{display:none}
@media (min-width:1080px){
  .mast__nav{
    display:flex;gap:28px;margin-left:auto;align-items:center;
    font-family:var(--display);font-size:.78rem;
    font-variation-settings:"wdth" 104,"wght" 600;
    letter-spacing:.16em;text-transform:uppercase;
  }
  .mast__nav a{color:var(--bone-2);text-decoration:none;position:relative;
    padding-block:6px;transition:color .18s ease}
  .mast__nav a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--gold);
    transform:scaleX(0);transform-origin:left;transition:transform .28s var(--xo);
  }
  .mast__nav a:hover,.mast__nav a.is-active{color:var(--bone)}
  .mast__nav a:hover::after,.mast__nav a.is-active::after{transform:scaleX(1)}
}
.mast__cta{margin-left:auto;display:flex;gap:10px;align-items:center}
@media (min-width:1080px){ .mast__cta{margin-left:26px} }
.mast__cta .mast__tel,.mast__cta .mast__quote{display:none}
.mast__cta .mast__call{display:inline-flex;min-height:42px;width:42px;padding:0;flex:0 0 auto}
.mast__cta .mast__call svg{width:17px;height:17px;fill:currentColor;display:block}
@media (min-width:700px){
  .mast__cta .mast__tel,.mast__cta .mast__quote{display:inline-flex}
  .mast__cta .mast__call{display:none}
}

/* scroll progress — a gold hairline that fills as you read */
.scrollbar{height:2px;background:transparent;overflow:hidden}
.scrollbar i{display:block;height:100%;width:100%;background:var(--gold);
  transform-origin:0 50%;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference){
    .scrollbar i{animation:progress linear both;animation-timeline:scroll(root block)}
    @keyframes progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

.burger{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:42px;height:42px;flex:0 0 auto;background:transparent;
  border:1px solid var(--rule);cursor:pointer;color:var(--bone);border-radius:2px;
}
@media (min-width:1080px){ .burger{display:none} }
.burger span{display:block;width:18px;height:1.5px;background:currentColor;
  transition:transform .3s var(--xo),opacity .2s}
.burger span+span{margin-top:5px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

.drawer{
  position:fixed;inset:0;z-index:55;background:var(--ink-0);
  padding:calc(var(--topbar) + 20px) var(--gut) 48px;overflow-y:auto;overscroll-behavior:contain;
  opacity:0;translate:0 -10px;display:none;
  transition:opacity .3s var(--xo),translate .35s var(--xo),display .35s allow-discrete;
}
.drawer.is-open{display:block;opacity:1;translate:0 0}
@starting-style{ .drawer.is-open{opacity:0;translate:0 -10px} }
body:has(.drawer.is-open){overflow:hidden}
body:has(.drawer.is-open) .topbar{background:var(--ink-0);border-bottom-color:var(--rule)}
.drawer a{
  display:block;padding:15px 0;border-bottom:1px solid var(--rule);text-decoration:none;
  font-family:var(--display);font-size:1.5rem;font-variation-settings:"wdth" 110,"wght" 750;
  text-transform:uppercase;letter-spacing:.01em;
}
.drawer a small{display:block;font-family:var(--body);font-size:var(--t-sm);font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--mute);margin-top:3px}
.drawer .btn{margin-top:26px;width:100%}

/* ---------- 5. Buttons --------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:12px 26px;border:0;border-radius:2px;cursor:pointer;
  text-decoration:none;text-align:center;line-height:1.25;
  font-family:var(--display);font-size:.92rem;
  font-variation-settings:"wdth" 108,"wght" 720;
  letter-spacing:.075em;text-transform:uppercase;
  background:var(--gold);color:#0A0B0C;position:relative;overflow:hidden;
  transition:color .18s ease,transform .18s var(--spring);
}
.btn::before{content:"";position:absolute;inset:0;background:var(--gold-hi);
  transform:translateY(101%);transition:transform .32s var(--xo)}
.btn>*{position:relative;z-index:1}
.btn:hover::before{transform:translateY(0)}
.btn:active{transform:scale(.985)}
.btn--ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px var(--rule)}
.btn--ghost::before{background:rgba(231,228,211,.08)}
.btn--ghost:hover{color:var(--bone)}
.btn--sm{min-height:40px;padding:8px 16px;font-size:.76rem;letter-spacing:.09em}
.btn--full{width:100%}
.stack>.btn{margin-top:30px;align-self:flex-start}

/* ---------- 7. Hero ------------------------------------------------------ */
.hero{
  position:relative;
  min-height:clamp(640px,100svh,1020px);
  display:flex;align-items:flex-end;
  padding-top:calc(var(--topbar) + 60px);padding-bottom:clamp(60px,9vh,110px);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero__media picture{display:block;position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 36%;
  animation:kenburns 26s ease-in-out infinite alternate}
@media (max-width:760px){ .hero__media img{object-position:50% 22%} }
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(8,9,10,.9) 0%,rgba(8,9,10,.34) 22%,rgba(8,9,10,.58) 56%,rgba(8,9,10,.98) 100%),
    linear-gradient(96deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.9) 30%,rgba(8,9,10,.62) 54%,rgba(8,9,10,.16) 82%),
    radial-gradient(110% 76% at 16% 80%,rgba(8,9,10,.8),transparent 60%);
}
/* the signature moment — the light comes up on the door, once */
.hero__shutter{
  position:absolute;inset:0;z-index:1;background:#07080A;pointer-events:none;
  animation:shutter 1.4s var(--xo) .15s both;
}
.hero__shutter::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-hi) 18%,#FFF6E2 50%,var(--gold-hi) 82%,transparent);
  box-shadow:0 0 26px 5px rgba(214,178,116,.5);
  animation:beam 1.4s var(--xo) .15s both;
}
@keyframes shutter{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes beam{0%{opacity:0}10%{opacity:1}86%{opacity:1}100%{opacity:0}}

.hero__in{position:relative;z-index:3;width:100%}
.hero__kicker{
  font-family:var(--display);font-size:clamp(.78rem,1.8vw,.94rem);
  font-variation-settings:"wdth" 106,"wght" 600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  margin-bottom:clamp(14px,2vw,22px);
}
.hero h1{color:var(--bone);text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero__lede{margin-top:clamp(20px,3vw,30px);max-width:48ch;
  font-size:clamp(1.02rem,2.1vw,1.24rem);color:#CFCCC0;line-height:1.55}
.hero__cta{display:flex;flex-wrap:wrap;gap:11px;margin-top:clamp(26px,3.5vw,38px)}
.hero__cta .btn{flex:1 1 auto;max-width:380px;white-space:normal}
.hero__foot{
  margin-top:clamp(30px,4.5vw,52px);padding-top:20px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:10px 26px;
  font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 550;
}
.hero__foot span{display:inline-flex;align-items:center;gap:8px}
.hero__foot span::before{content:"";width:5px;height:5px;background:var(--gold);flex:0 0 auto}

.hero__scroll{
  position:absolute;left:50%;bottom:18px;translate:-50% 0;z-index:4;
  width:26px;height:42px;border:1px solid var(--rule);border-radius:14px;
  display:none;place-items:start center;padding-top:8px;
}
@media (min-width:900px){ .hero__scroll{display:grid} }
.hero__scroll i{display:block;width:3px;height:7px;border-radius:2px;background:var(--gold);
  animation:scrollcue 1.9s var(--xo) infinite}
@keyframes scrollcue{
  0%{transform:translateY(0);opacity:0}
  25%{opacity:1}
  70%{transform:translateY(16px);opacity:0}
  100%{transform:translateY(16px);opacity:0}
}

/* ---------- 8. Proof + ticker -------------------------------------------- */
.proof{border-block:1px solid var(--rule);background:var(--ink-1);padding-block:0;
  position:relative;z-index:3}
.proof__grid{display:grid;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){ .proof__grid{grid-template-columns:repeat(4,1fr)} }
.proof__cell{padding:26px 20px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule)}
@media (min-width:900px){ .proof__cell{padding:38px 28px;border-bottom:0} }
.proof__cell:last-child{border-right:0}
@media (max-width:899px){
  .proof__cell:nth-child(2n){border-right:0}
  .proof__cell:nth-last-child(-n+2){border-bottom:0}
}
.proof__n{
  display:block;font-family:var(--display);color:var(--gold);
  font-size:clamp(2rem,5vw,2.9rem);line-height:1;
  font-variation-settings:"wdth" 112,"wght" 800;font-variant-numeric:tabular-nums;
}
.proof__l{display:block;margin-top:11px;font-size:var(--t-sm);line-height:1.45;color:var(--mute)}

.ticker{
  position:relative;z-index:3;
  overflow:hidden;border-bottom:1px solid var(--rule);background:var(--ink-0);
  padding-block:15px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.ticker__row{
  display:flex;align-items:center;gap:26px;width:max-content;
  font-family:var(--display);font-size:.82rem;
  font-variation-settings:"wdth" 106,"wght" 650;
  letter-spacing:.18em;text-transform:uppercase;color:var(--bone-2);
  animation:tick 46s linear infinite;
}
.ticker__row b{width:5px;height:5px;background:var(--gold);flex:0 0 auto}
.ticker:hover .ticker__row{animation-play-state:paused}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- 9. Service blocks -------------------------------------------- */
.svc-block .split{align-items:center}
.split{display:grid;gap:36px}
@media (min-width:900px){
  .split{grid-template-columns:1fr 1fr;gap:clamp(48px,6vw,84px)}
  .split--wide{grid-template-columns:1.05fr .95fr}
  .split--flip>*:first-child{order:2}
}
.frame{position:relative;overflow:hidden;background:var(--ink-2);border:1px solid var(--rule);margin:0}
.frame__zoom{display:block;overflow:hidden}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:16/9}
.frame--sq{aspect-ratio:1}
.frame figcaption{
  position:absolute;left:0;bottom:0;right:0;padding:16px 18px;
  background:linear-gradient(180deg,transparent,rgba(8,9,10,.92));
  font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--bone-2);
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 550;
}

.band{position:relative;padding-block:clamp(96px,15vw,200px);
  overflow:hidden;border-block:1px solid var(--rule)}
.band__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.band__media img{width:100%;height:110%;object-fit:cover;object-position:50% 40%}
.band__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(8,9,10,.96) 0%,rgba(8,9,10,.76) 48%,rgba(8,9,10,.52) 100%)}
.band h2{max-width:16ch}

/* ---------- 10. Night timeline ------------------------------------------- */
.night{display:grid;gap:0;margin-top:38px}
.night__row{
  display:grid;grid-template-columns:76px minmax(0,1fr);gap:20px;
  padding:22px 0;border-bottom:1px solid var(--rule-2);position:relative;
}
@media (min-width:760px){ .night__row{grid-template-columns:118px minmax(0,1fr);gap:40px;padding:28px 0} }
.night__row:first-child{border-top:1px solid var(--rule)}
.night__t{
  font-family:var(--display);color:var(--gold);font-size:1.02rem;line-height:1.2;
  font-variation-settings:"wdth" 108,"wght" 700;font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
@media (min-width:760px){ .night__t{font-size:1.24rem} }
.night__b h3{margin-bottom:8px;text-transform:none;letter-spacing:0;font-size:1.04rem;
  font-variation-settings:"wdth" 108,"wght" 700;color:var(--bone)}
.night__b p{margin:0;color:var(--bone-2);font-size:.95rem;line-height:1.6}

/* ---------- 11. Cards / steps / kv --------------------------------------- */
.cards{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:700px){ .cards--2{grid-template-columns:1fr 1fr} }
@media (min-width:900px){ .cards--3{grid-template-columns:repeat(3,1fr)} }
.card{background:var(--ink-1);padding:30px 26px;display:flex;flex-direction:column;gap:12px;
  transition:background .3s var(--xo),transform .3s var(--xo)}
.card:hover{background:var(--ink-2)}
.card h3{font-size:1.04rem}
.card p{color:var(--bone-2);font-size:.94rem;line-height:1.6;margin:0}

.steps{counter-reset:s;display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:38px}
@media (min-width:860px){ .steps{grid-template-columns:repeat(3,1fr)} }
.step{background:var(--ink-1);padding:32px 28px;counter-increment:s;
  transition:background .3s var(--xo)}
.step:hover{background:var(--ink-2)}
.step::before{
  content:counter(s,decimal-leading-zero);display:block;margin-bottom:16px;
  font-family:var(--display);font-size:.8rem;letter-spacing:.14em;color:var(--gold);
  font-variation-settings:"wdth" 104,"wght" 650;
}
.step h3{font-size:1.06rem;margin-bottom:9px}
.step p{color:var(--bone-2);font-size:.94rem;margin:0;line-height:1.6}

.kv{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:700px){ .kv{grid-template-columns:1fr 1fr} }
.kv__row{background:var(--ink-1);padding:19px 24px;display:flex;gap:18px;
  justify-content:space-between;align-items:baseline}
.kv__row dt{font-size:.9rem;color:var(--bone-2)}
.kv__row dd{margin:0;font-family:var(--display);font-size:.95rem;color:var(--gold);
  white-space:nowrap;text-align:right;
  font-variation-settings:"wdth" 106,"wght" 650;font-variant-numeric:tabular-nums}

.areas{display:flex;flex-wrap:wrap;gap:0 4px;list-style:none;margin:0;padding:0}
.areas li{font-size:.9rem;color:var(--bone-2);padding:4px 0;margin:0}
.areas li::after{content:"/";margin-inline:9px;color:var(--gold-dim)}
.areas li:last-child::after{content:""}

.note{border:1px solid var(--gold-dim);background:rgba(184,145,78,.06);padding:24px 26px;
  font-size:.96rem;line-height:1.65;color:var(--bone-2)}
.note b{color:var(--gold-hi);font-weight:600}

/* ---------- 12. FAQ ------------------------------------------------------ */
.faq{border-top:1px solid var(--rule);margin-top:34px}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:22px 46px 22px 0;position:relative;
  font-family:var(--display);font-size:1.02rem;
  font-variation-settings:"wdth" 108,"wght" 700;
  text-transform:none;letter-spacing:0;color:var(--bone);transition:color .2s ease;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gold-hi)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:13px;margin-top:-6px;
  background:linear-gradient(var(--gold),var(--gold)) center/13px 1.5px no-repeat,
             linear-gradient(var(--gold),var(--gold)) center/1.5px 13px no-repeat;
  transition:rotate .34s var(--xo);
}
.faq details[open] summary::after{rotate:135deg}
.faq__a{padding-bottom:24px;color:var(--bone-2);max-width:72ch;font-size:.96rem;line-height:1.65}
.faq__a p{margin-bottom:.8em}

/* ---------- 13. Forms ---------------------------------------------------- */
.form{display:grid;gap:16px}
@media (min-width:700px){ .form{grid-template-columns:1fr 1fr;gap:18px} }
.form .f--full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:7px}
.f label{font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);font-variation-settings:"wdth" 104,"wght" 600}
.f input,.f select,.f textarea{
  font-family:var(--body);font-size:16px;color:var(--bone);
  background:var(--ink-2);border:1px solid var(--rule);border-radius:2px;
  padding:14px 15px;min-height:52px;width:100%;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.f textarea{min-height:104px;resize:vertical;line-height:1.55}
.f input[type="date"]::-webkit-calendar-picker-indicator{
  filter:invert(72%) sepia(29%) saturate(560%) hue-rotate(2deg) brightness(92%);cursor:pointer}
.f input:hover,.f select:hover,.f textarea:hover{border-color:rgba(231,228,211,.2)}
.f input:focus,.f select:focus,.f textarea:focus{
  outline:0;border-color:var(--gold);background:var(--ink-3);box-shadow:0 0 0 3px rgba(184,145,78,.14)}
.f input::placeholder,.f textarea::placeholder{color:#84837C}
.f select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),
                   linear-gradient(135deg,var(--gold) 50%,transparent 50%);
  background-position:calc(100% - 19px) 23px,calc(100% - 13px) 23px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.f:has(:user-invalid) input,.f:has(:user-invalid) select,.f:has(:user-invalid) textarea{border-color:#A8503C}
.f .err{display:none;font-size:var(--t-xs);color:#D98572}
.f:has(:user-invalid) .err{display:block}
.form__note{font-size:var(--t-xs);color:var(--mute);line-height:1.6;max-width:58ch;grid-column:1/-1}
.form__ok{grid-column:1/-1;border:1px solid var(--gold-dim);background:rgba(184,145,78,.09);
  padding:24px 26px;display:none}
.form__ok h3{color:var(--gold-hi);margin-bottom:8px;font-size:1.05rem}
.form__ok p{margin:0;color:var(--bone-2);font-size:.94rem}
.form.is-sent .form__ok{display:block}
.form.is-sent>*:not(.form__ok){display:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- 14. Final CTA + footer --------------------------------------- */
.cta-final{position:relative;overflow:hidden;text-align:center;
  padding-block:clamp(78px,12vw,160px);border-top:1px solid var(--rule)}
.cta-final::before{content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(90% 130% at 50% 108%,rgba(184,145,78,.2),transparent 62%)}
.cta-final h2{max-width:20ch;margin-inline:auto;font-size:clamp(1.7rem,4.6vw,2.9rem)}
.cta-final .lede{margin:22px auto 0;text-align:center;color:var(--gold-hi);
  font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;
  font-variation-settings:"wdth" 108,"wght" 700;font-size:clamp(1rem,2.4vw,1.3rem)}
.cta-final .hero__cta{justify-content:center}
.cta-final .hero__cta .btn{flex:0 1 auto}
.cta-final__em{width:72px;margin:0 auto clamp(24px,3vw,34px)}

.foot{background:var(--ink-1);border-top:1px solid var(--rule);padding-top:clamp(56px,8vw,86px)}
.foot__grid{display:grid;gap:40px}
@media (min-width:820px){ .foot__grid{grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:48px} }
.foot h4{font-size:.74rem;letter-spacing:.17em;color:var(--gold);margin-bottom:16px;
  font-variation-settings:"wdth" 104,"wght" 650}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot li{margin:0}
.foot a{color:var(--bone-2);text-decoration:none;font-size:.92rem;transition:color .18s ease}
.foot a:hover{color:var(--gold-hi)}
.foot__logo{display:inline-block}
.foot__logo img{width:188px;margin-bottom:18px}
.foot__blurb{color:var(--mute);font-size:.9rem;line-height:1.65;max-width:34ch}
.foot__bar{margin-top:clamp(44px,6vw,70px);border-top:1px solid var(--rule);
  padding-block:22px;display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;
  font-size:var(--t-xs);color:var(--mute)}
.foot__bar a{font-size:var(--t-xs)}
.foot__social{display:flex;gap:9px;margin-top:20px}
.foot__social a{width:40px;height:40px;display:grid;place-items:center;
  border:1px solid var(--rule);border-radius:2px;color:var(--bone-2);
  transition:color .2s ease,border-color .2s ease,background .2s ease,transform .2s var(--spring)}
.foot__social a:hover{color:var(--gold);border-color:var(--gold-dim);
  background:rgba(184,145,78,.07);transform:translateY(-2px)}
.foot__social svg{width:17px;height:17px;fill:currentColor}

/* ---------- 15. Journal -------------------------------------------------- */
.phero{position:relative;padding-top:calc(var(--topbar) + clamp(40px,7vh,80px));
  padding-bottom:clamp(44px,6vw,72px);border-bottom:1px solid var(--rule)}
.phero h1{font-size:clamp(2.1rem,6.4vw,3.9rem)}
.crumbs{font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);
  margin-bottom:20px;font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 550}
.crumbs a{color:var(--gold);text-decoration:none}
.crumbs a:hover{color:var(--gold-hi)}
.crumbs i{font-style:normal;margin-inline:8px;color:var(--gold-dim)}

.posts{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
@media (min-width:760px){ .posts{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ .posts{grid-template-columns:repeat(3,1fr)} }
.post{background:var(--ink-1);padding:30px 28px;display:flex;flex-direction:column;gap:13px;
  position:relative;transition:background .3s var(--xo)}
.post:hover{background:var(--ink-2)}
.post__meta{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;color:var(--gold);
  font-family:var(--display);font-variation-settings:"wdth" 104,"wght" 600}
.post h3{font-size:1.12rem;text-transform:none;letter-spacing:0;line-height:1.22;
  font-variation-settings:"wdth" 108,"wght" 720;transition:color .2s ease}
.post p{color:var(--bone-2);font-size:.92rem;line-height:1.6;margin:0}
.post a{text-decoration:none;color:inherit}
.post a::after{content:"";position:absolute;inset:0}
.post:hover h3{color:var(--gold-hi)}
.post__read{margin-top:auto;padding-top:6px;font-size:var(--t-xs);letter-spacing:.11em;
  text-transform:uppercase;color:var(--mute);font-family:var(--display)}

.article__body{max-width:70ch;font-size:1.06rem;line-height:1.72;color:#C9C6BA}
.article__body h2{font-size:clamp(1.45rem,3.4vw,2rem);margin:2.1em 0 .65em;color:var(--bone)}
.article__body h3{font-size:1.16rem;margin:1.9em 0 .5em;text-transform:none;letter-spacing:0;color:var(--bone)}
.article__body ul,.article__body ol{margin-bottom:1.3em}
.article__body li{margin-bottom:.55em}
.article__body strong{color:var(--bone);font-weight:600}
.article__body blockquote{margin:2em 0;padding:20px 26px;border-left:2px solid var(--gold);
  background:var(--ink-1);font-size:1.08rem;line-height:1.6;color:var(--bone)}
.article__body blockquote p:last-child{margin-bottom:0}
.article__body a{color:var(--gold-hi);text-decoration-color:var(--gold-dim)}
.article__body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:.94rem}
.article__body th,.article__body td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--rule)}
.article__body th{font-family:var(--display);font-size:.76rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--gold);font-variation-settings:"wdth" 104,"wght" 650}
.article__body td{color:var(--bone-2);font-variant-numeric:tabular-nums}
.article__lead{font-size:1.18rem;line-height:1.6;color:var(--bone);margin-bottom:1.6em}
.toc{border:1px solid var(--rule);background:var(--ink-1);padding:22px 24px;margin-bottom:2.6em}
.toc h4{font-size:.72rem;letter-spacing:.15em;color:var(--gold);margin-bottom:12px}
.toc ol{margin:0;padding-left:1.1em;font-size:.93rem}
.toc li{margin-bottom:.35em}
.toc a{color:var(--bone-2);text-decoration:none}
.toc a:hover{color:var(--gold-hi)}

/* ==========================================================================
   16. MOTION
   Scroll-linked work runs on CSS scroll timelines. `.is-in` is the
   IntersectionObserver fallback that swarm.js applies where those are absent.
   ========================================================================== */

/* one-shot entrance for the hero stack */
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.rise{animation:rise .85s var(--xo) both;animation-delay:calc(var(--i,0) * 90ms + .5s)}

/* scroll reveals */
@keyframes revealIn{
  from{opacity:0;transform:translateY(34px) scale(.988)}
  to{opacity:1;transform:none}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    /* stagger the children of a revealed grid */
    .night__row{animation:revealIn linear both;animation-timeline:view();
      animation-range:entry 0% cover 18%}
    .proof__cell{animation:revealIn linear both;animation-timeline:view();
      animation-range:entry 0% cover 20%}
    .step{animation:revealIn linear both;animation-timeline:view();
      animation-range:entry 0% cover 20%}
  }
}
/* fallback path — JS adds .js-io to <html> when scroll timelines are missing */
.js-io .night__row,.js-io .proof__cell,.js-io .step{
  opacity:0;transform:translateY(34px);
  transition:opacity .75s var(--xo),transform .75s var(--xo);
}
.js-io .is-in{opacity:1;transform:none}

/* images that breathe as they cross the viewport */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .frame__zoom img{animation:framezoom linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%}
    @keyframes framezoom{from{transform:scale(1.14)}to{transform:scale(1)}}
    .parallax{animation:para linear both;animation-timeline:view();
      animation-range:cover 0% cover 100%}
    @keyframes para{from{transform:translateY(-5%)}to{transform:translateY(5%)}}
  }
}

/* ---------- the muscle bee — scroll-linked flight ------------------------ */
.beeflight{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
.beeflight__trail{display:none}
.beeflight__bee{position:fixed;left:0;top:0;will-change:transform}
.beeflight__bee img{
  width:62px;height:auto;opacity:.38;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.85)) drop-shadow(0 0 30px rgba(184,145,78,.22));
  animation:beebob 2.6s ease-in-out infinite alternate;
}
@media (min-width:1080px){ .beeflight__bee img{width:92px} }

@keyframes beebob{
  from{transform:translateY(-4px) rotate(-3deg) scaleY(.98)}
  to{transform:translateY(4px) rotate(3deg) scaleY(1.02)}
}

@keyframes beefly{
  0%   {transform:translate(82vw,16vh) rotate(24deg);opacity:0}
  5%   {opacity:.95}
  16%  {transform:translate(12vw,38vh) rotate(-18deg)}
  32%  {transform:translate(74vw,64vh) rotate(26deg)}
  48%  {transform:translate(16vw,26vh) rotate(-22deg)}
  64%  {transform:translate(70vw,52vh) rotate(18deg)}
  80%  {transform:translate(20vw,70vh) rotate(-14deg)}
  95%  {opacity:.95}
  100% {transform:translate(60vw,34vh) rotate(10deg);opacity:0}
}
@supports (animation-timeline:scroll()){
  @media (prefers-reduced-motion:no-preference) and (min-width:760px){
    .beeflight{display:block}
    .beeflight__bee{animation:beefly linear both;animation-timeline:scroll(root block)}
  }
}

/* interaction polish */
.card,.step{will-change:auto}
@media (hover:hover){
  .card:hover,.step:hover{transform:translateY(-3px)}
  .frame:hover img{transform:scale(1.03)}
  .frame img{transition:transform .6s var(--xo)}
}

/* ---------- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .hero__shutter,.beeflight,.hero__scroll{display:none}
  .js-io .night__row,.js-io .proof__cell,.js-io .step{opacity:1;transform:none}
}

@media print{
  .topbar,.drawer,.hero__shutter,.foot__social,.beeflight,.ticker{display:none}
  body{background:#fff;color:#000}
}

/* ---------------------------------------------- service and crew pages (v6) */
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.split--media{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
.split--media .frame{aspect-ratio:3/4}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;padding:11px 18px;border:1px solid var(--rule);
  border-radius:2px;text-decoration:none;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--bone-2);background:var(--ink-1);transition:border-color .2s ease,color .2s ease}
@media (hover:hover) and (pointer:fine){
  .chip:hover{border-color:var(--gold);color:var(--bone)}
}
@media (max-width:860px){
  .cards--2,.split--media{grid-template-columns:1fr}
}

/* ==========================================================================
   17. SCREENS — every page is a run of screens, one scroll each, each one
   complete on its own. html.snap (swarm.js) snaps them; html.fx7 lets the
   one smoothed scroll clock move things. Without either, it is a plain page.
   ========================================================================== */
:root{--stone:#D8D1C0;--stone-ink:#16181A;--stone-2:#3B3C3C;--bronze:#6B4F1D;
  --cue:clamp(52px,8vh,84px)}
@media (max-width:699px){ :root{--cue:calc(100px + env(safe-area-inset-bottom,0px))} }   /* the Call bar + the cue */
html.snap{scroll-snap-type:y mandatory;scroll-padding-top:0}
.snap .foot{scroll-snap-align:end}

.scr{position:relative;min-height:100svh;display:flex;flex-direction:column;scroll-snap-align:start;
  scroll-snap-stop:always;padding:calc(var(--topbar) + clamp(12px,3.4vh,40px)) 0 var(--cue)}
.scr__in{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;width:100%;min-height:0}
.scr h2{font-size:clamp(1.7rem,4.2vw,3.1rem);margin-bottom:clamp(14px,2.4vh,26px)}
.scr .eyebrow{margin-bottom:clamp(8px,1.4vh,14px)}
/* a screen arrives and leaves (--d: screens away, signed; --ad: unsigned) */
.fx7 .scr__in{opacity:calc(1 - var(--ad,0) * 1.35);transform:translate3d(0,calc(var(--d,0) * 6vh),0);will-change:transform,opacity}
.fx7 .scr__in li[style]{transform:translate3d(0,calc(var(--d,0) * (var(--k,0) * 2.6vh + 2vh)),0)}

/* the one link that moves a visitor on, on every screen */
.go{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(16px,2.6vh,28px);text-decoration:none;align-self:flex-start;
  font-family:var(--display);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi);
  font-variation-settings:"wdth" 106,"wght" 700;border-bottom:1px solid var(--gold-dim);padding-bottom:5px}
.go svg{width:16px;height:16px;transition:transform .25s var(--xo)}
@media (hover:hover) and (pointer:fine){ .go:hover svg{transform:translateX(4px)} }

/* guidance: where you are (the rail, desktop) and where the page goes next (the cue) */
.rail7{display:none}
@media (min-width:1180px){
  .rail7{display:flex;flex-direction:column;gap:14px;position:fixed;right:22px;top:50%;translate:0 -50%;z-index:45}
  .rail7 a{display:flex;align-items:center;justify-content:flex-end;gap:12px;text-decoration:none;min-height:18px;
    font-family:var(--display);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
  .rail7 span{opacity:0;translate:6px 0;transition:opacity .3s var(--xo),translate .3s var(--xo)}
  .rail7 i{width:6px;height:6px;border:1px solid var(--mute);transform:rotate(45deg);transition:all .3s var(--xo)}
  .rail7 a.is-on{color:var(--gold-hi)}
  .rail7:hover span,.rail7 a:focus-visible span{opacity:1;translate:0 0}   /* names on hover; the gold diamond says where you are */
  .rail7 a.is-on i{background:var(--gold);border-color:var(--gold);transform:rotate(45deg) scale(1.35)}
  .rail7.on-light a{color:var(--stone-2)} .rail7.on-light i{border-color:var(--stone-2)}
}
.next7{position:absolute;left:50%;bottom:clamp(14px,2.6vh,26px);translate:-50% 0;z-index:4;display:inline-flex;
  align-items:center;gap:10px;text-decoration:none;font-family:var(--display);font-size:.68rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);min-height:40px;padding:0 10px;transition:color .2s ease}
.next7 svg{width:15px;height:15px;color:var(--gold)}
.next7 b{font-weight:normal;color:var(--bone-2)}
@media (hover:hover) and (pointer:fine){ .next7:hover,.next7:hover b{color:var(--gold-hi)} }
@media (max-width:699px){ .next7{bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:.62rem} }
.px .next7,.px .next7 b,.std7 .next7,.std7 .next7 b{color:var(--stone-2)}

/* ---------- home 1 · welcome: three plates by aspect ratio (cinema/render.py
   has the splits): up to 0.95 the words in the sky above the officer, wider
   screens the words on the sky to his left ---------------------------------- */
.film{position:relative;background:#07090B}
.film__stage{position:absolute;inset:0 0 auto 0;height:100svh;overflow:hidden;z-index:0}
.film__hero{position:absolute;inset:0}
.film__hero picture{display:block;height:100%}
.film__hero img{width:100%;height:100%;object-fit:cover;object-position:55% 100%}
.film__portal,.film__ring{display:none}
.hx{z-index:1;padding:0;overflow:hidden}
.hx::before{content:"";position:absolute;inset:0 0 auto 0;height:52%;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.6),rgba(8,9,10,0))}
.hx__copy{position:relative;z-index:3;display:flex;flex-direction:column;gap:clamp(10px,1.8svh,16px);
  padding:calc(var(--topbar) + clamp(10px,3.4svh,40px)) var(--gut) 0}
.hx__line{margin:0;font-family:var(--display);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-hi);font-variation-settings:"wdth" 106,"wght" 650}
.hx h1{font-size:min(calc((100vw - 2 * var(--gut)) / 11.6),5.6svh,60px);line-height:1.02;letter-spacing:.005em;
  font-variation-settings:"wdth" 115,"wght" 800;text-wrap:initial}
.hx h1 em{font-style:normal;color:var(--gold-hi)}
.hx__nw{white-space:nowrap}
.hx__lede{margin:0;color:var(--bone-2);font-size:clamp(.9rem,3.9vw,1.06rem);line-height:1.5;max-width:34ch;
  text-shadow:0 1px 14px rgba(8,9,10,.9)}
/* three ways in: a price, the people, the services */
.doors{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:4px}
.doors__a{display:inline-flex;align-items:center;gap:8px;text-decoration:none;min-height:40px;color:var(--bone)}
.doors__a b{font-family:var(--display);font-weight:normal;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:"wdth" 106,"wght" 700}
.doors__a span{display:none}
.doors__a svg{width:15px;height:15px;color:var(--gold);transition:transform .25s var(--xo)}
.doors__a--go b{color:var(--gold-hi)}
@media (hover:hover) and (pointer:fine){ .doors__a:hover svg{transform:translateX(3px)} .doors__a:hover b{color:var(--gold-hi)} }
@media (max-width:699px){ .doors__a--go{display:none} .hx__lede{display:none} }   /* the Call bar carries the quote */
@media (max-aspect-ratio:19/20) and (max-height:600px),(min-aspect-ratio:3/4) and (max-aspect-ratio:19/20){
  .hx__lede{display:none}
  .hx h1{font-size:min(calc((100vw - 2 * var(--gut)) / 11.6),4.6svh,52px)}
}
@media (min-aspect-ratio:951/1000){
  .film__hero img{object-position:100% 50%}
  .hx::before{inset:0 auto 0 0;width:62%;height:auto;
    background:linear-gradient(90deg,rgba(8,9,10,.86) 0%,rgba(8,9,10,.6) 50%,rgba(8,9,10,0) 100%)}
  .hx__copy{position:absolute;inset:0 auto 0 0;width:min(54%,800px);justify-content:center;padding-bottom:0}
  .hx h1{font-size:min(3.6vw,7svh,60px)}
  .hx__lede{font-size:clamp(.9rem,1.15vw,1.12rem);max-width:40ch}
  .doors{flex-direction:column;align-items:flex-start;gap:0;margin-top:10px;border-top:1px solid var(--rule);width:min(100%,420px)}
  .doors__a{width:100%;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--rule)}
  .doors__a span{display:inline;margin-left:auto;color:var(--mute);font-size:.84rem}
}
@media (min-aspect-ratio:951/1000) and (max-aspect-ratio:13/10){
  .hx__copy{width:42%} .hx h1{font-size:min(3.1vw,6svh,48px)}
}
@media (min-aspect-ratio:1701/1000){ .film__hero img{object-position:60% 45%} }
/* the film: one scroll from the welcome to the services. The camera pushes into
   his jacket under the emblem; a gold ring opens from that spot onto a night
   event; the services arrive over it. */
.fx7 .film__stage{position:sticky;top:0;margin-bottom:-100svh}
.fx7 .film__hero img{transform-origin:var(--ox,50%) var(--oy,90%);will-change:transform;
  transform:scale(calc(1 + 5 * var(--push,0)));filter:brightness(calc(1 - .72 * var(--push,0)))}
.fx7 .hx__copy{opacity:calc(1 - var(--copy,0));transform:translateY(calc(var(--copy,0) * -6svh))}
.fx7 .film__portal{display:block;position:absolute;inset:0;clip-path:circle(var(--r,0px) at var(--ox,50%) var(--oy,90%))}
.fx7 .film__portal img{width:100%;height:100%;object-fit:cover;transform:scale(calc(1.3 - .3 * var(--open,0)))}
.fx7 .film__portal::after{content:"";position:absolute;inset:0;background:rgba(8,9,10,calc(.35 + .5 * var(--dim,0)))}
.fx7 .film__ring{display:block;position:absolute;left:var(--ox,50%);top:var(--oy,90%);width:calc(2 * var(--r,0px));
  height:calc(2 * var(--r,0px));translate:-50% -50%;border-radius:50%;border:1.5px solid var(--gold-hi);
  box-shadow:0 0 34px rgba(214,178,116,.4),inset 0 0 34px rgba(214,178,116,.25);opacity:var(--ring,0);pointer-events:none}

/* ---------- home 2 · six services: photo tiles that share the screen -------- */
.sx{z-index:1}
.fx7 .film .sx{background:transparent}
.fx7 .film .sx .scr__in{opacity:calc(1 - var(--ad,0) * 2.4)}   /* the services wait for the portal */
.sx .scr__in{max-height:900px}
.sx__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 30px}
.sx__head .eyebrow{flex-basis:100%}
.sx__lede{color:var(--bone-2);margin:0 0 clamp(14px,2.4vh,26px)}
.scards{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;max-height:620px;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(150px,1fr));gap:clamp(10px,1.4vw,18px)}
.scards li{margin:0;min-height:0}
.scard{position:relative;display:flex;align-items:flex-end;height:100%;overflow:hidden;text-decoration:none;
  border:1px solid var(--rule);background:#000;transition:border-color .3s var(--xo)}
.scard__pic{position:absolute;inset:0}
.scard__pic img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--xo)}
.scard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(8,9,10,.92) 0%,rgba(8,9,10,.35) 50%,rgba(8,9,10,.05) 100%)}
.scard__t{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;padding:16px 18px;flex:1}
.scard__t b{font-family:var(--display);text-transform:uppercase;font-weight:normal;font-size:clamp(1rem,1.5vw,1.22rem);
  line-height:1.05;font-variation-settings:"wdth" 110,"wght" 760}
.scard__t span{color:var(--bone-2);font-size:.88rem}
.scard>svg{position:relative;z-index:1;width:18px;height:18px;color:var(--gold-hi);margin:0 18px 18px 0;flex:none;
  transition:transform .25s var(--xo)}
@media (hover:hover) and (pointer:fine){
  .scard:hover{border-color:var(--gold-dim)}
  .scard:hover .scard__pic img{transform:scale(1.05)}
  .scard:hover>svg{transform:translateX(4px)}
}
@media (max-width:999px){ .scards{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,minmax(110px,1fr))} }
@media (max-width:699px){
  /* phones: a list with thumbnails, all six on one screen */
  .sx__lede{display:none}
  .scards{display:flex;flex-direction:column;gap:8px;max-height:none;flex:none}
  .scard{align-items:center;height:auto;min-height:58px;background:var(--ink-2)}
  .scard::after{display:none}
  .scard__pic{position:relative;inset:auto;flex:none;width:72px;height:58px}
  .scard__t{padding:8px 14px}
  .scard__t b{font-size:.98rem}
  .scard__t span{font-size:.78rem}
  .scard>svg{margin:0 14px 0 0}
}

/* ---------- home 3 · the people: the owners on warm stone ------------------- */
.px{background:var(--stone);color:var(--stone-ink)}
.px .eyebrow{color:var(--bronze)}
.px__in{display:grid !important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,80px);align-items:center}
.px__pic{margin:0;height:min(72svh,640px);display:flex;align-items:flex-end;justify-content:center}
.px__pic img{height:100%;width:auto;max-width:100%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 24px 30px rgba(22,24,26,.35))}
.px__lede{color:var(--stone-2);max-width:48ch;margin-bottom:clamp(16px,2.6vh,26px)}
.px__std{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,2vh,22px) 28px}
.px__std li{margin:0;padding-top:12px;border-top:1px solid rgba(22,24,26,.2)}
.px__std h3{font-size:.98rem;color:var(--stone-ink);margin-bottom:4px}
.px__std p{margin:0;color:var(--stone-2);font-size:.88rem;line-height:1.5}
.px .go{color:var(--stone-ink);border-bottom-color:var(--bronze)}
.px :focus-visible{outline-color:var(--stone-ink)}
@media (max-width:899px){
  .px__in{grid-template-columns:1fr;gap:10px;align-content:center}
  .px__pic{height:clamp(150px,26svh,240px);overflow:hidden;align-items:flex-start;border-bottom:1px solid rgba(22,24,26,.2)}
  .px__pic img{height:auto;width:min(100%,360px);object-position:top}
  .px__std p{display:none}
  .px__std{gap:10px 18px}
  .px__std li{padding-top:8px}
}
@media (max-width:699px){ .px__lede{font-size:.92rem;margin-bottom:12px} }

/* ---------- three steps (home 4, service pages, coverage travel) ------------ */
.hw__steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.hw__step{margin:0;background:var(--ink-1);padding:clamp(18px,3vh,34px) clamp(18px,2vw,30px);display:flex;flex-direction:column;gap:8px}
.hw__n{font-family:var(--display);color:var(--gold);font-size:.8rem;letter-spacing:.16em}
.hw__step h3{font-size:clamp(1.02rem,1.7vw,1.3rem)}
.hw__step p{margin:0;color:var(--bone-2);font-size:.94rem;line-height:1.55}
@media (max-width:760px){
  .hw__steps{grid-template-columns:1fr}
  .hw__step{display:grid;grid-template-columns:34px 1fr;gap:2px 10px;padding:12px 14px}
  .hw__n{grid-row:span 2;padding-top:3px}
  .hw__step p{font-size:.84rem}
}
.facts{list-style:none;margin:clamp(16px,3vh,30px) auto 0;padding:0 var(--gut);display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 30px;font-family:var(--display);font-size:.8rem;letter-spacing:.05em;color:var(--gold-hi);
  font-variation-settings:"wdth" 106,"wght" 650;max-width:var(--maxw)}
.facts li{display:flex;align-items:center;gap:8px;margin:0}
.facts .ico{width:18px;height:18px}
@media (max-width:699px){ .facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.72rem} .facts .ico{width:15px;height:15px} }

/* ---------- home 5 · coverage: the map and one line -------------------------- */
.cx{background:radial-gradient(80% 90% at 70% 50%,#0D1216,var(--ink-0) 70%)}
.cx__in{display:grid !important;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:clamp(20px,4vw,60px);align-items:center}
.cx__map{aspect-ratio:1.78;max-height:62svh;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 91%,transparent);
  mask-composite:intersect}
@media (max-width:899px){
  .cx__in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:100%}
  .cx__map{aspect-ratio:auto;height:100%;min-height:220px;max-height:none}
}
.gm{width:100%;height:100%;overflow:hidden}
.gm__land{fill:#1A1E22}
.gm__urban{fill:rgba(231,228,211,.1);stroke:rgba(231,228,211,.14);stroke-width:1}
.gm__shore{fill:none;stroke:rgba(184,145,78,.62);stroke-width:2.8}
.gm__hwy{fill:none;stroke:rgba(231,228,211,.2);stroke-width:2.4;stroke-linecap:round}
.gm__route{fill:none;stroke:rgba(214,178,116,.3);stroke-width:2.2}
.gm__lbl{fill:var(--bone-2);font-family:var(--body);letter-spacing:.04em}
.gm__lbl--d{font-size:17px}
.gm__lbl--m{font-size:30px;display:none}
.gm__lbl--hq{fill:var(--gold-hi);font-family:var(--display);font-weight:700;font-size:26px;letter-spacing:.14em}
.gm__ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:.5}
.ca{width:100%;height:auto}
.ca__land{fill:rgba(231,228,211,.1);stroke:rgba(231,228,211,.34);stroke-width:2.4}
.ca__arc{fill:none;stroke:rgba(214,178,116,.6);stroke-width:3}
.ca__pin{fill:var(--gold)}
.ca__ring{fill:none;stroke:var(--gold);stroke-width:2;opacity:.5}
@media (max-width:899px){
  .gm__lbl--d{display:none} .gm__lbl--m{display:inline}
  .gm__shore{stroke-width:3.4} .gm__hwy{stroke-width:3.6}
}
/* routes run out from Toronto as their screen arrives */
.fx7 .gm__route{stroke:rgba(214,178,116,.55);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--draw,0))}
.fx7 .gm__pin,.fx7 .gm__lbl--d,.fx7 .gm__lbl--m{opacity:clamp(0,calc(var(--draw,0) * 3 - 1.8),1)}

/* ---------- questions (home 6, service pages, answers) ----------------------- */
.qx__in{display:grid !important;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(20px,5vw,80px);align-items:center}
.qx__in .faq{margin-top:0}
.qx .faq summary{padding:clamp(12px,2vh,20px) 46px clamp(12px,2vh,20px) 0;font-size:.98rem}
.qx__more .go{margin-top:6px}
.qx__side .lede a{color:var(--gold-hi)}
@media (max-width:899px){
  .qx__in{grid-template-columns:1fr;gap:6px;align-content:center}
  .qx__in h2{margin-bottom:6px}
  .qx .faq summary{font-size:.9rem}
}

/* ---------- home 7 · the quote: a three-step form beside the phone and email - */
.kx{background:var(--ink-1)}
.kx::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 15% 100%,rgba(184,145,78,.14),transparent 60%)}
.kx__in{display:grid !important;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:center}
.kx__lede{color:var(--bone-2);max-width:40ch;margin:0}
.kx__tel{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(14px,3vh,30px);text-decoration:none;
  font-family:var(--display);font-size:clamp(1.5rem,3.2vw,2.3rem);font-variation-settings:"wdth" 110,"wght" 760;
  letter-spacing:.01em;font-variant-numeric:tabular-nums}
.kx__tel svg{width:24px;height:24px;fill:var(--gold)}
.kx__note{display:flex;flex-wrap:wrap;align-items:center;gap:6px 9px;margin-top:10px;color:var(--mute);font-size:.88rem}
.kx__note a{color:var(--bone-2)}
@media (max-width:899px){ .kx__in{grid-template-columns:1fr;gap:12px} .kx__lede{display:none} .kx__tel{margin-top:4px;font-size:1.4rem} }
@media (max-width:699px){ .kx__note{display:none} .kx h2{margin-bottom:4px} }
.snap .kx{padding-bottom:clamp(24px,5vh,60px)}
.qf{position:relative;background:var(--ink-2);border:1px solid var(--rule);padding:clamp(16px,2.6vw,32px);display:grid;gap:16px}
.qf__prog{margin:0;display:grid;gap:10px;font-family:var(--display);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold-hi);font-variation-settings:"wdth" 106,"wght" 650}
.qf__prog i{display:block;height:2px;background:var(--rule)}
.qf__prog b{display:block;height:100%;width:var(--p,100%);background:var(--gold);transition:width .4s var(--xo)}
.qf__step{border:0;margin:0;padding:0;min-width:0}
.qf__step+.qf__step{margin-top:6px}
.qf__step legend{padding:0;margin-bottom:12px;font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.35rem);font-variation-settings:"wdth" 110,"wght" 760}
.qf__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.qf__opt{position:relative;display:flex;cursor:pointer}
.qf__opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.qf__opt span{flex:1;display:flex;align-items:center;min-height:50px;padding:10px 14px;border:1px solid var(--rule);
  border-radius:2px;background:var(--ink-1);font-size:.92rem;font-weight:500;line-height:1.3;
  transition:border-color .2s ease,background .2s ease,color .2s ease}
.qf__opt input:checked+span{border-color:var(--gold);background:rgba(184,145,78,.12);color:var(--bone)}
.qf__opt input:focus-visible+span{outline:2px solid var(--gold-hi);outline-offset:2px}
.qf__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.qf__grid .f--full{grid-column:1/-1}
.qf .f label em{font-style:normal;text-transform:none;letter-spacing:.02em}
.qf__nav{display:flex;gap:10px;flex-wrap:wrap}
.qf__nav .btn{flex:1 1 auto}
.qf [data-next],.qf [data-back]{display:none}
.qf__err{margin:0;color:#D98572;font-size:.9rem}
.qf .form__note{margin:0}
.qf .form__ok a{color:var(--gold-hi)}
.qf.is-sent>*:not(.form__ok),.qf.is-sent .qf__step.is-on{display:none}
.qf.is-sent .form__ok{display:block}
.qf.is-steps .qf__step{display:none}
.qf.is-steps .qf__step.is-on{display:block;animation:stepin .45s var(--xo) both}
.qf.is-steps [data-next],.qf.is-steps [data-back]{display:inline-flex}
.qf.is-steps [hidden]{display:none}
@keyframes stepin{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (max-width:420px){ .qf__grid{grid-template-columns:1fr} .qf__opt span{min-height:44px;padding:8px 11px;font-size:.84rem} }
@media (max-width:340px){ .qf__opts{grid-template-columns:1fr} }
@media (hover:hover) and (pointer:fine){ .qf__opt:hover span{border-color:rgba(231,228,211,.3)} }

/* phones: Call and Get a quote live in a bar at the bottom of every page */
.abar{display:none}
@media (max-width:699px){
  .abar{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(8,9,10,.94);
    backdrop-filter:blur(12px);border-top:1px solid var(--rule);transition:transform .35s var(--xo)}
  .abar .btn{min-height:48px;padding:10px 12px}
  .abar svg{width:17px;height:17px;fill:currentColor}
  .abar.is-away{transform:translateY(110%)}
  .mast__cta .mast__call{display:none}
  body:has(.drawer.is-open) .abar{display:none}
  .foot{padding-bottom:calc(70px + env(safe-area-inset-bottom,0px))}
}

/* ---------- inner pages: the opening screen pulls back as the next arrives -- */
.ih{justify-content:flex-end;overflow:hidden;background:#07090B;padding-bottom:var(--cue)}
.ih__media{position:absolute;inset:0;z-index:0;overflow:hidden}
.ih__media img{width:100%;height:100%;object-fit:cover}
.ih__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(8,9,10,.95) 0%,rgba(8,9,10,.6) 36%,rgba(8,9,10,.12) 68%,rgba(8,9,10,.4) 100%),
             linear-gradient(90deg,rgba(8,9,10,.6) 0%,rgba(8,9,10,0) 62%)}
.ih__in{position:relative;z-index:2;width:100%}
.ih h1{font-size:clamp(2.3rem,6.6vw,5.2rem);max-width:14ch;margin:4px 0 14px}
.ih .lede{color:#CFCCC0;max-width:46ch}
.ih .hero__cta{margin-top:22px}
.ih .crumbs{margin-bottom:14px}
.fx7 .ih__media{clip-path:inset(calc(var(--up,0) * 8%) calc(var(--up,0) * 6%) calc(var(--up,0) * 10%) round calc(var(--up,0) * 20px))}
.fx7 .ih__media img{transform:scale(calc(1.04 - .04 * var(--up,0)))}
.fx7 .ih__in{opacity:calc(1 - var(--up,0) * 1.6);transform:translate3d(0,calc(var(--up,0) * -6vh),0)}
@media (max-width:699px){ .ih .hero__cta{display:none} }   /* the Call bar carries both */

/* what you get, the standard: numbered items that share one screen */
.gx__list,.std7__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule)}
.gx__list li,.std7__grid li{margin:0;background:var(--ink-1);padding:clamp(16px,2.8vh,30px) clamp(16px,1.8vw,26px);
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:4px 12px;align-content:start}
.gx__k{grid-row:span 2;font-family:var(--display);color:var(--gold);font-size:.8rem;letter-spacing:.12em;padding-top:.3em}
.gx__list h3,.std7__grid h3{font-size:clamp(.98rem,1.5vw,1.18rem)}
.gx__list p,.std7__grid p{margin:4px 0 0;color:var(--bone-2);font-size:.9rem;line-height:1.5}
@media (max-width:899px){ .gx__list{grid-template-columns:1fr 1fr} }
@media (max-width:699px){
  .gx__list{grid-template-columns:1fr}
  .gx__list li{padding:9px 12px}
  .gx__list p{font-size:.8rem;margin-top:1px;line-height:1.4}
  .gx__list h3{font-size:.92rem}
}
.whofor{margin-top:clamp(16px,3vh,32px)}
.whofor ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.whofor li{margin:0;padding:8px 14px;border:1px solid var(--rule);font-size:.86rem;color:var(--bone-2)}
@media (max-width:699px){ .whofor li{padding:6px 10px;font-size:.76rem} .whofor{margin-top:12px} }
.others{margin-top:clamp(16px,3vh,30px)}
.others ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.others li{margin:0}
.olink{display:flex;flex-direction:column;gap:6px;text-decoration:none;font-size:.8rem}
.olink img{aspect-ratio:16/10;object-fit:cover;border:1px solid var(--rule)}
.olink b{font-weight:600;color:var(--bone-2);line-height:1.25}
.olink svg{display:none}
@media (max-width:899px){
  .others ul{display:flex;flex-wrap:wrap;gap:6px}
  .olink{flex-direction:row;align-items:center;padding:6px 10px;border:1px solid var(--rule)}
  .olink img{display:none}
}

/* meet us: one sentence lit word by word as its screen arrives */
.say__t{margin:0;max-width:24ch;font-family:var(--display);text-transform:uppercase;line-height:1.08;
  font-size:clamp(1.6rem,4.2vw,3.5rem);font-variation-settings:"wdth" 110,"wght" 780}
.fx7 .say__t .w{opacity:clamp(.14,calc((var(--wp,1) * (var(--n,20) + 6) - var(--i,0)) / 6),1)}
/* the owners: cut out of their photograph, the emblem behind them (placed, never altered) */
.own__in{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:center}
.own__stage{position:relative;height:min(70svh,620px);display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(60% 50% at 50% 42%,rgba(184,145,78,.2),transparent 70%),linear-gradient(180deg,#151a1d,#0B0D0F);
  border:1px solid var(--rule);overflow:hidden}
.own__em{position:absolute;left:50%;top:38%;width:56%;height:auto;translate:-50% -50%;opacity:.16}
.own__cut{position:relative;height:94%;width:auto;max-width:96%;object-fit:contain;object-position:bottom;
  filter:drop-shadow(0 28px 40px rgba(0,0,0,.65))}
.own__txt .sub{margin-top:14px;max-width:46ch}
.fx7 .own__em{transform:translate3d(0,calc(var(--d,0) * 10vh),0)}
@media (max-width:899px){
  .own__in{grid-template-columns:1fr;gap:12px;align-content:center}
  .own__stage{height:clamp(170px,30svh,280px)}
  .own__txt .sub{display:none}
}
@media (max-width:699px){ .own__txt .lede{font-size:.94rem} }
/* the standard: four cards on warm stone */
.std7{background:var(--stone);color:var(--stone-ink)}
.std7 .eyebrow{color:var(--bronze)}
.std7__grid{grid-template-columns:repeat(2,minmax(0,1fr));background:rgba(22,24,26,.18);border-color:rgba(22,24,26,.18)}
.std7__grid li{background:var(--stone)}
.std7__grid .gx__k{color:var(--bronze)}
.std7__grid h3{color:var(--stone-ink)} .std7__grid p{color:var(--stone-2)}
@media (max-width:699px){ .std7__grid{grid-template-columns:1fr} .std7__grid li{padding:10px 12px} .std7__grid p{font-size:.8rem;margin-top:1px} }
/* on the job: their real photographs */
.job__pics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.4vw,18px)}
.job__pics li{margin:0}
.job__pics figure{margin:0}
.job__pics img{width:100%;max-height:52svh;aspect-ratio:3/4;object-fit:cover;border:1px solid var(--rule)}
.job__pics figcaption{margin-top:8px;font-size:var(--t-sm);color:var(--mute)}
.job__note{margin:clamp(12px,2vh,20px) 0 0;color:var(--mute);font-size:.84rem}
@media (max-width:699px){ .job__pics figcaption{display:none} .job__pics img{max-height:40svh} }

/* coverage: the map pinned behind three screens — Toronto, the GTA, Canada */
.cov{position:relative;background:radial-gradient(90% 80% at 55% 55%,#0D1216,var(--ink-0) 70%)}
.cov__stage{position:relative;height:70svh;padding-top:var(--topbar);overflow:hidden}
.cov__gta{position:absolute;inset:var(--topbar) 0 0 0}
.cov__can{display:none}
.cov__beat{min-height:auto;padding-block:20px}
.cov__beat h1,.cov__beat h2{font-size:clamp(2.2rem,6vw,4.6rem);margin:6px 0 12px}
.fx7 .cov__stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;padding:0;z-index:0}
.fx7 .cov__stage::after{content:"";position:absolute;inset:auto 0 0 0;height:48%;z-index:2;pointer-events:none;
  background:linear-gradient(0deg,rgba(8,9,10,.94),rgba(8,9,10,0))}
.fx7 .cov__gta{transform-origin:var(--hqx,50%) var(--hqy,50%);transform:scale(var(--z,1));
  opacity:calc(1 - var(--gout,0) * .88);will-change:transform}
.fx7 .cov__can{display:block;position:absolute;left:50%;top:46%;width:min(86vw,880px);translate:-50% -50%;
  opacity:var(--can,0);transform:scale(calc(.82 + .18 * var(--can,0)))}
.fx7 .cov__can .ca__arc{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--arc,0))}
.fx7 .cov__beat{min-height:100svh;z-index:3;padding-block:0}
.fx7 .cov__beat .scr__in{justify-content:flex-end;padding-bottom:var(--cue)}
/* every city, by direction from downtown */
.regions{background:var(--ink-1)}
.regions__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,3vw,40px)}
.reg h3{font-size:.8rem;letter-spacing:.18em;color:var(--gold);padding-bottom:10px;border-bottom:1px solid var(--rule);margin-bottom:12px}
.reg ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.reg li{margin:0;font-family:var(--display);text-transform:uppercase;font-size:clamp(1rem,1.8vw,1.4rem);
  font-variation-settings:"wdth" 108,"wght" 700}
@media (max-width:760px){ .regions__grid{grid-template-columns:1fr 1fr;gap:18px 14px} .reg li{font-size:.92rem} .reg ul{gap:5px} }

/* the closing ask on every inner page */
.cta-final{text-align:center;justify-content:center}
.cta-final .scr__in{align-items:center}

/* journal and plain pages: the title steps back, a gold rule runs out under it */
.fx7 .phero .wrap{transform:translateY(calc(var(--h,0) * -8vh));opacity:calc(1 - var(--h,0) * .75)}
.fx7 .phero::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--gold);
  transform-origin:0 50%;transform:scaleX(calc(.18 + var(--h,0) * .82))}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .posts .post{animation:revealIn linear both;animation-timeline:view();animation-range:entry 0% cover 22%}
  }
}

/* ---------- phones: every screen fits in one view ---------------------------- */
@media (max-width:899px){
  .cx__in{grid-template-rows:auto auto;height:auto}
  .cx__map{height:clamp(180px,calc(100svh - var(--topbar) - var(--cue) - 290px),460px)}
}
@media (max-width:699px){
  .scard{min-height:52px} .scard__pic{width:64px;height:52px} .scards{gap:6px}
  .px__pic{height:clamp(120px,21svh,210px)}
  .gx .go{display:none}                         /* the Call bar carries the quote */
  .gx__list p,.hw__step p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .whofor .eyebrow{margin-bottom:6px}
  .whofor ul{gap:5px}
  .qx__side .lede{display:none}
}
/* short phones (an iPhone SE with the browser bars showing) */
@media (max-width:699px) and (max-height:620px){
  :root{--cue:calc(78px + env(safe-area-inset-bottom,0px))}
  .scr .eyebrow{display:none}
  .scr h2{font-size:1.35rem;margin-bottom:8px}
  .next7{display:none}
  .hw__step{padding:9px 12px}
  .qx .faq summary{padding-block:9px}
}
@media (max-width:699px){
  .gx .scr__in > .eyebrow,.hw .scr__in > .eyebrow{display:none}   /* the heading says it */
  .gx__list p,.hw__step p{font-size:.78rem;line-height:1.35}
  .hw__step{padding:9px 12px}
  #answers .qx__side{display:none}                                /* the opening screen introduced them */
  .next7{min-height:30px}
}