/* Round 5: hero scenes and below-the-fold pieces for the inner pages. Shell is site.css, older scenes are pages.css. */

/* ───────── WORK hero: the four projects as big panels in 3D, moving with time, scroll and drag ───────── */
.panels{perspective:1700px;perspective-origin:50% 42%;touch-action:pan-y;cursor:grab;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.5) 0,#000 21%,#000 79%,rgba(0,0,0,.5) 100%);mask-image:linear-gradient(90deg,rgba(0,0,0,.5) 0,#000 21%,#000 79%,rgba(0,0,0,.5) 100%)}
.panels:active{cursor:grabbing}
.panels .amb{position:absolute;inset:-8%;background-size:cover;background-position:50% 20%;filter:blur(30px) brightness(.95) saturate(1.2);opacity:0;transition:opacity 1.4s ease}
.panels .amb.on{opacity:1}
.panels .amb.fallback{opacity:1;filter:none;background:radial-gradient(90% 70% at 50% 30%,#2a2216 0%,#121014 55%,#0b0a0d 100%)}
.panels .track{position:absolute;left:50%;top:39%;width:var(--pw);height:var(--ph);margin:calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);transform-style:preserve-3d}
.panels{container-type:size;--pw:min(54cqw,86cqh);--ph:calc(var(--pw) / 1.6)}
.pn{position:absolute;inset:0;will-change:transform,opacity;transform-origin:50% 50%}
.pn .pf{position:absolute;inset:0;border-radius:14px;overflow:hidden;background:#111;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(242,237,227,.14)}
.pn .pf picture,.pn .pf img{display:block;width:100%;height:100%}
.pn img{width:100%;height:100%;object-fit:cover;object-position:50% 0;pointer-events:none;user-select:none;-webkit-user-drag:none}
.pn img.m{display:none}
.pn .pf::after{content:"";position:absolute;inset:0;background:rgba(8,7,10,.86);opacity:min(1,calc(var(--dim,0) * 2.6));pointer-events:none}   /* side panels go dark: no half-read text next to the headline */
.pn .pt{position:absolute;left:0;bottom:calc(100% + 12px);color:#f4f3ef;white-space:nowrap;opacity:calc(1 - var(--dim,0) * 2.2)}      /* above the panel, never on the site's own screenshot */
.pn .pt::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.js .panels .pn{opacity:0}
.panels.ready .pn{opacity:1}
.now{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;padding-bottom:6px}
.now .mono{color:rgba(242,237,227,.7)}
.now a{font-weight:500;font-size:clamp(20px,1.7vw,28px);letter-spacing:-.02em;color:#f4f3ef;display:inline-flex;gap:10px;align-items:baseline}
.now a::after{content:"→";color:var(--gold)}
.now .dots{display:flex;gap:8px}
.now .dots button{width:30px;height:30px;display:grid;place-items:center}
.now .dots button i{width:7px;height:7px;border-radius:50%;background:rgba(242,237,227,.35);transition:background .3s,transform .3s}
.now .dots button[aria-current="true"] i{background:var(--gold);transform:scale(1.4)}

/* WORK list: big pictures, titles on the picture, a two-up row in the middle */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:56px 12px;padding-top:110px;padding-bottom:140px}
.gal-item{grid-column:1 / -1;position:relative}
.gal-item.half{grid-column:auto}
.gal-item .media{position:relative;display:block;aspect-ratio:16/8;border-radius:var(--r);overflow:hidden;background:var(--page-2);box-shadow:0 0 0 1px var(--line)}
.gal-item.half .media{aspect-ratio:4/4.2}
.gal-item .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--ox,50%) 0}
.gal-item.gl .media img{visibility:hidden}
.gal-item .meta{display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;margin-top:18px}
.gal-item h2{font-weight:500;font-size:clamp(40px,5vw,84px);line-height:.95;letter-spacing:-.045em}
.gal-item.half h2{font-size:clamp(34px,3.4vw,56px)}
.gal-item a.title:hover h2{color:var(--gold-hi)}
.gal-item .meta p{color:var(--ink-2);max-width:26em}
.gal-item .meta .mono{color:var(--gold-ink)}
.gal-canvas{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:15}

/* ───────── facts as one line of four (no label column) ───────── */
.facts-line{padding-top:90px;padding-bottom:20px}
.fl{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border-top:1px solid rgba(201,163,94,.4);padding-top:24px}
.fl dt{color:var(--gold-ink);margin-bottom:8px}
.fl dd{color:var(--ink);font-size:17px;line-height:1.45;text-wrap:pretty}
.fl dd a{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% 1px no-repeat;padding-bottom:2px}

/* ───────── big statement ───────── */
.stmt{padding-top:130px;padding-bottom:40px}
.stmt p{font-weight:500;font-size:clamp(34px,3.9vw,56px);line-height:1;letter-spacing:-.04em;max-width:18em;text-wrap:balance}   /* round 7: Isaac, no big type near the end (56 / 36) */
.stmt p .g{color:var(--gold)}
.stmt .sub{margin-top:28px;color:var(--ink-2);font-size:19px;font-weight:400;letter-spacing:0;line-height:1.45;max-width:34em}

/* ───────── RABANIPOUR: decisions pinned to the real screenshot ───────── */
.hot{padding-top:120px;padding-bottom:110px}
.hot h2{margin-bottom:40px}
.hot-view{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.5)}
.hot-view img{width:100%;height:auto}
.hot-view::after{content:"";position:absolute;inset:0;background:rgba(8,7,10,.18);pointer-events:none;transition:background .4s}
.hot-view:has(.spot.on)::after{background:rgba(8,7,10,.42)}
.spot{position:absolute;left:var(--x);top:var(--y);z-index:2;width:48px;height:48px;margin:-24px 0 0 -24px;display:grid;place-items:center}
.spot svg{width:34px;height:34px;color:var(--gold);filter:drop-shadow(0 0 10px rgba(201,163,94,.8));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.spot b{position:absolute;font-family:var(--mono);font-size:13px;font-weight:500;color:#0b0a0c}
.spot::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(201,163,94,.7);animation:ping 2.4s ease-out infinite}
.spot.on svg,.spot:hover svg{transform:rotate(45deg) scale(1.25)}
@keyframes ping{from{transform:scale(.6);opacity:1}to{transform:scale(1.6);opacity:0}}
.hot-list{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:34px}
.hot-list li{transition:opacity .4s}
.hot-list:has(.on) li:not(.on){opacity:.4}
.hot-list .n{display:inline-grid;place-items:center;width:26px;height:26px;margin-bottom:12px;background:var(--gold);color:#0b0a0c;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);font-family:var(--mono);font-size:13px;font-weight:500}
.hot-list h3{font-weight:500;font-size:clamp(22px,1.9vw,28px);line-height:1.08;letter-spacing:-.025em;margin-bottom:8px}
.hot-list p{color:var(--ink-2);font-size:16px}

/* ───────── SKYSSOFT: decisions as panels that open on hover or tap ───────── */
.xp{padding-top:120px;padding-bottom:40px}
.xp h2{margin-bottom:40px}
/* round 7 (B3): the caption sits under the crop, never over the site's own words */
.xp-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 14px}
.xp-i{margin:0;min-width:0;display:flex;flex-direction:column;gap:16px;text-align:left}
.xp-i .bg{aspect-ratio:4/4.6;border-radius:var(--r);background:var(--img) var(--pos,50% 0)/var(--sz,cover) no-repeat,#0d1b2e;box-shadow:0 0 0 1px var(--line);transition:transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.xp-i:hover .bg{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(201,163,94,.5),0 30px 60px rgba(0,0,0,.4)}
.xp-i h3{font-weight:500;font-size:clamp(20px,1.5vw,25px);line-height:1.08;letter-spacing:-.025em;text-wrap:pretty}
.xp-i p{color:var(--ink-2);font-size:15.5px;margin-top:8px}

/* ───────── LEFFERTS: a reel of phone-sized screens that slides as you scroll ───────── */
.reel{padding-top:60px;padding-bottom:60px;overflow:hidden}
.reel-track{display:flex;gap:22px;width:max-content;will-change:transform}
.reel figure{width:clamp(250px,22vw,340px);margin:0;flex:none}
.reel .shot{aspect-ratio:9/17;border-radius:28px;overflow:hidden;background:var(--img) var(--pos,50% 0)/var(--sz,cover) no-repeat,#151217;box-shadow:0 0 0 6px #1a171c,0 0 0 7px rgba(201,163,94,.35),0 40px 80px rgba(0,0,0,.5)}
.reel figcaption{margin-top:22px}
.reel figcaption h3{font-weight:500;font-size:clamp(22px,1.8vw,28px);line-height:1.08;letter-spacing:-.025em}
.reel figcaption p{color:var(--ink-2);font-size:15.5px;margin-top:8px}

/* ───────── SARAH case: the test call as a conversation that appears as you scroll ───────── */
.chat{padding-top:120px;padding-bottom:60px;display:grid;grid-template-columns:1fr 1.3fr;gap:6vw;align-items:start}
.chat .intro-t{position:sticky;top:110px}
.chat .intro-t p{color:var(--ink-2);margin-top:18px;max-width:26em}
.bubbles{list-style:none;display:flex;flex-direction:column;gap:14px}
.bubbles li{max-width:82%;padding:16px 20px;border-radius:22px;font-size:18px;line-height:1.4}
.bubbles li .who{display:block;margin-bottom:6px;color:var(--mute)}
.bubbles li.her{background:rgba(201,163,94,.12);box-shadow:inset 0 0 0 1px rgba(201,163,94,.35);border-bottom-left-radius:6px}
.bubbles li.her .who{color:var(--gold-ink)}
.bubbles li.me{align-self:flex-end;background:var(--page-3);border-bottom-right-radius:6px}
.tests{padding-top:100px;padding-bottom:40px}
.tests .big3{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:40px}
.tests .big3 b{display:block;font-weight:500;font-size:clamp(28px,2.8vw,44px);line-height:1.02;letter-spacing:-.035em;margin-bottom:12px}
.tests .big3 b::before{content:"";display:block;width:22px;height:22px;margin-bottom:18px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.tests .big3 p{color:var(--ink-2);font-size:16.5px}

.more{padding-top:110px;padding-bottom:120px}

@media (max-width:1100px){
  .fl{grid-template-columns:1fr 1fr}
  .hot-list{grid-template-columns:1fr 1fr}
  .xp-row{grid-template-columns:1fr 1fr}
  .chat{grid-template-columns:1fr}
  .chat .intro-t{position:static}
  .tests .big3{grid-template-columns:1fr;gap:34px}
}
@media (max-width:640px){
  .panels{--pw:min(52cqw,27cqh);--ph:calc(var(--pw) * 2.164)}
  /* phones: 360px copies of the four backdrops (beat the inline desktop files); under the 30px blur they look the same, at a twentieth of the bytes */
  .panels .amb:nth-child(1){background-image:url(/media/perf/rab-amb.webp)!important}
  .panels .amb:nth-child(2){background-image:url(/media/perf/sky-amb.webp)!important}
  .panels .amb:nth-child(3){background-image:url(/media/perf/lef26-amb.webp)!important}
  .panels .amb:nth-child(4){background-image:url(/media/perf/sarah-amb.webp)!important}
  .panels{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent)}
  .panels .track{top:40%}
  .pn img.d{display:none}.pn img.m{display:block}
  .pn .pt{font-size:13px;bottom:calc(100% + 8px)}
  .now{align-items:flex-start;text-align:left}
  .gal{grid-template-columns:1fr;gap:56px;padding-top:70px;padding-bottom:80px}
  .gal-item .media,.gal-item.half .media{aspect-ratio:4/5}
  .gal-item h2,.gal-item.half h2{font-size:40px}
  .facts-line{padding-top:60px}
  .fl{grid-template-columns:1fr;gap:20px}
  .stmt{padding-top:80px}
  .stmt p{font-size:clamp(30px,9vw,36px)}
  .stmt .sub{font-size:17px}
  .hot{padding-top:80px;padding-bottom:70px}
  .hot-view{margin:0 calc(var(--gut) * -1 + 8px)}
  .hot-list{grid-template-columns:1fr;gap:22px}
  .spot{width:46px;height:46px;margin:-23px 0 0 -23px}
  .spot svg{width:28px;height:28px}
  .xp{padding-top:80px}
  .xp-row{grid-template-columns:1fr;gap:34px}
  .xp-i .bg{aspect-ratio:4/3}
  .reel{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-left:var(--gut);scrollbar-width:none}
  .reel::-webkit-scrollbar{display:none}
  .reel-track{transform:none!important;padding-right:var(--gut)}
  .reel figure{width:72vw;scroll-snap-align:center}
  .chat{padding-top:80px}
  .bubbles li{max-width:92%;font-size:16px}
  .more{padding-top:70px;padding-bottom:80px}
}
@media (prefers-reduced-motion:reduce){
  .spot::before{animation:none}
  .reel-track{transform:none!important}
  .reel{overflow-x:auto}
}

/* ═════════ SERVICES group ═════════ */
/* SERVICES hero: four live scenes side by side; the one under the pointer opens */
.quad{display:flex;gap:8px;padding:8px}
.quad::before{content:"";position:absolute;left:0;right:0;top:0;height:42%;z-index:1;background:linear-gradient(rgba(8,7,10,.78),transparent);pointer-events:none}
.q{flex:1 1 0;min-width:0;position:relative;border-radius:calc(var(--r) - 6px);overflow:hidden;isolation:isolate;background:#121014;box-shadow:inset 0 0 0 1px rgba(242,237,227,.08);transition:flex-grow .8s cubic-bezier(.2,.8,.2,1);color:#f4f3ef}
.quad:hover .q{flex-grow:.8}
.quad .q:hover,.quad .q:focus-visible{flex-grow:1.9}
.qs{position:absolute;inset:0;z-index:-1;overflow:hidden}
.q::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(transparent 50%,rgba(8,7,10,.86))}
.qs::before{content:"";position:absolute;inset:-10%;background:var(--bg) var(--bp,50% 50%)/cover no-repeat;opacity:var(--br,.7);transition:opacity .8s,transform 1.2s cubic-bezier(.2,.8,.2,1);will-change:transform}   /* no live blur: the columns resize on hover and a blur would be redrawn every frame */
.qs{background:radial-gradient(80% 55% at 60% 30%,rgba(201,163,94,.15),transparent 70%),linear-gradient(165deg,#1a1611,#0d0b0e 60%)}
.qs::before{display:none}
.q:hover .qs::before{opacity:.95;transform:scale(1.04)}
.qt{position:absolute;left:22px;right:22px;bottom:22px;display:flex;flex-direction:column;gap:8px}
.qt .mono{color:var(--gold-ink)}
.qt b{font-weight:500;font-size:clamp(26px,2.4vw,42px);line-height:1;letter-spacing:-.035em;min-height:2em;display:flex;align-items:flex-end}
.qt .d{color:rgba(242,237,227,.75);font-size:15.5px;max-width:20em;min-height:2.9em;opacity:.0;transform:translateY(8px);transition:opacity .5s,transform .6s}
.q:hover .qt .d,.q:focus-visible .qt .d{opacity:1;transform:none}
@media (hover:none){.qt .d{opacity:1;transform:none}}
/* websites: three sheets of a page, floating apart */
.qs-web{perspective:900px}
.qs-web .sh{position:absolute;left:8%;right:8%;top:30%;height:40%;border-radius:8px;transform-style:preserve-3d;animation:sheet 7s ease-in-out infinite alternate}
.qs-web .s1{display:none;transform:rotateX(52deg) rotateZ(-28deg) translateZ(-40px);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.qs-web .s2{display:none;opacity:.85;transform:rotateX(52deg) rotateZ(-28deg) translateZ(20px);animation-delay:-2s}
.qs-web .s3{border:1px solid rgba(201,163,94,.8);transform:rotateX(52deg) rotateZ(-28deg) translateZ(80px);animation-delay:-4s}
.qs-web .s3 i{position:absolute;border:1px solid rgba(201,163,94,.7);border-radius:2px}
.qs-web .s3 i:nth-child(1){left:6%;top:6%;width:22%;height:10%}.qs-web .s3 i:nth-child(2){left:24%;top:30%;width:52%;height:18%}.qs-web .s3 i:nth-child(3){left:20%;top:54%;width:60%;height:10%}.qs-web .s3 i:nth-child(4){left:38%;top:72%;width:24%;height:8%;background:rgba(201,163,94,.25)}
@keyframes sheet{to{translate:0 -10px}}
/* AI: the ring of stars, breathing */
.qs-ai::after{content:"";position:absolute;left:50%;top:42%;width:min(64%,260px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid rgba(201,163,94,.55);box-shadow:0 0 0 22px rgba(201,163,94,.05),0 0 0 23px rgba(201,163,94,.22)}
.qs-ai .glow{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(rgba(227,198,142,.5),transparent 65%);animation:glow 3.2s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.35);opacity:.5}}
/* automation: gold line with a spark */
.qs-auto{container-type:size}
/* automation: a small workflow that plays on a 7 s loop: the form fills, a text goes out, a calendar slot turns gold */
.wf{position:absolute;left:9cqw;right:9cqw;top:24cqh;display:flex;flex-direction:column;align-items:stretch;gap:0}
.wf .c{display:block;border-radius:12px;background:rgba(246,243,236,.94);color:#16131a;padding:3.4cqw 4cqw;box-shadow:0 18px 40px rgba(0,0,0,.45)}
.wf .hd{display:block;font-size:max(8px,3.1cqw);color:#7a6a4c;margin-bottom:2.4cqw}
.wf .ln{display:block;height:max(6px,3.4cqw);border-radius:4px;background:#e4ded2;margin-bottom:1.8cqw;overflow:hidden}
.wf .ln b{display:block;height:100%;width:100%;background:#2a2620;transform-origin:0 50%;transform:scaleX(0);animation:wfFill 7s infinite}
.wf .l1 b{width:78%}.wf .l2 b{width:56%;animation-delay:.25s}.wf .l3 b{width:68%;animation-delay:.5s}
.wf .send{display:inline-block;margin-top:1cqw;padding:1.4cqw 3.4cqw;border-radius:99px;background:#c9a35e;color:#0b0a0c;font-size:max(8px,3cqw);animation:wfSend 7s infinite}
.wf .wire{display:block;width:2px;height:5cqh;margin:0 auto;background:linear-gradient(var(--gold),rgba(201,163,94,.2));transform-origin:50% 0;animation:wfWire 7s infinite}
.wf .w2{animation-delay:1.4s}
.wf .sms{background:#1d1a20;color:#f2ede3;box-shadow:inset 0 0 0 1px rgba(201,163,94,.35),0 18px 40px rgba(0,0,0,.45);animation:wfIn 7s infinite;transform-origin:50% 0}
.wf .sms .hd{color:var(--gold-ink)}
.wf .bub{display:block;background:#c9a35e;color:#0b0a0c;border-radius:14px 14px 4px 14px;padding:2.4cqw 3cqw;font-size:max(9px,3.5cqw);line-height:1.3}
.wf .cal{animation:wfIn 7s infinite;animation-delay:1.4s}
.wf .grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6cqw}
.wf .grid i{display:block;height:max(7px,4.6cqw);border-radius:3px;background:#e4ded2;position:relative;overflow:hidden}
.wf .grid i.on::after{content:"";position:absolute;inset:0;background:#c9a35e;box-shadow:0 0 18px #c9a35e;transform:scale(0);animation:wfSlot 7s infinite}
@keyframes wfFill{0%,4%{transform:scaleX(0)}22%,90%{transform:scaleX(1)}100%{transform:scaleX(0)}}
@keyframes wfSend{0%,26%{transform:none}30%{transform:scale(1.18)}34%,100%{transform:none}}
@keyframes wfWire{0%,30%{transform:scaleY(0)}38%,90%{transform:scaleY(1)}100%{transform:scaleY(0)}}
@keyframes wfIn{0%,34%{opacity:.38;transform:translateY(6px) scale(.97)}44%,90%{opacity:1;transform:none}100%{opacity:.38;transform:none}}
@keyframes wfSlot{0%,58%{transform:scale(0)}66%,90%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes spark{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* seo: a page with a beam */

.qs-seo .pg{position:absolute;left:12%;right:12%;top:26%;height:42%;border:1px solid rgba(201,163,94,.6);border-radius:8px;transform:perspective(800px) rotateX(14deg) rotateY(-10deg);background:linear-gradient(rgba(201,163,94,.55),rgba(201,163,94,.55)) 8% 14%/60% 9% no-repeat,repeating-linear-gradient(transparent 0 22px,rgba(201,163,94,.4) 22px 23px) 8% 40%/84% 56% no-repeat}
.qs-seo .bm{position:absolute;left:0;right:0;height:14%;top:0;background:linear-gradient(transparent,rgba(255,236,190,.55) 50%,transparent);mix-blend-mode:screen;animation:beam 5s cubic-bezier(.5,0,.5,1) infinite}
@keyframes beam{from{top:-14%}to{top:80%}}

/* SERVICES: how they fit */
.orbit{padding-top:130px;padding-bottom:30px}
.orb{position:relative;height:clamp(520px,70vh,760px);margin-top:30px}
.orb .lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.orb .lines path{fill:none;stroke:var(--gold);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-dashoffset:1;opacity:.75;transition:opacity .4s}
.orb[data-on] .lines path{opacity:.25}
.orb[data-on="on1"] .lines path:nth-child(1),.orb[data-on="on2"] .lines path:nth-child(2),.orb[data-on="on3"] .lines path:nth-child(3),.orb[data-on="on4"] .lines path:nth-child(4){opacity:1;stroke-width:3}
.orb .core{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(420px,40%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px}
.orb .core svg{width:clamp(70px,8vw,120px);color:var(--gold);filter:drop-shadow(0 0 30px rgba(201,163,94,.5));transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.orb.lit .core svg{transform:rotate(45deg)}
.orb .say{font-size:clamp(18px,1.5vw,22px);color:var(--ink-2);min-height:4.4em;text-wrap:balance}
.orb a{position:absolute;display:flex;flex-direction:column;gap:6px;padding:12px 0;max-width:30%}
.orb a b{font-weight:500;font-size:clamp(34px,4.2vw,72px);line-height:.95;letter-spacing:-.045em;transition:color .3s}
.orb a .mono{color:var(--gold-ink)}
.orb a:hover b,.orb a:focus-visible b{color:var(--gold-hi)}
.orb .on1{left:0;top:0}.orb .on2{right:0;top:0;text-align:right;align-items:flex-end}.orb .on3{right:0;bottom:0;text-align:right;align-items:flex-end}.orb .on4{left:0;bottom:0}

/* WEBSITES hero: the exploded page sits right of the headline */
.layers-f{background:#141217}
.layers-f .scene{display:flex;align-items:center;justify-content:flex-end;padding:6% 4% 4% 36%}
.layers-f .stack{width:100%;max-height:100%}
.stack.live .rig{transform:rotateY(var(--tx,0deg)) rotateX(var(--ty,0deg)) translateY(calc(var(--e) * 4%)) rotateX(calc(var(--e) * 50deg)) rotateZ(calc(var(--e) * -30deg)) scale(calc(1 - var(--e) * .14))}
/* WEBSITES: plan / page slider */
.cmp{padding-top:130px;padding-bottom:20px}
.cmp h2{margin-bottom:40px}
.cmp-view{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.5);--c:50%}
.cmp-view .after{width:100%;height:auto}
.cmp-view .before{position:absolute;inset:0;background:#0d1320;clip-path:inset(0 calc(100% - var(--c)) 0 0)}
.cmp-view .before .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(201,163,94,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(201,163,94,.12) 1px,transparent 1px);background-size:40px 40px}
.cmp-view .bx{position:absolute;border:1.5px solid rgba(201,163,94,.85);border-radius:3px}
.cmp-view .bx.fill{background:rgba(201,163,94,.2)}
.cmp-view .tg{position:absolute;color:var(--gold-ink);font-size:13px;translate:6px 6px}
.cmp-view .drag{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.cmp-view .handle{position:absolute;top:0;bottom:0;left:var(--c);width:2px;margin-left:-1px;background:var(--gold);pointer-events:none;box-shadow:0 0 20px rgba(201,163,94,.8)}
.cmp-view .handle svg{position:absolute;top:50%;left:50%;width:44px;height:44px;translate:-50% -50%;color:var(--gold);filter:drop-shadow(0 0 12px rgba(0,0,0,.6))}
.cmp-cap{display:flex;justify-content:space-between;color:var(--mute);margin-top:14px}

/* AI FRONT DESK service hero: ring on the right, play controls under the headline */
.ringf .ring-gl{position:absolute;top:0;bottom:0;right:0;left:34%}
.ringf .fx-still{position:absolute;top:0;bottom:0;right:0;left:34%;background:url(/media/ring-still.webp) 50% 45%/contain no-repeat}
.ringf.fx-on .fx-still{display:none}
.ringf .amb{filter:blur(26px) brightness(.62) saturate(1.1)}
.ringf .hx{align-items:end}
.ringf .ui{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right;max-width:24em}
.ringf .ui .pl{display:flex;align-items:center;gap:12px}
.ringf .ui .hint{color:rgba(242,237,227,.7);font-size:14.5px}
.ringf .ui audio{max-width:260px}
.ringf .time{color:rgba(242,237,227,.7)}
/* AI: three things she does */
.caps{padding-top:90px;padding-bottom:30px}
.cap3{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}
.cap3 b{display:block;font-weight:500;font-size:clamp(48px,6vw,104px);line-height:.9;letter-spacing:-.05em;color:var(--gold-hi);margin-bottom:22px}
.cap3 p{color:var(--ink-2);font-size:17.5px;max-width:22em}

/* AUTOMATION hero: the board fills the frame, the step card floats on glass */
.flowf{background:#141217}
.flowf .flow{display:block}
.flowf .board{position:absolute;left:2%;top:33%;width:62%;height:70%;aspect-ratio:auto;max-height:none}   /* round 6: the board starts under the headline block, so no node sits under the words */
.flowf .node button{width:72px;height:72px}
.flowf .node button svg{width:30px;height:30px}
.flowf .node span{font-size:13px;color:rgba(242,237,227,.75)}
.flowf .glass{position:absolute;right:28px;top:50%;translate:0 -46%;width:min(440px,36%);padding:26px 28px;border-radius:calc(var(--r) - 4px);background:rgba(20,18,22,.62);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(242,237,227,.1),0 30px 80px rgba(0,0,0,.4);z-index:3}
.flowf .glass .ex{color:rgba(242,237,227,.7);margin-bottom:12px}
.flowf .card-stage{border-top:0;padding-top:0;min-height:0}
.flowf .card-stage h3,.flowf .card-stage h2{font-size:clamp(26px,2.2vw,36px)}
.flowf .sample{background:rgba(242,237,227,.05)}
.js .flow:not(.ready) .card-stage article:not(:first-child){display:none}   /* round 6: no jump while the script picks the first step (CLS) */
/* AUTOMATION: three words that light in turn */
.words{padding-top:140px;padding-bottom:40px}
.w3{font-weight:500;font-size:clamp(56px,8.4vw,124px);line-height:.9;letter-spacing:-.055em}
.w3 span{transition:color .7s}
.js .w3 span{color:rgba(242,237,227,.14)}
.w3 span.on{color:var(--ink)}
.w3 span.on:last-child{color:var(--gold)}
.w3d{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;margin-top:40px}
.w3d p{color:var(--ink-2);font-size:17.5px;transition:opacity .7s}
.js .w3d p{opacity:.3}
.w3d p.on{opacity:1}
.words .sub{margin-top:56px;font-size:clamp(22px,2vw,30px);letter-spacing:-.02em;max-width:30em;color:var(--ink)}

/* SEO hero: the page tilts in from the right and the beam runs on its own */
.scanf{background:radial-gradient(80% 80% at 70% 40%,#1c2433 0%,#121217 60%,#0b0a0d 100%)}
.scanf .amb{filter:blur(40px) brightness(.72) saturate(1.2)}
.scanf .scan{display:block}
.scanf .scan-view{position:absolute;right:6%;top:-6%;bottom:-30%;width:min(46%,760px)}
.scanf .scan-page{max-height:none;width:100%;transform:rotateX(26deg) rotateY(-18deg) rotateZ(5deg)}
.scanf .scan-page::after{background:rgba(8,7,10,.2)}
/* SEO: what we do, as open-able lines */
.acc{padding-top:130px;padding-bottom:30px}
.acc h2{margin-bottom:30px}
.acc details{border-top:1px solid var(--line)}
.acc details:last-child{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:26px 0;font-weight:500;font-size:clamp(34px,4.6vw,80px);line-height:1;letter-spacing:-.045em;display:flex;justify-content:space-between;align-items:center;gap:20px;transition:color .3s}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"";flex:none;width:.42em;height:.42em;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc summary:hover{color:var(--gold-hi)}
.acc details p{color:var(--ink-2);font-size:19px;max-width:34em;padding-bottom:30px}

@media (max-width:1100px){
  .orb{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px 20px}
  .orb .lines{display:none}
  .orb .core{position:static;translate:none;width:auto;grid-column:1 / -1;order:-1}
  .orb a{position:static;max-width:none;text-align:left!important;align-items:flex-start!important}
  .cap3,.w3d{grid-template-columns:1fr;gap:30px}
  .layers-f .scene{padding:44% 2% 2% 2%;align-items:flex-end}
  .ringf .ring-gl,.ringf .fx-still{left:0;bottom:30%}
  .ringf .ui{align-items:flex-start;text-align:left}
  .flowf{height:auto;min-height:calc(100svh - var(--hdr) - 12px)}   /* round 7 (B4): the card never covers the ring */
  .flowf .flow{position:relative;inset:auto;padding:250px 24px 24px}
  .flowf .board{position:relative;left:auto;top:auto;width:min(100%,560px);height:auto;aspect-ratio:1/.9;margin:0 auto}
  .flowf .glass{position:relative;left:auto;right:auto;top:auto;bottom:auto;translate:none;width:auto;margin-top:18px}
  .scanf .scan-view{right:-10%;width:70%;top:20%}
}
@media (max-width:640px){
  .quad{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:6px;padding-top:min(220px,34%);gap:6px}
  .qt{left:12px;right:12px;bottom:12px;gap:4px}
  .qt b{font-size:22px}
  .qt .d{display:none}
  .orbit{padding-top:80px}
  .orb{grid-template-columns:1fr;gap:26px}
  .orb a b{font-size:40px}
  .cmp{padding-top:80px}
  .cmp-view .tg{display:none}
  .cmp-view .handle svg{width:34px;height:34px}
  .caps{padding-top:60px}
  .cap3 b{font-size:56px;margin-bottom:12px}
  .flowf{height:auto;min-height:calc(100svh - var(--hdr) - 12px)}
  .flowf .flow{position:relative;inset:auto;padding:270px 10px 12px}   /* round 7: the board starts under the whole headline block */
  .flowf .board{position:relative;left:auto;top:auto;width:100%;height:auto;aspect-ratio:1/.9}
  .flowf .glass{position:relative;left:auto;right:auto;bottom:auto;padding:20px}
  .flowf .step-ctl .pill{flex:1;justify-content:space-between}
  .words{padding-top:80px}
  .w3{font-size:clamp(56px,17vw,72px)}
  .words .sub{font-size:20px;margin-top:36px}
  .acc{padding-top:80px}
  .acc summary{font-size:30px;padding:20px 0}
  .acc details p{font-size:16.5px}
  .scanf .scan-view{right:5%;width:90%;top:60%}   /* round 7: the scanned page fits the phone screen, under the words */
  .scan-page{width:100%;background-image:url(/media/perf/lef26-long-720.webp)}
  .ringf .ring-gl,.ringf .fx-still{left:0;right:0;top:0;bottom:44%}   /* round 7: the ring fills the top half edge to edge and fades out above the words */
  .ringf .fx-still{background-size:cover;background-position:50% 50%;-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
  .ringf .wave{top:50%}
}
@media (prefers-reduced-motion:reduce){
  .qs-web .sh,.qs-ai .glow,.qs-seo .bm{animation:none}
  .wf .ln b,.wf .wire,.wf .grid i.on::after{animation:none;transform:none}.wf .sms,.wf .cal,.wf .send{animation:none;opacity:1;transform:none}
}
.flowf .amb{filter:blur(20px) brightness(.85) saturate(1.1)}
.layers-f .amb{filter:blur(30px) brightness(.66) saturate(1.1)}
.hx h1+.cap{margin-top:16px}
.layers-f .stack .sheet.code{background:rgba(24,21,28,.92)}
.layers-f .stack pre{font-size:clamp(11px,1vw,17px);color:rgba(242,237,227,.72)}

/* ═════════ LAB, ABOUT, PRICING, CONTACT, THANK-YOU ═════════ */
/* LAB hero: the star pile fills the frame, three sliders sit in it */
.labf .lab-view{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;box-shadow:none;background:url(/img/hero-poster-v2.webp) 50% 50%/cover #121212}
.labf .lab-view .fx-still{object-fit:cover}
.labf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:linear-gradient(transparent,rgba(8,8,8,.7));pointer-events:none;z-index:1}
.gk{display:grid;grid-template-columns:repeat(3,minmax(150px,200px));gap:12px 22px;margin:0;padding:18px 22px 14px;border-radius:18px;background:rgba(14,12,16,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(242,237,227,.1)}
.gk label{color:rgba(242,237,227,.75)}
/* LAB list: each effect gets the full width; its name and note sit above it */
.labs{padding-top:60px;padding-bottom:130px}
.lab-item{display:block;padding:70px 0 0;border-top:0}
.lab-item .about{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:end;margin-bottom:26px}
.lab-item .about h2{font-size:clamp(40px,5vw,84px)}
.lab-item .about p:last-child{margin-top:0;max-width:30em;font-size:17px}
.lab-item .about .mono{grid-column:1 / -1;margin-bottom:-10px}
.lab-item .lab-view{aspect-ratio:21/9}
.lab-item:nth-child(even) .lab-view{aspect-ratio:16/8;width:86%;margin-left:auto}

/* ABOUT hero: the photo with depth fills the frame */
.aboutf.depth{aspect-ratio:auto;max-width:none;width:auto;perspective:1200px}
.aboutf::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,8,8,.3),transparent 46%),linear-gradient(transparent 55%,rgba(8,8,8,.5));pointer-events:none}
/* About, design-fix 10-20 (Isaac: no photo of him anywhere): the star mark, large, on the calm black/gold background */
.aboutf .bigstar{position:absolute;inset:auto;right:5%;top:50%;translate:0 -50%;width:min(54%,96vh);aspect-ratio:1;height:auto;color:var(--gold);opacity:.8}
.aboutf .markstar{position:absolute;inset:auto;right:calc(5% + min(54%,96vh) * .5);top:50%;translate:50% -50%;width:min(11%,19vh);height:auto;color:var(--gold);filter:drop-shadow(0 0 46px rgba(227,198,142,.45));z-index:2}
.aboutf .hx h1{font-size:clamp(52px,6.4vw,120px)}
.aboutf .photo{position:absolute;inset:auto;right:9%;top:9%;bottom:9%;aspect-ratio:4/5;border-radius:calc(var(--r) - 4px);overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.6),0 0 0 1px rgba(201,163,94,.35)}
.aboutf .photo img{width:100%;height:100%;object-fit:cover}
.aboutf .tagline{position:absolute;inset:auto;right:calc(9% + 30px);bottom:calc(9% - 16px);background:var(--gold);color:#0b0a0c;padding:9px 14px;border-radius:99px;z-index:3}
.aboutf .hx{right:50%}
.story{padding-top:130px;padding-bottom:30px}
.story .lede{font-weight:500;font-size:clamp(34px,3.9vw,56px);line-height:1.02;letter-spacing:-.04em;max-width:18em;text-wrap:balance}
.story .cols{display:grid;grid-template-columns:1fr 1fr;gap:4vw;margin-top:56px;max-width:1200px}   /* starts at the headline edge (design-fix 10-20) */
.story .cols p{color:var(--ink-2);font-size:19px}

/* PRICING hero: the real prices, big and gold, at different depths */
.numf{background:#120f0c}
.numf .amb{inset:-4%;background-position:12% 50%;filter:blur(3px) brightness(.62) saturate(1.1)}
.nums{overflow:hidden;display:flex;align-items:center;justify-content:flex-end;padding:3% 5% 3% 46%}
/* one column on the right, each label sitting on its own number: nothing can cross the headline or another price */
.nums .col{display:flex;flex-direction:column;align-items:flex-end;gap:clamp(10px,2.2vh,26px);transform:none;padding:clamp(18px,3vh,34px) clamp(22px,2.4vw,38px);border-radius:22px;background:rgba(8,7,10,.55);box-shadow:inset 0 0 0 1px rgba(201,163,94,.18)}
.nm{position:relative;align-items:flex-end;text-align:right;font-size:min(9.6vw,15.5vh)}
.nm.n3{font-size:min(12vw,19vh)}
.nm{display:flex;flex-direction:column;font-weight:500;letter-spacing:-.06em;line-height:.82;white-space:nowrap;
  background:linear-gradient(180deg,#f6e2b0 0%,#d9b26a 38%,#8a6630 72%,#e9cf93 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));will-change:transform}
.nm small{align-self:flex-end;font-size:13px;letter-spacing:.04em;line-height:1.4;color:#c4bcb0;-webkit-text-fill-color:#c4bcb0;margin-bottom:.7vw}
.numf .hx{z-index:3}
.numf .hx h1{max-width:7.6em}   /* two lines next to the price panel, never under it (design-fix 10-20) */
.numf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,8,8,.42),transparent 50%);z-index:1;pointer-events:none}
/* PRICING below */
.tiers3{padding-top:130px;padding-bottom:20px}
.tiers3 h2{margin-bottom:46px}
.t3{display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:12px;align-items:stretch}
.t3 article{padding:34px 30px 36px;border-radius:var(--r);background:var(--page-2);box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;gap:14px}
.t3 article.mid{background:linear-gradient(160deg,#2a2216,#15121a 70%);box-shadow:inset 0 0 0 1px rgba(201,163,94,.4)}
.t3 h3{font-weight:500;font-size:clamp(28px,2.4vw,38px);letter-spacing:-.03em}
.t3 .pr{font-weight:500;font-size:clamp(52px,5vw,88px);line-height:.92;letter-spacing:-.05em;color:var(--gold-hi);display:flex;flex-direction:column}
.t3 .pr small{font-size:13px;letter-spacing:.01em;color:var(--mute);margin-bottom:10px}
.t3 .best{color:var(--ink);font-size:18px}
.t3 .inc{color:var(--ink-2);font-size:16px;list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0 6px}
.t3 .inc li{position:relative;padding-left:24px}
.t3 .inc li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;border-left:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);transform:rotate(-45deg)}
.t3 article>.pill{margin-top:auto;align-self:flex-start}
.t3 .pr.quote{font-size:clamp(30px,2.6vw,44px);line-height:1;color:var(--ink)}
.monthly{padding-top:120px;padding-bottom:20px}
.monthly h2{margin-bottom:40px}
.mo{display:grid;grid-template-columns:1fr;gap:12px}   /* round 7 (B10): one monthly plan, the care plan is not shown */
.mo>*{position:relative;display:flex;flex-direction:column;gap:14px;padding:36px 34px;border-radius:var(--r);overflow:hidden;isolation:isolate;box-shadow:inset 0 0 0 1px var(--line)}
.mo .m1{background:radial-gradient(70% 90% at 92% 10%,rgba(201,163,94,.16),transparent 70%),#0f0d11}
.mo .m2{background:var(--page-2)}
.mo .mono{color:var(--gold-ink)}
.mo b{font-weight:500;font-size:clamp(64px,7.4vw,140px);line-height:.88;letter-spacing:-.055em;color:var(--gold-hi);white-space:nowrap}
.mo b small{font-size:max(.2em,15px);letter-spacing:0;color:#c4bcb0;margin-left:.3em}
.mo .d{color:var(--ink-2);max-width:28em;font-size:16.5px}
.mo .m1:hover b{color:#fff1cf}
.path{padding-top:130px;padding-bottom:10px}
.pth{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:4vw}
.pth .ln{position:absolute;left:0;right:0;top:0;width:100%;height:20px;overflow:visible}
.pth .ln path{fill:none;stroke:var(--gold);stroke-width:2;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:var(--p,1)}
.pth i{position:absolute;top:-1px;width:22px;height:22px;margin-left:-2px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.pth>div{position:relative;padding-top:22px;border-top:1px solid rgba(201,163,94,.55)}
.pth .no{display:block;color:var(--gold-ink);font-size:13px;margin-bottom:18px}
.pth b{display:block;font-weight:500;font-size:clamp(32px,3.6vw,60px);line-height:.95;letter-spacing:-.045em;margin-bottom:14px}
.pth p{color:var(--ink-2);font-size:17px;max-width:22em}
.faq{padding-top:130px;padding-bottom:130px;border-top:0}
.faq h2{margin-bottom:30px}

/* CONTACT hero: the form inside the star ring */
.contactf .hx{right:52%}
.contactf form.msg{position:absolute;z-index:3;right:6%;top:50%;translate:0 -50%;width:min(540px,42%);gap:0 18px;padding:26px 28px;border-radius:20px;background:rgba(14,12,16,.9);box-shadow:inset 0 0 0 1px rgba(242,237,227,.14),0 30px 80px rgba(0,0,0,.45)}
.contactf form.msg label{padding:7px 0}
.contactf form.msg input,.contactf form.msg textarea,.contactf form.msg select{font-size:16px}
.contactf form.msg .send{margin-top:14px}
.ways2{padding-top:110px;padding-bottom:130px;display:flex;flex-direction:column}
.ways2>a,.ways2 .book{display:flex;flex-direction:column;gap:10px;padding:30px 0;border-top:1px solid var(--line)}
.ways2 .book{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ways2 .book>div{display:flex;flex-direction:column;gap:10px}
.ways2 .book a.pill{padding:0 26px}
.ways2>a:last-child{border-bottom:1px solid var(--line)}
.ways2 .mono{color:var(--mute)}
.ways2 b{font-weight:500;font-size:clamp(34px,3.9vw,56px);line-height:1;letter-spacing:-.04em;transition:color .3s}
.ways2 a:hover b{color:var(--gold-hi)}
.ways2 .arrow{color:var(--gold);display:inline-block;transition:transform .4s}
.ways2 a:hover .arrow{transform:translateX(10px)}

/* THANK-YOU hero: the star pile, slowly coming closer */
.burst{background:url(/img/forge-poster-a.webp) 74% 46%/220% auto no-repeat;animation:kb 24s ease-in-out infinite alternate;mix-blend-mode:screen}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translateX(-2%)}}
.thanksf .amb{filter:blur(18px) brightness(.6) saturate(1.1)}
.thanksf::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(8,8,8,.7));pointer-events:none;z-index:1}

@media (max-width:1100px){
  .gk{grid-template-columns:1fr 1fr 1fr;padding:14px 16px}
  .lab-item .about{grid-template-columns:1fr}
  .lab-item:nth-child(even) .lab-view{width:100%}
  .aboutf .hx{right:28px}
  .aboutf .photo{right:50%;translate:50% 0;top:6%;bottom:34%}
  .aboutf .tagline{right:auto;left:50%;translate:-50% 0;bottom:calc(34% - 18px)}
  .story .cols{grid-template-columns:1fr;gap:20px}
  .t3,.mo{grid-template-columns:1fr}
  .pth{grid-template-columns:1fr;gap:40px}
  .pth .ln{display:none}
  .pth>div{padding-top:18px}
  .contactf{height:auto;min-height:calc(100svh - var(--hdr) - 12px)}
  .contactf .hx{position:relative;left:auto;right:auto;top:auto;padding:30px 28px 0}
  .contactf form.msg{position:relative;right:auto;top:auto;translate:none;width:auto;margin:28px 20px 24px}
}
@media (max-width:640px){
  .gk{grid-template-columns:1fr;gap:4px;padding:12px 14px}
  .gk label:nth-child(n+2){display:none}
  .labs{padding-bottom:80px}
  .lab-item{padding-top:50px}
  .lab-item .lab-view,.lab-item:nth-child(even) .lab-view{aspect-ratio:4/4.4}
  .lab-item .about h2{font-size:40px}
  .aboutf .photo{top:4%;bottom:40%}
  .aboutf .tagline{bottom:calc(40% - 16px)}
  .aboutf .bigstar{width:112vw;right:50%;translate:50% 0;top:2%}
  .aboutf .markstar{right:50%;top:calc(2% + 56vw);width:20vw;translate:50% -50%}
  .story{padding-top:80px}
  .story .lede{font-size:clamp(30px,9vw,36px)}
  .story .cols p{font-size:17px}
          .nm small{font-size:13px}
  .nums{padding:20px 18px 46% 18px;align-items:flex-start;justify-content:flex-end}
  .nums .col{transform:none}
  .nm{font-size:min(19vw,11vh)}
  .nm.n3{font-size:min(23vw,13vh)}
  .numf::after{background:linear-gradient(transparent 40%,rgba(8,8,8,.7))}
  .tiers3,.monthly,.path,.faq{padding-top:80px}
  .faq{padding-bottom:80px}
  .t3 article,.mo>*{padding:26px 22px}
  .mo b{font-size:64px}
  .contactf .hx{padding:22px 18px 0}
  .contactf form.msg{margin:22px 10px 14px;padding:16px}
  .ways2{padding-top:60px;padding-bottom:80px}
  .ways2 b{font-size:clamp(28px,8.6vw,36px);word-break:break-word}
}
@media (prefers-reduced-motion:reduce){.burst{animation:none}}
.numf .amb.under{inset:-6%;background-size:cover;background-position:30% 60%;filter:blur(22px) brightness(.5) saturate(1.1)}
.numf .amb.gold{mix-blend-mode:screen;inset:0;background-size:340% auto;background-position:47% 46%;filter:blur(1px) brightness(.62) saturate(1.05);transform:none}
.aboutf .photo{right:6%;top:6%;bottom:6%}
.aboutf .tagline{right:calc(6% + 30px);bottom:calc(6% - 16px)}
.aboutf .bigstar path{stroke-width:.32}
@media (max-width:1100px){.aboutf .photo{right:50%;top:6%;bottom:34%}.aboutf .tagline{right:auto;bottom:calc(34% - 18px)}}
@media (max-width:640px){.aboutf .photo{top:4%;bottom:40%}.aboutf .tagline{bottom:calc(40% - 16px)}}
.frame>.amb.pile{filter:blur(8px) brightness(1.05) saturate(1.1)}
.frame.device[data-hold]::after{background:linear-gradient(90deg,rgba(8,8,8,.42) 0%,rgba(8,8,8,.15) 30%,transparent 50%)}
@container (max-width:260px){.wf{top:12cqh;transform:scale(.84);transform-origin:50% 0}.wf .hd{display:none}.wf .wire{height:3cqh}}

/* ═════════ round 6 (Oct 21, 2026) ═════════ */
/* WEBSITES: the 3D laptop and phone in the page flow, turnable by hand */
.mobile{padding-top:130px;padding-bottom:20px}
.devbox{position:relative;aspect-ratio:16/8;border-radius:var(--r);overflow:hidden;isolation:isolate;box-shadow:0 0 0 1px var(--line);cursor:grab;touch-action:pan-y}
.devbox:active{cursor:grabbing}
.devbox .fx-still{padding:8% 6% 6% 30%}
.mob-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.mob-facts>div{padding:26px 26px 28px;border-radius:var(--r);background:var(--page-2);box-shadow:inset 0 0 0 1px var(--line)}
.mob-facts b{display:block;font-weight:500;font-size:clamp(24px,2vw,32px);letter-spacing:-.03em;line-height:1.05;margin-bottom:10px;color:var(--gold-hi)}
.mob-facts p{color:var(--ink-2);font-size:16.5px;max-width:26em}
/* AI FRONT DESK: the waveform under the ring */
.ringf .wave{position:absolute;left:50%;bottom:9%;z-index:1;display:flex;gap:5px;align-items:center;height:64px;translate:-50% 0;pointer-events:none}
.ringf .wave i{display:block;width:3px;height:64px;border-radius:2px;background:var(--gold);opacity:.8;transform:scaleY(.2);transform-origin:center;will-change:transform;box-shadow:0 0 12px rgba(201,163,94,.5)}
@media (max-width:1100px){
  .mob-facts{grid-template-columns:1fr}
  .devbox{aspect-ratio:16/10}
}
@media (max-width:640px){
  .mobile{padding-top:80px}
  .devbox{aspect-ratio:4/4.4}
  .devbox .fx-still{padding:50% 14% 8%}
  .ringf .wave{bottom:auto;top:62%;gap:4px;height:40px}
  .ringf .wave i{height:40px}
}
/* round 7 (Oct 21, 2026) */
.js .ringf audio{display:none}   /* the custom Play button is the control; the native scrubber only shows without JavaScript */
.js .ringf .play[hidden]{display:inline-flex}
.mark.in i{left:auto;right:8px;top:6px;margin:0}
.layers-f .stack .sheet.img .pic{background-image:url(/media/lef26-pic.jpg);background-position:50% 0}
.proofline{padding-top:110px;padding-bottom:20px}
.pline{display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px 28px;align-items:end;padding-top:26px;border-top:1px solid rgba(201,163,94,.4)}
.pline b{display:block;font-weight:500;font-size:clamp(44px,4.2vw,64px);line-height:1;letter-spacing:-.045em;color:var(--gold-hi);margin-bottom:10px}
.pline .mono{color:var(--ink-2);display:block;max-width:16em}
.pline a.lk{margin:0 0 6px}
.can .sec-head h2.h2{font-size:clamp(34px,3.9vw,56px)}
@media (max-width:1100px){.pline{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pline{grid-template-columns:1fr;gap:22px}.proofline{padding-top:80px}.xp{padding-top:80px}}
.ringf .grain{opacity:.16}
.ringf .fx-still::after{content:"";position:absolute;inset:0;background:radial-gradient(42% 38% at 50% 48%,rgba(227,198,142,.26),rgba(201,163,94,.08) 55%,transparent 75%)}   /* round 7: a soft gold glow in the ring, so the phone first screen is never a flat black band */
@media (max-width:640px){.ringf .amb{filter:blur(26px) brightness(.72) saturate(1.15)}}

/* round 8 (review r7 blocker 5): Websites, SEO and AEO, and Automation heroes on the showcase stage (warm black, gold rim
   light); the client's sampled colour (.amb) is gone, so no grey fog and no blurred blobs behind the light page */
.layers-f,.scanf,.flowf{background:radial-gradient(70% 70% at 64% 62%,#261f16 0%,#16120f 48%,#0d0b0a 100%)}
.layers-f::before,.scanf::before,.flowf::before{content:"";position:absolute;left:24%;right:-8%;bottom:-18%;height:58%;z-index:-1;pointer-events:none;background:radial-gradient(50% 60% at 62% 100%,rgba(214,176,106,.4),rgba(201,163,94,.12) 48%,transparent 72%);filter:blur(16px)}
.layers-f::after,.scanf::after,.flowf::after{content:"";position:absolute;left:44%;right:-10%;top:-20%;height:60%;z-index:-1;pointer-events:none;background:radial-gradient(45% 50% at 70% 30%,rgba(201,163,94,.14),transparent 70%)}
/* round 8 (review r7 non-blocking 8): every scan label sits in its own mark's top-left corner, never off the page.
   round 9 (review r8 non-blocking 5): each label sizes to its text (no ellipsis, nothing cut), and the headline label (svc-fx.js adds .up to its mark)
   sits ABOVE its box, so it never covers the headline it points at. */
.scan .mark i,.scan .mark.l i,.scan .mark.in i{left:5px;right:auto;top:5px;margin:0;width:max-content;max-width:none;overflow:visible;text-overflow:clip}
.scan .mark{min-height:26px}
@media (max-width:640px){.scan .mark i,.scan .mark.l i,.scan .mark.in i{font-size:13px;padding:2px 6px;top:3px;left:3px}.scan .mark{min-height:24px}}
.scan .mark.up{z-index:5}   /* on a phone the label is wider than the gap before the image box: it sits over that box's border instead of being cut by it */
.scan .mark.up i{left:0;top:auto;bottom:100%;margin:0 0 6px}
@media (max-width:400px){.scan .mark.l i{top:36px}}   /* on the narrowest phones the headline label (now above its box) would run into the image label by a few px, so the image label sits a little lower in its own box */
/* round 8 (review r7 non-blocking 13): lower-half headings stay calm */
.acc summary{font-size:clamp(26px,2.9vw,40px)}
.pth b{font-size:clamp(28px,2.6vw,40px)}
body .gauge-card .n{font-size:clamp(52px,4.4vw,64px)}
@media (max-height:520px) and (orientation:landscape){.layers-f .scene{padding:5% 3% 5% 50%;align-items:center;justify-content:center}.layers-f .hx.top{right:52%}}
.layers-f>.grain,.scanf>.grain,.flowf>.grain{opacity:.24}
/* round 9 (review r8 non-blocking: Services "How they fit together" on touch): a touch screen cannot hover and a tap opens the page, so scenes.js writes each service's
   part (.exp) right under its name. Computers keep the hover and focus behaviour; no .exp exists there. */
.orb a .exp{display:block;margin-top:6px;max-width:34em;font-size:16px;line-height:1.45;font-weight:400;letter-spacing:0;text-transform:none;color:rgba(242,237,227,.86);text-wrap:pretty}
@media (hover:none) and (min-width:1101px){   /* a big touch screen (tablet landscape): same one-grid layout as the narrow screens, the explanations need the room and the lines would run through them */
  .orb{height:auto;display:grid;grid-template-columns:1fr 1fr;gap:40px 20px}
  .orb .lines{display:none}
  .orb .core{position:static;translate:none;width:auto;grid-column:1 / -1;order:-1}
  .orb a{position:static;max-width:none;text-align:left!important;align-items:flex-start!important}
  .orb a .exp{font-size:18px}
}