/* Self-hosted so the browser never opens connections to fonts.googleapis.com
   and fonts.gstatic.com before it can paint text. Variable fonts: one file
   per family covers every weight the site uses. */
@font-face{
  font-family:'Plus Jakarta Sans';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('fonts/plus-jakarta-sans-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/jetbrains-mono-var.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --primary:#ffbd23; --primary-strong:#ffd35e; --primary-ink:#1b1409;
  --ink:hsl(215 28% 12%); --ink-2:hsl(215 12% 42%);
  --bg:hsl(36 33% 97%); --card:#fff; --border:hsl(30 16% 86%);
  --muted:hsl(32 18% 93%); --dark:#060503;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dark)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.micro{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.mono{font-family:var(--mono)}

/* chrome */
/* Constrained to the same column as .wrap — same 1240px cap, same 48px
   gutter — so the logo starts on the page's left margin and the buttons end
   on its right one, instead of floating out at the window edges. */
.chrome{position:fixed;top:0;left:0;right:0;z-index:50;max-width:1240px;margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 48px}
.pill{background:#000;backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.08);border-radius:14px}
/* The wordmark carries itself — the pill behind it was only ever a plate to
   sit the small version on, and at this size it read as a box around the
   logo rather than part of it. */
.chrome .brand{padding:0;background:none;border:none;backdrop-filter:none;border-radius:0}
.chrome .brand img{height:44px;width:auto}
.brand-logo{color:inherit}
/* The nav and the buttons carry their own pills, so page content scrolling
   up behind them stays readable. The bare wordmark has no such backing, so
   the bar earns one for the whole row once the page has moved — the same
   solid bar the narrow layout already uses, arriving only when it is needed.
   Fixed with left/right rather than 100vw: exactly the viewport, and no
   sideways scroll from the scrollbar's width. */
.chrome:before{
  content:'';position:fixed;top:0;left:0;right:0;height:var(--chrome-h,67px);
  background:rgba(6,5,3,.72);backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,255,255,.09);
  opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:-1
}
.chrome.scrolled:before{opacity:1}
.chrome nav{padding:17px 30px;display:flex;gap:30px;white-space:nowrap;color:rgba(255,255,255,.74)}
.chrome nav a:hover{color:var(--primary)}
/* One row, not two. Stacked, these two sat nearly twice as tall as the logo
   and the nav beside them, which set the height of the whole chrome and
   pushed everything pinned beneath it that much further down the page. */
.chrome .stack{display:flex;align-items:center;gap:8px}
.chrome .stack .btn{width:auto}
.chrome .login{padding:13px 18px;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.74)}
.chrome .login:hover{color:var(--primary)}

.chrome .burger{display:none;align-items:center;justify-content:center;width:48px;height:48px;padding:0;cursor:pointer;color:#fff}
.chrome .burger .bars{display:flex;flex-direction:column;gap:5px;width:18px}
.chrome .burger .bars i{display:block;height:2px;border-radius:2px;background:currentColor}
.sheet{display:none;position:fixed;inset:0;z-index:80;flex-direction:column;padding:20px clamp(20px,6vw,32px) max(28px,env(safe-area-inset-bottom));background:radial-gradient(120% 60% at 80% 0%,rgba(255,189,35,.16),rgba(255,189,35,0) 60%),#060503;overflow-y:auto}
.chrome.open ~ .sheet, .sheet.open{display:flex}
.sheet .top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:auto}
.sheet .top img{height:30px;width:auto}
.sheet .close{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.6);cursor:pointer;padding:10px 0}
.sheet .close b{position:relative;display:block;width:16px;height:16px}
.sheet .close b:before,.sheet .close b:after{content:'';position:absolute;top:7px;left:0;width:16px;height:2px;border-radius:2px;background:#ffbd23}
.sheet .close b:before{transform:rotate(45deg)}
.sheet .close b:after{transform:rotate(-45deg)}
.sheet nav{display:flex;flex-direction:column;padding:36px 0 28px}
.sheet nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:clamp(28px,9vw,40px);font-weight:800;letter-spacing:-.04em;line-height:1;text-transform:uppercase;color:#fff}
.sheet nav a i{font-family:var(--mono);font-size:11px;font-weight:400;font-style:normal;letter-spacing:.1em;color:#ffbd23}
.sheet .foot{display:flex;flex-direction:column;gap:12px}
.sheet .foot .login{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:600;color:#fff;border:1px solid rgba(255,255,255,.18);padding:16px 18px;border-radius:14px}
.sheet .foot .contacts{display:flex;flex-wrap:wrap;gap:8px 20px;font-family:var(--mono);font-size:12.5px;color:rgba(255,255,255,.55);padding-top:14px}

/* buttons */
.btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:14px;font-weight:600;line-height:1;padding:0 18px;height:40px;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1),box-shadow .2s cubic-bezier(.22,1,.36,1)}
.btn-lg{height:48px;font-size:15px;padding:0 26px;border-radius:14px}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--primary);color:var(--primary-ink);box-shadow:0 1px 2px rgba(15,23,42,.06)}
.btn-primary:hover{background:var(--primary-strong)}
.btn-outline{background:var(--card);color:var(--ink);border-color:var(--border)}
.btn-outline:hover{background:hsl(34 24% 92%)}
.glow{box-shadow:0 18px 44px -18px rgba(255,189,35,.7);border-radius:14px}

/* hero */
.gold{color:var(--primary)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--primary);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes breathe{50%{transform:scale(1.12) translate(-30px,20px)}}
@keyframes float{50%{translate:0 -14px}}
@keyframes ping{0%{transform:scale(1);opacity:.6}70%,100%{transform:scale(3);opacity:0}}

