:root{
  --green:#627C58;
  --green-deep:#42553B;
  --green-ink:#26301F;
  --sage:#E9EDE4;
  --sage-2:#DDE4D5;
  --paper:#FAFAF6;
  --white:#FFFFFF;
  --text:#232921;
  --mute:#6C7367;
  --line:rgba(38,48,31,0.12);
  --amber:#C99A5B;
  --amber-deep:#A87735;
  --amber-ink:#8A6224;
  --amber-soft:#F5E6CE;
  --amber-wash:#FFFBF3;
  --clay:#B4674A;
  --radius:3px;
  --shadow:0 24px 60px -24px rgba(38,48,31,0.22);
  --shadow-gold:0 24px 60px -24px rgba(168,119,53,0.35);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:'Inter',sans-serif;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Montserrat',sans-serif;margin:0;letter-spacing:-0.015em;color:var(--green-ink);}
a{color:inherit;text-decoration:none;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
::selection{background:var(--green);color:#fff;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;}
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- reveal on scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.08s;} .rv-d2{transition-delay:.16s;} .rv-d3{transition-delay:.24s;}

/* ---------- focus-pull reveal (rack focus) ---------- */
.focus-pull{filter:blur(9px);opacity:0;transform:scale(1.015);
  transition:filter .85s cubic-bezier(.2,.7,.3,1), opacity .7s ease, transform .85s cubic-bezier(.2,.7,.3,1);}
.focus-pull.in{filter:blur(0);opacity:1;transform:none;}

/* ---------- gold wave sweep across text ---------- */
.goldwave{
  background-image:linear-gradient(100deg,
    var(--green-ink) 0%, var(--green-ink) 38%,
    var(--amber-deep) 45%, var(--amber) 48%, #F6E3BB 50%, var(--amber) 52%, var(--amber-deep) 55%,
    var(--green-ink) 62%, var(--green-ink) 100%);
  background-size:260% 100%;
  background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  animation:goldsweep 5s linear infinite;
}
/* light text on dark backgrounds */
.goldwave.on-dark{
  background-image:linear-gradient(100deg,
    #fff 0%, #fff 38%,
    var(--amber-deep) 45%, var(--amber) 48%, #FFF3D8 50%, var(--amber) 52%, var(--amber-deep) 55%,
    #fff 62%, #fff 100%);
}
@keyframes goldsweep{from{background-position:100% 0;} to{background-position:0% 0;}}

/* ---------- glowing gold CTA ---------- */
.btn-glow{position:relative;isolation:isolate;overflow:hidden;}
.btn-glow::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%);
  background-size:260% 100%;
  animation:goldsweep 3.2s linear infinite;
}
.btn-glow{
  box-shadow:0 0 0 0 rgba(201,154,91,.55), 0 10px 24px -12px rgba(98,124,88,.6);
  animation:ctaGlow 2.8s ease-in-out infinite;
}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(201,154,91,.5), 0 10px 24px -12px rgba(98,124,88,.6);}
  50%{box-shadow:0 0 0 9px rgba(201,154,91,0), 0 14px 30px -12px rgba(201,154,91,.75);}
}

/* ---------- film-strip scroll progress ---------- */
.filmbar{
  position:fixed;top:0;left:0;height:3px;width:100%;z-index:200;pointer-events:none;
  background:transparent;
}
.filmbar i{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--green) 0%, var(--amber) 60%, var(--clay) 100%);
  box-shadow:0 0 10px rgba(201,154,91,.55);
  transition:width .1s linear;
}

/* ---------- staggered pop-in for cards ---------- */
.popin{
  opacity:0;transform:translateY(20px) scale(.975);
  transition:opacity .55s cubic-bezier(.2,.7,.3,1) var(--pop-delay,0ms),
             transform .6s cubic-bezier(.25,1.3,.4,1) var(--pop-delay,0ms);
}
.popin.popped{opacity:1;transform:none;}

/* ---------- pointer tilt (hover only, so it never fights the pop-in) ---------- */
.tier:hover, .pf:hover, .door:hover{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px);
}

/* ---------- aperture spinner in section headers ---------- */
.aperture{
  width:15px;height:15px;flex-shrink:0;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
.aperture .blade{stroke:var(--amber);stroke-width:1.5;fill:none;}
.head.in .aperture{transform:rotate(200deg);}

/* ---------- shot: shutter wipe on reveal ---------- */
.shot .curtain{
  position:absolute;inset:0;z-index:4;background:var(--green-ink);
  transform-origin:top;transition:transform .75s cubic-bezier(.65,0,.35,1);
}
.shot.in .curtain{transform:scaleY(0);transform-origin:bottom;}

/* ---------- tier hover: lens breathe ---------- */
.tier .price{will-change:transform;}
.tier:hover .price{animation:breathe .9s ease-in-out;}
@keyframes breathe{0%,100%{transform:scale(1);}45%{transform:scale(1.045);}}

/* ---------- exif labels ---------- */
.exif{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;
  letter-spacing:0.16em;text-transform:uppercase;
  color:var(--green);display:inline-flex;gap:10px;align-items:center;
}
.exif::before{
  content:"";width:22px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--amber) 0%, var(--green) 100%);
}
.exif::after{
  content:"";width:5px;height:5px;border-radius:50%;background:var(--amber);
  animation:rec 2.4s ease-in-out infinite;
}
@keyframes rec{0%,100%{opacity:.25;transform:scale(.85);}50%{opacity:1;transform:scale(1);}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;
  padding:15px 28px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:hover{transform:translateY(-2px);}
.btn-green{background:var(--green);color:#fff;box-shadow:0 10px 24px -12px rgba(98,124,88,.6);}
.btn-green:hover{background:var(--green-deep);}
.btn-line{background:transparent;color:var(--green-ink);border-color:var(--line);}
.btn-line:hover{border-color:var(--green);color:var(--green-deep);}
.btn-white{background:#fff;color:var(--green-ink);}
.btn-white:hover{background:var(--sage);}

/* ---------- utility bar ---------- */
.utility-bar{background:var(--green-ink);}
.utility-wrap{
  max-width:1240px;margin:0 auto;padding:9px 32px;
  display:flex;justify-content:flex-end;align-items:center;gap:16px;
}
.utility-wrap a{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.7);transition:color .2s ease;
}
.utility-wrap a:hover{color:#fff;}
.utility-wrap .div{color:rgba(255,255,255,.3);font-size:11.5px;}

/* ---------- nav ---------- */
header{
  position:sticky;top:var(--promo-h,0px);z-index:90;
  background:rgba(250,250,246,0.88);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .3s ease;
}
header.scrolled{box-shadow:0 10px 30px -18px rgba(38,48,31,0.25);}
nav{display:flex;align-items:center;justify-content:space-between;padding:18px 32px;max-width:1240px;margin:0 auto;position:relative;}
.logo{position:relative;font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;letter-spacing:0.01em;color:var(--green-ink);}
.logo span{color:var(--green);}
.brand-sub{
  position:absolute;top:100%;right:0;margin-top:1px;
  font-family:'JetBrains Mono',monospace;font-weight:500;
  font-size:10px;letter-spacing:.05em;color:var(--mute);white-space:nowrap;
}
.nav-ctas{display:flex;align-items:center;gap:10px;}
.btn-sm{padding:12px 20px;font-size:13.5px;}
@media (max-width:620px){.nav-ctas .btn-line{display:none;}}
.nav-links{display:flex;gap:32px;font-size:14px;font-weight:500;color:var(--mute);}
.nav-links a{transition:color .2s ease;position:relative;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;background:var(--green);transition:width .25s ease;}
.nav-links a:hover{color:var(--green-ink);}
.nav-links a:hover::after{width:100%;}
.nav-toggle{
  display:none;width:42px;height:42px;padding:0;border:1px solid var(--line);
  border-radius:var(--radius);background:transparent;color:var(--green-ink);
  align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer;
}
.nav-toggle span{display:block;width:18px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease;}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0;}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .nav-links{
    display:none;position:absolute;top:calc(100% + 1px);left:32px;right:32px;
    flex-direction:column;gap:0;padding:10px 18px;background:var(--paper);
    border:1px solid var(--line);box-shadow:var(--shadow);
  }
  .nav-links.open{display:flex;}
  .nav-links a{padding:12px 4px;border-bottom:1px solid var(--line);}
  .nav-links a:last-child{border-bottom:0;}
  .nav-links a::after{display:none;}
}
@media (max-width:620px){
  nav{padding:16px 20px;gap:12px;}
  .nav-links{left:20px;right:20px;}
  .nav-ctas .btn-sm{padding:11px 14px;font-size:12.5px;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;padding:110px 32px 0;overflow:hidden;
  background:
    radial-gradient(900px 480px at 85% -10%, rgba(98,124,88,0.16), transparent 60%),
    radial-gradient(700px 460px at 5% 15%, rgba(201,154,91,0.22), transparent 60%),
    radial-gradient(500px 300px at 60% 90%, rgba(180,103,74,0.08), transparent 65%),
    var(--paper);
}
.hero-inner{max-width:1180px;margin:0 auto;}
.hero h1{
  font-size:clamp(42px,6.4vw,86px);line-height:1.0;font-weight:800;
  max-width:960px;margin-top:26px;
}
.hero h1 .fill{
  background:linear-gradient(100deg,var(--green) 0%, var(--green-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* "scroll." spins on a horizontal skewer run through the word, four fast
   rotations, then it holds still until the 10s cycle comes back around.
   The whole word is one rigid element, so no letter leaves its column. */
.hero h1 .spinword{
  display:inline-block;
  transform-origin:50% 52%;
  transform-style:preserve-3d;
  will-change:transform;
  /* self-contained gradient so the 3D transform can't break the parent's text clip */
  background:linear-gradient(100deg,var(--green) 0%, var(--green-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:scrollSpin 10s linear .75s infinite;
}
@keyframes scrollSpin{
  /* spin occupies the first 1.2s of every 10s pass, then rests upright */
  0%   {transform:perspective(520px) rotateX(0deg);
        animation-timing-function:cubic-bezier(.18,.82,.26,1);}
  12%  {transform:perspective(520px) rotateX(1440deg);}
  100% {transform:perspective(520px) rotateX(1440deg);}
}

/* ---------- desktop call prompt ---------- */
.call-modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:24px;}
.call-modal[hidden]{display:none;}
.call-backdrop{position:absolute;inset:0;background:rgba(18,24,15,.62);backdrop-filter:blur(4px);
  animation:cmFade .28s ease both;}
.call-card{
  position:relative;z-index:2;width:100%;max-width:460px;
  background:var(--paper);border:1px solid var(--line);
  border-top:3px solid var(--amber);
  padding:38px 36px 32px;box-shadow:0 40px 90px -30px rgba(38,48,31,.6);
  animation:cmRise .38s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes cmFade{from{opacity:0;}to{opacity:1;}}
@keyframes cmRise{from{opacity:0;transform:translateY(18px) scale(.97);}to{opacity:1;transform:none;}}
.call-card h3{font-size:27px;font-weight:800;margin:14px 0 10px;}
.call-card p{color:var(--mute);font-size:14.5px;line-height:1.65;margin:0 0 20px;}
.call-number{
  display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(30px,4.2vw,40px);letter-spacing:-0.02em;
  color:var(--amber-ink);margin-bottom:24px;
  transition:color .25s ease;
}
.call-number:hover{color:var(--amber);}
.call-actions{display:flex;gap:12px;flex-wrap:wrap;}
.call-actions .btn{flex:1;justify-content:center;min-width:150px;}
.call-note{margin:14px 0 0;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.04em;color:var(--green);min-height:16px;}
.call-x{
  position:absolute;top:12px;right:14px;background:none;border:none;cursor:pointer;
  font-size:26px;line-height:1;color:var(--mute);padding:4px 8px;
  transition:color .2s ease;
}
.call-x:hover{color:var(--green-ink);}
.hero .lede{margin-top:26px;font-size:18px;line-height:1.65;max-width:580px;color:var(--mute);}
.hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}

.hero-stage{
  /* Freestanding, framed, and lifted clear of the green band it used to
     sit flat on top of. The frame is the gradient itself: a padded
     wrapper whose background shows as a border around the footage. */
  margin-top:96px;margin-bottom:56px;position:relative;
  padding:10px;border-radius:16px;
  background:linear-gradient(118deg,
    var(--green-deep) 0%, var(--green) 38%,
    var(--amber) 78%, var(--amber-deep) 100%);
  box-shadow:
    0 2px 4px rgba(38,48,31,.16),
    0 30px 70px -30px rgba(38,48,31,.55);
  /* The ratio has to stay: the footage inside is absolutely positioned,
     so without it the stage has no height and collapses to a strip. */
  aspect-ratio:16/7;overflow:visible;
}

.hero-stage .hero-media{
  /* Inset by the frame width so the gradient behind shows as a border
     around the footage rather than being covered by it. */
  /* Explicit width and height: a video is a replaced element, so
     width:auto sizes it to the file's own 1600x900 and ignores the
     insets entirely. */
  position:absolute;top:10px;left:10px;
  width:calc(100% - 20px);height:calc(100% - 20px);
  border-radius:9px;z-index:1;
  object-fit:cover;object-position:center 35%;
}
.hero-stage .reticle{inset:10px;z-index:2;}
.hero-stage .exif-tag{z-index:3;}
.hero-stage::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(38,48,31,0.1) 0%, rgba(38,48,31,0) 40%, rgba(38,48,31,0.35) 100%);
  pointer-events:none;
}
.hero-stage .reticle{
  position:absolute;top:30%;left:58%;width:70px;height:70px;
  border:1.5px solid var(--green);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  animation:pulse 3.2s ease-in-out infinite;
}
.hero-stage .reticle::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(98,124,88,.28);}50%{box-shadow:0 0 0 14px rgba(98,124,88,0);}}
.hero-stage .exif-tag{
  position:absolute;bottom:16px;left:22px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;opacity:.85;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.hero-stage .exif-tag2{left:auto;right:22px;}

/* ---------- stat strip ---------- */
.strip{
  background:
    radial-gradient(700px 320px at 85% 120%, rgba(201,154,91,.22), transparent 70%),
    var(--green-ink);
  color:#fff;padding:0;position:relative;overflow:hidden;
}
.strip::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green) 0%, var(--amber) 45%, var(--clay) 70%, var(--green) 100%);
}
.strip-grid{
  max-width:1180px;margin:0 auto;padding:48px 32px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative;
}
.stat{position:relative;padding-left:18px;}
.stat::before{
  content:"";position:absolute;left:0;top:4px;bottom:22px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,var(--amber),transparent);
}
.stat .num{font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(28px,3.2vw,42px);color:#EFF3E9;}
.stat .num b{color:var(--amber);font-weight:800;}
.stat .lab{margin-top:6px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);}
@media (max-width:760px){.strip-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px;}}

/* ---------- generic section ---------- */
section{padding:110px 0;scroll-margin-top:calc(96px + var(--promo-h,0px));}
.head{margin-bottom:56px;}
.head h2{font-size:clamp(30px,4vw,48px);font-weight:800;margin-top:18px;max-width:720px;}
.head p{color:var(--mute);max-width:560px;font-size:16px;line-height:1.65;margin-top:16px;}

