/* ══ Service pages (services/*.html) — one template for all six ═══════════════════════════════════
   Structure (fraxbit's service page, our design): light hero (shared) · about + four strengths (white) ·
   from sketch to site (navy, pinned) · who it's for (white) · what you get (navy) · how it works (white) ·
   what we build (navy strips) · FAQ (white, shared) · ready for launch + Earth footer (shared).
   Behaviour: assets/js/service-page.js
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1 · hero extras: two buttons, a small note under a stat ── */
.sp-hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(30px,3.4vw,40px)}
.page-hero .ph-stats{margin-top:clamp(44px,5.5vw,72px)}
@media (max-width:520px){.sp-hero-btns .btn{width:100%;justify-content:space-between}}

/* ── 2 · about (white): the statement, then four strengths as dark premium cards ── */
.sp-intro{max-width:880px}
.sp-intro .h-xl{margin:20px 0 28px}
.sp-intro-text{font-size:clamp(17px,1.35vw,20px);line-height:1.65;color:#4A4F5E;max-width:62ch}
.sp-intro-strong{margin-top:22px;font:600 clamp(16px,1.2vw,18px)/1.5 var(--font);color:var(--navy)}
/* the four strengths: dark premium cards on the white panel (the only motion is the "selected" frame below).
   A big number in the brushed-metal white of the logo, top right; the title starts at the same height in every card
   (so titles always line up, whatever the length of the text) and the line flows below it. */
.sp-pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.2vw,18px);margin-top:clamp(48px,6vw,80px)}
.sp-pillar{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:clamp(320px,27vw,400px);
  padding:clamp(26px,2.4vw,36px);border-radius:24px;color:var(--cloud);
  background:radial-gradient(120% 75% at 100% 0%,rgba(30,193,203,.13),rgba(30,193,203,0) 58%),linear-gradient(165deg,#25253B 0%,#1C1C28 55%,#14141D 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 34px 60px -38px rgba(28,28,40,.7)}
.sp-pillar b{position:absolute;top:clamp(14px,1.4vw,22px);right:clamp(18px,1.8vw,28px);z-index:-1;
  font:700 clamp(72px,7vw,112px)/1 var(--font);letter-spacing:-.06em;padding:0 .04em .06em;
  background:linear-gradient(180deg,#ffffff 0%,#e8ecf0 45%,#9aa3ad 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(93,100,109,.55)) drop-shadow(0 10px 18px rgba(0,0,0,.45))}
.sp-pillar h3{margin-top:clamp(130px,11.5vw,180px);font:600 clamp(22px,1.75vw,27px)/1.15 var(--font);letter-spacing:-.03em;color:var(--white)}
.sp-pillar p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--slate);max-width:34ch}
/* "selected", Apple-TV style: the card rises and grows a touch, its edge turns to a fine white hairline, the shadow
   deepens, a soft light comes on along the top and one gentle glare sweeps across the glass. No colour, no frame.
   On hover with a mouse; on touch screens the card in the middle of the screen gets it (.sel, service-page.js). */
.sp-pillar{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out)}
.sp-pillar::before,.sp-pillar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0}
/* the light along the top */
.sp-pillar::before{background:radial-gradient(90% 55% at 50% 0%,rgba(255,255,255,.13),rgba(255,255,255,0) 70%);transition:opacity .5s var(--ease)}
/* the glare: a soft diagonal band, parked off the right edge, that glides across once as the card is selected */
.sp-pillar::after{background:linear-gradient(110deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.11) 50%,rgba(255,255,255,0) 60%) 130% 0/250% 100% no-repeat;
  transition:opacity .4s var(--ease),background-position 0s .4s}
.sp-pillar.sel,.sp-pillar:hover{transform:translateY(-8px) scale(1.025);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2),inset 0 1px 0 rgba(255,255,255,.28),0 50px 80px -36px rgba(28,28,40,.75),0 18px 30px -18px rgba(28,28,40,.45)}
.sp-pillar.sel::before,.sp-pillar:hover::before{opacity:1}
.sp-pillar.sel::after,.sp-pillar:hover::after{opacity:1;background-position:-30% 0;transition:opacity .2s var(--ease),background-position 1.1s cubic-bezier(.3,.6,.2,1)}
@media (hover:none){.sp-pillar:hover:not(.sel){transform:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 34px 60px -38px rgba(28,28,40,.7)}
  .sp-pillar:hover:not(.sel)::before,.sp-pillar:hover:not(.sel)::after{opacity:0}}
@media (prefers-reduced-motion:reduce){.sp-pillar{transition:box-shadow .3s}.sp-pillar.sel,.sp-pillar:hover{transform:none}.sp-pillar::after{display:none}}
@media (max-width:1100px){.sp-pillars{grid-template-columns:repeat(2,minmax(0,1fr))}.sp-pillar{min-height:300px}.sp-pillar h3{margin-top:130px}}
@media (max-width:600px){.sp-pillars{grid-template-columns:1fr}.sp-pillar{min-height:0}.sp-pillar h3{margin-top:110px}}

/* ── 3 · piece by piece (navy, pinned for ~1.6 screens of scrolling) ──
      --p (0 → 1) from service-page.js: an exploded view — five glass layers turn flat and land on each other.
      The mock site is sized in container units (cqw of .sk-view) so it scales as one picture. */
.section.sp-sketch{padding:0;height:260vh;background:
  radial-gradient(45% 40% at 85% 10%,rgba(30,193,203,.12),rgba(30,193,203,0) 70%),var(--navy)}
.sk-stage{position:sticky;top:0;height:100vh;height:100dvh;display:flex;align-items:center;overflow:hidden}
/* two columns: the text on the left (heading, line, the three steps stacked), the website card on the right,
   as big as the column and the screen height allow (--w); the caption sits centred under the card */
.sk-in{--w:min(100%,calc((100vh - 190px) * 1.66));width:100%;padding-top:76px;display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(0,1.5fr);grid-template-areas:"head browser" "head caption";
  column-gap:clamp(36px,4.6vw,84px);align-items:center}
