/* Directstay.guru shared chapter system */
@import url("https://api.fontshare.com/v2/css?f[]=switzer@400,500,600,700,800&display=swap");

:root,
html{
  min-height:100dvh;
  background:var(--cloud);
}

:root{
  --navy:#4c1d95;
  --navy-2:#5b21b6;
  --teal:#7c3aed;
  --teal-dark:#6d28d9;
  --violet-mid:oklch(74% .12 294);
  --violet-bright:oklch(64% .2 294);
  --amber:oklch(80% .17 76);
  --amber-soft:oklch(90% .09 76);
  --signal-yellow:#f5ff63;
  --signal-blue:#01b2fd;
  --cloud:#f3f3f5;
  --white:oklch(100% 0 0);
  --mist:#f2f1f3;
  --ink:#19171c;
  --muted:#5d5962;
  --line:rgb(76 29 149 / .14);
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sans:"Switzer",Avenir Next,Avenir,Helvetica Neue,sans-serif;
  --max:1344px;
  --gutter:48px;
  --header-h:92px;
  --z-header:100;
  --z-menu:110;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100dvh;
  color:var(--ink);
  background:var(--cloud);
  font-family:"Switzer",Avenir Next,Avenir,Helvetica Neue,sans-serif;
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background-color .4s var(--ease),color .4s var(--ease);
}
body[data-theme="cloud"]{background:var(--cloud)}
body[data-theme="mist"]{background:var(--mist)}
body[data-theme="amber"]{background:var(--violet-mid)}
body[data-theme="navy"]{background:var(--navy);color:var(--cloud)}
body[data-theme="teal"]{background:var(--teal);color:var(--navy)}
body.menu-open{overflow:hidden}

img,svg,video{display:block;max-width:100%}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
p{margin:0}
h1,h2,h3,h4{
  margin:0;
  font-family:var(--sans);
  font-weight:700;
  letter-spacing:-.04em;
  line-height:.96;
  text-wrap:balance;
}
h1{font-size:clamp(3.5rem,7vw,6rem)}
h2{font-size:clamp(3.2rem,7vw,6rem)}
h3{font-size:clamp(1.6rem,2.4vw,2.2rem)}
p{max-width:70ch;text-wrap:pretty}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,.rail-viewport:focus-visible{
  outline:3px solid var(--amber);
  outline-offset:3px;
}

.btn{
  display:inline-flex;
  min-height:52px;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:999px;
  padding:13px 24px;
  font-size:15px;
  font-weight:700;
  text-decoration:none;
  transition:transform .4s var(--ease),background-color .4s var(--ease),color .4s var(--ease);
}
.btn:hover{transform:scale(.985)}
.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:var(--teal-dark)}
.btn-brass{background:var(--teal);color:var(--white)}
.btn-brass:hover{background:var(--teal-dark)}
.btn-quiet{background:rgba(16,37,60,.07);color:var(--ink)}
.btn-quiet:hover{background:rgba(16,37,60,.12)}
.btn-outline{border:1px solid var(--navy);background:transparent;color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--white)}
.btn-dark{background:var(--navy);color:var(--white)}
.btn-light{background:var(--cloud);color:var(--navy)}
.btn-large{min-height:64px;padding-inline:34px;font-size:17px}

