/* Committed to one light look on purpose: white and light gray sections, with only the hero and footer dark. Layout concept: one dark hero whose phone and floating points spill over the edge into a mostly light page. Slanted bands, staggered cards, a photo that bleeds off the left edge, and a call-to-action card that straddles a coral band keep the eye moving downward. Sibling to studio490.com: coral, near-black, white, plus amber as a supporting accent. */
:root{
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.3,1.6,.5,1);
  --ease-io:cubic-bezier(.65,0,.25,1);
  --t-fast:.2s;
  --t-base:.3s;
  --t-slow:.7s;
  --font-display:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Nunito Sans','Helvetica Neue',Arial,sans-serif;
  --ink:#15151F;
  --coral:#E73D49; /* brand coral: bands, shapes, logo, accents */
  --coral-btn:#D61B28; /* deeper fill so white button text passes 4.5:1 */
  --coral-hover:#B21621;
  --amber:#F4A62A;
  --bg:#FFFFFF;
  --bg-alt:#F4F4F6;
  --card:#FFFFFF;
  --fg:#15151F;
  --muted:#55556A;
  --line:#E2E2E8;
  --accent-text:#C01824; /* coral for text on white or gray */
  --kicker:#C01824;
  --hero-bg:#15151F;
  --hero-fg:#FFFFFF;
  --hero-muted:#C6C6D2;
  --hero-line:rgba(255,255,255,.16);
  color-scheme:light;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .065 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .05 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{font-size:calc(100% * var(--fs,1));scroll-behavior:smooth;scroll-padding-top:96px}