/* ---------- three doors ---------- */
.doors{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
/* monthly lane sits slightly wider, it's the one we want chosen */
@media (min-width:981px){
  .doors{grid-template-columns:1fr 1.14fr 1fr;align-items:center;}
}
.door{
  background:#fff;border:1px solid var(--line);padding:40px 34px;
  display:flex;flex-direction:column;min-height:360px;position:relative;overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.door::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--clay));
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.door:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--amber-soft);}
.door:hover::before{transform:scaleX(1);}
.door .tag{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-deep);}
.door h3{font-size:23px;font-weight:700;margin:18px 0 12px;}
.door p{color:var(--mute);font-size:14.5px;line-height:1.65;flex:1;margin:0 0 26px;}
.door .go{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--green);
  display:inline-flex;gap:8px;align-items:center;transition:color .25s ease;
}
.door .go::after{content:"→";transition:transform .25s ease;}
.door:hover .go{color:var(--amber-deep);}
.door:hover .go::after{transform:translateX(5px);}
.door.dark{background:var(--green);border-color:var(--green);}
.door.dark h3,.door.dark .go{color:#fff;}
.door.dark .tag{color:#F3D9AF;}
.door.dark p{color:rgba(255,255,255,.82);}
.door.dark:hover{border-color:var(--amber);}
.door.dark:hover .go{color:#F3D9AF;}
/* gold-outlined door */
.door.gold-edge{
  border:2px solid var(--amber);
  box-shadow:0 18px 44px -28px rgba(201,154,91,.75);
}
.door.gold-edge::before{transform:scaleX(1);}
.door.gold-edge:hover{border-color:#DDB077;box-shadow:0 26px 60px -26px rgba(201,154,91,.85);}

/* ---------- lane doors with the logo fading into a photo ---------- */
.lane-lede{
  margin:16px 0 0;color:var(--mute);font-size:15.5px;line-height:1.7;max-width:58ch;
}
.doors{align-items:stretch;}
.door.lane{padding:0;min-height:340px;}
.door-shot{
  position:relative;margin:0;flex:0 0 132px;overflow:hidden;background:var(--green-ink);
  display:flex;align-items:center;justify-content:center;
}
.door-shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  opacity:.5;filter:saturate(.85);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
.door.lane:hover .door-shot img{opacity:.78;filter:none;transform:scale(1.06);}
/* the fade: photo dissolves into the card body below it */
.door-shot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(38,48,31,.15) 0%, rgba(38,48,31,.42) 55%, #fff 100%);
}
.door.dark .door-shot::after{
  background:linear-gradient(180deg, rgba(38,48,31,.15) 0%, rgba(38,48,31,.45) 55%, var(--green) 100%);
}
.door-mark{
  position:relative;z-index:2;
  font-family:'Montserrat',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:15px;line-height:1;color:rgba(255,255,255,.82);letter-spacing:.02em;
  text-shadow:0 1px 12px rgba(38,48,31,.6);
  transition:opacity .5s cubic-bezier(.2,.7,.3,1);
}
.door-mark span{color:#A9C29B;transition:color .45s ease;}
.door.lane:hover .door-mark{opacity:1;}
.door.lane:hover .door-mark span{color:var(--amber);}
.door-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1;}
.door.lane h3{margin:12px 0 8px;font-size:20px;}
.door.lane p{margin-bottom:18px;font-size:13.5px;}

/* the monthly lane is the one we want them in */
.door.feature{position:relative;}
.door-flag{
  position:absolute;top:0;left:0;right:0;z-index:5;padding:7px 10px;text-align:center;
  background:linear-gradient(100deg,var(--amber-deep),var(--amber));
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.door.feature .door-shot{flex-basis:150px;padding-top:26px;}
@media (min-width:981px){
  .door.feature{transform:translateY(-14px);}
  .door.feature:hover{transform:translateY(-20px);}
}
@media (max-width:980px){
  .doors{grid-template-columns:1fr;}
  .door.lane{min-height:0;}
  .door-shot{flex-basis:180px;}
  .door.feature .door-shot{flex-basis:200px;}
}
@media (max-width:900px){.doors{grid-template-columns:1fr;}}

/* ---------- services ticker ---------- */
.ticker-wrap{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;position:relative;
  background:linear-gradient(90deg,#fff 0%,#FFFCF5 50%,#fff 100%);
  /* breathing room so it isn't jammed against the hero video */
  margin-top:64px;
}
@media (max-width:760px){.ticker-wrap{margin-top:40px;}}
.ticker-wrap::before,.ticker-wrap::after{
  content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none;
}
.ticker-wrap::before{left:0;background:linear-gradient(90deg,var(--paper),transparent);}
.ticker-wrap::after{right:0;background:linear-gradient(270deg,var(--paper),transparent);}
.ticker{display:flex;gap:14px;white-space:nowrap;animation:scroll 38s linear infinite;width:max-content;}
.ticker-wrap:hover .ticker{animation-play-state:paused;}
.ticker .tk{
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.05em;text-transform:uppercase;color:var(--green-ink);
  display:inline-flex;gap:10px;align-items:center;
  padding:9px 20px;border:1px solid var(--line);border-radius:100px;
  background:#fff;transition:all .3s cubic-bezier(.2,.7,.3,1);
  cursor:pointer;text-decoration:none;
}
.ticker .tk svg{width:17px;height:17px;flex-shrink:0;stroke:var(--green);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s ease, transform .45s cubic-bezier(.2,.7,.3,1);}
.ticker .tk:hover{
  border-color:var(--amber);color:var(--amber-deep);
  background:#FFFBF3;transform:translateY(-3px);
  box-shadow:0 10px 22px -12px rgba(201,154,91,.65);
}
.ticker .tk:hover svg{stroke:var(--amber);transform:rotate(-12deg) scale(1.14);}
@keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- pricing ---------- */
.pricing{background:var(--sage);}
.sqft-toggle{
  display:inline-flex;background:#fff;border:1px solid var(--line);
  border-radius:100px;padding:5px;gap:4px;margin-top:30px;
}
.sqft-toggle button{
  font-family:'JetBrains Mono',monospace;font-size:12.5px;letter-spacing:.04em;
  border:none;background:transparent;color:var(--mute);
  padding:10px 20px;border-radius:100px;cursor:pointer;
  transition:background .25s ease,color .25s ease;
}
.sqft-toggle{flex-wrap:wrap;}
.sqft-toggle button.on{background:var(--green);color:#fff;}
@media (max-width:760px){
  .sqft-toggle{
    display:grid;grid-template-columns:1fr 1fr;gap:6px;
    border-radius:var(--radius);width:100%;padding:6px;
  }
  .sqft-toggle button{border-radius:var(--radius);padding:11px 8px;text-align:center;}
}
.tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:52px;}
.tier{
  background:#fff;border:1px solid var(--line);padding:42px 22px 30px;
  display:flex;flex-direction:column;position:relative;
  transition:transform .3s ease, box-shadow .3s ease;
}
.tier:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
.tier.feat{border-color:var(--green);border-width:2px;}
.tier.gold{border-color:var(--amber);border-width:2px;background:linear-gradient(180deg,#FFFDF8 0%,#fff 55%);}

.tier .best{
  position:absolute;top:-13px;left:22px;background:var(--green);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:5px 12px;border-radius:2px;white-space:nowrap;
}
.tier.gold .best{background:var(--amber);}
.tier h3{font-size:18px;font-weight:800;line-height:1.2;}
.tier.gold h3{color:#8A6224;}
.tier .sub{font-size:12.5px;color:var(--mute);margin-top:6px;line-height:1.45;min-height:76px;}
/* one line always, so every card's price sits on the same baseline */
.tier .save{white-space:nowrap;min-height:20px;
  display:inline-block;margin-top:12px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);
}
.tier.gold .save{color:var(--amber);}
.save .bestval{
  display:inline-block;margin-left:6px;padding:3px 8px;border-radius:2px;
  background:var(--amber);color:#fff;font-style:normal;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.1em;
}
.tier .price{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;
  margin:10px 0 2px;color:var(--green-ink);
  transition:opacity .2s ease;
}
.tier.gold .price{color:#8A6224;}
.tier .price.flash{opacity:0;}
.tier .price small{font-size:13px;font-weight:500;color:var(--mute);}
.tier ul{list-style:none;margin:20px 0 26px;padding:0;flex:1;}
.tier li{font-size:13px;padding:8px 0;border-top:1px solid var(--line);display:flex;gap:9px;line-height:1.4;}
.tier li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0;}
.tier.gold li::before{color:var(--amber);}
.tier.gold .btn-green{
  background:linear-gradient(135deg,var(--amber) 0%, var(--amber-deep) 100%);
  color:#fff;box-shadow:0 10px 24px -12px rgba(168,119,53,.75);
}
.tier.gold .btn-green:hover{background:linear-gradient(135deg,#D6A96A 0%, #96692D 100%);}
.tier li.no{color:var(--mute);opacity:.55;}
.tier li.no::before{content:"✕";color:var(--mute);font-weight:600;}
.tier.gold li.no::before{color:var(--mute);}
@media (max-width:1100px){.tiers{grid-template-columns:repeat(3,1fr);gap:18px;}}
@media (max-width:820px){.tiers{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;}.tier .sub{min-height:0;}}
.custom-note{
  margin-top:26px;font-size:13.5px;color:var(--mute);
  font-family:'JetBrains Mono',monospace;letter-spacing:.02em;
}

/* ---------- individual services ---------- */
.svc-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--paper);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.svc{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.svc{
  background:var(--paper);padding:30px 26px;display:flex;flex-direction:column;
  position:relative;transition:background .25s ease;
}
.svc::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent);
  transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.svc:hover{background:var(--amber-wash);}
.svc:hover::before{transform:scaleX(1);}
.svc h4{
  font-size:19.5px;font-weight:800;letter-spacing:-0.02em;
  margin-bottom:8px;display:flex;align-items:center;gap:11px;line-height:1.25;
}
.svc h4 .sico{
  width:34px;height:34px;flex-shrink:0;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber-soft);
  transition:background .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.svc h4 .sico svg{
  width:18px;height:18px;stroke:var(--amber-ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease;
}
.svc:hover h4 .sico{background:var(--amber);transform:rotate(-8deg) scale(1.08);}
.svc:hover h4 .sico svg{stroke:#fff;}
.svc .svc-note{font-size:12.5px;color:var(--mute);line-height:1.55;margin:0 0 16px;}
.svc dl{margin:0;padding:0;border-top:1px solid var(--line);}
.svc .rowp{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line);
}
.svc .rowp dt{font-size:12.5px;color:var(--mute);font-family:'JetBrains Mono',monospace;letter-spacing:.01em;}
.svc .rowp dt .rsub{
  display:block;margin-top:3px;font-family:'Inter',sans-serif;
  font-size:11px;letter-spacing:0;color:var(--mute);opacity:.78;line-height:1.4;
}
.svc .rowp dd{margin:0;font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--green-deep);white-space:nowrap;}
.svc .rowp.add dt{color:var(--amber-deep);}
.svc .rowp.add dd{color:var(--amber-deep);}
/* most-ordered row */
.svc .rowp.pick{
  position:relative;margin:2px -12px;padding:9px 12px;
  background:linear-gradient(90deg, rgba(201,154,91,.16), rgba(201,154,91,.05));
  border:1px solid var(--amber);border-radius:3px;
}
.svc .rowp.pick dt{color:var(--amber-ink);font-weight:500;}
.svc .rowp.pick dd{color:var(--amber-ink);font-size:14.5px;}
.svc .rowp.pick .pin{
  position:absolute;top:-8px;left:10px;
  background:var(--amber);color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:8.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 7px;border-radius:2px;line-height:1.4;
}
.svc .rowp.pick + .rowp{border-top:1px solid var(--line);}
@media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr;}}

/* ---------- interactive "the whole shoot" tile ---------- */
.svc.demo{
  background:var(--green-ink);cursor:pointer;user-select:none;
  justify-content:space-between;min-height:100%;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.svc.demo::before{display:none;}
.svc.demo:hover{background:#1E2618;}
.svc.demo h4{color:#fff;}
.svc.demo h4 .sico{background:rgba(201,154,91,.22);}
.svc.demo h4 .sico svg{stroke:var(--amber);}
.svc.demo .svc-note{color:rgba(255,255,255,.6);}
.demo-stage{
  position:relative;width:100%;aspect-ratio:4/3;margin:6px 0 14px;
  border:1px solid rgba(255,255,255,.16);overflow:hidden;background:#0F140C;
}
.demo-stage .frame{
  position:absolute;inset:0;opacity:0;transform:scale(1.06);
  transition:opacity .55s ease, transform .7s cubic-bezier(.2,.7,.3,1);
}
.demo-stage .frame.on{opacity:1;transform:none;}
.demo-stage svg{width:100%;height:100%;display:block;}
.demo-stage .frame img{width:100%;height:100%;object-fit:cover;display:block;}
.demo-stage .frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg, rgba(18,24,15,.45) 0%, transparent 28%, transparent 62%, rgba(18,24,15,.6) 100%);
}
.demo-stage .frame[data-f="3"]::after{display:none;}
.demo-logo{
  position:absolute;inset:0;background:#12180F;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.demo-logo .dl-mark{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(20px,2.1vw,27px);
  color:#fff;letter-spacing:-0.01em;line-height:1;
}
.demo-logo .dl-mark span{color:#A9C29B;}
.demo-logo .dl-sub{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;
  color:var(--amber);margin-left:52px;
}
.demo-logo .dl-tag{
  margin-top:14px;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);
}
.demo-hook{
  display:inline-block;margin-top:6px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;
  color:var(--amber);letter-spacing:-0.01em;
}
.demo-hud{
  position:absolute;left:10px;bottom:8px;z-index:3;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);
}
.demo-rec{
  position:absolute;right:10px;top:8px;z-index:3;
  display:flex;align-items:center;gap:5px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.14em;
  color:rgba(255,255,255,.75);
}
.demo-rec i{width:6px;height:6px;border-radius:50%;background:#D9534F;animation:rec 1.6s ease-in-out infinite;}
.demo-cta{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--amber);
}
.demo-cta .dot{
  width:20px;height:20px;border-radius:50%;border:1px solid var(--amber);
  display:inline-flex;align-items:center;justify-content:center;font-size:11px;
  transition:background .3s ease,color .3s ease;
}
.svc.demo:hover .demo-cta .dot{background:var(--amber);color:var(--green-ink);}
.demo-dots{display:flex;gap:5px;margin-left:auto;}
.demo-dots span{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.25);transition:background .3s ease;}
.demo-dots span.on{background:var(--amber);}

/* ---------- a la carte ---------- */
.alacarte{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  background:var(--paper);
  border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.ala{border-right:1px solid var(--line);border-bottom:1px solid var(--line);}
.ala{background:var(--paper);transition:background .25s ease;position:relative;}
.ala:hover{background:var(--amber-wash);}
.ala.open{background:var(--amber-wash);}
.ala.open::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--amber),transparent);
}
.ala-row{
  padding:26px 26px;cursor:pointer;
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
}
.ala .n{font-size:14.5px;font-weight:500;line-height:1.4;}
.ala .n small{display:block;color:var(--mute);font-weight:400;font-size:12px;margin-top:3px;}
.ala-right{display:flex;align-items:center;gap:14px;}
.ala .p{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--green-deep);white-space:nowrap;}
.ala .toggle{
  width:20px;height:20px;border:1px solid var(--line);border-radius:50%;flex-shrink:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;line-height:1;color:var(--amber-deep);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .3s ease, background .3s ease, color .3s ease;
}
.ala:hover .toggle{border-color:var(--amber);}
.ala.open .toggle{transform:rotate(135deg);border-color:var(--amber);background:var(--amber);color:#fff;}
.ala-desc{
  max-height:0;overflow:hidden;opacity:0;margin:0;padding:0 26px;
  color:var(--mute);font-size:13.5px;line-height:1.65;
  transition:max-height .35s ease, opacity .3s ease, padding-bottom .35s ease;
}
.ala.open .ala-desc{max-height:240px;opacity:1;padding-bottom:24px;}
@media (max-width:900px){.alacarte{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.alacarte{grid-template-columns:1fr;}}

/* ---------- brand tile: spans the full last row of the add-ons grid ---------- */
.ala.brandtile{
  grid-column:1 / -1;
  background:var(--green-ink);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;
  min-height:190px;overflow:hidden;position:relative;cursor:default;
  border-right:1px solid var(--line);border-bottom:1px solid var(--line);
}
.ala.brandtile:hover{background:var(--green-ink);}
.ala.brandtile::before{display:none;}
.bt-shot{margin:0;position:relative;overflow:hidden;}
.bt-shot img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.42;filter:saturate(.8);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .9s cubic-bezier(.2,.7,.3,1), filter .6s ease;
}
.ala.brandtile:hover .bt-shot img{opacity:.72;filter:none;transform:scale(1.05);}
.bt-left::after,.bt-right::after{
  content:"";position:absolute;inset:0;pointer-events:none;
}
.bt-left::after{background:linear-gradient(90deg, rgba(38,48,31,.35), var(--green-ink));}
.bt-right::after{background:linear-gradient(270deg, rgba(38,48,31,.35), var(--green-ink));}
.bt-inner{
  text-align:center;position:relative;z-index:3;
  display:flex;flex-direction:column;justify-content:center;
  padding:28px 40px;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.ala.brandtile:hover .bt-inner{transform:scale(1.05);}
.bt-logo{
  display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(28px,3.4vw,44px);line-height:1;
  color:#fff;letter-spacing:-0.02em;white-space:nowrap;
}
.bt-logo span{color:#A9C29B;transition:color .45s ease;}
.ala.brandtile:hover .bt-logo span{color:var(--amber);}
.bt-logo small{
  display:block;text-align:right;margin-top:4px;
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:14px;
  letter-spacing:.06em;color:rgba(255,255,255,.55);
}
.bt-sub{
  display:block;margin-top:16px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.28em;
  text-transform:uppercase;color:var(--amber);opacity:.85;
}
@media (max-width:700px){
  .ala.brandtile{grid-template-columns:1fr;min-height:150px;}
  .bt-shot{display:none;}
}

/* ---------- service pricing, tucked behind a click ---------- */
.svc-prices{margin-top:14px;border-top:1px solid var(--line);}
.svc-prices summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:10px 0 2px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--green);
}
.svc-prices summary::-webkit-details-marker{display:none;}
.svc-prices summary span::after{content:" +";font-size:13px;}
.svc-prices[open] summary span::after{content:" –";}
.svc-prices summary i{font-style:normal;color:var(--amber-deep);letter-spacing:0;text-transform:none;font-size:12px;}
.svc-prices summary:hover{color:var(--green-deep);}
.svc-prices dl{margin-top:6px;}

/* ---------- which package fits ---------- */
.picker{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  margin-top:34px;padding:16px 20px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:3px;
}
.picker-k{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);white-space:nowrap;
}
.picker ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;flex-wrap:wrap;flex:1;}
.picker li{font-size:13px;color:var(--mute);line-height:1.4;}
.picker li b{display:block;color:var(--green-ink);font-weight:600;font-size:13.5px;}
@media (max-width:900px){.picker ul{gap:14px;}.picker li{flex:1 1 45%;}}

/* ---------- build your own, package #6 ---------- */
.byo{margin-top:34px;padding:30px 26px 34px;background:var(--white);
     border:1px solid var(--line);border-radius:3px;}
.byo-head{text-align:center;max-width:60ch;margin:0 auto;}
.byo-head h3{font-size:clamp(21px,2.4vw,27px);font-weight:800;margin:10px 0 8px;}
.byo-head p{color:var(--mute);font-size:14.5px;line-height:1.6;margin:0;}
.byo-sq{margin:20px 0 24px;display:flex;justify-content:center;}
.byo-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;}
/* square footage reads as the first step, bigger than the rest */
.byo-chip{padding:11px 19px;border:1.5px solid var(--line);border-radius:100px;background:var(--white);
  font-size:14px;font-weight:600;cursor:pointer;transition:.18s;}