@supports (height:100dvh){.sk-in{--w:min(100%,calc((100dvh - 190px) * 1.66))}}
.sk-head{grid-area:head;align-self:center;display:flex;flex-direction:column;gap:clamp(20px,3vh,32px)}
.sk-head .h-xl{margin-top:16px;font-size:clamp(38px,min(5vw,8vh),78px)}
.sk-side{max-width:420px}
.sk-side .lede{font-size:15px;margin-bottom:clamp(20px,3vh,30px)}
/* the steps as a short vertical list with a rail; the current one lights up */
.sk-steps{display:grid;gap:4px;list-style:none;border-left:1px solid var(--line-strong)}
.sk-steps li{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:12px;padding:12px 0 12px 20px;opacity:.42;transition:opacity .4s var(--ease)}
.sk-steps li::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:2px;background:var(--cyan);transform:scaleY(0);transition:transform .45s var(--ease-out)}
.sk-steps li.on{opacity:1}
.sk-steps li.on::before{transform:scaleY(1)}
.sk-steps b{font:700 13px/1.65 var(--font);letter-spacing:.14em;color:var(--cyan)}
.sk-steps span{font:600 clamp(17px,1.35vw,20px)/1.35 var(--font);color:var(--cloud)}
.sk-steps small{grid-column:2;margin-top:3px;font-size:clamp(13.5px,1vw,15px);color:var(--slate)}

.sk-browser{grid-area:browser;justify-self:end;width:var(--w);border-radius:16px;overflow:hidden;
  background:#0E0E16;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(0,0,0,.9)}
.sk-bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#191924;border-bottom:1px solid rgba(255,255,255,.06)}
.sk-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.18)}
.sk-count{margin-left:auto;font:600 11px/1 var(--font);font-style:normal;letter-spacing:.08em;color:var(--slate);white-space:nowrap}
.sk-count b{color:var(--cyan);font-variant-numeric:tabular-nums}
.sk-bar span{margin-left:12px;padding:4px 12px;border-radius:999px;background:rgba(255,255,255,.06);font:500 11px/1 var(--font);color:var(--slate)}
.sk-view{--p:0;position:relative;aspect-ratio:16/9.4;container-type:inline-size;overflow:hidden}
.sk-layer{position:absolute;inset:0;padding:3.2cqw 4cqw;display:flex;flex-direction:column;gap:3cqw}
.sk-caption{grid-area:caption;justify-self:end;width:var(--w);margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}
/* narrower computer screens: the text goes back on top, the card below it */
@media (max-width:1100px) and (min-width:761px){
  .sk-in{--w:min(100%,calc((100vh - 400px) * 1.66));grid-template-columns:1fr;grid-template-areas:"head" "browser" "caption";row-gap:clamp(16px,2.6vh,28px)}
  .sk-head{flex-direction:row;justify-content:space-between;align-items:flex-end;flex-wrap:wrap}
  .sk-steps{grid-auto-flow:column;border-left:0}
  .sk-browser,.sk-caption{justify-self:center}
}

/* the page layout (the slots the pieces land in) */
.m-nav{display:flex;align-items:center;justify-content:space-between;height:3.6cqw}
.m-logo{width:13cqw;height:2.4cqw}
.m-links{display:flex;gap:2.4cqw}
.m-links i{display:block;width:6cqw;height:1.2cqw}
.m-btn{width:9cqw;height:3.4cqw}
.m-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:4cqw;flex:1;min-height:0}
.m-copy{display:flex;flex-direction:column;justify-content:center;gap:1.3cqw}
.m-btns{display:flex;gap:1.2cqw;margin-top:1.4cqw}
.m-img{border-radius:2cqw;overflow:hidden;position:relative}
.m-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;height:8.5cqw}

/* the finished site — an example brand in its own palette (warm cream, espresso, terracotta) */
.sk-final{color:#2A1D16;background:#F6F0E8}   /* the template the exploded layers are cloned from (hidden once they exist) */
/* the exploded view (default reveal): the site floats tilted in 3D as five layers stacked apart, each with a label.
   service-page.js sets --r on the section (1 = fully tilted → 0 = flat, facing you), --e on each layer (1 = lifted
   off → 0 = landed) and --frame (the browser frame closing around the finished site). */
.is-stack .sk-final{display:none}
.is-stack .sk-browser{position:relative;background:transparent;box-shadow:none;overflow:visible}
.is-stack .sk-browser::before{content:"";position:absolute;inset:0;border-radius:16px;background:#0E0E16;opacity:var(--frame,1);
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 50px 100px -40px rgba(0,0,0,.9)}
.is-stack .sk-bar{position:relative;z-index:1;border-radius:16px 16px 0 0;opacity:var(--frame,1)}
.is-stack .sk-view{z-index:1;overflow:visible;perspective:2200px;perspective-origin:50% 30%}
.sk-stack{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 55%;
  transform:rotateX(calc(var(--r,0) * 54deg)) rotateZ(calc(var(--r,0) * -32deg)) scale(calc(1 - var(--r,0) * .3))}
/* every lifted layer is a sheet of real glass: frosted (it blurs what's behind it), a soft white sheen across the
   surface, a thin bright edge that catches the light along the top, and a soft shadow. It all fades as the layer lands. */
.sk-ly{color:#2A1D16;transform:translateZ(calc(var(--e,0) * var(--z) * 6.5cqw));
  border-radius:calc(var(--e,0) * 1.4cqw);
  background:linear-gradient(135deg,rgba(255,255,255,calc(var(--e,0) * .2)) 0%,rgba(255,255,255,calc(var(--e,0) * .05)) 42%,rgba(255,255,255,calc(var(--e,0) * .02)) 60%,rgba(255,255,255,calc(var(--e,0) * .1)) 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,calc(var(--e,0) * .32)),inset 0 1px 0 rgba(255,255,255,calc(var(--e,0) * .7)),
    0 2cqw 4cqw -1cqw rgba(0,0,0,calc(var(--e,0) * .35));
  /* clear glass: only a touch of blur while the layers are far apart, so the site stays in focus as it lands */
  -webkit-backdrop-filter:blur(calc(var(--e,0) * var(--e,0) * 2px)) saturate(calc(1 + var(--e,0) * .2));backdrop-filter:blur(calc(var(--e,0) * var(--e,0) * 2px)) saturate(calc(1 + var(--e,0) * .2))}
/* the page: the cream sheet everything lands on (not glass) */
.sk-ly.ly-base{background:#F6F0E8;border-radius:0 0 16px 16px;box-shadow:0 2cqw 5cqw rgba(0,0,0,calc(var(--r,0) * .55));-webkit-backdrop-filter:none;backdrop-filter:none}
/* the grid: twelve soft silver columns — the structure — gone once the site is finished */
.sk-ly.ly-grid{flex-direction:row;gap:1.4cqw;opacity:var(--e,0)}
.sk-ly.ly-grid i{flex:1;background:rgba(190,198,212,.16);box-shadow:inset 1px 0 0 rgba(255,255,255,.35),inset -1px 0 0 rgba(120,130,150,.25)}
/* each layer shows only its own parts of the same layout, so they line up exactly when they land */
.sk-ly.ly-media *,.sk-ly.ly-type *,.sk-ly.ly-ui *{visibility:hidden}
.sk-ly.ly-media :is(.f-img,.f-img *),
.sk-ly.ly-type :is(.f-logo,.f-logo *,.f-links,.f-links *,.f-eyebrow,.f-h1,.f-h1 *,.f-p),
.sk-ly.ly-ui :is(.f-btn,.m-btns *,.f-cards span,.f-cards span *){visibility:visible}
/* the layer names: flat, readable callouts that live outside the 3D (always facing you). Each one sits on an invisible
   pin on its layer's top-left corner (service-page.js moves it there every frame) and fades as the layer lands. */
.ly-pin{position:absolute;left:0;top:0;width:1px;height:1px;visibility:hidden}
.ly-label{position:absolute;left:0;top:0;z-index:6;display:flex;align-items:center;gap:8px;padding:7px 13px 7px 11px;border-radius:999px;
  margin:-34px 0 0 -6px;white-space:nowrap;pointer-events:none;will-change:transform,opacity;
  font:600 13px/1 var(--font);letter-spacing:.01em;color:#fff;
  background:linear-gradient(135deg,rgba(255,255,255,.24),rgba(255,255,255,.08));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.38),inset 0 1px 0 rgba(255,255,255,.7),0 8px 22px rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);backdrop-filter:blur(10px) saturate(1.3)}
