/* Global WebForce — "Orbit" theme (branch redesign-bold, 2026-10-08).
   Poppins throughout (the logo's face); orange / ink / paper from the logo, orange pushed into a warm gradient.
   Every effect is an enhancement: without js/main.js all content shows (reveal states need html.js). */

/* ═══════════════ FONTS ═══════════════ */
@font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-400-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-500-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-600-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-700-latin.woff2) format("woff2"); }
@font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/poppins-800-latin.woff2) format("woff2"); }
/* Arial tuned to Poppins' metrics, so the swap doesn't shift the layout */
@font-face { font-family: "Poppins Fallback"; src: local("Arial"); size-adjust: 113.7%; ascent-override: 92.3%; descent-override: 30.8%; line-gap-override: 8.8%; }

@property --a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ═══════════════ TOKENS ═══════════════ */
:root {
  --ink: #0B0A09; --ink-2: #131110; --ink-3: #1C1917;
  --paper: #FBF8F3; --muted: #B3ABA2; --line: rgba(251, 248, 243, .12);
  --orange: #FF5A14; --amber: #FFB23F; --rose: #FF4D7A;
  --grad: linear-gradient(100deg, #FF5A14 0%, #FF8A3D 50%, #FFC15E 100%);
  --font: Poppins, "Poppins Fallback", system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --r: 28px;
  --gut: clamp(16px, 4vw, 48px);
  --hdr: 96px;
  color-scheme: dark;
  interpolate-size: allow-keywords;
}

/* ═══════════════ BASE ═══════════════ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--paper); font: 400 1.0625rem/1.65 var(--font); -webkit-font-smoothing: antialiased; overflow-x: clip; }
/* film grain over everything */
body::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .045; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--orange); color: var(--ink); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 400; padding: 12px 18px; border-radius: 12px; background: var(--orange); color: var(--ink); font-weight: 600; text-decoration: none; transition: top .3s; }
.skip:focus { top: 16px; }

.wrap { width: min(100% - 2 * var(--gut), 1280px); margin-inline: auto; }
.section { position: relative; padding-block: clamp(88px, 12vw, 168px); }
/* a link to a section lands on its heading, not its empty top padding (js/main.js initAnchors measures this exactly; this is the fallback) */
main [id] { scroll-margin-top: 28px; }   /* cards, feature blocks and other unpadded targets: a little air under the header */
.section[id] { scroll-margin-top: calc(20px - clamp(88px, 12vw, 168px)); }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: .8125rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: currentColor; }
.h2 { font-size: clamp(2.3rem, 5.4vw, 4.75rem); font-weight: 700; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
.lede { max-width: 44ch; font-size: clamp(1.05rem, 1.35vw, 1.25rem); color: var(--muted); }
.grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sec-head { display: grid; gap: 20px; justify-items: start; margin-bottom: clamp(48px, 6vw, 88px); }
.sec-head--center { justify-items: center; text-align: center; }
.sec-head--center .lede { margin-inline: auto; }
.link { color: inherit; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .3s; }
.link:hover { color: var(--orange); }
/* honest gap marker: a fact we don't have yet */
.gap { display: inline-flex; width: fit-content; padding: 4px 12px; border: 1px dashed currentColor; border-radius: 999px; font-size: .75rem; font-weight: 500; color: var(--amber); }

/* logo — the same symbols as before, coloured for dark grounds; it never animates */
.lg-globe { fill: none; stroke: var(--paper); stroke-width: 4.4; }
.lg-ring, .lg-web { fill: var(--orange); }
.lg-word { fill: var(--paper); }

/* ═══════════════ BUTTONS ═══════════════ */
.btn { --bg: var(--orange); --fg: var(--ink); --fill: var(--paper); --fill-fg: var(--ink);
  position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 17px 28px; border: 0; border-radius: 999px; background: var(--bg); color: var(--fg);
  font: 600 1rem/1 var(--font); text-decoration: none; cursor: pointer;
  transition: color .4s var(--ease), translate .35s var(--ease), box-shadow .4s; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--fill); transform: translateY(101%); transition: transform .5s var(--ease); }
.btn:hover { color: var(--fill-fg); }
.btn:hover::before { transform: none; }
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .4s var(--ease); }
.btn:hover svg { transform: translateX(4px); }
.btn--ghost { --bg: transparent; --fg: var(--paper); box-shadow: inset 0 0 0 1.5px rgba(251, 248, 243, .28); }
.btn--ink { --bg: var(--ink); --fg: var(--paper); --fill: var(--paper); }
.btn--sm { padding: 12px 18px; font-size: .9rem; }
.btn--block { width: 100%; }

/* ═══════════════ CHROME: progress bar, cursor ring ═══════════════ */
.progress { position: fixed; inset: 0 0 auto; z-index: 120; height: 3px; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); }
.cursor { position: fixed; left: 0; top: 0; z-index: 250; width: 36px; height: 36px; margin: -18px 0 0 -18px; border: 1.5px solid #fff; border-radius: 50%; pointer-events: none; mix-blend-mode: difference; opacity: 0; transition: opacity .3s, width .35s var(--ease), height .35s var(--ease), margin .35s var(--ease), background-color .35s; }
.cursor.is-on { opacity: 1; }
.cursor.is-hover { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: #fff; }
@media (pointer: coarse) { .cursor { display: none; } }

/* ═══════════════ HEADER — floating glass pill, hides on the way down ═══════════════
   Every page one click away: Services (a panel with the five service pages), Packages, Work, About, Contact, and Get a quote.
   From 1080 px the links sit in the bar; below that the same list opens as a full-screen menu. */
.hdr { position: fixed; inset: 14px 0 auto; z-index: 100; pointer-events: none; transition: transform .6s var(--ease); }
.hdr.is-hidden { transform: translateY(calc(-100% - 20px)); }
.hdr__bar { position: relative; pointer-events: auto; width: min(100% - 2 * var(--gut), 1280px); margin-inline: auto; display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(19, 17, 16, .5); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); transition: background-color .4s; }
.hdr.is-scrolled .hdr__bar { background: rgba(19, 17, 16, .82); }
.brand { display: flex; flex: none; }
/* the logo's letters fill only about a third of its height, so it needs this size to read as a brand (owner, 2026-10-08) */
.logo { display: block; width: auto; height: 52px; }
.logo--lg { height: clamp(64px, 8vw, 104px); }
.nav { margin-left: auto; display: flex; align-items: center; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links > li:not(.nav__menu-foot) > a:not(.btn), .nav__sub-btn { display: flex; align-items: center; padding: 10px 15px; border: 0; border-radius: 999px; background: none; font: 500 .95rem/1.2 var(--font); color: rgba(251, 248, 243, .82); text-decoration: none; cursor: pointer; transition: background-color .3s, color .3s; }
.nav__links > li:not(.nav__menu-foot) > a:not(.btn):hover, .nav__sub-btn:hover, .has-sub.is-open > .nav__sub-btn { background: rgba(251, 248, 243, .08); color: var(--paper); }
/* the page you're on (Services lights up on any of the five service pages) */
.nav__links > li > a[aria-current="page"], .has-sub.is-current > .nav__sub-btn { background: rgba(255, 90, 20, .14); color: var(--paper); }
.chev { flex: none; width: 13px; height: 13px; margin-left: 6px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.has-sub.is-open .chev { transform: rotate(180deg); }
.nav__close, .nav__menu-cta, .nav__menu-foot, .nav__toggle { display: none; }

/* the Services panel: the five pages, a "Build your quote" shortcut, and the overview + FAQ links */
.sub__list { display: grid; gap: 2px; }
.sub__list a { display: grid; gap: 1px; padding: 12px 16px; border-radius: 16px; text-decoration: none; transition: background-color .25s; }
.sub__list a:hover, .sub__list a[aria-current] { background: rgba(255, 90, 20, .1); }
.sub__k { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.sub__t { font-size: 1rem; font-weight: 600; color: var(--paper); }
.sub__d { font-size: .84rem; color: var(--muted); }
.sub__feat { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; border-radius: 18px; background: radial-gradient(100% 80% at 100% 0%, rgba(255, 90, 20, .3), transparent 70%), rgba(251, 248, 243, .04); }
.sub__fk { font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.sub__ft { font-size: 1.2rem; font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }
.sub__feat .btn { margin-top: auto; }
.sub__fl { font-size: .85rem; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(251, 248, 243, .25); text-underline-offset: 3px; transition: color .3s; }
.sub__fl:hover { color: var(--paper); }
.sub__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin: 0; padding: 12px 16px 4px; border-top: 1px solid var(--line); font-size: .88rem; }
.sub__foot a { color: var(--muted); text-decoration: none; transition: color .3s; }
.sub__foot a:hover { color: var(--orange); }

@media (min-width: 1080px) {
  /* on wide screens the popover list is just the nav */
  .nav__links[popover] { position: static; inset: auto; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none; color: inherit; overflow: visible; }
  .sub { position: absolute; top: 100%; left: 50%; z-index: 5; width: min(760px, 100%); padding-top: 12px; opacity: 0; visibility: hidden; translate: -50% 8px; transition: opacity .25s, translate .4s var(--ease), visibility 0s .4s; }
  .has-sub.is-open .sub, html:not(.js) .has-sub:hover .sub, html:not(.js) .has-sub:focus-within .sub, .failsafe .has-sub:hover .sub, .failsafe .has-sub:focus-within .sub { opacity: 1; visibility: visible; translate: -50% 0; transition-delay: 0s; }
  .sub__panel { display: grid; grid-template-columns: 1fr 250px; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 26px; background: var(--ink-2); box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .85); }
}
@media (max-width: 1079px) {
  .nav__links { display: none; }
  .nav__toggle { display: grid; place-content: center; gap: 6px; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(251, 248, 243, .06); cursor: pointer; }
  .nav__toggle span, .nav__close span { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
  .nav__links:popover-open { display: flex; flex-direction: column; align-items: stretch; gap: 2px; position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 92px var(--gut) 40px; overflow-y: auto; border: 0; color: var(--paper); background: radial-gradient(90% 60% at 100% 0%, rgba(255, 90, 20, .35), transparent 60%), var(--ink); }
  .nav__links:popover-open > li { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 50ms + 60ms); }
  .nav__links:popover-open > li:not(.nav__menu-foot) > a:not(.btn), .nav__links:popover-open .nav__sub-btn { width: 100%; justify-content: space-between; padding: 8px 0; border-radius: 0; background: none; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 700; letter-spacing: -.03em; color: var(--paper); }
  .nav__links:popover-open > li > a[aria-current="page"], .nav__links:popover-open .has-sub.is-current > .nav__sub-btn { background: none; color: var(--orange); }
  .nav__links:popover-open .chev { width: 24px; height: 24px; }
  .sub { display: none; }
  .has-sub.is-open .sub, html:not(.js) .sub, .failsafe .sub { display: block; }
  .sub__panel { padding: 2px 0 12px 2px; }
  .sub__feat, .sub__d, .sub__foot { display: none; }
  .sub__list { gap: 0; border-left: 2px solid rgba(255, 90, 20, .45); }
  .sub__list a { grid-template-columns: 96px 1fr; align-items: baseline; gap: 10px; padding: 9px 0 9px 16px; border-radius: 0; }
  .sub__list a:hover, .sub__list a[aria-current] { background: none; }
  .sub__list a[aria-current] .sub__t { color: var(--orange); }

  .sub__t { font-size: 1.1rem; font-weight: 500; }
  .nav__links:popover-open .nav__menu-cta { display: block; margin-top: 22px; }
  .nav__menu-cta .btn { width: 100%; }
  .nav__links:popover-open .nav__menu-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; }
  .nav__menu-foot a { font-size: 1rem; font-weight: 500; color: var(--muted); text-decoration: none; overflow-wrap: anywhere; }
  .nav__close { display: block; position: absolute; top: 24px; right: var(--gut); }
  .nav__close button { display: grid; place-content: center; width: 50px; height: 50px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: none; cursor: pointer; }
  .nav__close span:first-child { transform: translateY(1px) rotate(45deg); }
  .nav__close span:last-child { transform: translateY(-1px) rotate(-45deg); }
  .nav__links::backdrop { background: transparent; }
}
@media (max-width: 519px) { .nav__cta { display: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }

/* ═══════════════ REVEALS (only with JS; the failsafe shows everything if the script never runs) ═══════════════ */
.js [data-reveal] { opacity: 0; translate: 0 32px; transition: opacity 1s var(--ease) var(--d, 0s), translate 1s var(--ease) var(--d, 0s); }
.js [data-reveal].is-in { opacity: 1; translate: none; }
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w > span { display: inline-block; }
.js [data-split] .w > span { translate: 0 108%; transition: translate 1.1s var(--ease) calc(var(--wi) * 55ms); }
.js [data-split].is-in .w > span { translate: none; }
/* split words inside a gradient span carry the gradient themselves */
[data-split] .grad .w > span { background: var(--grad); -webkit-background-clip: text; background-clip: text; }
.js [data-stagger] > * { opacity: 0; translate: 0 28px; transition: opacity .9s var(--ease) calc(var(--k, 0) * 80ms), translate .9s var(--ease) calc(var(--k, 0) * 80ms), transform .5s var(--ease), background-color .3s, border-color .3s, color .3s; }
.js [data-stagger].is-in > * { opacity: 1; translate: none; }
.failsafe [data-reveal], .failsafe [data-stagger] > *, .failsafe [data-split] .w > span { opacity: 1 !important; translate: none !important; }

/* spotlight: a glow and a lit edge follow the pointer (vars set by js) */
.spot { --mx: 50%; --my: 50%; position: relative; }
.spot > * { position: relative; z-index: 1; }
.spot::before, .spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; }
.spot::before { background: radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 90, 20, .16), transparent 45%); }
.spot::after { padding: 1px; background: radial-gradient(260px circle at var(--mx) var(--my), rgba(255, 150, 80, .95), transparent 55%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.spot:hover::before, .spot:hover::after { opacity: 1; }

/* ═══════════════ HERO ═══════════════ */
.hero { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: center; min-height: 100vh; min-height: 100svh; padding: calc(var(--hdr) + 40px) 0 110px; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.blob { position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 62%); animation: drift 18s ease-in-out infinite alternate; }
.blob--1 { --c: rgba(255, 90, 20, .5); top: -28vmax; right: -18vmax; }
.blob--2 { --c: rgba(255, 77, 122, .26); bottom: -34vmax; left: -22vmax; animation-duration: 23s; animation-delay: -7s; }
.blob--3 { --c: rgba(255, 178, 63, .2); top: 18%; left: 30%; width: 42vmax; height: 42vmax; animation-duration: 27s; animation-delay: -12s; }
@keyframes drift { to { transform: translate(7vmax, 5vmax) scale(1.15); } }
/* a grid floor running toward the horizon */
.hero__floor { position: absolute; left: -50%; right: -50%; bottom: 0; height: 46%; overflow: hidden; perspective: 420px; -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); opacity: .7; }
.hero__floor::before { content: ""; position: absolute; left: 0; right: 0; bottom: -64px; height: 260%; background-image: linear-gradient(rgba(251, 248, 243, .1) 1px, transparent 1px), linear-gradient(90deg, rgba(251, 248, 243, .1) 1px, transparent 1px); background-size: 72px 72px; transform-origin: 50% 100%; transform: rotateX(72deg); animation: floor 2.4s linear infinite; }
@keyframes floor { to { transform: rotateX(72deg) translateY(72px); } }

.hero__inner { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .05); font-size: .92rem; font-weight: 500; }
.badge__dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: var(--orange); }
/* a ring that grows and fades: scale + opacity only, so it never repaints the page (badge dot and .pulse) */
.badge__dot::after, .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 2s var(--ease) infinite; }
@keyframes ping { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.6); } }
.hero__title { text-wrap: balance; margin: 24px 0 28px; font-size: clamp(2.7rem, 5.7vw, 5.6rem); font-weight: 700; line-height: 1.02; letter-spacing: -.045em; }
.hero__title .grad .w > span { background-size: 200% 100%; animation: shimmer 6s ease-in-out 2 alternate; }   /* one round trip: a moving text gradient repaints every frame */
@keyframes shimmer { to { background-position: 100% 0; } }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* the stage: globe + floating work */
.hero__stage { --px: 0; --py: 0; position: relative; width: 100%; max-width: 600px; aspect-ratio: 1; justify-self: center; }
.par { translate: calc(var(--px) * var(--d, 0) * 1px) calc(var(--py) * var(--d, 0) * 1px); transition: translate .9s var(--ease); }
@keyframes spin2d { to { transform: rotate(360deg); } }