.byo-chip:hover{border-color:var(--green);color:var(--green-deep);}
.byo-chip.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600;}

/* stage: bubbles | card | bubbles */
.byo-stage{display:grid;grid-template-columns:1fr 300px 1fr;gap:20px;align-items:start;}
@media (max-width:1000px){.byo-stage{grid-template-columns:1fr;}}
.byo-side{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start;justify-content:center;}
@media (min-width:1001px){
  #byoLeft{justify-content:flex-end;}
  #byoRight{justify-content:flex-start;}
}
.bub{
  padding:9px 15px;border:1px solid var(--line);border-radius:100px;background:var(--white);
  font-size:13px;color:var(--text);cursor:pointer;transition:.18s;line-height:1.2;
}
.bub:hover{border-color:var(--green);color:var(--green-deep);transform:translateY(-1px);}
.bub.on{background:var(--green);border-color:var(--green);color:#fff;font-weight:600;}
.bub.on::before{content:"✓ ";font-size:11px;}

/* the card itself, same shape as the packages above */
.byo-card{
  background:var(--white);border:2px solid var(--amber);border-radius:3px;
  padding:26px 22px;display:flex;flex-direction:column;
  box-shadow:0 20px 50px -26px rgba(201,154,91,.5);
}
.byo-card h4{font-size:17px;font-weight:800;color:var(--amber-ink);margin-bottom:14px;}
.byo-lines{max-height:220px;overflow-y:auto;margin-bottom:12px;}
.byo-line{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px dashed var(--line);font-size:13px;color:var(--mute);}
.byo-line b{color:var(--green-ink);font-family:'Montserrat',sans-serif;}
.byo-empty{margin:0;font-size:13px;color:var(--mute);}
.byo-total{display:flex;justify-content:space-between;align-items:baseline;
  padding-top:12px;border-top:2px solid var(--green-ink);}
.byo-total span{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;color:var(--green-ink);}
.byo-total b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:30px;color:var(--green-ink);letter-spacing:-.03em;}
.byo-vs{margin:10px 0 0;padding:8px 10px;border-radius:3px;background:var(--amber-soft);
  font-size:12px;line-height:1.5;color:var(--amber-ink);}
.byo-vs b{color:var(--green-ink);}
.byo-go{display:block;text-align:center;margin-top:14px;}
.byo-clear{display:block;width:100%;margin-top:10px;padding:9px;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;color:var(--clay);}
.byo-clear:hover{background:var(--red-soft,#F7E5DF);border-color:var(--clay);}

/* ---------- bubble buckets ---------- */
.bucket{
  width:100%;padding:12px 13px 13px;border-radius:6px;
  background:var(--paper);border:1px solid var(--line);margin-bottom:12px;
}
.bucket-h{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--green-deep);
}
.bucket-h i{
  font-style:normal;min-width:17px;height:17px;padding:0 5px;border-radius:20px;
  background:var(--green);color:#fff;font-size:10px;
  display:inline-flex;align-items:center;justify-content:center;
}
.bucket-b{display:flex;flex-wrap:wrap;gap:6px;}
.bucket-photo {border-left:3px solid var(--green);}
.bucket-video {border-left:3px solid var(--amber);}
.bucket-aerial{border-left:3px solid var(--blue,#5B7A8C);}
.bucket-plans {border-left:3px solid var(--green-deep);}
.bucket-extras{border-left:3px solid var(--clay);}
.byo-side{align-content:flex-start;}
@media (min-width:1001px){#byoLeft,#byoRight{justify-content:stretch;display:block;}}

/* ---------- monthly: what one price covers ---------- */
.covers{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0 16px;position:relative;
}
@media (max-width:820px){.covers{grid-template-columns:1fr;gap:10px;}}
.cover{
  padding:20px 18px;text-align:center;background:var(--white);
  border:2px solid var(--line);border-radius:6px;
  transition:border-color .45s ease, box-shadow .45s ease, transform .45s ease;
}
/* the ring lands here as it bounces along */
.cover.lit{
  border-color:var(--amber);
  /* colour stays gold; only the scale changes */
  box-shadow:0 0 0 4px rgba(201,154,91,.16), 0 16px 40px -26px rgba(201,154,91,.8);
  transform:translateY(-4px);
}
/* …and every card stays gold once it has visited all three */
.covers.all .cover{
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(201,154,91,.12);
  transform:none;
}
.covers.all .cover-ic svg{stroke:var(--amber-deep);}
.covers.all .cover b{color:var(--amber-ink);}

.cover-ic{display:block;width:56px;height:56px;margin:0 auto 10px;}
.cover-ic svg{
  width:100%;height:100%;fill:none;stroke:var(--amber-deep);   /* gold, always */
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:stroke .45s ease;
}
.cover.lit .cover-ic svg{stroke:var(--amber-deep);}  /* stays gold */
.f-roof{fill:rgba(201,154,91,.16);}
.f-door,.f-win,.f-chim{fill:rgba(201,154,91,.12);}
.f-screen{fill:rgba(201,154,91,.10);}
.f-note-d{fill:currentColor;stroke:none;}
.f-mic{fill:rgba(201,154,91,.12);}
.covers.all .f-roof,.covers.all .f-door,.covers.all .f-win,
.covers.all .f-chim,.covers.all .f-screen,.covers.all .f-mic{fill:rgba(201,154,91,.14);}

.cover b{
  display:block;font-family:'Montserrat',sans-serif;font-size:16px;
  color:var(--amber-ink);margin-bottom:5px;                    /* gold, always */
}
.cover p{margin:0;font-size:13px;line-height:1.5;color:var(--mute);}
.covers-all{
  /* This is the line that tells somebody all three come with every plan.
     It was 13px amber on cream at the bottom of a busy card, which is
     where a reader's eye is least likely to be. It gets a band now. */
  grid-column:1/-1;margin:18px 0 0;text-align:center;
  padding:15px 18px;border-radius:9px;
  background:linear-gradient(100deg,
    var(--green-deep) 0%, var(--green) 62%, var(--amber-deep) 100%);
  font-family:'JetBrains Mono',monospace;
  font-size:15px;letter-spacing:.14em;font-weight:700;
  text-transform:uppercase;color:#fff;
  opacity:0;transition:opacity .5s ease;
}
.covers-all b{color:#fff;}
@media (max-width:600px){
  .covers-all{font-size:13px;letter-spacing:.1em;padding:13px 14px;}
}
.covers-all b{font-weight:800;color:#FFFFFF;}
.covers.all .covers-all{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .cover.lit{transform:none;}
  .covers-all{opacity:1;}
}

/* ---------- monthly: legacy one-price block (light) ---------- */
.onepay{margin:40px 0 26px;}
.onepay-in{display:flex;flex-direction:column;align-items:center;margin-bottom:6px;}
.onepay-lbl{
  display:inline-block;padding:9px 22px;border-radius:100px;
  background:linear-gradient(100deg,var(--amber-deep),var(--amber));color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
}
.onepay-arrow{width:2px;height:26px;background:linear-gradient(180deg,var(--amber),transparent);}
.onepay-out{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media (max-width:900px){.onepay-out{grid-template-columns:1fr;}}
.opay{
  padding:26px 24px;background:var(--white);
  border:1px solid var(--line);border-radius:3px;
  display:flex;flex-direction:column;
}
.opay.hero{
  background:linear-gradient(180deg,var(--amber-wash),var(--white) 60%);
  border-color:var(--amber);border-width:2px;
  box-shadow:0 18px 44px -30px rgba(201,154,91,.7);
}
.opay-n{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(34px,4vw,46px);
  line-height:1;color:var(--green-ink);letter-spacing:-.03em;
}
.opay.hero .opay-n{color:var(--amber-ink);}
.opay b{display:block;margin:12px 0 8px;font-family:'Montserrat',sans-serif;font-size:15px;color:var(--green-ink);}
.opay p{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--mute);flex:1;}
.opay-tag{
  align-self:flex-start;padding:5px 11px;border-radius:100px;
  background:var(--sage);color:var(--green-deep);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
}
.opay-tag.gold{background:var(--amber);color:#fff;}
.onepay-foot{margin:20px 0 0;text-align:center;font-size:14.5px;color:var(--mute);}

/* two kinds of video, compact strip */
.intent{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch;margin:22px 0 16px;}
@media (max-width:820px){.intent{grid-template-columns:1fr;}.intent-vs{justify-self:center;}}
.intent-col{padding:14px 18px;border:1px solid var(--line);border-radius:3px;background:var(--white);}
.intent-col.gold{border-color:var(--amber);background:var(--amber-wash);}
.intent-k{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--amber-deep);
}
.intent-col b{display:block;margin:6px 0 3px;font-family:'Montserrat',sans-serif;font-size:16px;color:var(--green-ink);}
.intent-col>span:last-child{font-size:13px;line-height:1.5;color:var(--mute);}
.intent-vs{
  align-self:center;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute);
}

/* camera-shy, one line */
.shy{
  margin:0 0 22px;padding:12px 16px;border-radius:3px;
  border-left:3px solid var(--amber);background:var(--amber-wash);
  font-size:13.5px;line-height:1.6;color:var(--mute);
}
.shy b{color:var(--green-ink);}

/* definitions tucked away */
.defs{margin:22px 0 10px;border-top:1px solid var(--line);padding-top:14px;}
.defs summary{
  cursor:pointer;list-style:none;padding:12px 16px;border-radius:3px;
  background:var(--white);border:1px solid var(--amber);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;letter-spacing:0;
  color:var(--amber-ink);display:flex;align-items:center;gap:10px;transition:.2s;
}
.defs summary:hover{background:var(--amber-wash);}
.defs summary::-webkit-details-marker{display:none;}
.defs summary::before{content:"+";font-size:15px;line-height:1;width:14px;}
.defs[open] summary::before{content:"–";}
.defs summary:hover{color:var(--green-deep);}

/* ---------- monthly / accelerator (LIGHT) ---------- */
.accel{
  background:linear-gradient(180deg, var(--sage) 0%, var(--paper) 62%);
  color:var(--text);position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.accel::before{
  content:"";position:absolute;top:-220px;right:-220px;width:640px;height:640px;
  border-radius:50%;background:radial-gradient(circle, rgba(201,154,91,.14), transparent 65%);
}
.accel .head h2{color:var(--green-ink);}
.accel .head p{color:var(--mute);}
.accel .exif{color:var(--amber-deep);}
.accel .exif::before{background:linear-gradient(90deg,var(--amber),var(--green));}
.accel-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative;}
/* Four plans do not fit three abreast. Two-up before the single column so the
   cards never get squeezed into unreadable slivers on a tablet. */
@media (max-width:1180px){.accel-grid{grid-template-columns:repeat(2,1fr);gap:20px;}}
.plan{
  background:var(--white);border:1px solid var(--line);border-radius:3px;
  padding:30px 22px;display:flex;flex-direction:column;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.plan:hover{border-color:var(--green);transform:translateY(-5px);box-shadow:var(--shadow);}
.plan h3{color:var(--green-ink);font-size:19px;}
.plan .for{font-size:13px;color:var(--green);margin-top:6px;font-family:'JetBrains Mono',monospace;letter-spacing:.04em;}
.plan .price{font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;margin:20px 0 0;color:var(--green-ink);letter-spacing:-.02em;}
.plan .price small{font-size:14px;font-weight:500;color:var(--mute);}
.plan ul{list-style:none;margin:24px 0 30px;padding:0;flex:1;}
.plan li{font-size:14px;padding:9px 0;border-top:1px solid var(--line);display:flex;gap:10px;color:var(--text);line-height:1.5;}
.plan li::before{content:", ";color:var(--amber-deep);flex-shrink:0;}
.plan li strong{color:var(--green-ink);}
.accel .btn-white{background:var(--green);color:#fff;}
.accel .btn-white:hover{background:#6E8A63;}
/* gold-highlighted plan */
.plan.gold{
  position:relative;
  background:linear-gradient(180deg, var(--amber-wash) 0%, var(--white) 58%);
  border-color:var(--amber);border-width:2px;
  box-shadow:0 20px 50px -26px rgba(201,154,91,.5);
}
.plan.gold:hover{border-color:var(--amber-deep);box-shadow:0 26px 60px -26px rgba(201,154,91,.65);}
.plan.gold .best{
  position:absolute;top:-13px;left:28px;background:linear-gradient(100deg,var(--amber-deep),var(--amber));color:#fff;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
  font-weight:500;text-transform:uppercase;padding:5px 12px;border-radius:2px;white-space:nowrap;
}
.plan.gold h3{color:var(--amber-ink);}
.plan.gold .for{color:var(--amber-deep);}
.plan.gold .price{color:var(--amber-ink);}
.plan.gold li::before{content:"\25C6";font-size:9px;color:var(--amber);}
.plan.gold .btn-white{background:linear-gradient(100deg,var(--amber-deep),var(--amber));color:#fff;}
.plan.gold .btn-white:hover{filter:brightness(1.07);}
@media (max-width:900px){.accel-grid{grid-template-columns:1fr;}
  .plan{padding:34px 28px;} .plan .price{font-size:40px;} .plan h3{font-size:21px;}}
.accel-cta{margin-top:40px;position:relative;}
.accel-foot{margin-top:24px;font-size:13.5px;color:var(--mute);max-width:640px;line-height:1.6;}
.split-def{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:18px;}
.split-def p{margin:10px 0 0;color:var(--mute);font-size:14px;line-height:1.65;}
.split-def .exif{color:var(--amber-deep);}
@media (max-width:820px){.split-def{grid-template-columns:1fr;gap:22px;}}

/* ---------- commercial ---------- */
.comm-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center;}
.comm-visual{
  aspect-ratio:4/3.4;background:var(--green-ink);position:relative;overflow:hidden;
  box-shadow:var(--shadow);
}
.comm-visual img{width:100%;height:100%;object-fit:cover;display:block;}
.comm-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(38,48,31,0) 55%, rgba(38,48,31,0.65) 100%);
}
.comm-visual .tag{
  position:absolute;left:20px;bottom:18px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.2em;
  color:#A9C29B;text-transform:uppercase;
}
.comm-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:30px 0 26px;padding:22px 0;
  border-top:1px solid var(--amber-soft);border-bottom:1px solid var(--amber-soft);
}
.cstat{display:block;}
.cstat .cnum{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:clamp(26px,3.2vw,36px);
  color:var(--amber-ink);line-height:1;
}
.cstat .cplus{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;
  color:var(--amber);margin-left:1px;
}
.cstat .clab{
  display:block;margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--mute);
  letter-spacing:.04em;text-transform:uppercase;
}
@media (max-width:560px){.comm-stats{grid-template-columns:1fr;gap:20px;}}
.cred{display:grid;grid-template-columns:1fr 1fr;gap:12px 30px;margin:30px 0 36px;padding:0;list-style:none;}
.cred li{
  font-size:14.5px;padding:11px 0;border-top:1px solid var(--line);
  display:flex;gap:10px;align-items:baseline;
}
.cred li::before{content:"◆";color:var(--amber);font-size:9px;flex-shrink:0;}
@media (max-width:920px){.comm-grid{grid-template-columns:1fr;}}

/* ---------- multi-year badge on the commercial image ---------- */
.tl-badge{
  position:absolute;top:16px;right:16px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(18,24,15,.72);backdrop-filter:blur(6px);
  border:1px solid rgba(201,154,91,.5);border-radius:100px;padding:7px 14px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#F3D9AF;
}
.tl-badge i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:rec 2s ease-in-out infinite;}

/* ---------- project lifecycle timeline ---------- */
.lifecycle{margin-top:84px;padding-top:56px;border-top:1px solid var(--line);}
.lc-head{margin-bottom:40px;}
.lc-head h3{font-size:clamp(21px,2.6vw,30px);font-weight:800;margin-top:14px;}
.lc-track{position:relative;}
.lc-line{
  position:absolute;left:0;right:0;top:7px;height:2px;
  background:var(--line);border-radius:2px;overflow:hidden;
}
.lc-line i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--amber),var(--clay));
  transition:width 2.4s cubic-bezier(.25,.8,.3,1) .25s;
}
.lifecycle.in .lc-line i{width:100%;}
.lc-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;position:relative;}
.lc{display:flex;flex-direction:column;padding-right:14px;}
.lc-dot{
  width:16px;height:16px;border-radius:50%;background:var(--paper);
  border:2px solid var(--line);margin-bottom:20px;
  transition:border-color .4s ease, background .4s ease, transform .4s cubic-bezier(.2,1.4,.4,1);
}
.lifecycle.in .lc:nth-child(1) .lc-dot{transition-delay:.35s;}
.lifecycle.in .lc:nth-child(2) .lc-dot{transition-delay:.8s;}
.lifecycle.in .lc:nth-child(3) .lc-dot{transition-delay:1.25s;}
.lifecycle.in .lc:nth-child(4) .lc-dot{transition-delay:1.7s;}
.lifecycle.in .lc:nth-child(5) .lc-dot{transition-delay:2.15s;}
.lifecycle.in .lc-dot{border-color:var(--amber);background:var(--amber);transform:scale(1.15);}
.lc-ph{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:7px;
}
.lc strong{font-family:'Montserrat',sans-serif;font-size:16px;font-weight:800;color:var(--green-ink);transition:color .3s ease;}
.lc-d{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--mute);}
.lc{
  cursor:pointer;transition:transform .35s cubic-bezier(.2,.7,.3,1);
  /* button reset */
  appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;
}
.lc.active strong{color:var(--amber-ink);}
.lc.active .lc-dot{border-color:var(--amber);background:var(--amber);transform:scale(1.45);box-shadow:0 0 0 6px rgba(201,154,91,.18);}
.lc.active .lc-icon{background:var(--amber);}
.lc.active .lc-icon svg{stroke:#fff;}
.lc:hover{transform:translateY(-4px);}
.lc:hover strong{color:var(--amber-ink);}
.lc:hover .lc-dot{transform:scale(1.45);box-shadow:0 0 0 6px rgba(201,154,91,.18);}
.lc-icon{
  margin-top:12px;width:30px;height:30px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--amber-soft);
  transition:background .35s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.lc-icon svg{width:15px;height:15px;stroke:var(--amber-ink);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;transition:stroke .35s ease;}
.lc:hover .lc-icon{background:var(--amber);transform:rotate(-8deg) scale(1.08);}
.lc:hover .lc-icon svg{stroke:#fff;}

/* lifecycle hover preview */
.lc-preview{margin-top:46px;}
.lcp-inner{
  position:relative;width:100%;aspect-ratio:21/7;overflow:hidden;
  border:1px solid var(--line);background:var(--green-ink);
  box-shadow:var(--shadow);
}
.lcp-inner img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.28;filter:saturate(.55);
  transition:opacity .6s cubic-bezier(.2,.7,.3,1), filter .6s ease, transform .8s cubic-bezier(.2,.7,.3,1);
  transform:scale(1.03);
}
.lc-preview.live .lcp-inner img{opacity:1;filter:none;transform:none;}
.lcp-cap{
  position:absolute;left:22px;bottom:18px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.6);
  opacity:0;transform:translateY(6px);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.lc-preview.live .lcp-cap{opacity:1;transform:none;}
.lcp-hint{
  position:absolute;inset:0;z-index:2;
  display:flex;align-items:center;justify-content:center;
  font-family:'JetBrains Mono',monospace;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  transition:opacity .4s ease;pointer-events:none;
}
.lc-preview.live .lcp-hint{opacity:0;}
.lc-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;}
@media (max-width:860px){.lcp-inner{aspect-ratio:16/9;}}
@media (max-width:860px){
  .lc-steps{grid-template-columns:1fr 1fr;gap:28px 20px;}
  .lc-line{display:none;}
}
@media (max-width:520px){.lc-steps{grid-template-columns:1fr;}}