.ly-label b{font-weight:700;font-size:11px;letter-spacing:.12em;color:rgba(255,255,255,.55)}
/* a short leader line from the pill down to the layer's corner */
.ly-label::after{content:"";position:absolute;left:12px;top:100%;width:1px;height:12px;background:linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,0))}
@media (max-width:760px){.ly-label{gap:6px;font-size:10px;padding:3px 9px 3px 8px;margin-top:-22px}.ly-label b{font-size:8.5px}.ly-label::after{height:8px}}
.f-logo b{font-weight:500;color:#C2643A;margin-left:.3em;letter-spacing:.02em}
.f-links i{width:auto;height:auto;font:500 1.25cqw/1 var(--font);font-style:normal;color:#5A4A3F}
.f-btn{display:grid;place-items:center;border-radius:2cqw;background:#2A1D16;color:#F6F0E8;font:600 1.25cqw/1 var(--font)}
.f-eyebrow{font:600 1.05cqw/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#C2643A}
.f-h1{font:700 3.6cqw/1.02 var(--font);letter-spacing:-.04em}
.f-p{font:400 1.35cqw/1.5 var(--font);color:#6B5A4D;max-width:34cqw}
.f-b{display:grid;place-items:center;width:12cqw;height:3.6cqw;border-radius:2cqw;background:#C2643A;color:#fff;font:600 1.2cqw/1 var(--font)}
.f-b.ghost{background:transparent;color:#2A1D16;box-shadow:inset 0 0 0 .15cqw #2A1D16}
.f-img{background:radial-gradient(60% 55% at 35% 30%,#E9B98F,#C2643A 55%,#6E3216);box-shadow:0 2cqw 4cqw -2cqw rgba(110,50,22,.6)}
.f-cup{position:absolute;left:50%;bottom:16%;width:38%;aspect-ratio:1.25;transform:translateX(-50%);border-radius:0 0 46% 46%/0 0 60% 60%;
  background:linear-gradient(180deg,#FFF8F1,#EADBCB);box-shadow:0 1.4cqw 2.4cqw rgba(60,25,10,.35)}
.f-cup::before{content:"";position:absolute;left:8%;right:8%;top:-4%;height:22%;border-radius:50%;background:radial-gradient(#5A3220,#3A1E12)}
.f-cup::after{content:"";position:absolute;right:-20%;top:18%;width:26%;height:42%;border:1.1cqw solid #EADBCB;border-left:0;border-radius:0 50% 50% 0}
.f-steam{position:absolute;left:50%;top:14%;width:14%;height:30%;transform:translateX(-50%);
  background:radial-gradient(50% 30% at 40% 70%,rgba(255,255,255,.55),transparent 70%),radial-gradient(40% 30% at 60% 30%,rgba(255,255,255,.4),transparent 70%);filter:blur(.4cqw)}
.f-cards span{display:flex;flex-direction:column;justify-content:center;padding:0 2cqw;border-radius:1.6cqw;background:#fff;
  font:500 1.1cqw/1.3 var(--font);color:#6B5A4D;box-shadow:0 .6cqw 1.6cqw rgba(60,30,15,.08)}
.f-cards b{font:700 2.3cqw/1.1 var(--font);color:#2A1D16;letter-spacing:-.03em}

/* the Development page's example (class "ex-app" on the section): the browser becomes a phone. The same five layers
   float tilted and drop one by one into an iPhone-shaped frame, and the finished thing is an app running on its screen
   (a booking app in its own cool palette: mist, ink, indigo). The app is drawn tall, in the phone's own units (cqw of
   the screen), and reuses the f-* class names so each layer still shows only its own parts:
   picture → Images · logo, headline, lines, tab bar → Type · buttons and class rows → Buttons & cards. */
.ex-app .sk-in{--w:min(100%,calc((100vh - 270px) * .49))}
@supports (height:100dvh){.ex-app .sk-in{--w:min(100%,calc((100dvh - 270px) * .49))}}
.ex-app :is(.sk-browser,.sk-caption){justify-self:center}
.ex-app .sk-caption{width:auto;margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.ex-app .sk-caption .sk-count{margin:0}
.ex-app .sk-browser{border-radius:calc(var(--w) * .14)}
.ex-app .sk-view{aspect-ratio:9/18.4}
/* the phone: a dark body a little larger than the screen, and the island at the top — both arrive with the frame */
.ex-app.is-stack .sk-browser::before{inset:-10px;border-radius:calc(var(--w) * .14 + 10px);background:#0B0E16;
  box-shadow:0 0 0 1.5px #3A4258,inset 0 0 0 2px #1B2030,0 50px 100px -40px rgba(0,0,0,.9)}
.ex-app.is-stack .sk-browser::after{content:"";position:absolute;z-index:3;left:50%;top:calc(var(--w) * .04);width:30%;height:calc(var(--w) * .085);
  transform:translateX(-50%);border-radius:99px;background:#0B0E16;opacity:var(--frame,1)}
.ex-app :is(.sk-final,.sk-ly){color:#131A2B}
.ex-app .sk-final,.ex-app .sk-ly.ly-base{background:#EEF2F7}
.ex-app .sk-ly.ly-base{border-radius:calc(var(--w) * .14)}
.ex-app .sk-ly{transform:translateZ(calc(var(--e,0) * var(--z) * 15cqw));border-radius:calc(var(--e,0) * 4cqw)}
.ex-app .sk-ly.ly-base{transform:none}
.ex-app .sk-layer{padding:17cqw 6.5cqw 6cqw;gap:4.2cqw}
.ex-app .sk-ly.ly-grid{gap:3cqw}
.ex-app .a-top{display:flex;align-items:center;justify-content:space-between}
.ex-app .f-logo{font:800 5.2cqw/1 var(--font);letter-spacing:-.02em}
.ex-app .f-logo b{color:#3B5BDB}
.ex-app .f-btn{width:9.5cqw;height:9.5cqw;border-radius:50%;background:#131A2B;color:#EEF2F7;font:700 3cqw/1 var(--font)}
.ex-app .a-head{display:flex;flex-direction:column;gap:2.6cqw}
.ex-app .f-eyebrow{font:700 2.7cqw/1 var(--font);letter-spacing:.18em;color:#3B5BDB}
.ex-app .f-h1{font:700 8.4cqw/1.04 var(--font);letter-spacing:-.04em}
.ex-app .f-img{flex:none;height:38cqw;border-radius:5cqw;overflow:hidden;position:relative;
  background:radial-gradient(70% 80% at 22% 20%,#8FA5FF,#3B5BDB 55%,#1A2A6C);box-shadow:0 4cqw 8cqw -4cqw rgba(26,42,108,.6)}
.ex-app .a-orb{position:absolute;right:-8%;bottom:-38%;width:62%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.16)}
.ex-app .a-orb + .a-orb{right:22%;bottom:-58%;width:54%;background:rgba(255,255,255,.1)}
.ex-app .m-btns{display:flex;gap:2.5cqw;margin:0}
.ex-app .f-b{flex:1;width:auto;height:11cqw;border-radius:6cqw;background:#3B5BDB;color:#fff;font:700 3.4cqw/1 var(--font)}
.ex-app .f-b.ghost{background:transparent;color:#131A2B;box-shadow:inset 0 0 0 .4cqw #131A2B}
.ex-app .f-p{font:600 3.3cqw/1.4 var(--font);color:#5A6579;max-width:none}
.ex-app .f-cards{display:grid;grid-template-columns:1fr;gap:2.4cqw;height:auto;margin-top:-1.6cqw}
.ex-app .f-cards span{flex-direction:row;align-items:center;justify-content:space-between;padding:3.6cqw 4cqw;border-radius:4cqw;background:#fff;
  font:500 3cqw/1.2 var(--font);color:#5A6579;box-shadow:0 1.5cqw 4cqw rgba(19,26,43,.08)}
.ex-app .f-cards b{font:700 3.8cqw/1.2 var(--font);color:#131A2B;letter-spacing:-.02em}
.ex-app .f-links{display:flex;justify-content:space-between;margin-top:auto;padding:3.6cqw 2cqw 0;border-top:.3cqw solid rgba(19,26,43,.12)}
.ex-app .f-links i{font:600 2.8cqw/1 var(--font);font-style:normal;color:#5A6579}
.ex-app .f-links i:first-child{color:#3B5BDB}
@media (max-width:1100px) and (min-width:761px){.ex-app .sk-in{--w:min(100%,calc((100vh - 430px) * .49))}}
@media (max-width:760px){.ex-app .sk-in{--w:min(74%,300px)}}

/* the Marketplace cards page's example (class "ex-card" on the section): a tall product card instead of a website.
   The same five layers float tilted and drop onto each other until the finished card stands in its frame.
   The card is a real photo (assets/img/card-flask.jpg, made by the user: a navy flask in the snow, with the WEB / SPACE
   logo printed on it in the photo itself) that fills the whole card, with three mini cards down its left side added
   here as live elements, placed in the card's own units (cqw of the card; the card is 100 × 133.3).
   Each layer shows only its own parts: the photo → "Product photo" · the three navy tiles with their symbols →
   "Panels" · the figures and captions on them → "Facts". */
.ex-card .sk-in{--w:min(100%,calc((100vh - 250px) * .74))}
@supports (height:100dvh){.ex-card .sk-in{--w:min(100%,calc((100dvh - 250px) * .74))}}
.ex-card :is(.sk-browser,.sk-caption){justify-self:center}
.ex-card .sk-view{aspect-ratio:3/4}
.ex-card .sk-final,.ex-card .sk-ly.ly-base{background:#E6ECF3}
.ex-card .sk-ly{transform:translateZ(calc(var(--e,0) * var(--z) * 11cqw));border-radius:calc(var(--e,0) * 3cqw)}
.ex-card .sk-ly.ly-base{transform:none}
.ex-card .sk-layer{padding:6cqw;gap:3.6cqw}
.ex-card .sk-ly.ly-grid{gap:3cqw}
.ex-card .sk-layer > :not(i):not(.ly-pin){position:absolute}
/* the photo, edge to edge */
.ex-card .f-img{inset:0;border-radius:0;overflow:hidden;background:none;box-shadow:none}
.ex-card .f-img img{display:block;width:100%;height:100%;object-fit:cover}
/* three mini cards down the left side: a navy tile with a thin white edge, a small line symbol, a large cyan figure
   and a white caption */
.ex-card .c-tiles{left:5cqw;top:15cqw;display:grid;gap:3.4cqw;width:25cqw}
.ex-card .c-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8cqw;height:23.5cqw;border-radius:3.6cqw;
  background:linear-gradient(160deg,#2A2A3C,var(--navy) 60%,var(--deep));box-shadow:inset 0 0 0 .45cqw rgba(255,255,255,.92),0 3cqw 6cqw -3cqw rgba(16,16,25,.55);color:var(--white)}
.ex-card .c-tile svg{width:5.6cqw;height:5.6cqw;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ex-card .c-tile b{font:800 8.6cqw/1 var(--font);letter-spacing:-.04em;color:var(--cyan)}
.ex-card .c-tile small{font:600 2.5cqw/1 var(--font);letter-spacing:.02em}
/* which layer shows what: the tiles and their symbols on "Panels", the figures and captions on "Facts" */
.ex-card .sk-ly.ly-type :is(.c-tile,.c-tile svg,.c-tile svg *),
.ex-card .sk-ly.ly-ui :is(.c-tile b,.c-tile small){visibility:visible}
@media (max-width:1100px) and (min-width:761px){.ex-card .sk-in{--w:min(100%,calc((100vh - 430px) * .74))}}
@media (max-width:760px){.ex-card .sk-in{--w:min(86%,340px)}}

/* the AI video page's film (.sp-film): one tall, portrait AI-made video — the view from the ship's cabin — with the
   words beside it on computer screens and laid over it on phones, where the video fills the screen edge to edge.
   The <video> plays silently on a loop only while it is on screen (service-page.js → [data-autoplay]); until the file
   exists the frame holds a placeholder slot. */
.section.sp-film{background:radial-gradient(50% 40% at 80% 20%,rgba(30,193,203,.1),rgba(30,193,203,0) 70%),var(--navy)}
.fm-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,7vw,120px);align-items:center}
.fm-copy .h-xl{margin-top:20px}
.fm-copy .lede{margin-top:clamp(18px,2vw,28px);max-width:44ch}
.fm-frame{position:relative;height:min(82vh,780px);aspect-ratio:9/16;border-radius:clamp(22px,2.4vw,34px);overflow:hidden;background:var(--deep);
  box-shadow:0 0 0 1px var(--line-strong),0 60px 120px -50px rgba(0,0,0,.95),0 30px 80px -40px rgba(30,193,203,.35)}
.fm-frame :is(video,img){display:block;width:100%;height:100%;object-fit:cover}
.fm-frame .slot{position:absolute;inset:0;border-radius:0;border:0}
@media (max-width:860px){
  .section.sp-film{padding:0}
  .sp-film .wrap{max-width:none;padding:0}
  .fm-grid{display:block;position:relative}
  .fm-frame{width:100%;height:auto;max-height:none;border-radius:0;box-shadow:none}
  .fm-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,16,25,.82),rgba(16,16,25,0) 34%,rgba(16,16,25,0) 70%,rgba(16,16,25,.6))}
  .fm-copy{position:absolute;z-index:2;left:0;right:0;top:0;padding:clamp(84px,22vw,120px) clamp(16px,4vw,40px) 0}
}
/* the reels (.sp-reels): a row of portrait places for finished reels, straight under the film on the same navy.
   Each place is a 9:16 frame with a caption. An empty place holds a placeholder slot; a finished reel goes in as
   <video data-autoplay muted loop playsinline poster="…"><source src="…"></video>. On phones the row scrolls sideways. */
.section.sp-reels{padding-top:clamp(20px,4vw,60px);border-radius:0;margin-top:0}
.rs-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);margin-top:clamp(32px,4vw,56px)}
.rs{display:block}
.rs-frame{position:relative;aspect-ratio:9/16;border-radius:var(--r-lg);overflow:hidden;background:var(--ink);box-shadow:0 0 0 1px var(--line-strong);transition:transform .6s var(--ease-out),box-shadow .4s var(--ease)}
.rs:hover .rs-frame{transform:translateY(-8px);box-shadow:0 0 0 1px rgba(255,255,255,.4),0 40px 70px -40px rgba(0,0,0,.9)}
.rs-frame :is(video,img){display:block;width:100%;height:100%;object-fit:cover}
.rs-frame .slot{position:absolute;inset:0;border-radius:0;border:0}
.rs-cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.rs-cap b{display:flex;gap:12px;align-items:baseline;font:600 clamp(16px,1.5vw,20px)/1.2 var(--font);letter-spacing:-.02em;color:var(--white)}
.rs-cap b em{font:600 12px/1 var(--font);font-style:normal;color:var(--cyan)}
.rs-cap span{font:600 10px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate);white-space:nowrap}
@media (max-width:760px){
  .rs-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:68%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    margin-left:calc(-1 * clamp(16px,4vw,40px));margin-right:calc(-1 * clamp(16px,4vw,40px));padding:0 clamp(16px,4vw,40px) 6px;scrollbar-width:none}
  .rs-row::-webkit-scrollbar{display:none}
  .rs{scroll-snap-align:center}
}

/* the Automation page's stack (.sp-stack, [data-stack] in service-page.js): six large cards, one per step of an
   automated flow. Each card's holder is one screen tall and sticks to the top, so as you scroll the next card slides up
   and lands on the one before; the earlier cards shrink a little and their top edges stay visible above it, like a
   stack of plates (a plain-CSS port of the "stacking cards" pattern — sticky holders, a per-card offset, and a scale
   the script sets as --s). Only transform changes while scrolling.
   The cards are in the site's own palette: white metal sheets with navy type, a cyan status light, and a glossy navy
   tile holding a rendered icon (assets/img/auto-1…6.jpg). */
.section.sp-stack{padding:0 0 12vh;background:radial-gradient(45% 30% at 85% 4%,rgba(30,193,203,.12),rgba(30,193,203,0) 70%),var(--navy)}
/* the introduction above the pile: centred, and pulled close to the first card */
.st-intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:clamp(96px,11vw,160px);margin-bottom:-10vh}
.st-intro .eyebrow::before{display:none}
.st-intro .h-xl{margin-top:20px}
.st-intro .lede{margin-top:clamp(18px,2vw,28px);max-width:52ch}
.st-item{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center}
.st-card{position:relative;top:calc(-3vh + var(--i,0) * 22px);
  width:min(1060px,calc(100% - 2 * clamp(16px,4vw,40px)));min-height:min(470px,62vh);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:clamp(20px,3vw,48px) clamp(28px,5vw,80px);
  padding:clamp(26px,3.6vw,56px);border-radius:clamp(22px,2.4vw,32px);overflow:hidden;color:var(--navy);
  background:linear-gradient(158deg,#FFFFFF 0%,#F4F6F9 38%,#E2E6EC 72%,#D3D9E1 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px rgba(255,255,255,.55),inset 0 -1px 0 rgba(28,28,40,.12),
    0 -14px 34px -22px rgba(0,0,0,.6),0 50px 90px -50px rgba(0,0,0,.7);
  transform:scale(var(--s,1));transform-origin:50% 0;will-change:transform}
/* every other sheet is a step cooler, so the edges of the pile read */
.st-item:nth-child(even) .st-card{background:linear-gradient(158deg,#F8F9FB 0%,#EAEDF2 38%,#D6DBE3 72%,#C6CDD7 100%)}
/* the sheen across the metal: one soft diagonal band of light */
.st-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(112deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.75) 44%,rgba(255,255,255,0) 58%)}
.st-card > *{position:relative}
.st-main{display:flex;flex-direction:column;align-items:flex-start}
/* the icon: a glossy navy tile (lit from above, a soft cyan glow underneath) */
.st-ic{--tile:clamp(60px,6.2vw,88px);position:relative;display:grid;place-items:center;width:var(--tile);height:var(--tile);border-radius:calc(var(--tile) * .29);
  color:var(--aurora);background:linear-gradient(150deg,#3A3A52 0%,var(--navy) 52%,var(--deep) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -8px 14px rgba(0,0,0,.4),0 0 0 1px rgba(16,16,25,.9),
    0 20px 30px -16px rgba(28,28,40,.75),0 10px 26px -10px rgba(30,193,203,.55)}
.st-ic::after{content:"";position:absolute;inset:1px 1px 48% 1px;border-radius:inherit;border-bottom-left-radius:40% 30%;border-bottom-right-radius:40% 30%;
  background:linear-gradient(rgba(255,255,255,.2),rgba(255,255,255,0))}
/* a rendered picture in place of the drawn icon: it fills the tile (its own navy background becomes the tile) */
.st-ic.has-img{--tile:clamp(66px,6.8vw,96px);overflow:hidden}
.st-ic.has-img img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(var(--z,1))}   /* --z (set on the picture) zooms in the ones drawn small, so all six objects look the same size */
.st-ic.has-img::after{z-index:1}
.st-card h3{margin-top:clamp(22px,2.6vw,36px);font:700 clamp(30px,3.6vw,52px)/1.04 var(--font);letter-spacing:-.04em;color:var(--navy)}
.st-sub{margin-top:10px;font:500 clamp(15px,1.3vw,18px)/1.4 var(--font);color:var(--muted)}
.st-why{align-self:center;font:500 clamp(19px,2vw,28px)/1.3 var(--font);letter-spacing:-.02em;max-width:19em;color:var(--navy)}
.st-foot{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;padding-top:clamp(16px,1.8vw,24px);border-top:1px solid rgba(28,28,40,.14);
  font:700 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--navy)}
.st-foot span:first-child{display:flex;align-items:center;gap:10px}
.st-foot span:first-child::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 3px rgba(30,193,203,.2),0 0 10px rgba(30,193,203,.9)}
.st-foot span:last-child{color:var(--muted)}
.st-foot b{color:var(--navy)}
/* the step number, very large and very faint, in the top right corner */
.st-big{position:absolute !important;right:clamp(18px,3vw,44px);top:clamp(4px,1vw,14px);font:800 clamp(90px,13vw,190px)/1 var(--font);letter-spacing:-.06em;color:rgba(28,28,40,.06);pointer-events:none}
@media (max-width:760px){
  .st-card{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;min-height:min(520px,70vh);top:calc(-2vh + var(--i,0) * 14px)}
  .st-why{align-self:start}
}

/* the Brand & design page's logo rolodex (.sp-rolo, [data-rolodex] in service-page.js): text on the left, and on the
   right a large split-flap card that turns to the next logo every few seconds (a plain HTML/CSS/JS port of the
   "animated logo rolodex" pattern). The card stands slightly turned in 3D; each logo is shown as two halves, and on
   every turn the top half of the current logo falls forward while the bottom half of the next one swings up into
   place. The script only swaps which logo each half holds and restarts the two CSS animations.
   .rl-item is one logo tile; add or remove tiles in the HTML and the rolodex follows. */
.sp-rolo{overflow:hidden}
.rl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,110px);align-items:center}
.rl-copy .h-xl{margin-top:20px}
.rl-copy .lede{margin-top:clamp(18px,2vw,28px);max-width:44ch}
.rl-stage{display:grid;place-items:center;perspective:1400px;padding:clamp(10px,2vw,30px) 0}
.rl-box{--w:min(520px,78vw);position:relative;z-index:0;width:var(--w);height:calc(var(--w) * .74);border-radius:calc(var(--w) * .05);
  background:linear-gradient(160deg,#2B2B3C,#20202E 60%,#1A1A26);border:1px solid var(--line-strong);
  box-shadow:0 60px 110px -50px rgba(0,0,0,.9),0 0 0 1px rgba(30,193,203,.06);
  transform:rotateY(-20deg);transform-style:preserve-3d}
.rl-box > .rl-item{display:none}                                    /* the tiles in the HTML are only the source */
.rl-face{position:absolute;left:50%;top:50%;width:87%;height:82%;transform:translate(-50%,-50%);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.rl-face.rl-t{clip-path:polygon(0 0,100% 0,100% 50%,0 50%)}
.rl-face.rl-b{clip-path:polygon(0 50%,100% 50%,100% 100%,0 100%)}
.rl-face.rl-flap{z-index:2}
.rl-face.rl-flap.rl-b{transform:translate(-50%,-50%) rotateX(180deg)}
.rl-box.flip .rl-flap.rl-t{animation:rl-fall 1.5s ease-in-out forwards}
.rl-box.flip .rl-flap.rl-b{animation:rl-rise 1.5s ease-in-out forwards}
@keyframes rl-fall{from{transform:translate(-50%,-50%) rotateX(0deg)}to{transform:translate(-50%,-50%) rotateX(-180deg)}}
@keyframes rl-rise{from{transform:translate(-50%,-50%) rotateX(180deg)}to{transform:translate(-50%,-50%) rotateX(0deg)}}
/* the hinge across the middle */
.rl-box::after{content:"";position:absolute;left:0;right:0;top:50%;z-index:5;height:2px;margin-top:-1px;background:#1A1A26;transform:translateZ(1px)}
/* one logo tile: the stacked WEB / SPACE wordmark on a coloured ground (set per tile) */
.rl-item{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;padding-left:14%;border-radius:calc(var(--w) * .035);
  font:800 calc(var(--w) * .135)/.9 var(--font);letter-spacing:.06em;background:var(--navy);color:var(--white)}
.rl-item i{font-style:normal}
.rl-item i + i{color:var(--cyan)}
.rl-item.on-navy{background:radial-gradient(90% 90% at 30% 20%,#2C2C40,var(--navy) 60%,var(--deep))}
.rl-item.on-white{background:linear-gradient(160deg,#fff,#EEF1F5);color:var(--navy)}
.rl-item.on-cyan{background:linear-gradient(160deg,var(--aurora),var(--cyan));color:var(--navy)}
.rl-item.on-cyan i + i{color:var(--white)}
.rl-item.on-metal{background:linear-gradient(158deg,#fff,#E2E6EC 55%,#C6CDD7);color:var(--navy)}
.rl-item.on-metal i + i{color:var(--navy)}
.rl-item.on-deep{background:var(--deep);color:var(--white)}
.rl-item.on-deep i + i{color:var(--white)}
@media (max-width:900px){
  .rl-grid{grid-template-columns:1fr}
  .rl-box{transform:rotateY(-12deg)}
}
@media (prefers-reduced-motion:reduce){.rl-box.flip .rl-flap{animation:none}}

/* the Brand & design page's portfolio (.sp-work): a list of brand projects as large text rows (a plain HTML/CSS/JS
   port of the "hover image links" pattern). Each row is a link: a big name, one line under it and an arrow. With a
   mouse, a picture of that project appears beside the pointer and follows it along the row, the name slides right
   letter by letter and the rule under the row lights up. On touch screens (no pointer to follow) the picture sits
   small at the end of the row instead. service-page.js only tells each row where the pointer is (--mx, --my, 0 → 1)
   and splits the name into letters.
   To post a project: write its name and line, set the picture in .bl-pic, and point the row's link at its page. */
.section.sp-work{padding-top:clamp(40px,6vw,90px);border-radius:0;margin-top:0;overflow:clip}
.bl-list{margin-top:clamp(28px,3.6vw,56px);border-top:1px solid var(--line-strong)}
.bl{--mx:.5;--my:.5;position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:clamp(18px,2.6vw,38px) 0;border-bottom:1px solid var(--line-strong);transition:border-color .45s var(--ease)}
.bl:hover,.bl:focus-visible{border-bottom-color:var(--white)}
.bl-text{position:relative;z-index:2;min-width:0}
.bl-name{display:block;font:700 clamp(34px,5.6vw,84px)/1 var(--font);letter-spacing:-.045em;color:var(--slate);transition:color .45s var(--ease)}
.bl-name i{display:inline-block;font-style:normal;white-space:pre;transition:transform .5s var(--ease-out);transition-delay:calc(var(--n,0) * 22ms)}
.bl:hover .bl-name,.bl:focus-visible .bl-name{color:var(--white)}
.bl:hover .bl-name i,.bl:focus-visible .bl-name i{transform:translateX(16px)}
.bl-sub{display:block;margin-top:clamp(8px,1vw,14px);font:500 clamp(14px,1.2vw,17px)/1.4 var(--font);color:var(--slate);transition:color .45s var(--ease)}
.bl:hover .bl-sub,.bl:focus-visible .bl-sub{color:var(--cloud)}
/* the picture beside the pointer: it grows from nothing with a small turn, and rides the pointer inside a narrow band */
.bl-pic{position:absolute;z-index:1;left:calc(58% + var(--mx) * 12%);top:calc(38% + var(--my) * 24%);width:clamp(200px,24vw,340px);aspect-ratio:4/3;
  border-radius:var(--r-md);overflow:hidden;pointer-events:none;background:var(--ink);
  box-shadow:0 30px 60px -24px rgba(0,0,0,.85),0 0 0 1px var(--line-strong);
  transform:translate(-50%,-50%) scale(0) rotate(-12.5deg);transition:transform .55s var(--ease-out),left .5s var(--ease-out),top .5s var(--ease-out)}
.bl:hover .bl-pic,.bl:focus-visible .bl-pic{transform:translate(-50%,-50%) scale(1) rotate(8deg)}
.bl-pic img{display:block;width:100%;height:100%;object-fit:cover}
/* a picture that is drawn rather than a photo: the palette and type of a brand (used until real projects are posted) */
.bl-swatch{display:grid;grid-template-columns:1.4fr 1fr;height:100%;font:800 clamp(34px,4vw,56px)/1 var(--font);letter-spacing:-.04em;color:var(--white)}
.bl-swatch b{display:grid;place-items:center;background:var(--navy)}
.bl-swatch span{display:grid;grid-template-rows:repeat(3,1fr)}
.bl-swatch span i:nth-child(1){background:var(--cyan)}
.bl-swatch span i:nth-child(2){background:var(--aurora)}
.bl-swatch span i:nth-child(3){background:var(--white)}
/* the arrow at the end of the row slides in */
.bl-go{position:relative;z-index:2;flex:none;display:grid;place-items:center;width:clamp(44px,4.4vw,64px);height:clamp(44px,4.4vw,64px);border-radius:50%;
  background:var(--cyan);color:var(--navy);opacity:0;transform:translateX(25%);transition:opacity .45s var(--ease),transform .5s var(--ease-out)}
.bl-go svg{width:42%;height:42%}
.bl:hover .bl-go,.bl:focus-visible .bl-go{opacity:1;transform:none}
.bw-foot{display:flex;justify-content:space-between;align-items:center;gap:20px 40px;flex-wrap:wrap;margin-top:clamp(36px,4.4vw,64px)}
.bw-foot p{color:var(--slate)}
/* touch screens (nothing to hover) and narrow windows (no room beside the pointer): the picture is a small still at
   the end of the row */
@media (hover:none),(max-width:700px){
  .bl-pic{position:relative;left:auto;top:auto;flex:none;width:clamp(84px,24vw,150px);transform:none;transition:none;box-shadow:0 0 0 1px var(--line-strong)}
  .bl:hover .bl-pic{transform:none}
  .bl:hover .bl-name i{transform:none}
  .bl-go{display:none}
  .bl-swatch{font-size:22px}
}
@media (prefers-reduced-motion:reduce){.bl-pic,.bl-name i,.bl-go{transition:none}}

/* three sizes (Development): what the work can be, from a page behind a QR code to a full app. Clean cards on navy —
   a letter, a name, one line, pills, and how it is priced along the bottom. */
.sz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:clamp(36px,4.4vw,64px)}
.sz{display:flex;flex-direction:column;min-height:clamp(300px,26vw,380px);padding:clamp(22px,2.2vw,32px);border-radius:var(--r-lg);
  border:1px solid var(--line-strong);background:rgba(255,255,255,.03);transition:border-color .4s var(--ease),background .4s var(--ease),transform .5s var(--ease-out)}
.sz:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);transform:translateY(-4px)}
.sz-top{display:flex;justify-content:space-between;align-items:baseline;font:600 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--slate)}
.sz-top b{font:700 13px/1 var(--font);letter-spacing:.14em;color:var(--cyan)}
.sz h3{margin-top:clamp(28px,3.4vw,52px);font:500 clamp(28px,2.6vw,40px)/1.05 var(--font);letter-spacing:-.04em;color:var(--white)}
.sz > p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--slate);max-width:34ch}
.sz ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin-top:18px}
.sz li{padding:7px 12px;border-radius:999px;border:1px solid var(--line-strong);font:500 12.5px/1 var(--font);color:var(--cloud)}
.sz-price{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font:500 11px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--slate)}
.sz ul + .sz-price{margin-top:auto}
.sz ul{margin-bottom:24px}
.sz-price b{font:600 clamp(17px,1.5vw,21px)/1 var(--font);letter-spacing:-.02em;text-transform:none;color:var(--white)}
.sp-build .section-head + .sz-grid{margin-bottom:clamp(56px,7vw,100px)}
@media (max-width:900px){.sz-grid{grid-template-columns:1fr}.sz{min-height:0}.sz h3{margin-top:28px}}

/* small screens: no pinning — the puzzle assembles by itself once the picture comes into view (service-page.js) */
@media (max-width:760px){
  .section.sp-sketch{height:auto;padding:clamp(80px,12vw,120px) 0}
  .sk-stage{position:relative;height:auto}
  .sk-in{--w:100%;padding-top:0;grid-template-columns:1fr;grid-template-areas:"head" "browser" "caption";row-gap:28px}
}

/* ── 4 · who it's for (white): a navy "yes" card next to a light "no" card ── */
.fit-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:14px;align-items:stretch}
.fit{border-radius:22px;padding:clamp(28px,3.2vw,48px)}
.fit-label{font:600 12px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;margin-bottom:clamp(22px,2.6vw,32px)}
.fit ul{list-style:none;display:grid;gap:16px}
.fit li{position:relative;padding-left:36px;font-size:16px;line-height:1.5}
.fit li::before{content:"";position:absolute;left:0;top:.05em;width:22px;height:22px;border-radius:50%;background-position:center;background-repeat:no-repeat}
.fit-yes{background:var(--navy);color:var(--cloud)}
.fit-yes .fit-label{color:var(--aurora)}
.fit-yes li::before{background-color:var(--cyan);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231C1C28' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");background-size:13px}
.fit-no{background:#F4F6F8;color:#4A4F5E;box-shadow:inset 0 0 0 1px var(--line-dark)}
.fit-no .fit-label{color:var(--muted)}
.fit-no li::before{background-color:#E3E6EB;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8095' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E");background-size:11px}
@media (max-width:860px){.fit-grid{grid-template-columns:1fr}}

/* ── 5 · what you get (navy): numbered rows in two columns, read down (01–05 on the left, 06–10 on the right);
      each row lights up as it reaches the middle of the screen ── */
.get-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;
  column-gap:clamp(32px,5vw,90px);list-style:none;counter-reset:none}
.get-list li{display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,2vw,28px);padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--line);
  opacity:.28;transition:opacity .6s var(--ease)}
.get-list li.lit{opacity:1}
.get-list b{font:700 12px/1.9 var(--font);letter-spacing:.16em;color:var(--cyan)}
.get-list h3{font:600 clamp(20px,1.8vw,26px)/1.2 var(--font);letter-spacing:-.025em;color:var(--white)}
.get-list p{margin-top:8px;font-size:15px;line-height:1.6;color:var(--slate);max-width:44ch}
@media (max-width:760px){.get-list{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}}

/* ── 6 · how it works (white): a vertical timeline that fills in as you scroll ── */
.tl-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,110px);align-items:start}
.tl-side{position:sticky;top:120px}
.tl-side .h-xl{margin:20px 0 22px}
.timeline{--fill:0;position:relative;list-style:none;padding-left:46px}
/* the rail and its cyan fill (service-page.js sets --fill 0 → 1) */
.timeline::before,.timeline::after{content:"";position:absolute;left:11px;top:14px;bottom:14px;width:2px;border-radius:2px}
.timeline::before{background:var(--line-dark-strong)}
.timeline::after{background:linear-gradient(180deg,var(--cyan),#0E8F97);transform-origin:top;transform:scaleY(var(--fill))}
.timeline li{position:relative;padding-bottom:clamp(40px,5vw,64px);opacity:.4;transition:opacity .5s var(--ease)}
.timeline li:last-child{padding-bottom:0}
.timeline li.on{opacity:1}
.tl-dot{position:absolute;left:-46px;top:6px;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--white);
  box-shadow:inset 0 0 0 2px var(--line-dark-strong);transition:box-shadow .4s var(--ease),background .4s var(--ease)}
.timeline li.on .tl-dot{background:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan),0 0 0 6px rgba(30,193,203,.18)}
.tl-when{font:700 11px/1 var(--font);letter-spacing:.2em;text-transform:uppercase;color:#0E8F97}
.timeline h3{margin:12px 0 10px;font:600 clamp(26px,2.6vw,38px)/1.08 var(--font);letter-spacing:-.04em;color:var(--navy)}
.timeline p:not(.tl-when){font-size:16px;line-height:1.6;color:#4A4F5E;max-width:48ch}
@media (max-width:900px){.tl-grid{grid-template-columns:1fr}.tl-side{position:static}}

/* ── 7 · what we build (navy): two endless strips of big outlined words ── */
.section.sp-build{overflow:hidden;padding-bottom:clamp(90px,10vw,140px)}
.bld-strips{display:grid;gap:clamp(8px,1vw,14px);margin-top:clamp(28px,3.4vw,44px)}
.bld-strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.bld-track{display:flex;width:max-content;animation:bld-run 48s linear infinite}
.bld-strip.rev .bld-track{animation-direction:reverse;animation-duration:56s}
.bld-track span{flex:none;padding:0 .55em;font:700 clamp(44px,7vw,108px)/1.12 var(--font);letter-spacing:-.045em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.2px rgba(245,247,249,.28);transition:color .35s var(--ease),-webkit-text-stroke-color .35s}
.bld-track span:nth-child(3n+1){color:var(--cloud);-webkit-text-stroke-color:transparent}
.bld-strips:hover .bld-track{animation-play-state:paused}
.bld-track span:hover{color:var(--aurora);-webkit-text-stroke-color:transparent}
@keyframes bld-run{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.bld-track{animation:none}}