/* home hero: the logo's G, its globe come to life (js/hero-globe.js). The G writes itself once, then stays as drawn;
   the still logo lines show until the canvas takes over, and are what you see without JS. */
.gglobe { position: absolute; inset: 5%; touch-action: pan-y; cursor: grab; -webkit-user-select: none; user-select: none; }
.gglobe:active { cursor: grabbing; }
.gglobe > * { position: absolute; }
.gglobe__glow { left: -12%; top: -12%; width: 124%; height: 124%; animation: ggbreathe 6s ease-in-out infinite alternate; }
.gglobe__canvas { left: 12%; top: 12%; width: 76%; height: 76%; }
.gglobe__g { inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 40px rgba(255, 90, 20, .25)); }
.gg-ring { fill: var(--orange); }
.gg-still { fill: none; stroke: var(--paper); stroke-width: 4.4; }
.gglobe.is-live .gg-still { visibility: hidden; }
.gg-wipe { stroke-dashoffset: 1; animation: ggwrite 1.4s cubic-bezier(.65, 0, .25, 1) .25s forwards; }
.gg-barwipe { transform-box: fill-box; transform-origin: 100% 50%; transform: scaleX(0); animation: ggbar .55s var(--ease) 1.55s forwards; }
@keyframes ggwrite { to { stroke-dashoffset: 0; } }
@keyframes ggbar { to { transform: none; } }
@keyframes ggbreathe { to { scale: 1.06; opacity: .75; } }
/* around the G: the phone sits in the G's open top-right, the browser overlaps the lower-left ring (the G still reads by its top arc and bar);
   the mock-ups let a drag through to the globe. Their screens are drawn ("hero screens" below). */
.gglobe ~ .mock { pointer-events: none; }
/* no mouse tracking here (owner, 2026-10-08): the photos and chips simply float while the pointer is over the globe; the globe itself
   follows the pointer only while it is dragged. Keyframes only, no transitions: a glide running as a scroll started stalled the page. */