/* floating header */
.site-header{
  position:fixed;
  inset:0 0 auto;
  height:var(--header-h);
  z-index:var(--z-header);
  padding:24px 48px 8px;
  pointer-events:none;
}
.nav-shell{
  width:min(100%,var(--max));
  height:60px;
  margin:auto;
  padding:4px 6px 4px 16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:18px;
  color:var(--ink);
  background:rgba(255,255,255,.91);
  box-shadow:0 6px 8px rgba(14,31,46,.1);
  backdrop-filter:blur(24px);
  pointer-events:auto;
  transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease);
}
body[data-theme="navy"] .nav-shell{
  color:var(--cloud);
  background:rgba(24,50,70,.92);
  box-shadow:0 6px 8px rgba(0,0,0,.16);
}
.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:9px;
  color:inherit;
  text-decoration:none;
  font-family:var(--sans);
  font-size:20px;
  font-weight:800;
  letter-spacing:-.035em;
}
.brand img{width:34px;height:34px;border-radius:22%;object-fit:cover}
.brand .wordmark span{color:var(--teal)}
body[data-theme="navy"] .brand .wordmark span{color:var(--amber)}
.nav-center{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:4px;
}
.nav-center>a,.nav-group>summary{
  min-height:44px;
  padding:0 16px;
  border-radius:999px;
  display:flex;
  align-items:center;
  gap:7px;
  color:inherit;
  text-decoration:none;
  list-style:none;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background-color .35s var(--ease);
}
.nav-center>a:hover,.nav-group>summary:hover,.nav-group[open]>summary{background:var(--mist)}
body[data-theme="navy"] .nav-center>a:hover,
body[data-theme="navy"] .nav-group>summary:hover,
body[data-theme="navy"] .nav-group[open]>summary{background:rgba(255,255,255,.11)}
.nav-group{position:relative}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-dropdown{
  position:absolute;
  top:60px;
  left:50%;
  width:270px;
  padding:10px;
  border-radius:16px;
  background:var(--white);
  color:var(--ink);
  box-shadow:0 8px 8px rgba(14,31,46,.12);
  transform:translateX(-50%);
}
.nav-dropdown::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.nav-dropdown a{
  display:flex;
  flex-direction:column;
  padding:12px 14px;
  border-radius:10px;
  text-decoration:none;
  transition:background-color .3s var(--ease);
}
.nav-dropdown a:hover{background:var(--mist)}
.nav-dropdown strong{font-size:14px}
.nav-dropdown small{font-size:11px;color:var(--muted);margin-top:2px}
.nav-dropdown--locations{width:210px}
.nav-dropdown--locations a{font-size:14px;font-weight:600}
.nav-actions{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.nav-cta{
  min-height:48px;
  display:flex;
  align-items:center;
  padding:0 20px;
  border-radius:999px;
  background:var(--teal);
  color:var(--white);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  transition:transform .4s var(--ease),background-color .4s var(--ease);
}
.nav-cta:hover{transform:scale(.985);background:var(--teal-dark)}
body[data-theme="navy"] .nav-cta{background:var(--cloud);color:var(--navy)}
.nav-toggle{
  display:none;
  width:48px;
  height:48px;
  border:0;
  border-radius:50%;
  background:rgba(16,37,60,.07);
  position:relative;
  cursor:pointer;
}
.nav-toggle span{
  position:absolute;
  left:15px;
  width:18px;
  height:2px;
  border-radius:2px;
  background:currentColor;
  transition:transform .35s var(--ease),top .35s var(--ease);
}
.nav-toggle span:first-child{top:20px}
.nav-toggle span:last-child{top:27px}
.nav-toggle[aria-expanded="true"] span:first-child{top:24px;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:last-child{top:24px;transform:rotate(-45deg)}
.mobile-menu,.nav-scrim{display:none}

/* hero level selection */
/* white, not cloud: the grey used to cut hard to the white section below, which
   made the illuminating headline read as its own section. One canvas from the
   hero through the showreel; grey is reserved for the places band. */
.story-hero{padding:94.14px var(--gutter) 74.88px;background:var(--white)}
.hero-levels{
  position:relative;
  width:min(100%,var(--max));
  margin:0 auto;
}
.level-track{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  perspective:1400px;
}
.level-card{
  position:relative;
  height:clamp(360px,48vh,500px);
  max-height:500px;
  overflow:hidden;
  border-radius:14px;
  color:var(--white);
  text-decoration:none;
  background:oklch(12% 0 0);
  transform-origin:50% 100%;
  isolation:isolate;
  scroll-snap-align:start;
  will-change:transform,opacity;
}
.level-card>img,.level-card>video,.level-card>.level-card-art{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}
.level-card:hover>img,.level-card:hover>video,.level-card:focus-visible>img,.level-card:focus-visible>video{transform:scale(1.025)}
.level-card--elite>img{object-position:62% center}
.level-card>video{display:block}
.level-card-art{position:absolute;inset:0;display:block;overflow:hidden}
.growth-art{background:#e8edf0}
.mini-site{position:absolute;inset:24px 20px 152px;overflow:hidden;border-radius:9px;background:#fff;box-shadow:0 6px 8px rgb(18 28 36 / .12)}
.mini-browser-bar{height:30px;padding:0 9px;display:flex;align-items:center;gap:4px;background:#f0f2f3}
.mini-browser-bar i{width:5px;height:5px;border-radius:50%;background:#bdc6cb}
.mini-browser-bar b{margin-left:6px;color:#59676f;font-size:7px;font-style:normal;font-weight:600}
.mini-site-photo{height:calc(100% - 30px);padding:24px 18px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,transparent,rgb(9 20 28 / .72)),url("../public/img/gallery-lakefront-living.jpg") center/cover;color:#fff}
.mini-site-photo small{font-size:8px;font-weight:700;letter-spacing:.08em}
.mini-site-photo strong{max-width:170px;margin:7px 0 12px;font-family:Georgia,serif;font-size:22px;line-height:.95}
.mini-site-photo em{align-self:flex-start;padding:6px 9px;border-radius:999px;background:#fff;color:#17242d;font-size:7px;font-style:normal;font-weight:700}
.mini-profile{position:absolute;right:18px;bottom:126px;width:calc(100% - 36px);padding:13px;display:flex;gap:10px;border-radius:9px;background:#fff;color:#17242d;box-shadow:0 6px 8px rgb(18 28 36 / .16)}
.mini-profile>b{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#4285f4;color:#fff;font-size:12px}
.mini-profile>span{min-width:0;display:flex;flex-direction:column}
.mini-profile strong{font-size:10px}
.mini-profile small{font-size:7px;color:#59676f}
.mini-profile em{margin-top:7px;color:#2868c7;font-size:7px;font-style:normal;font-weight:700}
.scale-art{padding:26px 20px;background:#14212a;color:#eaf0f3}
.scale-label{display:block;margin-bottom:18px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.scale-flow{display:flex;flex-direction:column;gap:8px}
.scale-flow i{padding:10px 11px;display:flex;justify-content:space-between;border-radius:8px;background:#22333e;font-style:normal;animation:workflow-step 6s var(--ease) infinite}
.scale-flow i:nth-child(2){animation-delay:1.2s}.scale-flow i:nth-child(3){animation-delay:2.4s}.scale-flow i:nth-child(4){animation-delay:3.6s}
.scale-flow b{font-size:9px}.scale-flow small{font-size:8px;color:#9fb0ba}
.scale-message{position:absolute;left:20px;right:20px;bottom:80px;padding:12px;border-radius:8px;background:#dff4e8;color:#155b38;font-size:8px;font-weight:700}
.elite-art{background:#101a21}
.elite-art::before{content:"";position:absolute;inset:12%;border:1px solid #3b4c56;border-radius:50%}
.elite-core{position:absolute;left:50%;top:42%;width:66px;height:66px;padding:8px;transform:translate(-50%,-50%);border-radius:14px;background:#fff;box-shadow:0 0 0 9px rgb(124 58 237 / .14)}
.elite-core img{width:100%;height:100%;border-radius:10px}
.elite-node{position:absolute;padding:8px 10px;border-radius:999px;background:#22313a;color:#eef2f4;font-size:8px;font-weight:700}
.elite-node--site{left:12%;top:20%}.elite-node--search{right:10%;top:21%}.elite-node--guests{left:10%;top:56%}.elite-node--automation{right:7%;top:57%}
.elite-path{position:absolute;left:50%;top:42%;width:5px;height:5px;border-radius:50%;background:#65c18c;box-shadow:0 0 0 6px rgb(101 193 140 / .15);animation:ecosystem-dot 4.8s linear infinite}
.elite-path--two{animation-delay:2.4s}
.level-card:focus-visible{outline-offset:-4px}
.level-card-shade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,oklch(12% 0 0 / 0) 58%,oklch(12% 0 0 / .36) 100%);
}
.level-card-copy{
  position:absolute;
  z-index:1;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-end;
  padding:clamp(22px,2.5vw,34px);
}
.service-pill{
  display:inline-flex;
  width:100%;
  max-width:100%;
  height:72px;
  align-items:center;
  justify-content:flex-start;
  padding:11px 17px 12px;
  border-radius:999px;
  background:var(--card-accent);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(17px,1.55vw,22px);
  font-weight:750;
  line-height:1.08;
  letter-spacing:-.025em;
  text-wrap:balance;
  transition:transform .3s var(--ease),background-color .3s var(--ease);
}
.level-card--entry{--card-accent:var(--white)}
.level-card--growth{--card-accent:var(--signal-blue)}
.level-card--scale{--card-accent:var(--teal)}
.level-card--elite{--card-accent:var(--signal-yellow)}
.level-card--scale .service-pill{color:var(--white)}
.level-card:hover .service-pill,.level-card:focus-visible .service-pill{transform:translateY(-3px)}
.level-swipe-cue{display:none}
.hero-copy{max-width:1280px;margin:0 auto;text-align:center;padding:0 24px 56px}
.hero-copy h1{color:var(--navy);font-size:clamp(3.5rem,5.6vw,5.25rem)}

/* level scroll story */
.level-story{padding:75.47px var(--gutter) 81.12px;background:var(--white);scroll-margin-top:var(--header-h)}
.level-story-intro{
  width:min(100%,var(--max));
  margin:0 auto 70.2px;
  display:grid;
  grid-template-columns:1.15fr .75fr;
  align-items:end;
  gap:80px;
}
.level-story-intro h2{max-width:800px;color:var(--navy);font-size:clamp(3.5rem,6vw,5.75rem)}
.level-story-intro p{max-width:540px;color:var(--muted);font-size:clamp(18px,2vw,23px);line-height:1.45}
.level-story-stage{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:minmax(520px,1fr) minmax(360px,.78fr);gap:clamp(64px,7vw,118px)}
.story-visual-column{position:sticky;top:116px;align-self:start}
.story-visual-stack{position:relative;height:min(70vh,650px);min-height:560px}
.story-visual{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:14px;
  background:#111a20;
  opacity:0;
  transform:translateY(28px) scale(.965);
  transform-origin:center bottom;
  pointer-events:none;
  transition:opacity .42s var(--ease),transform .48s var(--ease);
  box-shadow:0 8px 8px rgb(25 18 40 / .1);
}
.story-visual.is-active{z-index:4;opacity:1;transform:none;pointer-events:auto}
.story-visual.is-before{z-index:2;opacity:.14;transform:translateY(-28px) scale(.94)}
.story-visual.is-after{z-index:3;opacity:.22;transform:translateY(20px) scale(.975)}
.story-visual--entry video{width:100%;height:100%;object-fit:cover}
.story-visual--entry::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgb(8 16 22 / .88) 100%)}
.story-visual-caption{position:absolute;z-index:1;left:30px;right:30px;bottom:28px;color:#fff}
.story-visual-caption b{display:block;margin-bottom:8px;color:var(--amber);font-size:13px;text-transform:uppercase}
.story-visual-caption strong{font-family:var(--sans);font-size:clamp(30px,3vw,44px);font-weight:500}
.story-index{display:flex;justify-content:space-between;gap:10px;padding-top:18px}
.story-index span{color:#998eaa;font-size:12px;font-weight:700;transition:color .28s var(--ease)}
.story-index span.is-active{color:var(--teal)}
.story-step{min-height:78vh;padding:74.88px 0;display:flex;flex-direction:column;justify-content:center;opacity:.38;transform:translateY(18px);transition:opacity .35s var(--ease),transform .4s var(--ease);scroll-margin-top:calc(var(--header-h) + 28px)}
.story-step.is-active{opacity:1;transform:none}
.story-step>span{margin-bottom:18px;color:var(--teal);font-size:14px;font-weight:700}
.story-step h3{max-width:590px;color:var(--navy);font-size:clamp(2.6rem,4vw,4.8rem)}
.story-step>p{margin-top:24px;color:var(--muted);font-size:18px;line-height:1.55}
.story-step ul{margin:28px 0 0;padding:0;list-style:none}
.story-step li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);font-size:15px}
.story-link{align-self:flex-start;margin-top:24px;color:var(--teal-dark);font-weight:700;text-decoration:none}
.story-promise{width:min(100%,var(--max));margin:66.12px auto 0;padding:34px 0 0;display:flex;align-items:center;justify-content:space-between;gap:28px;border-top:1px solid var(--line)}
.story-promise p{color:var(--ink);font-size:18px;font-weight:600}
.story-visual--growth{background:#e7ecef}
.growth-browser{position:absolute;left:26px;top:28px;width:78%;height:82%;overflow:hidden;border-radius:12px;background:#fff;box-shadow:0 8px 8px rgb(25 36 44 / .14)}
.growth-browser-bar{height:38px;padding:0 12px;display:flex;align-items:center;gap:6px;background:#edf0f1}
.growth-browser-bar i{width:7px;height:7px;border-radius:50%;background:#bcc5c9}
.growth-browser-bar span{margin-left:8px;color:#66747c;font-size:10px;font-weight:600}
.growth-browser iframe{width:1200px;height:760px;border:0;transform:scale(.46);transform-origin:top left;pointer-events:none;animation:growth-page-pan 8s var(--ease) infinite}
.growth-profile{position:absolute;right:24px;bottom:26px;width:282px;padding:20px;border-radius:12px;background:#fff;color:#1a2730;box-shadow:0 8px 8px rgb(25 36 44 / .16);animation:growth-profile-in 8s var(--ease) infinite}
.growth-profile-head{display:flex;align-items:center;gap:12px}
.growth-profile-head>b{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#4285f4;color:#fff}
.growth-profile-head>span{display:flex;flex-direction:column}.growth-profile-head strong{font-size:14px}.growth-profile-head small{color:#6b777e;font-size:10px}
.growth-stars{margin:16px 0 12px;color:#e69a18;font-size:12px}.growth-stars span{color:#59676f}
.growth-actions{display:flex;gap:7px}.growth-actions span{padding:7px 9px;border-radius:999px;background:#edf4ff;color:#2868c7;font-size:9px;font-weight:700}
.growth-profile p{margin-top:15px;color:#53616a;font-size:10px}
.story-visual--scale{padding:32px;background:#14212a}
.automation-board{height:100%;padding:28px;border-radius:12px;background:#f4f6f7;color:#1b2830}
.automation-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:20px;border-bottom:1px solid #d9dfe2}
.automation-head strong{font-family:var(--sans);font-size:21px}.automation-head>span{color:#276943;font-size:11px;font-weight:700}
.automation-head i{display:inline-block;width:7px;height:7px;margin-right:5px;border-radius:50%;background:#4caf75;animation:live-pulse 1.8s ease-out infinite}
.automation-guest{margin:22px 0;padding:18px;border-radius:10px;background:#fff;box-shadow:0 4px 8px rgb(18 31 40 / .07)}
.automation-guest span{display:block;color:#7c3aed;font-size:10px;font-weight:700;text-transform:uppercase}.automation-guest strong{display:block;margin:7px 0 3px;font-size:15px}.automation-guest small{color:#69777f}
.automation-flow{display:flex;flex-direction:column;gap:10px}
.automation-flow>span{padding:13px 14px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:10px;border-radius:9px;background:#e8ecee;animation:automation-row 8s var(--ease) infinite}
.automation-flow>span:nth-child(2){animation-delay:1.4s}.automation-flow>span:nth-child(3){animation-delay:2.8s}.automation-flow>span:nth-child(4){animation-delay:4.2s}
.automation-flow i{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#4f6069;font-size:10px;font-style:normal;font-weight:700}
.automation-flow b{font-size:12px}.automation-flow small{color:#708089;font-size:10px}
.story-visual--elite{padding:34px;background:#101a21}
.ecosystem-map{position:relative;width:100%;height:100%;overflow:hidden;border-radius:12px;background:radial-gradient(circle at center,#1e303a 0,#121e25 54%,#0d161b 100%)}
.ecosystem-map::before,.ecosystem-map::after{content:"";position:absolute;left:50%;top:50%;border:1px solid #344650;border-radius:50%;transform:translate(-50%,-50%)}
.ecosystem-map::before{width:68%;aspect-ratio:1}.ecosystem-map::after{width:42%;aspect-ratio:1}
.ecosystem-core{position:absolute;z-index:2;left:50%;top:50%;width:190px;padding:14px;display:flex;align-items:center;gap:12px;transform:translate(-50%,-50%);border-radius:12px;background:#fff;color:#26333b;box-shadow:0 0 0 12px rgb(124 58 237 / .12)}
.ecosystem-core img{width:44px;height:44px;border-radius:10px}.ecosystem-core span{display:flex;flex-direction:column}.ecosystem-core b{font-size:13px}.ecosystem-core small{color:#65737b;font-size:10px}
.ecosystem-node{position:absolute;z-index:1;min-width:105px;padding:11px 13px;border-radius:10px;background:#203039;color:#f0f4f5;box-shadow:0 4px 8px rgb(0 0 0 / .18)}
.ecosystem-node b,.ecosystem-node small{display:block}.ecosystem-node b{font-size:12px}.ecosystem-node small{margin-top:3px;color:#9fb0b8;font-size:9px}
.ecosystem-node--film{left:8%;top:12%}.ecosystem-node--site{right:7%;top:13%}.ecosystem-node--google{right:4%;bottom:14%}.ecosystem-node--guests{left:7%;bottom:13%}.ecosystem-node--auto{left:50%;bottom:5%;transform:translateX(-50%)}
.ecosystem-pulse{position:absolute;z-index:3;left:50%;top:50%;width:8px;height:8px;border-radius:50%;background:#5bc487;box-shadow:0 0 0 7px rgb(91 196 135 / .14);animation:ecosystem-orbit 7s linear infinite}
.pricing-section{padding:84px var(--gutter);background:var(--cloud);scroll-margin-top:var(--header-h)}
.pricing-section .pricing-heading>p{margin:20px auto 0;color:var(--muted);font-size:18px}
.pricing-section .price-card:not(.price-card--featured){background:var(--white)}

/* chapter system */
.chapter-theme{transition:background-color .4s var(--ease),color .4s var(--ease)}
.story-chapter{position:relative;padding:0 var(--gutter) 86.1px;overflow:hidden}
.story-chapter[data-chapter-theme="mist"]{background:var(--mist);color:var(--ink)}
.story-chapter[data-chapter-theme="amber"]{background:var(--violet-mid);color:var(--navy);margin-top:-62.64px;padding-top:62.64px;border-radius:48px 48px 0 0}
.story-chapter[data-chapter-theme="navy"]{background:var(--navy);color:var(--cloud);margin-top:-62.64px;padding-top:62.64px;border-radius:48px 48px 0 0}
.story-chapter[data-chapter-theme="teal"]{background:var(--teal);color:var(--navy);margin-top:-62.64px;padding-top:62.64px;border-radius:48px 48px 0 0}
.chapter-heading{
  min-height:74vh;
  max-width:1160px;
  margin:auto;
  padding:86.1px 0 84px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.chapter-context{margin-bottom:24px;font-size:15px;font-weight:700}
.chapter-heading h2{max-width:1100px}
.chapter-heading>p:not(.chapter-context){font-size:clamp(18px,2vw,24px);line-height:1.4;margin:28px auto 24px;max-width:700px;color:color-mix(in srgb,currentColor 72%,transparent)}
.inline-guru{
  display:inline-block;
  width:.92em;
  height:.92em;
  border-radius:22%;
  object-fit:cover;
  vertical-align:-.12em;
  margin-inline:.05em;
}
.chapter-link{
  display:inline-flex;
  min-height:44px;
  align-items:center;
  padding:0 18px;
  border-radius:999px;
  background:rgba(16,37,60,.09);
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  transition:transform .35s var(--ease),background-color .35s var(--ease);
}
.chapter-link:hover{transform:scale(.985);background:rgba(16,37,60,.15)}
.story-chapter--dark .chapter-link{background:rgba(255,255,255,.12)}
.story-chapter--dark .chapter-link:hover{background:rgba(255,255,255,.2)}
.rail-block{width:min(100%,var(--max));margin:auto}
.rail-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:18px;font-size:14px;font-weight:700}
.rail-controls{display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.55)}
.story-chapter--dark .rail-controls{background:rgba(255,255,255,.1)}
.rail-controls button{
  width:40px;height:40px;border:0;border-radius:50%;
  background:transparent;color:inherit;cursor:pointer;
  transition:background-color .3s var(--ease),opacity .3s;
}
.rail-controls button:hover{background:rgba(255,255,255,.7)}
.story-chapter--dark .rail-controls button:hover{background:rgba(255,255,255,.15)}
.rail-controls button:disabled{opacity:.35;cursor:default}
.rail-viewport{overflow:hidden;cursor:ew-resize;touch-action:pan-y;padding-block:2px}
.rail-track{display:flex;gap:32px;width:max-content;will-change:transform}
.feature-card,.system-card,.escape-card{
  flex:0 0 394px;
  height:527px;
  border-radius:16px;
  overflow:hidden;
  position:relative;
}
.feature-card{background:var(--navy);color:var(--white)}
.feature-card>img,.feature-card>video{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.feature-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,31,46,.02) 25%,rgba(14,31,46,.94) 92%)}
.feature-card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:34px}
.feature-card-copy span{display:block;margin-bottom:14px;color:var(--amber);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.feature-card-copy h3{font-size:34px;margin-bottom:12px}
.feature-card-copy p{font-size:15px;line-height:1.45;color:rgba(255,255,255,.76)}
.feature-card.is-playing>img{animation:art-restart .9s var(--ease)}
@keyframes art-restart{0%{transform:scale(1.045)}100%{transform:scale(1)}}
@keyframes workflow-step{0%,12%,100%{background:#22333e;transform:none}24%,40%{background:#2d5646;transform:translateX(3px)}}
@keyframes ecosystem-dot{0%{transform:translate(-88px,-80px)}25%{transform:translate(78px,-76px)}50%{transform:translate(82px,58px)}75%{transform:translate(-82px,58px)}100%{transform:translate(-88px,-80px)}}
@keyframes growth-page-pan{0%,18%,100%{transform:translateY(0) scale(.46)}48%,76%{transform:translateY(-48px) scale(.46)}}
@keyframes growth-page-pan-mobile{0%,18%,100%{transform:translateY(0) scale(.34)}48%,76%{transform:translateY(-34px) scale(.34)}}
@keyframes growth-profile-in{0%,18%,100%{opacity:.5;transform:translateY(18px)}38%,82%{opacity:1;transform:none}}
@keyframes live-pulse{0%{box-shadow:0 0 0 0 rgb(76 175 117 / .4)}75%,100%{box-shadow:0 0 0 9px rgb(76 175 117 / 0)}}
@keyframes automation-row{0%,12%,100%{background:#e8ecee;transform:none}22%,36%{background:#dff2e7;transform:translateX(4px)}}
@keyframes ecosystem-orbit{0%{transform:translate(-175px,-170px)}25%{transform:translate(175px,-165px)}50%{transform:translate(188px,150px)}75%{transform:translate(-180px,145px)}100%{transform:translate(-175px,-170px)}}

.system-card{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:32px;
  background:var(--cloud);
  color:var(--navy);
}
.system-card>div:last-child h3{margin-bottom:12px}
.system-card>div:last-child p{color:var(--muted);font-size:15px}
.system-art{
  min-height:285px;
  border-radius:12px;
  background:var(--mist);
  padding:26px;
  overflow:hidden;
}
.system-art--calendar{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-content:center}
.system-art--calendar span{grid-column:1/-1;font-family:var(--sans);font-size:84px;line-height:1;text-align:center;color:var(--teal)}
.system-art--calendar i{height:48px;border-radius:10px;background:var(--white)}
.system-art--message{display:flex;flex-direction:column;justify-content:center;gap:10px}
.system-art--message span{align-self:flex-start;border-radius:999px;background:var(--white);padding:12px 16px;font-size:13px;font-weight:600}
.system-art--message span:nth-child(2){align-self:flex-end;background:var(--teal);color:white}
.system-art--checkout{display:flex;flex-direction:column;justify-content:center;gap:14px}
.system-art--checkout span{font-size:14px;color:var(--muted)}
.system-art--checkout strong{font-family:var(--sans);font-size:56px;line-height:1}
.system-art--checkout button{border:0;border-radius:999px;background:var(--navy);color:white;padding:13px}
.system-art--repeat{display:flex;flex-direction:column;justify-content:center;gap:18px;background:var(--amber)}
.system-art--repeat span{font-size:14px}
.system-art--repeat strong{font-family:var(--sans);font-size:38px;line-height:1.05}

/* Escape */
.escape-metric{
  width:min(100%,1000px);
  margin:0 auto 62.64px;
  display:grid;
  grid-template-columns:.55fr 1fr;
  align-items:center;
  gap:40px;
  padding:38px 42px;
  border-radius:16px;
  background:var(--navy);
  color:var(--cloud);
}
.escape-metric strong{font-family:var(--sans);font-size:clamp(4rem,8vw,7rem);line-height:.85;color:var(--amber)}
.escape-metric p{font-size:17px;color:#c8d7df}
.escape-card{height:540px;background:var(--navy);color:var(--white)}
.escape-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.escape-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,31,46,0) 32%,rgba(14,31,46,.96) 88%)}
.escape-card>div{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:30px}
.escape-card span{display:block;color:var(--amber);font-size:13px;font-weight:700;letter-spacing:.1em;margin-bottom:12px}
.escape-card h3{font-size:34px;margin-bottom:10px}
.escape-card p{font-size:14px;color:#cfdae1}
.escape-card.is-playing img{animation:art-restart .9s var(--ease)}
.dual-track{
  width:min(100%,var(--max));
  margin:86.1px auto 0;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:80px;
  align-items:start;
  padding:72px;
  border-radius:16px;
  background:var(--cloud);
}
.dual-track h2{font-size:clamp(3rem,5vw,5rem)}
.dual-track ol{list-style:none;margin:0;padding:0}
.dual-track li{display:grid;grid-template-columns:48px 1fr;gap:18px;padding:24px 0;border-bottom:1px solid var(--line)}
.dual-track li:last-child{border:0}
.dual-track li>span{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:white;font-weight:700}
.dual-track strong{font-family:var(--sans);font-size:24px}
.dual-track li p{color:var(--muted);font-size:15px;margin-top:4px}
.pricing-block{width:min(100%,var(--max));margin:86.1px auto 0}
#pricing{scroll-margin-top:calc(var(--header-h) + 28px)}
.pricing-heading{text-align:center;max-width:900px;margin:0 auto 54px}
.pricing-heading h2{font-size:clamp(3rem,6vw,5.5rem)}
.price-row{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{
  min-height:500px;
  padding:32px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  background:var(--cloud);
  color:var(--navy);
}
.price-card>span{font-size:14px;font-weight:700}
.price-card h3{font-size:52px;margin:30px 0 10px}
.price-card>p{min-height:72px;color:var(--muted);font-size:15px}
.price-card ul{margin:24px 0 30px;padding:0;list-style:none}
.price-card li{padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.price-card .btn{margin-top:auto}
.price-card--featured{background:var(--navy);color:var(--cloud)}
.price-card--featured>p{color:#c9d7df}
.price-card--featured li{border-color:rgba(255,255,255,.14)}
.price-card.featured{background:var(--navy);color:var(--cloud)}
.price-card.featured>p{color:#c9d7df}
.price-card .amount{font-family:var(--sans);font-size:44px;line-height:1;margin:28px 0 12px}

/* regions, faq and final */
.region-section{
  padding:86.1px var(--gutter);
  background:var(--cloud);
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
}
.region-copy h2{font-size:clamp(3rem,5vw,5rem)}
.region-links{display:flex;flex-direction:column}
.region-links a{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:26px 4px;border-bottom:1px solid var(--line);text-decoration:none;
  transition:color .3s var(--ease),transform .3s var(--ease);
}
.region-links a:hover{color:var(--teal);transform:translateX(6px)}
.region-links span{font-family:var(--sans);font-size:30px}
.region-links small{color:var(--muted)}
.faq-section{padding:86.1px var(--gutter);background:var(--cloud);display:grid;grid-template-columns:.7fr 1.3fr;gap:80px}
.faq-heading h2{font-size:clamp(3rem,5vw,5rem)}
/* The Questions nav panel deep-links to these rows. Without scroll-margin the anchor
   jump parks the row at viewport top 0, underneath the 129px fixed header. */
.faq-list details{border-bottom:1px solid var(--line);scroll-margin-top:170px}
.faq-list details:first-of-type{border-top:1px solid var(--line)}
.faq-list summary{
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  padding:30px 0;
  font-family:var(--sans);
  font-size:clamp(19px,1.6vw,26px);
  font-weight:600;
  letter-spacing:-.028em;
  line-height:1.22;
  text-wrap:balance;
  color:var(--ink);
  cursor:pointer;
  transition:color .25s var(--ease);
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list details[open] summary{color:var(--teal-dark)}
@media(hover:hover){.faq-list summary:hover{color:var(--teal-dark)}}
.faq-list summary:focus-visible{outline:2px solid var(--teal);outline-offset:6px;border-radius:4px}
.faq-list summary span{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid var(--line);
  border-radius:50%;
  font-size:19px;
  font-weight:400;
  line-height:1;
  transition:transform .35s var(--ease),background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
@media(hover:hover){.faq-list summary:hover span{border-color:var(--teal)}}
.faq-list details[open] summary span{transform:rotate(45deg);background:var(--navy);border-color:var(--navy);color:var(--cloud)}
.faq-list details p{
  max-width:62ch;
  padding:0 62px 32px 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}
.final-cta{
  min-height:58vh;
  padding:74.88px var(--gutter);
  background:var(--mist);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.final-cta>p{font-size:clamp(24px,3vw,38px);color:var(--muted)}
.final-cta h2{max-width:1050px;margin:18px auto 40px}
.final-cta small{max-width:720px;margin-top:28px;color:rgba(16,37,60,.67)}

/* footer */
.site-footer{padding:32px 48px 24px;background:var(--cloud);color:var(--navy)}
.footer-panel{padding:40px;border-radius:16px;background:var(--white)}
.footer-top{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start;padding-bottom:44px}
.footer-top>*{min-width:0}
.footer-identity{display:flex;align-items:center;gap:24px}
.footer-identity img{width:108px;height:108px;object-fit:contain}
.footer-identity strong{display:block;font-family:var(--sans);font-size:38px}
.footer-identity span{color:var(--muted)}
.newsletter{padding:26px;border-radius:16px;background:var(--mist)}
.newsletter>p{font-size:16px;color:var(--muted)}
.newsletter-form label{display:block;margin:24px 0 4px;font-size:13px;font-weight:700}
.newsletter-line{display:flex;align-items:end;gap:14px;border-bottom:2px solid var(--navy)}
.newsletter input{flex:1;min-width:0;padding:12px 0;border:0;background:transparent;color:var(--navy);font-family:var(--sans);font-size:clamp(28px,4vw,58px);line-height:1}
.newsletter input::placeholder{color:#6b7d89;opacity:1}
.newsletter input:focus{outline:0}
.newsletter button{flex:0 0 auto;margin-bottom:9px;border:0;border-radius:999px;background:var(--teal);color:white;padding:13px 20px;font-weight:700;cursor:pointer;transition:transform .35s var(--ease),background-color .35s var(--ease)}
.newsletter button:hover{transform:scale(.985);background:var(--navy)}
.newsletter button:disabled{opacity:.6;cursor:wait}
.form-status{display:block;margin-top:14px;color:var(--muted)}
.form-status.is-error{color:#a12c2c}.form-status.is-success{color:#0c7560}
.footer-links{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:44px;padding-top:34px;border-top:1px solid var(--line)}
.footer-links h3{font-family:var(--sans);font-size:13px;letter-spacing:0;color:#71828d;margin-bottom:20px}
.footer-links a,.footer-links>div>span{display:block;width:max-content;max-width:100%;margin:11px 0;text-decoration:none;font-size:14px}
.footer-links a:hover{color:#75848d}
.status-pill{padding:8px 12px;border-radius:999px;background:#e9ece9}
.status-pill i{display:inline-block;width:6px;height:6px;margin-right:7px;border-radius:50%;background:#24a879}
.footer-legal{display:flex;justify-content:space-between;gap:28px;padding:24px 6px 0;font-size:12px;color:rgba(16,37,60,.7)}

/* shared inner pages */
.page-hero{padding:97.58px var(--gutter) 69.6px;text-align:center;background:var(--cloud)}
.page-hero .eyebrow,.section-head .eyebrow{margin:0 auto 20px;font-size:14px;font-weight:700;color:var(--teal)}
.page-hero h1{max-width:1050px;margin:auto}
.page-hero>p:not(.eyebrow){max-width:780px;margin:24px auto 0;font-size:20px;color:var(--muted)}
.page-hero .hero-actions{margin-top:30px}
.wrap{width:min(100%,var(--max));margin:auto;padding-inline:var(--gutter)}
main>section:not(.hero-film):not(.story-hero):not(.film-stage):not(.service-stack):not(.story-chapter):not(.region-section):not(.faq-section):not(.package-section):not(.level-story):not(.showreel-section):not(.pricing-section):not(.final-cta):not(.page-hero):not(.place-hero):not(.place-opportunity):not(.place-build):not(.place-pricing):not(.place-faq):not(.place-next):not(.places-hero):not(.places-directory):not(.guide-bento):not(.service-ownership):not(.contact-hero):not(.ab-open):not(.ab-position):not(.ab-moves):not(.ab-people):not(.ab-practice):not(.ab-close):not(.inbox-converge):not(.price-flip):not(.crm-lede):not(.slabwall):not(.slab):not(.crm-closer){padding:78px 0;background:var(--cloud)}
.mini-hero-panel{width:min(100%,var(--max));margin:auto;height:min(60vh,620px);border-radius:16px;overflow:hidden;background:var(--navy)}
.mini-hero-panel video{width:100%;height:100%;object-fit:cover}
.band-muted{background:var(--mist)!important}
.band-dark{background:var(--navy)!important;color:var(--cloud)}
.section-head{text-align:center;max-width:900px;margin:0 auto 54px}
.section-head h2{font-size:clamp(3rem,5vw,5rem)}
.section-head>p:not(.eyebrow){max-width:720px;margin:22px auto 0;color:var(--muted)}
.band-dark .section-head>p:not(.eyebrow){color:#c6d4dc}
.card-grid,.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card,.stat,.faq-item{
  border-radius:16px;
  padding:30px;
  background:var(--white);
}
.card .num,.stat .num{margin-bottom:18px;font-weight:700;color:var(--teal)}
.card h3,.faq-item h3{margin-bottom:12px}
.card p,.faq-item p,.stat small{color:var(--muted);font-size:15px}
.disclosure{max-width:800px;margin:30px auto 0;color:#c6d4dc;text-align:center;font-size:14px}
.cta-band{padding:72px;border-radius:16px;background:var(--violet-mid);text-align:center}
.cta-band h2{font-size:clamp(3rem,5vw,5rem)}
.cta-band p{margin:20px auto 28px;max-width:680px}
.loc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.loc-chip{padding:22px;border-radius:12px;background:var(--white);text-align:center;text-decoration:none;font-weight:700}
.footer-brand{font-family:var(--sans);font-size:28px}

@media(max-width:1180px){
  :root{--gutter:32px}
  .site-header{padding-inline:32px}
  .nav-center{gap:0}
  .nav-center>a,.nav-group>summary{padding-inline:12px;font-size:17px}
  .nav-cta{padding-inline:16px}
  .rail-track{gap:24px}
  .feature-card,.system-card,.escape-card{flex-basis:360px}
}

@media(max-width:1050px){
  :root{--header-h:82px}
  .site-header{height:82px;padding:20px 20px 0}
  .nav-shell{height:62px;padding-left:10px}
  .brand .wordmark,.nav-center{display:none}
  .brand img{width:44px;height:44px}
  .nav-toggle{display:block}
  .nav-cta{min-height:48px}
  .mobile-menu{
    display:block;
    position:fixed;
    z-index:var(--z-menu);
    top:90px;
    right:16px;
    width:min(400px,calc(100vw - 32px));
    height:calc(100dvh - 116px);
    border-radius:16px;
    overflow:auto;
    background:var(--cloud);
    color:var(--navy);
    opacity:0;
    visibility:hidden;
    transform:translateY(16px) scale(.92);
    transform-origin:top right;
    pointer-events:none;
    transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s;
  }
  .mobile-menu.is-open{opacity:1;visibility:visible;transform:none;pointer-events:auto}
  .mobile-menu-inner{padding:24px}
  .mobile-menu-label{padding:10px 12px 18px;color:var(--muted);font-size:13px}
  .mobile-menu-inner>a{display:flex;align-items:center;min-height:58px;padding:0 12px;border-bottom:1px solid var(--line);font-family:var(--sans);font-size:24px;text-decoration:none}
  .mobile-locations{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:18px 0}
  .mobile-locations a{padding:10px 12px;border-radius:999px;background:var(--mist);text-align:center;text-decoration:none;font-size:12px;font-weight:700}
  .mobile-menu-inner .mobile-menu-cta{justify-content:center;border:0;border-radius:999px;background:var(--teal);color:white;font-family:var(--sans);font-size:15px;font-weight:700}
  .nav-scrim{
    display:block;
    position:fixed;
    z-index:calc(var(--z-menu) - 1);
    inset:0;
    border:0;
    background:rgba(7,23,37,.58);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .4s var(--ease),visibility .4s;
  }
  .nav-scrim.is-open{opacity:1;visibility:visible;pointer-events:auto}
  .level-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .level-card{height:460px}
  .level-story{padding:71.76px 0}
  .level-story-intro{grid-template-columns:1fr;gap:24px;padding:0 32px;margin-bottom:52px}
  .level-story-stage{display:block}
  .story-visual-column{position:relative;top:auto}
  .story-visual-stack{
    min-height:0;
    height:auto;
    padding:0 32px 14px;
    display:flex;
    gap:16px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:32px;
    scrollbar-width:none;
  }
  .story-visual-stack::-webkit-scrollbar{display:none}
  .story-visual{position:relative;inset:auto;flex:0 0 min(78vw,620px);height:560px;opacity:1;transform:none;pointer-events:auto;scroll-snap-align:start}
  .story-visual.is-before,.story-visual.is-after,.story-visual.is-active{opacity:1;transform:none}
  .story-index{display:none}
  .story-steps{padding:0 32px}
  .story-step{min-height:auto;padding:62.64px 0;opacity:1;transform:none;border-bottom:1px solid var(--line)}
  .story-step:last-child{border:0}
  .story-promise{margin:36px 32px 0;width:auto}
  .dual-track{grid-template-columns:1fr;gap:30px}
  .price-row{grid-template-columns:1fr}
  .price-card{min-height:auto}
  .price-card>p{min-height:0}
  .region-section,.faq-section{grid-template-columns:1fr;gap:54px}
  .footer-top{grid-template-columns:1fr;gap:34px}
  .footer-links{grid-template-columns:1fr 1fr}
  .card-grid,.price-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:720px){
  :root{--gutter:20px}
  body{font-size:16px}
  .nav-cta{font-size:13px;padding-inline:16px}
  .story-hero{padding:79.56px 0 58px;overflow:hidden}
  .hero-levels{width:100%}
  .level-track{
    display:flex;
    gap:14px;
    width:100%;
    padding:0 20px 14px;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:20px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .level-track::-webkit-scrollbar{display:none}
  .level-card{
    flex:0 0 min(78vw,330px);
    height:min(58vh,500px);
    min-height:420px;
  }
  .level-card-copy{padding:24px}
  .service-pill{height:72px;padding:10px 15px 11px;font-size:20px}
  .level-swipe-cue{
    display:flex;
    align-items:center;
    gap:9px;
    /* it was sitting 2px under the rail with 120px of dead air beneath it;
       the cue now breathes from the cards it belongs to */
    margin:18px 20px 0;
    color:var(--muted);
    font-size:12.5px;
    font-weight:600;
    letter-spacing:-.005em;
  }
  .level-swipe-cue span{font-size:inherit;color:inherit}
  .swipe-mark{
    display:block;
    flex:none;
    width:34px;
    height:16px;
    color:var(--teal);
    overflow:visible;
  }
  /* the heads drift outward and back, so the mark reads as "there is more either way"
     rather than sliding the whole glyph around */
  .swipe-mark-head{animation:swipe-mark-drift 2.6s var(--ease) infinite}
  .swipe-mark-head--r{animation-name:swipe-mark-drift-r}
  .hero-copy{padding:0 20px 38px}
  .hero-support{font-size:15px;margin-bottom:16px}
  .hero-copy h1{font-size:clamp(2.65rem,11.5vw,4rem)}
  .hero-copy>p:not(.hero-support){font-size:17px;margin-top:20px}
  .hero-actions{align-items:stretch;flex-direction:column}
  .proof-strip{padding:0 20px 55.68px;display:grid;grid-template-columns:1fr 1fr}
  .proof-strip span{padding:12px;border-right:0;border-bottom:1px solid var(--line);text-align:center;font-size:12px}
  .level-story{padding:67.86px 0}
  .level-story-intro{padding:0 20px;margin-bottom:38px}
  .level-story-intro h2{font-size:clamp(3rem,13vw,4.5rem)}
  .level-story-intro p{font-size:17px}
  .story-visual-stack{padding:0 20px 14px;scroll-padding-inline:20px}
  .story-visual{flex-basis:calc(100vw - 40px);height:480px}
  .story-visual--scale,.story-visual--elite{padding:20px}
  .growth-browser{left:16px;top:18px;width:82%;height:76%}
  .growth-browser iframe{transform:scale(.34);animation-name:growth-page-pan-mobile}
  .growth-profile{right:16px;bottom:18px;width:225px;padding:14px}
  .ecosystem-core{width:150px}.ecosystem-node{min-width:88px;padding:9px}.ecosystem-node--auto{bottom:3%}
  .story-steps{padding:0 20px}
  .story-step{padding:58px 0}
  .story-step h3{font-size:clamp(2.7rem,12vw,4rem)}
  .story-promise{margin:28px 20px 0;align-items:flex-start;flex-direction:column}
  .pricing-section{padding:73.08px 20px}
  .story-chapter{padding:0 20px 74.88px}
  .story-chapter[data-chapter-theme]{margin-top:-32px;padding-top:32px;border-radius:28px 28px 0 0}
  .story-chapter:first-of-type{margin-top:0}
  .chapter-heading{min-height:68vh;padding:87.36px 0 74.82px}
  .chapter-heading h2{font-size:clamp(2.8rem,13vw,4.6rem)}
  .chapter-heading>p:not(.chapter-context){font-size:17px;margin-top:22px}
  .chapter-context{margin-bottom:18px}
  .rail-track{gap:16px}
  .feature-card,.system-card,.escape-card{flex-basis:calc(100vw - 40px);height:468px}
  .feature-card-copy,.escape-card>div{padding:28px}
  .feature-card-copy h3,.escape-card h3{font-size:30px}
  .system-card{padding:26px}
  .system-art{min-height:240px}
  .escape-metric{grid-template-columns:1fr;gap:18px;padding:28px;margin-bottom:52px}
  .escape-metric strong{font-size:70px}
  .dual-track{margin-top:74.88px;padding:34px 24px}
  .dual-track h2{font-size:46px}
  .pricing-block{margin-top:74.88px}
  .pricing-heading h2{font-size:46px}
  .price-card{padding:28px}
  .price-card h3{font-size:44px;margin-top:30px}
  .region-section,.faq-section{padding:78px 20px}
  .region-copy h2,.faq-heading h2{font-size:46px}
  .region-links span{font-size:25px}
  .region-links small{display:none}
  .final-cta{min-height:55vh;padding:73.08px 20px}
  .final-cta h2{font-size:clamp(3rem,14vw,5rem)}
  .site-footer{padding:20px 20px 18px}
  .footer-panel{padding:28px 22px}
  .footer-identity{align-items:center;gap:14px;min-width:0}
  .footer-identity img{width:76px;height:76px;flex:0 0 auto}
  .footer-identity strong{font-size:28px}
  .footer-identity>div{min-width:0}
  .newsletter{min-width:0}
  .newsletter{padding:24px 18px}
  .newsletter-line{align-items:stretch;flex-direction:column;border:0}
  .newsletter input{font-size:32px;border-bottom:2px solid var(--navy);padding:12px 0}
  .newsletter button{margin:0;align-self:flex-start}
  .footer-links{grid-template-columns:1fr;gap:26px}
  .footer-legal{flex-direction:column;gap:8px}
  .page-hero{padding:74.62px 20px 52.2px}
  .page-hero h1{font-size:46px}
  .page-hero>p:not(.eyebrow){font-size:17px}
  main>section:not(.hero-film):not(.story-hero):not(.film-stage):not(.service-stack):not(.story-chapter):not(.region-section):not(.faq-section):not(.package-section):not(.level-story):not(.showreel-section):not(.pricing-section):not(.final-cta):not(.page-hero):not(.place-hero):not(.place-opportunity):not(.place-build):not(.place-pricing):not(.place-faq):not(.place-next):not(.places-hero):not(.places-directory):not(.guide-bento):not(.service-ownership):not(.contact-hero):not(.ab-open):not(.ab-position):not(.ab-moves):not(.ab-people):not(.ab-practice):not(.ab-close):not(.inbox-converge):not(.price-flip):not(.crm-lede):not(.slabwall):not(.slab):not(.crm-closer){padding:62.64px 0}
  .wrap{padding-inline:20px}
  .mini-hero-panel{height:50vh;border-radius:12px}
  .card-grid,.price-grid,.loc-grid{grid-template-columns:1fr}
  .cta-band{padding:50px 24px}
}

@media(max-width:390px){
  .nav-cta{display:none}
  .nav-shell{justify-content:space-between}
  .proof-strip{grid-template-columns:1fr}
  .feature-card,.system-card,.escape-card{flex-basis:calc(100vw - 40px)}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .level-card{transform:none!important;opacity:1!important}
  .rail-track{will-change:auto}
}

/* Shared brand typography */
.brand,.level-card-copy strong,.story-visual-caption strong,
.story-step h3,.pricing-heading h2,.price-card h3{
  font-family:var(--sans);
}
.brand{letter-spacing:-.04em}

.hero-copy h1,.level-story-intro h2{color:var(--ink)}
.hero-highlight{
  display:inline-block;
  white-space:nowrap;
  text-decoration-line:underline;
  text-decoration-color:var(--teal);
  text-decoration-thickness:.09em;
  text-underline-offset:.11em;
  text-decoration-skip-ink:none;
}

.level-card--scale>img,.level-card--elite>img{filter:saturate(.92) contrast(1.04)}

/* Real-world media replaces premature Scale and Elite interfaces */
.story-visual--scale,.story-visual--elite{padding:0;background:#101216}
.story-visual--scale>img,.story-visual--elite>img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.92) contrast(1.04);
  transition:transform 7s linear;
}
.story-visual--scale::after,.story-visual--elite::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 48%,rgb(8 12 16 / .84) 100%);
}
.story-visual--scale.is-active>img,.story-visual--elite.is-active>img{transform:scale(1.045)}
.story-visual--scale .story-visual-caption,.story-visual--elite .story-visual-caption{z-index:2}
.story-step>span{
  width:max-content;
  padding:6px 10px;
  border-radius:999px;
  color:var(--ink);
}
.story-step:nth-child(1)>span,.story-step:nth-child(4)>span{background:var(--signal-yellow)}
.story-step:nth-child(2)>span{background:var(--signal-blue)}
.story-step:nth-child(3)>span{background:var(--teal);color:#fff}
.story-index .is-active,.story-link{color:#236fe8}
.story-step h3{color:var(--ink)}

.level-card-copy{padding-bottom:24px}

/* Jitter-style continuous work reel */
.showreel-section{
  padding:97.58px 0 78.06px;
  overflow:hidden;
  background:var(--white);
  color:var(--ink);
}
.showreel-heading{
  width:min(100%,var(--max));
  margin:0 auto 52px;
  padding:0 var(--gutter);
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:48px;
}
.showreel-heading h2{
  max-width:960px;
  font-size:clamp(3.3rem,6vw,5.8rem);
  line-height:.92;
}
.showreel-heading p{
  max-width:430px;
  color:var(--muted);
  font-size:18px;
  line-height:1.45;
}
.showreel-window{overflow:hidden}
.showreel-track{
  display:flex;
  width:max-content;
  will-change:transform;
  animation:showreel-loop 54s linear infinite;
}
.showreel-window:hover .showreel-track,.showreel-window:focus-within .showreel-track{animation-play-state:paused}
.showreel-group{display:flex;gap:24px;padding-right:24px}
.showreel-item{
  flex:0 0 clamp(380px,31vw,520px);
  min-height:540px;
  padding:26px;
  display:grid;
  grid-template-rows:1fr auto;
  gap:24px;
  border-radius:16px;
  background:var(--mist);
  scroll-snap-align:start;
}
.showreel-media{
  min-height:390px;
  overflow:hidden;
  border-radius:10px;
  background:#d9d9de;
}
.showreel-media img,.showreel-media video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.showreel-meta{display:flex;align-items:center;gap:12px}
.showreel-meta>img{width:44px;height:44px;border-radius:50%}
.showreel-meta>span{display:flex;flex-direction:column}
.showreel-meta strong{font-size:18px;line-height:1.05}
.showreel-meta small{margin-top:4px;color:var(--muted);font-size:13px}
@keyframes showreel-loop{to{transform:translateX(-50%)}}

/* Jitter-style simple pricing */
.pricing-section{
  padding:84.95px var(--gutter) 89.54px;
  background:var(--mist);
}
.pricing-section .pricing-heading{margin-bottom:55.68px}
.pricing-section .pricing-heading h2{color:var(--ink);font-size:clamp(4rem,7vw,6rem)}
.pricing-section .pricing-heading>p{max-width:620px;color:var(--ink);line-height:1.45}
.pricing-section .price-row{gap:12px}
.pricing-section .price-card,
.pricing-section .price-card--featured{
  min-height:570px;
  padding:30px;
  border:0;
  border-radius:14px;
  background:var(--white);
  color:var(--ink);
}
.price-plan-head{min-height:36px;display:flex;align-items:center;gap:10px}
.price-plan-pill{
  padding:8px 16px;
  border-radius:999px;
  color:var(--ink);
  font-size:14px;
  font-weight:700;
}
.price-plan-pill--blue{background:color-mix(in srgb,var(--signal-blue) 24%,white)}
.price-plan-pill--yellow{background:var(--signal-yellow)}
.price-plan-pill--purple{background:color-mix(in srgb,var(--teal) 22%,white)}
.price-popular{color:var(--teal);font-size:13px;font-weight:700}
.pricing-section .price-card h3{
  min-height:1em;
  margin:28px 0 24px;
  color:var(--ink);
  font-size:clamp(2.8rem,4.4vw,4.2rem);
  line-height:.92;
  letter-spacing:-.035em;
}
.pricing-section .price-card>p,
.pricing-section .price-card--featured>p{
  min-height:76px;
  margin:0;
  color:#56525b;
  font-size:15px;
  line-height:1.45;
}
.pricing-section .price-card>p strong{color:var(--ink)}
.price-cta{
  min-height:54px;
  margin-top:22px;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  transition:transform .3s var(--ease),filter .3s var(--ease);
}
.price-cta:hover{transform:scale(.985);filter:saturate(1.12)}
.price-cta--blue{background:#68b9f5}
.price-cta--yellow{background:var(--signal-yellow)}
.price-cta--purple{background:#ab87f5}
.pricing-section .price-card ul{margin:30px 0 0}
.pricing-section .price-card li,
.pricing-section .price-card--featured li{
  padding:13px 0;
  border-color:var(--line);
  color:var(--ink);
}
.pricing-section .price-card li:first-child{font-weight:700}

/* Footer curtain reveal; the brand mark itself stays static. */
.site-footer{
  position:relative;
  isolation:isolate;
  padding:0;
  overflow:clip;
  background:#000;
  color:#fff;
}
.site-footer.footer-reveal-ready{
  padding-bottom:var(--footer-stage-size,100svh);
}
.footer-directory{
  position:relative;
  z-index:2;
  padding:clamp(66.12px,6.24vw,75.47px) var(--gutter) 64.38px;
  border-radius:0 0 80px 80px;
  background:var(--mist);
  color:var(--ink);
}
.footer-directory-grid{
  width:min(100%,var(--max));
  margin:auto;
  display:grid;
  grid-template-columns:1.25fr repeat(3,.75fr);
  gap:56px;
}
.footer-directory-brand{
  align-self:start;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--ink);
  text-decoration:none;
  font-size:25px;
  font-weight:800;
  letter-spacing:-.035em;
}
.footer-directory-brand img{width:52px;height:52px;border-radius:11px}
.footer-directory-brand>span>span{color:var(--teal)}
.footer-column{display:flex;flex-direction:column;align-items:flex-start}
.footer-column h3{margin-bottom:18px;font-size:16px}
.footer-column a{
  margin:7px 0;
  color:#47434b;
  text-decoration:none;
  font-size:15px;
}
.footer-column a:hover{color:var(--teal)}
.footer-directory-bottom{
  width:min(100%,var(--max));
  margin:66.12px auto 0;
  padding-top:28px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-top:1px solid #d4d1d8;
  color:#5d5962;
  font-size:13px;
}
.footer-legal{display:flex;flex-wrap:wrap;gap:8px 22px}
.footer-legal a{color:#5d5962;text-decoration:none;transition:color .25s var(--ease)}
.footer-legal a:hover{color:var(--teal)}
.footer-newsletter-stage{
  position:sticky;
  z-index:1;
  bottom:0;
  width:min(100%,var(--max));
  min-height:max(760px,100svh);
  margin:auto;
  padding:87.36px var(--gutter);
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  align-items:center;
  gap:80px;
}
.footer-reveal-ready .footer-newsletter-stage{
  position:absolute;
  top:0;
  bottom:auto;
  left:50%;
  margin:0;
  transform:translate3d(-50%,var(--footer-reveal-y,0),0);
  will-change:transform;
}
.footer-mark,.footer-motion{display:grid;place-items:center}
.footer-mark img,.footer-motion img{
  width:clamp(170px,19vw,260px);
  height:auto;
  border-radius:16px;
}
.footer-newsletter h2{
  max-width:650px;
  font-family:var(--sans);
  font-size:clamp(3rem,4.5vw,4.8rem);
  font-weight:750;
  letter-spacing:-.035em;
  line-height:.94;
}
.footer-newsletter .newsletter-form{margin-top:40px}
.footer-newsletter .newsletter-form label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.footer-newsletter .newsletter-line{
  min-height:60px;
  display:flex;
  align-items:center;
  border:0;
  background:#2c2831;
  /* The submit button is a 52px pill inset 4px inside a 60px bar. If the bar
     keeps square corners its dark corner sits outside the pill's right cap and
     reads as a box bleeding past the button. Capping the bar at the same
     full radius makes the two concentric, so the cap is clean at both ends. */
  border-radius:999px;
}
.footer-newsletter .newsletter-line input{
  min-width:0;
  flex:1;
  /* clears the 30px left cap */
  padding:0 26px;
  border:0;
  background:transparent;
  color:#fff;
  font-family:var(--sans);
  font-size:16px;
}
.footer-newsletter .newsletter-line input::placeholder{color:#c5c1ca;opacity:1}
.footer-newsletter .newsletter-line input:focus,
.footer-newsletter .newsletter-line input:focus-visible{outline:0}
.footer-newsletter .newsletter-line:focus-within{
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);
}
/* the confirmation sweep is a child of the bar, so it has to be clipped to the
   same pill or it re-squares the corners for the length of the animation */
.footer-newsletter .newsletter-line::after{border-radius:inherit}
.footer-newsletter .newsletter-line button{
  min-width:190px;
  min-height:52px;
  margin-right:4px;
  border:0;
  border-radius:999px;
  background:var(--signal-yellow);
  color:var(--ink);
  font-weight:700;
}
.footer-newsletter .form-status{color:#aaa7af}

@media(max-width:1050px){
  .showreel-heading{padding:0 32px}
  .footer-directory-grid{grid-template-columns:1fr 1fr}
  .footer-directory-brand{grid-column:1/-1}
  .footer-newsletter-stage{grid-template-columns:.72fr 1.28fr;gap:44px}
}

@media(max-width:720px){
  .story-visual--scale,.story-visual--elite{padding:0}
  .showreel-section{padding:73.08px 0 74.88px}
  .showreel-heading{padding:0 20px;display:block}
  .showreel-heading h2{font-size:clamp(3.1rem,14vw,4.4rem)}
  .showreel-heading p{margin-top:20px}
  .showreel-item{flex-basis:82vw;min-height:440px;padding:18px;gap:18px}
  .showreel-media{min-height:320px}
  .showreel-window{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .showreel-window::-webkit-scrollbar{display:none}
  .showreel-track{animation:none}
  .showreel-group[aria-hidden="true"]{display:none}
  .pricing-section{padding:71.76px 20px 78px}
  .pricing-section .pricing-heading h2{font-size:clamp(3.6rem,16vw,5rem)}
  .pricing-section .price-card,.pricing-section .price-card--featured{min-height:auto}
  .footer-directory{padding:62.64px 20px 54px;border-radius:0 0 40px 40px}
  .footer-directory-grid{grid-template-columns:1fr 1fr;gap:42px 24px}
  .footer-directory-brand{grid-column:1/-1}
  .footer-directory-bottom{margin-top:54px;align-items:flex-start;flex-direction:column}
  .footer-newsletter-stage{
    min-height:max(720px,100svh);
    padding:74.82px 20px;
    grid-template-columns:1fr;
    gap:52px;
  }
  .footer-mark img,.footer-motion img{width:138px}
  .footer-newsletter h2{font-size:clamp(2.8rem,12vw,3.8rem)}
  .footer-newsletter .newsletter-line button{min-width:122px}
}

@media(prefers-reduced-motion:reduce){
  .showreel-window{overflow-x:auto;scroll-snap-type:x mandatory}
  .showreel-track{animation:none}
  .showreel-group[aria-hidden="true"]{display:none}
  .site-footer.footer-reveal-ready{padding-bottom:0}
  .footer-reveal-ready .footer-newsletter-stage{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
  }
}

/* Score-led New Zealand place pages */
.nav-dropdown--locations{width:520px;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.nav-dropdown--locations .nav-all-places{grid-column:1/-1;margin-bottom:6px;background:var(--mist);color:var(--teal-dark)}
.footer-column--places{display:grid;grid-template-columns:1fr 1fr;align-content:start;column-gap:22px}
.footer-column--places h3{grid-column:1/-1}
.place-page,.places-page{overflow:clip}
.place-hero{
  min-height:100svh;
  padding:80.36px var(--gutter) 62.64px;
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  align-items:center;
  gap:clamp(44px,6vw,92px);
  background:var(--cloud);
}
.place-hero-copy{max-width:680px}
.place-kicker{margin-bottom:26px;color:var(--teal-dark);font-size:15px;font-weight:700}
.place-hero h1{max-width:760px;font-size:clamp(3.8rem,6.4vw,6rem)}
.place-hero-copy>p:not(.place-kicker){max-width:630px;margin-top:30px;color:#514d56;font-size:clamp(18px,1.5vw,22px);line-height:1.55}
.place-hero-actions{margin-top:36px;display:flex;align-items:center;flex-wrap:wrap;gap:14px}
.place-text-link{color:var(--teal-dark);font-size:15px;font-weight:700;text-decoration:none}
.place-hero-media{position:relative;min-height:min(72vh,760px);margin:0;overflow:hidden;border-radius:16px;background:var(--navy)}
.place-hero-media img{width:100%;height:100%;min-height:inherit;object-fit:cover}
.place-hero-media::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.64));pointer-events:none}
.place-hero-media figcaption{position:absolute;z-index:1;inset:auto 26px 24px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px;color:#fff}
.place-hero-media figcaption strong{font-size:20px}
.place-hero-media figcaption span{max-width:290px;color:rgba(255,255,255,.78);font-size:12px;text-align:right}
.place-opportunity{padding:clamp(78px,6.888vw,97.58px) var(--gutter);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(60px,9vw,140px);background:var(--mist)}
.place-opportunity-copy{max-width:650px}
.place-opportunity h2,.place-build-heading h2{font-size:clamp(3.3rem,5vw,5.6rem)}
.place-opportunity-copy p{margin-top:28px;color:#514d56;font-size:18px}
.place-signal-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.place-signal-list li{padding:30px 0;display:grid;grid-template-columns:54px 1fr;gap:24px;border-bottom:1px solid var(--line)}
.place-signal-list li>span{color:var(--teal-dark);font-size:14px;font-weight:700}
.place-signal-list strong{display:block;font-size:clamp(22px,2vw,30px);line-height:1.1}
.place-signal-list p{margin-top:9px;color:var(--muted);font-size:15px}
.place-build{padding:clamp(78px,6.888vw,97.58px) var(--gutter);background:var(--cloud)}
.place-build-heading{max-width:960px;margin-bottom:60.9px}
.place-build-heading p{max-width:720px;margin-top:24px;color:var(--muted);font-size:19px}
.place-system-steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.place-system-steps article{min-width:0;padding:36px clamp(20px,2.4vw,38px) 42px;border-right:1px solid var(--line)}
.place-system-steps article:first-child{padding-left:0}
.place-system-steps article:last-child{padding-right:0;border-right:0}
.place-system-steps span{color:var(--teal-dark);font-size:14px;font-weight:700}
.place-system-steps h3{margin-top:55.68px;font-size:clamp(28px,2.6vw,38px)}
.place-system-steps p{margin-top:16px;color:var(--muted);font-size:15px}
.place-fit{max-width:920px;margin-top:42px;color:#514d56}
.place-fit strong{color:var(--ink)}
.place-pricing{padding:clamp(78px,6.314vw,86.1px) var(--gutter);background:var(--mist)}
.place-pricing .price-row,.place-pricing .pricing-heading{width:min(100%,var(--max));margin-left:auto;margin-right:auto}
.place-faq{padding:clamp(78px,6.888vw,91.84px) var(--gutter);display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(54px,9vw,140px);background:var(--cloud)}
.place-faq .faq-heading h2{font-size:clamp(3.2rem,5vw,5.4rem)}
.place-faq .faq-heading p{margin-top:22px;color:var(--muted);font-size:18px}
.faq-page .place-faq{gap:clamp(54px,10vw,168px)}
.faq-page .place-faq .faq-heading p{margin-top:28px}
.faq-page .faq-list summary{padding:36px 0}
.faq-page .faq-list details p{padding:0 62px 38px 0}
.place-next{padding:44px var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;border-top:1px solid var(--line);background:var(--cloud)}
.place-next>a{display:flex;flex-direction:column;color:var(--ink);text-decoration:none}
.place-next>a:last-child{text-align:right}
.place-next>a small{color:var(--muted)}
.place-next>a strong{margin-top:4px;font-size:20px}
.place-next>div{text-align:center}
.place-next>div p{margin:0 auto 14px;color:var(--muted);font-size:13px}
.places-hero{padding:109.06px var(--gutter) 84px;background:var(--cloud)}
.places-hero>*{max-width:1050px;margin-left:auto;margin-right:auto;text-align:center}
.places-hero>p{margin-bottom:24px;color:var(--teal-dark);font-size:15px;font-weight:700}
.places-hero h1{font-size:clamp(4rem,7vw,6rem)}
.places-hero span{display:block;max-width:760px;margin-top:30px;color:var(--muted);font-size:20px}
.places-directory{padding:clamp(78px,6.314vw,86.1px) var(--gutter);background:var(--mist)}
.places-directory--established{background:var(--cloud)}
.places-directory-head{width:min(100%,var(--max));margin:0 auto 52px;display:grid;grid-template-columns:1fr 1fr;align-items:end;gap:48px}
.places-directory-head h2{font-size:clamp(3rem,4.5vw,5rem)}
.places-directory-head p{color:var(--muted);font-size:18px}
.places-directory-grid{width:min(100%,var(--max));margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.places-directory-grid--two{grid-template-columns:repeat(2,1fr)}
.place-directory-card--desktop{display:none}
@media(min-width:1051px){.place-directory-card--desktop{display:block}}
.places-directory--national .place-directory-card{min-height:350px}
.place-directory-card{position:relative;min-height:420px;overflow:hidden;border-radius:16px;background:var(--navy);color:#fff;text-decoration:none}
.place-directory-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.place-directory-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 42%,rgba(0,0,0,.08) 58%,rgba(0,0,0,.74) 100%)}
.place-directory-card:hover img{transform:scale(1.025)}
.place-directory-card>span{position:absolute;z-index:1;inset:auto 26px 25px;display:flex;flex-direction:column}
.place-directory-card small{color:rgba(255,255,255,.72)}
.place-directory-card strong{margin-top:4px;font-size:clamp(30px,3vw,44px);letter-spacing:-.035em;line-height:1}
.place-directory-card em{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:14px;
  color:#fff;
  font-size:14px;
  font-style:normal;
  font-weight:700;
  /* underline, not a pill: six yellow buttons stacked down the grid was the
     loudest thing on the page and it competed with the place names, which are
     what the card is actually selling. The arrow carries the affordance. */
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:4px;
  text-decoration-color:rgb(255 255 255 / .5);
  transition:text-decoration-color .35s var(--ease);
}
.place-directory-card em .ds-arrow{
  width:13px;
  height:13px;
  flex:0 0 auto;
  transition:transform .35s var(--ease);
}
.place-directory-card:hover em{text-decoration-color:#fff}
.place-directory-card:hover em .ds-arrow{transform:translate(2px,-2px)}
.places-directory--home{background:var(--mist)}
.places-home-action{width:min(100%,var(--max));margin:36px auto 0;text-align:center}

@media(max-width:1180px){
  .place-system-steps{grid-template-columns:1fr 1fr}
  .place-system-steps article{border-bottom:1px solid var(--line)}
  .place-system-steps article:nth-child(2){border-right:0}
  .place-system-steps article:nth-child(3){padding-left:0;border-bottom:0}
  .place-system-steps article:last-child{border-bottom:0}
  .places-directory-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:1050px){
  .place-hero{min-height:auto;padding-top:74.62px;grid-template-columns:1fr}
  .place-hero-copy{max-width:850px}
  .place-hero-media{min-height:62vw}
  .place-opportunity,.place-faq{grid-template-columns:1fr}
  .place-opportunity-copy{max-width:850px}
}
@media(max-width:720px){
  .place-hero{padding:86.8px 20px 52.2px;gap:42px}
  .place-hero h1{font-size:clamp(3.5rem,15vw,4.8rem)}
  .place-hero-copy>p:not(.place-kicker){font-size:18px}
  .place-hero-actions{align-items:flex-start;flex-direction:column}
  .place-hero-media{min-height:72vw;border-radius:12px}
  .place-hero-media figcaption{inset:auto 18px 16px;align-items:flex-start;flex-direction:column;gap:3px}
  .place-hero-media figcaption span{text-align:left}
  .place-opportunity,.place-build,.place-pricing,.place-faq{padding-left:20px;padding-right:20px}
  .place-signal-list li{grid-template-columns:38px 1fr;gap:14px}
  .place-system-steps{grid-template-columns:1fr}
  .place-system-steps article,.place-system-steps article:first-child,.place-system-steps article:nth-child(3),.place-system-steps article:last-child{padding:30px 0;border-right:0;border-bottom:1px solid var(--line)}
  .place-system-steps article:last-child{border-bottom:0}
  .place-system-steps h3{margin-top:32px}
  .place-next{padding:34px 20px;grid-template-columns:1fr 1fr}
  .place-next>div{grid-column:1/-1;grid-row:1}
  .places-hero{padding:86.1px 20px 73.08px}
  .places-hero span{font-size:18px}
  .places-directory{padding-left:20px;padding-right:20px}
  .places-directory-head{grid-template-columns:1fr}
  .places-directory-grid,.places-directory-grid--two{grid-template-columns:1fr}
  .place-directory-card{min-height:380px}
  .footer-column--places{grid-template-columns:1fr}
}

/* Jitter-measured global navigation */
:root{
  --nav-max:1440px;
  --jitter-expo:cubic-bezier(.19,1,.22,1);
  --jitter-spring:cubic-bezier(.16,1,.3,1);
  --jitter-soft:cubic-bezier(.25,.46,.45,.94);
  --jitter-card:cubic-bezier(.22,1,.36,1);
}
.site-header{
  inset:0 0 auto;
  height:129px;
  padding:0;
  isolation:isolate;
  transform:none;
  transition:transform 1.2s var(--jitter-expo);
}
.nav-shell{
  position:absolute;
  z-index:2;
  top:34px;
  left:50%;
  width:min(calc(100% - 96px),var(--nav-max));
  height:100px;
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
  gap:28px;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  backdrop-filter:none;
  transform:translateX(-50%);
  transition:none;
  isolation:isolate;
}
.nav-shell::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:auto;
  left:calc(-1 * clamp(16px,2.4vw,40px));
  right:calc(-1 * clamp(16px,2.4vw,40px));
  height:100px;
  border:1px solid rgb(25 23 28 / .12);
  border-radius:20px;
  background:var(--white);
  box-shadow:0 4px 8px rgb(0 0 0 / .08);
  opacity:1;
  transform:none;
  transform-origin:top center;
  transition:
    top .5s var(--jitter-soft),
    left .7s var(--jitter-expo),
    right .7s var(--jitter-expo),
    width .7s var(--jitter-expo),
    height .7s var(--jitter-expo),
    border-radius .5s var(--jitter-soft),
    box-shadow .5s var(--jitter-soft),
    opacity .16s linear,
    transform .7s var(--jitter-expo);
}
.site-header.header-floating .nav-shell::before{opacity:1}
.site-header:not(.header-floating):not(.header-compact) .nav-shell::before{opacity:1}
body[data-theme="navy"] .nav-shell{
  color:var(--ink);
  background:transparent;
  box-shadow:none;
}
.brand{
  min-width:max-content;
  gap:9px;
  font-size:28px;
  transition:transform .8s var(--jitter-spring);
}
.brand img{width:34px;height:34px}
.brand .wordmark span,
body[data-theme="navy"] .brand .wordmark span{color:var(--teal)}
.nav-center{
  flex:1;
  justify-content:flex-start;
  gap:0;
  min-width:0;
  transition:transform .8s var(--jitter-spring);
}
.nav-center>a,.nav-group>summary{
  min-height:48px;
  /* the nav is down to three links, so the room the dropdowns used to take
     goes into type size and breathing room instead */
  padding:0 20px;
  border-radius:999px;
  font-size:22.5px;
  font-weight:600;
  letter-spacing:-.022em;
  opacity:1;
  white-space:nowrap;
  transition:
    opacity .3s var(--jitter-soft),
    color .2s ease,
    background-color .3s var(--jitter-soft),
    transform .5s var(--jitter-spring);
}
.nav-center>a:hover,.nav-center>a:focus-visible,
body[data-theme="navy"] .nav-center>a:hover,
body[data-theme="navy"] .nav-center>a:focus-visible{
  background:transparent;
  color:inherit;
  transform:none;
}
.nav-group>summary:hover,.nav-group[open]>summary,
body[data-theme="navy"] .nav-group>summary:hover,
body[data-theme="navy"] .nav-group[open]>summary{background:transparent}
/* Complete package and Questions animate exactly like the Places and About menus:
   hovering any nav item dims its siblings to .35 and keeps itself lit. No pill, no
   lift. The body.nav-dropdown-open rules below outrank these, so an open panel keeps
   owning the dim state once the pointer crosses into it. */
@media(hover:hover){
  .nav-center:hover>a,
  .nav-center:hover>.nav-group>summary{opacity:.35}
  .nav-center>a:hover,
  .nav-center>a:focus-visible,
  .nav-center>.nav-group:hover>summary,
  .nav-center>.nav-group>summary:focus-visible{opacity:1}
}
body.nav-dropdown-open .nav-center>a{opacity:.35}
body.nav-dropdown-open .nav-group:not([open])>summary{opacity:.35}
body.nav-dropdown-open .nav-group[open]>summary{opacity:1}
.nav-group{position:static}
.nav-dropdown{
  position:fixed;
  z-index:2;
  top:95px;
  left:50%;
  width:100vw;
  height:320px;
  padding:40px max(48px,calc((100vw - var(--nav-max))/2)) 54px;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  border-radius:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  transform:translateX(-50%);
  pointer-events:auto;
}
.nav-dropdown::before{display:none}
.nav-dropdown a{
  position:relative;
  min-width:0;
  min-height:103px;
  padding:18px 18px 42px;
  justify-content:flex-end;
  border-radius:12px;
  background:var(--mist);
  color:var(--ink);
  font-size:15px;
  font-weight:700;
  line-height:1.15;
  opacity:0;
  transform:scale(1.15);
  transform-origin:center;
  transition:background-color .2s ease,color .2s ease;
}
.nav-dropdown a::after{
  content:"";
  display:inline-block;
  width:15px;height:15px;
  -webkit-mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2010.55C5.85%208.45%208.15%206.1%2010.4%203.6%22%2F%3E%3Cpath%20d%3D%22M5.5%203.35%2010.65%203.25%2010.55%208.4%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
  mask:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2014%2014%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.5%2010.55C5.85%208.45%208.15%206.1%2010.4%203.6%22%2F%3E%3Cpath%20d%3D%22M5.5%203.35%2010.65%203.25%2010.55%208.4%22%2F%3E%3C%2Fsvg%3E') no-repeat center/contain;
  background:currentColor;
  position:absolute;
  right:17px;
  bottom:15px;
  font-size:15px;
  transition:transform .3s var(--jitter-soft);
}
.nav-dropdown a:hover{background:var(--signal-blue)}
.nav-dropdown a:hover::after{transform:translate(25%,-25%)}
.nav-dropdown .nav-all-places{grid-column:auto;margin:0;background:var(--signal-yellow);color:var(--ink)}
.nav-dropdown strong{font-size:17px}
.nav-dropdown small{margin-top:6px;color:var(--muted);font-size:12px;font-weight:500}
.nav-dropdown--about .nav-about-intro{
  justify-content:space-between;
  background:var(--signal-yellow);
}
.nav-dropdown--about .nav-about-intro strong{
  font-size:clamp(20px,1.55vw,25px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.nav-dropdown--about .nav-founder-card{
  isolation:isolate;
  overflow:hidden;
  background:var(--ink);
  color:var(--white);
}
.nav-dropdown--about .nav-founder-card::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:38% 0 0;
  background:linear-gradient(180deg,transparent,rgb(0 0 0 / .78));
}
.nav-dropdown--about .nav-founder-card img{
  position:absolute;
  z-index:0;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1);
  transition:transform .7s var(--jitter-expo);
}
.nav-dropdown--about .nav-founder-card:not(.nav-founder-card--gray) img{object-position:center 30%}
.nav-dropdown--about .nav-founder-card--gray img{object-position:center 43%}
.nav-dropdown--about .nav-founder-card:hover img{transform:scale(1.035)}
.nav-dropdown--about .nav-founder-card span{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
}
.nav-dropdown--about .nav-founder-card small{color:rgb(255 255 255 / .74)}
.nav-dropdown--about .nav-founder-card::after{z-index:2}
.nav-dropdown--about .nav-about-mission{
  background:var(--teal);
  color:var(--white);
}
.nav-dropdown--about .nav-about-mission small{color:rgb(255 255 255 / .72)}
.nav-dropdown--about .nav-about-link{background:var(--signal-blue)}
/* Complete package and Questions use the same five-card row as the About menu, so all
   four nav items open the identical panel with the identical staggered card animation.
   Only the lead card is styled here; every other card inherits .nav-dropdown a. */
.nav-dropdown--package .nav-panel-lead,
.nav-dropdown--questions .nav-panel-lead{
  justify-content:space-between;
  background:var(--signal-yellow);
  color:var(--ink);
}
.nav-dropdown--package .nav-panel-lead strong,
.nav-dropdown--questions .nav-panel-lead strong{
  font-size:clamp(20px,1.55vw,25px);
  line-height:1.02;
  letter-spacing:-.035em;
}
.nav-group[open] .nav-dropdown a{
  animation:nav-card-in .8s var(--jitter-card) both;
}
.nav-group[open] .nav-dropdown a:nth-child(1){animation-delay:.05s}
.nav-group[open] .nav-dropdown a:nth-child(2){animation-delay:.125s}
.nav-group[open] .nav-dropdown a:nth-child(3){animation-delay:.2s}
.nav-group[open] .nav-dropdown a:nth-child(4){animation-delay:.275s}
.nav-group[open] .nav-dropdown a:nth-child(5){animation-delay:.35s}
.nav-group[open] .nav-dropdown a:nth-child(6){animation-delay:.425s}
.nav-group[open] .nav-dropdown a:nth-child(7){animation-delay:.5s}
.nav-group[open] .nav-dropdown a:nth-child(8){animation-delay:.575s}
.nav-group[open] .nav-dropdown a:nth-child(9){animation-delay:.65s}
.nav-group[open] .nav-dropdown a:nth-child(10){animation-delay:.725s}
@keyframes nav-card-in{
  0%{opacity:0;transform:scale(1.15)}
  18%{opacity:1}
  100%{opacity:1;transform:scale(1)}
}
body.nav-dropdown-open .nav-shell::before{
  top:-34px;
  left:50%;
  right:auto;
  width:100vw;
  height:449px;
  border-radius:0 0 40px 40px;
  opacity:1;
  transform:translateX(-50%);
}
.nav-actions{
  position:relative;
  flex:0 0 auto;
  gap:0;
}
.nav-cta{
  min-height:52px;
  padding:0 22px;
  background:var(--signal-yellow);
  color:var(--ink);
  font-size:19.6px;
  transition:transform .6s var(--jitter-card),background-color .3s var(--jitter-soft),color .3s var(--jitter-soft);
}
.nav-cta:hover,
body[data-theme="navy"] .nav-cta:hover{
  background:var(--signal-blue);
  color:var(--ink);
  transform:scale(1.05);
}
.nav-cta:active{transform:scale(.9);transition-duration:.1s}
body[data-theme="navy"] .nav-cta{background:var(--signal-yellow);color:var(--ink)}
.nav-toggle{
  position:absolute;
  top:0;
  right:0;
  display:block;
  width:52px;
  height:52px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  opacity:0;
  pointer-events:none;
  transform:scale(0);
  transition:transform .8s var(--jitter-spring),background-color .16s linear,opacity .15s linear;
}
.nav-toggle span{left:17px;width:18px;background:currentColor}
.nav-toggle span:first-child{top:21px}
.nav-toggle span:last-child{top:28px}
.site-header.header-compact .brand,
.site-header.header-compact .nav-center{
  transform:translateY(-130px);
  pointer-events:none;
}
.site-header.header-compact .nav-cta{transform:translateX(-67px)}
.site-header.header-compact .nav-cta:hover{transform:translateX(-67px) scale(1.05)}
.site-header.header-compact .nav-toggle{opacity:1;pointer-events:auto;transform:scale(1)}
.site-header.header-compact .nav-shell::before{
  display:none;
}
.nav-scrim{
  display:block;
  position:fixed;
  z-index:1;
  inset:0;
  border:0;
  background:rgb(25 23 28 / .68);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .6s var(--jitter-soft),visibility .6s;
}
.nav-scrim.is-desktop-open{opacity:1;visibility:visible;pointer-events:auto}

@media(min-width:1025px){
  .mobile-menu{display:none!important}
  .brand .wordmark{display:inline}
  .nav-center{display:flex}
}

@media(min-width:1181px) and (max-width:1440px){
  .nav-shell{gap:20px}
  .nav-center>a,.nav-group>summary{padding-inline:16px;font-size:20.5px}
  .nav-cta{padding-inline:18px;font-size:16.5px}
}

@media(min-width:1025px) and (max-width:1180px){
  .nav-shell{gap:18px}
  .brand{font-size:20px}
  .nav-center>a,.nav-group>summary{padding-inline:12px;font-size:18px}
  .nav-cta{padding-inline:16px;font-size:14px}
}

@media(max-width:1024px){
  :root{--header-h:100px}
  .site-header{height:100px}
  .nav-shell{
    z-index:4;
    top:15px;
    width:calc(100% - 40px);
    height:70px;
    padding:0 10px;
    gap:10px;
  }
  body.menu-open .nav-shell{z-index:4}
  .nav-shell::before{
    inset:0 -10px auto;
    width:auto;
    height:70px;
    border-radius:10px;
  }
  .site-header.header-floating .nav-shell::before{opacity:1}
  .brand{min-width:0}
  .brand img{width:44px;height:44px}
  .brand .wordmark,.nav-center{display:none}
  .nav-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
  .nav-cta{
    position:static;
    min-height:48px;
    padding:0 16px;
    font-size:18.2px;
    transform:none!important;
  }
  .nav-toggle{
    position:relative;
    top:auto;
    right:auto;
    flex:0 0 52px;
    opacity:1;
    pointer-events:auto;
    transform:scale(1);
  }
  .nav-toggle[aria-expanded="false"]{background:var(--white);color:var(--ink)}
  .nav-toggle[aria-expanded="true"]{background:var(--ink);color:var(--white)}
  .site-header.header-compact .brand{transform:translateY(-130px)}
  .site-header.header-compact .nav-cta{transform:translateY(-130px)!important}
  .site-header.header-compact .nav-toggle{transform:scale(1)}
  .site-header.header-compact .nav-shell::before{
    display:none;
  }
  .mobile-menu{
    display:block;
    position:fixed;
    z-index:3;
    inset:0;
    width:100%;
    height:100dvh;
    padding:78px 20px 24px;
    overflow:auto;
    border-radius:0;
    background:var(--mist);
    color:var(--ink);
    opacity:1;
    visibility:hidden;
    clip-path:inset(0 0 100% 0);
    transform:none;
    transform-origin:top;
    pointer-events:none;
    transition:clip-path .8s var(--jitter-spring),visibility .8s;
  }
  .mobile-menu.is-open{visibility:visible;clip-path:inset(0);transform:none;pointer-events:auto}
  /* Bare 100dvh can outgrow the real visible viewport on iOS Safari while the
     chrome is expanded (same bug js/viewport.js documents for the hero
     stage), which is why the actions row at the bottom was landing below the
     thumb instead of at it. --vvh is measured against the live viewport, so
     this keeps the panel's actual height honest in every chrome state. */
  @supports (height: 100lvh){
    .mobile-menu{height:max(100lvh, var(--vvh,0px))}
  }
  .mobile-menu-inner{
    width:min(100%,700px);
    min-height:calc(100dvh - 124px);
    margin:auto;
    padding:20px 0 0;
    display:flex;
    flex-direction:column;
  }
  .mobile-menu-label{
    padding:0 0 16px;
    color:var(--muted);
    font-size:13px;
  }
  .mobile-menu-inner>a{
    min-height:58px;
    padding:0;
    border-bottom:1px solid var(--line);
    font-family:"Switzer",Avenir Next,Avenir,Helvetica Neue,sans-serif;
    font-size:clamp(2rem,7vw,3rem);
    line-height:1;
    letter-spacing:-.04em;
    opacity:0;
    transform:translateY(-18px);
    transition:opacity .5s var(--jitter-expo),transform .8s var(--jitter-spring);
  }
  .mobile-menu.is-open .mobile-menu-inner>a{opacity:1;transform:none}
  .mobile-menu.is-open .mobile-menu-inner>a:nth-of-type(1){transition-delay:.08s}
  .mobile-menu.is-open .mobile-menu-inner>a:nth-of-type(2){transition-delay:.14s}
  .mobile-menu.is-open .mobile-menu-inner>a:nth-of-type(3){transition-delay:.2s}
  .mobile-menu.is-open .mobile-menu-inner>a:nth-of-type(4){transition-delay:.26s}
  .mobile-locations{
    margin:20px 0;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    opacity:0;
    transform:translateY(-18px);
    transition:opacity .5s var(--jitter-expo) .3s,transform .8s var(--jitter-spring) .3s;
  }
  .mobile-menu.is-open .mobile-locations{opacity:1;transform:none}
  .mobile-locations a{
    min-height:42px;
    padding:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:var(--white);
    color:var(--ink);
    text-align:center;
    text-decoration:none;
    font-size:12px;
    font-weight:700;
  }
  .mobile-menu-actions{
    display:flex;
    gap:8px;
    margin-top:auto;
    padding-top:10px;
    position:sticky;
    bottom:0;
    background:var(--mist);
  }
  /* Wrapping these in .mobile-menu-actions took them out from under
     .mobile-menu-inner>a, which is where display:flex/align-items/padding/
     text-decoration used to come from - restated here directly so the pill
     still centers its label instead of rendering as a bare inline link. */
  .mobile-menu-actions .mobile-menu-cta,
  .mobile-menu-actions .mobile-menu-wa{
    flex:1;
    min-width:0;
    text-align:center;
    line-height:1.15;
  }
  .mobile-menu-actions .mobile-menu-wa{gap:6px;padding:0 10px;font-size:13.5px}
  .mobile-menu-actions .mobile-menu-wa svg{width:18px;height:18px}
  .mobile-menu-inner .mobile-menu-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:54px;
    padding:0 10px;
    border:0;
    border-radius:999px;
    background:var(--signal-yellow);
    color:var(--ink);
    text-decoration:none;
    font-family:"Switzer",Avenir Next,Avenir,Helvetica Neue,sans-serif;
    font-size:13.5px;
    font-weight:750;
  }
  .nav-scrim,.nav-scrim.is-open,.nav-scrim.is-desktop-open{display:none}
}

/* Thin header below 900px, site-wide. Previously lived only in hero-film.css
   (loaded on index.html alone), so the homepage got this compact 68px header
   and every other page kept the 100px one from the block above - moved here
   so it's consistent everywhere. */
@media(max-width:900px){
  .site-header{height:68px!important}
  .nav-shell{
    top:max(6px,env(safe-area-inset-top))!important;
    width:calc(100% - 12px)!important;
    height:54px!important;
    padding:0 5px!important;
  }
  .nav-shell::before{height:54px!important}
  .brand{min-width:38px!important;min-height:38px!important}
  .brand img{width:34px!important;height:34px!important}
  .nav-cta{min-height:40px!important;padding-inline:11px!important;font-size:13px!important}
  .nav-toggle{flex-basis:42px!important;width:42px!important;height:42px!important}
  .nav-toggle span{left:12px!important}
}

@media(max-width:520px){
  /* brand + CTA + menu share one 350px row. At 16.8px the CTA measured 223px
     and pushed the menu button off a 390px screen. WhatsApp now floats
     bottom-right instead of competing for this row. */
  .site-header .nav-cta{display:flex;padding:0 13px;font-size:15px}
  .mobile-locations{grid-template-columns:1fr 1fr}
}

@media(max-width:360px){
  .site-header .nav-cta{display:none}
  .nav-shell{justify-content:space-between}
}

@media(prefers-reduced-motion:reduce){
  .site-header,.site-header *,.site-header *::before,.site-header *::after{
    animation:none!important;
    transition-duration:.01ms!important;
  }
  .site-header.header-compact .brand,
  .site-header.header-compact .nav-center,
  .site-header.header-compact .nav-cta{transform:none!important}
  .site-header.header-compact .brand,
  .site-header.header-compact .nav-center,
  .site-header.header-compact .nav-cta{visibility:hidden}
  .nav-group[open] .nav-dropdown a{opacity:1;transform:none}
}

/* Mobile field-guide pass */
@keyframes mobile-swipe-cue{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

@keyframes swipe-mark-drift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(-2.2px)}
}
@keyframes swipe-mark-drift-r{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(2.2px)}
}
@media(prefers-reduced-motion:reduce){
  .swipe-mark-head{animation:none}
}

@media(max-width:1024px){
  :root{--header-h:88px}
  .site-header{
    height:88px;
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
    transition:transform .34s var(--jitter-expo);
  }
  .nav-shell{
    top:max(12px,env(safe-area-inset-top));
    width:calc(100% - 24px);
    height:64px;
    padding:0 8px;
    gap:8px;
  }
  .nav-shell::before{
    inset:0 -6px auto;
    height:64px;
    border-radius:12px;
    transition:
      top .3s var(--jitter-expo),
      left .34s var(--jitter-expo),
      right .34s var(--jitter-expo),
      width .34s var(--jitter-expo),
      height .34s var(--jitter-expo),
      border-radius .3s var(--jitter-expo),
      box-shadow .3s var(--jitter-expo),
      opacity .12s linear,
      transform .34s var(--jitter-expo);
  }
  .brand{
    min-width:44px;
    min-height:44px;
    transition:transform .34s var(--jitter-expo);
  }
  .brand img{width:40px;height:40px}
  .nav-actions{gap:8px}
  .nav-cta{
    min-height:46px;
    padding:0 14px;
    font-size:16px;
    transition:transform .32s var(--jitter-expo),background-color .22s ease,color .22s ease;
  }
  .nav-toggle{
    flex-basis:48px;
    width:48px;
    height:48px;
    transition:transform .3s var(--jitter-expo),background-color .16s linear,opacity .12s linear;
  }
  .nav-toggle span{
    top:50%!important;
    left:15px;
    width:18px;
    transition:transform .26s var(--jitter-expo);
  }
  .nav-toggle span:first-child{transform:translateY(-4px)}
  .nav-toggle span:last-child{transform:translateY(3px)}
  .nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(-1px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-1px) rotate(-45deg)}
  .site-header.header-compact .brand,
  .site-header.header-compact .nav-cta{transform:translateY(-92px)!important}
  .site-header.header-compact .nav-shell::before{
    display:none;
  }
  .mobile-menu{
    padding:max(76.56px,calc(env(safe-area-inset-top) + 69.6px)) 14px max(20px,env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    opacity:0;
    transform:translateY(-8px);
    transition:opacity .24s var(--jitter-expo),transform .28s var(--jitter-expo),visibility .28s;
  }
  .mobile-menu.is-open{opacity:1;transform:none}
  .mobile-menu-inner{padding:18px 6px 12px}
  .mobile-menu-inner>a{min-height:54px;font-size:22px}
  .mobile-locations{margin:14px 0}
  .mobile-locations a{
    min-height:44px;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .mobile-locations .mobile-all-places{
    grid-column:1/-1;
    padding-inline:16px;
  }
}

@media(max-width:720px){
  .rail-controls button{width:44px;height:44px}
  .story-hero{padding:76.56px 0 44px}
  .level-track{
    gap:10px;
    padding:0 12px 9px;
    scroll-padding-inline:12px;
  }
  .level-card{
    flex-basis:min(84vw,344px);
    min-height:390px;
    height:min(60svh,460px);
    scroll-snap-stop:always;
  }
  .level-card-copy{padding:18px}
  .service-pill{height:58px;padding:8px 14px 9px;font-size:18px}
  .level-swipe-cue{
    gap:8px;
    /* the cue belongs to the cards above it, so it sits close to them and lets the
       section change below carry the separation */
    margin:16px 16px 0;
    font-size:11.5px;
  }
  /* the label is a plain span now; the drifting arrowheads live in .swipe-mark */
  .level-swipe-cue span{display:inline-block;font-size:inherit;animation:none}
  .swipe-mark{width:30px;height:14px}
  .hero-copy{padding:0 20px 30px}
  .hero-copy h1{font-size:clamp(2.55rem,11vw,3.6rem)}
  #how-it-works{scroll-margin-top:calc(var(--header-h) + 12px)}

  .level-story{padding:53.94px 0 64.38px}
  .level-story-intro{margin-bottom:26px}
  .level-story-intro h2{font-size:clamp(2.8rem,12vw,4rem)}
  .level-story-intro p{font-size:16px}
  .level-story-stage{
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }
  .story-visual-column,.story-visual-stack,.story-steps{display:contents}
  .story-index{
    position:sticky;
    z-index:3;
    top:max(84px,calc(env(safe-area-inset-top) + 76px));
    grid-row:1;
    margin:0 20px 14px;
    padding:5px;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:3px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(255,255,255,.94);
    box-shadow:0 4px 8px rgba(0,0,0,.07);
    backdrop-filter:blur(12px);
  }
  .story-index span{
    min-width:0;
    height:34px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border-radius:999px;
    color:var(--muted);
    font-size:10px;
    font-weight:750;
    white-space:nowrap;
    transition:background-color .24s ease,color .24s ease;
  }
  .story-index .is-active{background:var(--signal-yellow);color:var(--ink)}
  .story-visual{
    position:relative;
    inset:auto;
    width:auto;
    height:clamp(290px,84vw,360px);
    margin:0 20px;
    scroll-snap-align:none;
  }
  .story-visual:nth-child(1){grid-row:2}
  .story-visual:nth-child(2){grid-row:4}
  .story-visual:nth-child(3){grid-row:6}
  .story-visual:nth-child(4){grid-row:8}
  .story-step{
    min-height:0;
    margin:0 20px;
    padding:20px 0 54px;
    border-bottom:1px solid var(--line);
  }
  .story-step:nth-child(1){grid-row:3}
  .story-step:nth-child(2){grid-row:5}
  .story-step:nth-child(3){grid-row:7}
  .story-step:nth-child(4){grid-row:9;border-bottom:0}
  .story-step h3{font-size:clamp(2.25rem,10vw,3.25rem)}
  .story-step p{margin-top:16px;font-size:16px}
  .story-step ul{margin-top:18px}
  .story-step li{padding:10px 0;font-size:14px}
  .story-promise{margin-top:8px}

  .footer-directory{
    padding:52px 20px 38px;
    border-radius:0 0 24px 24px;
  }
  .footer-directory-grid{grid-template-columns:1fr 1fr;gap:32px 22px}
  .footer-directory-brand{grid-column:1/-1}
  .footer-directory-brand img{width:44px;height:44px}
  .footer-directory-brand>span{font-size:23px}
  .footer-column--places{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:18px;
  }
  .footer-column--places h3{grid-column:1/-1}
  .footer-column a{min-height:44px;margin:0;display:flex;align-items:center}
  .footer-column{min-width:0}
  .footer-column a{
    max-width:100%;
    overflow-wrap:anywhere;
  }
  .footer-directory-bottom{margin-top:38px;gap:12px}
  .footer-newsletter-stage{
    min-height:max(680px,84svh);
    padding:55.68px 20px max(55.68px,env(safe-area-inset-bottom));
    align-content:center;
    gap:38px;
  }
  .footer-mark img,.footer-motion img{width:96px}
  .footer-newsletter h2{font-size:clamp(2.55rem,11vw,3.35rem)}
  .footer-newsletter .newsletter-form{margin-top:28px}
  .footer-newsletter .newsletter-line{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    background:transparent;
    /* stacked: the bar is no longer a bar, so the pill cap does not apply and
       the confirmation sweep must not round itself over two stacked rows */
    border-radius:0;
  }
  .footer-newsletter .newsletter-line input{
    width:100%;
    min-width:0;
    min-height:56px;
    padding:0 16px;
    border-radius:10px;
    background:#2c2831;
  }
  .footer-newsletter .newsletter-line button{
    width:100%;
    min-height:54px;
    margin:0;
  }

  .story-link,
  .place-text-link,
  .service-text-link,
  .place-next>a{
    min-height:44px;
    display:inline-flex;
    align-items:center;
  }

  .place-hero h1{font-size:clamp(2.85rem,14vw,4rem)}
  .place-opportunity h2,
  .place-build-heading h2,
  .place-faq .faq-heading h2{font-size:clamp(2.55rem,12vw,3.8rem)}
  .places-hero{padding:75.77px 20px 62.64px}
  .places-hero h1{font-size:clamp(2.75rem,13vw,3.8rem)}
  .places-directory{padding-top:73.08px;padding-bottom:73.08px}
  .places-directory-head{margin-bottom:36px;gap:20px}
  .places-directory-head h2{font-size:clamp(2.4rem,11vw,3.5rem)}
  .final-cta h2{font-size:clamp(2.5rem,12vw,4rem)}
  .page-hero h1,
  .section-head h2,
  .cta-band h2{font-size:clamp(2.5rem,12vw,3.8rem)}
}

@media(max-width:360px){
  .story-index span{font-size:9px}
  .footer-directory-grid{grid-template-columns:1fr}
  .footer-directory-brand,
  .footer-column--places{grid-column:1}
  .footer-column--places{grid-template-columns:1fr}
  .footer-newsletter h2{font-size:clamp(2.3rem,12vw,2.8rem)}
}

@media(prefers-reduced-motion:reduce){
  .level-swipe-cue span,
  .swipe-mark-head{animation:none}
}

/* 2026-07 stacked service story, connected portfolio and footer face */

.portfolio-ui{
  position:absolute;
  inset:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:24px;
  background:
    radial-gradient(circle at 84% 12%,rgb(124 58 237 / .2),transparent 30%),
    #19171c;
  color:#fff;
  font-family:var(--sans);
}
.portfolio-ui-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:14px;
}
.portfolio-ui-bar>i{
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:999px;
  background:rgb(245 255 99 / .12);
  color:var(--signal-yellow);
  font-size:10px;
  font-style:normal;
  font-weight:750;
}
.portfolio-ui-bar>i>em{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--signal-yellow);
  box-shadow:0 0 8px rgb(245 255 99 / .7);
}
.portfolio-ui-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.portfolio-ui-metrics>b{
  min-width:0;
  padding:13px;
  border-radius:10px;
  background:#29262d;
  color:#fff;
  font-size:18px;
  line-height:1.05;
}
.portfolio-ui-metrics small{
  display:block;
  margin-bottom:7px;
  color:#aaa5af;
  font-size:9px;
  font-weight:600;
}
.portfolio-ui-properties{
  min-height:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:7px;
}
.portfolio-ui-properties>span{
  min-height:0;
  flex:1;
  padding:8px 10px;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  border-radius:10px;
  background:#f3f3f5;
  color:var(--ink);
}
.portfolio-ui-properties b{min-width:0;font-size:12px;line-height:1.1}
.portfolio-ui-properties b small{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:500}
.portfolio-ui-properties>span>em{color:var(--teal-dark);font-size:9px;font-style:normal;font-weight:750}
.portfolio-thumb{width:54px;height:100%;min-height:42px;border-radius:7px;background:center/cover no-repeat}
.portfolio-thumb--lake{background-image:url("../public/img/gallery-lakefront-living.jpg")}
.portfolio-thumb--coast{background-image:url("../public/img/gallery-coastal-pool.jpg")}
.portfolio-thumb--alpine{background-image:url("../public/img/gallery-alpine-bedroom.jpg")}
.portfolio-ui-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.portfolio-ui-flow i{
  position:relative;
  padding:8px 4px;
  overflow:hidden;
  border-radius:7px;
  background:#332e39;
  color:#cbc6d0;
  font-size:9px;
  font-style:normal;
  font-weight:700;
  text-align:center;
}
.portfolio-ui-flow i::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:2px;
  background:var(--signal-blue);
  transform:scaleX(.2);
  transform-origin:left;
}
.portfolio-ui-flow i:nth-child(2)::after{background:var(--signal-yellow)}
.portfolio-ui-flow i:nth-child(3)::after{background:var(--teal)}
.portfolio-ui-flow i:nth-child(4)::after{background:#fff}
.portfolio-ui--hero{padding:20px 18px 74.82px}
.portfolio-ui--hero .portfolio-ui-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
.portfolio-ui--hero .portfolio-ui-properties>span{grid-template-columns:44px minmax(0,1fr) auto}
.portfolio-ui--hero .portfolio-thumb{width:44px}
.portfolio-ui--hero .portfolio-ui-flow{display:none}

@keyframes portfolio-connect{
  0%,16%{transform:scaleX(.12);opacity:.45}
  46%,82%{transform:scaleX(1);opacity:1}
  100%{transform:scaleX(.12);opacity:.45}
}
@keyframes portfolio-live{
  0%,100%{box-shadow:0 0 0 0 rgb(245 255 99 / .32)}
  50%{box-shadow:0 0 0 7px rgb(245 255 99 / 0)}
}
.story-step.is-active .portfolio-ui-flow i::after,
.level-card--elite:hover .portfolio-ui-flow i::after{
  animation:portfolio-connect 4.2s var(--ease-out) infinite;
}
.story-step.is-active .portfolio-ui-flow i:nth-child(2)::after{animation-delay:.22s}
.story-step.is-active .portfolio-ui-flow i:nth-child(3)::after{animation-delay:.44s}
.story-step.is-active .portfolio-ui-flow i:nth-child(4)::after{animation-delay:.66s}
.story-step.is-active .portfolio-ui-bar>i>em{animation:portfolio-live 1.8s ease-out infinite}

.level-story{padding:75.47px var(--gutter) 85.8px}
.level-story-stage{width:min(100%,var(--max));display:block;margin:auto}
.story-stack{position:relative}
.story-step{
  position:sticky;
  /* the floating header pill bottoms out ~42px below --header-h (24px of header
     padding plus the taller scrolled pill), so park the cards clear of it or
     they tuck under the nav with no breathing room */
  /* each card parks 14px lower than the one behind it, so the incoming card
     covers its predecessor completely while leaving a thin edge showing */
  top:calc(var(--header-h) + 64px + var(--stack-index) * 14px);
  z-index:calc(2 + var(--stack-index));
  min-height:0;
  margin:0 0 clamp(87.36px,10.332vh,101.02px);
  padding:0;
  display:block;
  opacity:1;
  /* NOTE: the last card gets margin-bottom:0 below - its trailing margin used to
     stack on the section padding and blow the gap to the showreel out to 373px */
  transform:none;
  border:0;
}
.story-stack .story-step:last-child{margin-bottom:0}
.story-stack-card{
  position:relative;
  top:auto;
  height:auto;
  /* every card in the stack must clear the tallest natural card, otherwise a
     shorter one pins on top and the card behind pokes out under it */
  min-height:clamp(680px,72vh,800px);
  overflow:clip;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
  border-radius:16px;
  background:var(--story-surface);
  box-shadow:0 8px 8px rgb(25 23 28 / .1);
}
.story-step--entry{--story-surface:#f1f1f3}
.story-step--growth{--story-surface:#e4f7ff}
.story-step--scale{--story-surface:#eee8fb}
.story-step--elite{--story-surface:#fbffd5}
.story-stack-card::before{display:none}
.story-card-copy{
  min-width:0;
  padding:clamp(42px,4.25vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.story-card-level{
  width:max-content;
  margin-bottom:24px;
  padding:7px 11px;
  border-radius:999px;
  background:color-mix(in srgb,var(--story-surface) 65%,white);
  color:var(--ink);
  font-size:13px;
  font-weight:750;
}
.story-card-level b{margin-right:7px;color:color-mix(in srgb,var(--ink) 52%,transparent)}
.story-card-copy h3{max-width:560px;color:var(--ink);font-size:clamp(2.5rem,3.6vw,4.15rem)}
.story-card-copy>p{margin-top:22px;color:var(--muted);font-size:17px;line-height:1.52}
.story-card-copy ul{margin:24px 0 0;padding:0;list-style:none}
.story-card-copy li{padding:10px 0;border-bottom:1px solid rgb(25 23 28 / .12);font-size:14px}
.story-card-copy .story-link{margin-top:22px}
.story-stack .story-visual{
  position:relative;
  inset:auto;
  width:auto;
  height:auto;
  min-height:0;
  margin:0;
  border-radius:0;
  opacity:1;
  transform:none;
  box-shadow:none;
  border:0;
  pointer-events:auto;
}
.story-stack .story-visual--entry::after,
.story-stack .story-visual--scale::after,
.story-stack .story-visual--elite::after{display:none}
.story-stack .story-visual--entry video,
.story-stack .story-visual--scale>img{width:100%;height:100%;object-fit:cover}
.story-stack .story-visual--growth{background:#d8f3ff}
.story-stack .story-visual--elite{padding:0;background:#151218}
.story-stack .story-visual--elite>img{width:100%;height:100%;object-fit:cover}
.story-stack .story-visual--elite>img{object-position:60% center}
.story-stack .story-visual--elite .portfolio-ui{position:relative;width:100%;height:100%;border-radius:12px}
.story-stack .story-visual-caption{z-index:3}
.story-promise{margin-top:40px}

/* Pricing is intentionally paused for launch. Restore by removing this rule. */
.pricing-section,
.place-pricing{display:none}

.footer-newsletter .form-status.is-error{color:#ffb5ae}
.footer-newsletter .form-status.is-success{color:var(--signal-yellow)}
.footer-newsletter .newsletter-line button:disabled{opacity:.62;cursor:wait}

@media(max-width:1050px), (max-height:740px){
  .level-story{padding:71.76px 32px 74.88px}
  .level-story-intro{padding:0;margin-bottom:48px}
  .story-step,.story-step--elite{position:relative;top:auto;min-height:0;margin-bottom:18px}
  .story-stack-card{
    position:relative;
    top:auto;
    height:auto;
    min-height:620px;
    grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);
  }
}

@media(max-width:720px){
  .portfolio-ui--hero{padding:17px 14px 67.86px;gap:10px}
  .portfolio-ui--hero .portfolio-ui-bar{font-size:11px}
  .portfolio-ui--hero .portfolio-ui-metrics>b{padding:10px;font-size:15px}
  .portfolio-ui--hero .portfolio-ui-properties>span{grid-template-columns:38px minmax(0,1fr) auto}
  .portfolio-ui--hero .portfolio-thumb{width:38px}
  .level-story{padding:59.16px 20px 67.86px}
  .level-story-intro{padding:0;margin-bottom:32px}
  .story-stack-card{display:flex;min-height:0;flex-direction:column;border-radius:14px}
  .story-card-copy{padding:44px 24px 30px}
  .story-card-level{margin-bottom:20px}
  .story-card-copy h3{font-size:clamp(2.35rem,10vw,3.2rem)}
  .story-card-copy>p{margin-top:17px;font-size:16px}
  .story-card-copy ul{margin-top:18px}
  .story-stack .story-visual{
    height:clamp(330px,88vw,430px);
    flex:0 0 auto;
    border-inline-start:0;
    border-top:1px solid rgb(25 23 28 / .18);
  }
  .story-step--scale .story-visual{border-top-color:rgb(255 255 255 / .22)}
  .story-stack .story-visual--growth{height:400px}
  .story-stack .story-visual--elite{height:500px;padding:0}
  .story-stack .story-visual--elite .portfolio-ui{padding:16px 14px 81.12px}
  .story-stack .story-visual--elite .portfolio-ui-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .story-stack .story-visual--elite .portfolio-ui-metrics>b:last-child{display:none}
  .story-promise{margin-top:36px}
}

@media(prefers-reduced-motion:reduce){
  .story-step,.story-step--elite{position:relative;top:auto;min-height:0;margin-bottom:18px}
  .story-stack-card{position:relative;top:auto;height:auto;min-height:600px}
  .portfolio-ui-flow i::after{transform:scaleX(1)}
}

/* ------------------------------------------------------------------
   Drawn arrows.
   Never type an arrow character into the markup or into CSS `content`.
   U+2192 and friends are glyphs, so every operating system draws its own
   (Apple renders them at emoji weight, in its own colour), which is why the
   site read as stock iOS. These are drawn once, inherit currentColor, and
   look identical on every platform.
   ------------------------------------------------------------------ */
.ds-arrow{
  display:inline-block;
  width:.92em;
  height:.92em;
  flex:none;
  vertical-align:-.1em;
  overflow:visible;
  /* the shafts are gently bowed rather than ruler-straight, to sit with the
     hand-drawn brand marks instead of looking like a system icon set */
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.ds-arrow--lead{margin-right:.15em}
.ds-arrow--trail{margin-left:.12em}

/* pseudo-element arrows: masked so they still inherit colour and can animate */
.ds-mask{
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  background:currentColor;
}

/* ---------- newsletter signup confirmation ----------
   One driver: the .is-subscribed class on the form. Everything below derives
   its timing from that single flip so the sweep, the tick and the copy land as
   one gesture rather than three unrelated fades.
   Failure mode to avoid: the row visibly re-flowing when the label swaps to a
   tick — the button keeps its resting min-width so nothing jumps. */
.newsletter-line{position:relative;overflow:hidden}
.newsletter-line::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  transform:scaleX(0);
  transform-origin:left center;
  background:var(--signal-yellow);
  opacity:.16;
  pointer-events:none;
}
.newsletter-form.is-subscribed .newsletter-line::after{
  animation:ns-sweep 620ms cubic-bezier(.22,.8,.24,1) forwards;
}
@keyframes ns-sweep{
  0%  {transform:scaleX(0);opacity:.30}
  60% {transform:scaleX(1);opacity:.30}
  100%{transform:scaleX(1);opacity:0}
}

.newsletter-form.is-subscribed .newsletter-line input{
  opacity:0;
  transition:opacity 220ms ease 60ms;
}

.ns-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px}
.ns-tick svg{width:100%;height:100%;overflow:visible}
.ns-tick path{
  fill:none;
  stroke:currentColor;
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:32;
  stroke-dashoffset:32;
  animation:ns-draw 380ms cubic-bezier(.65,0,.35,1) 300ms forwards;
}
@keyframes ns-draw{to{stroke-dashoffset:0}}

/* The sweep is a wash behind the controls, never over them. */
.newsletter-line input,
.newsletter-line button{position:relative;z-index:1}

/* The .6 disabled dim is the "Subscribing…" wait cue and should stay for that.
   Once confirmed the button is disabled for behaviour only, so it holds full
   brand colour — otherwise the yellow reads as a dead olive. */
.newsletter-form.is-subscribed .newsletter-line button:disabled{opacity:1;cursor:default}
.newsletter-form.is-subscribed .newsletter-line button{
  background:var(--signal-yellow);
  color:var(--ink);
  animation:ns-settle 520ms cubic-bezier(.22,.8,.24,1) 240ms both;
}
@keyframes ns-settle{
  0%  {transform:scale(1)}
  38% {transform:scale(1.045)}
  100%{transform:scale(1)}
}

.newsletter-form.is-subscribed .form-status{
  animation:ns-rise 320ms cubic-bezier(.22,.8,.24,1) 420ms both;
}
@keyframes ns-rise{
  from{opacity:0;transform:translateY(7px)}
  to  {opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .newsletter-form.is-subscribed .newsletter-line::after,
  .newsletter-form.is-subscribed .newsletter-line button,
  .newsletter-form.is-subscribed .form-status,
  .ns-tick path{animation:none}
  .ns-tick path{stroke-dashoffset:0}
  .newsletter-form.is-subscribed .newsletter-line input{transition:none}
}

/* High-visibility in-page CTAs: these were previously easy to mistake for body links. */
.story-link,
.place-text-link{
  display:inline-flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:15px 26px;
  border-radius:999px;
  background:rgba(124, 58, 237, 0.08);
  color:var(--navy);
  border:1.5px solid rgba(124, 58, 237, 0.24);
  font-size:16px;
  font-weight:750;
  line-height:1.1;
  text-decoration:none;
  transition:transform .4s var(--ease),background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease);
}
.story-link:hover,
.place-text-link:hover{
  background:rgba(124, 58, 237, 0.16);
  color:var(--navy-2);
  border-color:var(--teal);
  transform:translateY(-1px);
}
.story-link .ds-arrow,
.place-text-link .ds-arrow{width:16px;height:16px}

@media(max-width:720px){
  .place-hero-actions{align-items:stretch}
  .place-hero-actions>.btn,
  .place-hero-actions>.place-text-link{width:100%}
  .story-link{width:100%;min-height:62px}
}

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

/* ---- WhatsApp contact button ---- */
/* Desktop: a pill in the header row, where it has always lived.
   Phone/tablet: that row cannot carry brand + WhatsApp + CTA + menu inside
   350px (the hamburger shipped 31px off-screen), and a thumb reaches the
   bottom-right corner far more easily than the top bar, so it floats instead.
   The button is ONE node that js/site.js moves between the header and the body
   at the breakpoint - it cannot simply be positioned out of the header,
   because .nav-shell sets both a transform and a backdrop-filter and either
   one makes it the containing block for a position:fixed descendant. */
.nav-wa{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-right:10px;
  border-radius:50%;
  background:var(--ink);
  color:var(--white);
  text-decoration:none;
  transition:transform .6s var(--jitter-card),background-color .3s var(--jitter-soft),color .3s var(--jitter-soft);
}
.nav-wa svg{width:24px;height:24px;fill:currentColor}
.nav-wa:hover{background:#25d366;color:var(--white);transform:scale(1.05)}
.nav-wa:active{transform:scale(.9);transition-duration:.1s}
.nav-wa:focus-visible{outline:2px solid var(--signal-blue);outline-offset:3px}
body[data-theme="navy"] .nav-wa{background:var(--cloud);color:var(--navy)}
body[data-theme="navy"] .nav-wa:hover{background:#25d366;color:var(--white)}
.site-header.header-compact .nav-wa{transform:translateX(-67px)}
.site-header.header-compact .nav-wa:hover{transform:translateX(-67px) scale(1.05)}

@media(max-width:1050px){
  .nav-wa{
    position:fixed;
    z-index:calc(var(--z-header) + 1);
    right:16px;
    bottom:16px;
    width:56px;
    height:56px;
    margin:0 0 env(safe-area-inset-bottom,0px);
    background:#25d366;
    color:var(--white);
    box-shadow:0 8px 22px rgb(9 22 14 / .3);
    transition:transform .45s var(--jitter-card),background-color .3s var(--jitter-soft);
  }
  .nav-wa svg{width:29px;height:29px}
  .nav-wa:hover{background:#1fbe5a}
  body[data-theme="navy"] .nav-wa{background:#25d366;color:var(--white)}
  /* a corner-anchored button must not ride the compact-header slide */
  .site-header.header-compact .nav-wa,
  .site-header.header-compact .nav-wa:hover{transform:none}
  /* the button is already on the page, so the duplicate in the menu is noise */
  .mobile-menu-wa{display:none}
}

.mobile-menu-wa{
  display:flex;
  flex:1;
  align-items:center;
  gap:12px;
  justify-content:center;
  min-height:58px;
  padding:0 12px;
  border:0;
  border-radius:999px;
  background:#25d366;
  color:var(--white);
  font-family:var(--sans);
  font-size:15px;
  font-weight:700;
  text-decoration:none;
}
.mobile-menu-wa svg{width:20px;height:20px;flex:none;fill:currentColor}

/* the button no longer lives in the header, so the compact-header slide and
   the small-screen hide that used to apply to it are gone: a corner-anchored
   contact button should stay put and stay reachable at every width */
@media(prefers-reduced-motion:reduce){
  .nav-wa{transition:none}
  .nav-wa:hover,.nav-wa:active{transform:none}
}

/* ============================================================
   Example-site hover morph
   Hovering the "Example site" nav link dissolves the page beneath
   the header into the locally hosted example, opening out of the
   link itself. ONE driver (--m, 0..1, lerped in js/site.js);
   every channel below is a formula off it.
   The header never blurs and never scales: it stays at its own
   depth above the morph, and that depth gap is the effect.
   ============================================================ */
.ex-morph{
  position:fixed;
  inset:0;
  z-index:90;                 /* under --z-header (100), over content */
  pointer-events:none;        /* must not swallow the pointer, or leave never fires */
  opacity:0;
  visibility:hidden;
  contain:strict;
}
.ex-morph.is-live{visibility:visible;opacity:1}

/* (a) the page beneath desaturates and softens as it gives way */
.ex-morph__scrim{
  position:absolute;
  inset:0;
  background:rgba(255,255,255,calc(var(--m) * .16));
  backdrop-filter:saturate(calc(1 - var(--m) * .88)) blur(calc(var(--m) * 9px));
  -webkit-backdrop-filter:saturate(calc(1 - var(--m) * .88)) blur(calc(var(--m) * 9px));
}

/* (b)(c)(d) the demo resolves in, settling down out of a slight lift,
   clipped open from the link's own rectangle (rect vars set in JS) */
.ex-morph__frame{
  position:absolute;
  /* The demo carries its own header. Pull the frame up by that header's height
     so it hides behind ours and the viewer only ever sees one navigation. */
  top:-66px;
  left:0;
  width:100%;
  height:calc(100% + 66px);
  border:0;
  opacity:var(--frame-o,0);
  transform:translateY(calc((1 - var(--m)) * 18px)) scale(calc(1.055 - var(--m) * .055));
  transform-origin:50% 42%;
  clip-path:inset(
    var(--clip-t,0px) var(--clip-r,0px) var(--clip-b,0px) var(--clip-l,0px)
    round calc(var(--clip-radius,0px))
  );
  box-shadow:0 40px 120px rgba(12,14,32,calc(var(--m) * .28));
}

/* (e) the link sits closest to the viewer, so it answers AHEAD of the
   scene (m^0.62, not m). Same driver, different rate. */
.nav-example-link.is-morphing{
  transform:translateY(calc(var(--m-lead,0) * -2px));
  color:var(--ink);
}
.nav-example-link{position:relative}

@media(prefers-reduced-motion:reduce){
  .ex-morph__frame{
    transform:none;
    clip-path:none;
    transition:opacity .16s linear;
  }
  .ex-morph__scrim{backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav-example-link.is-morphing{transform:none}
}

/* ---------- ANIM-06 footer coin flick ----------
   The approved badge stays a static image. The coin is a separate SVG layer
   sized to the MEASURED img box (the grid cell is wider than the badge, so
   inset:0 on the cell would desync the coin from the three img breakpoints).
   overflow:visible is load-bearing: the arc peaks above the badge circle. */
.footer-mark,.footer-motion{position:relative;overflow:visible}
.footer-mark img,.footer-motion img{will-change:transform}
.coin-layer{
  position:absolute;
  left:50%;
  top:50%;
  margin:0;
  overflow:visible;
  pointer-events:none;
  transform:translate(-50%,-50%);
}
.coin-layer text{
  font-family:var(--sans);
  font-weight:800;
  fill:#4C1D95;
  text-anchor:middle;
  dominant-baseline:central;
}
.footer-mark.is-coin-ready{cursor:pointer}

/* Compact mobile footer.
   The full-height newsletter stage and the 44px-per-row directory were adding
   the best part of two screens of footer on a phone. Below 720px the columns
   become wrapping chips and the newsletter drops to the same quiet weight as
   the copyright line, so the footer reads as a footer rather than a section.
   Every link stays in the DOM: this is a density change, not a cull. */
@media(max-width:720px){
  .footer-directory{padding:40px 20px 26px;border-radius:0 0 20px 20px}
  .footer-directory-grid{grid-template-columns:1fr;gap:26px}
  .footer-directory-brand{grid-column:1;gap:10px}
  .footer-directory-brand img{width:46px;height:46px}
  .footer-directory-brand>span{font-size:23px}

  .footer-column{display:flex;flex-flow:row wrap;align-items:flex-start;gap:8px}
  .footer-column h3{width:100%;margin-bottom:5px;font-size:14px;letter-spacing:.02em;opacity:.68}
  .footer-column--places{display:flex;flex-flow:row wrap;grid-column:1;grid-template-columns:none}
  .footer-column--places h3{grid-column:auto}
  /* 44px, not 36. This is a tap target, and 36 fails the 44 minimum on every
     platform guideline there is. The type comes up with it - 13px chips read
     as fine print next to the 17px newsletter heading beside them. */
  .footer-column a{
    min-height:44px;
    padding:0 15px;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(16,37,60,.12);
    border-radius:999px;
    font-size:15px;
    line-height:1;
    white-space:nowrap;
    overflow-wrap:normal;
  }
  .footer-column a .ds-arrow{display:none}

  .footer-directory-bottom{margin-top:28px;gap:10px;font-size:13px}

  .footer-newsletter-stage{
    min-height:0;
    padding:26px 20px max(26px,env(safe-area-inset-bottom));
    grid-template-columns:1fr;
    gap:14px;
    align-content:start;
  }
  /* Coin stays present (Reuben likes it live on every page) but shrinks hard
     so it doesn't reintroduce the "two screens of footer" problem this block
     was written to fix. justify-self:start keeps it left-aligned with the
     heading instead of the old centred desktop placement. */
  .footer-mark{justify-self:start}
  .footer-mark img,.footer-motion img{width:76px}
  .footer-newsletter h2{
    max-width:none;
    font-size:20px;
    font-weight:700;
    letter-spacing:-.01em;
    line-height:1.3;
  }
  .footer-newsletter .newsletter-form{margin-top:14px}
  .footer-newsletter .newsletter-line{gap:8px}
  .footer-newsletter .newsletter-line input{min-height:48px}
  .footer-newsletter .newsletter-line button{min-height:48px}
  .footer-newsletter .form-status,
  .footer-newsletter .form-privacy{font-size:13px}
}

@media(max-width:360px){
  .footer-column a{font-size:14px;padding:0 12px}
}

/* The Build and Talk columns are BACK on a phone, and this is load-bearing.
   They used to be hidden here because the mobile menu carried the same links.
   The menu has since been cut back to the four destinations the desktop header
   carries, so hiding these columns would leave Website + Google, Booking
   automation, Complete booking package, Answers, About and Contact with no
   mobile route at all. The menu is for choosing, the footer is the directory. */
@media(max-width:720px){
  .footer-directory-grid{gap:24px}
}

/* The menu now carries the links the footer used to. The panel already scrolls
   (.mobile-menu is overflow:auto), so the only thing missing was clearance for
   the home indicator under the last row. A nested scroller on the inner fights
   the panel's own and strands the last link, so do not add one. */
@media(max-width:900px){
  .mobile-menu{padding-bottom:max(24px,env(safe-area-inset-bottom))}
  .mobile-menu-inner{min-height:0}
}


/* ---------- keep-running: the phone-only build routes ----------
   Hidden on desktop by default, not shown by a max-width query, so a new
   breakpoint added above 720 cannot accidentally reveal it. */
.keep-running__build{display:none}

@media(max-width:720px){
  .keep-running__build{
    display:grid;
    gap:10px;
    width:100%;
    max-width:420px;
    margin:22px auto 0;
  }
  .keep-running__build-label{
    margin:0 0 2px;
    font-size:14px;
    letter-spacing:.02em;
    opacity:.66;
    text-align:center;
  }
  /* Full width and 52px tall: these sit directly under a btn-large, and three
     shrink-to-fit pills under one full-width button reads as an afterthought
     rather than a second choice. */
  .keep-running__build .btn{
    width:100%;
    min-height:52px;
    justify-content:center;
  }
}