/* ---------- portfolio strip ---------- */
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.shot{position:relative;aspect-ratio:4/3;overflow:hidden;box-shadow:var(--shadow);background:var(--green-ink);}
.shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.shot:hover img{transform:scale(1.06);}
.shot::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(38,48,31,0) 60%, rgba(38,48,31,0.7) 100%);
}
.shot .cap{
  position:absolute;left:16px;bottom:14px;right:16px;z-index:2;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:#fff;
}
@media (max-width:900px){.portfolio-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.portfolio-grid{grid-template-columns:1fr;}}

/* ---------- process ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;}
.stp .n{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:15px;color:var(--amber-deep);
  display:flex;align-items:center;gap:14px;margin-bottom:20px;
}
.stp .n::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--amber-soft),transparent);}
/* sequential 01 -> 02 -> 03 pulse */
.stp .n b{
  display:inline-block;font-weight:800;transform-origin:left center;
  animation:stepPulse 3.6s ease-in-out infinite;
}
.steps .stp:nth-child(1) .n b{animation-delay:0s;}
.steps .stp:nth-child(2) .n b{animation-delay:.6s;}
.steps .stp:nth-child(3) .n b{animation-delay:1.2s;}
@keyframes stepPulse{
  0%, 22%, 100%{transform:scale(1);color:var(--amber-deep);}
  8%{transform:scale(1.85);color:var(--amber);}
  15%{transform:scale(1.85);color:var(--amber);}
}
.stp h3{font-size:21px;margin-bottom:12px;}
.stp p{color:var(--mute);font-size:14.5px;line-height:1.7;margin:0;}
@media (max-width:820px){.steps{grid-template-columns:1fr;gap:38px;}}
/* give the process steps real card depth */
.steps{gap:24px;}
.stp{
  background:#fff;border:1px solid var(--line);padding:34px 30px 32px;
  position:relative;overflow:hidden;
  box-shadow:0 18px 44px -30px rgba(38,48,31,.35);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.stp::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--clay));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.stp:hover{transform:translateY(-6px);box-shadow:var(--shadow-gold);border-color:var(--amber-soft);}
.stp:hover::before{transform:scaleX(1);}