.gglobe ~ .fchip { animation: bob 3.2s ease-in-out infinite alternate; }
.gglobe ~ .fchip--b { animation-duration: 3.8s; animation-delay: -1.4s; }
.gglobe ~ .fchip--c { animation-duration: 3.5s; animation-delay: -2.6s; }
.gglobe ~ .mock, .gglobe ~ .fchip { animation-play-state: paused; }
.hero__stage:hover > .mock, .hero__stage:hover > .fchip { animation-play-state: running; }
@keyframes bob { from { translate: 0 -7px; } to { translate: 0 7px; } }
/* no glass blur over the moving globe: it would be re-blurred on every frame (same look on this dark ground) */
.gglobe ~ .fchip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(28, 25, 23, .92); }
.gglobe ~ .mock--browser { left: -10%; bottom: 1%; width: 52%; }
.gglobe ~ .mock--phone { right: -3%; top: -1%; width: 21%; aspect-ratio: 9 / 18.5; border: 5px solid #26221F; border-radius: 26px; animation-duration: 8s; animation-delay: -3s; }
.gglobe ~ .fchip--a { left: -4%; top: 6%; }
.gglobe ~ .fchip--b { right: auto; left: -8%; bottom: auto; top: 44%; }
.gglobe ~ .fchip--c { right: -6%; bottom: 4%; top: auto; }

.mock { position: absolute; overflow: hidden; background: #171412; border: 1px solid rgba(251, 248, 243, .14); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85), 0 0 0 1px rgba(0, 0, 0, .3); animation: float 7s ease-in-out infinite alternate; }
@keyframes float { from { transform: var(--t) translateY(-10px); } to { transform: var(--t) translateY(10px); } }
.mock img { width: 100%; height: 100%; object-fit: cover; }
.mock--browser { left: -9%; bottom: 7%; width: 64%; border-radius: 14px; }
.mock--browser img { height: auto; aspect-ratio: 16 / 10; }
.mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #201C19; border-bottom: 1px solid rgba(251, 248, 243, .08); }
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(251, 248, 243, .22); }
.mock__bar i:first-child { background: var(--orange); }
.mock__bar span { margin-left: 10px; padding: 3px 12px; border-radius: 999px; background: rgba(251, 248, 243, .07); font-size: .7rem; color: var(--muted); }
/* hero screens (index.php), an animated UI mockup: close-ups, not whole pages, so the moments read at this size. The computer shows a sample
   business site's headline and "Book now"; the phone is the owner's lock screen. One 8 s loop on both keeps them in step: the cursor taps
   (~2.6 s), the button turns "Sent", the phone wakes and the enquiry pops in (~3.2 s). Resting state = the still picture (reduced motion). */
.scr { display: block; width: 100%; height: auto; fill: var(--paper); }
.mock--phone .scr { height: 100%; }
.scr-btn { transform-box: fill-box; transform-origin: center; animation: scr-btn 8s infinite; }
.scr-b1 { animation: scr-b1 8s infinite; }
.scr-b2 { opacity: 0; animation: scr-b2 8s infinite; }
.scr-cur { animation: scr-cur 8s infinite; }
.scr-ring { opacity: 0; transform-box: fill-box; transform-origin: center; animation: scr-ring 8s infinite; }
.scr-dim { opacity: 0; animation: scr-dim 8s infinite; }
.scr-toast { transform-box: fill-box; transform-origin: 50% 0; animation: scr-toast 8s var(--ease) infinite; }
@keyframes scr-btn { 0%, 31% { fill: #FBF8F3; transform: none; } 33% { fill: #FFC15E; transform: scale(.94); } 37%, 80% { fill: #3DDC84; transform: none; } 84%, 100% { fill: #FBF8F3; } }
@keyframes scr-b1 { 0%, 34%, 84%, 100% { opacity: 1; } 36%, 80% { opacity: 0; } }
@keyframes scr-b2 { 0%, 35%, 82%, 100% { opacity: 0; } 38%, 80% { opacity: 1; } }
@keyframes scr-cur {
  0%, 6% { transform: translate(400px, 300px); opacity: 0; }
  12% { opacity: 1; }
  30% { transform: translate(100px, 196px); }
  33% { transform: translate(100px, 196px) scale(.82); }
  36%, 72% { transform: translate(100px, 196px); opacity: 1; }
  80%, 100% { transform: translate(100px, 196px); opacity: 0; }
}
@keyframes scr-ring { 0%, 32% { opacity: 0; transform: scale(.4); } 34% { opacity: 1; } 50%, 100% { opacity: 0; transform: scale(2); } }
@keyframes scr-dim { 0%, 36%, 92%, 100% { opacity: .62; } 41%, 86% { opacity: 0; } }
@keyframes scr-toast { 0%, 38% { opacity: 0; transform: translateY(-24px) scale(.92); } 44%, 86% { opacity: 1; transform: none; } 91%, 100% { opacity: 0; transform: translateY(-24px) scale(.92); } }
.fchip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(28, 25, 23, .72); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .7); font-size: .82rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.fchip b { font-size: 1.9rem; font-weight: 800; letter-spacing: -.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fchip--a { left: 2%; top: 9%; }
.fchip--b { right: -4%; bottom: 30%; }
.fchip--c { right: 8%; bottom: 2%; }
.pulse { position: relative; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #3DDC84; }
.scroll-cue { position: absolute; left: 50%; bottom: 28px; width: 28px; height: 46px; margin-left: -14px; border: 1.5px solid rgba(251, 248, 243, .35); border-radius: 999px; }
.scroll-cue span { position: absolute; left: 50%; top: 9px; width: 4px; height: 9px; margin-left: -2px; border-radius: 4px; background: var(--orange); animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(16px); } }

/* ═══════════════ TAPES — two crossed marquees ═══════════════ */
.tapes { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 72px); }
.tape { width: 112vw; margin-left: -6vw; overflow: hidden; padding: 20px 0; }
.tape--a { position: relative; z-index: 2; background: var(--orange); color: var(--ink); transform: rotate(-2.4deg); box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .5); }
.tape--b { margin-top: -6px; background: var(--ink-3); border-block: 1px solid var(--line); transform: rotate(1.8deg); }
.tape__track { display: flex; width: max-content; animation: marquee 42s linear infinite; }
.tape--b .tape__track { animation-duration: 55s; animation-direction: reverse; }
.tape:hover .tape__track { animation-play-state: paused; }
.tape ul { display: flex; flex: none; }
.tape li { display: flex; align-items: center; font-size: clamp(1.4rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; white-space: nowrap; }
.tape li::after { content: "✦"; margin-inline: clamp(18px, 2.6vw, 40px); font-size: .55em; }
.tape--b li:nth-child(odd) { color: transparent; -webkit-text-stroke: 1.2px var(--paper); }
.tape--b li::after { color: var(--orange); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ═══════════════ PROOF ═══════════════ */
.tapes + .proof { padding-top: clamp(40px, 6vw, 88px); scroll-margin-top: calc(20px - clamp(40px, 6vw, 88px)); }
.proof__big { max-width: 1120px; margin-top: 28px; font-size: clamp(1.75rem, 4vw, 3.6rem); font-weight: 600; line-height: 1.2; letter-spacing: -.03em; }
.proof__big b { font-weight: 700; }
.sw { color: rgba(251, 248, 243, .16); transition: color .5s; }
.sw.is-lit { color: var(--paper); }
.proof__big b .sw.is-lit { color: var(--orange); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(56px, 7vw, 104px); }
.stat { padding: 34px 28px 30px; border: 1px solid var(--line); border-radius: 24px; background: var(--ink-2); }
.stat__n { display: block; font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 800; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stat__l { display: block; margin-top: 14px; font-weight: 500; color: var(--muted); }

/* ═══════════════ SERVICES — stacking panels ═══════════════ */
.stack { display: grid; gap: 28px; }
.panel { --acc: var(--orange); --p: 0; position: relative; overflow: hidden; padding: clamp(24px, 4vw, 52px); border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); transform-origin: 50% 0; }
.stack.is-stacked .panel { display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: calc(var(--hdr) + 18px + var(--i) * 22px); transform: scale(calc(1 - var(--p) * .05)); }
.panel::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #000; opacity: calc(var(--p) * .55); pointer-events: none; }
.panel--build { --bg: radial-gradient(110% 90% at 100% 0%, rgba(255, 90, 20, .24), transparent 55%), #15110F; }
.panel--grow { --acc: var(--amber); --bg: radial-gradient(110% 90% at 0% 0%, rgba(255, 178, 63, .2), transparent 55%), #17120C; }
.panel--create { --acc: var(--rose); --bg: radial-gradient(110% 90% at 100% 100%, rgba(255, 77, 122, .22), transparent 55%), #180F13; }
.panel--care { --acc: var(--ink); --bg: linear-gradient(135deg, #FF5A14, #FF7A2E 60%, #FF9944); color: var(--ink); border-color: transparent; }
.panel__top { display: grid; grid-template-columns: 1fr minmax(0, .85fr); gap: 32px; align-items: end; margin-bottom: 28px; }
.panel__n { font-size: .85rem; font-weight: 600; letter-spacing: .14em; color: var(--acc); }
.panel__t { margin: 6px 0 8px; font-size: clamp(3rem, 7.2vw, 6.6rem); font-weight: 800; line-height: .95; letter-spacing: -.055em; }
.panel__d { font-size: 1.1rem; color: var(--muted); }
.panel--care .panel__d { color: rgba(11, 10, 9, .78); }
.panel__img { overflow: hidden; height: clamp(120px, 15vw, 190px); border-radius: 20px; background: rgba(251, 248, 243, .06); }
.panel__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.panel:hover .panel__img img { transform: scale(1.06); }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cards--care { grid-template-columns: 1.6fr 1fr; }
.card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: rgba(251, 248, 243, .035); transition: transform .5s var(--ease), background-color .3s; }
.card:hover { transform: translateY(-6px); background: rgba(251, 248, 243, .06); }
.panel--care .card { --acc: var(--orange); background: var(--ink); color: var(--paper); border-color: transparent; }
.card__t { font-size: 1.25rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.3; }
.card__you { font-size: .97rem; color: var(--muted); }
.card__inc { display: grid; gap: 7px; font-size: .92rem; }
.card__inc--2 { grid-template-columns: 1fr 1fr; column-gap: 20px; }
.card__inc li { display: flex; gap: 10px; align-items: baseline; }
.card__inc li::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc); transform: translateY(-2px); }
.card__cta { display: inline-flex; gap: 8px; margin-top: auto; padding-top: 8px; font-weight: 600; color: var(--acc); text-decoration: none; }
.card__cta span { transition: transform .4s var(--ease); }
.card__cta:hover span { transform: translateX(5px); }
.panel__more { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-top: 16px; padding: 18px 24px; border: 1px dashed rgba(251, 248, 243, .2); border-radius: 18px; }
.panel__more .card__cta { margin: 0; padding: 0; }

/* ═══════════════ PACKAGES — tilt cards with a running border ═══════════════ */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1400px; }
.tier { --rx: 0deg; --ry: 0deg; position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 38px); border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(180deg, #181513, #0F0D0C); transform: rotateX(var(--ry)) rotateY(var(--rx)); }
.tier::before { content: ""; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; background: conic-gradient(from var(--a), transparent 0 55%, var(--orange) 72%, var(--amber) 82%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .5s; animation: run 3.5s linear infinite; pointer-events: none; }
.tier:hover::before { opacity: 1; }
.tier:last-child { background: radial-gradient(90% 60% at 50% 0%, rgba(255, 90, 20, .18), transparent 70%), linear-gradient(180deg, #1B1512, #0F0D0C); }
.tier:last-child::before { opacity: .8; }
@keyframes run { to { --a: 360deg; } }
.tier__n { font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.tier__sub { margin-top: 4px; color: var(--muted); }
.tier__pages { display: flex; align-items: baseline; gap: 10px; margin: 24px 0; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.tier__pages b { font-size: clamp(4rem, 7vw, 6.2rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tier__pages span { font-size: 1.1rem; font-weight: 500; color: var(--muted); }
.tier__list { display: grid; gap: 13px; margin-bottom: 30px; font-size: .97rem; }
.tier__list li { display: flex; gap: 12px; align-items: center; }
.ic { flex: none; width: 24px; height: 24px; padding: 3px; border-radius: 50%; }
.yes .ic { background: var(--orange); color: var(--ink); }
.no { color: rgba(251, 248, 243, .55); }
.no .ic { border: 1.5px solid rgba(251, 248, 243, .22); }
.tier .btn { margin-top: auto; }
.incl { display: grid; grid-template-columns: auto 1fr; gap: 18px 40px; align-items: start; margin-top: 24px; padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.incl__t { font-size: 1.15rem; font-weight: 700; padding-top: 6px; }
.incl__list { display: flex; flex-wrap: wrap; gap: 10px; }
.incl__list li { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .04); font-size: .92rem; }
.incl__list li:hover { border-color: var(--orange); }
.incl__note { grid-column: 2; color: var(--muted); font-size: .95rem; }

/* ═══════════════ PROCESS — a line that draws with the scroll ═══════════════ */
.steps { --p: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.steps::before, .steps::after { content: ""; position: absolute; top: 31px; left: 32px; right: calc((100% - 84px) / 4 - 32px); height: 2px; border-radius: 2px; background: var(--line); }
.steps::after { background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p)); box-shadow: 0 0 18px rgba(255, 90, 20, .6); }
.step { position: relative; z-index: 1; }
.step__n { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 26px; border: 1.5px solid var(--line); border-radius: 50%; background: var(--ink); font-size: 1.3rem; font-weight: 700; transition: background-color .5s, color .5s, border-color .5s, box-shadow .5s, transform .6s var(--ease); }
.step.is-on .step__n { background: var(--orange); border-color: var(--orange); color: var(--ink); box-shadow: 0 0 0 8px rgba(255, 90, 20, .14), 0 0 40px rgba(255, 90, 20, .5); transform: scale(1.06); }
.step h3 { text-wrap: balance; margin-bottom: 10px; font-size: 1.3rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; }
.step p { color: var(--muted); }

/* ═══════════════ WORK — native swipe by default; pinned + sideways on scroll with JS (.is-pinned) ═══════════════ */
.work { position: relative; padding-block: clamp(88px, 12vw, 168px); }
.work__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 52px); }
.work__head .h2 { margin-top: 18px; }
.work__count { display: none; white-space: nowrap; font-size: 1.1rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.work__cur { font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; color: var(--paper); }
.work__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.work__viewport::-webkit-scrollbar { display: none; }
.work__track { display: flex; gap: 24px; width: max-content; padding-inline: max(var(--gut), calc((100vw - 1280px) / 2)); }
.case { position: relative; flex: none; overflow: hidden; width: min(80vw, 900px); height: min(52vh, 560px); min-height: 400px; border-radius: var(--r); background: var(--ink-3); scroll-snap-align: center; }
.case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.case:hover img { transform: scale(1.06); }
.case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 9, .1) 20%, rgba(11, 10, 9, .94) 82%); }
.case__no { position: absolute; top: 20px; right: 28px; z-index: 1; font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(251, 248, 243, .7); }
.case__body { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: 10px; justify-items: start; max-width: 680px; padding: clamp(22px, 3vw, 40px); }
.case__tag { padding: 6px 14px; border: 1px solid rgba(251, 248, 243, .25); border-radius: 999px; background: rgba(11, 10, 9, .5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .82rem; font-weight: 500; }
.case__t { font-size: clamp(2.3rem, 5vw, 4.4rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.case__body > p:not(.case__tag) { color: rgba(251, 248, 243, .82); }
.case--cta { display: grid; place-content: center; justify-items: center; gap: 28px; width: min(64vw, 520px); background: radial-gradient(80% 80% at 50% 0%, #FF9944, var(--orange)); color: var(--ink); text-align: center; }
.case--cta::after { display: none; }
.case--cta__t { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.work__bar { position: relative; display: none; height: 3px; margin-top: 36px; border-radius: 3px; background: var(--line); overflow: hidden; }
.work__bar span { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.work.is-pinned { padding: 0; }
.work.is-pinned .work__pin { position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100vh; overflow: hidden; padding-top: calc(var(--hdr) - 10px); }
.work.is-pinned .work__viewport { overflow: visible; }
.work.is-pinned .work__track { will-change: transform; }
.work.is-pinned .work__count, .work.is-pinned .work__bar { display: block; }

/* ═══════════════ VOICES ═══════════════ */
.voices { overflow: hidden; }
.voices__box { position: relative; margin-top: 28px; padding: clamp(28px, 5vw, 72px); border: 1px solid var(--line); border-radius: var(--r); background: radial-gradient(70% 90% at 100% 0%, rgba(255, 90, 20, .16), transparent 60%), var(--ink-2); }
.qmark { position: absolute; top: clamp(4px, 1vw, 16px); right: clamp(20px, 4vw, 56px); font-size: clamp(9rem, 18vw, 16rem); font-weight: 800; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .9; pointer-events: none; }
.quotes { display: grid; gap: 48px; }
.quote { display: grid; gap: 32px; max-width: 1000px; }
.quote blockquote { font-size: clamp(1.5rem, 3.1vw, 2.75rem); font-weight: 500; line-height: 1.28; letter-spacing: -.025em; text-wrap: pretty; }
.quote figcaption { display: flex; align-items: center; gap: 16px; }
.avatar { display: grid; place-items: center; flex: none; width: 56px; height: 56px; border-radius: 50%; background: var(--grad); color: var(--ink); font-weight: 700; }
.quote cite { display: grid; font-style: normal; color: var(--muted); font-size: .95rem; }
.quote cite b { color: var(--paper); font-size: 1.05rem; font-weight: 600; }
/* with JS the quotes share one cell and rotate */
.js .quotes { gap: 0; }
.js .quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; translate: 0 24px; transition: opacity .7s var(--ease), translate .9s var(--ease), visibility 0s .7s; }
.js .quote.is-active { opacity: 1; visibility: visible; translate: none; transition-delay: .15s, .15s, 0s; }
.qnav { display: flex; gap: 10px; margin-top: 40px; }
.qnav button { position: relative; width: 72px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.qnav button::before, .qnav button::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 3px; background: var(--line); }
.qnav button::after { background: var(--orange); transform-origin: 0 50%; transform: scaleX(0); }
.qnav button.is-active::after { animation: qfill 8s linear forwards; }
.qnav.is-manual button.is-active::after { animation: none; transform: none; }
.voices__box:hover .qnav button::after, .voices__box:focus-within .qnav button::after, .voices.is-off .qnav button::after { animation-play-state: paused; }
@keyframes qfill { to { transform: none; } }
.industries { margin-top: clamp(56px, 7vw, 96px); text-align: center; }
.industries__t { margin-bottom: 22px; font-size: .85rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.pills-cloud { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 980px; margin-inline: auto; }
.pills-cloud li { padding: 12px 22px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .03); font-weight: 500; }
.pills-cloud li:hover { background: var(--orange); border-color: var(--orange); color: var(--ink); transform: translateY(-4px) rotate(-2deg); }

/* ═══════════════ FAQ ═══════════════ */
.faq__layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(40px, 6vw, 104px); align-items: start; }
.faq__aside { position: sticky; top: calc(var(--hdr) + 48px); display: grid; gap: 22px; justify-items: start; isolation: isolate; }
.morph { position: absolute; z-index: -1; top: -40px; left: -60px; width: 320px; height: 320px; background: linear-gradient(135deg, rgba(255, 90, 20, .5), rgba(255, 77, 122, .25)); filter: blur(50px); border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: morph 12s ease-in-out infinite alternate; opacity: .6; }
@keyframes morph { 50% { border-radius: 63% 37% 38% 62% / 55% 31% 69% 45%; transform: translate(40px, 30px) rotate(40deg); } 100% { border-radius: 38% 62% 45% 55% / 63% 59% 41% 37%; transform: translate(-10px, 60px) rotate(-20deg); } }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; gap: 22px; padding: 26px 0; cursor: pointer; list-style: none; font-size: clamp(1.08rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.4; transition: color .3s; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--orange); }
.faq-n { flex: none; min-width: 2ch; font-size: .85rem; font-weight: 600; color: var(--orange); }
.plus { position: relative; flex: none; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; color: var(--paper); transition: transform .6s var(--ease), background-color .3s, border-color .3s, color .3s; }
.plus::before, .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; border-radius: 2px; background: currentColor; transition: transform .6s var(--ease); }
.plus::after { transform: rotate(90deg); }
[open] > summary .plus { transform: rotate(180deg); background: var(--orange); border-color: var(--orange); color: var(--ink); }
[open] > summary .plus::after { transform: rotate(0deg); }
.faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size .6s var(--ease), content-visibility .6s allow-discrete; }
.faq-item[open]::details-content { block-size: auto; }
.faq-a { padding: 0 66px 28px 46px; color: var(--muted); }
.faq-a .link { color: var(--paper); }
.faq-a .gap { margin-left: 4px; vertical-align: middle; }

/* the home page's way into the About page */
.story-link { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: clamp(64px, 8vw, 112px); padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); text-decoration: none; transition: border-color .3s, background-color .3s; }
.story-link:hover { border-color: var(--orange); background: rgba(255, 90, 20, .06); }
.story__label { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.story__t { font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.story-link__go { display: grid; place-items: center; width: 44px; height: 44px; margin-left: auto; border: 1px solid var(--line); border-radius: 50%; transition: background-color .3s, color .3s, transform .5s var(--ease); }
.story-link__go svg { width: 18px; height: 18px; }
.story-link:hover .story-link__go { background: var(--orange); color: var(--ink); transform: rotate(-45deg); }

/* ═══════════════ CONTACT — orange ═══════════════ */
.contact { padding-bottom: clamp(140px, 18vw, 300px); overflow: hidden; isolation: isolate; border-radius: clamp(28px, 4vw, 56px) clamp(28px, 4vw, 56px) 0 0; background: radial-gradient(80% 70% at 0% 0%, #FF8A3D, transparent 60%), var(--orange); color: var(--ink); }
.contact__bg { position: absolute; bottom: -.12em; left: 0; z-index: -1; display: flex; width: max-content; font-size: clamp(7rem, 20vw, 20rem); line-height: 1; animation: marquee 50s linear infinite; pointer-events: none; }
.contact__bg span { font-weight: 800; letter-spacing: -.05em; white-space: pre; color: transparent; -webkit-text-stroke: 2px rgba(11, 10, 9, .2); }
.contact__layout { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(36px, 5vw, 88px); align-items: start; }
.contact .eyebrow { color: var(--ink); }
.contact .h2 { margin: 20px 0 22px; }
.contact .lede { color: rgba(11, 10, 9, .8); }
.contact__ways { display: grid; gap: 6px; margin-top: 36px; }
.contact__ways a { width: fit-content; font-size: clamp(1.35rem, 2.6vw, 2.2rem); font-weight: 700; letter-spacing: -.025em; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 3px no-repeat; transition: background-size .6s var(--ease); }
.contact__ways a:hover { background-size: 100% 3px; }
.contact__free { margin-top: 26px; font-weight: 600; }
.offices { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.office { display: grid; min-width: 150px; padding: 14px 20px; border: 1px solid rgba(11, 10, 9, .16); border-radius: 18px; background: rgba(11, 10, 9, .07); }
.office__city { font-size: .8rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(11, 10, 9, .72); }
.office__time { font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.office__time .colon { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .2; } }

.formcard { position: relative; overflow: hidden; padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r); background: var(--ink); color: var(--paper); box-shadow: 0 50px 100px -40px rgba(90, 25, 0, .7); }
.formcard > h3 { margin-bottom: 24px; font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field { position: relative; }
.field--wide, .fieldset, .form__foot { grid-column: 1 / -1; }
.field input, .field select, .field textarea { width: 100%; padding: 26px 16px 10px; border: 1px solid var(--line); border-radius: 14px; background: rgba(251, 248, 243, .04); color: var(--paper); font: inherit; font-size: 1rem; outline: none; -webkit-appearance: none; appearance: none; transition: border-color .3s, background-color .3s, box-shadow .3s; }
.field select { padding-right: 40px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23B3ABA2' stroke-width='2.5' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 16px center; cursor: pointer; }
.field select option { background: var(--ink-3); color: var(--paper); }
.field textarea { min-height: 128px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--orange); background-color: rgba(255, 90, 20, .06); box-shadow: 0 0 0 4px rgba(255, 90, 20, .15); }
.field label { position: absolute; left: 17px; top: 18px; color: var(--muted); pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--ease), color .3s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field select:focus + label, .field:has(option:checked:not([value=""])) label { transform: translateY(-11px) scale(.74); color: var(--orange); }
.err { display: none; margin-top: 6px; font-size: .82rem; color: #FF8F6B; }
.field :user-invalid ~ .err { display: block; }
.field :user-invalid { border-color: #FF8F6B; }
.fieldset { margin: 4px 0 0; padding: 0; border: 0; }
.fieldset legend { margin-bottom: 10px; font-size: .9rem; color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill input { position: absolute; opacity: 0; }
.pill span { display: inline-block; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; font-weight: 500; cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.pill input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pill input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; margin-top: 8px; }
/* Sending (dashboard/collect/form): a failed send says so and keeps what was typed; the privacy line sits where the button is */
.form__fail { grid-column: 1 / -1; margin: 6px 0 0; padding: 10px 14px; border: 1px solid #FF8F6B; border-radius: 12px; color: #FF8F6B; font-size: .9rem; }
.form__fail[hidden] { display: none; }
.form__privacy { margin: 0; font-size: .82rem; color: var(--muted); }
.btn[aria-busy="true"] { opacity: .6; cursor: progress; }
.sent { display: grid; place-items: center; align-content: center; gap: 14px; min-height: 460px; text-align: center; }
.sent:focus { outline: none; }
.sent svg { width: 88px; height: 88px; }
.sent .tick { fill: none; stroke: var(--orange); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tick .8s .2s var(--ease) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.sent h3 { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; }
.sent p { color: var(--muted); }
.confetti { position: absolute; left: 50%; top: 40%; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; }

/* ═══════════════ FOOTER ═══════════════ */
.footer { overflow: hidden; padding: clamp(72px, 9vw, 120px) 0 32px; background: var(--ink); }
.footer__top { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
/* the brand gets its own row above the link columns, so the logo can be big */
.footer__brand { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 48px; padding-bottom: clamp(36px, 5vw, 56px); margin-bottom: clamp(8px, 2vw, 16px); border-bottom: 1px solid var(--line); }
.footer__lede { max-width: 34ch; font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--muted); }
.footer h3 { margin-bottom: 16px; font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.footer ul { display: grid; gap: 10px; }
.footer address { font-style: normal; }
.footer a { text-decoration: none; transition: color .3s; }
.footer a:hover { color: var(--orange); }
.footer__mark { display: flex; margin-top: clamp(56px, 8vw, 104px); overflow: hidden; font-size: clamp(2.4rem, 10.1vw, 9.3rem); font-weight: 800; line-height: 1.05; letter-spacing: -.055em; white-space: nowrap; }
.footer__mark .o { color: var(--orange); }
.footer__mark .ch { display: inline-block; transition: translate 1.1s var(--ease) calc(var(--i) * 40ms), color .3s; }
.js .footer__mark .ch { translate: 0 105%; }
.js .footer__mark.is-in .ch { translate: none; }
.footer__mark .ch:hover { color: var(--orange); }
.failsafe .footer__mark .ch { translate: none; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--muted); }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__stage { max-width: 520px; margin-top: 12px; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .tiers { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .footer__top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 899px) {
  .panel__top { grid-template-columns: 1fr; gap: 20px; }
  .cards, .cards--care { grid-template-columns: 1fr; }
  .incl { grid-template-columns: 1fr; }
  .incl__note { grid-column: auto; }
  .steps { grid-template-columns: 1fr; gap: 36px; }
  .steps::before, .steps::after { top: 32px; bottom: 32px; left: 31px; right: auto; width: 2px; height: auto; }
  .steps::after { transform-origin: 50% 0; transform: scaleY(var(--p)); }
  .step { display: grid; grid-template-columns: 64px 1fr; column-gap: 22px; }
  .step__n { grid-row: span 2; margin: 0; }
  .faq__layout, .contact__layout { grid-template-columns: 1fr; }
  .faq__aside { position: relative; top: auto; }
  .faq-a { padding: 0 0 26px 46px; }
}
@media (max-width: 600px) {
  :root { --hdr: 86px; }
  .hdr .logo { height: 42px; }
  .hero { padding-bottom: 96px; }
  .hero__stage { max-width: 380px; }
  .fchip { padding: 9px 13px; font-size: .72rem; }
  .fchip b { font-size: 1.4rem; }
  .fchip--b { right: -2%; }
  .gglobe ~ .fchip--b { top: 35%; }
  .mock--browser, .gglobe ~ .mock--browser { left: -4%; }   /* the drawn site's headline and button stay on screen */
  .stat { padding: 24px 20px; }
  .card__inc--2 { grid-template-columns: 1fr; }
  .case { width: 86vw; min-height: 460px; }
  .case--cta { width: 70vw; }
  .form { grid-template-columns: 1fr; }
  .footer__top { grid-template-columns: 1fr; }
  .faq-item summary { gap: 14px; }
  .faq-a { padding-left: 0; }
}

/* ═══════════════ REDUCED MOTION — keep everything, stop the movement ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .tape__track, .contact__bg { animation: none !important; }
  .js .quote { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ABOUT PAGE (about.html)
   ═══════════════════════════════════════════════════════════════ */

/* ── hero: thirteen years drawn as a ring ── */
.ring13 { position: relative; width: 100%; max-width: 560px; aspect-ratio: 1; justify-self: center; }
.ring13 svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ring13 .orbg { animation: spin2d 40s linear infinite; }
.ring13 .orb { fill: none; stroke: rgba(251, 248, 243, .14); stroke-width: 1.5; stroke-dasharray: 4 8; }
.ring13 .sat { fill: var(--orange); filter: drop-shadow(0 0 10px var(--orange)); }
.ring13 .trk { fill: none; stroke: rgba(251, 248, 243, .08); stroke-width: 16; }
.ring13 .arc { fill: none; stroke: url(#ringgrad); stroke-width: 16; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: arc 2.2s .4s linear forwards; filter: drop-shadow(0 0 16px rgba(255, 90, 20, .55)); }
@keyframes arc { to { stroke-dashoffset: .0714; } }
.ring13 .m { fill: var(--ink); stroke: var(--paper); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: pop .6s var(--ease) var(--t) both; }
.ring13 .m--now { fill: var(--orange); stroke: var(--orange); animation: pop .6s var(--ease) var(--t) both, beacon 2s 3s infinite; }
@keyframes pop { from { transform: scale(0); opacity: 0; } }
@keyframes beacon { 50% { transform: scale(1.35); } }
.ring13 .lbl { fill: var(--paper); font: 600 19px var(--font); letter-spacing: -.01em; animation: fadein .6s var(--t) both; }
@keyframes fadein { from { opacity: 0; } }
.ring13__c { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; pointer-events: none; }
.ring13__n { font-size: clamp(5rem, 12vw, 10rem); font-weight: 800; line-height: .9; letter-spacing: -.06em; font-variant-numeric: tabular-nums; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ring13__l { margin-top: 6px; font-size: .9rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

/* ── who we are: statement + parallax collage ── */
.collage { display: grid; grid-template-columns: 1.1fr .85fr 1fr; gap: clamp(14px, 2vw, 24px); align-items: start; margin-top: clamp(56px, 7vw, 104px); }
.collage figure { overflow: hidden; border-radius: 22px; background: var(--ink-3); will-change: translate; }
.collage figure:nth-child(2) { margin-top: clamp(40px, 8vw, 120px); }
.collage figure:nth-child(3) { margin-top: clamp(16px, 3vw, 40px); }
.collage img { width: 100%; height: auto; transition: transform 1.4s var(--ease); }
.collage figure:hover img { transform: scale(1.05); }

/* ── our story: a line that fills, a giant year that rolls behind ── */
.story2 { overflow: clip; }
.tl2 { position: relative; }
.tl2__year { position: sticky; top: 26vh; z-index: 0; height: 0; display: flex; justify-content: center; pointer-events: none; }
.tl2__year span { display: block; font-size: clamp(7rem, 24vw, 22rem); font-weight: 800; line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(251, 248, 243, .09); }
.tl2__list { --p: 0; position: relative; z-index: 1; display: grid; gap: clamp(40px, 6vw, 80px); padding-block: 24px; }
.tl2__list::before, .tl2__list::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--line); }
.tl2__list::after { background: var(--grad); transform-origin: 50% 0; transform: scaleY(var(--p)); box-shadow: 0 0 16px rgba(255, 90, 20, .6); }
.tl2__item { position: relative; width: calc(50% - 56px); padding: 28px 32px; border: 1px solid var(--line); border-radius: 24px; background: rgba(19, 17, 16, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: border-color .5s; }
.tl2__item:nth-child(even) { justify-self: end; }
.tl2__item::before { content: ""; position: absolute; top: 40px; right: -66px; width: 20px; height: 20px; border: 3px solid rgba(251, 248, 243, .3); border-radius: 50%; background: var(--ink); transition: background-color .5s, border-color .5s, box-shadow .5s; }
.tl2__item:nth-child(even)::before { right: auto; left: -66px; }
.tl2__item.is-on { border-color: rgba(255, 90, 20, .45); }
.tl2__item.is-on::before { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 0 6px rgba(255, 90, 20, .2), 0 0 24px var(--orange); }
.tl2__y { font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tl2__item h3 { margin: 10px 0 8px; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.tl2__item p { color: var(--muted); }
.js .tl2__item[data-reveal] { translate: -48px 0; }
.js .tl2__item[data-reveal]:nth-child(even) { translate: 48px 0; }
.js .tl2__item[data-reveal].is-in { translate: none; }

/* ── how we work: four panels; without JS (or on phones) a plain grid ── */
.acc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.acc__item { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 280px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--ink-2); }
.acc__item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: .4; transition: transform 1.4s var(--ease), opacity .6s; }
.acc__item::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 9, .15), rgba(11, 10, 9, .94) 78%); }
.acc__n { position: absolute; top: 24px; left: 28px; font-size: .95rem; font-weight: 700; color: var(--orange); }
.acc__v { display: none; }
.acc__t { font-size: 1.6rem; font-weight: 700; line-height: 1.2; letter-spacing: -.025em; }
.acc__body p { max-width: 42ch; margin-top: 10px; color: rgba(251, 248, 243, .84); }
@media (min-width: 900px) {
  .js .acc { display: flex; height: 480px; }
  .js .acc__item { flex: 1 1 0; min-width: 0; min-height: 0; cursor: pointer; transition: flex-grow .9s var(--ease), border-color .4s; }
  .js .acc__item.is-open { flex-grow: 3.2; border-color: rgba(255, 90, 20, .5); }
  .js .acc__item.is-open img { opacity: .62; transform: scale(1.05); }
  .js .acc__body { width: 440px; max-width: none; opacity: 0; translate: 0 16px; transition: opacity .4s, translate .6s var(--ease); }
  .js .acc__item.is-open .acc__body { opacity: 1; translate: none; transition-delay: .3s; }
  .js .acc__v { display: block; position: absolute; left: 24px; bottom: 28px; font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); transition: opacity .3s; }
  .js .acc__item.is-open .acc__v { opacity: 0; }
}


/* ── where we are: two cities, live clocks, the gap between them ── */
.where { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 7vw, 120px); }
.city { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; min-height: 460px; border: 1px solid var(--line); border-radius: var(--r); }
.city img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.city:hover img { transform: scale(1.05); }
.city::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11, 10, 9, .1) 25%, rgba(11, 10, 9, .92) 80%); }
.city__body { display: grid; gap: 6px; padding: clamp(24px, 3vw, 40px); }
.city__k { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.city h3 { font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 800; line-height: 1; letter-spacing: -.045em; }
.city__time { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.city__dn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 178, 63, .18); font-size: 1.1rem; }
.city__dn::before { content: ""; width: 20px; height: 20px; background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFB23F' stroke-width='2.2' stroke-linecap='round'><circle cx='12' cy='12' r='4.5'/><path d='M12 2v2.5M12 19.5V22M2 12h2.5M19.5 12H22M4.9 4.9l1.8 1.8M17.3 17.3l1.8 1.8M4.9 19.1l1.8-1.8M17.3 6.7l1.8-1.8'/></svg>"); }
.city[data-dn="night"] .city__dn { background: rgba(251, 248, 243, .1); }
.city[data-dn="night"] .city__dn::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M20 14.5A8.5 8.5 0 0 1 9.5 4a8.5 8.5 0 1 0 10.5 10.5Z' fill='%23FBF8F3'/></svg>"); }
.city address { font-style: normal; color: rgba(251, 248, 243, .8); }
/* the bridge: a dashed line with a dot running between the cities, and the live difference */
.where::before { content: ""; position: absolute; top: 50%; left: 25%; right: 25%; height: 2px; background: repeating-linear-gradient(90deg, rgba(251, 248, 243, .35) 0 8px, transparent 8px 16px); }
.where__gap { position: absolute; top: 50%; left: 50%; z-index: 2; translate: -50% -50%; display: grid; place-content: center; justify-items: center; width: clamp(108px, 10vw, 150px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); color: var(--ink); text-align: center; box-shadow: 0 0 0 10px rgba(255, 90, 20, .16), 0 24px 50px rgba(0, 0, 0, .55); animation: beacon-ring 3s ease-in-out infinite; }
.where__gap .tz-diff { font-size: clamp(1.1rem, 1.6vw, 1.5rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; }
.where__gap small { font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
@keyframes beacon-ring { 50% { box-shadow: 0 0 0 18px rgba(255, 90, 20, .08), 0 24px 50px rgba(0, 0, 0, .55); } }
.js .where[data-stagger] > .where__gap { translate: -50% -50%; }

/* ── kind words: a slow marquee of quote cards (margins, not gap, so the loop is seamless) ── */
.qmarq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.qmarq__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.qmarq:hover .qmarq__track { animation-play-state: paused; }
.qcard { flex: none; display: grid; align-content: space-between; gap: 28px; width: min(82vw, 520px); margin-right: 20px; padding: 32px; border: 1px solid var(--line); border-radius: 24px; background: var(--ink-2); }
.qcard blockquote { font-size: 1.2rem; font-weight: 500; line-height: 1.5; }
.qcard figcaption { display: flex; align-items: center; gap: 14px; }
.qcard cite { display: grid; font-style: normal; font-size: .9rem; color: var(--muted); }
.qcard cite b { font-size: 1rem; font-weight: 600; color: var(--paper); }
.qcard .avatar { width: 48px; height: 48px; }

/* ── CTA: a badge that spins ── */
.cta2__in { display: grid; grid-template-columns: 1fr auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.cta2 { background: radial-gradient(50% 70% at 85% 50%, rgba(255, 90, 20, .16), transparent 70%); }
.cta2 .lede { margin-top: 22px; }
.spin-cta { position: relative; display: grid; place-items: center; width: clamp(170px, 18vw, 230px); aspect-ratio: 1; border-radius: 50%; background: var(--orange); color: var(--ink); text-decoration: none; box-shadow: 0 30px 70px -20px rgba(255, 90, 20, .6); transition: translate .35s var(--ease), transform .6s var(--ease); }
.spin-cta:hover { transform: scale(1.07); }
.spin-cta__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin2d 16s linear infinite; }
.spin-cta__ring text { font: 700 15px var(--font); letter-spacing: .12em; text-transform: uppercase; fill: var(--ink); }
.spin-cta__arrow { width: 48px; height: 48px; transform: rotate(-45deg); transition: transform .6s var(--ease); }
.spin-cta:hover .spin-cta__arrow { transform: rotate(0deg); }

@media (max-width: 899px) {
  .collage { grid-template-columns: 1fr 1fr; }
  .collage figure:nth-child(3) { grid-column: 1 / -1; margin-top: 0; }
  .tl2__list::before, .tl2__list::after { left: 10px; }
  .tl2__item, .tl2__item:nth-child(even) { justify-self: stretch; width: auto; margin-left: 44px; }
  .tl2__item::before, .tl2__item:nth-child(even)::before { left: -44px; right: auto; }
  .js .tl2__item[data-reveal], .js .tl2__item[data-reveal]:nth-child(even) { translate: 0 32px; }
  .js .tl2__item[data-reveal].is-in { translate: none; }
  .tl2__year span { font-size: 34vw; }
  .acc { grid-template-columns: 1fr; }
  .where, .cta2__in { grid-template-columns: 1fr; }
  .where { gap: 96px; }
  .where::before { top: 25%; bottom: 25%; left: 50%; right: auto; width: 2px; height: auto; background: repeating-linear-gradient(180deg, rgba(251, 248, 243, .35) 0 8px, transparent 8px 16px); }
  .city { min-height: 380px; }
  .spin-cta { justify-self: start; }
}
@media (max-width: 600px) {
  .ring13 { max-width: 380px; }
  .ring13 .lbl { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .qmarq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .qmarq__track { animation: none !important; }
  .qcard[aria-hidden] { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   WORK PAGE (work.html) — every image is a real capture of a live or archived site
   ═══════════════════════════════════════════════════════════════ */

/* ── hero: copy centred over a tilted, moving wall of the real sites ── */
.hero--work { display: block; padding-bottom: 0; }
.whero { position: relative; z-index: 2; display: grid; justify-items: center; text-align: center; }
.whero .lede { margin-inline: auto; }
.whero .hero__cta { justify-content: center; }
.wall { position: relative; z-index: 1; height: clamp(280px, 40vw, 540px); margin-top: clamp(28px, 4vw, 56px); overflow: hidden; perspective: 1400px; -webkit-mask-image: radial-gradient(ellipse 72% 90% at 50% 30%, #000 45%, transparent 100%); mask-image: radial-gradient(ellipse 72% 90% at 50% 30%, #000 45%, transparent 100%); }
.wall__in { display: grid; gap: 20px; padding-top: 24px; transform-origin: 50% 0; transform: rotateX(30deg) rotateZ(-7deg) scale(1.2); }
.wall__track { display: flex; width: max-content; animation: marquee 70s linear infinite; }
.wall__row--b .wall__track { margin-left: -180px; animation-duration: 80s; animation-direction: reverse; }
.wall img { width: clamp(220px, 24vw, 360px); height: auto; aspect-ratio: 16 / 10; margin-right: 20px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .85); }

/* ── featured: a browser that scrolls the real full page on hover, and the phone view ── */
.feat { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.feat + .feat { margin-top: clamp(96px, 11vw, 160px); }
.feat:nth-of-type(even) .feat__media { order: 2; }
.feat__media { position: relative; padding-bottom: 7%; }
.browser { overflow: hidden; border: 1px solid rgba(251, 248, 243, .14); border-radius: 16px; background: #171412; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9); }
.browser__bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; background: #201C19; border-bottom: 1px solid rgba(251, 248, 243, .08); }
.browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(251, 248, 243, .22); }
.browser__bar i:first-child { background: var(--orange); }
.browser__bar span { margin-left: 12px; padding: 3px 14px; border-radius: 999px; background: rgba(251, 248, 243, .07); font-size: .75rem; color: var(--muted); }
.browser__view { aspect-ratio: 16 / 10; overflow: hidden; }
.browser__view img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 7s cubic-bezier(.45, .05, .55, .95); }
.feat__media:hover .browser__view img, .feat:focus-within .browser__view img { object-position: 50% 100%; transition-duration: 9s; }
.phone { position: absolute; right: -3%; bottom: 0; width: 25%; aspect-ratio: 390 / 844; overflow: hidden; border: 6px solid #26221F; border-radius: 26px; background: #000; box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .9); transform: rotate(4deg); transition: transform .8s var(--ease); }
.feat:nth-of-type(even) .phone { right: auto; left: -3%; transform: rotate(-4deg); }
.feat__media:hover .phone { transform: rotate(0deg) translateY(-12px); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feat__n { display: block; font-size: clamp(4rem, 8vw, 7rem); font-weight: 800; line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px rgba(251, 248, 243, .35); }
.feat__meta { margin-top: 22px; font-size: .82rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.feat__t { margin: 8px 0 12px; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.feat__d { max-width: 40ch; font-size: 1.08rem; color: var(--muted); }
.feat__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; }
.feat__tags li { padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 500; }

/* ── more live sites: tilt cards ── */
.sites { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; perspective: 1200px; }
.site { --rx: 0deg; --ry: 0deg; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--ink-2); text-decoration: none; transform: rotateX(var(--ry)) rotateY(var(--rx)); transition: transform .5s var(--ease), border-color .3s; }
.site:hover { border-color: rgba(255, 90, 20, .5); }
.site__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-bottom: 1px solid var(--line); }
.site__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform 1.2s var(--ease); }
.site:hover .site__shot img { transform: scale(1.06); }
.site__body { display: grid; gap: 6px; padding: 22px 24px 24px; }
.site__meta { font-size: .76rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--orange); }
.site__t { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; }
.site__d { font-size: .95rem; color: var(--muted); }
.site__go { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; }
.site__go svg, .feat__body .btn svg { transition: transform .4s var(--ease); }
.site__go svg { width: 16px; height: 16px; }
.site:hover .site__go svg, .feat__body .btn:hover svg { transform: translate(3px, -3px); }

/* ── more from 13 years: past projects by industry; outlined names that fill and open ── */
.idx { border-top: 1px solid var(--line); }
.idx__row { position: relative; display: grid; grid-template-columns: 56px 1fr auto; align-items: center; column-gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--line); outline-offset: 4px; }
.idx__n { font-size: .9rem; font-weight: 600; color: var(--muted); }
.idx__t { font-size: clamp(2rem, 5.4vw, 4.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1.5px rgba(251, 248, 243, .6); transition: color .4s, -webkit-text-stroke-color .4s, translate .6s var(--ease); }
.idx__k { font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--orange); text-align: right; }
.idx__more { grid-column: 2 / -1; display: grid; gap: 12px; justify-items: start; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .6s var(--ease), opacity .4s, margin .6s var(--ease); }
.idx__d { max-width: 62ch; color: var(--muted); }
.idx__row:hover .idx__t, .idx__row:focus-within .idx__t { color: var(--paper); -webkit-text-stroke-color: transparent; translate: 14px 0; }
.idx__row:hover .idx__more, .idx__row:focus-within .idx__more { max-height: 14em; opacity: 1; margin-top: 14px; }
@media (hover: none) {
  .idx__t { color: var(--paper); -webkit-text-stroke: 0; }
  .idx__more { max-height: none; opacity: 1; margin-top: 10px; }
}

/* ── quotes, side by side ── */
.wq { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wq .qcard { width: auto; height: 100%; margin: 0; }

@media (max-width: 899px) {
  .feat { grid-template-columns: 1fr; }
  .feat:nth-of-type(even) .feat__media { order: 0; }
  .feat__body { order: -1; }   /* one column: the heading first, then its picture (and a link to it lands on the heading) */
  .sites, .wq { grid-template-columns: 1fr 1fr; }
  .idx__row { grid-template-columns: 36px 1fr; }
  .idx__k { grid-column: 2; text-align: left; margin-top: 6px; }
}
@media (max-width: 600px) {
  .sites, .wq { grid-template-columns: 1fr; }
  .wall__in { transform: rotateX(26deg) rotateZ(-7deg) scale(1.35); }
}
@media (prefers-reduced-motion: reduce) {
  .wall__track { animation: none !important; }
}

/* home Work cards: real screenshots, a link to the live site, and the way to the Work page */
.case img { object-position: 50% 0; filter: brightness(.5) saturate(.9); transition: transform 1.4s var(--ease), filter .6s; }
.case:hover img { filter: brightness(.8); }
.case:not(.case--cta)::after { background: linear-gradient(180deg, rgba(11, 10, 9, .1) 10%, rgba(11, 10, 9, .72) 45%, rgba(11, 10, 9, .97) 80%); }
.case__go { width: fit-content; font-weight: 600; color: var(--paper); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .3s; }
.case__go:hover { color: var(--orange); }
.case__all { font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

/* ── work: brands we've built for — tiles that fill orange from where the pointer comes in ── */
.btiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); }
.btile { display: grid; align-content: start; gap: 10px; min-height: 280px; padding: clamp(24px, 3vw, 38px); background: var(--ink); overflow: hidden; transition: color .45s; }
.btile.spot::before { display: none; }
.btile.spot::after { padding: 0; -webkit-mask: none; mask: none; opacity: 1; border-radius: 0; background: linear-gradient(135deg, #FF5A14, #FF9944); clip-path: circle(0% at var(--mx) var(--my)); transition: clip-path .75s var(--ease); }
.btile.spot:hover::after { clip-path: circle(150% at var(--mx) var(--my)); }
.btile__k { font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); transition: color .45s; }
.btile__t { margin-top: 18px; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.02; letter-spacing: -.045em; }
.btile__d { color: var(--muted); transition: color .45s; }
.btile__w { align-self: end; width: fit-content; margin-top: 18px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 500; transition: border-color .45s; }
.btile:hover, .btile:hover .btile__k, .btile:hover .btile__d { color: var(--ink); }
.btile:hover .btile__w { border-color: rgba(11, 10, 9, .35); }
@media (max-width: 899px) { .btiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .btiles { grid-template-columns: 1fr; } .btile { min-height: 0; } }

/* ── work: industry chips + groups for "More from 13 years" (chips appear only with JS) ── */
.chips { display: flex; gap: 8px; margin-bottom: clamp(32px, 4vw, 52px); padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip-btn { flex: none; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .04); color: var(--paper); font: 500 .92rem var(--font); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.chip-btn:hover { border-color: var(--orange); }
.chip-btn[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.inds { display: grid; gap: clamp(48px, 6vw, 84px); }
.ind__h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font-size: .9rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.ind__c { display: grid; place-items: center; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 999px; background: rgba(255, 90, 20, .14); font-size: .8rem; letter-spacing: 0; }
.ind .idx__t { font-size: clamp(1.7rem, 3.8vw, 3.2rem); }
.ind.is-shown { animation: rise .6s var(--ease) both; }

/* ═══════════════════════════════════════════════════════════════
   CONTACT PAGE (contact.html)
   ═══════════════════════════════════════════════════════════════ */

/* ── hero: three ways in ── */
.hero--contact { display: block; min-height: auto; padding-bottom: clamp(72px, 9vw, 120px); }
.chero__title { max-width: 15ch; }
.hero--contact .lede { margin-bottom: clamp(40px, 5vw, 64px); }
.ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.way { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 2.6vw, 32px); border: 1px solid var(--line); border-radius: 24px; background: rgba(19, 17, 16, .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.way--hot { border-color: rgba(255, 90, 20, .45); background: linear-gradient(135deg, rgba(255, 90, 20, .22), rgba(19, 17, 16, .82) 60%); }
.way__ic { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px; border-radius: 16px; background: rgba(255, 90, 20, .14); color: var(--orange); }
.way__ic svg { width: 26px; height: 26px; }
.way__k { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.way__v { font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; text-decoration: none; overflow-wrap: anywhere; transition: color .3s; }
a.way__v:hover { color: var(--orange); }
.way__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: auto; padding-top: 14px; }
.way__go { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--orange); text-decoration: none; }
.way__go svg { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.way__go:hover svg { transform: translateX(4px); }
.way__copy { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--paper); font: 500 .85rem var(--font); cursor: pointer; transition: border-color .3s, background-color .3s, color .3s; }
.way__copy svg { width: 15px; height: 15px; }
.way__copy:hover { border-color: var(--orange); }
.way__copy.is-done { background: var(--orange); border-color: var(--orange); color: var(--ink); }

/* ── quote: what happens next + a three-step builder (one plain form without JS) ── */
.quote__layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 6vw, 96px); align-items: start; }
.quote__aside { position: sticky; top: calc(var(--hdr) + 40px); display: grid; gap: 20px; justify-items: start; }
.next { display: grid; gap: 16px; margin-top: 12px; }
.next li { display: flex; gap: 16px; align-items: flex-start; }
.next__n { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1.5px solid rgba(255, 90, 20, .6); border-radius: 50%; font-size: .95rem; font-weight: 700; color: var(--orange); }
.next p { padding-top: 5px; color: var(--muted); }
.next b { font-weight: 600; color: var(--paper); }
.formcard--steps { min-height: 540px; border: 1px solid var(--line); background: radial-gradient(80% 60% at 100% 0%, rgba(255, 90, 20, .1), transparent 60%), var(--ink-2); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); }
.form--steps { display: block; }
.fstep { min-width: 0; margin: 0 0 40px; padding: 0; border: 0; }
.fstep__h { padding: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.025em; }
.fstep__sub { margin: 6px 0 22px; color: var(--muted); }
.needs { display: flex; flex-wrap: wrap; gap: 8px; }
.needs__g { flex-basis: 100%; margin: 14px 0 2px; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.needs__g:first-child { margin-top: 0; }
.need { position: relative; }
.need input { position: absolute; opacity: 0; pointer-events: none; }
.need span { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: .92rem; font-weight: 500; cursor: pointer; transition: background-color .25s, border-color .25s, color .25s, scale .35s var(--ease); }
.need span::before { content: ""; width: 16px; height: 16px; border: 1.5px solid rgba(251, 248, 243, .35); border-radius: 50%; background: center / 12px no-repeat; transition: background-color .25s, border-color .25s; }
.need:hover span { border-color: rgba(255, 90, 20, .6); }
.need input:checked + span { background: var(--orange); border-color: var(--orange); color: var(--ink); scale: 1.03; }
.need input:checked + span::before { border-color: var(--ink); background-color: var(--ink); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%23FF5A14' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.need input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 3px; }
.err--step { margin-top: 14px; }
.fstep.is-invalid .err--step { display: block; }
.fstep.is-touched .field :invalid ~ .err { display: block; }
.fstep.is-touched .field :invalid { border-color: #FF8F6B; }
.fieldset__l { margin-bottom: 10px; font-size: .9rem; color: var(--muted); }
.fstep__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 28px; }
.fstep__nav--end { justify-content: space-between; }
.fstep__nav--end .btn[type="submit"] { margin-left: auto; }
.fprog { display: none; }
/* without JS: one long form, so only the submit row shows */
.form--steps:not(.is-stepper) [data-next], .form--steps:not(.is-stepper) [data-back] { display: none; }
.form--steps:not(.is-stepper) .fstep__nav:not(.fstep__nav--end) { display: none; }
/* with JS: one step at a time */
.is-stepper .fprog { display: flex; align-items: center; gap: 16px; margin-bottom: 28px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.fprog__i { color: var(--paper); }
.fprog__bar { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.fprog__bar span { position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--fp, .333)); transition: transform .6s var(--ease); }
.is-stepper .fstep { margin: 0; }
.is-stepper .fstep:not(.is-current) { display: none; }
.is-stepper .fstep.is-current { animation: rise .55s var(--ease) both; }
.also { margin-top: 32px; color: var(--muted); }

@media (max-width: 899px) {
  .quote__layout { grid-template-columns: 1fr; }
  .quote__aside { position: relative; top: auto; }
  .ways { grid-template-columns: 1fr 1fr; }
  .way--hot { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .ways { grid-template-columns: 1fr; }
  .formcard--steps { min-height: 0; }
  .fstep__nav--end .gap { order: 3; flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE PAGES (website-design, web-applications, digital-marketing, creative-content-design, website-care-hosting)
   + the "What we do" menu that links them
   ═══════════════════════════════════════════════════════════════ */
body { --acc: var(--orange); }

/* ── home cards: "Learn more" next to "Get a quote" ── */
.card__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: auto; padding-top: 8px; }
.card__acts .card__cta { margin-top: 0; padding-top: 0; }
.card__more { font-size: .9rem; font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: rgba(251, 248, 243, .25); text-underline-offset: 4px; transition: color .3s, text-decoration-color .3s; }
.card__more:hover { color: var(--paper); text-decoration-color: var(--orange); }

/* ── hero ── */
.hero--svc { min-height: min(100svh, 880px); }
.hero--svc .hero__title { font-size: clamp(2.6rem, 5.2vw, 5rem); text-wrap: balance; }

/* websites: three of our live sites, fanned */
.svis--sites .mock { inset: auto; width: 68%; border-radius: 14px; }
.svis--sites .mock img { height: auto; aspect-ratio: 16 / 10; }
.svis--sites .m1 { left: 0; top: 6%; }
.svis--sites .m2 { right: 0; top: 30%; z-index: 2; animation-delay: -2.5s; }
.svis--sites .m3 { left: 9%; bottom: 6%; z-index: 3; animation-delay: -5s; }

/* web apps: a sign-in screen inside an app window */
.appwin { position: absolute; inset: 12% 2% 16% 4%; display: grid; grid-template-columns: 26% 1fr; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid rgba(251, 248, 243, .14); border-radius: 18px; background: #171412; box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85); --t: perspective(1400px) rotateY(10deg) rotateX(3deg); animation: float 7s ease-in-out infinite alternate; }
.appwin .mock__bar { grid-column: 1 / -1; }
.appwin__side { display: grid; align-content: start; gap: 14px; padding: 20px 16px; border-right: 1px solid var(--line); }
.appwin__side i { height: 10px; border-radius: 6px; background: rgba(251, 248, 243, .1); }
.appwin__side i:first-child { width: 70%; background: var(--orange); }
.appwin__main { display: grid; place-items: center; padding: 20px; background: radial-gradient(70% 70% at 70% 30%, rgba(255, 90, 20, .14), transparent 70%); }
.signin { display: grid; gap: 10px; width: min(82%, 270px); padding: 22px; border: 1px solid var(--line); border-radius: 16px; background: var(--ink); }
.signin b { margin-bottom: 4px; font-size: 1.05rem; }
.signin i { height: 34px; border: 1px solid var(--line); border-radius: 10px; background: rgba(251, 248, 243, .04); }
.signin span { display: grid; place-items: center; height: 36px; margin-top: 4px; border-radius: 999px; background: var(--grad); color: var(--ink); font-size: .85rem; font-weight: 600; }

/* digital marketing: three overlapping circles */
.venn { position: absolute; inset: 7%; }
.venn i { position: absolute; display: flex; width: 60%; aspect-ratio: 1; border: 1.5px solid rgba(251, 248, 243, .22); border-radius: 50%; font-style: normal; font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight: 700; mix-blend-mode: screen; animation: breathe 6s ease-in-out infinite alternate; }
.venn i:nth-child(1) { left: 20%; top: 0; justify-content: center; padding-top: 18%; background: radial-gradient(circle at 50% 30%, rgba(255, 90, 20, .6), rgba(255, 90, 20, .1) 72%); }
.venn i:nth-child(2) { left: 0; bottom: 2%; align-items: flex-end; padding: 0 0 24% 16%; background: radial-gradient(circle at 30% 70%, rgba(255, 178, 63, .5), rgba(255, 178, 63, .08) 72%); animation-delay: -2s; }
.venn i:nth-child(3) { right: 0; bottom: 2%; align-items: flex-end; justify-content: flex-end; padding: 0 16% 24% 0; background: radial-gradient(circle at 70% 70%, rgba(255, 77, 122, .5), rgba(255, 77, 122, .08) 72%); animation-delay: -4s; }
.venn b { position: absolute; left: 50%; top: 57%; translate: -50% -50%; padding: 10px 18px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .85rem; white-space: nowrap; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, .6); }
@keyframes breathe { to { scale: 1.06; } }

/* creative: a brand specimen card */
.spec { position: absolute; inset: 12% 6% 14% 8%; display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr auto; gap: 14px; padding: 22px; border: 1px solid rgba(251, 248, 243, .14); border-radius: 22px; background: rgba(23, 20, 18, .94); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85); --t: perspective(1400px) rotateY(-10deg) rotateX(4deg); animation: float 7s ease-in-out infinite alternate; }
.spec__aa { display: grid; place-items: center; border-radius: 16px; background: var(--grad); color: var(--ink); font-size: clamp(3.6rem, 8vw, 6.6rem); font-weight: 800; letter-spacing: -.05em; }
.spec__sw { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.spec__sw i { border-radius: 14px; animation: pop .6s var(--ease) both; animation-delay: calc(.5s + var(--i) * .12s); }
.spec__play { grid-column: 1 / -1; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(251, 248, 243, .05); }
.spec__play b { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--paper); clip-path: circle(50%); position: relative; }
.spec__play b::after { content: ""; position: absolute; left: 14px; top: 11px; border: 8px solid transparent; border-left: 12px solid var(--ink); border-right: 0; }
.spec__play span { position: relative; flex: 1; height: 4px; overflow: hidden; border-radius: 4px; background: var(--line); }
.spec__play span::after { content: ""; position: absolute; inset: 0; background: var(--grad); transform-origin: 0 50%; animation: scrub 6s linear infinite; }
@keyframes scrub { from { transform: scaleX(0); } }

/* care: the plan as a status card, ticked line by line */
.statcard { position: absolute; inset: 12% 6% 12% 8%; display: flex; flex-direction: column; padding: 24px 26px; border: 1px solid rgba(251, 248, 243, .14); border-radius: 22px; background: rgba(23, 20, 18, .94); box-shadow: 0 50px 90px -30px rgba(0, 0, 0, .85); --t: perspective(1400px) rotateY(-8deg) rotateX(4deg); animation: float 7s ease-in-out infinite alternate; }
.statcard__h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-weight: 600; }
.statcard__h small { margin-left: auto; font-size: .8rem; font-weight: 600; color: #3DDC84; }
.statcard ul { display: grid; }
.statcard li { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(251, 248, 243, .06); font-size: .95rem; }
.statcard li em { margin-left: auto; font-size: .78rem; font-style: normal; color: var(--muted); }
.tk { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--orange); color: var(--ink); animation: pop .5s var(--ease) both; animation-delay: calc(.6s + var(--i) * .2s); }

/* ── service sections: reuse .feat; the media side holds a small illustration ── */
.mini { position: relative; display: grid; align-content: center; gap: 12px; aspect-ratio: 16 / 11; padding: clamp(20px, 3vw, 36px); overflow: hidden; border: 1px solid rgba(251, 248, 243, .14); border-radius: 22px; background: radial-gradient(80% 70% at 100% 0%, rgba(255, 90, 20, .16), transparent 60%), #151210; box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9); }
.mini__search { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .05); font-size: .95rem; }
.mini__search svg { flex: none; width: 18px; height: 18px; color: var(--muted); }
.mini__search span::after { content: "|"; margin-left: 2px; color: var(--orange); animation: blink 1s steps(1) infinite; }
.mini__res { display: grid; gap: 7px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 16px; background: rgba(251, 248, 243, .03); }
.mini__res small { font-size: .74rem; color: var(--muted); }
.mini__res b { font-size: .98rem; }
.mini__res i { width: 82%; height: 8px; border-radius: 4px; background: rgba(251, 248, 243, .1); }
.mini__res i + i { width: 58%; }
.mini__res.is-hl { border-color: var(--orange); background: rgba(255, 90, 20, .08); box-shadow: 0 0 0 4px rgba(255, 90, 20, .12); }
.mini__tap { position: absolute; right: 20%; bottom: 22%; width: 34px; height: 34px; color: var(--paper); animation: tap 2.8s var(--ease) infinite; }
.mini__tap svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .6)); }
.mini__ring { position: absolute; right: calc(20% + 2px); bottom: calc(22% + 18px); width: 22px; height: 22px; border: 2px solid var(--orange); border-radius: 50%; animation: ring 2.8s infinite; }
@keyframes tap { 0%, 100% { translate: 34px 34px; } 40%, 62% { translate: 0 0; } 50% { scale: .85; } }
@keyframes ring { 0%, 46% { scale: 0; opacity: 0; } 50% { scale: .4; opacity: 1; } 85%, 100% { scale: 2.8; opacity: 0; } }
.mini__post { display: grid; gap: 12px; width: 64%; justify-self: center; padding: 16px; border: 1px solid var(--line); border-radius: 18px; background: rgba(251, 248, 243, .03); }
.mini__who { display: flex; align-items: center; gap: 10px; }
.mini__who b { width: 32px; height: 32px; border-radius: 50%; background: var(--grad); }
.mini__who i { width: 42%; height: 8px; border-radius: 4px; background: rgba(251, 248, 243, .16); }
.mini__img { aspect-ratio: 16 / 9; border-radius: 12px; background: linear-gradient(135deg, #FF5A14, #FF4D7A 60%, #FFB23F); }
.mini__acts { display: flex; gap: 16px; color: var(--muted); }
.mini__acts svg { width: 20px; height: 20px; }
.mini__acts svg:first-child { color: var(--rose); animation: beat 2.4s ease-in-out infinite; }
@keyframes beat { 10%, 30% { scale: 1.25; } 20% { scale: .95; } 40% { scale: 1; } }
.mini__pill { position: absolute; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(28, 25, 23, .9); font-size: .8rem; font-weight: 600; animation: float 6s ease-in-out infinite alternate; --t: none; }
.mini__pill:nth-of-type(1) { left: 6%; top: 12%; }
.mini__pill:nth-of-type(2) { right: 6%; top: 20%; animation-delay: -2s; }
.mini__pill:nth-of-type(3) { left: 8%; bottom: 14%; animation-delay: -3s; }
.mini__pill:nth-of-type(4) { right: 9%; bottom: 10%; animation-delay: -4.5s; }
.mini__cap { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 6px 14px; border-radius: 999px; background: var(--orange); color: var(--ink); font-size: .78rem; font-weight: 700; white-space: nowrap; }
/* creative: a giant outlined word that fills with the gradient when the section arrives */
.wordvis { display: grid; place-items: center; aspect-ratio: 16 / 11; overflow: hidden; border: 1px solid rgba(251, 248, 243, .14); border-radius: 22px; background: radial-gradient(80% 70% at 0% 100%, rgba(255, 90, 20, .14), transparent 60%), #151210; }
.wordvis span { font-size: clamp(3.6rem, 9vw, 8.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 2px rgba(251, 248, 243, .55); background: var(--grad) no-repeat 0 0 / 0% 100%; -webkit-background-clip: text; background-clip: text; transition: background-size 1.4s var(--ease) .35s; }
.feat.is-in .wordvis span, .failsafe .wordvis span, html:not(.js) .wordvis span { background-size: 100% 100%; }
.feat__body .feat__d + .card__inc { margin-top: 18px; }
.feat__body .btn { margin-top: 26px; }
.feat__body .card__inc { font-size: 1rem; }

/* ── small extras ── */
.stats--3 { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
.stat__n--word { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.tiers--2 { grid-template-columns: repeat(2, 1fr); max-width: 920px; margin-inline: auto; }
.tier__pages--word b { font-size: clamp(2.4rem, 4vw, 3.4rem); }
.svc-note { max-width: 62ch; margin-top: 24px; color: var(--muted); }
.svc-note b { color: var(--paper); font-weight: 600; }
.btiles--4 { grid-template-columns: repeat(4, 1fr); }
a.btile { min-height: 230px; color: inherit; text-decoration: none; }
.svc-faq .faq__aside { top: calc(var(--hdr) + 40px); }
.wall--plain { margin-top: 0; }
@media (max-width: 1100px) { .btiles--4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 899px) { .stats--3, .tiers--2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .btiles--4 { grid-template-columns: 1fr; } a.btile { min-height: 0; } .mini__post { width: 84%; } }
.panel__more .card__acts { margin: 0; padding: 0; }
a.btile { height: 100%; }
.svis--sites .fchip { z-index: 4; }
.tier__pages b { white-space: nowrap; }

/* sections out of view: their animations pause (js/main.js initOffscreen) */
.is-off, .is-off *, .is-off *::before, .is-off *::after { animation-play-state: paused !important; }

/* ═══════════════════════════════════════════════════════════════
   WEBSITES PAGE: "what it does" cards, the three-step quote builder, the full comparison
   ═══════════════════════════════════════════════════════════════ */
.cards--4 { grid-template-columns: repeat(4, 1fr); }
.why__n { font-size: .85rem; font-weight: 700; letter-spacing: .1em; color: var(--orange); }

/* ── builder: steps on the left, a summary that stays in view on the right ── */
.bq__form { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(20px, 3vw, 40px); align-items: start; }
.bq__step { min-width: 0; margin: 0 0 20px; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.bq__step:last-child { margin-bottom: 0; }
.bq__h { float: left; width: 100%; display: flex; align-items: center; gap: 14px; padding: 0; margin-bottom: 18px; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -.02em; }
.bq__n { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--orange); color: var(--ink); font-size: 1rem; font-weight: 800; }
.bq__h + * { clear: both; }   /* a floated legend sits inside the card instead of on its border */
.bq__tag { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bq__sub { margin-top: 16px; font-size: .95rem; color: var(--muted); }
.bq__sub .link { color: var(--paper); }

.bq__help { display: grid; gap: 10px; margin-bottom: 18px; padding: 16px 18px; border: 1px dashed rgba(255, 90, 20, .45); border-radius: 18px; background: rgba(255, 90, 20, .05); }
.bq__help[hidden], .bq__q[hidden] { display: none; }
.bq__help-t { font-weight: 600; }
.bq__q { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; color: var(--muted); }
.bq__q span { margin-right: 4px; }
.bq__help-r { color: var(--orange); font-weight: 600; }
.bq__help-r:empty { display: none; }

/* package cards: real radios, the card shows the choice */
.pkgs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.pkg, .mail { position: relative; display: block; cursor: pointer; }
.pkg input, .mail input { position: absolute; top: 18px; left: 18px; opacity: 0; }
.pkg__card { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px; border: 1.5px solid var(--line); border-radius: 20px; background: rgba(251, 248, 243, .03); transition: border-color .3s, background-color .3s, box-shadow .3s, transform .4s var(--ease); }
.pkg:hover .pkg__card { border-color: rgba(255, 90, 20, .55); transform: translateY(-3px); }
.pkg input:checked + .pkg__card { border-color: var(--orange); background: rgba(255, 90, 20, .08); box-shadow: 0 0 0 4px rgba(255, 90, 20, .14), 0 24px 50px -24px rgba(255, 90, 20, .5); }
.pkg input:focus-visible + .pkg__card, .mail input:focus-visible + .mail__card { outline: 2px solid var(--orange); outline-offset: 3px; }
.pkg__top { display: flex; align-items: center; justify-content: space-between; }
.pkg__n { font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.pkg__tick { display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid rgba(251, 248, 243, .3); border-radius: 50%; color: transparent; transition: background-color .3s, border-color .3s, color .3s; }
.pkg__tick svg { width: 16px; height: 16px; }
.pkg input:checked + .pkg__card .pkg__tick { background: var(--orange); border-color: var(--orange); color: var(--ink); }
.pkg__best { font-size: .92rem; color: var(--muted); }
.pkg__pages { margin: 6px 0 4px; font-size: 1rem; font-weight: 500; color: var(--muted); }
.pkg__pages b { margin-right: 4px; font-size: 2.6rem; font-weight: 800; line-height: 1; letter-spacing: -.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pkg__hl { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: .9rem; }
.pkg__hl span { display: flex; gap: 8px; align-items: baseline; }
.pkg__hl span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); transform: translateY(-2px); }

/* step 2: the matched plan */
.plan { padding: 18px 20px; border-radius: 18px; background: rgba(251, 248, 243, .04); }
.plan__v { color: var(--muted); }
.plan__v + .plan__v { margin-top: 6px; }
.plan__v b { display: block; color: var(--paper); font-size: 1.05rem; }
.plan__v[hidden] { display: none; }
.plan__all { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plan__all li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
.bq__opt { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; cursor: pointer; }
.bq__opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--orange); }
.bq__opt small { display: block; color: var(--muted); font-size: .85rem; }

/* step 3: email */
.mails { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mail__card { display: grid; gap: 4px; height: 100%; padding: 16px 18px; border: 1.5px solid var(--line); border-radius: 16px; transition: border-color .3s, background-color .3s; }
.mail__card span { font-size: .85rem; color: var(--muted); }
.mail:hover .mail__card { border-color: rgba(255, 90, 20, .55); }
.mail input:checked + .mail__card { border-color: var(--orange); background: rgba(255, 90, 20, .08); }

/* summary */
.bq__sum { position: sticky; top: calc(var(--hdr) + 24px); display: grid; gap: 18px; padding: 26px; border: 1px solid rgba(255, 90, 20, .35); border-radius: var(--r); background: radial-gradient(90% 60% at 100% 0%, rgba(255, 90, 20, .16), transparent 70%), var(--ink-2); }
.bq__sum-h { font-size: 1.2rem; font-weight: 700; }
.bq__list { display: grid; gap: 12px; margin: 0; }
.bq__list > div { position: relative; padding-left: 30px; }
.bq__list > div::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border: 1.5px solid rgba(251, 248, 243, .3); border-radius: 50%; }
.bq__list > div.is-done::before { border-color: var(--orange); background: var(--orange) center / 13px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0A09' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.bq__list dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bq__list dd { margin: 2px 0 0; font-weight: 600; }
.bq__trust { display: grid; gap: 6px; font-size: .85rem; color: var(--muted); }
.bq__trust li { display: flex; gap: 8px; }
.bq__trust li::before { content: "✓"; color: var(--orange); font-weight: 700; }

/* ── compare every feature ── */
.cmp-sec { padding-top: 0; }
.cmp-sec[id] { scroll-margin-top: 0; }
.cmp { border: 1px solid var(--line); border-radius: var(--r); background: var(--ink-2); }
.cmp summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); cursor: pointer; list-style: none; }
.cmp summary::-webkit-details-marker { display: none; }
.cmp__t { font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700; letter-spacing: -.02em; }
.cmp__s { color: var(--muted); font-size: .92rem; }
.cmp__scroll { overflow-x: auto; padding: 0 clamp(12px, 3vw, 32px) clamp(20px, 3vw, 28px); }
.cmp__table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .95rem; }
.cmp__table thead th { position: sticky; top: 0; padding: 12px; background: var(--ink-2); font-size: 1rem; font-weight: 700; text-align: center; }
.cmp__table tbody th { padding: 11px 12px; font-weight: 500; text-align: left; }
.cmp__table td { padding: 11px 12px; text-align: center; font-weight: 600; }
.cmp__table tbody tr:not(.cmp__g) { border-top: 1px solid var(--line); }
.cmp__g th { padding: 22px 12px 8px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--orange); }
.cmp__table td.y .ic { margin: 0 auto; background: var(--orange); color: var(--ink); }
.cmp__table td.n { color: rgba(251, 248, 243, .4); }
.cmp__table td.n .ic { margin: 0 auto; border: 1.5px solid rgba(251, 248, 243, .2); }

@media (max-width: 1100px) {
  .bq__form { grid-template-columns: 1fr; }
  .bq__sum { position: relative; top: auto; }
  .cards--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) { .pkgs, .mails { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cards--4 { grid-template-columns: 1fr; } }

/* ═══════════════ LEGAL — terms and privacy (inc/sections.php section_legal): the contents list beside the document ═══════════════
   On wide screens the list stays open and sticks beside the text (js/main.js initLegal also marks the section being read);
   on phones it's a closed "On this page" box above the document. The prose is set for long reading: 70 characters a line. */
.hero--legal { padding-bottom: clamp(40px, 5vw, 72px); }
.hero--legal .lede { margin-bottom: 24px; }
.legal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; color: var(--muted); font-size: .92rem; }
.legal { position: relative; padding-block: clamp(8px, 2vw, 24px) clamp(88px, 10vw, 140px); }
.legal__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) {
  .legal__layout { grid-template-columns: 290px minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .legal__nav { position: sticky; top: calc(var(--hdr) + 12px); }
  .toc ol { max-height: calc(100vh - var(--hdr) - 110px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
.toc { border: 1px solid var(--line); border-radius: 20px; background: var(--ink-2); }
.toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 20px; font-weight: 600; cursor: pointer; list-style: none; }
.toc summary::-webkit-details-marker { display: none; }
.toc summary::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .3s var(--ease); }
.toc[open] summary::after { transform: translateY(2px) rotate(225deg); }
.toc__n { color: var(--muted); font-size: .8rem; font-weight: 500; }
.toc ol { position: relative; padding: 0 10px 14px; }
.toc a { display: block; padding: 7px 12px; border-radius: 10px; color: var(--muted); font-size: .9rem; line-height: 1.4; text-decoration: none; transition: color .2s, background-color .2s; }
.toc a:hover { color: var(--paper); background: rgba(251, 248, 243, .05); }
.toc a[aria-current] { color: var(--paper); background: rgba(255, 90, 20, .12); box-shadow: inset 2px 0 0 var(--orange); }
.prose { max-width: 70ch; font-size: 1.02rem; line-height: 1.75; color: rgba(251, 248, 243, .84); overflow-wrap: break-word; }
.prose h2 { margin: 2.2em 0 .55em; color: var(--paper); font-size: clamp(1.3rem, 2.2vw, 1.65rem); font-weight: 700; line-height: 1.25; letter-spacing: -.02em; scroll-margin-top: 24px; }
.prose > h2:first-of-type { margin-top: 0; }
.prose h3 { margin: 1.6em 0 .4em; color: var(--paper); font-size: 1.08rem; font-weight: 600; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose ul { padding-left: 1.3em; list-style: disc; }
.prose li { margin-bottom: .45em; padding-left: .2em; }
.prose li::marker { color: var(--orange); }
.prose a { color: var(--paper); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.prose a:hover { color: var(--orange); }
.prose strong { color: var(--paper); font-weight: 600; }
.prose code { padding: 1px 6px; border-radius: 6px; background: var(--ink-3); font-size: .88em; }
.tldr { margin-bottom: 2.6em; padding: clamp(22px, 3vw, 32px); border: 1px solid rgba(255, 90, 20, .35); border-radius: 24px; background: linear-gradient(160deg, rgba(255, 90, 20, .12), rgba(255, 178, 63, .04) 60%, transparent); }
.prose .tldr__h { margin: 0 0 .7em; font-size: 1.1rem; }
.tldr ul { margin: 0; }
.tldr li:last-child { margin-bottom: 0; }
.tldr__note { margin: 1.1em 0 0; color: var(--muted); font-size: .85rem; }

/* ═══════════════ UI MOCKUPS — drawn stand-ins for the placeholder photos (owner, 2026-10-09; flags #43) ═══════════════
   Close-ups with one idea each, all aria-hidden: the home service strips (.ui--build/grow/create/care), the About collage
   (.ui--design/code/board), How we work (.acc__ui) and the office cards (.city__map). Only the sample business ("Your Business"),
   no real client, no figures. Static, except where motion means something: a live status dot, a search caret, a map pin. */
:root { --tick: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 12.5l4 4 8-9' fill='none' stroke='%230B0A09' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"); }
.ui { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; height: 100%; padding: 16px; overflow: hidden; font-size: .78rem; line-height: 1.3; color: var(--paper); transition: transform 1.4s var(--ease); }
.panel:hover .panel__img .ui, .collage figure:hover .ui, .city:hover .city__map { transform: scale(1.05); }
.ui-card { padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--ink-3); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); }
.ui-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-weight: 600; }
.ui-h small, .ui-card small, .ui small { font-size: .85em; font-weight: 500; color: var(--muted); }
.ui-l { display: block; width: 80%; height: .5em; border-radius: 4px; background: rgba(251, 248, 243, .14); }
.ui-btn { display: inline-block; padding: .4em 1em; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: .9em; font-style: normal; font-weight: 600; }
.ui-ok, .ui-warn { flex: none; display: grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; background: #3DDC84 var(--tick) center / 75% no-repeat; }
.ui-warn { background: var(--amber); }
.ui-warn::after { content: "!"; color: var(--ink); font-size: .8em; font-weight: 800; line-height: 1; }
.ui-list { display: grid; gap: 9px; }
.ui-list li { display: flex; align-items: center; gap: 10px; }
.ui-sky { background: linear-gradient(180deg, #1B1424, #5A2340 62%, #D9483A); }   /* the sample business's dusk photo (home hero) */
.ui-mark { flex: none; display: block; width: 1.3em; height: 1.3em; border-radius: 50%; background: radial-gradient(circle, #1B1424 0 30%, var(--amber) 32%); }   /* its logo */
.ui-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; }

/* home strips */
.ui--build { gap: 30px; }
.ui-win { flex: 0 1 250px; min-width: 0; overflow: hidden; border: 1px solid rgba(251, 248, 243, .14); border-radius: 12px; background: #171412; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); }
.ui-win .mock__bar { gap: 5px; padding: 7px 10px; }
.ui-win .mock__bar i { width: 7px; height: 7px; }
.ui-win .mock__bar span { margin-left: 6px; padding: 2px 9px; font-size: .62rem; }
.ui-win__body { display: grid; gap: 9px; justify-items: start; padding: 14px; }
.ui-win__body b { font-size: 1.05rem; line-height: 1.15; letter-spacing: -.02em; }
.ui-links { display: grid; gap: 8px; }
.ui-links li { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--ink-3); font-weight: 500; white-space: nowrap; }
.ui-links li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 30px; border-top: 1.5px dashed rgba(251, 248, 243, .3); }
.ui-serp { display: grid; gap: 8px; flex: 0 1 260px; min-width: 0; }
.ui-search { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(251, 248, 243, .06); white-space: nowrap; }
.ui-search svg { flex: none; width: 14px; height: 14px; color: var(--muted); }
.ui-search span::after { content: "|"; margin-left: 1px; color: var(--amber); animation: blink 1s steps(1) infinite; }
.ui-res { display: grid; gap: 3px; border-color: rgba(255, 178, 63, .6); box-shadow: 0 0 0 3px rgba(255, 178, 63, .12), 0 24px 40px -20px rgba(0, 0, 0, .8); }
.ui-res b { font-size: .95rem; }
.ui-stars { color: var(--amber); font-size: .8rem; letter-spacing: 2px; }
.ui-chart { flex: 0 0 140px; display: grid; gap: 8px; }
.ui-chart svg { width: 100%; height: auto; overflow: visible; }
.ui-logo { display: grid; justify-items: center; gap: 10px; padding: 18px 22px; font-weight: 700; white-space: nowrap; }
.ui-logo .ui-mark { width: 52px; height: 52px; }
.ui-brand { display: grid; gap: 12px; flex: 0 1 190px; }
.ui-sw { display: flex; gap: 8px; }
.ui-sw i { flex: 1; max-width: 38px; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 50%; }
.ui-sw i:nth-child(1) { background: #1B1424; } .ui-sw i:nth-child(2) { background: var(--rose); } .ui-sw i:nth-child(3) { background: var(--amber); } .ui-sw i:nth-child(4) { background: var(--paper); }
.ui-play { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.ui-play b { position: relative; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--paper); }
.ui-play b::after { content: ""; position: absolute; left: 10px; top: 8px; border: 5px solid transparent; border-left: 8px solid var(--ink); border-right: 0; }
.ui-play span { flex: 1; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--rose) 45%, rgba(251, 248, 243, .15) 45%); }
.ui-status { flex: 0 1 340px; }
.ui-status .ui-h { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ui-status .ui-h span { display: flex; align-items: center; gap: 9px; }
.ui-status .ui-h em { font-size: .9em; font-style: normal; color: #3DDC84; }
.ui-status .pulse { width: 8px; height: 8px; }
.ui-status .ui-list { grid-template-columns: 1fr 1fr; gap: 10px 16px; }

/* About collage: each tile scales like a picture (font sizes follow the tile's width) */
.collage figure { container-type: inline-size; }
.collage .ui { height: auto; font-size: 3.2cqi; }
.ui--design, .ui--code { display: block; padding: 0; }
.collage figure:nth-child(1) .ui { aspect-ratio: 700 / 860; }
.collage figure:nth-child(2) .ui { aspect-ratio: 1; }
.collage figure:nth-child(3) .ui { aspect-ratio: 760 / 570; font-size: 2.9cqi; }
.ui--design { background: radial-gradient(rgba(251, 248, 243, .09) 1px, transparent 1.5px) 0 0 / 18px 18px, #141110; }
.ui-tools { position: absolute; left: 5%; top: 50%; translate: 0 -50%; display: grid; gap: .7em; padding: .7em; border: 1px solid var(--line); border-radius: .9em; background: var(--ink-3); }
.ui-tools i { width: 1.5em; height: 1.5em; border-radius: .4em; background: rgba(251, 248, 243, .12); }
.ui-tools i:first-child { background: var(--rose); }
.ui-art { position: absolute; left: 24%; top: 12%; width: 62%; display: grid; gap: .8em; justify-items: start; padding-bottom: 1.4em; overflow: hidden; border-radius: 1.2em; background: #1E1A17; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9); }
.ui-art > :not(.ui-art__img) { margin-inline: 1.2em; }
.ui-art__img { width: 100%; height: 9em; }
.ui-art b { font-size: 1.7em; line-height: 1.1; letter-spacing: -.02em; }
.ui-sel { position: relative; margin-top: .4em; outline: 1.5px solid var(--rose); outline-offset: .45em; border-radius: 999px; }
.ui-sel::before, .ui-sel::after { content: ""; position: absolute; width: .6em; height: .6em; border: 1.5px solid var(--rose); background: var(--paper); }
.ui-sel::before { left: -.75em; top: -.75em; } .ui-sel::after { right: -.75em; bottom: -.75em; }
.ui-tag { position: absolute; display: flex; align-items: flex-start; font-size: 1em; font-weight: 600; color: var(--ink); }
.ui-tag svg { width: 1.8em; height: 1.8em; color: var(--c); }
.ui-tag span { margin: 1.2em 0 0 -.3em; padding: .25em .8em; border-radius: .3em 999px 999px; background: var(--c); }
.ui--code { background: #12100E; }
.ui--code .mock__bar span { font-size: .85em; }
.ui--code pre { margin: 0; padding: 1.2em 1.4em; font: 500 1.3em/1.75 ui-monospace, Consolas, monospace; color: rgba(251, 248, 243, .82); white-space: pre; }
.ui--code .c { color: #8C847B; } .ui--code .k { color: var(--rose); } .ui--code .f { color: var(--amber); } .ui--code .s { color: #3DDC84; }
.ui--board { display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; align-content: center; gap: .9em; padding: 1.4em; background: #141110; }
.ui-lane { display: grid; align-content: start; gap: .7em; padding: .8em; border-radius: 1em; background: rgba(251, 248, 243, .04); }
.ui-lane > small { font-weight: 600; }
.ui-task { position: relative; display: grid; gap: .6em; justify-items: start; padding: .8em .9em; border: 1px solid var(--line); border-radius: .8em; background: var(--ink-3); }
.ui-task b { font-size: 1.05em; font-weight: 600; line-height: 1.2; }
.ui-task i { padding: .15em .7em; border-radius: 999px; background: var(--c); color: var(--ink); font-size: .85em; font-style: normal; font-weight: 600; }
.ui-task.is-done::after { content: ""; position: absolute; top: .8em; right: .8em; width: 1.2em; height: 1.2em; border-radius: 50%; background: #3DDC84 var(--tick) center / 75% no-repeat; }
.ui-task.is-done b { padding-right: 1.4em; }

/* How we work: one card per panel, above the words */
.acc__ui { flex: none; width: 340px; max-width: 100%; margin: 40px 0 24px; font-size: .88rem; line-height: 1.3; transition: opacity .6s; }
.ui-tl { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr; gap: 5px; margin-top: 16px; font-size: .85em; color: var(--muted); }
.ui-tl span { padding-top: 8px; border-top: 6px solid var(--orange); }
.ui-tl span:nth-child(2) { border-color: var(--amber); } .ui-tl span:nth-child(3) { border-color: #3DDC84; }
.ui-team i { display: grid; place-items: center; flex: none; width: 1.7em; height: 1.7em; border-radius: 50%; background: var(--c); color: var(--ink); font-size: .75em; font-style: normal; font-weight: 700; }
.ui-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; text-align: center; }
.ui-cal b { font-size: .75em; font-weight: 600; color: var(--muted); }
.ui-cal i { aspect-ratio: 1.3; border-radius: 5px; background: rgba(251, 248, 243, .06); }
.ui-cal i.is-on { background: #3DDC84 var(--tick) center / 50% no-repeat; }
.ui-cal + p { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
@media (min-width: 900px) {
  .js .acc__ui { max-width: none; margin-bottom: auto; }
  .js .acc__item:not(.is-open) .acc__ui { opacity: .3; }
}

/* office cards: a map with the pin on the office */
.city__map { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; transition: transform 1.4s var(--ease); }
.city__ping { transform-box: fill-box; transform-origin: center; animation: ping 2.4s var(--ease) infinite; }
.city__zoom { position: absolute; top: 20px; right: 20px; display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-3); font-size: 1.1rem; font-weight: 500; line-height: 1; color: var(--muted); }
.city__zoom i { display: grid; place-items: center; width: 34px; height: 34px; font-style: normal; }
.city__zoom i + i { border-top: 1px solid var(--line); }

@media (max-width: 600px) {
  .panel__img { height: 150px; }
  .ui { padding: 10px; font-size: .7rem; }
  .ui--build { gap: 22px; }
  .ui-win__body { gap: 6px; padding: 10px; }
  .ui-win__body b { font-size: .85rem; }
  .ui-win__body .ui-l, .ui-chart, .ui-play { display: none; }
  .ui-links li::before { width: 22px; }
  .ui-logo { padding: 12px 16px; }
  .ui-logo .ui-mark { width: 38px; height: 38px; }
}
@media print {
  .legal__nav, .hero--legal .hero__bg { display: none; }
  .prose { max-width: none; color: #000; }
  .prose h2, .prose h3, .prose strong, .prose a { color: #000; }
}