body{background-color:var(--bg);background-image:var(--grain);color:var(--fg);font-family:var(--font-body);font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3{font-family:var(--font-display);line-height:1.12;margin:0;text-wrap:balance;letter-spacing:-.01em}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
a{color:inherit}
:focus-visible{outline:3px solid #1547C2;outline-offset:3px;border-radius:4px}
.hero :focus-visible,.ftr :focus-visible,.close :focus-visible,.hdr:not(.scrolled) :focus-visible,.fab-a11y:focus-visible{outline-color:#fff;box-shadow:0 0 0 6px #15151F}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#15151F;padding:10px 14px;z-index:50}
.skip:focus{left:8px;top:8px}
.wrap{max-width:1160px;margin-inline:auto;padding-inline:20px}
.sec{overflow-x:clip;padding-block:116px;position:relative;z-index:var(--z,1)}
@media (max-width:700px){.sec{padding-block:76px}}
.sec.alt{--sl:44px;isolation:isolate;margin-block:calc(var(--sl) * -1);padding-block:calc(116px + var(--sl))}
.sec.alt::before{content:"";position:absolute;inset:0;z-index:-1;background-color:var(--bg-alt);background-image:var(--grain);clip-path:polygon(0 var(--sl),100% 0,100% calc(100% - var(--sl)),0 100%)}
@media (max-width:700px){.sec.alt{--sl:22px;padding-block:calc(76px + var(--sl))}}
.kicker{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--kicker);margin-bottom:14px}
h2{font-size:clamp(1.8rem,3.6vw,2.7rem);font-weight:800}
.lede{color:var(--muted);max-width:62ch;margin-top:16px;font-size:1.08rem}
/* Section intros span the full content width so they line up with the cards below (Tj, 10/7) */
.sec .wrap>.reveal>.lede{max-width:none}
/* Section headings fill the line too (pretty only avoids a one-word last line), instead of balancing into two short lines */
.sec .wrap>.reveal>h2,.sec .wrap>.top>.reveal>h2{text-wrap:pretty}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:.95rem;padding:14px 28px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out);cursor:pointer;text-align:center}
.btn-coral{background:var(--coral-btn);color:#fff}
.btn-coral:hover{transform:translateY(-2px)}
.btn-amber{border-color:var(--amber);color:var(--amber)}
.btn-amber:hover{color:#15151F;transform:translateY(-2px)}
.btn-ghost{border-color:var(--fg);color:var(--fg)}
.btn-ghost:hover{color:var(--bg);transform:translateY(-2px)}
.reveal{translate:0 30px;transition:translate .8s var(--ease-out) var(--d,0s)}
.reveal.in{translate:0 0}

.topbar{background:var(--bg-alt);color:var(--muted);font-size:.82rem;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;justify-content:center;gap:6px;padding-block:8px;text-align:center;flex-wrap:wrap}
.topbar a{color:var(--accent-text);font-weight:700}
.hdr{position:sticky;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:20;height:76px;margin-bottom:-76px;padding-inline:16px;color:#fff;transition:color var(--t-base) var(--ease-out)}
.hdr .bar{max-width:1160px;margin:6px auto 0;height:64px;padding:0 12px 0 26px;display:flex;align-items:center;justify-content:space-between;gap:16px;border-radius:999px;background:rgba(255,255,255,0);box-shadow:0 0 0 rgba(0,0,0,0);transition:background var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),max-width var(--t-base) var(--ease-out)}
.hdr.scrolled{color:var(--fg)}
.hdr.scrolled .bar{background:rgba(255,255,255,.95);box-shadow:0 12px 34px rgba(0,0,0,.18),0 0 0 1px rgba(21,21,31,.06);max-width:1080px}
@supports (backdrop-filter:blur(8px)){.hdr.scrolled .bar{background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}}
.hdr:not(.scrolled) .logo b{color:var(--coral-btn)}
.hdr:not(.scrolled) .logo small{color:rgba(255,255,255,.75)}
.logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;text-decoration:none;letter-spacing:-.02em}
.logo b{color:var(--coral-btn)} /* one red for the logo and buttons (Tj, 10/6) */
.logo small{font-weight:600;font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin-left:8px;text-transform:uppercase}
.nav{display:flex;align-items:center;gap:26px}
.nav a.l{font-family:var(--font-display);font-weight:600;font-size:.88rem;text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-block:4px;transition:background-size var(--t-base) var(--ease-out)}
.nav a.l:hover{background-size:100% 2px}
.nav .btn{padding:10px 20px;font-size:.85rem}
.nav a{white-space:nowrap}
/* Five header links plus the full logo need about 1,180px; below that the "by Studio490" tag hides (10/9) */
@media (max-width:1180px){.logo small{display:none}}
@media (max-width:1060px){.nav{gap:20px}}
@media (max-width:1020px){.nav a.l{display:none}}
.logo{white-space:nowrap;line-height:1}
.burger{display:none;flex:none;width:44px;height:44px;border-radius:50%;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer;padding:0;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform var(--t-base) var(--ease-out),opacity var(--t-fast) var(--ease-out)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:1020px){.burger{display:inline-flex}.nav{gap:10px}}
.mnav{position:absolute;left:16px;right:16px;top:78px;max-width:520px;margin-left:auto;background:#fff;color:var(--fg);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.3),0 0 0 1px rgba(21,21,31,.06);padding:10px;display:grid;gap:2px;max-height:calc(100dvh - 120px);overflow:auto;animation:pop .2s ease both}
.mnav a.ml{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:10px 16px;border-radius:14px;font:700 1rem var(--font-display);text-decoration:none;color:var(--fg)}
.mnav a.ml::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg);opacity:.45}
.mnav a.ml:hover,.mnav a.ml[aria-current="page"]{background:var(--bg-alt)}
.mnav a.ml[aria-current="page"]{color:var(--accent-text)}
.mnav .btn{margin:8px 6px 6px}
.hdr .mnav :focus-visible{outline-color:#1547C2;box-shadow:none}
@media (min-width:1021px){.mnav{display:none!important}}
@media (max-width:520px){.hdr .bar{padding:0 8px 0 18px;gap:8px}.logo{font-size:1.17rem}.nav .btn{padding:9px 14px;font-size:.78rem}}
@media (max-width:480px){.nav .btn{display:none}}

.hero{background-color:var(--hero-bg);background-image:var(--grain-l);color:var(--hero-fg);position:relative;z-index:12}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:56px;background-color:var(--bg-alt);background-image:var(--grain);clip-path:polygon(0 100%,100% 0,100% 100%);z-index:1;pointer-events:none}
@media (max-width:700px){.hero::after{height:28px}}
.hero .wrap{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr);gap:56px;align-items:center;padding-block:132px 72px}
@media (min-width:1000px){.hero .wrap>div:first-child{padding-left:32px}.hero .stage{margin-top:96px;margin-right:-64px}}
@media (max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:130px 56px}}
.hero .kicker{color:var(--amber)}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.1rem);font-weight:800}
.hero h1 span{display:block;color:var(--amber)}
.hero .sub{color:var(--hero-muted);font-size:1.12rem;max-width:52ch;margin-top:22px}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .proof{margin-top:26px;font-size:.9rem;color:var(--hero-muted)}
.hero .proof strong{color:#fff}

.stage{position:relative;z-index:2;padding:10px 0 46px;transform:translate3d(0,var(--py,0px),0);will-change:transform}
.browser{background:#fff;border-radius:12px;box-shadow:0 26px 60px rgba(0,0,0,.5);overflow:hidden}
.b-bar{display:flex;align-items:center;gap:6px;background:#ECECF0;padding:9px 12px}
.b-bar i{width:9px;height:9px;border-radius:50%;background:#C9C9D2;display:block}
.b-bar span{margin-left:10px;background:#fff;color:#6A6A7A;font:600 11px var(--font-display);padding:3px 12px;border-radius:999px}
.b-body{padding:16px;display:grid;gap:14px}
.m-nav{display:flex;align-items:center;gap:9px}
.m-nav b{width:64px;height:12px;background:#E73D49;border-radius:3px}
.m-nav em{width:34px;height:6px;background:#D9D9E0;border-radius:3px}
.m-nav u{margin-left:auto;width:48px;height:16px;background:#15151F;border-radius:3px}
.m-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:14px;align-items:center}
.m-copy{display:grid;gap:8px}
.m-copy s{display:block;height:14px;background:#15151F;border-radius:3px}
.m-copy s.w80{width:88%}.m-copy s.w60{width:64%}
.m-copy p{height:6px;background:#D9D9E0;border-radius:3px;width:92%}
.m-copy p+p{width:74%}
.m-btn{display:block;width:76px;height:20px;background:#E73D49;border-radius:4px;margin-top:4px}
.m-img{aspect-ratio:4/3;background:#F4A62A;border-radius:8px;position:relative;overflow:hidden}
.m-img::before{content:"";position:absolute;width:56%;aspect-ratio:1;border-radius:50%;background:#15151F;right:-10%;bottom:-18%}
.m-img::after{content:"";position:absolute;width:26%;aspect-ratio:1;border-radius:50%;background:#fff;left:14%;top:16%}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.m-cards div{height:58px;background:#F4F4F6;border-radius:6px;padding:9px}
.m-cards div::before{content:"";display:block;width:26px;height:5px;background:#E73D49;border-radius:3px;margin-bottom:7px}
.m-cards div::after{content:"";display:block;width:80%;height:5px;background:#D9D9E0;border-radius:3px}
.phone{position:absolute;right:-4px;bottom:-150px;width:150px;aspect-ratio:9/18.5;background:#fff;border:4px solid #3A3A4C;border-radius:22px;box-shadow:0 18px 40px rgba(0,0,0,.5);padding:12px 9px;display:grid;gap:7px;align-content:start;overflow:hidden}
.phone i{display:block;height:7px;background:#D9D9E0;border-radius:3px}
.phone i:first-child{width:46%;background:#E73D49}
.phone .pi{aspect-ratio:1.5;background:#F4A62A;border-radius:6px}
.phone .pb{height:14px;width:60%;background:#15151F;border-radius:4px}
.chip{position:absolute;background:#fff;color:#15151F;font:700 .8rem var(--font-display);padding:9px 15px;border-radius:999px;box-shadow:0 10px 26px rgba(0,0,0,.35);display:flex;align-items:center;gap:8px;white-space:nowrap}
.chip::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:#F4A62A;display:block}
.chip.c1{top:-8px;right:4%}
.chip.c2{bottom:30px;left:5%}
.chip.c3{top:36%;left:-30px}
.chip.c4{bottom:-24px;left:24%}
@keyframes rise{from{opacity:0;transform:translateY(16px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.a1{animation:rise .6s .45s both}.a2{animation:rise .6s .5s both}.a3{animation:rise .7s .8s both}.a4{animation:rise .6s 1.1s both}
.a5{animation:rise .7s 1.3s both,bob 6s 2s ease-in-out infinite}
.a6{animation:rise .6s 1.6s both,bob 5s 2.2s ease-in-out infinite}
.a7{animation:rise .6s 1.9s both,bob 7s 2.6s ease-in-out infinite}
.a8{animation:rise .6s 2.2s both,bob 6s 2.9s ease-in-out infinite}
.a9{animation:rise .6s 2.5s both,bob 5.5s 3.2s ease-in-out infinite}
@media (max-width:520px){
  .phone{width:96px;right:0;bottom:-90px}
  .chip{font-size:.72rem;padding:7px 12px;white-space:normal;max-width:176px}
  .chip.c2{left:0;bottom:38px}
  .chip.c3{left:-6px}
  .chip.c4{display:none}
  .m-hero{grid-template-columns:1fr}
  .m-img{display:none}
}

.prob{padding-top:132px;padding-bottom:calc(112px + var(--sl))}
@media (max-width:700px){.prob{padding-top:132px;padding-bottom:calc(76px + var(--sl))}}
.problem-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:860px){.problem-grid{grid-template-columns:minmax(0,1fr);gap:32px}}
.qs{display:grid;gap:14px}
.q{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out);box-shadow:0 10px 28px rgba(0,0,0,.06)}
.q:hover{transform:translateX(6px);border-color:var(--coral)}
.q h3{font-size:1.15rem;font-weight:700}
.q p{color:var(--muted);margin-top:6px;font-size:.98rem}
.after{margin-top:34px;font-family:var(--font-display);font-weight:700;font-size:1.15rem}

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:44px;align-items:stretch}
@media (max-width:860px){.steps{grid-template-columns:minmax(0,1fr)}}
.step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:32px 28px;height:100%;box-shadow:0 12px 30px rgba(0,0,0,.07);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.step:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.step svg{width:46px;height:46px;stroke:var(--accent-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease-out)}
.step:hover svg{transform:rotate(-8deg) scale(1.08)}
.step h3{font-size:1.6rem;font-weight:800;margin:18px 0 8px}
.step p{color:var(--muted)}
.more{margin-top:18px}
.more a{font-family:var(--font-display);font-weight:700;color:var(--accent-text);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px}

#gallery .top,#reviews .top,#examples .top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px}
.pausebtn{font:700 .8rem var(--font-display);border:2px solid var(--fg);color:var(--fg);background:transparent;border-radius:999px;padding:8px 18px;cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.pausebtn:hover{background:var(--fg);color:var(--bg)}
.car{margin-top:40px;overflow:hidden;padding-block:26px 48px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.track{display:flex;gap:32px;width:max-content;animation:marq 70s linear infinite}
.car.rev .track{gap:28px;animation-duration:95s;animation-direction:reverse;align-items:stretch}
.car:hover .track,.car.paused .track,.car:focus-within .track{animation-play-state:paused}
@keyframes marq{to{transform:translateX(calc(-50% - 16px))}}
.car.rev .track{--x:-14px}
.slide{flex:none;width:min(78vw,410px)}
.rv{flex:none;width:min(84vw,410px);background:var(--card);border:1px solid var(--line);border-radius:22px;padding:30px 30px 26px;box-shadow:0 14px 34px rgba(0,0,0,.07);display:flex;flex-direction:column;position:relative}
.rv::before{content:"\201C";font:800 4.2rem/1 var(--font-display);color:var(--coral);height:34px;display:block;margin-bottom:6px}
.rv p{font-size:1rem;color:var(--fg)}
.rv footer{margin-top:auto;padding-top:20px;font-size:.88rem;color:var(--muted)}
.rv footer b{display:block;font-family:var(--font-display);color:var(--fg);font-size:.98rem}
@media (prefers-reduced-motion: reduce){.car{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.track{animation:none}.dup{display:none}.pausebtn{display:none}}
.shot-wrap{display:block;text-decoration:none}
.shot.flip .ms-hero{direction:rtl}
.shot{aspect-ratio:16/11;border-radius:14px;overflow:hidden;background:var(--sa);border:1px solid var(--line);box-shadow:0 14px 34px rgba(0,0,0,.14);padding:14px;display:grid;grid-template-rows:auto 1fr auto;gap:12px;transition:transform .4s var(--ease-out),box-shadow .4s var(--ease-out)}
.shot-wrap:hover .shot{transform:translateY(-8px) scale(1.02);box-shadow:0 26px 50px rgba(0,0,0,.24)}
.ms-nav{display:flex;align-items:center;gap:8px}
.ms-nav b{width:52px;height:10px;background:var(--sb);border-radius:3px}
.ms-nav i{width:26px;height:5px;background:var(--st);opacity:.45;border-radius:3px}
.ms-nav u{margin-left:auto;width:38px;height:13px;background:var(--sb);border-radius:3px}
.ms-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:center}
.ms-t{display:grid;gap:7px}
.ms-t s{display:block;height:12px;background:var(--st);border-radius:3px;width:90%}
.ms-t s+s{width:62%}
.ms-t span{display:block;width:60px;height:16px;background:var(--sb);border-radius:4px;margin-top:3px}
.ms-i{aspect-ratio:1.2;background:var(--sb);border-radius:8px;position:relative;overflow:hidden}
.ms-i::before{content:"";position:absolute;width:60%;aspect-ratio:1;border-radius:50%;background:var(--st);opacity:.85;right:-12%;bottom:-24%}
.ms-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ms-row div{height:34px;background:var(--st);opacity:.12;border-radius:5px}
.cap{margin-top:14px;display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.cap strong{font-family:var(--font-display);font-size:1.02rem;color:var(--fg)}
.cap span{color:var(--muted);font-size:.86rem}
.note{margin-top:14px;color:var(--muted);font-size:.9rem}

.people{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:center}
@media (max-width:860px){.people{grid-template-columns:minmax(0,1fr);gap:48px}}
.pw{position:relative;margin-left:calc(-1 * (max(0px,(100vw - 1160px)/2) + 20px))}
.pw::before{content:"";position:absolute;inset:24px -24px -24px 24px;background:var(--coral);border-radius:0 18px 18px 0;z-index:0}
@media (max-width:860px){.pw{margin-inline:-20px}.pw::before{display:none}}
.photo{position:relative;z-index:1;aspect-ratio:4/5;max-height:580px;width:100%;border-radius:0 18px 18px 0;background:#E6E6EC;color:#55556A;display:grid;place-items:center;text-align:center;padding:24px;overflow:hidden}
.photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:860px){.photo{border-radius:0;aspect-ratio:4/3}}
.photo svg{width:44px;height:44px;stroke:var(--accent-text);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto 12px;display:block}
.photo small{display:block;font-size:.85rem;max-width:28ch;margin-inline:auto}
.badge{position:absolute;z-index:2;right:-30px;bottom:44px;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:14px;padding:16px 20px;box-shadow:0 20px 44px rgba(0,0,0,.22);max-width:330px}
.badge{background:var(--ink);color:#fff;border-color:var(--ink);max-width:none;width:min-content}
.badge b{display:block;font:800 1.4rem var(--font-display);color:#fff;line-height:1.1;white-space:nowrap}
.badge span{display:block;margin-top:8px;font-size:.86rem;color:#C6C6D2;line-height:1.45}
@media (max-width:860px){.badge{right:20px;bottom:-28px}.people>div:last-child{padding-top:24px}}
.people p.body{margin-top:18px;color:var(--muted);max-width:60ch}
.quote{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 26px;box-shadow:0 10px 28px rgba(0,0,0,.06)}
.quote p{font-size:1.08rem}
.quote footer{margin-top:14px;font-size:.9rem;color:var(--muted)}
.quote footer b{color:var(--fg);font-family:var(--font-display)}
.draft{display:inline-block;font:700 .68rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;background:#F4A62A;color:#15151F;padding:3px 8px;border-radius:4px;margin-bottom:12px}

.pk{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px;align-items:stretch}
.pk{position:relative;isolation:isolate}
.pk::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:44%;bottom:-140px;background-color:var(--coral);background-image:var(--grain-l);clip-path:polygon(0 56px,100% 0,100% 100%,0 100%)}
@media (max-width:760px){.pk::before{top:60%}}
@media (max-width:760px){.pk{grid-template-columns:minmax(0,1fr)}}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:34px 30px;height:100%;display:flex;flex-direction:column;box-shadow:0 22px 50px rgba(0,0,0,.18);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.pkg:hover{transform:translateY(-6px);box-shadow:0 22px 46px rgba(0,0,0,.16)}
.pkg.plus{border:2px solid var(--fg)}
.pkg h3{font-size:1.25rem;font-weight:700}
.price{font-family:var(--font-display);font-weight:800;font-size:3.1rem;letter-spacing:-.03em;margin-top:8px}
.pages{color:var(--muted);font-weight:600}
.pkg ul{margin:22px 0 28px;display:grid;gap:10px}
.pkg li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.pkg li::before{content:"";flex:none;width:6px;height:12px;border:solid var(--accent-text);border-width:0 2px 2px 0;transform:rotate(40deg);margin:4px 6px 0 2px}
.pkg .btn{margin-top:auto}
.host{margin-top:16px;color:var(--muted);max-width:60ch}

.deco{position:absolute;right:max(24px,calc((100vw - 1160px)/2 + 24px));bottom:-14px;width:150px;height:150px;pointer-events:none;z-index:3}
.deco i{position:absolute;border-radius:50%;display:block}
.deco i:first-child{animation:drift 8s ease-in-out infinite}
.deco i:last-child{animation:drift2 6s ease-in-out -2s infinite}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(8px,-18px) scale(1.05)}}
@keyframes drift2{0%,100%{transform:translate(0,0) rotate(0)}50%{transform:translate(-12px,16px) rotate(25deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}
.sh{position:absolute;display:none;pointer-events:none;z-index:3}
@media (min-width:1180px){.sh{display:block}}
.sh.amber{width:96px;height:96px;border-radius:50%;background:var(--amber);animation:drift 9s ease-in-out infinite}
.sh.ringc{width:110px;height:110px;border-radius:50%;border:9px solid var(--coral);animation:drift2 7s ease-in-out infinite}
.sh.half{width:110px;height:55px;border-radius:110px 110px 0 0;background:var(--coral);transform-origin:50% 100%;animation:spin 16s linear infinite}
.sh.ringa{width:84px;height:84px;border-radius:50%;border:8px solid var(--amber);animation:pulse 5s ease-in-out infinite}
.deco i:first-child{inset:0;background:var(--coral)}
.deco i:last-child{width:70px;height:70px;left:-46px;bottom:-24px;border:8px solid var(--amber)}
@media (max-width:860px){.deco{display:none}}
.inds{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
@media (max-width:1000px){.inds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.inds{grid-template-columns:minmax(0,1fr)}}
.ind{background:var(--bg-alt);border:1px solid var(--line);border-radius:18px;padding:28px 24px;height:100%;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.ind:hover{transform:translateY(-6px);border-color:var(--coral);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.ind svg{width:44px;height:44px;stroke:var(--accent-text);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform var(--t-base) var(--ease-out)}
.ind:hover svg{transform:rotate(-8deg) scale(1.1)}
.ind h3{font-size:1.1rem;font-weight:800;margin:16px 0 8px}
.ind p{color:var(--muted);font-size:.95rem}
.indnote{margin-top:32px;color:var(--muted)}
.indnote a{color:var(--accent-text);font-weight:700}
.four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
@media (max-width:760px){.four{grid-template-columns:minmax(0,1fr)}}
.f{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;height:100%;transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.f:hover{transform:translateY(-5px);border-color:var(--coral)}
.f h3{font-size:1.15rem;font-weight:700}
.f p{color:var(--muted);margin-top:8px;font-size:.98rem}

.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
@media (max-width:760px){.fit{grid-template-columns:minmax(0,1fr)}}
.fit .col{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;height:100%}
.fit h3{font-size:1.2rem;font-weight:700;margin-bottom:16px}
.fit li{display:flex;gap:12px;padding:8px 0;color:var(--muted)}
.fit li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--coral);margin-top:11px}
.fit .col.other li::before{background:var(--amber)}
.fit .btn{margin-top:18px}

.close{position:relative;z-index:8;background:var(--grain),linear-gradient(176deg,var(--bg-alt) 0,var(--bg-alt) 42%,var(--coral) 42%,var(--coral) 100%);padding-block:20px 84px;text-align:center}
.cc{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:56px 32px;box-shadow:0 30px 70px rgba(0,0,0,.24);max-width:860px;margin-inline:auto}
.cc h2{max-width:20ch;margin-inline:auto}
.cc .lede{margin-inline:auto}
.cc .cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.callline{margin-top:34px;color:#fff;font:700 1.2rem var(--font-display)}
@media (max-width:600px){.cc{padding:40px 20px}}

.ftr{background-color:var(--hero-bg);background-image:var(--grain-l);color:var(--hero-muted);font-size:.92rem}
.ftr .wrap{padding-block:52px 34px}
.fcols{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
@media (max-width:1000px){.fcols{grid-template-columns:minmax(0,1fr);gap:48px}}
.fbrand{margin-top:12px;max-width:34ch}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 28px;margin-top:34px}
.fg>div:last-child{grid-column:1/-1}
@media (max-width:520px){.fg{grid-template-columns:minmax(0,1fr)}}
.faq h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;margin-bottom:22px}
.fkick{font:700 .78rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--amber);margin-bottom:12px}
.qa{border-top:1px solid var(--hero-line)}
.qa:last-of-type{border-bottom:1px solid var(--hero-line)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:58px;padding:14px 4px;font:700 1rem/1.35 var(--font-display);color:#fff}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:2px solid var(--amber);background:linear-gradient(var(--amber),var(--amber)) center/12px 2px no-repeat,linear-gradient(var(--amber),var(--amber)) center/2px 12px no-repeat;transition:transform var(--t-base) var(--ease-out),background-color var(--t-fast) var(--ease-out)}
.qa summary:hover::after{background-color:rgba(244,166,42,.16)}
.qa[open] summary::after{transform:rotate(45deg)}
.qa p{padding:0 44px 20px 4px;color:var(--hero-muted);animation:qin .35s ease both}
@keyframes qin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.faqmore{margin-top:22px;font-size:.92rem}
.ftr h3{font:700 .78rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:#fff;margin:0 0 14px}
.ftr li{margin-bottom:8px}
.ftr a{text-decoration:none}
.ftr a:hover{color:var(--amber)}
.ftr .logo{color:#fff;font-size:1.3rem}
.ftr .logo b{color:var(--coral-btn)}
.ftr .end{margin-top:36px;padding-top:22px;border-top:1px solid var(--hero-line);font-size:.86rem}


/* Real client screenshots and one package (round 1 changes, 10/6) */
.b-shot{display:block;width:100%;height:auto;aspect-ratio:1200/683;object-fit:cover;object-position:top}
.phone:has(img){padding:0;background:#15151F}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.pk.one{grid-template-columns:minmax(0,560px);justify-content:center}
@media (max-width:900px){.hero .stage{margin-top:30px}}
.pkg li b{font-family:var(--font-display)}
.photo.work{aspect-ratio:1200/853;background:var(--ink);padding:18px}
.photo.work img{position:static;object-fit:contain}
@media (max-width:860px){.photo.work{aspect-ratio:1200/853}}
.slide.work{margin:0}
.wimg{aspect-ratio:1200/853;display:grid;place-items:center;transition:transform .4s var(--ease-out)}
.wimg img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.slide.work:hover .wimg{transform:translateY(-8px) scale(1.02)}
.cap .pill.eco{background:var(--ink)}
.cap .pill.wp{background:#fff;color:var(--fg);border:1px solid var(--line)}

/* Inner pages */
.nav a.l[aria-current="page"]{background-size:100% 2px}
.phero .wrap{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:56px;align-items:center;padding-block:128px 84px}
@media (min-width:1000px){.phero .wrap>div:first-child{padding-left:0}}
@media (max-width:900px){.phero .wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding-block:120px 64px}}
.phero h1{font-size:clamp(2rem,3.4vw,2.75rem);max-width:22ch}
.phero .sub{margin-top:16px}
.phero .cta{margin-top:24px}
.pstrip{background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:16px;padding:20px}
.pgs{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:7px}
.pg{aspect-ratio:3/4;border-radius:5px;background:var(--coral);padding:6px 5px;display:grid;gap:4px;align-content:start;animation:rise .5s calc(.3s + var(--i) * .05s) both;transition:transform var(--t-base) var(--ease-out)}
.pg::before{content:"";height:4px;width:62%;background:#fff;border-radius:2px}
.pg::after{content:"";height:10px;background:rgba(255,255,255,.45);border-radius:2px}
.pg.add{background:var(--amber)}
.pstrip:hover .pg{transform:translateY(-3px)}
.pleg{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font:700 .8rem var(--font-display);color:var(--hero-muted)}
.pleg span{display:inline-flex;align-items:center;gap:8px}
.pleg span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--coral)}
.pleg span.add::before{background:var(--amber)}
@media (max-width:600px){.pstrip{display:none}}
.phero+.sec{padding-top:84px}
.phero+.sec.alt{padding-top:120px}
@media (max-width:700px){.phero+.sec{padding-top:64px}.phero+.sec.alt{padding-top:88px}}
.sec.alt .pk::before{clip-path:polygon(0 56px,100% 0,100% calc(100% - 56px),0 100%)}
.cap .pill{font:700 .72rem var(--font-display);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--coral-btn);color:#fff;white-space:nowrap}
.cap .pill.add{background:var(--amber);color:#15151F}
.why{margin-top:4px;color:var(--muted);font-size:.9rem}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:14px;font:700 .82rem var(--font-display);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend span::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--coral-btn)}
.legend span.add::before{background:var(--amber)}
.tag{display:inline-block;font:700 .7rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:#15151F;padding:4px 10px;border-radius:999px;margin-bottom:12px;align-self:flex-start}
.madefor{margin-top:16px;color:var(--muted);font-size:.98rem}
.inds.on-gray .ind{background:var(--card)}
.ind p a{color:var(--accent-text);font-weight:700}
.inds .ind.go{background:var(--ink);border-color:var(--ink);color:#fff}
.ind.go p{color:#C6C6D2}
.ind.go svg{stroke:var(--amber)}
.ind.go a{color:#fff;font-family:var(--font-display);font-weight:700;text-decoration:none;border-bottom:2px solid var(--amber);padding-bottom:2px}
.ind.go a:hover{color:var(--amber)}
.costgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
@media (max-width:900px){.costgrid{grid-template-columns:minmax(0,1fr);gap:36px}}
.costs{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:6px 30px;box-shadow:0 14px 34px rgba(0,0,0,.07)}
.costs li{display:grid;grid-template-columns:minmax(0,1fr) 7.5rem;gap:4px 40px;padding:22px 0;border-top:1px solid var(--line)}
.costs li:first-child{border-top:0}
.costs h3{font-size:1.08rem;font-weight:700}
.costs .amt{grid-column:2;grid-row:1;font:800 1.2rem var(--font-display);color:var(--accent-text);text-align:right;white-space:nowrap}
.costs .amt small{font-size:.78rem;font-weight:700;color:var(--muted)}
.costs p.d{grid-column:1;max-width:46ch;color:var(--muted);font-size:.96rem}
@media (max-width:520px){.costs{padding:4px 20px}.costs li{grid-template-columns:minmax(0,1fr)}.costs .amt{grid-column:1;grid-row:auto;text-align:left}}
.heads{margin-top:26px;display:flex;gap:14px;align-items:flex-start;background:var(--bg-alt);border-radius:14px;padding:18px 20px;color:var(--fg)}
.nox{margin-top:16px;border:1px solid var(--line);border-radius:14px;padding:22px 22px 20px;background:var(--card)}
.nox .lbl{font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:12px}
.nox ul{display:grid;gap:10px}
.nox li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.nox li::before{content:"";flex:none;width:6px;height:12px;border:solid var(--accent-text);border-width:0 2px 2px 0;transform:rotate(40deg);margin:4px 6px 0 2px}
.costgrid .more{margin-top:24px}
.heads svg{flex:none;width:28px;height:28px;stroke:var(--accent-text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ba{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:22px;align-items:center;margin-top:44px}
@media (max-width:860px){.ba{grid-template-columns:minmax(0,1fr)}.ba .arrow{transform:rotate(90deg);justify-self:center}}
.ba .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 26px 28px;box-shadow:0 12px 30px rgba(0,0,0,.07);height:100%}
.ba .lbl{font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:12px}
.ba .rough p{color:var(--muted);font-size:1rem;line-height:1.7}
.ba .shaped h3{font-size:1.3rem;font-weight:800}
.ba .shaped p{color:var(--muted);margin-top:10px}
.ba .fakebtn{display:inline-block;margin-top:16px;padding:8px 18px;border-radius:999px;background:var(--coral-btn);color:#fff;font:700 .8rem var(--font-display)}
.arrow{width:58px;height:58px;border-radius:50%;background:var(--coral);display:grid;place-items:center;box-shadow:0 12px 26px rgba(0,0,0,.18)}
.arrow svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ba+.note{margin-top:18px}

/* How It Works */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tl,.flow{list-style:none;margin:0;padding-left:0}
.flow{display:flex;align-items:flex-start;position:relative;background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:16px;padding:22px 12px}
.flow::before{content:"";position:absolute;left:12%;right:12%;top:44px;height:2px;background:var(--hero-line)}
.flow li{flex:1;display:grid;justify-items:center;gap:10px;position:relative;z-index:1;animation:rise .5s calc(.3s + var(--i) * .12s) both}
.flow i{width:44px;height:44px;border-radius:50%;background:var(--coral);display:grid;place-items:center;transition:transform var(--t-base) var(--ease-out)}
.flow li:hover i{transform:translateY(-3px)}
.flow svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.flow li:last-child i{background:var(--amber)}
.flow li:last-child svg{stroke:#15151F}
.flow span{font:700 .78rem var(--font-display);color:var(--hero-muted)}
@media (max-width:600px){.flow{display:none}}
.stepsgrid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:start}
@media (min-width:901px){.stepsgrid>div:first-child{position:sticky;top:120px}}
@media (max-width:900px){.stepsgrid{grid-template-columns:minmax(0,1fr);gap:36px}}
.tlw{position:relative;isolation:isolate;--p:0px}
.tlw::before,.tlw::after{content:"";position:absolute;left:27px;top:30px;width:2px;z-index:-1}
.tlw::before{height:var(--len,calc(100% - 60px));background:var(--line)}
.tlw::after{height:var(--p);background:var(--coral);border-radius:2px}
.tldot{position:absolute;left:28px;top:calc(30px + var(--p));width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(231,61,73,.22);z-index:-1;pointer-events:none}
.tl{position:relative;display:grid;gap:22px}
.tl>li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:start}
.num{width:56px;height:56px;border-radius:50%;background:var(--ink);color:#fff;transition:background var(--t-base) var(--ease-out),color var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out);font:800 1.3rem var(--font-display);display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg-alt)}
.tl>li.on .num{background:var(--coral-btn)}
.tl>li.now .num{transform:scale(1.1)}
.tl>li:last-child.on .num{background:var(--amber);color:#15151F}
.tl .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:0 12px 30px rgba(0,0,0,.07);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.tl .card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.12)}
.tl h3{font-size:1.3rem;font-weight:800}
.tl p{color:var(--muted);margin-top:8px}
.who{display:inline-block;font:700 .7rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:999px;background:var(--bg-alt);color:var(--fg);margin-bottom:10px}
@media (max-width:520px){.tlw::before,.tlw::after{left:21px}.tldot{left:22px}.tl>li{grid-template-columns:44px minmax(0,1fr);gap:14px}.num{width:44px;height:44px;font-size:1.1rem}.tl .card{padding:20px}}
.notecard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 22px 50px rgba(0,0,0,.12);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.notecard:hover{transform:translateY(-4px);box-shadow:0 26px 56px rgba(0,0,0,.16)}
.notecard .nh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:16px}
.notecard .nh h3{font-size:1.2rem;font-weight:800}
.notecard .nh span{font-size:.85rem;color:var(--muted)}
.notecard ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.notecard li{display:flex;gap:12px;align-items:flex-start;background:var(--bg-alt);border-radius:10px;padding:12px 14px;font-size:.98rem}
.notecard li::before{content:"";flex:none;width:18px;height:18px;border-radius:5px;margin-top:3px;background:var(--coral-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.rounds{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.rounds span{font:700 .8rem var(--font-display);padding:8px 16px;border-radius:999px;border:2px solid var(--fg)}
.rounds span.on{background:var(--fg);color:var(--bg)}
.inds.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.inds.three{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.inds.three{grid-template-columns:minmax(0,1fr)}}

/* What's Included */
.qbar{background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:16px;padding:22px}
.qfield{display:flex;align-items:center;gap:12px;background:#fff;color:#15151F;border-radius:999px;padding:14px 20px;font:600 1rem var(--font-body);box-shadow:0 14px 30px rgba(0,0,0,.35);animation:rise .6s .3s both}
.qfield svg{flex:none;width:20px;height:20px;stroke:#55556A;fill:none;stroke-width:2.2;stroke-linecap:round}
.qfield b{font-weight:600}
.qfield i{width:2px;height:20px;background:var(--coral);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.qchips{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.qchips span{display:inline-flex;align-items:center;gap:8px;font:700 .8rem var(--font-display);color:var(--hero-muted);animation:rise .5s both}
.qchips span:nth-child(1){animation-delay:.6s}.qchips span:nth-child(2){animation-delay:.8s}
.qchips span::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
@media (max-width:600px){.qbar{display:none}}
.seen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px;align-items:stretch}
@media (max-width:860px){.seen{grid-template-columns:minmax(0,1fr)}}
.seen .card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 14px 34px rgba(0,0,0,.08);height:100%}
.seen .lbl{font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:18px}
.tagx{display:inline-block;font:700 .66rem var(--font-display);letter-spacing:.08em;text-transform:uppercase;background:var(--amber);color:#15151F;padding:2px 8px;border-radius:4px;margin:14px 0 6px}
.tagx:first-of-type{margin-top:0}
.serp{border-left:3px solid var(--line);padding-left:18px}
.serp .url{font-size:.86rem;color:#4D5156}
.serp .t{font:700 1.2rem/1.3 var(--font-body);color:#1A0DAB}
.serp .ds{font-size:.95rem;color:#4D5156}
.serp .facts{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.86rem;color:#4D5156}
.chatq{margin-left:auto;max-width:85%;background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:12px 16px;font-size:.96rem;width:fit-content}
.chata{margin-top:14px;max-width:92%;background:var(--bg-alt);border-radius:16px 16px 16px 4px;padding:14px 16px;font-size:.96rem}
.chata .src{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font:700 .75rem var(--font-display);background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.chata .src::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--coral)}
.links2{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:22px}

/* Is AI Studio Right for Me */
.phero .wrap:has(.paths){grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:900px){.phero .wrap:has(.paths){grid-template-columns:minmax(0,1fr)}}
.paths{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;align-items:stretch}
.paths .orb{align-self:center}
.path{border-radius:16px;padding:20px;height:100%;animation:rise .55s both}
.path:first-child{background:var(--coral-btn);color:#fff;animation-delay:.3s}
.path:last-child{border:2px solid var(--hero-line);color:#fff;animation-delay:.55s}
.path h3{font-size:1.05rem;font-weight:800}
.path ul{margin-top:12px;display:grid;gap:6px}
.path li{font-size:.9rem;display:flex;gap:8px;align-items:baseline}
.path li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7;transform:translateY(-2px)}
.path:last-child li{color:var(--hero-muted)}
.orb{width:40px;height:40px;border-radius:50%;background:var(--amber);color:#15151F;display:grid;place-items:center;font:800 .8rem var(--font-display);text-transform:uppercase;animation:rise .5s .45s both}
@media (max-width:600px){.paths{display:none}}
.goodfit{margin-top:26px;display:grid;gap:12px}
.goodfit li{display:flex;gap:14px;align-items:flex-start;font-size:1.02rem}
.goodfit li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:1px;background:var(--coral-btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat}
.fcheck{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;box-shadow:0 22px 50px rgba(0,0,0,.12)}
.fcheck fieldset{border:0;margin:0;padding:0;min-width:0}
.fcheck legend{padding:0;font:800 1.2rem var(--font-display)}
.fcheck .small{color:var(--muted);font-size:.92rem;margin-top:6px}
.fopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:16px}
@media (max-width:520px){.fopts{grid-template-columns:minmax(0,1fr)}}
.fopts label{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:12px;cursor:pointer;font-size:.95rem;line-height:1.3;transition:border-color var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.fopts label:hover{border-color:var(--fg)}
.fopts input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--coral-btn)}
.fopts label:has(input:checked){border-color:var(--coral-btn);background:#FDF0F1}
.fres{margin-top:18px;border-radius:14px;padding:16px 18px;background:var(--bg-alt);font-weight:600}
.fres.yes{background:#E3F4E8;border:1px solid #9FD3AE}
.fres.no{background:#FDF0F1}
.fres a{color:var(--accent-text);font-weight:700;margin-left:4px}
.outs .ind ul{margin-top:10px;display:grid;gap:6px}
.outs .ind li{display:flex;gap:10px;color:var(--muted);font-size:.95rem}
.outs .ind li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:9px}
.cmp{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 14px 34px rgba(0,0,0,.08);margin-top:40px}
.cmp caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp th,.cmp td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--line);font-size:.97rem}
.cmp thead th{border-top:0;font:800 1.02rem var(--font-display);background:var(--ink);color:#fff}
.cmp thead th:nth-child(2){color:#FF8A90}
.cmp tbody th{font:700 .95rem var(--font-display);width:28%}
.cmp td{color:var(--muted)}
@media (max-width:600px){.cmp th,.cmp td{padding:12px 10px;font-size:.88rem}}
.cmp+.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* See It in Action */
.selfie{position:relative;max-width:460px;margin-inline:auto;width:100%;animation:rise .6s .3s both}
.selfie .browser{box-shadow:0 22px 50px rgba(0,0,0,.5)}
.sf{background:#15151F;padding:18px 18px 26px;display:grid;gap:8px;position:relative}
.sf::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:12px;background:#F4F4F6;clip-path:polygon(0 100%,100% 0,100% 100%)}
.sf em{display:block;height:5px;width:28%;background:var(--amber);border-radius:2px}
.sf s{display:block;height:11px;width:78%;background:#fff;border-radius:3px}
.sf s+s{width:56%}
.sf s+s+s{height:5px;width:66%;background:#55556A;margin-top:2px}
.sf u{display:block;width:78px;height:16px;border-radius:999px;background:var(--coral-btn);margin-top:4px}
.sf-cards{background:#F4F4F6;padding:12px 18px 18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.sf-cards i{height:42px;background:#fff;border-radius:6px;border:1px solid #E2E2E8}
.selfie .chip{top:-16px;right:-8px}
@media (max-width:600px){.selfie{display:none}}
.worries{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:44px}
@media (max-width:760px){.worries{grid-template-columns:minmax(0,1fr)}}
.worry{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 28px;height:100%;box-shadow:0 12px 30px rgba(0,0,0,.06);transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.worry:hover{transform:translateY(-4px);border-color:var(--coral)}
.worry .lbl{font:700 .7rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.worry h3{font-size:1.15rem;font-weight:700;margin-top:6px}
.worry .real{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line)}
.worry .real .lbl{color:var(--accent-text)}
.worry .real p{color:var(--muted);margin-top:6px;font-size:.98rem}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:44px}
@media (max-width:1000px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.stats{grid-template-columns:minmax(0,1fr)}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 24px;height:100%;box-shadow:0 12px 30px rgba(0,0,0,.07)}
.stat b{display:block;font:800 2.3rem/1.05 var(--font-display);color:var(--accent-text);letter-spacing:-.02em}
.stat h3{font-size:1.02rem;font-weight:700;margin-top:10px}
.stat p{color:var(--muted);font-size:.93rem;margin-top:6px}
.stat.live b::after{content:"Live";display:inline-block;vertical-align:middle;margin-left:10px;font:700 .62rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:#15151F;padding:3px 7px;border-radius:4px}
.retest{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.retest .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.retest p{color:var(--muted);font-size:.92rem}
.ggrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px 28px;margin-top:44px}
@media (max-width:900px){.ggrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.ggrid{grid-template-columns:minmax(0,1fr)}}
.lede a.inl{color:var(--accent-text);font-weight:700}
.tryit{margin-top:28px;display:flex;flex-wrap:wrap;gap:12px}

/* Questions and Answers */
.bubbles{display:grid;gap:12px;justify-items:start}
.bubbles p{background:#fff;color:#15151F;font:700 .92rem var(--font-display);padding:12px 18px;border-radius:18px 18px 18px 4px;box-shadow:0 12px 28px rgba(0,0,0,.35);animation:rise .5s both}
.bubbles p:nth-child(1){animation-delay:.3s}
.bubbles p:nth-child(2){animation-delay:.5s;justify-self:end;border-radius:18px 18px 4px 18px;background:var(--amber)}
.bubbles p:nth-child(3){animation-delay:.7s;margin-left:24px}
@media (max-width:600px){.bubbles{display:none}}
@media (max-width:900px){.bubbles{max-width:460px}}
.qgrid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:48px;align-items:start}
@media (min-width:901px){.qside{position:sticky;top:110px}}
@media (max-width:900px){.qgrid{grid-template-columns:minmax(0,1fr);gap:28px}}
.qsearch label{display:block;font:700 .86rem var(--font-display);margin-bottom:8px}
.qsearch input{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:#fff;border:2px solid #8A8A9C;border-radius:999px;padding:12px 18px 12px 44px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355556A' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5L21 21'/%3E%3C/svg%3E") 16px center/18px no-repeat}
.qchipset{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.qchipset button{font:700 .82rem var(--font-display);min-height:40px;padding:8px 16px;border-radius:999px;border:2px solid var(--fg);background:transparent;color:var(--fg);cursor:pointer;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.qchipset button:hover{background:var(--fg);color:var(--bg)}
.qchipset button[aria-pressed="true"]{background:var(--coral-btn);border-color:var(--coral-btn);color:#fff}
.qcount{margin-top:16px;color:var(--muted);font-size:.9rem}
.qgroup+.qgroup{margin-top:36px}
.qgroup h2{font-size:1.35rem;font-weight:800;margin-bottom:14px}
.qitem{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 8px 22px rgba(0,0,0,.05);transition:border-color var(--t-fast) var(--ease-out)}
.qitem+.qitem{margin-top:10px}
.qitem[open]{border-color:var(--coral)}
.qitem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:14px 20px;font:700 1rem/1.35 var(--font-display)}
.qitem summary::-webkit-details-marker{display:none}
.qitem summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--accent-text);background:linear-gradient(var(--accent-text),var(--accent-text)) center/11px 2px no-repeat,linear-gradient(var(--accent-text),var(--accent-text)) center/2px 11px no-repeat;transition:transform var(--t-base) var(--ease-out)}
.qitem[open] summary::after{transform:rotate(45deg)}
.qitem p{padding:0 56px 18px 20px;color:var(--muted);animation:qin .35s ease both}
.qitem p a{color:var(--accent-text);font-weight:700}
.qnone{background:var(--card);border:1px dashed var(--line);border-radius:14px;padding:22px}
.qnone a{color:var(--accent-text);font-weight:700}

/* Changes and Hosting */
.bubbles .live{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;box-shadow:none;padding:4px 0 0 4px;font:700 .82rem var(--font-display);animation-delay:.9s}
.bubbles .live::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315151F' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/12px no-repeat}
.rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:44px}
@media (max-width:760px){.rates{grid-template-columns:minmax(0,1fr)}}
.rate{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;height:100%;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.rate h3{font-size:1.2rem;font-weight:700}
.rate .price{font-size:2.6rem;margin-top:6px}
.rate .price small{font-size:1rem;font-weight:700;color:var(--muted);letter-spacing:0}
.rate .ex{margin-top:16px;font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.rate ul{margin-top:10px;display:grid;gap:8px}
.rate li{display:flex;gap:12px;color:var(--muted)}
.rate li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--coral);margin-top:10px}
.howreq{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:28px}
@media (max-width:760px){.howreq{grid-template-columns:minmax(0,1fr)}}
.howreq div{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.howreq b{flex:none;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 .95rem var(--font-display)}
.howreq p{font-size:.96rem}
.yr{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px 26px 20px;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.yr h3{font-size:.98rem;font-weight:700;margin-bottom:10px}
.yr h3+.bars{margin-bottom:22px}
.bars{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;align-items:end;height:90px;border-bottom:2px solid var(--line)}
.bars i{display:block;height:var(--h);min-height:0;background:var(--ink);border-radius:4px 4px 0 0;transform-origin:bottom;animation:grow .6s var(--ease-out) both;animation-delay:calc(var(--i) * .05s)}
.bars.hr i{background:var(--coral)}
.bars i.z{height:3px;background:var(--line)}
@keyframes grow{from{transform:scaleY(0)}to{transform:none}}
.reveal:not(.in) .bars i{transform:scaleY(0);animation:none}
.months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin-top:6px;font:700 .68rem var(--font-display);color:var(--muted);text-align:center}
.yr .note{margin-top:14px}

/* Start Your Project */
.reach{background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:16px;padding:10px 22px;animation:rise .6s .3s both}
.reach li{display:flex;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--hero-line)}
.reach li:first-child{border-top:0}
.reach svg{flex:none;width:22px;height:22px;stroke:var(--amber);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.reach small{display:block;font:700 .72rem var(--font-display);letter-spacing:.1em;text-transform:uppercase;color:var(--hero-muted)}
.reach b,.reach a{font:700 1rem var(--font-display);color:#fff;text-decoration:none}
.reach a:hover{color:var(--amber)}
.startgrid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px;align-items:start}
@media (max-width:900px){.startgrid{grid-template-columns:minmax(0,1fr)}}
.optcard{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:0 14px 34px rgba(0,0,0,.08)}
.optcard .tag{margin-bottom:10px}
.optcard h2{font-size:clamp(1.5rem,2.4vw,1.9rem)}
.optcard>p{color:var(--muted);margin-top:10px}
.optcard .btn{margin-top:20px}
.nextsteps{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.nextsteps h3{font-size:1.05rem;font-weight:800;margin-bottom:12px}
.nextsteps ol{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.nextsteps li{display:flex;gap:12px;align-items:center}
.nextsteps b{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 .85rem var(--font-display)}
.bigform .row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media (max-width:600px){.bigform .row2{grid-template-columns:minmax(0,1fr)}}
.bigform fieldset{border:0;margin:14px 0 0;padding:0;min-width:0}
.bigform legend{font:700 .86rem var(--font-display);margin-bottom:8px;padding:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills label{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:2px solid var(--line);border-radius:999px;cursor:pointer;font-size:.95rem}
.pills label:hover{border-color:var(--fg)}
.pills input{margin:0;width:18px;height:18px;accent-color:var(--coral-btn)}
.pills label:has(input:checked){border-color:var(--coral-btn);background:#FDF0F1}
.bigform .btn{margin-top:22px}
.bigform .fld textarea{min-height:84px}
.formdone{text-align:left}
.formdone h2{font-size:1.6rem}
.formdone p{color:var(--muted);margin-top:10px}

/* SEO and AEO blocks */
.answer{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--coral);border-radius:16px;padding:26px 30px;box-shadow:0 12px 30px rgba(0,0,0,.07);margin-top:44px}
.answer h2{font-size:clamp(1.3rem,2.2vw,1.65rem)}
.answer p{color:var(--muted);margin-top:10px}
.answer p b{color:var(--fg)}
.workfig{margin:44px auto 0;max-width:980px}
.workfig img{display:block;width:100%;height:auto}
.workfig figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:.9rem}
.answergrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:36px;align-items:center;margin-top:44px}
.answergrid .answer,.answergrid .workfig{margin-top:0}
@media (max-width:860px){.answergrid{grid-template-columns:minmax(0,1fr)}}
.shotframe{border-radius:12px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.22);border:1px solid var(--line)}
.shotframe .b-bar{background:#ECECF0}
.ggrid figure.work{margin:0}
.ggrid figure.work .cap{flex-direction:column;align-items:flex-start;gap:6px}
.ggrid figure.work:hover .wimg{transform:translateY(-8px) scale(1.02)}
.legend .lg-full::before{background:linear-gradient(135deg,#fff 50%,var(--ink) 50%);border:1px solid var(--line)}

/* Privacy policy */
.legal{max-width:760px}
.legal h2{font-size:clamp(1.25rem,2.4vw,1.5rem);margin:36px 0 10px}
.legal p+p,.legal ul+p{margin-top:12px}
.legal-list{margin:0;padding-left:1.2em}
.legal-list li{margin:8px 0}

/* Blog (tools/blog_build.py) */
.hero .kicker a{color:inherit;text-decoration:none;border-bottom:1px solid currentColor}
.pmeta{display:flex;align-items:center;gap:12px;margin-top:26px;color:var(--hero-muted);font-size:.92rem}
.pmeta img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--hero-line)}
.pmeta a{color:#fff}
.postshot{margin:0}
.postshot img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.postshot figcaption{margin-top:10px;color:var(--hero-muted);font-size:.85rem;text-align:center}
.post{max-width:720px;margin-inline:auto}
.post>.lede{max-width:none;margin-top:0;font-size:1.18rem;color:var(--fg)}
.post h2{font-size:clamp(1.35rem,2.6vw,1.7rem);margin:46px 0 4px;text-wrap:pretty}
.post p{margin-top:14px}
.post ul,.post ol{margin:14px 0 0;padding-left:1.35em}
.post ul{list-style:disc}
.post ol{list-style:decimal}
.post li{margin:8px 0;padding-left:4px}
.post li::marker{color:var(--accent-text);font-weight:700}
.post ul.checks{list-style:none;padding-left:0}
.post ul.checks li{display:flex;gap:12px;align-items:flex-start;padding-left:0}
.post ul.checks li::before{content:"";flex:none;width:7px;height:13px;border:solid var(--accent-text);border-width:0 2.5px 2.5px 0;transform:rotate(40deg);margin:5px 8px 0 4px}
.midcta{margin:48px 0 8px;padding:30px 32px;border-radius:18px;background-color:var(--hero-bg);background-image:var(--grain-l);color:#fff;box-shadow:0 22px 50px rgba(0,0,0,.2);position:relative;overflow:hidden}
.midcta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--coral)}
.midcta .mh{font:800 clamp(1.25rem,2.4vw,1.5rem)/1.25 var(--font-display);margin:0;color:#fff}
.midcta p{margin-top:10px;color:var(--hero-muted)}
.midcta .mb{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px}
.post .midcta .btn{color:#fff}
.post .midcta .ml2{color:#fff;font-weight:700}
.feat{background:var(--card);color:var(--fg);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.45);position:relative;transition:transform var(--t-base) var(--ease-out)}
.feat:hover{transform:translateY(-6px)}
.feat img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:top}
.feat .fb{padding:20px 24px 24px}
.feat .fk{font:700 .75rem var(--font-display);letter-spacing:.14em;text-transform:uppercase;color:var(--kicker)}
.feat h2{font-size:1.3rem;margin-top:6px}
.feat h2 a{color:inherit;text-decoration:none}
.feat h2 a::after{content:"";position:absolute;inset:0}
.feat:has(a:focus-visible){outline:3px solid var(--amber);outline-offset:4px}
.feat h2 a:focus-visible{outline:none}
.feat .bm{color:var(--muted);font-size:.86rem;margin-top:8px}
.post a{color:var(--accent-text)}
.author{display:flex;gap:22px;align-items:center;margin-top:56px;padding:26px;border:1px solid var(--line);border-radius:18px;background:var(--bg-alt)}
.author img{width:96px;height:96px;border-radius:50%;object-fit:cover;flex:none}
.author p{margin:0}
.author .an{font:800 1.08rem var(--font-display)}
.author .ar{color:var(--accent-text);font-weight:700;font-size:.92rem;margin-bottom:8px}
.author p:last-child{color:var(--muted);font-size:.98rem}
.rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.relc{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px 24px;color:var(--fg);text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.06);transition:transform var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out)}
.relc:hover{transform:translateY(-4px);border-color:var(--coral)}
.relc h3{font-size:1.12rem}
.relc p{color:var(--muted);margin-top:8px;flex:1}
.relc span,.bcard .go{margin-top:16px;font:700 .95rem var(--font-display);color:var(--accent-text)}
.relc span::after,.bcard .go::after{content:" \2192"}
.bgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:44px}
.bcard{position:relative;display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.07);transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out)}
.bcard:hover{transform:translateY(-6px);box-shadow:0 22px 44px rgba(0,0,0,.12)}
.bcard img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.bcard .bc{display:flex;flex-direction:column;flex:1;padding:22px 24px 26px}
.bcard .bm{color:var(--muted);font-size:.86rem}
.bcard h2{font-size:1.3rem;margin-top:8px;text-wrap:pretty}
.bcard h3{font-size:1.2rem;margin-top:8px;text-wrap:pretty}
.bcard h2 a,.bcard h3 a{color:inherit;text-decoration:none}
.bcard h3 a::after{content:"";position:absolute;inset:0}
.bcard h2 a::after{content:"";position:absolute;inset:0}
.bcard h2 a:focus-visible{outline:none}
.bcard:has(a:focus-visible){outline:3px solid var(--accent-text);outline-offset:3px}
.bcard p:not(.bm){color:var(--muted);margin-top:10px;flex:1}
@media (max-width:900px){.rel,.bgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.rel,.bgrid{grid-template-columns:1fr}.author{flex-direction:column;align-items:flex-start}}

.bioshot{margin:0;justify-self:center;max-width:360px;position:relative}
.bioshot::before{content:"";position:absolute;inset:22px -22px -22px 22px;background:var(--coral);border-radius:18px}
.bioshot img{position:relative;display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.bio{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:start}
.bio .f h3{font-size:1.15rem;margin-bottom:14px}
.bio .loclist{display:grid;grid-template-columns:1fr;gap:12px}
.bio .loclist li{margin:0}
.bio p.body{margin-top:14px}
.author .more a+a{margin-left:16px}
@media (max-width:900px){.bio{grid-template-columns:1fr}.bioshot{max-width:300px;margin-top:8px}}
@media (max-width:600px){.bioshot::before{inset:14px -14px -14px 14px}}

/* Phone-only trims (600px and below) */
@media (max-width:600px){
  .tlw::before,.tlw::after,.tldot,.tl .num{display:none}
  .tl>li{grid-template-columns:minmax(0,1fr)}
  .ggrid>figure:nth-child(n+5){display:none}
  .fitwrap,.phero .cta:has(.fitcta){display:none}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;width:auto}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tbody tr{padding:16px 18px;border-top:1px solid var(--line)}
  .cmp tbody tr:first-child{border-top:0}
  .cmp tbody th,.cmp td{border-top:0;padding:0;width:auto;font-size:.95rem}
  .cmp tbody th{font-size:1rem;margin-bottom:8px}
  .cmp td{display:flex;justify-content:space-between;gap:16px;padding:4px 0;text-align:right}
  .cmp td::before{content:attr(data-label);font:700 .8rem var(--font-display);color:var(--fg);text-align:left;flex:none;max-width:48%}
  .cmp td:first-of-type::before{color:var(--accent-text)}
}

/* Floating message form and accessibility tools */
.fab{position:fixed;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:40;display:inline-flex;align-items:center;gap:10px;font:700 .92rem var(--font-display);border-radius:999px;padding:14px 22px;border:2px solid transparent;cursor:pointer;box-shadow:0 14px 34px rgba(0,0,0,.28);transition:transform var(--t-fast) var(--ease-out),background var(--t-fast) var(--ease-out)}
.fab:hover{transform:translateY(-3px)}
.fab svg{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fab-chat{right:16px;background:var(--coral-btn);color:#fff}
.fab-chat:hover{background:var(--coral-hover)}
.fab-a11y{left:16px;background:#15151F;color:#fff;border-color:#fff}
/* Icon only at every size (Tj, 10/6): the word stays for screen readers, and the title attribute gives mouse users a tooltip. */
.fab-a11y{padding:14px}
.fab-a11y span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:520px){.fab{padding:14px}.fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.panel{position:fixed;bottom:calc(88px + env(safe-area-inset-bottom,0px));z-index:41;width:min(370px,calc(100vw - 32px));max-height:calc(100dvh - 130px - env(safe-area-inset-bottom,0px));overflow:auto;background:var(--card);color:var(--fg);border:1px solid var(--line);border-radius:22px;box-shadow:0 30px 70px rgba(0,0,0,.32);padding:22px 22px 24px;animation:pop .25s ease both}
.panel.chat{right:16px}
.panel.a11y{left:16px}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:6px}
.ph h2{font-size:1.25rem;font-weight:800}
.x{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--fg);cursor:pointer;display:grid;place-items:center}
.x:hover{border-color:var(--fg)}
.x svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round}
.panel .small{font-size:.86rem;color:var(--muted)}
.fld{margin-top:14px}
.fld label{display:block;font:700 .86rem var(--font-display);margin-bottom:6px}
.fld label i{font-style:normal;color:var(--accent-text)}
.fld label small{font:600 .78rem var(--font-body);color:var(--muted);margin-left:4px}
.fld input,.fld textarea{width:100%;font:inherit;font-size:1rem;color:var(--fg);background:#fff;border:2px solid #8A8A9C;border-radius:12px;padding:11px 14px}
.fld textarea{min-height:92px;resize:vertical}
.fld [aria-invalid="true"]{border-color:#B3141B}
.err{color:#B3141B;font-size:.85rem;font-weight:600;margin-top:5px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
#chatForm .btn{width:100%;margin-top:18px}
.done h3{font-size:1.2rem;font-weight:800;margin:6px 0 8px}
.done p{color:var(--muted)}
.opt{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-top:1px solid var(--line)}
.opt:first-of-type{border-top:0}
.opt>span,.opt>div>span{font-weight:700;font-size:.95rem}
.sizer{display:flex;align-items:center;gap:8px}
.sizer output{min-width:3.2em;text-align:center;font-weight:700}
.sq{min-width:44px;height:44px;padding:0 10px;border-radius:12px;border:2px solid var(--fg);background:transparent;color:var(--fg);font:800 .95rem var(--font-display);cursor:pointer}
.sq:hover{background:var(--fg);color:var(--bg)}
.sw{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:6px 8px 6px 14px;border-radius:999px;border:2px solid var(--fg);background:transparent;color:var(--fg);font:700 .85rem var(--font-display);cursor:pointer;min-width:92px;justify-content:space-between}
.sw::after{content:"";width:26px;height:16px;border-radius:999px;background:#8A8A9C;position:relative;box-shadow:inset 0 0 0 0 transparent;transition:background var(--t-fast) var(--ease-out);background-image:radial-gradient(circle at 8px 8px,#fff 6px,transparent 6.5px)}
.sw[aria-checked="true"]{background:var(--fg);color:var(--bg)}
.sw[aria-checked="true"]::after{background-color:#1B8A4B;background-image:radial-gradient(circle at 18px 8px,#fff 6px,transparent 6.5px)}
.resetbtn{margin-top:14px;width:100%}
.stmt{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}

/* Accessibility modes (set on the html element) */
html.a-hc{--muted:#1B1B27;--line:#15151F;--kicker:#7A0C12;--accent-text:#7A0C12;--coral:#A4141B;--coral-btn:#A4141B;--coral-hover:#7F0F15;--hero-muted:#FFFFFF;--grain:none;--grain-l:none;--bg-alt:#ECECF0}
html.a-hc .btn-amber{border-color:#FFD27A;color:#FFD27A}
html.a-hc .q,html.a-hc .step,html.a-hc .f,html.a-hc .ind,html.a-hc .rv,html.a-hc .quote,html.a-hc .pkg,html.a-hc .fit .col,html.a-hc .costs,html.a-hc .answer,html.a-hc .optcard,html.a-hc .rate,html.a-hc .yr,html.a-hc .qitem,html.a-hc .worry,html.a-hc .stat,html.a-hc .fcheck,html.a-hc .cmp,html.a-hc .seen .card,html.a-hc .tl .card,html.a-hc .notecard,html.a-hc .nox,html.a-hc .ba .card{border:2px solid #15151F}
html.a-font{--font-display:Verdana,Tahoma,Arial,sans-serif;--font-body:Verdana,Tahoma,Arial,sans-serif}
html.a-font h1,html.a-font h2,html.a-font h3{letter-spacing:0}
html.a-links a:not(.btn){text-decoration:underline!important;text-underline-offset:3px}
html.a-space body{line-height:1.95;letter-spacing:.03em;word-spacing:.12em}
html.a-space p,html.a-space li{margin-bottom:.2em}
html.a-still *,html.a-still *::before,html.a-still *::after{animation:none!important;transition:none!important}
html.a-still{scroll-behavior:auto}
html.a-still .reveal{translate:0 0}
html.a-still .stage{transform:none}
html.a-still .car{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
html.a-still .dup,html.a-still .pausebtn{display:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{translate:0 0}
  .stage{transform:none}
}
[hidden]{display:none!important}
body{margin:0}
img{max-width:100%}

/* Round 2 changes (Tj, 10/7) */
.pk-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:56px;align-items:start;position:relative;isolation:isolate}
.pk-split>.reveal:first-child{padding-top:40px}
.pk-split .pk{margin-top:0}
.pk-split .pk::before{display:none}
.pk-split::before{content:"";position:absolute;z-index:-1;left:50%;width:100vw;margin-left:-50vw;top:72%;bottom:-140px;background-color:var(--coral);background-image:var(--grain-l);clip-path:polygon(0 56px,100% 0,100% 100%,0 100%)}
@media (max-width:900px){.pk-split{grid-template-columns:minmax(0,1fr);gap:36px}.pk-split>.reveal:first-child{padding-top:0}.pk-split::before{top:52%}}
.howreq-one{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 22px;font-weight:600}
.inds .ind.svc{background:var(--ink);border-color:var(--ink);color:#fff}
.ind.svc svg{stroke:var(--amber)}
.outs .ind.svc li{color:#C6C6D2}
.glance{background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:18px;padding:28px 30px;max-width:440px;width:100%;margin-inline:auto;animation:rise .6s .3s both}
.glance h2{font:800 1.05rem var(--font-display);color:#fff;margin-bottom:16px}
.glance ul{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.glance li{display:flex;gap:12px;align-items:flex-start;color:#E6E6EE}
.glance svg{flex:none;width:22px;height:22px;stroke:var(--amber);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
@media (max-width:600px){.glance{display:none}}

/* Motion pass (10/7). JS adds .ticks/.line and then .go when in view; with motion off everything gets .go at once */
.pkg ul.ticks li::before{transform:rotate(40deg) scale(0);transition:transform .35s var(--ease-spring) calc(.15s + var(--i,0) * .12s)}
.pkg ul.ticks.go li::before{transform:rotate(40deg) scale(1)}
.glance ul.ticks svg path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .45s ease calc(.6s + var(--i,0) * .15s)}
.glance ul.ticks.go svg path{stroke-dashoffset:0}
.counting{font-variant-numeric:tabular-nums}
.fcheck input:checked{animation:tickpop .3s var(--ease-spring)}
@keyframes tickpop{from{transform:scale(.6)}to{transform:scale(1)}}
#how .steps.line{position:relative;padding-top:46px}
#how .steps.line::before,#how .steps.line::after{content:"";position:absolute;top:14px;left:calc((100% - 44px) / 6);right:calc((100% - 44px) / 6);height:3px;border-radius:2px;background:var(--line)}
#how .steps.line::after{background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease-io) .2s}
#how .steps.line.go::after{transform:scaleX(1)}
#how .steps.line>div{position:relative}
#how .steps.line>div::before{content:"";position:absolute;top:-39px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--card);border:3px solid var(--line);z-index:1;transition:background var(--t-base) var(--ease-out),border-color var(--t-base) var(--ease-out),transform .3s var(--ease-spring)}
#how .steps.line.go>div::before{background:var(--coral);border-color:var(--coral);transform:scale(1.15)}
#how .steps.line.go>div:nth-child(1)::before{transition-delay:.2s}
#how .steps.line.go>div:nth-child(2)::before{transition-delay:.9s}
#how .steps.line.go>div:nth-child(3)::before{transition-delay:1.6s}
@media (max-width:860px){#how .steps.line{padding-top:0}#how .steps.line::before,#how .steps.line::after,#how .steps.line>div::before{display:none}}
/* Page transitions: pages cross-fade and the header holds still (browsers without support load pages normally) */
@view-transition{navigation:auto}
.hdr{view-transition-name:site-header}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
html.a-still::view-transition-group(*),html.a-still::view-transition-old(*),html.a-still::view-transition-new(*){animation:none!important}
@media (prefers-reduced-motion: reduce){@view-transition{navigation:none}}
.sec .wrap.pk-split>.reveal>h2{text-wrap:balance}

/* Premium pass (10/7) */
/* Staged hero entrance: kicker, headline, second line, text, buttons */
.hero .wrap>div:first-child>*{animation:rise var(--t-slow) both}
.hero .wrap>div:first-child>:nth-child(1){animation-delay:.05s}
.hero .wrap>div:first-child>:nth-child(2){animation-delay:.15s}
.hero .wrap>div:first-child>:nth-child(3){animation-delay:.5s}
.hero .wrap>div:first-child>:nth-child(4){animation-delay:.65s}
.hero .wrap>div:first-child>:nth-child(n+5){animation-delay:.8s}
.hero h1 span{animation:rise var(--t-slow) .35s both}
/* Images unveil with a wipe as they scroll in, and fade in once loaded */
img.unveil{opacity:0}
img.unveil.go{opacity:1;animation:wipe 1.1s var(--ease-io) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0);transform:scale(1.06)}to{clip-path:inset(0 0 0 0);transform:none}}
img.ld{opacity:0;transition:opacity .5s var(--ease-out)}
/* Buttons fill from the left on hover; the main button carries an arrow that nudges forward */
.btn{background-image:linear-gradient(var(--fill,transparent),var(--fill,transparent));background-repeat:no-repeat;background-size:0% 100%;transition:transform var(--t-fast) var(--ease-out),background-size .4s var(--ease-out),color var(--t-fast) var(--ease-out),border-color var(--t-fast) var(--ease-out)}
.btn:hover{background-size:100% 100%}
.btn-coral{--fill:var(--coral-hover)}
.btn-coral:hover{background-color:var(--coral-btn)}
.btn-amber{--fill:var(--amber)}
.btn-amber:hover{background-color:transparent}
.btn-ghost{--fill:var(--fg)}
.btn-ghost:hover{background-color:transparent}
.btn-coral::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform var(--t-base) var(--ease-spring)}
.btn-coral:hover::after{transform:translateX(4px)}
/* Work cards tilt toward the cursor, with a soft glare masked to the screenshot */
figure.work:hover .wimg.tilt,.wimg.tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px) scale(1.02);transition:transform .15s linear}
.wimg::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 55%);-webkit-mask:var(--shot) center/contain no-repeat;mask:var(--shot) center/contain no-repeat;transition:opacity var(--t-base) var(--ease-out)}
.wimg{position:relative}
.wimg.tilt::after{opacity:1}
html.a-still img.unveil,html.a-still img.ld{opacity:1}
@media (prefers-reduced-motion: reduce){img.unveil,img.ld{opacity:1}}
/* Pages graphic (10/7): all 10 pages are red; the 5 SEO pages add an amber ring, so it reads as 10 pages with 5 upgraded */
.pgs{gap:11px;padding:4px}
.pg.add{background:var(--coral);outline:2px solid var(--amber);outline-offset:2px}
.pleg span.add::before{background:transparent;outline:2px solid var(--amber);outline-offset:1px;width:8px;height:8px}
/* AI built websites and location pages (10/8) */
.sec .wrap>.reveal>p.body{margin-top:14px;color:var(--muted);font-size:1.02rem}
.inds.four-up{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){.inds.four-up{grid-template-columns:minmax(0,1fr)}}
.sec.alt .inds .ind{background:var(--card)}
.loclist{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
@media (max-width:700px){.loclist{grid-template-columns:minmax(0,1fr)}}
.loclist li{display:flex;gap:12px;align-items:flex-start}
.loclist li::before{content:"";flex:none;width:6px;height:12px;border:solid var(--accent-text);border-width:0 2px 2px 0;transform:rotate(40deg);margin:4px 6px 0 2px}
.areas-label{margin-top:30px;font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker)}
.areas{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.areas span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font:600 .88rem var(--font-display)}
/* Location page layouts (10/8): each area has its own hero card and section mix */
.loccard{background:rgba(255,255,255,.05);border:1px solid var(--hero-line);border-radius:18px;padding:28px 30px;max-width:440px;width:100%;margin-inline:auto;color:#E6E6EE;animation:rise .6s .3s both}
.loccard h2{font:800 1.15rem var(--font-display);color:#fff;margin-bottom:14px}
.loccard .areas span{background:rgba(255,255,255,.08);border-color:var(--hero-line);color:#fff}
.loccard .small{margin-top:14px;font-size:.88rem;color:var(--hero-muted)}
.loccard.office .lbl{font:700 .74rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.loccard.office p{margin-top:8px;font-size:1.02rem}
.loccard.office a{color:#fff;font-family:var(--font-display);font-weight:700;font-size:1.25rem;text-decoration:none;border-bottom:2px solid var(--amber)}
.loccard.towns ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.loccard.towns li{display:grid;gap:2px;padding-left:16px;border-left:3px solid var(--coral)}
.loccard.towns b{font-family:var(--font-display);color:#fff}
.loccard.towns span{font-size:.92rem;color:var(--hero-muted)}
@media (max-width:600px){.loccard{display:none}}
.ind .lbl{font:700 .72rem var(--font-display);letter-spacing:.12em;text-transform:uppercase;color:var(--kicker);margin-bottom:4px}
.ind .lbl+h3{margin-top:4px}
.ind.town a{color:var(--accent-text);font-weight:700}
.after-stats{margin-top:28px}
.split2{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.split2.flip{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
@media (max-width:900px){.split2,.split2.flip{grid-template-columns:minmax(0,1fr);gap:32px}.split2.flip>figure{order:2}}
.workfig.side{margin:0}
.seasongrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
@media (max-width:540px){.seasongrid{grid-template-columns:minmax(0,1fr)}}
.ind.season{background:var(--card)}
.ind.season svg{width:36px;height:36px}
.pband{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:36px;align-items:center;margin-top:34px;background:var(--card);border:2px solid var(--fg);border-radius:18px;padding:26px 32px;box-shadow:0 22px 50px rgba(0,0,0,.12)}
.pband .price{margin-top:0}
.pband .pb-price p{color:var(--muted);font-weight:600}
.pband ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 24px}
.pband li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem}
.pband li::before{content:"";flex:none;width:6px;height:12px;border:solid var(--accent-text);border-width:0 2px 2px 0;transform:rotate(40deg);margin:4px 6px 0 2px}
@media (max-width:900px){.pband{grid-template-columns:minmax(0,1fr);gap:20px}.pband ul{grid-template-columns:minmax(0,1fr)}}
.pband+.reveal .lede{margin-top:30px}
.split2 .loclist{grid-template-columns:minmax(0,1fr)}
/* The hero's bottom slant matches the first section: gray by default, white when the page opens on a white section (10/8) */
.hero:has(+ .sec:not(.alt))::after{background-color:var(--bg)}
.after-stats{max-width:none}
.bizcards+.indnote{margin-top:28px}
.ftr .fmore{margin-top:10px;font-size:.85rem;color:var(--hero-muted);line-height:1.5}