/* ---------- contact ---------- */
.contact{
  background:
    radial-gradient(760px 420px at 88% 0%, rgba(201,154,91,.22), transparent 62%),
    var(--green-ink);
  color:#fff;position:relative;overflow:hidden;
}
.contact::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green) 0%, var(--amber) 45%, var(--clay) 70%, var(--green) 100%);
}
.contact .head h2{color:#fff;}
.contact .head p{color:rgba(255,255,255,.72);}
.contact .exif{color:#F3D9AF;}
.contact-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:40px;}}
.cinfo h3{color:#fff;font-size:19px;margin-bottom:8px;}
.cinfo p{color:rgba(255,255,255,.7);font-size:14.5px;line-height:1.7;margin:0 0 26px;}
.cways{list-style:none;margin:0;padding:0;}
.cways li{
  padding:16px 0;border-top:1px solid rgba(255,255,255,.13);
  display:flex;gap:14px;align-items:flex-start;
}
.cways .cw-ico{
  width:32px;height:32px;border-radius:50%;flex-shrink:0;
  background:rgba(201,154,91,.2);display:inline-flex;align-items:center;justify-content:center;
}
.cways .cw-ico svg{width:16px;height:16px;stroke:var(--amber);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.cways b{display:block;color:#fff;font-family:'Montserrat',sans-serif;font-size:14.5px;font-weight:700;}
.cways span{display:block;margin-top:3px;font-size:13px;color:rgba(255,255,255,.62);line-height:1.55;}
.cways a{color:#F3D9AF;}
.cways a:hover{color:var(--amber);}

.cform{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.15);
  padding:34px 32px;backdrop-filter:blur(4px);
}
.cform .fgrid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
@media (max-width:560px){.cform .fgrid2{grid-template-columns:1fr;}}
.fld{display:block;margin-bottom:18px;}
.fld > span{
  display:block;margin-bottom:7px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#A9C29B;
}
.fld input, .fld select, .fld textarea{
  width:100%;background:rgba(0,0,0,.22);color:#fff;
  border:1px solid rgba(255,255,255,.18);border-radius:var(--radius);
  padding:13px 14px;font-family:'Inter',sans-serif;font-size:14.5px;
  transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.fld textarea{min-height:118px;resize:vertical;}
.fld input::placeholder, .fld textarea::placeholder{color:rgba(255,255,255,.34);}
.fld input:focus, .fld select:focus, .fld textarea:focus{
  outline:none;border-color:var(--amber);background:rgba(0,0,0,.34);
  box-shadow:0 0 0 3px rgba(201,154,91,.18);
}
.fld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,#A9C29B 50%),linear-gradient(135deg,#A9C29B 50%,transparent 50%);
  background-position:calc(100% - 19px) 21px, calc(100% - 13px) 21px;
  background-size:6px 6px, 6px 6px;background-repeat:no-repeat;}
.fld select option{background:var(--green-ink);color:#fff;}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.cform .btn{width:100%;justify-content:center;margin-top:6px;}
.cform-note{
  margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:rgba(255,255,255,.45);line-height:1.6;
}
.form-status{
  margin-top:14px;padding:13px 15px;border-radius:var(--radius);display:none;
  font-size:13.5px;line-height:1.55;
}
.form-status.ok{display:block;background:rgba(169,194,155,.16);border:1px solid #A9C29B;color:#DCE6D4;}
.form-status.err{display:block;background:rgba(217,83,79,.14);border:1px solid #D9534F;color:#F3C6C4;}

/* ---------- proof / stats banner ---------- */
.deliver{
  background:
    radial-gradient(700px 340px at 12% 0%, rgba(201,154,91,.22), transparent 62%),
    var(--sage-2);
  padding:96px 0;position:relative;overflow:hidden;
}
/* upward trend graph behind the stats */
.deliver .trend{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;opacity:.55;
}
.deliver .trend .grid-l{stroke:rgba(38,48,31,.09);stroke-width:1;}
.deliver .trend .area{fill:url(#trendFill);}
.deliver .trend .line{
  fill:none;stroke:var(--amber);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1200;stroke-dashoffset:1200;
}
.deliver.in .trend .line{animation:drawTrend 2.6s cubic-bezier(.25,.8,.3,1) .3s forwards;}
@keyframes drawTrend{to{stroke-dashoffset:0;}}
.deliver .trend .node{fill:var(--amber);opacity:0;}
.deliver.in .trend .node{animation:nodePop .5s ease forwards;}
.deliver.in .trend .node:nth-of-type(1){animation-delay:.9s;}
.deliver.in .trend .node:nth-of-type(2){animation-delay:1.35s;}
.deliver.in .trend .node:nth-of-type(3){animation-delay:1.8s;}
.deliver.in .trend .node:nth-of-type(4){animation-delay:2.25s;}
@keyframes nodePop{from{opacity:0;r:0;}to{opacity:1;r:5;}}
.deliver .wrap{position:relative;z-index:2;}
.deliver .head{margin-bottom:44px;}
.deliver .head h2{font-size:clamp(26px,3.4vw,40px);font-weight:800;max-width:760px;}
.proof{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.pf{
  background:#fff;border:1px solid var(--line);padding:30px 26px 26px;
  position:relative;overflow:hidden;
  box-shadow:0 20px 48px -28px rgba(38,48,31,.42), 0 2px 6px -2px rgba(38,48,31,.12);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.pf::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--clay));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.pf:hover{transform:translateY(-6px);box-shadow:var(--shadow-gold);border-color:var(--amber-soft);}
.pf:hover::before{transform:scaleX(1);}
.pf .pnum{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(30px,3.6vw,42px);line-height:1;color:var(--amber-ink);
}
.pf .pnum small{font-size:20px;font-weight:800;}
.pf .pword{
  display:block;margin-top:6px;font-style:normal;
  font-family:'Montserrat',sans-serif;font-weight:700;
  font-size:16px;letter-spacing:-0.01em;color:var(--green-deep);
}
.pf .ptxt{margin-top:12px;font-size:14px;line-height:1.55;color:var(--text);}
.pf .psrc{
  margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);
}
.pf .psrc a{
  display:inline-block;text-decoration:underline;text-decoration-color:rgba(108,115,103,.45);
  text-underline-offset:4px;transition:color .2s ease,text-decoration-color .2s ease;
}
.pf .psrc a:hover{color:var(--green-deep);text-decoration-color:var(--green);}
.addons-h2{font-size:clamp(32px,4.6vw,54px);font-weight:800;letter-spacing:-0.02em;}
.proof-note{
  margin-top:26px;font-family:'JetBrains Mono',monospace;
  font-size:11.5px;letter-spacing:.02em;color:var(--mute);
}
@media (max-width:980px){.proof{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.proof{grid-template-columns:1fr;}}

/* ---------- faq ---------- */
.faq{background:var(--paper);border-top:1px solid var(--line);}
.faq-layout{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr);gap:84px;align-items:start;}
.faq .head{margin-bottom:0;position:sticky;top:120px;}
.faq-list{border-top:1px solid var(--line);}
.faq-list details{border-bottom:1px solid var(--line);}
.faq-list summary{
  position:relative;list-style:none;cursor:pointer;padding:24px 50px 24px 0;
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:700;line-height:1.4;
  color:var(--green-ink);
}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{
  content:"+";position:absolute;right:4px;top:19px;width:30px;height:30px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:var(--green);font-family:'Inter',sans-serif;font-size:20px;font-weight:400;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.faq-list details[open] summary::after{content:"\2212";background:var(--green);color:#fff;transform:rotate(180deg);}
.faq-list details p{margin:0;padding:0 50px 25px 0;color:var(--mute);font-size:15px;line-height:1.7;}
@media (max-width:800px){
  .faq-layout{grid-template-columns:1fr;gap:38px;}
  .faq .head{position:static;}
}

/* ---------- final cta ---------- */
.final{text-align:center;padding:130px 0;}
.final h2{font-size:clamp(34px,5vw,62px);font-weight:800;max-width:1040px;margin:22px auto 0;}
.final h2 span{color:var(--green);}
.final .hero-ctas{justify-content:center;margin-top:42px;}

/* ---------- footer ---------- */
footer{background:var(--green-ink);color:rgba(255,255,255,.6);padding:64px 0 34px;}
.fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px;border-bottom:1px solid rgba(255,255,255,.12);}
.fgrid h4{color:#fff;font-size:13px;margin-bottom:16px;text-transform:uppercase;letter-spacing:.1em;}
.fgrid ul{list-style:none;margin:0;padding:0;}
.fgrid li{margin-bottom:11px;font-size:14px;}
.fgrid a:hover{color:#fff;}
.flogo{position:relative;display:inline-block;color:#fff;font-family:'Montserrat',sans-serif;font-weight:800;font-size:19px;margin-bottom:14px;}
.flogo span{color:#A9C29B;}
.flogo .brand-sub{color:rgba(255,255,255,.5);}
.fbot{display:flex;justify-content:space-between;padding-top:26px;font-size:12.5px;flex-wrap:wrap;gap:12px;}
@media (max-width:800px){.fgrid{grid-template-columns:1fr 1fr;}}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .rv{opacity:1;transform:none;}
  .focus-pull{filter:none;opacity:1;transform:none;}
  .shot .curtain{display:none;}
  .popin{opacity:1;transform:none;}
  .goldwave{background-image:none;color:var(--green-ink);}
  .goldwave.on-dark{color:#fff;}
  .btn-glow::after{display:none;}
  .hero h1 .spinword{animation:none;transform:none;}
  .hero h1 .spinword:hover{animation:none;}
}

/* ---------- brokerage / team ---------- */
.team{
  background:
    radial-gradient(760px 420px at 92% 8%, rgba(201,154,91,.20), transparent 62%),
    var(--sage);
  position:relative;
}
.team::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--green) 0%, var(--amber) 50%, var(--clay) 78%, var(--green) 100%);
}
.team-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;}
.team-copy h2{font-size:clamp(28px,3.6vw,44px);font-weight:800;margin-top:18px;max-width:520px;}
.team-copy > p{color:var(--mute);font-size:15.5px;line-height:1.7;margin:18px 0 30px;max-width:520px;}
.team-list{list-style:none;margin:0 0 34px;padding:0;}
.team-list li{
  padding:16px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;gap:4px 0;
}
.team-list li::before{
  content:"◆";color:var(--amber);font-size:9px;grid-row:1 / span 2;
  margin-right:12px;line-height:1.9;
}
.team-list b{font-family:'Montserrat',sans-serif;font-size:15px;font-weight:800;color:var(--green-ink);}
.team-list span{font-size:13.5px;line-height:1.6;color:var(--mute);}
.team-cta{display:flex;gap:12px;flex-wrap:wrap;}

.team-visual{
  position:relative;display:grid;
  grid-template-columns:1fr 1fr;grid-template-rows:auto auto;
  gap:14px;
}
.team-visual figure{margin:0;overflow:hidden;box-shadow:var(--shadow);background:var(--green-ink);}
.team-visual img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);}
.team-visual figure:hover img{transform:scale(1.06);}
.tv-a{grid-column:1 / -1;aspect-ratio:16/9;}
.tv-b,.tv-c{aspect-ratio:4/3;}
.tv-badge{
  position:absolute;left:14px;bottom:14px;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(18,24,15,.78);backdrop-filter:blur(6px);
  border:1px solid rgba(201,154,91,.5);border-radius:100px;padding:7px 14px;
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#F3D9AF;
}
.tv-badge i{width:6px;height:6px;border-radius:50%;background:var(--amber);animation:rec 2s ease-in-out infinite;}
@media (max-width:920px){.team-grid{grid-template-columns:1fr;gap:44px;}}

/* ---------- MOBILE: lifecycle becomes tap-chips sitting right above the photo ---------- */
@media (max-width:860px){
  .lc-track{order:1;}
  .lifecycle .lc-preview{order:2;margin-top:18px;}
  .lc-head{order:0;}
  .lifecycle{display:flex;flex-direction:column;}
  .lc-cta{order:3;}

  .lc-steps{
    display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  }
  .lc-steps::-webkit-scrollbar{height:4px;}
  .lc-steps::-webkit-scrollbar-thumb{background:var(--amber-soft);border-radius:4px;}
  .lc{
    flex:0 0 auto;scroll-snap-align:start;
    border:1px solid var(--line);border-radius:100px;
    padding:9px 16px;background:#fff;
    display:flex;align-items:center;gap:8px;
  }
  .lc:hover{transform:none;}
  .lc.active{border-color:var(--amber);background:var(--amber-wash);}
  .lc .lc-dot,.lc .lc-d,.lc .lc-icon{display:none;}
  .lc .lc-ph{
    margin:0;font-size:9px;letter-spacing:.1em;
    color:var(--mute);
  }
  .lc.active .lc-ph{color:var(--amber-deep);}
  .lc strong{font-size:13.5px;white-space:nowrap;}
  .lcp-hint{display:none;}
  .lcp-inner{aspect-ratio:4/3;}
}

/* ================= MOBILE REFINEMENTS ================= */
@media (max-width:760px){
  /* Hero video: taller frame so the clip actually reads, and the EXIF tags
     stack instead of colliding at the bottom edge. */
  .hero-stage{
    margin-top:44px;
    aspect-ratio:4/5;
  }
  .hero-stage .hero-media{object-position:center 42%;}
  .hero-stage::before{
    background:linear-gradient(180deg, rgba(38,48,31,.12) 0%, rgba(38,48,31,0) 34%, rgba(38,48,31,.72) 100%);
  }
  .hero-stage .exif-tag{
    left:14px;right:14px;bottom:12px;font-size:9.5px;letter-spacing:.1em;
    line-height:1.5;
  }
  /* second tag drops onto its own line above the first, no overlap */
  .hero-stage .exif-tag2{
    left:14px;right:14px;bottom:30px;text-align:left;
  }
  .hero-stage .reticle{width:54px;height:54px;top:26%;left:60%;}

  /* Packages: swipeable row so they stay comparable side by side */
  .tiers{
    display:flex;gap:14px;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:14px 20px 20px;margin:0 -20px;
  }
  .tiers::-webkit-scrollbar{height:5px;}
  .tiers::-webkit-scrollbar-thumb{background:var(--amber-soft);border-radius:5px;}
  .tier{
    flex:0 0 78%;scroll-snap-align:center;min-width:0;
  }
  .tier .sub{min-height:0;}
  .swipe-hint{
    display:flex;align-items:center;gap:8px;margin-top:4px;
    font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--amber-deep);
  }
  .swipe-hint::after{content:"→";animation:nudge 1.6s ease-in-out infinite;}
  @keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(5px);}}

  /* Services + add-ons: same swipeable treatment, far less vertical scroll */
  .svc-grid{
    display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;border-left:1px solid var(--line);
  }
  .svc-grid::-webkit-scrollbar{height:5px;}
  .svc-grid::-webkit-scrollbar-thumb{background:var(--amber-soft);border-radius:5px;}
  .svc{flex:0 0 80%;scroll-snap-align:center;}

  .alacarte{
    display:flex;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;border-left:1px solid var(--line);
  }
  .alacarte::-webkit-scrollbar{height:5px;}
  .alacarte::-webkit-scrollbar-thumb{background:var(--amber-soft);border-radius:5px;}
  .ala{flex:0 0 78%;scroll-snap-align:center;}
  .ala.brandtile{flex:0 0 88%;}
}
@media (min-width:761px){ .swipe-hint{display:none;} }

/* ---------- portfolio: video tiles + expandable gallery ---------- */
.shot-video video{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.shot-video:hover video{transform:scale(1.04);}
.shot-video .playdot{
  position:absolute;top:14px;left:14px;z-index:4;
  width:34px;height:34px;border-radius:50%;
  background:rgba(18,24,15,.62);backdrop-filter:blur(6px);
  border:1px solid rgba(201,154,91,.65);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}
.shot-video .playdot::before{
  content:"";width:0;height:0;margin-left:3px;
  border-left:9px solid var(--amber);
  border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.shot-video:hover .playdot{background:var(--amber);transform:scale(1.08);}
.shot-video:hover .playdot::before{border-left-color:#fff;}
.shot-video.playing .playdot{opacity:0;}

.shot-extra[hidden]{display:none;}
.gal-more{display:flex;justify-content:center;margin-top:34px;}
.gal-more .btn{gap:10px;}
.gm-count{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.08em;
  color:var(--amber-deep);
}

/* ---------- Q&A / answers page ---------- */
.qa-page{padding:96px 0 110px;}
.crumb{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute);margin-bottom:26px;
}
.crumb a{color:var(--green);}
.crumb a:hover{color:var(--amber-deep);}
.crumb span{margin:0 6px;color:var(--amber);}
.qa-page h1{font-size:clamp(32px,4.8vw,58px);font-weight:800;line-height:1.06;margin-top:18px;max-width:900px;}
.qa-lede{color:var(--text);font-size:17px;line-height:1.7;margin-top:22px;max-width:720px;}
.qa-note{
  margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:11.5px;
  line-height:1.7;color:var(--mute);max-width:720px;
}
.qa-list{margin-top:56px;display:grid;gap:18px;}
.qa{
  background:#fff;border:1px solid var(--line);padding:30px 32px;
  position:relative;overflow:hidden;
  box-shadow:0 18px 44px -32px rgba(38,48,31,.4);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s ease, border-color .35s ease;
}
.qa::before{
  content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--amber),var(--clay));
  transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.qa:hover{transform:translateY(-4px);box-shadow:var(--shadow-gold);border-color:var(--amber-soft);}
.qa:hover::before{transform:scaleX(1);}
.qa h2{font-size:clamp(19px,2.2vw,24px);font-weight:800;line-height:1.3;margin-bottom:14px;}
.qa p{color:var(--mute);font-size:15px;line-height:1.75;margin:0 0 12px;}
.qa p:last-child{margin-bottom:0;}
.qa strong{color:var(--green-ink);}
.qa a{color:var(--green);text-decoration:underline;text-underline-offset:3px;}
.qa a:hover{color:var(--amber-deep);}
.qa-cta{
  margin-top:56px;padding:48px 44px;text-align:center;
  background:
    radial-gradient(600px 320px at 50% 0%, rgba(201,154,91,.22), transparent 65%),
    var(--sage);
  border:1px solid var(--amber-soft);
}
.qa-cta h2{font-size:clamp(24px,3.2vw,36px);font-weight:800;max-width:720px;margin:0 auto;}
.qa-cta p{color:var(--mute);font-size:15px;margin:14px auto 0;max-width:560px;}
.qa-cta .hero-ctas{justify-content:center;margin-top:28px;}
@media (max-width:600px){.qa{padding:26px 22px;} .qa-cta{padding:36px 24px;}}

/* ---------- promo banner ---------- */
.promo{
  position:sticky;top:0;z-index:96;
  background:
    radial-gradient(620px 120px at 22% 120%, rgba(201,154,91,.30), transparent 70%),
    linear-gradient(100deg,#2E3A25 0%, var(--green-ink) 52%, #1B2216 100%);
  border-bottom:1px solid rgba(201,154,91,.34);
  overflow:hidden;
}
/* slow gold sheen travelling across the bar */
.promo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 38%, rgba(201,154,91,.16) 50%, transparent 62%);
  background-size:260% 100%;
  animation:promoSheen 7s linear infinite;
}
@keyframes promoSheen{from{background-position:100% 0;}to{background-position:0% 0;}}

.promo-inner{
  max-width:1240px;margin:0 auto;padding:11px 56px 11px 32px;
  display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;
  position:relative;z-index:2;
}
.promo-tag{
  font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--green-ink);
  background:var(--amber);padding:4px 9px;border-radius:2px;white-space:nowrap;
}
.promo-copy{
  margin:0;display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:14.5px;color:rgba(255,255,255,.82);
}
.promo-copy strong{color:#fff;font-family:'Montserrat',sans-serif;font-weight:700;}
.promo-sep{color:rgba(201,154,91,.6);}
.promo-use{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.55);
}
.promo-code{
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13.5px;
  letter-spacing:.16em;color:#F3D9AF;cursor:pointer;
  background:rgba(201,154,91,.14);border:1px dashed rgba(201,154,91,.7);
  border-radius:3px;padding:5px 11px;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.promo-code:hover{background:var(--amber);border-color:var(--amber);border-style:solid;color:var(--green-ink);}
.promo-code:active{transform:scale(.97);}
.promo-copyicon{
  width:11px;height:11px;border:1.4px solid currentColor;border-radius:2px;
  position:relative;opacity:.7;flex-shrink:0;
}
.promo-copyicon::before{
  content:"";position:absolute;left:-4px;top:-4px;width:11px;height:11px;
  border:1.4px solid currentColor;border-right:0;border-bottom:0;border-radius:2px 0 0 0;
}
.promo-code.copied{background:#A9C29B;border-color:#A9C29B;border-style:solid;color:var(--green-ink);}
.promo-code.copied .promo-copyicon{display:none;}

.promo-cta{
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:13.5px;
  color:#F3D9AF;white-space:nowrap;
  border-bottom:1px solid rgba(243,217,175,.4);padding-bottom:2px;
  transition:color .25s ease, border-color .25s ease;
}
.promo-cta:hover{color:var(--amber);border-color:var(--amber);}

.promo-x{
  position:absolute;top:50%;right:16px;transform:translateY(-50%);z-index:3;
  background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:rgba(255,255,255,.45);padding:4px 8px;
  transition:color .2s ease;
}
.promo-x:hover{color:#fff;}
.promo.gone{display:none;}

@media (max-width:760px){
  .promo-inner{padding:10px 46px 10px 16px;gap:10px;justify-content:flex-start;}
  .promo-tag{display:none;}
  .promo-copy{font-size:13px;gap:8px;}
  .promo-use{display:none;}
  .promo-sep{display:none;}
  .promo-cta{display:none;}
  .promo-code{font-size:12.5px;padding:4px 9px;letter-spacing:.12em;}
}
@media (prefers-reduced-motion: reduce){ .promo::after{animation:none;} }

/* ============================================================
   SERVICES + ADD-ONS, merged into collapsible buckets
   ============================================================ */
.bkts{display:flex;flex-direction:column;gap:10px;margin-top:34px;}
.bkt{background:var(--white);border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.bkt[open]{border-color:var(--green);box-shadow:0 14px 36px -28px rgba(38,48,31,.4);}
.bkt summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  padding:18px 22px;transition:background .2s ease;
}
.bkt summary::-webkit-details-marker{display:none;}
.bkt summary:hover{background:var(--sage);}
.bkt-ic{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  background:var(--sage);display:grid;place-items:center;
}
.bkt-ic svg{width:17px;height:17px;fill:none;stroke:var(--green);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;}
.bkt[open] .bkt-ic{background:var(--amber-soft);}
.bkt[open] .bkt-ic svg{stroke:var(--amber-deep);}
.bkt-n{font-family:'Montserrat',sans-serif;font-weight:800;font-size:17px;color:var(--green-ink);}
.bkt-c{
  margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--mute);
}
.bkt-t{position:relative;flex:0 0 auto;width:14px;height:14px;transition:transform .3s cubic-bezier(.2,.8,.25,1);}
.bkt-t::before,.bkt-t::after{content:"";position:absolute;inset:0;margin:auto;background:var(--green);border-radius:2px;}
.bkt-t::before{width:13px;height:2px;}
.bkt-t::after{width:2px;height:13px;transition:opacity .25s ease;}
.bkt[open] .bkt-t{transform:rotate(180deg);}
.bkt[open] .bkt-t::after{opacity:0;}
.bkt-body{padding:0 18px 18px;border-top:1px solid var(--line-2,#EDEFE9);}
.bkt-body .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px;}
@media (max-width:1000px){.bkt-body .svc-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:700px){.bkt-body .svc-grid{grid-template-columns:1fr;}}
.bkt-body .ala{border:1px solid var(--line);border-radius:3px;background:var(--paper);}

/* ============================================================
   ONE SECTION PER SCREEN, trim the tall blocks
   ============================================================ */

/* brand tile was far taller than it needed to be */
.ala.brandtile{min-height:120px;}
.bt-logo{font-size:clamp(22px,2.6vw,32px);}
.bt-logo small{font-size:11px;}
.bt-inner{padding:18px 30px;}
.bt-sub{margin-top:9px;font-size:9px;}

/* commercial: tighter rhythm, shorter stat block */
#commercial{padding:78px 0;}
#commercial h2{font-size:clamp(26px,3.2vw,38px)!important;margin-top:14px!important;}
#commercial .comm-grid p{font-size:14.5px!important;line-height:1.65!important;margin-top:14px!important;}
.comm-stats{margin:22px 0 18px!important;gap:18px!important;}
.comm-stats .cnum{font-size:clamp(26px,3vw,36px)!important;}
.cred li{padding:6px 0!important;font-size:13.5px!important;}
.comm-visual figure{max-height:300px;}

/* teams: buttons ride under the copy, images shrink, whole thing fits */
.team{padding:78px 0;}
.team-grid{align-items:center;gap:38px!important;}
.team h2{font-size:clamp(25px,3.1vw,36px)!important;}
.team-copy>p{font-size:14.5px!important;line-height:1.65!important;}
.team-list li{padding:9px 0!important;}
.team-list li b{font-size:14.5px!important;}
.team-list li span{font-size:12.8px!important;line-height:1.5!important;}
.team-cta{margin-top:18px!important;display:flex;gap:10px;flex-wrap:wrap;}
.team-visual{max-height:440px;}

/* the packages block is the tallest thing on the page, tighten it */
.pricing{padding:80px 0;}
.tiers{margin-top:34px!important;gap:12px!important;}
.tier{padding:38px 18px 26px!important;}
.tier ul{margin:16px 0 20px!important;}
.tier li{padding:6.5px 0!important;font-size:12.5px!important;}
.tier .price{margin:12px 0 4px!important;}

/* monthly */
.accel{padding:78px 0;}
.accel-grid{gap:16px!important;}
.plan{padding:28px 24px!important;}
.plan ul{margin:18px 0 22px!important;}
.plan li{padding:7px 0!important;}

/* portfolio + process + faq breathe less */
#portfolio{padding:78px 0;}
#process{padding:78px 0!important;}
.faq{padding:78px 0;}

/* ============================================================
   MOBILE, most orders come from here. Same rule: a section
   should be readable without scrolling through it twice.
   ============================================================ */
@media (max-width:760px){
  section{padding:52px 0!important;}
  .wrap{padding-left:18px;padding-right:18px;}
  h2{font-size:clamp(23px,6.4vw,30px)!important;line-height:1.15!important;}
  .head p{font-size:14.5px!important;}

  /* lanes: stack, but keep them short so all three are skimmable */
  .doors{gap:12px!important;}
  .door.lane{min-height:0!important;}
  .door-shot{flex-basis:104px!important;}
  .door.feature .door-shot{flex-basis:116px!important;}
  .door-body{padding:16px 18px 18px!important;}
  .door.lane h3{font-size:18px!important;margin:8px 0 6px!important;}
  .door.lane p{font-size:13px!important;margin-bottom:12px!important;}
  .door-flag{font-size:9px!important;padding:5px!important;}

  /* one price covers, three cards, compact */
  .covers{gap:8px!important;margin:20px 0 12px!important;}
  .cover{padding:14px 14px!important;display:grid;grid-template-columns:44px 1fr;
         gap:12px;align-items:center;text-align:left!important;}
  .cover-ic{width:44px!important;height:44px!important;margin:0!important;}
  .cover b{font-size:15px!important;margin-bottom:2px!important;}
  .cover p{font-size:12.5px!important;}
  .covers-all{font-size:10.5px!important;}

  /* monthly plans + packages: swipeable, one card at a time */
  .accel-grid{
    grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:86%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;
    margin-inline:-18px;
    /* top padding gives the "Most Popular" tab room, it hangs above the card */
    padding:22px 18px 12px;
  }
  .plan.gold{margin-top:0;}
  .plan.gold .best{top:-11px;left:18px;}
  .plan{scroll-snap-align:center;padding:24px 20px!important;}
  .plan .price{font-size:34px!important;margin:14px 0 0!important;}

  .tiers{
    grid-template-columns:none!important;grid-auto-flow:column;grid-auto-columns:82%;
    overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important;
    margin-inline:-18px;padding:14px 18px 12px;
  }
  .tier{scroll-snap-align:center;padding:34px 18px 22px!important;}
  .tier .sub{min-height:0!important;}
  .tier ul{margin:14px 0 18px!important;}

  /* which-package helper reads as a list on a phone */
  .picker{flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;}
  .picker ul{flex-direction:column;gap:8px;}
  .picker li{flex:1 1 auto;}

  /* build your own: card first, then the bubbles */
  .byo{padding:22px 16px 24px!important;}
  .byo-stage{grid-template-columns:1fr!important;gap:14px!important;}
  .byo-card{order:-1;position:sticky;top:70px;z-index:5;}
  .byo-lines{max-height:150px;}
  .byo-chip{padding:9px 14px!important;font-size:13px!important;}
  .bucket{margin-bottom:8px;}
  .bub{padding:8px 13px;font-size:12.5px;}

  /* service buckets */
  .bkt summary{padding:14px 16px;gap:11px;}
  .bkt-n{font-size:15px;}
  .bkt-c{font-size:10px;}
  .bkt-body{padding:0 12px 14px;}

  /* commercial + teams stack cleanly, CTAs under the copy */
  .comm-grid{gap:26px!important;}
  .comm-stats{gap:14px!important;}
  .team-grid{gap:24px!important;}
  .team-visual{max-height:280px;order:2;}
  .team-cta{width:100%;}
  .team-cta .btn{flex:1 1 auto;text-align:center;}

  /* brand tile is decorative, keep it tiny on a phone */
  .ala.brandtile{min-height:96px!important;}
  .bt-logo{font-size:20px!important;}

  .final h2{font-size:clamp(22px,6vw,30px)!important;}
}

@media (max-width:420px){
  .tiers{grid-auto-columns:88%;}
  .accel-grid{grid-auto-columns:90%;}
  .cover{grid-template-columns:38px 1fr;gap:10px;}
  .cover-ic{width:38px!important;height:38px!important;}
}

/* second pass on the blocks still running long */
#commercial .comm-visual{max-height:340px;}
.lifecycle{margin-top:26px!important;}
.lc-stage{padding:14px 16px!important;}
.lc-shot{max-height:300px!important;}
#portfolio .pf-grid{gap:10px!important;}
#portfolio .pf{aspect-ratio:4/3;}
.contact{padding:74px 0!important;}
.cform{gap:12px!important;}
.cform textarea{min-height:86px!important;}
.contact .cgrid{gap:26px!important;}
.stats{padding:44px 0!important;}
.final{padding:74px 0!important;}

/* ---------- mobile: finger-friendly + shorter ---------- */
@media (max-width:760px){
  /* every tappable thing clears 44px */
  .bub,.byo-chip{min-height:44px;display:inline-flex;align-items:center;}
  .btn,.btn-sm{min-height:44px;display:inline-flex;align-items:center;justify-content:center;}
  .promo-code{min-height:40px;padding:8px 12px;}
  .promo-x{min-width:44px;min-height:44px;}
  .bkt summary{min-height:56px;}
  .tk{min-height:40px;}

  /* bubbles scroll sideways instead of stacking into a wall */
  .bucket-b{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;padding-bottom:4px;
    scrollbar-width:none;
  }
  .bucket-b::-webkit-scrollbar{display:none;}
  .bucket-b .bub{flex:0 0 auto;scroll-snap-align:start;}
  .bucket{margin-bottom:6px;padding:10px 11px 11px;}
  .byo-card{position:static;}

  /* lanes: fit the three inside a screen */
  .door-shot{flex-basis:92px!important;}
  .door.feature .door-shot{flex-basis:104px!important;}
  .door-body{padding:14px 16px 16px!important;}
  .door.lane p{margin-bottom:10px!important;}

  /* trim the long-form blocks further */
  .lifecycle{margin-top:18px!important;}
  .lc-shot{max-height:210px!important;}
  .team-visual{max-height:220px;}
  .comm-visual{max-height:230px;}
  .split-def{gap:16px!important;}
  .defs summary{font-size:13px;padding:11px 14px;}
  .stats{padding:34px 0!important;}
  #portfolio .pf-grid{gap:8px!important;}
}

@media (max-width:760px){
  .sqft-toggle button{min-height:44px;}
  /* the tallest remaining mobile blocks */
  .lifecycle-chips{gap:6px!important;}
  .lc-copy{padding:14px 16px!important;}
  .cstat{padding:12px 14px!important;}
  .cred{margin-top:14px!important;}
  .pf-grid{grid-template-columns:1fr 1fr!important;}
  .team-list li span{font-size:12.5px!important;}
  .accel-foot{font-size:12.5px!important;}
  .faq details{padding:14px 16px!important;}
}

/* ============================================================
   MOBILE ROUND 2, side-by-side one-price row, no overlaps
   ============================================================ */
@media (max-width:760px){
  /* three across, icon above a compact label, descriptions dropped */
  .covers{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin:18px 0 10px!important;}
  .cover{
    display:flex!important;flex-direction:column;align-items:center;text-align:center!important;
    padding:0!important;border:0!important;background:none!important;box-shadow:none!important;
  }
  .cover.lit,.covers.all .cover{box-shadow:none!important;transform:none!important;}
  .cover-ic{width:46px!important;height:46px!important;margin:0 0 7px!important;}
  .cover b{
    display:block;font-size:11.5px!important;line-height:1.25!important;margin:0!important;
    padding:7px 6px;border-radius:5px;border:1.5px solid var(--line);background:var(--white);
    width:100%;
  }
  .covers.all .cover b,.cover.lit b{border-color:var(--amber);background:var(--amber-wash);}
  .cover p{display:none!important;}          /* descriptions live on desktop only */
  .covers-all{font-size:10px!important;margin-top:8px!important;}

  /* teams collage was overlapping, stack it into a clean strip */
  .team-visual{
    display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:6px!important;
    max-height:none!important;position:static!important;height:auto!important;
  }
  .team-visual figure{
    position:static!important;margin:0!important;width:auto!important;
    transform:none!important;aspect-ratio:3/4;overflow:hidden;border-radius:3px;
  }
  .team-visual figure img{width:100%;height:100%;object-fit:cover;}
  .tv-badge{
    position:static!important;grid-column:1/-1;justify-self:start;margin-top:8px!important;
    transform:none!important;
  }

  /* portfolio: 3 photos + 3 clips on a phone, rest behind View More */
  .shot.m-extra{display:none;}
  .gallery.open .shot.m-extra{display:block;}
}

/* desktop: the badge was sitting on top of the bottom-left photo */
@media (min-width:761px){
  .tv-badge{bottom:auto!important;top:-14px!important;left:auto!important;right:8px!important;}
}

/* ---------- square-footage selector above the services ---------- */
.svc-band{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin-top:26px;padding:14px 18px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:4px;
}
.svc-band label{font-size:14px;color:var(--mute);}
.svc-band label b{color:var(--green-ink);font-family:'Montserrat',sans-serif;}
.svc-band select{
  margin-left:auto;padding:10px 14px;min-height:44px;
  border:1.5px solid var(--line);border-radius:4px;background:var(--white);
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:14px;color:var(--green-ink);cursor:pointer;
}
.svc-band select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(98,124,88,.14);}
/* with one row showing, the "see pricing" toggle is just noise */
.svc-prices summary{display:none;}
.svc-prices{border-top:1px solid var(--line);margin-top:12px;}
.svc-prices .rowp[hidden]{display:none!important;}
@media (max-width:760px){
  .svc-band{gap:8px;padding:12px 14px;}
  .svc-band label span{display:none;}
  .svc-band select{width:100%;margin-left:0;}
}

/* ---------- custom cart: mobile controls ---------- */
.byo-sqsel{display:none;}
.byo-open{display:none;}

@media (max-width:760px){
  /* chips become a select; bubbles move into a full-screen sheet */
  #byoBands{display:none;}
  .byo-sqsel{display:block;width:100%;}
  .byo-sqsel>span{
    display:block;margin-bottom:7px;font-family:'JetBrains Mono',monospace;
    font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
  }
  .byo-sqsel select{
    width:100%;min-height:48px;padding:12px 14px;
    border:1.5px solid var(--green);border-radius:5px;background:var(--white);
    font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--green-ink);
  }
  .byo-open{
    display:block;width:100%;margin:14px 0 4px;padding:15px 16px;cursor:pointer;text-align:left;
    background:var(--white);border:1.5px solid var(--amber);border-radius:5px;
  }
  .byo-open span{display:block;font-family:'Montserrat',sans-serif;font-weight:800;font-size:16px;color:var(--amber-ink);}
  .byo-open small{display:block;margin-top:3px;font-size:12.5px;color:var(--mute);}
  .byo-side{display:none!important;}          /* bubbles live in the sheet now */
  .byo-stage{grid-template-columns:1fr!important;}
  .byo-card{order:0;position:static;}
  .byo{overflow:hidden;}
}

/* ---------- the sheet ---------- */
.sheet{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-end;}
.sheet[hidden]{display:none;}
.sheet-back{position:absolute;inset:0;background:rgba(38,48,31,.55);}
.sheet-card{
  position:relative;width:100%;max-height:92vh;display:flex;flex-direction:column;
  background:var(--paper);border-radius:14px 14px 0 0;box-shadow:0 -18px 50px -18px rgba(0,0,0,.45);
}
.sheet-hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:16px 18px;border-bottom:1px solid var(--line);background:var(--white);
  border-radius:14px 14px 0 0;
}
.sheet-k{
  display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}
.sheet-hd b{font-family:'Montserrat',sans-serif;font-weight:800;font-size:26px;color:var(--green-ink);}
.sheet-x{background:none;border:0;font-size:28px;line-height:1;color:var(--mute);cursor:pointer;
  min-width:44px;min-height:44px;}
.sheet-body{padding:14px 16px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.sgrp{margin-bottom:16px;}
.sgrp h4{
  margin:0 0 8px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--green-deep);
}
.sgrp-photo h4{color:var(--green);} .sgrp-video h4{color:var(--amber-deep);}
.sgrp-aerial h4{color:#5B7A8C;}     .sgrp-extras h4{color:var(--clay);}
.srow{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;
  padding:12px 14px;margin-bottom:6px;cursor:pointer;text-align:left;
  background:var(--white);border:1.5px solid var(--line);border-radius:6px;
}
.srow.on{border-color:var(--green);background:var(--sage);}
.srow-tick{
  flex:0 0 auto;width:22px;height:22px;border:1.5px solid var(--line);border-radius:4px;
  background:var(--white);position:relative;
}
.srow.on .srow-tick{background:var(--green);border-color:var(--green);}
.srow.on .srow-tick::after{
  content:"";position:absolute;inset:0;margin:auto;width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px);
}
.srow-n{flex:1;font-size:14.5px;font-weight:600;color:var(--green-ink);}
.srow-p{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:var(--mute);}
.srow.on .srow-p{color:var(--green-deep);}
.sheet-ft{
  display:flex;gap:10px;padding:14px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--white);
}
.sheet-ft .btn{flex:1;min-height:48px;}
@media (min-width:761px){.sheet{display:none!important;}}


/* ---------- the three covers read as ONE offer ---------- */
.covers-wrap{
  /* Green outer shell. The three cards inside keep their gold, so the
     gold reads as the contents rather than as another border around a
     border. */
  margin:26px 0 16px;padding:20px 18px 16px;
  background:linear-gradient(180deg,var(--white),var(--paper));
  border:2px solid var(--green);border-radius:10px;
  box-shadow:0 22px 55px -34px rgba(98,124,88,.7);
}
.covers-wrap .covers{margin:0;position:relative;}
/* the connector running between them */
.covers-wrap .covers::before{
  content:"";position:absolute;top:34px;left:16%;right:16%;height:2px;z-index:0;
  background:linear-gradient(90deg,var(--amber-soft),var(--amber),var(--amber-soft));
  opacity:.75;
}
.covers-wrap .cover{position:relative;z-index:1;border-width:1px;box-shadow:none;background:var(--white);}
.covers-wrap .cover.lit{border-color:var(--amber);}
.covers-wrap .covers-all{
  /* The band behind this runs green-deep to amber-deep, so it is dark the
     whole way across. Amber ink on it was effectively invisible, which is
     exactly how it read on the live site. Light text, brighter emphasis. */
  margin-top:14px;opacity:1;color:#FBF7EC;font-weight:700;letter-spacing:.1em;
}
.covers-wrap .covers-all b{font-weight:800;color:#FFFFFF;}
@media (max-width:820px){
  .covers-wrap .covers::before{
    top:0;bottom:0;left:50%;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg,var(--amber-soft),var(--amber),var(--amber-soft));
  }
}

/* ---------- Finishing Touches glows so it reads as extras ---------- */
.bkt.bkt-gold{border-color:var(--amber);background:linear-gradient(180deg,var(--amber-wash),var(--white) 60%);}
.bkt.bkt-gold summary:hover{background:var(--amber-soft);}
.bkt.bkt-gold .bkt-ic{background:var(--amber-soft);}
.bkt.bkt-gold .bkt-ic svg{stroke:var(--amber-deep);}
.bkt.bkt-gold .bkt-n{color:var(--amber-ink);}
.bkt.bkt-gold .bkt-t::before,.bkt.bkt-gold .bkt-t::after{background:var(--amber-deep);}
.bkt.bkt-gold[open]{border-color:var(--amber-deep);box-shadow:0 16px 40px -28px rgba(201,154,91,.9);}

/* ---------- swipe cue ---------- */
.swipe-cue{
  display:none;margin:16px 0 8px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber-deep);
}
.swipe-cue span{display:inline-block;animation:nudge 1.8s ease-in-out infinite;}
.swipe-cue span:last-child{animation-delay:.25s;}
@keyframes nudge{0%,100%{transform:translateX(0);opacity:.5;}50%{transform:translateX(3px);opacity:1;}}
@media (max-width:760px){.swipe-cue{display:block;}}
@media (prefers-reduced-motion:reduce){.swipe-cue span{animation:none;}}