.hero{position:relative;overflow:hidden;background:var(--dark);color:#fff;min-height:100vh;display:flex;align-items:center;padding:132px 0 120px}
.hero-glow{position:absolute;width:900px;height:900px;right:-250px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.22),transparent 62%);animation:breathe 8s ease-in-out infinite;pointer-events:none}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 20%,transparent 70%)}
.hero-wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;width:100%}
.hero .eyebrow{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
/* .ln never wraps; the size is capped so both lines fit the left column at every width */
.hero h1{font-size:clamp(44px,6.8vw,88px);line-height:.9;letter-spacing:-.055em;font-weight:800;margin:22px 0 26px}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.08em;white-space:nowrap}
.hero h1 .w{display:inline-block;transform:translateY(110%);animation:hero-up .9s cubic-bezier(.2,.8,.2,1) forwards}
.hero h1 .ln:nth-child(2) .w{animation-delay:.14s}
.hero h1 .gold{position:relative}
.hero h1 .gold::after{content:"";position:absolute;left:0;right:0;bottom:.02em;height:.09em;border-radius:9px;background:var(--primary);transform:scaleX(0);transform-origin:left;animation:hero-line .7s .9s cubic-bezier(.7,0,.2,1) forwards}
@keyframes hero-up{to{transform:none}}
@keyframes hero-line{to{transform:scaleX(1)}}
.hero-lede{color:#bdb5a8;font-size:18px;line-height:1.55;max-width:470px;margin:0}
.hero .btn-row-sm{margin-top:34px}

.stage{position:relative;height:520px;perspective:1600px}
.devices{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.browser{position:absolute;right:0;top:40px;width:92%;aspect-ratio:16/10.6;border-radius:14px;background:#1b1813;border:1px solid rgba(255,255,255,.1);box-shadow:0 60px 120px -40px rgba(0,0,0,.9),0 0 0 1px rgba(255,189,35,.08);overflow:hidden;transform:rotateY(-14deg) rotateX(6deg);animation:float 7s ease-in-out infinite}
.browser-bar{height:34px;display:flex;align-items:center;gap:7px;padding:0 14px;background:#221e18;border-bottom:1px solid rgba(255,255,255,.06)}
.browser-bar i{width:10px;height:10px;border-radius:50%;flex:none}
.browser-bar i:nth-child(1){background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-url{margin-left:14px;flex:1;min-width:0;height:20px;border-radius:6px;background:#15120e;font-family:var(--mono);font-size:10px;color:#8b8375;display:flex;align-items:center;padding-left:10px;overflow:hidden;white-space:nowrap}
.dev-screen{position:relative;height:calc(100% - 34px);background:#0e0c09}
.phone .dev-screen{height:100%}
.dev-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;background:center top/cover no-repeat;opacity:0;transition:opacity .9s}
.dev-shot.on{opacity:1}
.phone{position:absolute;left:0;bottom:0;width:31%;aspect-ratio:9/19;border-radius:30px;background:#0b0a08;border:6px solid #1d1a15;box-shadow:0 50px 90px -30px rgba(0,0,0,.95);overflow:hidden;transform:rotateY(-14deg) rotateX(6deg) translateZ(80px);animation:float 7s -3.5s ease-in-out infinite}
.phone .dev-shot{object-position:top center;background-position:center top}
.hero-chip{position:absolute;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(18,16,12,.86);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:600;box-shadow:0 20px 40px -20px #000}
.hero-chip small{display:block;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.06em;color:#8b8375}
.chip-a{right:-8px;top:0;animation:float 6s -1s ease-in-out infinite}
.live-dot{position:relative;width:10px;height:10px;border-radius:50%;background:#3ddc84;flex:none}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:#3ddc84;animation:ping 2s infinite}
.live-dot.is-down,.live-dot.is-down::after,.is-down > .live-dot,.is-down > .live-dot::after{background:#ff5a4f}
.live-dot.is-unknown{background:#6f685c}
.live-dot.is-unknown::after{display:none}
.hero-chip.is-hidden{display:none}
.hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.marq{display:flex;gap:64px;width:max-content;padding:22px 0;white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:-.2px;color:#6f685c;animation:marq 28s linear infinite}
.marq span::before{content:"✦";color:var(--primary);margin-right:64px;opacity:.6}
@keyframes marq{to{transform:translateX(-50%)}}
@media (max-width:900px){
  .hero{padding:112px 0 96px;min-height:0}
  .hero-wrap{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:clamp(44px,11.5vw,84px)}
  .stage{height:auto;width:100%;max-width:560px;aspect-ratio:1.15;margin:8px auto 0}
}
@media (max-width:640px){
  .hero{padding:104px 0 88px}
  .hero-lede{font-size:16px}
  .chip-a{right:0}
  .phone{width:28%;left:12px}
  .browser{width:88%}
}
@media (prefers-reduced-motion:reduce){
  .hero-glow,.browser,.phone,.hero-chip,.live-dot::after,.marq,.dot{animation:none}
  .hero h1 .w{animation:none;transform:none}
  .hero h1 .gold::after{animation:none;transform:scaleX(1)}
  .dev-shot,.devices{transition:none}
}

/* sections */
section.band{padding:104px 0}
.band-white{background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
h2.big{font-size:clamp(38px,5.4vw,76px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:48px}
.head-note{font-size:15px;color:var(--ink-2);margin:0;max-width:22em}

.link{font-size:14px;font-weight:700;color:hsl(38 92% 38%)}

/* work */
/* Tracks however many projects there are rather than assuming three, so
   pulling one from work.json cannot leave a hole in the row. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
/* The card can now be any width, so the image keeps a ratio instead of a
   fixed height that would letterbox it as the cards get wider. */
.cards .shot{aspect-ratio:16/10;height:auto}
.card{border:1px solid var(--border);border-radius:20px;overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-3px);box-shadow:0 22px 46px -28px rgba(15,23,42,.35)}
.shot{height:180px;background:var(--muted) center/cover no-repeat;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.card .meta{padding:20px;border-top:1px solid var(--border)}
.card .meta b{display:block;font-size:15px;margin-bottom:4px}
.card .meta span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}

/* project rows (work page) */
.proj{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--border);border-radius:22px;overflow:hidden;box-shadow:0 10px 26px -18px rgba(15,23,42,.1);margin-bottom:20px}
.proj .shot{height:300px;border-right:1px solid var(--border)}
.proj .body{padding:40px;display:flex;flex-direction:column;justify-content:center}
.proj .n{font-family:var(--mono);font-size:12px;color:hsl(38 92% 40%);margin-bottom:14px}
.proj h3{font-size:34px;font-weight:800;letter-spacing:-.035em;margin:0 0 10px}
.proj .dom{font-family:var(--mono);font-size:13px;color:var(--ink-2);margin-bottom:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);background:#fff;padding:6px 12px;border-radius:999px}

/* faq */
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 0;cursor:pointer;font-size:19px;font-weight:700;letter-spacing:-.02em;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:22px;color:hsl(38 92% 40%);line-height:1}
.faq details[open] summary::after{content:'−'}
.faq p{font-size:16px;line-height:1.7;color:var(--ink-2);max-width:46em;margin:0;padding-bottom:26px}

/* dark closing */
.dark{background:var(--dark);color:#fff;position:relative;overflow:hidden}
.dark .glowball{position:absolute;bottom:-40%;left:-10%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.16),rgba(255,189,35,0) 60%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 55%,transparent 100%)}
.dark .inner{position:relative;padding:112px 0 80px}
section.band:has(+ .dark){padding-bottom:56px}
.band + .dark .inner{padding-top:56px}
.dark + .band{padding-top:56px}
.dark + .band .pager{margin-top:0;border-top:0;padding-top:0}
.about{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;margin-bottom:96px}
.about h2{font-size:clamp(34px,4.4vw,58px);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin:0}
.about p{font-size:17px;line-height:1.7;color:rgba(255,255,255,.68);margin:0}
/* Client logos strip — pure-CSS marquee, mirrors the shadcnblocks Logos3
   block: centered heading, logos on the raw dark ground (no chips), edges
   fading into the section background, seamless loop, pause on hover. */
.logos{margin-bottom:8px}
.logos-heading{text-align:center;font-size:clamp(22px,2.6vw,34px);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:0 0 56px;color:#fff}
.logos-track{position:relative;overflow:hidden;max-width:1024px;margin:0 auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.logos-row{display:flex;flex-wrap:nowrap;align-items:center;width:max-content;animation:logos-scroll 28s linear infinite}
.logos-track:hover .logos-row{animation-play-state:paused}
.logos-item{flex:none;display:flex;align-items:center;justify-content:center;padding:0 40px}
.logos-item img{display:block;width:auto;height:40px;opacity:.82;transition:opacity .2s ease}
.logos-item:hover img{opacity:1}
/* Per-logo tuning so mixed source art reads as one set on the dark ground. */
.logos-item .logo-jc{height:72px;filter:brightness(1.25)} /* lifts the brown ring type off the near-black ground */
.logos-item .logo-okie{height:44px;filter:invert(1) hue-rotate(180deg)} /* black wordmark -> white, keeps the sun/snowflake hues */
.logos-item .logo-be{height:48px}
.logos-item .logo-youth{height:30px}
@keyframes logos-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (max-width:760px){.logos-heading{margin-bottom:36px}.logos-item{padding:0 24px}.logos-item img{height:32px}.logos-item .logo-jc{height:56px}.logos-item .logo-okie{height:36px}.logos-item .logo-be{height:38px}.logos-item .logo-youth{height:24px}}
@media (prefers-reduced-motion:reduce){.logos-row{animation:none;flex-wrap:wrap;justify-content:center;row-gap:28px;width:auto}.logos-item[aria-hidden="true"]{display:none}}

/* No rule across the top. The jump from body copy to a 110px headline is
   already the loudest break on the page; a hairline over it only announces
   a division the type has made obvious. Space does the separating. */
.cta{text-align:center;padding-top:112px}
.cta h2{font-size:clamp(44px,8vw,110px);line-height:.92;letter-spacing:-.05em;font-weight:800;margin:0 0 32px}
.cta .row{display:flex;gap:12px;justify-content:center;margin-bottom:44px}
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 40px;font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.62)}
.contacts a:hover{color:var(--primary)}
footer{position:relative;overflow:hidden;background:var(--dark);color:rgba(255,255,255,.55);border-top:1px solid rgba(255,189,35,.08)}
footer:before{content:'';position:absolute;top:-540px;left:-10%;width:900px;height:900px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.16),rgba(255,189,35,0) 60%);pointer-events:none;animation:pulse 3s ease-in-out infinite}
footer .wrap{position:relative;padding-top:48px;padding-bottom:28px}
.f-main{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}
.f-brand{display:flex;align-items:center;justify-content:space-between;gap:18px;flex:0 0 100%;margin:0 0 8px}
.f-brand-logo{height:84px;width:auto;filter:drop-shadow(0 0 28px rgba(255,189,35,.3))}
.f-brand-name{font-size:26px;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:#f7f4ee;text-align:left}
.f-title{margin:0 0 34px;font-size:clamp(42px,4.6vw,68px);line-height:.96;font-weight:800;letter-spacing:-.015em;text-transform:uppercase;color:#f7f4ee}
.f-social{display:flex;gap:12px;margin:0}
.f-social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#f2efe8;color:#14110b;transition:background .15s ease,transform .15s ease}
.f-social a:hover{background:var(--primary);transform:translateY(-2px)}
.f-login{display:inline-flex;align-items:center;gap:16px;padding:9px 9px 9px 24px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#f2efe8;transition:border-color .15s ease,background .15s ease}
.f-login span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#f2efe8;color:#14110b;transition:background .15s ease}
.f-login:hover{border-color:var(--primary)}
.f-login:hover span{background:var(--primary)}
.f-legal{display:flex;flex-wrap:wrap;gap:8px 22px;flex:0 0 100%;margin-top:20px;font-family:var(--mono);font-size:12px;color:rgba(255,255,255,.38)}
/* The copyright takes the first line outright so the links land as one
   horizontal row beneath it. */
.f-legal > span{flex:0 0 100%}
.f-legal a{padding:2px 0;transition:color .15s ease}
.f-legal a:hover{color:var(--primary)}
/* The legal page you are already on — the link stays, so the pair is still
   one click apart, but it stops competing with the one you have not read. */
.f-legal a[aria-current]{color:rgba(255,255,255,.72)}

/* page hero (work / quote) */
.phero{position:relative;overflow:hidden;background:var(--dark);color:#fff}
.phero .glowball{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:1000px;height:1000px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.18),rgba(255,189,35,0) 60%)}
.phero .wrap{position:relative;padding-top:170px;padding-bottom:96px}
.phero .k{font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--primary);margin-bottom:28px}
.phero h1{font-size:clamp(52px,10vw,140px);line-height:.9;letter-spacing:-.05em;font-weight:800;margin:0 0 36px}
.phero p{font-size:19px;line-height:1.55;color:rgba(255,255,255,.7);margin:0;max-width:26em}

/* quote form */
.quote{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start;padding-bottom:96px}
.quote .side{position:sticky;top:48px}
.quote .side h1{font-size:clamp(44px,6.4vw,84px);line-height:.92;letter-spacing:-.05em;font-weight:800;margin:0 0 28px}
.quote .side p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.68);margin:0 0 40px;max-width:24em}
.quote .side .list{display:flex;flex-direction:column;gap:14px;font-family:var(--mono);font-size:14px;color:rgba(255,255,255,.72);border-top:1px solid rgba(255,255,255,.12);padding-top:28px}
.panel{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);border-radius:24px;padding:40px;backdrop-filter:blur(12px)}
.field{display:flex;flex-direction:column;gap:8px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.5)}
input[type=text],input[type=email],textarea{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:13px 15px;font-size:15px;color:#fff;font-family:inherit;outline:none;width:100%}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.35)}
input:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,189,35,.25)}
.needs{display:flex;flex-wrap:wrap;gap:9px}
.needs input{position:absolute;opacity:0;pointer-events:none}
.needs label{font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 16px;border-radius:999px;cursor:pointer;border:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72);transition:all .15s ease}
.needs input:checked + label{border-color:var(--primary);background:rgba(255,189,35,.16);color:var(--primary)}
.hp{position:absolute;left:-9999px}
.form-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:6px}
.note{font-size:13px;color:rgba(255,255,255,.45)}
.alert{border:1px solid rgba(255,255,255,.16);background:rgba(255,189,35,.1);color:#ffd35e;border-radius:12px;padding:14px 16px;font-size:14px;margin-bottom:22px}

/* reveal */

[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
.no-js [data-reveal]{opacity:1;transform:none}

/* Sticky section headings.
   Each heading pins below the chrome while its own section scrolls past, so
   the label for whatever you are reading stays on screen; when the section
   ends its heading scrolls away and the next one takes the slot.

   Only colour changes on .stuck — never size or spacing — so nothing below
   the heading shifts at the moment it pins. --chrome-h is measured in
   site.js because the chrome is a different height at every breakpoint; the
   fallback matches the bar at its smallest. */
/* overflow-x:clip, not hidden — hidden would make the section a scroll
   container and a sticky heading inside one has nothing left to stick to. */
section.band{overflow-x:clip;overflow-y:visible}
.band .head,
.band > .wrap > h2.big{
  position:sticky;top:var(--chrome-h,67px);z-index:5;
  /* The backdrop has to reach both edges of the screen, but .wrap is capped
     at 1240px and centred, so the distance to the edge is not a fixed number.
     Bleeding out by an amount that always overshoots and padding the same
     amount back leaves the text where it was and lets the clip above trim
     the overshoot — which also keeps 50vw from opening a sideways scroll. */
  margin-inline:-50vw;padding:14px 50vw;
  background:var(--bg);
  border-bottom:1px solid transparent;
  /* Repeats the [data-reveal] transitions — this rule outranks them, and
     dropping them would kill the fade-in on these same elements. */
  transition:
    opacity .7s cubic-bezier(.22,1,.36,1),
    transform .7s cubic-bezier(.22,1,.36,1),
    border-color .3s ease,box-shadow .3s ease,
    font-size .2s ease,padding .2s ease
}
.band-white .head,
.band-white > .wrap > h2.big{background:#fff}
.band .head h2.big{transition:font-size .2s ease}
/* Everything between the pin line and the top of the screen has to be
   covered too. Content does not stop at a pinned heading — it passes under
   it and surfaces again above it, which under the desktop chrome's floating
   pills leaves stray rows stranded at the top of the screen. This carries
   the heading's own background up to meet them. Below 900px the chrome is
   an opaque bar sitting over this same strip, so it simply goes unseen. */
.band .head::before,
.band > .wrap > h2.big::before{
  content:'';position:absolute;left:0;right:0;bottom:100%;
  height:var(--chrome-h,67px);background:inherit
}
.band .head.stuck,
.band > .wrap > h2.big.stuck{
  border-bottom-color:var(--border);
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 1px 0 var(--border),0 8px 24px -16px rgba(0,0,0,.25)
}
@media (prefers-reduced-motion:reduce){
  .band .head,.band > .wrap > h2.big,.band .head h2.big{transition:none}
}

@media (max-width:640px){
  .band .head.stuck h2.big,
  .band > .wrap > h2.big.stuck{font-size:28px}
  .band .head.stuck,
  .band > .wrap > h2.big.stuck{padding-block:8px}
}

@media (max-width:1100px){
  .chrome nav{gap:18px;padding:15px 18px}
  .chrome .login{padding:11px 14px;gap:8px}
}
@media (max-width:900px){
  .wrap{padding:0 24px}
  /* Keep a pinned heading shallow — the chrome bar is already using the top
     of the screen, so the gap and the supporting line tighten to hold it
     near one thumb-width. The horizontal bleed needs no change: it is
     measured from the heading's own box, which already follows .wrap. */
  .band .head,
  .band > .wrap > h2.big{padding-block:12px}
  .band .head{gap:8px;margin-bottom:36px}
  .band .head .mono,.band .head .link,.band .head .head-note{font-size:12.5px;line-height:1.45}
  /* The 22em measure is for a column beside a heading. Stacked under one it
     only forces a second line into the pinned bar. */
  .band .head .head-note{max-width:none}
  /* One continuous bar instead of three floating pills. The pill styling
     moves from the children to .chrome itself, so the logo and the menu
     button read as one piece of chrome rather than scattered boxes. */
  .chrome{
    /* 24px matches .wrap above, so the logo and the menu button land on the
       same margins as the headings under them. */
    padding:10px 24px;gap:10px;align-items:center;
    background:rgba(6,5,3,.72);backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(255,255,255,.09)
  }
  /* The bar is on permanently at this width, so the scroll-in copy of it
     would only double the tint. */
  .chrome:before{display:none}
  .chrome .brand,.chrome .burger{background:none;border:none;backdrop-filter:none;border-radius:0}
  .chrome .brand{padding:0}
  .chrome nav{display:none}
  .chrome .burger{display:flex;margin-left:auto}
  .chrome .stack{display:none}
  .chrome .login{display:none}
  .about,.quote,.proj{grid-template-columns:1fr;gap:32px}
  .plans,.cards{grid-template-columns:1fr}
  .proj .shot{border-right:none;border-bottom:1px solid var(--border);height:220px}
  .quote .side{position:static}
  section.band{padding:64px 0}
  .panel{padding:22px}
  .two{grid-template-columns:1fr}
  .head{flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:32px}
  .quote .side h1{font-size:clamp(34px,9vw,52px)}
  input[type=text],input[type=email],textarea{font-size:16px}
  .phero .wrap{padding-top:120px;padding-bottom:64px}
  .cta{padding-top:56px}
  .about{margin-bottom:56px}
}
@media (max-width:560px){
  .chrome{padding:9px 24px;gap:8px}
  .chrome .brand{padding:0}
  .chrome .brand img{height:32px}
  .btn-lg{height:44px;font-size:14px;padding:0 20px}
  .plan{padding:24px}
  .plan .price,.plan-quoted{font-size:34px}
  .proj .body{padding:24px}
  .proj h3{font-size:26px}
  .faq summary{font-size:17px}
  .contacts{gap:10px 20px;font-size:13px}
  .f-title{margin:0 0 28px}
  .f-brand-logo{height:68px}
  .f-brand-name{font-size:22px}
  .form-foot{flex-direction:column-reverse;align-items:stretch}
  .form-foot .note{text-align:center}
}

/* ---- work grid + case study ---- */
.filterbar{position:sticky;top:0;z-index:30;background:rgba(250,247,242,.94);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.filterbar .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-top:14px;padding-bottom:14px}
.filterbar .chips{gap:8px}
.filterbar .chip{font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:999px;border:1px solid var(--border);background:#fff;color:var(--ink-2);transition:all .15s ease}
.filterbar .chip:hover{border-color:hsl(38 92% 55%);color:hsl(38 92% 34%)}
.filterbar .chip.on{border-color:var(--primary);background:hsl(42 100% 57%/.16);color:hsl(38 92% 34%)}
.filterbar .count{font-size:12px;color:var(--ink-2)}

.docket{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden;box-shadow:0 10px 26px -18px rgba(15,23,42,.1);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.docket:hover{transform:translateY(-3px);box-shadow:0 24px 48px -30px rgba(15,23,42,.4);border-color:hsl(30 16% 74%)}
.docket-img{position:relative;display:block}
.shot.ratio{aspect-ratio:16/10;height:auto}
.docket-img .cat{position:absolute;top:12px;left:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;background:rgba(6,5,3,.72);color:rgba(255,255,255,.86);padding:6px 10px;border-radius:999px}
.docket-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.docket-body .meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin-bottom:12px;display:flex;gap:10px}
.docket-body .meta .sep{color:var(--border)}
.docket-title{font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px;display:block}
.docket-body p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 22px;text-wrap:pretty}
.docket-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:20px}
.docket-foot .link{font-size:13.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px}
.outbound{font-size:12px;font-weight:600;color:var(--ink-2);border:1px solid var(--border);border-radius:999px;padding:7px 13px;display:inline-flex;align-items:center;gap:6px}
.outbound:hover{border-color:hsl(38 92% 55%);color:hsl(38 92% 34%)}
/* A filled panel, not a dashed outline — the dashed box reads as a drop
   target or a placeholder waiting to be filled in, and this is neither. */
.empty{text-align:center;padding:80px 20px;background:var(--muted);border-radius:20px}
.empty .t{font-size:20px;font-weight:700;letter-spacing:-.02em;margin-bottom:8px}
.empty p{font-size:15px;color:var(--ink-2);margin:0}

.case-head .back{display:inline-block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:32px}
.case-head-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);gap:clamp(28px,4vw,56px);align-items:end}
.case-meta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.case-meta .sep{color:rgba(255,255,255,.25)}
.case-head-grid h1{font-size:clamp(38px,6.4vw,84px);line-height:.95;letter-spacing:-.045em;font-weight:800;margin:0 0 24px}
.case-head-grid p{font-size:18px;line-height:1.6;color:rgba(255,255,255,.72);margin:0 0 28px;max-width:34em;text-wrap:pretty}
.case-img{border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05)}

.story{max-width:34em;font-size:17px;line-height:1.75;color:var(--ink)}
.story h2{font-size:30px;line-height:1.15;letter-spacing:-.035em;font-weight:800;margin:44px 0 16px}
.story h2:first-child{margin-top:0}
.story h3{font-size:20px;line-height:1.3;letter-spacing:-.02em;font-weight:700;margin:32px 0 12px}
.story p{margin:0 0 24px;text-wrap:pretty}
.story ul{margin:0 0 24px;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.story li{padding-left:4px}
.story a{color:hsl(38 92% 36%);font-weight:600;border-bottom:1px solid hsl(38 92% 70%)}
.story blockquote{margin:32px 0;padding:4px 0 4px 24px;border-left:3px solid var(--primary);font-size:20px;line-height:1.55;letter-spacing:-.015em}

.pager{border-top:1px solid var(--border);margin-top:56px;padding-top:28px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.pagecard{background:#fff;border:1px solid var(--border);border-radius:18px;padding:22px 24px;display:block;box-shadow:0 10px 26px -18px rgba(15,23,42,.1)}
.pagecard:hover{border-color:hsl(30 16% 74%)}
.pagecard.right{text-align:right}
.pagecard .mono{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.pagecard .t{font-size:19px;font-weight:800;letter-spacing:-.025em}

@media (max-width:860px){
  .case-head-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .filterbar .chip{padding:11px 17px}
}

/* ---- legal pages (privacy / terms) --------------------------------------
   A long document is a different problem from a marketing page. Nobody
   scrolls one end to end, so the shape is: a quiet hero carrying the dates
   that actually matter, a plain-English summary before any clause, and a
   numbered contents rail that tracks whatever section is on screen. The
   rail is a column beside the text on desktop and a scrolling row of chips
   pinned under the chrome on narrow screens — same markup, both navigable. */

.legal-hero .wrap{padding-top:150px;padding-bottom:64px}
.legal-hero h1{font-size:clamp(44px,7.6vw,104px);margin-bottom:22px}
.legal-hero p{max-width:30em;font-size:17.5px}

/* Privacy and Terms get read as a pair, so the other one is one tap away
   rather than a trip back down to the footer. */
.legal-switch{display:inline-flex;gap:4px;margin-bottom:36px;padding:4px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14)}
.legal-switch a{padding:9px 18px;border-radius:999px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6);transition:color .15s ease,background .15s ease}
.legal-switch a:hover{color:#fff}
.legal-switch a[aria-current]{background:var(--primary);color:var(--primary-ink)}

.legal-facts{display:flex;flex-wrap:wrap;gap:20px 56px;margin:44px 0 0;padding-top:26px;border-top:1px solid rgba(255,255,255,.18)}
.legal-facts div{display:flex;flex-direction:column;gap:7px}
.legal-facts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.legal-facts dd{margin:0;font-size:15px;font-weight:600;color:#fff}

/* The short version, before the long one. Three cards is the whole point:
   if a reader takes nothing else from the page, they take these. */
.tldr{display:grid;grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:16px;margin-bottom:clamp(56px,7vw,84px)}
.tldr-card{background:#fff;border:1px solid var(--border);border-radius:20px;padding:26px;box-shadow:0 10px 26px -18px rgba(15,23,42,.1)}
.tldr-card .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:hsl(42 100% 57%/.18);color:hsl(38 92% 34%);margin-bottom:18px}
.tldr-card h3{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.tldr-card p{font-size:14.5px;line-height:1.62;color:var(--ink-2);margin:0;text-wrap:pretty}

.legal{display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.legal-nav{position:sticky;top:calc(var(--chrome-h,67px) + 28px)}
.legal-nav .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
.legal-nav ol{position:relative;list-style:none;margin:0;padding:0;border-left:1px solid var(--border)}
.legal-nav a{display:flex;gap:11px;align-items:baseline;padding:9px 0 9px 16px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;line-height:1.35;color:var(--ink-2);transition:color .15s ease,border-color .15s ease}
.legal-nav a i{font-family:var(--mono);font-style:normal;font-size:10.5px;color:hsl(30 12% 70%);flex:none;transition:color .15s ease}
.legal-nav a:hover{color:var(--ink)}
.legal-nav a.on{color:hsl(38 92% 34%);border-left-color:var(--primary);font-weight:700}
.legal-nav a.on i{color:hsl(38 92% 42%)}

/* ~36em holds roughly 70 characters at this size, which is where long-form
   reading stops being work. */
.legal-doc{max-width:36em}
.legal-sec{scroll-margin-top:calc(var(--chrome-h,67px) + 24px)}
.legal-sec + .legal-sec{margin-top:52px;padding-top:52px;border-top:1px solid var(--border)}
.legal-sec h2{display:flex;align-items:baseline;gap:14px;font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.03em;font-weight:800;margin:0 0 18px;text-wrap:balance}
.legal-sec h2 i{font-family:var(--mono);font-style:normal;font-size:12px;font-weight:400;letter-spacing:.08em;color:hsl(38 92% 42%);flex:none}
.legal-sec h3{font-size:17px;font-weight:800;letter-spacing:-.015em;margin:30px 0 10px}
.legal-sec p{font-size:16.5px;line-height:1.75;color:var(--ink-2);margin:0 0 18px;text-wrap:pretty}
.legal-sec b{color:var(--ink);font-weight:700}
.legal-sec ul{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:11px}
.legal-sec li{position:relative;padding-left:22px;font-size:16px;line-height:1.7;color:var(--ink-2);text-wrap:pretty}
.legal-sec li:before{content:'';position:absolute;left:2px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--primary)}
.legal-sec a:not(.btn){color:hsl(38 92% 34%);font-weight:600;border-bottom:1px solid hsl(38 92% 70%)}
.legal-sec > :last-child{margin-bottom:0}

/* What we collect is a table of facts, and a table reads faster than five
   more paragraphs of prose claiming the same thing. */
.legal-wide{overflow-x:auto;margin:0 0 18px}
.legal-table{width:100%;min-width:420px;border-collapse:collapse;font-size:14.5px}
.legal-table th{text-align:left;font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);padding:0 18px 10px 0;border-bottom:1px solid var(--border)}
.legal-table td{padding:14px 18px 14px 0;border-bottom:1px solid var(--border);color:var(--ink-2);line-height:1.55;vertical-align:top}
.legal-table tr > :last-child{padding-right:0}
.legal-table td:first-child{width:36%;color:var(--ink);font-weight:700}

.legal-note{background:hsl(42 100% 57%/.1);border-left:3px solid var(--primary);border-radius:0 14px 14px 0;padding:18px 22px;margin:0 0 18px}
.legal-note p{margin:0;font-size:15px;line-height:1.65;color:var(--ink)}

/* Closing block: one question these pages reliably leave a reader with is
   "who do I actually email about this", so it gets its own answer. */
.legal-contact{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;align-items:center}
.legal-contact h2{font-size:clamp(28px,4vw,44px);line-height:1.05;letter-spacing:-.04em;font-weight:800;margin:0 0 14px}
.legal-contact p{font-size:16px;line-height:1.65;color:rgba(255,255,255,.66);margin:0;max-width:34em}
.legal-contact .row{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:980px){
  /* minmax(0,1fr), not 1fr: the rail below bleeds out by 50vw a side, and a
     bare 1fr sizes its column to fit that, dragging the document column out
     past the screen with it. A zero minimum lets the column stay put and the
     overflow do what it was asked to do. */
  .legal{grid-template-columns:minmax(0,1fr);gap:0}
  /* The rail leaves the margin and becomes a pinned strip. Same bleed trick
     the sticky section headings use — reach both screen edges from inside a
     capped, centred .wrap, and let section.band's overflow-x:clip trim the
     overshoot. */
  .legal-nav{
    position:sticky;top:var(--chrome-h,67px);z-index:20;
    margin-inline:-50vw;padding:12px 50vw;margin-bottom:36px;
    background:var(--bg);border-bottom:1px solid var(--border)
  }
  /* Same cover the sticky section headings carry: the document keeps moving
     in the strip between the rail and the top of the screen, and the chrome
     over it is tinted rather than solid, so lines of the policy surface
     through it. The rail's own background is carried up to meet the chrome. */
  .legal-nav:before{content:'';position:absolute;left:0;right:0;bottom:100%;height:var(--chrome-h,67px);background:inherit}
  .legal-nav .k{display:none}
  .legal-nav ol{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;border-left:none;-webkit-overflow-scrolling:touch}
  .legal-nav ol::-webkit-scrollbar{display:none}
  .legal-nav a{margin:0;padding:8px 14px;border:1px solid var(--border);border-left-width:1px;border-radius:999px;background:#fff;white-space:nowrap;font-size:12.5px}
  .legal-nav a.on{border-color:var(--primary);background:hsl(42 100% 57%/.16)}
  .legal-doc{max-width:none}
  /* Clears the chrome and the pinned rail together, so a chip tap does not
     land its own section underneath the rail. */
  .legal-sec{scroll-margin-top:calc(var(--chrome-h,67px) + 74px)}
  .legal-contact{grid-template-columns:1fr}
}
@media (max-width:560px){
  .legal-hero .wrap{padding-top:110px;padding-bottom:48px}
  .legal-switch{margin-bottom:28px}
  .legal-facts{gap:18px 36px;margin-top:34px}
  .legal-sec p{font-size:16px}
  .tldr-card{padding:22px}
}

/* Utility classes standing in for inline style="" attributes — a strict
   Content-Security-Policy (style-src 'self', no 'unsafe-inline') can't allow
   those, so every one-off layout tweak that used to live in markup lives
   here instead. Each one replaces exactly one former inline style, on
   exactly one element, so !important throughout: that's what guaranteed
   these won by the same margin an inline style did, and several of them
   (h2.big's margin:0, .plan h3's margin, .band + .dark .inner's padding) are
   real higher-specificity rules elsewhere in this file that silently won
   over the plain class the first time this block was written without it. */
.accent{color:var(--primary) !important}
.text-center{text-align:center !important}
.m0{margin:0 !important}
.min-vh{min-height:100vh !important}
.mb-44{margin-bottom:44px !important}
.mb-48{margin-bottom:48px !important}
.muted-45{color:rgba(255,255,255,.45) !important}
.wrap-narrow{max-width:1000px !important}
.wrap-rel{position:relative !important}
.wrap-pt{position:relative !important;padding-top:150px !important}
.wrap-center{position:relative !important;text-align:center !important;padding:0 48px !important}
.phero-full{min-height:100vh !important;display:flex !important;align-items:center !important}
.col-gap22{display:flex !important;flex-direction:column !important;gap:22px !important}
.btn-row{display:flex !important;flex-wrap:wrap !important;gap:12px !important}
.btn-row-sm{display:flex !important;flex-wrap:wrap !important;gap:10px !important}
.btn-row-top{display:flex !important;flex-wrap:wrap !important;gap:12px !important;margin-top:36px !important}
.btn-row-center{display:flex !important;flex-wrap:wrap !important;gap:12px !important;justify-content:center !important}
.note-muted{margin-top:40px !important;font-size:15px !important;color:rgba(255,255,255,.55) !important}
.plan-head{display:flex !important;align-items:center !important;justify-content:space-between !important;margin-bottom:10px !important}
.shot-okie{background-image:url('/assets/work/okie-heating-cooling.jpg') !important}
.shot-jc{background-image:url('/assets/work/jc-alterations.jpg') !important}
.check-badge{width:56px !important;height:56px !important;border-radius:16px !important;background:rgba(255,189,35,.18) !important;color:var(--primary) !important;display:flex !important;align-items:center !important;justify-content:center !important;font-size:26px !important;margin:0 auto 28px !important}
.big-title{font-size:clamp(40px,7vw,88px) !important;line-height:.94 !important;letter-spacing:-.05em !important;font-weight:800 !important;margin:0 0 20px !important}
.lede{font-size:18px !important;line-height:1.65 !important;color:rgba(255,255,255,.68) !important;margin:0 auto 40px !important;max-width:26em !important}
.glow-legal{bottom:auto !important;top:-260px !important;left:50% !important;transform:translateX(-50%) !important;width:800px !important;height:600px !important}
.pad-legal{padding:88px 0 80px !important}
.glow-cta{bottom:auto !important;top:-200px !important;left:50% !important;transform:translateX(-50%) !important;width:800px !important;height:600px !important}
.glow-shift{top:-40% !important;left:auto !important;right:-10% !important;transform:none !important}
.cta-title{font-size:clamp(40px,7vw,96px) !important;line-height:.94 !important;letter-spacing:-.05em !important;font-weight:800 !important;margin:0 0 32px !important;text-transform:uppercase !important}
.cta-title-sm{font-size:clamp(38px,6.4vw,88px) !important;line-height:.94 !important;letter-spacing:-.05em !important;font-weight:800 !important;margin:0 0 30px !important;text-transform:uppercase !important}

/* NEW PLANS GRID */
.plans-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:28px}
.plans-head h2{margin:0}
.plans-head p{max-width:360px;margin:0}

.baseline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px;padding:18px 24px;border:1px solid var(--border);border-radius:14px;background:var(--card);margin-bottom:28px;font-size:15px}

.plans{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:32px;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -26px rgba(15,23,42,.28)}

.card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.card h3{font-size:15px;font-weight:700;margin:0}
.badge{font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:rgba(255,189,35,.18);color:var(--primary)}

.who{font-size:14px;color:var(--ink-2);margin:0 0 20px;min-height:20px}
.card .price{font-family:var(--mono);font-size:42px;letter-spacing:-.04em;line-height:1;margin:0 0 28px}
.card .price small{font-family:'Plus Jakarta Sans',sans-serif;font-size:14px;font-weight:500;color:var(--ink-2);letter-spacing:0;margin-left:4px}

.features{list-style:none;margin:0 0 28px;padding:0;display:flex;flex-direction:column;gap:10px;font-size:14px;color:var(--ink-2);flex:1}
.features .inherit{color:var(--ink);font-weight:600}

.card-featured{background:var(--dark);color:#fff;border:none;box-shadow:0 26px 60px -30px rgba(255,189,35,.55);transform:translateY(-6px)}
.card-featured .who,.card-featured .features{color:rgba(255,255,255,.7)}
.card-featured .features .inherit{color:#fff}
.card-featured .price{color:var(--primary)}
.card-featured .price small{color:rgba(255,255,255,.6)}
.card-featured .badge{background:rgba(255,189,35,.18);color:var(--primary)}

.host{margin-top:20px;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:28px;padding:22px 32px;border:1px dashed var(--border);border-radius:20px;background:transparent}
.host h3{font-size:18px;font-weight:700;margin:0}
.host p{margin:0;color:var(--ink-2);font-size:15px}
.host .price{font-size:32px;margin:0;white-space:nowrap}
.host .price small{font-size:14px;font-weight:500;color:var(--ink-2);margin-left:4px}
.host-price{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.host .billed{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap}
.host .btn{padding:12px 22px;white-space:nowrap}

#plans .note{display:flex;flex-direction:column;gap:6px;font-size:13.5px;color:var(--ink-2);margin-top:16px}
#plans .note b{font-weight:600;color:var(--ink)}
@media (min-width:641px){
  #plans .note{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:20px}
}
@media (max-width:640px){
  #plans .note{align-items:flex-start;text-align:left}
}

@media (max-width:1100px){
  .plans{grid-template-columns:repeat(2,1fr)}
  .card-featured{transform:none}
}
@media (max-width:640px){
  .plans{grid-template-columns:1fr}
  .host{grid-template-columns:1fr;gap:12px;text-align:left}
  .host-price{align-items:flex-start}
}

/* Plans mobile carousel (overrides the stacked grid above at <=640px) */
@media (max-width:640px){
  .plans{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -24px;padding:0 24px;scroll-padding:0 24px;-ms-overflow-style:none;scrollbar-width:none}
  .plans::-webkit-scrollbar{display:none}
  .plans>.card{flex:0 0 84%;scroll-snap-align:center}
  .plans>.card[data-reveal]{opacity:1;transform:none;transition:none}
  .plan-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
  .plan-dots button{width:8px;height:8px;border-radius:999px;border:none;padding:0;background:var(--border);cursor:pointer;transition:width .2s ease,background .2s ease}
  .plan-dots button.active{width:22px;background:var(--primary)}
}
@media (min-width:641px){
  .plan-dots{display:none}
}

/* Plans header + baseline strip restyle */
.baseline{background:#fff;border:1px solid var(--border);border-radius:18px}
.baseline-label{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.baseline>span:not(.baseline-label){display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ink);white-space:nowrap}
.chk{flex:none;width:18px;height:18px;border-radius:50%;background:var(--primary);color:var(--primary-ink);display:grid;place-items:center}
.chk svg{width:10px;height:10px}

@media (min-width:641px){
  .baseline{display:flex;align-items:center;flex-wrap:wrap;gap:36px;padding:18px 28px}
  .baseline-label{padding-right:28px;border-right:1px solid var(--border)}
}

@media (max-width:640px){
  .plans-head{flex-direction:column;align-items:flex-start;gap:10px}
  .plans-head .head-note{max-width:none;text-align:left;font-size:15px}
  .baseline{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 12px;padding:18px}
  .baseline-label{grid-column:1/-1;padding:0;border:0}
  .baseline>span:not(.baseline-label){font-size:13.5px;gap:8px}
}

/* ---- Homepage sections --------------------------------------------------
   Card animations start when [data-anim] gets .on — a separate observer
   from [data-reveal], whose 1.5s backstop would otherwise start them off
   screen. Each block carries its own breakpoints and reduced-motion rules. */

/* services: bento */
.head .head-note{max-width:340px}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(220px,auto);gap:18px}
.bc{position:relative;overflow:hidden;background:#fff;border:1px solid var(--border);border-radius:24px;padding:28px;transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.bc h3{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:8px 0}
.bc p{font-size:15px;line-height:1.55;color:var(--ink-2);max-width:380px;margin:0}
.bc-k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .bc.in:hover{transform:translateY(-4px);box-shadow:0 30px 60px -35px rgba(27,20,9,.35);border-color:rgba(255,189,35,.6)}
}
.bc-build{grid-column:span 4;grid-row:span 2;min-height:480px;background:var(--dark);border-color:var(--dark);color:#fff}
.bc-build p{color:#b3ab9e}
.bc-build .bc-k{color:#8b8375}
.bc-host,.bc-care{grid-column:span 2}
.bc-grow{grid-column:span 6;display:grid;grid-template-columns:1fr 1.3fr;gap:30px;align-items:center}
.builder{position:absolute;left:28px;right:28px;top:190px;bottom:28px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;gap:10px;padding:16px;border-radius:14px;background:#15120e;border:1px solid rgba(255,255,255,.08)}
.blk{border-radius:8px;background:#26221b;transform:scaleX(0);transform-origin:left}
.blk-nav{grid-column:1/-1;height:18px}
.blk-hero{background:linear-gradient(135deg,#2e2920,#221e18);min-height:90px}
.blk-img{background:linear-gradient(135deg,rgba(255,189,35,.5),rgba(255,189,35,.12));min-height:90px}
.blk-row{height:44px}
.bc.on .blk{animation:build 6s cubic-bezier(.7,0,.2,1) infinite}
.bc.on .blk:nth-child(2){animation-delay:.25s}
.bc.on .blk:nth-child(3){animation-delay:.5s}
.bc.on .blk:nth-child(4){animation-delay:.75s}
.bc.on .blk:nth-child(5){animation-delay:1s}
@keyframes build{0%{transform:scaleX(0)}12%,90%{transform:scaleX(1)}97%,100%{transform:scaleX(0)}}
.cursor{position:absolute;left:20%;top:30%;width:18px;height:18px;z-index:3}
.bc.on .cursor{animation:cur 5s ease-in-out infinite}
@keyframes cur{0%,10%{left:20%;top:30%}35%,55%{left:62%;top:40%}45%{scale:.85}85%,100%{left:30%;top:78%}}
.bc-stat{display:flex;align-items:baseline;gap:2px;margin-top:14px;font-size:30px;font-weight:800;letter-spacing:-.03em}
.bc-stat small{margin-left:8px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:var(--ink-2)}
.uptime{display:flex;align-items:flex-end;gap:3px;height:34px;margin-top:18px}
.uptime i{flex:1;height:100%;border-radius:3px;background:#3ddc84;opacity:.85;transform:scaleY(0);transform-origin:bottom;transition:transform .4s}
.uptime i.warn{height:60%;background:var(--primary)}
.uptime i.bad{height:35%;background:#ff5a4f}
.on .uptime i{transform:scaleY(1)}
.uptime i{position:relative}
.uptime i::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);z-index:2;padding:5px 8px;border-radius:6px;background:#15120e;border:1px solid rgba(255,255,255,.18);box-shadow:0 8px 20px -8px rgba(0,0,0,.6);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.04em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s}
.uptime i:nth-child(-n+6)::after{left:0;transform:none}
.uptime i:nth-last-child(-n+6)::after{left:auto;right:0;transform:none}
@media (hover:hover){
  .uptime i:hover{z-index:3;opacity:1}
  .uptime i:hover::after{opacity:1}
}
.uptime i.is-picked{opacity:1;outline:2px solid currentColor;outline-offset:1px}
.uptime-tip{margin:8px 0 0;font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:inherit}
.uptime-tip:empty{display:none}
.uptime-key{display:flex;align-items:center;gap:6px;margin:10px 0 0;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-2)}
.uptime-key span{font-size:12px;line-height:1}
.uptime-key .warn{color:var(--primary)}
.uptime-key .bad{color:#ff5a4f;margin-left:8px}
.bc-log{display:grid;gap:8px;margin-top:18px;font-family:var(--mono);font-size:11.5px;color:var(--ink-2)}
.bc-log div{display:flex;align-items:center;gap:8px;opacity:0;transform:translateX(-10px);transition:opacity .5s,transform .5s}
.bc-log b{display:grid;place-items:center;flex:none;width:16px;height:16px;border-radius:50%;background:var(--primary);color:var(--primary-ink);font-size:9px}
.bc.on .bc-log div{opacity:1;transform:none}
.bc.on .bc-log div:nth-child(2){transition-delay:.2s}
.bc.on .bc-log div:nth-child(3){transition-delay:.4s}
.chart{position:relative;height:170px}
.chart svg{display:block;width:100%;height:100%;overflow:visible}
.chart-l{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 2.2s cubic-bezier(.6,0,.2,1)}
.chart-a{opacity:0;transition:opacity 1s 1.2s}
.bc.on .chart-l{stroke-dashoffset:0}
.bc.on .chart-a{opacity:1}
.chart-pin{position:absolute;right:4%;top:2%;padding:7px 10px;border-radius:9px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;opacity:0;transform:translateY(8px);transition:opacity .5s 2s,transform .5s 2s}
.bc.on .chart-pin{opacity:1;transform:none}
@media (max-width:900px){
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bc-build{grid-column:span 2;grid-row:auto;min-height:460px}
  .bc-host,.bc-care{grid-column:span 1}
  .bc-grow{grid-column:span 2;grid-template-columns:1fr}
}
@media (max-width:640px){
  .bento{grid-template-columns:1fr;gap:14px}
  .bc-build,.bc-host,.bc-care,.bc-grow{grid-column:auto}
  .bc{padding:22px}
  .bc-build{min-height:0}
  .builder{position:relative;inset:auto;height:230px;margin-top:24px}
}
/* Without JS the observers never run: show every card in its finished state. */
.no-js .bc .blk{transform:none}
.no-js .uptime i{transform:none}
.no-js .bc-log div{opacity:1;transform:none}
.no-js .chart-l{stroke-dashoffset:0}
.no-js .chart-a,.no-js .chart-pin{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .hero ~ section [data-reveal]{opacity:1;transform:none;transition:none}
  .bc,.bc-log div,.uptime i,.chart-l,.chart-a,.chart-pin{transition:none}
  .bc .blk,.bc.on .blk{animation:none;transform:scaleX(1)}
  .bc .cursor,.bc.on .cursor{animation:none}
  .bc-log div{opacity:1;transform:none}
  .uptime i{transform:scaleY(1)}
  .chart-l{stroke-dashoffset:0}
  .chart-a,.chart-pin{opacity:1;transform:none}
}

/* live status panel */
section.status-band{padding:0 0 104px}
.status{position:relative;overflow:hidden;padding:32px;border-radius:28px;background:var(--dark);border:1px solid rgba(255,255,255,.08);color:#fff}
.status::before{content:"";position:absolute;top:-220px;right:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.18),transparent 62%);pointer-events:none}
.status > *{position:relative}
.status-head{display:flex;align-items:center;gap:16px;margin-bottom:24px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:inherit;text-decoration:none}
.status-head .status-live{margin-right:auto}
.status-link{color:var(--primary);white-space:nowrap}
.status-head:hover .status-link,.status-head:focus-visible .status-link{text-decoration:underline;text-underline-offset:3px}
.status-head:focus-visible{outline:2px solid var(--primary);outline-offset:6px;border-radius:6px}
.status-live{display:flex;align-items:center;gap:10px;margin:0;font:inherit;color:#fff}
.status-upd{color:#8b8375}
.status-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.st{display:flex;flex-direction:column;min-width:0;min-height:280px;padding:22px;border-radius:20px;background:#12100c;border:1px solid rgba(255,255,255,.06)}
.st-num{font-size:48px;font-weight:800;letter-spacing:-.05em;line-height:1;white-space:nowrap}
.st-num em{font-style:normal;color:var(--primary)}
.st-label{margin-top:8px;font-size:14px;color:#a79f92}
.st-viz{margin-top:auto;padding-top:22px}
.st-rows{display:grid;gap:9px;margin:auto 0 0;padding:22px 0 0;list-style:none;font-size:13px;font-weight:600}
.st-rows li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.st-rows b{font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.1em;color:#3ddc84}
.st-rows b.is-down{color:#ff5a4f}
.st-name{min-width:0;line-height:1.25}
.st-pct{font-family:var(--mono);font-size:10.5px;font-weight:500;color:#a79f92}
.st-minis{display:grid;gap:9px;margin:auto 0 0;padding:22px 0 0;list-style:none;font-size:12.5px}
.st-minis li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 10px;align-items:center}
.st-minis meter{grid-column:1/-1;grid-row:2;width:100%;height:6px;-webkit-appearance:none;appearance:none;border:0;border-radius:3px;background:#2a261f}
.st-minis meter::-webkit-meter-bar{height:6px;border:0;border-radius:3px;background:#2a261f}
.st-minis meter::-webkit-meter-optimum-value{border-radius:3px;background:#3ddc84}
.st-minis meter::-moz-meter-bar{border-radius:3px;background:#3ddc84}
.st.on .st-rows li{opacity:1;transform:none}
.st.on .st-rows li:nth-child(2){transition-delay:.12s}
.st.on .st-rows li:nth-child(3){transition-delay:.24s}
.st.on .st-rows li:nth-child(4){transition-delay:.36s}
.st .uptime{height:48px;margin-top:0}
.st-axis{display:flex;justify-content:space-between;margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#6f685c}
.st-chat{display:grid;gap:8px;justify-items:start}
.bub{max-width:92%;margin:0;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.bub-client{background:#221e18;color:#cfc8bb;border-bottom-left-radius:4px}
.bub-us{justify-self:end;background:var(--primary);color:var(--primary-ink);font-weight:600;border-bottom-right-radius:4px}
.st-meta{justify-self:end;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#6f685c;opacity:0;transition:opacity .45s}
.st.on .bub,.st.on .st-meta{opacity:1;transform:none}
.st.on .bub-us{transition-delay:.9s}
.st.on .st-meta{transition-delay:1.3s}
@media (min-width:1100px){
  .st-reply .st-num{font-size:40px;line-height:1.2}
}
@media (max-width:1099px){
  .status-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Three tiles (no PageSpeed tile): a row of three, else two with the last one spanning. */
@media (min-width:900px){
  .status-grid.is-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:641px) and (max-width:899px){
  .status-grid.is-3 > :last-child{grid-column:1/-1}
}
@media (max-width:640px){
  section.status-band{padding-bottom:64px}
  .status{padding:20px;border-radius:22px}
  .status-upd{display:none}
  .status-grid{grid-template-columns:1fr}
  .st{min-height:0}
}
.no-js .st-rows li,.no-js .bub,.no-js .st-meta{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .st-rows li,.bub,.st-meta{transition:none}
  .st-rows li,.bub,.st-meta{opacity:1;transform:none}
}

/* work: dark band, sticky stacking cards */
.band-dark{background:var(--dark);color:#fff}
.band-dark .head,
.band-dark > .wrap > h2.big{background:var(--dark)}
.band-dark .head.stuck{background:rgba(6,5,3,.92);border-bottom-color:rgba(255,255,255,.1);box-shadow:0 1px 0 rgba(255,255,255,.08),0 8px 24px -16px rgba(0,0,0,.6)}
.band-dark .head-note{color:#a79f92}
.band-dark .link{color:var(--primary)}
.pc-stack{position:relative}
.pc{position:sticky;top:calc(var(--chrome-h,67px) + 118px);display:grid;grid-template-columns:.8fr 1.2fr;height:calc(100vh - var(--chrome-h,67px) - 170px);min-height:440px;max-height:640px;margin-bottom:6vh;border-radius:28px;overflow:hidden;background:#1a1611;border:1px solid rgba(255,255,255,.08);box-shadow:0 -30px 60px -30px rgba(0,0,0,.9);color:#fff}
.pc:nth-child(2){top:calc(var(--chrome-h,67px) + 136px)}
.pc:nth-child(3){top:calc(var(--chrome-h,67px) + 154px)}
.pc:nth-child(4){top:calc(var(--chrome-h,67px) + 172px)}
.pc:nth-child(5){top:calc(var(--chrome-h,67px) + 190px);margin-bottom:0}
.pc-info{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:44px}
.pc-n{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--primary)}
.pc h3{font-size:clamp(34px,4vw,56px);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:14px 0 16px}
.pc p{max-width:340px;margin:0;line-height:1.55;color:#a79f92}
.pc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pc-tags span{padding:6px 10px;border:1px solid rgba(255,255,255,.14);border-radius:99px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#cfc8bb}
.pc-visit{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--primary);overflow-wrap:anywhere}
.pc-visit .arr{display:inline-block;transition:transform .25s}
.pc-pic{position:relative;overflow:hidden;background:#0e0c09}
.pc-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;transform:scale(1.08);transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pc-pic::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#1a1611 0%,transparent 22%);pointer-events:none}
@media (hover:hover){
  .pc:hover .pc-pic img{transform:scale(1.02)}
  .pc:hover .pc-visit .arr{transform:translate(4px,-4px)}
}
/* Stacked layout: the cards still pin and stack, but they sit under the
   pinned "Our work." heading rather than a fixed desktop offset, so they
   start at --work-head-h (measured in site.js). Each card is sized to the
   screen left below that line and its screenshot takes whatever the text
   leaves, so a pinned card never hides its own bottom half. */
@media (max-width:900px){
  .pc{--pc-top:calc(var(--chrome-h,67px) + var(--work-head-h,64px) + 12px);top:var(--pc-top);grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:min(600px,calc(100svh - var(--pc-top) - 56px));min-height:0;max-height:none;margin-bottom:5vh}
  .pc:nth-child(2){top:calc(var(--pc-top) + 10px)}
  .pc:nth-child(3){top:calc(var(--pc-top) + 20px)}
  .pc:nth-child(4){top:calc(var(--pc-top) + 30px)}
  .pc:nth-child(5){top:calc(var(--pc-top) + 40px)}
  .pc-info{gap:16px;padding:28px}
  .pc h3{font-size:clamp(28px,7.5vw,40px);margin:10px 0 12px}
  .pc-tags{margin-top:16px}
  .pc-pic{min-height:0}
  .pc-pic::after{background:linear-gradient(180deg,#1a1611 0%,transparent 25%)}
}
@media (max-width:640px){
  .pc-info{padding:24px}
}
/* Too short a screen to pin anything and still read it. */
@media (max-height:560px){
  .pc,.pc:nth-child(n){position:relative;top:auto;height:auto;margin-bottom:18px}
  .pc-pic{aspect-ratio:16/10}
}
@media (prefers-reduced-motion:reduce){
  .pc-pic img,.pc-visit .arr{transition:none}
}

/* steps: one gold line, filled by scroll (--prog set in site.js) */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;padding-top:62px}
.track{position:absolute;top:22px;left:0;right:0;height:2px;border-radius:2px;background:var(--border)}
.track i{position:absolute;inset:0;border-radius:2px;background:var(--primary);transform:scaleX(var(--prog,0));transform-origin:left}
.step{position:relative}
.step .k{position:absolute;top:-62px;left:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--border);font-family:var(--mono);font-size:12px;transition:background .4s,border-color .4s,box-shadow .4s,color .4s}
.step.lit .k{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);box-shadow:0 0 0 8px rgba(255,189,35,.18)}
.step h3{font-size:26px;font-weight:800;letter-spacing:-.03em;margin:0 0 8px}
.step p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:640px){
  .steps{grid-template-columns:1fr;gap:34px;padding:0 0 0 64px}
  .track{top:8px;bottom:8px;left:21px;right:auto;width:2px;height:auto}
  .track i{transform:scaleY(var(--prog,0));transform-origin:top}
  .step .k{top:-6px;left:-64px}
}
@media (prefers-reduced-motion:reduce){
  .step .k{transition:none}
}

/* final CTA */
.cta{position:relative}
.cta::before{content:"";position:absolute;left:50%;top:50%;width:700px;height:700px;max-width:140vw;max-height:140vw;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle,rgba(255,189,35,.25),transparent 60%);animation:breathe 8s ease-in-out infinite;pointer-events:none}
.cta > *{position:relative}
.cta h2{font-size:clamp(56px,11vw,150px);letter-spacing:-.06em;line-height:.9;margin-bottom:22px}
.cta-note{margin:0 auto 34px;max-width:32em;font-size:18px;line-height:1.55;color:#a79f92}
.btn.magnet{transition:transform .2s ease,background .15s ease,box-shadow .2s ease}
.btn .arr{display:inline-block;transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
@media (max-width:640px){
  .cta-note{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .cta::before{animation:none}
  .magnet,.btn .arr{transition:none}
}

/* ---- /propresenter — Tedim Bible for ProPresenter ------------------------
   Reuses the legal-page layout; only the hero's projector-slide mock is new. */
.pp-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.legal-hero .pp-tedim{margin-top:14px;font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--primary)}
.pp-slide{background:#0b0906;border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:clamp(28px,4vw,48px);box-shadow:0 30px 70px -30px rgba(0,0,0,.7)}
.pp-ref{font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--primary);margin-bottom:18px}
.legal-hero .pp-verse{font-size:clamp(22px,2.6vw,32px);line-height:1.3;font-weight:700;letter-spacing:-.02em;color:#fff;max-width:none;text-wrap:balance}
.pp-bar{display:flex;justify-content:space-between;gap:12px;margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.16);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
@media (max-width:980px){.pp-grid{grid-template-columns:minmax(0,1fr)}}
/* Mac first-open step guide */
.mac-guide{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:clamp(22px,3.4vw,34px);margin:8px 0 22px;box-shadow:0 18px 40px -28px rgba(27,20,9,.25);scroll-margin-top:calc(var(--chrome-h,67px) + 24px)}
.mac-guide-k{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:hsl(38 92% 34%);background:hsl(42 100% 57%/.14);border-radius:999px;padding:5px 11px}
.legal-sec .mac-guide h3{margin:14px 0 8px;font-size:clamp(19px,2.2vw,22px)}
.legal-sec .mac-guide-head p{font-size:15.5px;margin:0 0 24px}
.legal-sec .mac-steps{list-style:none;margin:0;padding:0;counter-reset:none}
.legal-sec .mac-step{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);gap:16px;padding:0 0 22px;font-size:inherit}
.legal-sec .mac-step:before{content:'';position:absolute;left:18px;top:40px;bottom:4px;width:2px;height:auto;border-radius:2px;background:var(--border)}
.legal-sec .mac-step:last-child{padding-bottom:0}
.legal-sec .mac-step:last-child:before{display:none}
.mac-num{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:var(--primary-ink);font-family:var(--mono);font-weight:700;font-size:14px;box-shadow:0 0 0 5px hsl(42 100% 57%/.16)}
.mac-body{background:var(--muted);border-radius:14px;padding:13px 17px}
.mac-body h4{margin:0 0 3px;font-size:15.5px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.legal-sec .mac-body p{margin:0;font-size:15px;line-height:1.7}
.mac-body kbd{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--card);border:1px solid var(--border);border-bottom-width:2px;border-radius:6px;padding:1px 7px}
.ui-btn{display:inline-block;font-size:13.5px;font-weight:600;line-height:1.5;color:#fff;background:hsl(211 100% 50%);border-radius:6px;padding:0 9px;white-space:nowrap}
.ui-path{font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:1px 8px}
.ui-path i{font-style:normal;color:var(--ink-2);padding:0 2px}
.mac-body q{color:var(--ink);font-weight:600}
.legal-sec .mac-guide-foot{margin:24px 0 0;padding-top:18px;border-top:1px dashed var(--border);font-size:14.5px}
details.mac-guide>summary{list-style:none;cursor:pointer;position:relative;padding-right:48px;display:block}
details.mac-guide>summary::-webkit-details-marker{display:none}
.legal-sec details.mac-guide .mac-guide-head p{margin:0}
details.mac-guide[open]>summary{margin-bottom:22px}
.mac-toggle{position:absolute;right:0;top:4px;width:34px;height:34px;border-radius:50%;background:hsl(42 100% 57%/.16);transition:transform .2s ease}
.mac-toggle:before,.mac-toggle:after{content:'';position:absolute;left:50%;top:50%;width:12px;height:2px;background:hsl(38 92% 34%);transform:translate(-50%,-50%)}
.mac-toggle:after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s ease}
details.mac-guide[open] .mac-toggle:after{transform:translate(-50%,-50%) rotate(0)}
details.mac-guide>summary:focus-visible{outline:2px solid var(--primary);outline-offset:6px;border-radius:8px}
.legal-sec .mac-guide-intro{font-size:15.5px;margin:0 0 24px}
.bug-report{margin-top:26px}
.bug-status{border-radius:12px;padding:14px 16px;font-size:15px;margin-bottom:18px;border:1px solid var(--border);color:var(--ink)}
.bug-status.sent{background:rgba(46,160,67,.1);border-color:rgba(46,160,67,.35)}
.bug-status.error{background:rgba(255,189,35,.14);border-color:rgba(255,189,35,.45)}
.bug-form{display:flex;flex-direction:column;gap:18px}
.bug-form label{color:var(--ink);opacity:.6}
.bug-form input[type=text],.bug-form input[type=email],.bug-form textarea,.bug-form select{background:var(--bg,#fff);border:1px solid var(--border);color:var(--ink);border-radius:12px;padding:13px 15px;font-size:15px;font-family:inherit;width:100%;outline:none}
.bug-form input::placeholder,.bug-form textarea::placeholder{color:var(--ink);opacity:.4}
.bug-form select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(255,189,35,.25)}
.bug-form .note{color:var(--ink);opacity:.55}
@media (max-width:560px){.bug-form .two{grid-template-columns:1fr}}
@media (max-width:560px){.legal-sec .mac-step{grid-template-columns:30px minmax(0,1fr);gap:12px}.mac-num{width:30px;height:30px;font-size:12px}.legal-sec .mac-step:before{left:14px;top:34px}}