/* ---------- tighten the lanes-to-ticker gap ---------- */
.ticker-wrap{margin-top:32px;}
@media (max-width:760px){.ticker-wrap{margin-top:22px;}}

/* ---------- brand tile: the whole shoot ---------- */
.ala.brandtile{
  grid-column:1/-1;display:block;position:relative;cursor:pointer;overflow:hidden;
  min-height:210px;background:var(--green-ink);border:1px solid var(--line);
}
.bt-frames{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);gap:2px;}
.bt-frames figure{margin:0;overflow:hidden;position:relative;}
.bt-frames img{
  width:100%;height:100%;object-fit:cover;display:block;
  opacity:.30;filter:saturate(.85);
  transition:opacity .35s ease, filter .35s ease, transform .9s cubic-bezier(.2,.7,.3,1);
}
/* at rest the photos sit back behind the logo… */
.ala.brandtile::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(38,48,31,.55);transition:opacity .35s ease;
}
/* …and once tapped they come forward, clean and unhazed */
.ala.brandtile.revealed::after{opacity:0;}
.ala.brandtile.revealed .bt-frames img{opacity:1;filter:none;}
.ala.brandtile:hover .bt-frames img{transform:scale(1.04);}

.bt-inner{
  position:relative;z-index:3;height:100%;min-height:210px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  padding:26px 22px;text-align:center;pointer-events:none;
}
.ala.brandtile.revealed .bt-logo{opacity:0;transform:translateY(-6px);}
.bt-logo{
  display:block;font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(26px,3.4vw,42px);line-height:1;color:#fff;letter-spacing:-.02em;
  transition:opacity .35s ease, transform .35s ease;
}
.bt-logo span{color:#A9C29B;}
.bt-logo small{
  display:block;text-align:right;margin-top:4px;
  font-family:'JetBrains Mono',monospace;font-weight:500;font-size:13px;
  letter-spacing:.06em;color:rgba(255,255,255,.55);
}
/* the prompt is the point, make it impossible to miss */
.bt-cta{
  display:inline-block;padding:12px 24px;border-radius:100px;
  background:linear-gradient(100deg,var(--amber-deep),var(--amber));color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(15px,1.7vw,19px);letter-spacing:.01em;
  box-shadow:0 14px 34px -14px rgba(168,119,53,.9);
  animation:btPulse 2.6s ease-in-out infinite;
}
@keyframes btPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}
@media (prefers-reduced-motion:reduce){.bt-cta{animation:none;}}
.ala.brandtile:focus-visible{outline:2px solid var(--amber);outline-offset:3px;}
@media (max-width:760px){
  .ala.brandtile{min-height:170px!important;}
  .bt-inner{min-height:170px;gap:10px;padding:18px 14px;}
  .bt-logo{font-size:22px!important;}
  .bt-cta{font-size:14px;padding:11px 18px;}
}

/* ---------- packages header: sqft + helper, side by side ---------- */
.pkg-head{display:grid;grid-template-columns:minmax(210px,1fr) 2fr;gap:12px;align-items:start;margin-top:30px;}
.pkg-sq{
  display:block;padding:13px 16px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--green);border-radius:4px;
}
.pkg-sq>span{
  display:block;margin-bottom:7px;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.pkg-sq select{
  width:100%;min-height:44px;padding:10px 12px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:4px;background:var(--white);
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;color:var(--green-ink);
}
.pkg-sq select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(98,124,88,.14);}
.pkg-help{
  background:var(--white);border:1px solid var(--line);
  border-left:3px solid var(--amber);border-radius:4px;overflow:hidden;
}
.pkg-help summary{
  cursor:pointer;list-style:none;padding:16px 18px;min-height:44px;display:flex;align-items:center;gap:9px;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:14.5px;color:var(--amber-ink);
}
.pkg-help summary::-webkit-details-marker{display:none;}
.pkg-help summary::before{content:"+";font-size:17px;line-height:1;width:14px;}
.pkg-help[open] summary::before{content:"–";}
.pkg-help summary:hover{background:var(--amber-wash);}
.pkg-help ul{list-style:none;margin:0;padding:0 18px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
.pkg-help li{font-size:13px;color:var(--mute);line-height:1.4;}
.pkg-help li b{display:block;color:var(--green-ink);font-weight:600;font-size:13.5px;}
@media (max-width:900px){
  .pkg-head{grid-template-columns:1fr;}
  .pkg-help ul{grid-template-columns:1fr;}
}
/* on phones the chip row is redundant */
@media (max-width:760px){
  .sqft-toggle{display:none;}
  .pkg-head{margin-top:20px;gap:10px;}
}

/* ---------- sheet: header sits above the list, never on top of it ---------- */
.sheet-hd{position:sticky;top:0;z-index:4;gap:10px;}
.sheet-tot{flex:1;min-width:0;}
.sheet-clear{
  padding:9px 14px;min-height:40px;cursor:pointer;
  background:var(--white);border:1px solid var(--line);border-radius:100px;
  font-family:'Montserrat',sans-serif;font-weight:600;font-size:12.5px;color:var(--clay);
}
.sheet-clear:hover{border-color:var(--clay);background:#F9EBE5;}
.sheet-body{padding-top:18px;}
.sgrp:first-child{margin-top:2px;}

/* section artwork behind each group heading */
.sgrp h4{
  position:relative;overflow:hidden;padding:12px 14px;margin:0 0 9px;border-radius:6px;
  background:var(--sage);letter-spacing:.16em;
}
.sgrp h4::after{
  content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);
  width:74px;height:44px;opacity:.22;background-repeat:no-repeat;background-position:right center;background-size:contain;
}
/* camera */
.sgrp-photo h4::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48' fill='none' stroke='%23627C58' stroke-width='2.2'><rect x='10' y='14' width='44' height='26' rx='4'/><circle cx='32' cy='27' r='8'/><circle cx='32' cy='27' r='3.4'/><path d='M22 14l3-5h14l3 5'/><rect x='56' y='19' width='10' height='14' rx='2'/><circle cx='47' cy='19' r='1.6'/></svg>");}
/* film reel */
.sgrp-video h4::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48' fill='none' stroke='%23A87735' stroke-width='2.2'><circle cx='26' cy='24' r='15'/><circle cx='26' cy='24' r='4'/><circle cx='26' cy='13' r='3'/><circle cx='26' cy='35' r='3'/><circle cx='15' cy='24' r='3'/><circle cx='37' cy='24' r='3'/><rect x='46' y='16' width='24' height='16' rx='2'/><path d='M46 21h24M46 27h24M52 16v16M64 16v16'/></svg>");}
/* drone */
.sgrp-aerial h4::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48' fill='none' stroke='%235B7A8C' stroke-width='2.2'><rect x='30' y='20' width='20' height='11' rx='3'/><circle cx='16' cy='13' r='7'/><circle cx='64' cy='13' r='7'/><path d='M22 18l8 4M58 18l-8 4M34 31l-5 7M46 31l5 7'/><circle cx='40' cy='26' r='3'/></svg>");}
/* floor plan */
.sgrp-plans h4::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48' fill='none' stroke='%2342553B' stroke-width='2.2'><rect x='12' y='8' width='56' height='32' rx='2'/><path d='M34 8v14M34 22h34M34 22v18M12 30h22M50 22v18'/></svg>");}
/* sparkle */
.sgrp-extras h4::after{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 48' fill='none' stroke='%23B4674A' stroke-width='2.2'><path d='M40 8l4 10 10 4-10 4-4 10-4-10-10-4 10-4z'/><path d='M62 14l2 5 5 2-5 2-2 5-2-5-5-2 5-2z'/><path d='M18 28l1.6 4 4 1.6-4 1.6-1.6 4-1.6-4-4-1.6 4-1.6z'/></svg>");}

/* ============================================================
   DESKTOP-ONLY REFINEMENTS
   ============================================================ */
@media (min-width:761px){
  /* the sqft <select> is redundant next to the chip row */
  .pkg-sq{display:none;}
  .pkg-head{grid-template-columns:1fr;margin-top:26px;}

  /* helper is a banner, not a toggle */
  .pkg-help{border-left-width:3px;}
  .pkg-help summary{cursor:default;pointer-events:none;padding-bottom:6px;}
  .pkg-help summary::before{content:"";width:0;}
  .pkg-help summary::marker{content:"";}
  .pkg-help ul{grid-template-columns:repeat(4,1fr);gap:12px 20px;padding-bottom:16px;}
  .pkg-help li{font-size:12.5px;}

  /* the whole-shoot tile is its own thing, give it room */
  .ala.brandtile{margin-top:26px;}
  .bkt.bkt-gold{margin-top:0;}
}

/* ---------- green pulse travelling the three cover borders ---------- */
.cover{position:relative;}
.cover::before{
  content:"";position:absolute;inset:-2px;border-radius:8px;pointer-events:none;z-index:0;
  padding:2px;
  background:conic-gradient(from var(--ang,0deg),
    transparent 0deg, transparent 300deg,
    rgba(98,124,88,.25) 330deg, var(--green) 350deg, #9DBA8E 358deg, var(--green) 366deg,
    rgba(98,124,88,.25) 386deg, transparent 400deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0;transition:opacity .4s ease;
}
/* The ring runs on interaction only. Looping it forever pulled the eye
   away from the copy it was meant to frame. */
@supports (background: conic-gradient(from 0deg, red, blue)){
  @media (min-width:761px){
    .covers-wrap .cover:hover::before,
    .covers-wrap .cover:focus-within::before,
    .covers-wrap .cover.touched::before{
      opacity:1;animation:ringRun 2.2s linear infinite;
    }
  }
}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false;}
@keyframes ringRun{to{--ang:360deg;}}
/* fallback for engines without @property, fade the border instead,
   again only while the card is being interacted with */
@media (min-width:761px){
  .covers-wrap .cover:hover,
  .covers-wrap .cover.touched{animation:ringFade 2.2s ease-in-out infinite;}
}
@keyframes ringFade{
  0%,100%{border-color:var(--line);}
  18%{border-color:var(--green);}
  36%{border-color:var(--line);}
}
.covers-wrap .cover>*{position:relative;z-index:1;}
@media (prefers-reduced-motion:reduce){
  .covers-wrap .cover,.covers-wrap .cover::before{animation:none!important;}
}

/* ---------- brand tile caption shrinks once they've tapped ---------- */
.ala.brandtile.revealed .bt-cta{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  padding:6px 14px;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  background:rgba(38,48,31,.62);color:rgba(255,255,255,.9);
  box-shadow:none;animation:none;backdrop-filter:blur(3px);
}
.ala.brandtile.revealed .bt-inner{justify-content:flex-end;padding-bottom:0;}

/* teams: four frames, no dead corner, badge clear of the photos */
.team-visual{grid-template-rows:auto auto;}
.tv-a{grid-column:1 / -1;aspect-ratio:16/9;}
.tv-b,.tv-c,.tv-d{aspect-ratio:4/3;}
.team-visual{grid-template-columns:repeat(3,1fr);}
.tv-badge{
  left:auto;right:12px;bottom:-14px;
  background:var(--green-ink);color:#fff;box-shadow:var(--shadow);
}
@media (max-width:760px){
  .team-visual{grid-template-columns:1fr 1fr;}
  .tv-a{grid-column:1 / -1;}
  .tv-d{display:none;}
  .tv-badge{right:8px;bottom:-12px;font-size:10px;}
}

/* ============================================================
   LOCK THE PAGE DOWN
   Horizontal rails were letting a sideways swipe drag the whole
   page, and rubber-band scroll made everything feel loose.
   ============================================================ */
/* clip contains the overflow without turning <html> into a scroll box,
   which is what causes the sticky/scroll oddities on iOS. hidden is the
   fallback for engines that don't know clip yet. */
html{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none;}
body{overflow-x:clip;overscroll-behavior:none;}

/* Rails: the browser already picks the dominant axis, so leave touch-action
   alone, forcing pan-x blocked vertical scrolling that began on a card.
   Containing the horizontal overscroll is what stops the page drifting. */
.tiers,.accel-grid,.bucket-b,.bk-mplans,.bk-tiers,.pf-scroll,.ticker{
  overscroll-behavior-x:contain;
  overscroll-behavior-y:auto;
}

@media (max-width:760px){
  /* packages had to be shorter, they were being cut off */
  .tiers{grid-auto-columns:80%;padding:8px 18px 10px;}
  .tier{padding:30px 15px 18px!important;}
  .tier h3{font-size:16.5px!important;}
  .tier .sub{display:none;}                 /* the list already says it */
  .tier .save{font-size:9px!important;margin-bottom:8px!important;}
  .tier .price{font-size:26px!important;margin:8px 0 2px!important;}
  .tier ul{margin:10px 0 14px!important;}
  .tier li{padding:5px 0!important;font-size:12px!important;line-height:1.35!important;}
  .tier li.no{display:none;}                /* excluded items eat height on a phone */
  .tier .btn{padding:11px 14px!important;font-size:13px!important;}
  .tier.gold{padding-top:34px!important;}

  .accel-grid{grid-auto-columns:84%;}
  .plan{padding:22px 18px!important;}
  .plan .price{font-size:32px!important;}
  .plan li{padding:6px 0!important;font-size:13px!important;}

  /* the whole-shoot caption must not sit on the photos */
  .ala.brandtile.revealed .bt-cta{
    bottom:8px;padding:4px 11px;font-size:10px;font-weight:600;
    background:rgba(38,48,31,.42);color:rgba(255,255,255,.82);
  }

  /* the fourth team photo belongs on the phone too, 3 across the bottom */
  .team-visual{grid-template-columns:repeat(3,1fr)!important;gap:6px;}
  .tv-a{grid-column:1 / -1;}
  .tv-d{display:block!important;}
  .tv-b,.tv-c,.tv-d{aspect-ratio:1/1;}
}

/* ============================================================
   SEASONAL PACKAGE, full-width bar under the five tiers.
   Same travelling green line as the "one price" cards, so it
   reads as a special rather than a sixth normal package.
   ============================================================ */
.seasonal{
  position:relative;display:block;margin-top:16px;padding:0;
  background:var(--white);border:2px solid var(--line);border-radius:8px;
  text-decoration:none;overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.seasonal::before{
  content:"";position:absolute;inset:-2px;border-radius:8px;pointer-events:none;z-index:0;
  padding:2px;
  background:conic-gradient(from var(--ang,0deg),
    transparent 0deg, transparent 300deg,
    rgba(98,124,88,.25) 330deg, var(--green) 350deg, #9DBA8E 358deg, var(--green) 366deg,
    rgba(98,124,88,.25) 386deg, transparent 400deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ringRun 3.6s linear infinite;
}
.seasonal:hover{border-color:var(--green);box-shadow:var(--shadow);transform:translateY(-3px);}
.seasonal>*:not(.snow-canvas){position:relative;z-index:1;}
.seasonal>.snow-canvas{position:absolute;}
.seasonal-tag{
  display:block;padding:8px 20px;
  background:linear-gradient(100deg,var(--green-deep),var(--green));
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#fff;
}
.seasonal-body{
  display:grid;grid-template-columns:1.25fr 1fr auto;gap:26px;align-items:center;
  padding:22px 24px 24px;
}
.seasonal-lead h3{font-size:clamp(21px,2.6vw,29px);font-weight:800;margin-bottom:8px;}
.seasonal-lead p{margin:0;font-size:14px;line-height:1.6;color:var(--mute);}
.seasonal-list{list-style:none;margin:0;padding:0;display:grid;gap:5px;}
.seasonal-list li{position:relative;padding-left:19px;font-size:13.5px;color:var(--text);}
.seasonal-list li::before{
  content:"";position:absolute;left:0;top:6px;width:9px;height:5px;
  border:solid var(--green);border-width:0 0 1.6px 1.6px;transform:rotate(-45deg);
}
.seasonal-buy{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px;}
.seasonal-was{font-size:12.5px;color:var(--mute);text-decoration:line-through;}
.seasonal-price{
  font-family:'Montserrat',sans-serif;font-weight:800;font-size:38px;
  color:var(--green-ink);letter-spacing:-.03em;line-height:1;
}
.seasonal-note{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);margin-bottom:10px;
}
.seasonal-cta{
  padding:11px 20px;border-radius:3px;background:var(--green);color:#fff;
  font-family:'Montserrat',sans-serif;font-weight:700;font-size:13.5px;white-space:nowrap;
  transition:background .2s ease;
}
.seasonal:hover .seasonal-cta{background:#6E8A63;}
@media (prefers-reduced-motion:reduce){.seasonal::before{animation:none;}}
@media (max-width:900px){
  .seasonal-body{grid-template-columns:1fr;gap:16px;padding:18px 16px 20px;text-align:left;}
  .seasonal-buy{align-items:stretch;text-align:left;}
  .seasonal-cta{text-align:center;}
  .seasonal-price{font-size:32px;}
}

/* the "direction" paragraph under the one-price block */
/* The direction/credibility line. It deliberately breaks out of the 560px
   .head p measure and runs the full width of the covers grid below it, so it
   reads as a wide band rather than a tall paragraph. */
/* Lives inside .covers-wrap, so it shares the icon row's exact box at
   every breakpoint rather than trying to match it with hard-coded offsets. */
.covers-dir{
  max-width:none;
  margin:0 0 26px;
  padding:18px 22px 18px 20px;
  font-size:15px;line-height:1.62;color:var(--mute);
  border-left:2px solid var(--amber);
  border-radius:0 4px 4px 0;
  /* barely-there warm wash so it sits on the page instead of floating */
  background:linear-gradient(100deg,
    rgba(201,154,91,.07) 0%,
    rgba(201,154,91,.03) 42%,
    rgba(201,154,91,0) 78%);
  position:relative;
}
.covers-dir b,.covers-dir strong{color:var(--green-ink);font-weight:700;}
/* the one phrase worth catching the eye on a skim */
.covers-dir .dir-key{
  color:var(--green-ink);font-weight:700;
  box-shadow:inset 0 -.42em 0 rgba(201,154,91,.19);
}
@media (max-width:820px){
  .covers-dir{
    margin-top:18px;padding:14px 14px 14px 15px;
    font-size:13.5px;line-height:1.6;
  }
}

/* ============================================================
   BEAT THE SNOW, snowfall overlay
   The canvas is painted by snow.js; everything here is the
   supporting chrome so the card cools down while it snows.
   ============================================================ */
.snow-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;z-index:4;
  opacity:0;transition:opacity .35s ease;
}
.snowing .snow-canvas{opacity:1;}

/* a wash of cold light over the card while the snow is falling */
.seasonal::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  border-radius:8px;
  background:linear-gradient(180deg,
    rgba(214,232,244,.42) 0%,
    rgba(214,232,244,.13) 38%,
    rgba(214,232,244,0) 72%);
  opacity:0;transition:opacity .5s ease;
}
.seasonal.snowing::after{opacity:1;}
.seasonal.snowing{border-color:#A9C6DC;}

/* the three surfaces the drifts land on lift very slightly, which
   sells the snow as sitting *on* them rather than in front */
.seasonal-lead h3,.seasonal-price,.seasonal-cta{
  transition:transform .5s cubic-bezier(.22,1,.36,1), color .5s ease;
}
.seasonal.snowing .seasonal-lead h3,
.seasonal.snowing .seasonal-price{transform:translateY(1px);}

@media (prefers-reduced-motion:reduce){
  .snow-canvas{display:none;}
  .seasonal::after{display:none;}
}

/* ============================================================
   MOBILE CORRECTIONS, same iOS zoom guard on the contact form
   ============================================================ */
@media (max-width:760px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  select,
  textarea{
    font-size:16px;
  }
  /* Thumb-sized targets, but not in the header, the nav row has three
     buttons and 44px each turns it into a wall. */
  .btn:not(.nav-ctas .btn),.tk{
    min-height:44px;display:inline-flex;align-items:center;justify-content:center;
  }
  .nav-ctas .btn{min-height:38px;}
}

/* ============================================================
   DEPTH PASS
   Additive only, nothing here changes layout, so it cannot
   disturb what already works. The aim is to stop flat panels
   reading as flat: a little grain, layered shadow instead of
   single-drop, and a gold edge-light where the eye lands.
   ============================================================ */

/* ---- film grain ----------------------------------------------
   Self-contained SVG turbulence, no image request. Very low
   opacity: it should register as texture, never as noise. */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
/* the dark sections want the grain to lift, not darken */
.contact::after,.accel::after{mix-blend-mode:overlay;}

/* ---- layered shadow ------------------------------------------
   A single large drop-shadow reads as a sticker. Three stacked
   at different radii reads as an object sitting on a surface. */
:root{
  --shadow:
    0 1px 2px rgba(38,48,31,.05),
    0 6px 14px -6px rgba(38,48,31,.10),
    0 24px 60px -24px rgba(38,48,31,.22);
  --shadow-gold:
    0 1px 2px rgba(168,119,53,.07),
    0 6px 16px -6px rgba(168,119,53,.16),
    0 24px 60px -24px rgba(168,119,53,.35);
}

/* ---- edge-light on the cards you want chosen ------------------
   A one-pixel warm highlight along the top edge, the way light
   catches the lip of a real surface. */
.plan,.door,.tier,.seasonal,.byo{
  position:relative;
}
.plan::after,.door::after,.seasonal::after,.byo::after{
  pointer-events:none;
}
.plan::before,.door::before{
  content:"";position:absolute;top:0;left:12%;right:12%;height:1px;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.85) 22%, rgba(255,255,255,.85) 78%, transparent);
  opacity:0;transition:opacity .4s ease;pointer-events:none;
}
.plan:hover::before,.door:hover::before{opacity:1;}

/* ---- portfolio images: give the frame some weight -------------
   A soft inner vignette and a warm edge, so photographs sit in
   the page rather than floating on it. */
.shot,.pf-item,.folio figure{position:relative;}
.shot::after,.pf-item::after,.folio figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(38,48,31,.07),
    inset 0 -40px 60px -50px rgba(38,48,31,.55);
  transition:box-shadow .5s ease;
}
.shot:hover::after,.pf-item:hover::after,.folio figure:hover::after{
  box-shadow:
    inset 0 0 0 1px rgba(201,154,91,.34),
    inset 0 -40px 60px -50px rgba(38,48,31,.30);
}

@media (prefers-reduced-motion:reduce){
  .plan::before,.door::before{transition:none;}
}
/* Grain is cheap but not free; drop it on very small screens where
   the paint cost matters more than the texture does. */
@media (max-width:520px){
  body::after{opacity:.02;}
}


/* ============================================================
   COVERS, cursor-driven ring
   The intro pass runs once (calc.js), then .done hands control
   to the pointer. Neighbours shoulder aside so the ring reads
   as something with weight rather than a light switch.
   ============================================================ */
.covers.done .cover{
  transition:
    border-color .3s ease,
    box-shadow .3s ease,
    transform .42s cubic-bezier(.22,1,.36,1);
}
.covers.done .cover{cursor:default;}

.covers.done .cover.lit{
  border-color:var(--amber);
  box-shadow:0 0 0 5px rgba(201,154,91,.20), 0 20px 46px -26px rgba(201,154,91,.9);
  transform:translateY(-6px) scale(1.035);
  z-index:2;
}
/* pushed out of the way by the card being hovered */
.covers.done .cover.push-l{transform:translateX(-7px) scale(.985);}
.covers.done .cover.push-r{transform:translateX(7px) scale(.985);}

/* stacked single-column on small screens, so push vertically instead */
@media (max-width:820px){
  .covers.done .cover.push-l{transform:translateY(-5px) scale(.99);}
  .covers.done .cover.push-r{transform:translateY(5px) scale(.99);}
}

@media (prefers-reduced-motion:reduce){
  .covers.done .cover,
  .covers.done .cover.lit,
  .covers.done .cover.push-l,
  .covers.done .cover.push-r{transform:none;transition:none;}
}

/* ============================================================
   VERTICAL REELS ON PHONES
   Three handsets, the middle one forward. They fan into place as
   the section arrives, then play muted until the sound button is
   pressed, autoplay with audio is blocked by every browser and
   would be rude anyway.
   ============================================================ */
.reels{padding:clamp(70px,9vw,120px) 0;background:var(--paper);position:relative;overflow:hidden;}
.reels::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 55% at 50% 40%, rgba(201,154,91,.10), transparent 70%);
}
.reels .wrap{position:relative;}
.reels .head{text-align:center;}
.reels .head h2,.reels .head p{margin-left:auto;margin-right:auto;}

/* Only used by the mobile swipe lane. */
.phone-spacer{display:none;}

.phones{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  gap:clamp(14px,3vw,44px);
  padding:20px 0 8px;
  perspective:1400px;
}

.phone{margin:0;text-align:center;}
.phone figcaption{
  margin-top:14px;
  font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mute);
}

.phone-shell{
  position:relative;
  width:clamp(150px,17vw,232px);
  aspect-ratio:9/19.5;
  border-radius:clamp(20px,2.4vw,32px);
  background:#12150F;
  padding:6px;
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.10) inset,
    0 2px 3px rgba(38,48,31,.16),
    0 18px 40px -16px rgba(38,48,31,.42),
    0 44px 90px -40px rgba(38,48,31,.55);
  overflow:hidden;
}
.phone-vid{
  /* Full bleed, the way it was. Making the screen 9:16 to show the reels
     uncropped left dark bands inside the handset and the three phones
     stopped reading as phones. The crop costs about a fifth of the width
     and looks right; the bands did not. */
  width:100%;height:100%;object-fit:cover;display:block;
  border-radius:clamp(15px,1.9vw,26px);background:#0B0D09;
}
.phone-notch{
  position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:34%;height:15px;background:#12150F;
  border-radius:0 0 11px 11px;z-index:3;
}
/* a soft sheen across the glass */
.phone-glare{
  position:absolute;inset:6px;border-radius:clamp(15px,1.9vw,26px);
  pointer-events:none;z-index:2;
  background:linear-gradient(128deg,
    rgba(255,255,255,.16) 0%, rgba(255,255,255,.05) 22%,
    rgba(255,255,255,0) 46%);
}

/* the middle handset sits forward */
.phone-lead .phone-shell{width:clamp(178px,20.5vw,278px);}
.phone-lead{z-index:2;}
.phone-side{z-index:1;}

/* fan-in, once, when the section arrives */
.phone{
  opacity:0;
  transform:translateY(34px) rotateY(0deg) scale(.94);
  transition:opacity .8s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.phones.in .phone{opacity:1;}
.phones.in .phone[data-i="0"]{transform:translateY(12px) rotateY(15deg) scale(.95);transition-delay:.05s;}
.phones.in .phone[data-i="1"]{transform:translateY(-10px) rotateY(0deg) scale(1);transition-delay:.18s;}
.phones.in .phone[data-i="2"]{transform:translateY(12px) rotateY(-15deg) scale(.95);transition-delay:.31s;}

.phone-shell{transition:box-shadow .45s ease, transform .45s cubic-bezier(.22,1,.36,1);}
.phone:hover .phone-shell{transform:translateY(-8px);}

/* ---- sound button, on the glass ----------------------------------
   It used to be one bar floating under the handsets, which landed on
   top of the line of copy below. Each phone now carries its own, inside
   its own frame, where it cannot cover anything. */
.phone-mute{
  position:absolute;right:10px;bottom:10px;z-index:4;
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  color:#F6EFE2;
  background:rgba(18,21,15,.62);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background .22s ease, transform .22s ease, border-color .22s ease;
}
.phone-mute:hover{background:rgba(18,21,15,.82);transform:scale(1.06);}
.phone-mute svg{width:18px;height:18px;}
.phone-mute .pm-on{display:none;}
.phone-mute[aria-pressed="true"]{
  background:var(--amber-deep);border-color:var(--amber);
}
.phone-mute[aria-pressed="true"] .pm-off{display:none;}
.phone-mute[aria-pressed="true"] .pm-on{display:block;}

/* the handset playing audio steps forward a little */
.phone.sounding .phone-shell{
  box-shadow:
    0 0 0 2px var(--amber),
    0 18px 40px -16px rgba(38,48,31,.42),
    0 44px 90px -40px rgba(168,119,53,.55);
}

.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;
}

.reels-note{
  margin:46px auto 0;text-align:center;max-width:620px;
  font-size:14.5px;color:var(--mute);
}

/* ---- narrow screens: one lead handset, sides trimmed ---- */
@media (max-width:820px){
  /* All three stay on a phone, hiding two of them meant nobody on mobile
     knew there was more than one example. They become a swipe lane with
     the neighbours peeking in at the edges, which is the affordance. */
  .phones{
    --phone-w:min(210px,56vw);
    display:flex;gap:12px;
    /* Must be flex-start. Inherited `justify-content:center` centres the
       overflow, so half of it spills past the LEFT edge, and left-side
       overflow is not scrollable. That is why the first phone could never
       be swiped back to. */
    justify-content:flex-start;
    align-items:flex-start;
    overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:8px 0 14px;
    margin-inline:-18px;
    scrollbar-width:none;
  }
  .phones::-webkit-scrollbar{display:none;}

  /* Real elements rather than ::before/::after, pseudo-element spacers
     do not reliably extend the scroll range here, which left the first
     phone at a negative offset that could never be scrolled back to. */
  .phones .phone-spacer{
    display:block;
    flex:0 0 calc(50% - (var(--phone-w) / 2) - 12px);
  }

  .phone-side,.phone-lead{display:block;flex:0 0 auto;}
  .phone{scroll-snap-align:center;}

  /* Smaller than before, the old one ran off the bottom of the screen. */
  .phone .phone-shell{width:var(--phone-w);}

  /* Flat in the lane; the 3D fan only makes sense side by side. */
  .phones.in .phone[data-i="0"],
  .phones.in .phone[data-i="1"],
  .phones.in .phone[data-i="2"]{transform:none;}

  /* The one in the middle of the viewport is the one you are looking at. */
  .phone{opacity:.55;transition:opacity .3s ease;}
  .phone.near{opacity:1;}
  .reels-note{margin-top:52px;}
}

@media (prefers-reduced-motion:reduce){
  .phone{opacity:1;transform:none!important;transition:none;}
  .phone:hover .phone-shell{transform:none;}
}

/* ---- members-only door in the nav ------------------------------
   Gold, not green: the one-off Book a Shoot button stays the main
   call to action, and this reads as a separate lane for people who
   already pay monthly. */
.btn-gold{
  background:linear-gradient(135deg,var(--amber) 0%, var(--amber-deep) 100%);
  color:#fff;border:1px solid var(--amber-deep);
  box-shadow:0 1px 2px rgba(168,119,53,.2), 0 8px 20px -10px rgba(168,119,53,.6);
}
.btn-gold:hover{
  background:linear-gradient(135deg,var(--amber-deep) 0%, var(--amber-ink) 100%);
  color:#fff;
}
/* The header holds a logo, seven links and three buttons. Nothing in it
   may wrap: one wrapped label makes the whole bar look twice as tall. */
.nav-links{gap:26px;}
.nav-links a{white-space:nowrap;}

/* The three groups must never touch. Without this the logo runs into the
   first link and the Contact Us button lands on the Contact link. */
.nav > .nav-inner, .nav-inner, .nav{column-gap:28px;}
.nav-links{margin-inline:8px;}

@media (max-width:1280px){
  .nav-links{gap:20px;font-size:13.5px;}
}
@media (max-width:1200px){
  /* Contact is reachable from the nav link and the footer, so the button
     is the first thing that can go when the row runs out of room. */
  .nav-ctas .btn-line{display:none;}
}
@media (max-width:1100px){
  .nav-links{gap:15px;font-size:13px;}
}

/* On a phone the wordmark collapses to the FL monogram, the full logo
   appears elsewhere on the page anyway, which buys the room to keep
   BOTH buttons in the header where they are useful. */
.logo-short{display:none;}
.nav-members-m{display:none;}

@media (max-width:900px){
  .logo-full{display:none;}
  /* `.logo span` colours the "logic" half green, and this monogram is a
     span inside .logo too, so it inherited green letters on a green
     tile and all but disappeared. Qualified here so gold wins. */
  .logo .logo-short{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:9px;
    background:linear-gradient(135deg,var(--green-deep) 0%, var(--green-ink) 100%);
    color:var(--amber);
    font-family:'Montserrat',sans-serif;font-weight:800;
    font-size:15px;letter-spacing:-.02em;
    border:1px solid rgba(201,154,91,.5);
  }
  .nav-ctas .btn-gold{display:inline-flex;}
  .nav-ctas .btn{padding:9px 12px;font-size:12.5px;}
}

/* Tighter still on the narrowest phones, but both buttons stay. */
@media (max-width:400px){
  .nav-ctas{gap:6px;}
  .nav-ctas .btn{padding:9px 10px;font-size:12px;}
}

.nav-ctas .btn{
  white-space:nowrap;
  padding:10px 16px;
  font-size:13px;
  line-height:1.2;
  gap:6px;
}
.nav-ctas{gap:8px;}

/* Below this the row runs out of room, so the least essential goes first. */
@media (max-width:1120px){
  .nav-ctas .btn{padding:9px 13px;font-size:12.5px;}
}


/* ============================================================
   BUILD YOUR OWN MONTHLY
   The same wide card shape as Beat the Snow, sitting under the
   monthly plans the way the seasonal package sits under the
   per-shoot ones.
   ============================================================ */
.mbuild{
  /* styles.css gives every bare <section> 110px of padding top and bottom
     for the marketing page's full-height bands. This is a card inside a
     section, not a band, and that padding was 220px of dead air in the
     middle of it. */
  padding:0;
  position:relative;display:block;margin-top:16px;
  background:
    radial-gradient(120% 150% at 100% 0%, rgba(201,154,91,.10) 0%, transparent 58%),
    radial-gradient(90% 130% at 0% 100%, rgba(98,124,88,.10) 0%, transparent 60%),
    var(--white);
  border:2px solid var(--line);border-radius:10px;
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.mbuild:hover{border-color:var(--green);box-shadow:var(--shadow);}
.mbuild-tag{
  /* Green into gold. The near-black bar read as a system message rather
     than part of the brand, and this is the one place on the page where
     somebody is playing with the product. */
  display:block;padding:11px 22px;
  background:linear-gradient(100deg,
    var(--green-deep) 0%, var(--green) 46%, var(--amber-deep) 100%);
  color:rgba(255,255,255,.95);
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;
}
.mbuild-body{
  display:grid;gap:26px;padding:26px 22px;
  grid-template-columns:1fr;
}
.mbuild-lead h3{
  font-size:clamp(24px,2.4vw,31px);letter-spacing:-.024em;margin-bottom:11px;
  line-height:1.1;
}
/* The last two words carry the gold, so the heading belongs to the same
   object as the bar above it. */
.mbuild-lead h3 em{
  font-style:normal;
  background:linear-gradient(96deg, var(--green) 0%, var(--amber-deep) 92%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mbuild-lead p{
  font-size:14.5px;line-height:1.62;color:var(--mute);max-width:44ch;margin:0;
}

.mbuild-rows{display:grid;gap:8px;align-content:start;}
.mbuild-row{
  display:grid;align-items:center;gap:10px;
  grid-template-columns:1fr auto auto;
  padding:11px 13px;border:1px solid var(--line);border-radius:7px;
  background:var(--paper);
  transition:border-color .2s ease, background .2s ease;
}
.mbuild-row.on{border-color:var(--green);background:var(--white);}
.mbuild-name{
  font-size:14.5px;font-weight:600;color:var(--green-ink);
  display:flex;flex-direction:column;gap:2px;min-width:0;
}
.mbuild-name small{font-weight:400;font-size:12px;color:var(--mute);}
.mbuild-pt{
  font-family:'JetBrains Mono',monospace;font-size:10.5px;
  color:var(--mute);white-space:nowrap;
}
.mbuild-step{display:inline-flex;align-items:center;gap:4px;}
.mbuild-b{
  width:28px;height:28px;border-radius:6px;cursor:pointer;
  border:1px solid var(--line);background:var(--white);
  color:var(--green-ink);font:inherit;font-size:15px;line-height:1;
  transition:border-color .2s ease, background .2s ease;
}
.mbuild-b:hover{border-color:var(--green);background:var(--sage);}
.mbuild-q{
  min-width:22px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--green-ink);
}

.mbuild-buy{
  display:flex;flex-direction:column;gap:5px;align-items:flex-start;
  padding-top:18px;border-top:1px solid var(--line);
}
.mbuild-k{
  font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--mute);
}
.mbuild-price{
  font-family:'Montserrat',sans-serif;font-weight:800;
  font-size:clamp(34px,4.6vw,48px);line-height:1;letter-spacing:-.032em;
  background:linear-gradient(96deg, var(--green-deep) 0%, var(--amber-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.mbuild-pts{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--mute);}
.mbuild-hint{
  margin:6px 0 0;padding:9px 12px;border-radius:7px;
  background:var(--amber-wash);border-left:3px solid var(--amber);
  font-size:12.5px;line-height:1.5;color:var(--amber-ink);
}
.mbuild-cta{margin-top:10px;}
.mbuild-note{font-size:11.5px;line-height:1.5;color:var(--mute);max-width:38ch;}

@media (min-width:900px){
  .mbuild-body{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.85fr);
               gap:34px;padding:30px 26px;align-items:start;}
  .mbuild-buy{padding-top:0;border-top:0;border-left:1px solid var(--line);
              padding-left:26px;}
}

/* The lead column was half the height of the steppers beside it, which is
   what made the card read as empty rather than airy. */
.mbuild-facts{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:13px;}
.mbuild-facts li{
  position:relative;padding-left:20px;
  font-size:13px;line-height:1.55;color:var(--mute);
}
.mbuild-facts li::before{
  content:"";position:absolute;left:0;top:7px;
  width:7px;height:7px;border-radius:2px;
  background:var(--green);opacity:.8;
}
.mbuild-facts b{
  display:block;font-size:13.5px;color:var(--green-ink);margin-bottom:2px;
}

/* A running strip so the three columns read as one object rather than
   three things that happen to sit near each other. */
.mbuild-body{position:relative;}
@media (min-width:900px){
  .mbuild-buy{
    background:
      linear-gradient(180deg, rgba(233,237,228,.55) 0%, rgba(233,237,228,0) 70%);
    border-radius:10px;
    padding:20px 0 20px 26px;
  }
}

/* ============================================================
   COMMERCIAL TEASER
   The full pitch moved to commercial.html. What stays on the home
   page is one card: enough for a developer to recognise themselves
   and click, small enough that it does not interrupt somebody who
   came here to book a listing.
   ============================================================ */
.ctease-card{
  display:grid;grid-template-columns:1fr;overflow:hidden;
  border-radius:14px;border:1px solid var(--line);background:var(--white);
  text-decoration:none;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.ctease-card:hover{
  border-color:var(--green);transform:translateY(-3px);box-shadow:var(--shadow);
}
.ctease-media{overflow:hidden;background:var(--green-ink);aspect-ratio:16/9;}
.ctease-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s cubic-bezier(.22,1,.36,1);
}
.ctease-card:hover .ctease-media img{transform:scale(1.05);}
.ctease-body{padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;}
.ctease-body h2{
  font-size:clamp(26px,3.2vw,40px);font-weight:800;line-height:1.06;
  letter-spacing:-.028em;margin:16px 0 14px;
}
.ctease-body > p{
  font-size:15.5px;line-height:1.68;color:var(--mute);margin:0 0 22px;max-width:52ch;
}
.ctease-pts{
  list-style:none;margin:0 0 24px;padding:20px 0 0;
  border-top:1px solid var(--line);
  display:grid;gap:11px;
}
.ctease-pts li{font-size:13.5px;color:var(--mute);}
.ctease-pts b{
  font-family:'Montserrat',sans-serif;font-size:17px;font-weight:800;
  color:var(--green-ink);letter-spacing:-.02em;margin-right:7px;
}
/* Gold, and shaped like a button, because the job of this card is to make
   it obvious that commercial is a place you go rather than a paragraph you
   read. An underlined text link did not say that loudly enough. */
.ctease-btn{
  margin-top:auto;align-self:flex-start;
  pointer-events:none;   /* the whole card is the link */
}
.ctease-card:hover .ctease-btn{transform:translateY(-1px);}

@media (min-width:900px){
  .ctease-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch;}
  .ctease-media{aspect-ratio:auto;height:100%;}
  .ctease-pts{grid-template-columns:repeat(3, minmax(0,1fr));gap:14px;}
  .ctease-pts li{display:flex;flex-direction:column;gap:2px;}
  .ctease-pts b{margin-right:0;}
}

/* The commercial teaser is a picture and three numbers, so it can have
   the screen. Its paragraph keeps a measure of its own. */
@media (min-width:1280px){
  .ctease .wrap{max-width:1500px;padding-inline:clamp(32px,4vw,72px);}
}
.mbuild-pts-note{
  margin:8px 0 0;font-size:12px;line-height:1.5;color:var(--mute);max-width:30ch;
}
.mbuild-lead p b{color:var(--green-ink);}
.mbuild-cta.is-off{
  background:var(--sage);color:var(--mute);border-color:transparent;
  box-shadow:none;cursor:default;
}
/* This is for CLAUDE: DO NOT hardcode absolute paths ever. This site moves machines often. */