:root{
  --ink:#141414;--paper:#FFFFFF;--fog:#F3F3F3;--stone:#5C5C5C;--line:#DADADA;--tone:#232323;
  --sans:Manrope,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:Archivo,"Arial Narrow",Arial,sans-serif;
  --wrap:1200px;
  /* home page scale (11 Nov review): three heading sizes and two card radii */
  --h-xl:clamp(46px,6.2vw,92px);--h-l:clamp(40px,4.7vw,68px);--h-m:clamp(32px,3.9vw,56px);
  --r-lg:28px;--r-sm:16px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);--ease-in-out:cubic-bezier(0.77,0,0.175,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.6 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.big::before{content:attr(data-n)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:24px}
.num{font-family:var(--display);font-weight:800;font-stretch:78%;letter-spacing:-.015em;line-height:.8}
h1,h2,h3{margin:0;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(36px,4.8vw,60px);line-height:1.04;font-weight:800}
h2{font-size:var(--h-m);line-height:1.04;font-weight:800}
h3{font-size:20px;line-height:1.25;font-weight:700}
p{margin:0 0 14px;max-width:62ch}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--stone);max-width:44ch}
.label{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);margin-bottom:18px}
.dark .label{color:#A8A8A8}

/* buttons
   CTA buttons (.btn, and .btn.light on dark sections) share one look: a dark pill with a warm light on its rim.
   At rest a small light with a few dots drifts along the top edge, only while the button is on screen (.on, set by site.js).
   On hover or keyboard focus the whole rim lights and the glow rises from the edges. Only transform and opacity animate.
   The light's color is --glow (blue from the hero) and the warm-up under the text is --tint. On the home page the header
   "See pricing" takes the color of whichever hero panel is open (site.js). .btn.line (header "Contact us") stays a plain outline. */
.btn{--glow:#6B5CFF;--tint:#16123F;position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:16px;padding:15px 24px;border-radius:999px;border:0;cursor:pointer;background:radial-gradient(130% 170% at 50% 135%,var(--tint) 0%,#0F0F0F 64%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:transform .25s var(--ease-out)}
.btn::before{content:"";position:absolute;z-index:-1;top:0;left:0;width:56%;height:58%;pointer-events:none;
  background:linear-gradient(90deg,transparent 6%,var(--glow) 50%,transparent 94%) top/100% 1.5px no-repeat,radial-gradient(50% 70% at 50% 0,color-mix(in srgb,var(--glow) 34%,transparent),transparent),radial-gradient(circle,color-mix(in srgb,var(--glow) 75%,transparent) .8px,transparent 1.2px) 0 2px/5px 5px;
  -webkit-mask:radial-gradient(50% 100% at 50% 0,#000 15%,transparent 85%);mask:radial-gradient(50% 100% at 50% 0,#000 15%,transparent 85%);
  transform:translateX(70%);animation:rim 7s var(--ease-in-out) infinite alternate paused}
.btn.on::before{animation-play-state:running}
@keyframes rim{from{transform:translateX(8%)}to{transform:translateX(74%)}}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px var(--glow),inset 0 0 16px color-mix(in srgb,var(--glow) 55%,transparent),inset 0 -12px 26px -8px color-mix(in srgb,var(--glow) 60%,transparent);opacity:0;transition:opacity .45s var(--ease-out)}
.btn:hover::after,.btn:focus-visible::after{opacity:1}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97);transition-duration:.1s}
@media (prefers-reduced-motion:reduce){.btn::before{animation:none}.btn,.btn::after{transition:none}}
.btn-note{font-size:14px;color:var(--stone);margin-top:12px}
.dark .btn-note{color:#A8A8A8}
.textlink{font-weight:700;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}

/* header */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:16px}
.site-head .logo img{height:46px;width:auto}
.site-nav{display:flex;align-items:center;gap:26px;font-weight:600;font-size:15px}
.site-nav a{text-decoration:none}
.site-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.site-nav .btn{padding:10px 18px;font-size:15px}
.nav-links{display:flex;gap:26px}
@media (max-width:860px){.nav-links{display:none}}

/* sections */
section{padding-block:96px}
section+section{border-top:1px solid var(--line)}
.dark{background:var(--ink);color:#fff;border-top:0!important}
.dark+section{border-top:0}
.fog{background:var(--fog)}
@media (max-width:640px){section{padding-block:68px}}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:110px 120px;border-top:0}
.hero .big{position:absolute;right:-3vw;bottom:-14vw;font-size:min(52vw,720px);color:var(--ink);pointer-events:none;user-select:none}
.hero .copy{position:relative;max-width:640px}
.hero h1{margin-bottom:22px;max-width:16ch}
.hero .lede{margin-bottom:34px}
@media (max-width:860px){.hero .big{font-size:80vw;right:-18vw;bottom:-30vw;color:#EFEFEF}.hero{padding-block:72px 96px}}

/* services ("Four ways I help"): four frosted glass cards on a pale gray band (light chosen by Steve on 10 Nov; the dark band was too heavy). Behind each card a slanted color shape glows through the glass
   and sticks out below it. Hover (on touch screens: the card in the middle of the screen, .lit from site.js) brings the shape up
   to fill the card, lifts the card and slides in two small glass tiles. The shapes rise in once when the grid scrolls into view.
   Colors match the hero panels: teal = training, pink = agents, green = websites; violet for creative. Only transform and opacity animate. */
.svcs{background:#F3F3F1;color:var(--ink);border-top:0!important;padding-block:112px 150px;overflow:hidden}
.svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin-top:64px}
.svc{position:relative;isolation:isolate;--a:#FF4D7E;--b:#FF9F45}
.s-teal{--a:#3EE0C8;--b:#2D7FF0}
.s-pink{--a:#FF4D7E;--b:#FF9F45}
.s-violet{--a:#8B5CFF;--b:#FF6FD8}
.s-green{--a:#2FD27F;--b:#D2F56C}
.svc-art{position:absolute;inset:0 0 -20% 0;z-index:-1;pointer-events:none;transition:opacity .8s ease var(--sd,0s),transform 1s var(--ease-out) var(--sd,0s)}
.svc-art i{position:absolute;inset:0;border-radius:var(--r-sm);background:linear-gradient(165deg,var(--a),var(--b));transform-origin:0 0;transform:translateX(0) skewX(13deg) scaleX(.5);transition:transform .75s var(--ease-out)}
.svc-art i:first-child{filter:blur(34px);opacity:.45}
.svc-card{position:relative;z-index:1;height:100%;min-height:290px;padding:30px 26px;border-radius:var(--r-sm);background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(26px) saturate(1.5);backdrop-filter:blur(26px) saturate(1.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85),0 24px 48px -28px rgba(20,20,20,.28);transition:transform .6s var(--ease-out)}
.svc-card h3{color:var(--ink);font-size:22px;margin-bottom:12px}
.svc-card p{margin:0;font-size:16px;color:#3A3A3A}
.svc-sq{position:absolute;width:30%;aspect-ratio:1;border-radius:12px;background:rgba(255,255,255,.45);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.85);opacity:0;pointer-events:none;transition:opacity .45s ease,transform .6s var(--ease-out)}
.sq-top{z-index:0;top:-14%;left:22%;transform:translateY(24px)}
.sq-bot{z-index:2;bottom:-18%;right:10%;transform:translateY(-24px)}
@media (hover:hover){
  .svc:hover .svc-art i{transform:translateX(5%) skewX(0deg) scaleX(.9)}
  .svc:hover .svc-card{transform:translateY(-8px)}
  .svc:hover .svc-sq{opacity:1;transform:none}
}
.svc.lit .svc-art i{transform:translateX(5%) skewX(0deg) scaleX(.9)}
.svc.lit .svc-card{transform:translateY(-8px)}
.svc.lit .svc-sq{opacity:1;transform:none}
.svc:nth-child(2){--sd:.1s}.svc:nth-child(3){--sd:.2s}.svc:nth-child(4){--sd:.3s}
.svc-grid.pre .svc-art{opacity:0;transform:translateY(40px)}
@media (max-width:1100px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:96px;column-gap:28px}}
@media (max-width:600px){.svcs{padding-block:80px 120px}.svc-grid{grid-template-columns:1fr;row-gap:80px;margin-top:44px}.svc-card{min-height:0;padding:28px 24px 64px}.svc-sq{display:none}}
@media (prefers-reduced-motion:reduce){.svc-art,.svc-art i,.svc-card,.svc-sq{transition:none}}
/* story: a dashed box saying how the studio works, then a big centered line with a serif quote (Designjoy's layout, Steve's words) */
.story{text-align:center;padding-block:120px 64px;border-top:0!important}
.story-box{max-width:840px;margin:0 auto;padding:clamp(28px,4vw,52px) clamp(22px,5vw,72px);border:1.5px dashed #CFCFCF;border-radius:var(--r-lg);color:var(--stone);font-size:clamp(18px,1.7vw,22px);line-height:1.6;font-weight:500}
.story-box p{margin:0 auto;max-width:none}
.story-box em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;font-size:1.12em}
.story-box a{color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1.5px}
.story h2{margin:clamp(72px,9vw,120px) auto 0;font-size:var(--h-xl);line-height:.98;letter-spacing:-.045em;max-width:13ch}
.story-cta{margin-top:36px}
.story-sub{margin:26px auto 0;max-width:44ch;color:var(--stone);font-size:clamp(18px,1.6vw,21px);line-height:1.5}

/* sites I've built (assets/tumble.js): a tall section with a pinned stage; scrolling through it tips the screenshots over one
   by one. Without JS the screenshots show as a plain grid. */
.tumble{position:relative;padding:0;border-top:0!important}
.td-list{list-style:none;margin:0 auto;padding:0 24px 96px;max-width:var(--wrap);display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.td-list img{width:100%;height:auto;border-radius:8px;box-shadow:0 0 0 1px var(--line)}
.td-on .td-list{display:none}
.td-stage{display:none}
.td-on .td-stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden;outline:none;cursor:pointer}
.td-stage:focus-visible{box-shadow:inset 0 0 0 2px var(--ink)}
.td-scene{position:absolute;inset:0;transform-style:preserve-3d}
.td-card{position:absolute;left:50%;top:var(--td-top);width:var(--td-w);height:var(--td-h);margin-left:calc(var(--td-w) / -2);transform-origin:50% 100%;transform-style:preserve-3d;backface-visibility:visible;will-change:transform;border-radius:4px;overflow:hidden;background:var(--fog);box-shadow:0 0 0 1px rgba(20,20,20,.1)}
.td-card img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 0%;pointer-events:none}
.td-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:#000;opacity:var(--td-shade,0)}
.td-cap{position:absolute;left:0;right:0;bottom:7svh;margin:0 auto;padding-inline:24px;max-width:none;text-align:center;font-size:15px;font-weight:600;color:var(--stone)}

/* quotes: two big serif quotes side by side with who said them (Designjoy's layout). Real words only: any figure still marked
   data-placeholder or data-needs-approval blocks deploy.sh. */
.quotes{padding-block:120px;border-top:0!important}
.q-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px)}
.q{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:30px}
.q blockquote{margin:0}
.q p{margin:0 auto;max-width:15em;font-family:"Instrument Serif",Georgia,serif;font-style:normal;font-size:clamp(38px,4.2vw,64px);line-height:1.02;letter-spacing:-.025em;color:var(--ink)}
.q figcaption{display:flex;align-items:center;gap:16px;text-align:left}
.q-av{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:18px;overflow:hidden}
.q-av img{width:100%;height:100%;object-fit:cover}
.q b{display:block;font-size:19px;font-weight:600}
.q small{display:block;font-size:15px;color:var(--stone)}
.q[data-placeholder] p{color:#B5B5B5}
.q-next p em{font-style:italic}
/* "Start today": a dark tile button whose icon is a mini Eight Two Two keypad (lit 2 ring, lit 8 key); hover dials 8, 2, 2. */
.btn-join{display:inline-flex;align-items:center;gap:20px;padding:8px 28px 8px 8px;border-radius:16px;background:#161618;color:#fff;font-weight:600;font-size:19px;text-decoration:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 6px 14px -8px rgba(0,0,0,.4);transition:transform .2s var(--ease-out)}
/* hover expands the button: an arrow slides in after the label (its width grows from 0, so the button widens) */
.btn-join::after{content:"";flex:none;width:0;height:18px;margin-left:-20px;opacity:0;background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M3 10h12.5M10.5 4.5L16 10l-5.5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M3 10h12.5M10.5 4.5L16 10l-5.5 5.5' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
  transition:width .4s var(--ease-out),margin .4s var(--ease-out),opacity .25s ease}
.btn-join:hover::after,.btn-join:focus-visible::after{width:18px;margin-left:-6px;opacity:1}
/* light version for light cards (FAQ card, schools strip): a white tile and a pale raised key with dark dots */
.btn-join.light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px rgba(20,20,40,.08),0 10px 24px -12px rgba(40,30,120,.3)}
.btn-join.light .bj-ico{background:linear-gradient(180deg,#FFFFFF,#ECEBF3);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(30,30,60,.1),inset 0 0 0 1px rgba(30,30,60,.07),0 1px 3px rgba(30,30,60,.16)}
.btn-join.light .bj-ico g{fill:#2A2A31}
.fc-card .btn-join{display:flex;width:100%}
.btn-join:hover{transform:translateY(-1px)}
.btn-join:active{transform:scale(.97)}
/* the icon is a raised phone key: lighter than the button, a highlight on top and a darker pressed edge below */
.bj-ico{width:56px;height:56px;border-radius:13px;background:linear-gradient(180deg,#3A3A41,#25252A);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -3px 0 rgba(0,0,0,.35),0 2px 4px rgba(0,0,0,.35);transition:transform .2s var(--ease-out)}
.btn-join:active .bj-ico{transform:translateY(1px)}
.bj-ico svg{width:34px;height:34px}
.bj-ico .k2,.bj-ico .k8,.fc-key .k2,.fc-key .k8{transform-box:fill-box;transform-origin:center}
/* hover dials 8, 2, 2: the 8 key presses once, then the 2 key twice */
.btn-join:hover .k8,.fc-card:hover .k8{animation:kp8 .45s var(--ease-out)}
.btn-join:hover .k2,.fc-card:hover .k2{animation:kp22 .8s var(--ease-out) .3s}
@keyframes kp8{40%{transform:scale(.62)}}
@keyframes kp22{20%{transform:scale(.6)}42%{transform:none}64%{transform:scale(.6)}}
@media (prefers-reduced-motion:reduce){.btn-join,.btn-join::after{transition:none}.k2,.k8{animation:none!important}}
@media (max-width:600px){.btn-join{font-size:17px;gap:14px;padding-right:20px}.bj-ico{width:50px;height:50px}}
@media (max-width:820px){.q-grid{grid-template-columns:1fr}.quotes{padding-block:80px}}

/* tile buttons on dark sections: the same tile, lifted off the dark with a faint fill and edge */
.dark .btn-join,.where .btn-join{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.edu .btn-join{margin-top:14px}

/* pricing (Designjoy's "One subscription" block with our offers): a white card under a tilted, floating card of smiley
   faces, and a black card with the featured package. The other three prices sit underneath. All prices are drafts. */
.plans{background:#F3F3F1;border-top:0!important;padding-block:110px 100px}
.plans-h{text-align:center;font-size:var(--h-xl);line-height:.98;letter-spacing:-.045em;max-width:14ch;margin:0 auto}
.plans-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:24px;margin-top:clamp(90px,11vw,160px);align-items:stretch}
.plan-join{position:relative;background:#fff;border-radius:var(--r-lg);padding:0 40px 40px;display:flex;flex-direction:column;gap:28px}
.pj-float{width:min(96%,470px);margin:-64px 0 0 -26px;transform:rotate(-10deg);filter:drop-shadow(0 30px 40px rgba(20,20,20,.26));animation:pjfloat 7s var(--ease-in-out) infinite alternate}
@keyframes pjfloat{to{transform:rotate(-7deg) translateY(-10px)}}
.pj-art{display:block;width:100%;height:auto}
/* a quiet tag, styled like the price card's .pm-tag, so it never reads as a button */
.pj-tag{display:inline-flex;align-items:center;gap:9px;align-self:flex-start;color:var(--stone);font-weight:600;font-size:14px;line-height:1.2;padding:8px 13px;border-radius:8px;box-shadow:inset 0 0 0 1px var(--line);margin:auto 0 -6px}
.pj-tag i{width:10px;height:10px;border-radius:3px;background:#E8602C}
.plan-join h3{font-size:clamp(40px,4.2vw,64px);line-height:.98;letter-spacing:-.04em}
.plan-main{position:relative;isolation:isolate;overflow:hidden;background:#1F1F23;color:#fff;border-radius:var(--r-lg);padding:44px 48px 48px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
/* moving gradient: three soft color fields in the hero colors drift slowly behind the content, only while on screen (.on) */
.pm-glow{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.pm-glow i{position:absolute;aspect-ratio:1;border-radius:50%;opacity:.5;animation:pmdrift 18s var(--ease-in-out) infinite alternate;animation-play-state:paused}
.pm-glow i:nth-child(1){width:85%;left:-30%;top:-40%;background:radial-gradient(closest-side,#3124DD,transparent)}
.pm-glow i:nth-child(2){width:70%;right:-28%;top:18%;background:radial-gradient(closest-side,#FF3D8B,transparent);opacity:.32;animation-duration:22s;animation-direction:alternate-reverse}
.pm-glow i:nth-child(3){width:80%;left:10%;bottom:-55%;background:radial-gradient(closest-side,#2CC9B6,transparent);opacity:.3;animation-duration:26s}
.plans.on .pm-glow i{animation-play-state:running}
@keyframes pmdrift{33%{transform:translate(12%,8%) scale(1.12)}66%{transform:translate(-6%,14%) scale(.94)}100%{transform:translate(8%,-10%) scale(1.08)}}
.pm-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding-bottom:26px;border-bottom:1.5px dashed rgba(255,255,255,.28)}
.pm-top h3{color:#fff;font-size:clamp(28px,2.6vw,38px);letter-spacing:-.03em}
.pm-tag{font-size:13px;color:#BDBDBD;padding:9px 14px;border-radius:8px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.pm-pill{display:inline-block;margin-top:28px;font-size:16px;font-weight:600;color:#FF6FB0;background:rgba(255,61,139,.14);box-shadow:inset 0 0 0 1px rgba(255,61,139,.35);padding:10px 18px;border-radius:999px}
.pm-price{display:flex;align-items:baseline;gap:10px;margin:22px 0 30px}
.pm-price small{font-size:18px;color:#BDBDBD;font-weight:600}
.pm-price b{font-size:clamp(56px,6vw,88px);line-height:.9;letter-spacing:-.04em;font-weight:800}
.pm-inc{position:relative;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);border-radius:16px;padding:36px 30px 26px;margin-bottom:32px}
.pm-inc-l{position:absolute;top:-14px;left:26px;font-size:13px;color:#E0E0E0;background:#34343A;padding:7px 12px;border-radius:7px}
.pm-inc ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.pm-inc li{font-size:16px;line-height:1.4;color:#EDEDED}
.pm-face{position:absolute;right:-46px;bottom:-56px;width:220px;height:220px;transition:transform .6s var(--ease-out)}
.plan-main:hover .pm-face{transform:rotate(-8deg) translate(-6px,-6px)}
.plan-main .btn-join{position:relative;z-index:1;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.plans-more{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.plans-more div{background:#fff;border-radius:var(--r-sm);padding:24px 26px;display:flex;flex-direction:column;gap:6px}
.plans-more strong{font-size:18px}
.plans-more span{font-size:15px;color:var(--stone);line-height:1.45}
.plans-more b{margin-top:auto;padding-top:10px;font-family:var(--display);font-weight:800;font-stretch:78%;font-size:34px;letter-spacing:-.01em}
.plans-more b small{font-family:var(--sans);font-stretch:100%;font-size:14px;font-weight:600;color:var(--stone)}
.plans .fine{text-align:center;margin:24px auto 0}
@media (max-width:980px){.plans-grid{grid-template-columns:1fr;row-gap:52px;margin-top:56px}.plan-main{order:-1}.pj-float{width:min(45%,260px);margin:-26px 0 0 -6px}.plans-more{grid-template-columns:1fr}}
@media (max-width:600px){.plan-main{padding:32px 24px 36px}.pm-inc ul{grid-template-columns:1fr}.plan-join{padding:0 28px 30px;gap:22px}.pm-face{width:160px;height:160px;right:-40px;bottom:-46px}}
@media (prefers-reduced-motion:reduce){.pj-float,.pm-glow i{animation:none}}

/* where I help: six steps from first search to coming back. A tall card per step (hero colors, clay objects) staggered like a
   moving thumbnail strip, with the step's text under it on a flat line. One step is lit at a time (orange line, card lifts,
   the others dim): it cycles while the section is on screen and hover picks one (site.js). Under 1100px: a sideways swipe row
   with nothing dimmed. Only transform and opacity animate. */
.where{padding-block:110px 120px;overflow:hidden;background:radial-gradient(90% 60% at 50% 0%,#2C2C31,#1E1E22)}
.where-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.where-head h2{max-width:16ch}
.where-row{list-style:none;margin:60px auto 0;padding:0 24px;max-width:1360px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.wh{--off:0px;min-width:0}
.wh:nth-child(1){--off:48px}.wh:nth-child(3){--off:30px}.wh:nth-child(4){--off:64px}.wh:nth-child(5){--off:10px}.wh:nth-child(6){--off:40px}
.w-blue{--c1:#3124DD;--c2:#A04DFF}.w-pink{--c1:#D3175C;--c2:#FF7A45}.w-sun{--c1:#F5A60F;--c2:#FFE07E}
.w-green{--c1:#087A4C;--c2:#35D27F}.w-teal{--c1:#08707F;--c2:#2CC9B6}.w-violet{--c1:#4B26C9;--c2:#FF6FD8}
.wh-art{padding-bottom:72px}
.wh-card{position:relative;aspect-ratio:3/4;border-radius:16px;overflow:hidden;background:radial-gradient(110% 80% at 75% 10%,var(--c2),transparent 62%),var(--c1);transform:translateY(var(--off));transition:transform .6s var(--ease-out),opacity .45s ease}
.wh-card img{position:absolute;width:84%;height:auto;left:8%;top:6%;filter:drop-shadow(0 18px 22px rgba(0,0,0,.25));animation:bob 6s var(--ease-in-out) infinite alternate paused}
.where.on .wh-card img{animation-play-state:running}
.wh:nth-child(2n) .wh-card img{animation-delay:-2.2s}.wh:nth-child(3n) .wh-card img{animation-delay:-4.1s}
.wh-card .num{position:absolute;left:16px;bottom:14px;font-size:72px;color:#fff}
.wh-text{position:relative;padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.wh-text::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:#FF7A2E;transform:scaleX(0);transform-origin:left center;transition:transform .6s var(--ease-out)}
.wh.lit .wh-text::before{transform:none}
.wh h3{color:#fff;font-size:22px;margin-bottom:8px}
.wh p{font-size:15px;line-height:1.5;color:#BDBDBD;margin:0 0 14px}
.wh-tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.wh-tags li{font-size:12.5px;font-weight:700;line-height:1;padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.09);color:#EDEDED}
.where-row.cycling .wh:not(.lit) .wh-card{opacity:.62}
.where-row.cycling .wh.lit .wh-card{transform:translateY(calc(var(--off) - 12px))}
.where-foot{margin-top:56px;font-size:16px;color:#BDBDBD}
@media (max-width:1100px){
  .where-row{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(220px,36%);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:24px;padding-bottom:10px}
  .wh{scroll-snap-align:start}
}
@media (max-width:600px){.where{padding-block:80px}.where-row{grid-auto-columns:74%;margin-top:44px}}
@media (prefers-reduced-motion:reduce){.wh-card img{animation:none}.wh-card,.wh-text::before{transition:none}}

/* education strip */
/* schools strip: a light pastel card (the light, colorful feel of the top of the page). The 22 sits on the right in white and
   still dials in keylight orange; a clay graduation cap floats over it. */
.edu{position:relative;overflow:hidden;border-top:0!important;padding-block:0;
  background:radial-gradient(40% 90% at 100% 0%,#CFC8FF 0%,transparent 62%),radial-gradient(38% 80% at 78% 100%,#BDEFE2 0%,transparent 62%),radial-gradient(30% 70% at 0% 100%,#FFDCE8 0%,transparent 60%),#F5F4FF}
.edu-inner{position:relative;min-height:480px;display:flex;align-items:center;padding-block:88px}
.edu-sb{border-top:1px solid rgba(40,30,120,.1)}
.edu-inner .copy{position:relative;z-index:2;max-width:600px}
.edu-inner .dial22{right:-4%;font-size:min(34vw,460px)}
.edu-inner .dk i{color:rgba(49,36,221,.13)}
.edu-cap{position:absolute;z-index:1;right:14%;top:50%;width:min(22vw,260px);height:auto;margin-top:-130px;filter:drop-shadow(0 24px 28px rgba(40,30,120,.25));animation:bob 6s var(--ease-in-out) infinite alternate;pointer-events:none}
/* +1 is the US dial code (822 is Seoul's): a smaller raised "+" so it reads like a typed number, and the globe floats beside it */
.edu-sb .dial-us .dk:first-child{font-size:.62em;align-self:flex-start;margin-top:.14em}
.edu-globe{right:auto;left:55%;width:min(16vw,200px);margin-top:-40px;animation-delay:-2.5s}
@media (max-width:860px){.edu-inner{display:block;min-height:0;padding-block:64px 260px}.edu-inner .dial22{top:auto;bottom:-4%;right:-6%;transform:none;font-size:66vw}.edu-cap{top:auto;bottom:56px;margin:0;right:30%;width:160px}}
@media (max-width:860px){.edu-inner{clip-path:inset(0 -100vw)}.edu-sb .edu-globe{left:6%;right:auto;width:132px;bottom:40px}}
@media (prefers-reduced-motion:reduce){.edu-cap{animation:none}}
/* the 22 dials itself: when the strip comes on screen each 2 rolls up into place like a key going down, then presses and lights
   in the logo's keylight orange before settling. It re-dials every 7 seconds while on screen (.on and .dial from site.js).
   Two stacked layers per digit: a dark one and a lit one; only transform and opacity animate. */
.dial22{position:absolute;right:-2vw;top:50%;transform:translateY(-50%);display:flex;gap:.02em;font-size:min(40vw,520px);line-height:.8;pointer-events:none;user-select:none}
.dk{display:block;overflow:hidden;padding-block:.04em}
.dk-in{position:relative;display:block;transition:transform 1s var(--ease-out)}
.dk i,.dk b{display:block;font-style:normal;font-weight:800}
.dk i{color:var(--tone)}
.dk b{position:absolute;inset:0;color:#E8602C;opacity:0}
.js .dial22 .dk-in{transform:translateY(105%)}
.js .dial22.in .dk-in{transform:none}
.dial22 .dk:nth-child(2) .dk-in{transition-delay:.14s}
.dial22.dial .dk-in{animation:keypress .9s var(--ease-out) var(--pd,0s)}
.dial22.dial .dk b{animation:keylight 1.8s ease-out var(--pd,0s)}
.dial22 .dk:nth-child(1){--pd:.0s}.dial22 .dk:nth-child(2){--pd:.45s}
@keyframes keypress{0%{transform:none}14%{transform:scale(.94) translateY(2%)}100%{transform:none}}
@keyframes keylight{0%{opacity:0}12%{opacity:1}45%{opacity:.85}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.js .dial22 .dk-in{transform:none;transition:none}.dial22.dial .dk-in,.dial22.dial .dk b{animation:none}}
.edu .copy{position:relative;max-width:620px}
.edu h2{margin-bottom:16px}
.edu p{color:#4A4A55}
.edu .btn{margin-top:14px}

/* steps */
.steps{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:s}
.steps li{border-top:2px solid var(--ink);padding-top:18px}
.steps .n{font-size:44px;display:block;margin-bottom:12px}
.steps h3{font-size:19px;margin-bottom:8px}
.steps p{font-size:15px;color:var(--stone)}
@media (max-width:980px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.promise{margin-top:56px;border:2px solid var(--ink);border-radius:6px;padding:30px 32px;display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center}
.promise .n{font-size:88px}
.promise p{margin:0;font-size:19px;max-width:62ch}
.promise strong{display:block;font-size:22px;margin-bottom:6px}
@media (max-width:640px){.promise{grid-template-columns:1fr;gap:12px;padding:24px}.promise .n{font-size:64px}}

/* work */
.work{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.card{display:flex;flex-direction:column;text-decoration:none}
.card .shot{aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--fog)}
.card .shot img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .4s ease}
.card:hover .shot img{transform:scale(1.025)}
.card .meta{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:16px}
.card h3{font-size:21px}
.card .tag{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.card p{font-size:15.5px;color:var(--stone);margin-top:6px}
.card .go{font-weight:700;font-size:15px;margin-top:auto}
.work.two{grid-template-columns:repeat(2,1fr)}
.sub{margin-top:72px}
.sub h3{font-size:24px;margin-bottom:6px}
.sub>p{color:var(--stone)}
@media (max-width:900px){.work,.work.two{grid-template-columns:1fr}}

/* pricing */
.prices{margin-top:44px;border-top:2px solid var(--ink)}
.price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) 180px;gap:24px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.price .t{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.price p{margin:0;font-size:16px;color:var(--stone)}
.price .amt{font-weight:800;font-size:22px;white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.price .amt small{display:block;font-size:13px;font-weight:600;color:var(--stone);text-align:right}
.fine{font-size:15px;color:var(--stone);margin-top:20px}
@media (max-width:760px){.price{grid-template-columns:1fr;gap:6px}.price .amt{text-align:left}.price .amt small{text-align:left}}

/* about */
.about{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:start;margin-top:8px}
.about figure{margin:0;background:var(--fog);border-radius:6px;aspect-ratio:1;display:grid;place-items:center;overflow:hidden}
.about figure img{width:82%}
.about h2{margin-bottom:22px}
.facts{display:flex;gap:40px;flex-wrap:wrap;margin:28px 0 26px}
.facts div{min-width:110px}
.facts .num{font-size:72px;display:block}
.facts span:not(.num){font-size:14px;color:var(--stone);font-weight:600}
@media (max-width:820px){.about{grid-template-columns:1fr;gap:32px}.about figure{max-width:260px}}

/* contact */
.contact{position:relative;overflow:hidden}
/* contact: charcoal with soft splashes of the hero colors, so the bottom of the page keeps the color of the top */
.dark.contact{background:radial-gradient(38% 55% at 8% 18%,rgba(49,36,221,.42),transparent 70%),radial-gradient(30% 45% at 92% 88%,rgba(255,61,139,.26),transparent 70%),radial-gradient(34% 40% at 62% 6%,rgba(44,201,182,.2),transparent 70%),#1F1F23}
.contact .big{position:absolute;left:-2vw;bottom:-11vw;font-size:min(38vw,520px);color:var(--tone);pointer-events:none;user-select:none}
.contact .copy{position:relative;max-width:640px;margin-left:auto}
/* contact: the 3D dialpad from assets/keypad.js fills the section behind the copy. Wide screens: on the left. Phones: above the copy.
   Until it loads (or without WebGL) the big gray 822 shows instead. */
.kp-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block;pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,.18) 62%);mask-image:linear-gradient(90deg,#000 40%,rgba(0,0,0,.18) 62%)}
.contact.has-3d{min-height:min(100vh,900px);display:flex;align-items:center}
.contact.has-3d .wrap{position:relative;z-index:1;width:100%}
.contact.has-3d .big{display:none}
@media (max-width:860px){.kp-canvas{-webkit-mask-image:linear-gradient(#000 44%,rgba(0,0,0,.18) 58%);mask-image:linear-gradient(#000 44%,rgba(0,0,0,.18) 58%)}.contact.has-3d{display:block}.contact.has-3d .wrap{padding-top:min(82vw,400px)}}
.contact h2{margin-bottom:18px}
.contact p{color:#CFCFCF}
.mail{display:block;font-size:clamp(24px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;margin:26px 0 22px;text-decoration:none;word-break:break-all}
.mail:hover{text-decoration:underline;text-underline-offset:6px}
.actions{display:flex;gap:14px 26px;flex-wrap:wrap;align-items:center;margin-top:30px}
.c-addr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;margin:24px 0 0;font-size:16px}
.copybtn{background:none;border:0;padding:0;color:#fff;font-size:15px;cursor:pointer}
.privacy{font-size:14px;color:#A8A8A8!important;margin-top:18px}
@media (max-width:860px){.contact .copy{margin-left:0}}

/* education page */
.who{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.who div{border-top:2px solid var(--ink);padding-top:18px}
.who h3{margin-bottom:8px}
.who p{font-size:16px;color:var(--stone)}
@media (max-width:860px){.who{grid-template-columns:1fr}}
.rules{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
.rules li{padding:20px 0 20px 40px;border-top:1px solid #333;position:relative;color:#E6E6E6}
.rules li::before{content:"";position:absolute;left:0;top:28px;width:18px;height:2px;background:#fff}
.rules strong{color:#fff}
@media (max-width:760px){.rules{grid-template-columns:1fr}}
.terms{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.terms div{background:var(--fog);border-radius:6px;padding:26px}
.terms .num{font-size:56px;display:block;margin-bottom:14px}
.terms p{font-size:16px;color:var(--stone);margin:0}
@media (max-width:860px){.terms{grid-template-columns:1fr}}
.guarantee{margin-top:28px;padding:24px 28px;border:2px solid var(--ink);border-radius:6px;background:var(--paper)}
.guarantee p{margin:0;max-width:62ch}

/* footer */
/* FAQ: questions on the left (native details/summary, one open at a time), and a warm gradient "Book a call" card on the right
   that stays in view while you read (Designjoy's layout). Answers are taken from the Education and Small Business pages. */
.faq{padding-block:110px 120px}
.faq-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.faq h2{font-size:var(--h-l);line-height:.94;letter-spacing:-.045em;max-width:none}
.faq h2 em{font-size:1.06em}
.faq-list{margin-top:56px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;font-size:clamp(19px,1.6vw,23px);font-weight:600;letter-spacing:-.01em;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:#000}
.faq-chev{flex:none;width:22px;height:22px;transition:transform .35s var(--ease-out)}
.faq details[open] .faq-chev{transform:rotate(180deg)}
.faq-a p{margin:0;padding:0 48px 26px 0;font-size:17px;line-height:1.6;color:var(--stone);max-width:62ch}
.faq details[open] .faq-a{animation:faqin .4s var(--ease-out)}
@keyframes faqin{from{opacity:0;transform:translateY(-6px)}}
.faq-cta{position:sticky;top:32px}
.fc-card{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:40px 36px 34px;color:var(--ink);
  background:radial-gradient(60% 45% at 92% 8%,#C9C2FF 0%,transparent 70%),radial-gradient(70% 50% at 0% 100%,#B8EFE0 0%,transparent 70%),radial-gradient(55% 40% at 100% 88%,#FFD2E2 0%,transparent 70%),#FBFBFA;
  box-shadow:inset 0 0 0 1px rgba(20,20,20,.06),0 30px 60px -34px rgba(40,30,120,.35)}
.fc-card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.fc-card>*{position:relative;z-index:1}
.fc-face{display:block;width:132px;height:132px;margin:-8px 0 0 -10px}
.fc-face img{width:100%;height:auto;filter:drop-shadow(0 18px 20px rgba(40,30,120,.22));animation:bob 6s var(--ease-in-out) infinite alternate}

.fc-card h3{margin:24px 0 16px;color:var(--ink);font-size:clamp(34px,3.2vw,46px);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.nw{white-space:nowrap}
.fc-why{margin:0 0 26px;font-size:16px;line-height:1.55;color:#3E3E48}
.fc-btn{display:block;text-align:center;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:20px;padding:20px;border-radius:12px;transition:transform .2s var(--ease-out),background-color .15s ease}
.fc-btn:hover{transform:translateY(-2px)}
.fc-btn:active{transform:scale(.98)}
.fc-mail{display:flex;align-items:center;gap:16px;margin-top:30px;text-decoration:none;color:var(--ink)}
.fc-plane{flex:none;width:34px;height:34px}
.fc-mail span{flex:1;min-width:0;font-size:15px;color:var(--stone);overflow-wrap:anywhere}
.fc-mail b{display:block;color:var(--ink);font-weight:600}
.fc-arrow{flex:none;width:44px;height:44px;border-radius:50%;background:var(--ink);display:grid;place-items:center;transition:transform .3s var(--ease-out)}
.fc-arrow svg{width:20px;height:20px}
.fc-arrow path{stroke:#fff}
.fc-mail:hover .fc-arrow{transform:translateX(4px)}
@media (max-width:600px){.fc-card{padding:34px 24px 30px}}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}.faq-main{display:contents}.faq-cta{position:static;order:1}.faq-list{order:2;margin-top:0}.faq-a p{padding-right:0}}
@media (prefers-reduced-motion:reduce){.fc-face img{animation:none}.faq-chev,.fc-btn,.fc-arrow{transition:none}.faq details[open] .faq-a{animation:none}}

/* motivate: a rounded charcoal card. Big words on the left about what the reader can do; on the right three dotted orbits
   carry our clay objects around a laughing 8-key face, cropped by the card edge. Orbits turn slowly only while on screen. */
.motiv{padding-block:40px 110px;border-top:0!important}
.mv-card{position:relative;overflow:hidden;border-radius:var(--r-lg);min-height:640px;display:flex;align-items:center;color:#fff;
  background:radial-gradient(80% 90% at 100% 50%,#2E2E36,#18181C 70%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mv-copy{position:relative;z-index:2;padding:72px clamp(28px,5vw,72px);max-width:620px}
.mv-copy h2{color:#fff;font-size:var(--h-l);line-height:.98;letter-spacing:-.045em}
.mv-copy p{margin:26px 0 36px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:#C9C9CF;max-width:34em}
.mv-btns{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.motiv .btn-join{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.mv-orbit{position:absolute;right:-300px;top:50%;width:900px;height:900px;margin-top:-450px;pointer-events:none}
.mv-ring{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);border-radius:50%;border:2px dotted rgba(255,255,255,.2);animation:mvspin var(--t) linear infinite;animation-play-state:paused}
.mv-ring i{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateX(calc(var(--d) / 2))}
.mv-ring b{position:absolute;left:-40px;top:-40px;width:80px;height:80px;border-radius:50%;background:#26262C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 12px 24px rgba(0,0,0,.35);display:grid;place-items:center;transform:rotate(calc(-1 * var(--a)));animation:mvspin var(--t) linear infinite reverse;animation-play-state:paused}
.mv-ring img{width:62px;height:62px}
.motiv.on .mv-ring,.motiv.on .mv-ring b{animation-play-state:running}
@keyframes mvspin{to{rotate:360deg}}
.mv-core{position:absolute;left:50%;top:50%;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;background:radial-gradient(closest-side,rgba(238,106,44,.35),transparent);display:grid;place-items:center}
.mv-key{width:136px;height:136px;border-radius:32px;display:grid;place-items:center;background:linear-gradient(180deg,#3A3A41,#25252A);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -5px 0 rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.45)}
.mv-key svg{width:86px;height:86px}
.mv-key .k2,.mv-key .k8{transform-box:fill-box;transform-origin:center}
.motiv.on .mv-key .k8{animation:mvk8 6s var(--ease-out) infinite}
.motiv.on .mv-key .k2{animation:mvk2 6s var(--ease-out) infinite}
@keyframes mvk8{0%,8%,100%{transform:none}3%{transform:scale(.62)}}
@keyframes mvk2{0%,6%,12%,19%,100%{transform:none}9%,15%{transform:scale(.6)}}
@media (max-width:1000px){.mv-orbit{right:-420px;opacity:.55}}
@media (max-width:760px){
  .mv-card{display:block;min-height:0}
  .mv-copy{padding:48px 24px 0}
  .mv-orbit{position:relative;right:auto;top:auto;margin:24px auto -456px;transform:scale(.5);transform-origin:50% 0;opacity:1;left:50%;translate:-50% 0}
}
@media (prefers-reduced-motion:reduce){.mv-ring,.mv-ring b{animation:none}}

/* the face: one chubby, dialpad-shaped eye-smile (눈웃음) symbol, #kface in index.html. Body takes `color`, features take --f,
   blush takes --cheek. */
.kface-defs{position:absolute;width:0;height:0;overflow:hidden}

/* how we work: a charcoal card (with the hero blue and pink as soft color) holding the copy on the left and a friendly 3D
   robot on the right (assets/meet.js). A soft spotlight follows the pointer across the card. */
.meet{padding-block:40px 110px;border-top:0!important}
.meet-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);min-height:560px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;color:#fff;
  background:radial-gradient(45% 60% at 0% 100%,rgba(49,36,221,.45),transparent 70%),radial-gradient(40% 50% at 100% 0%,rgba(255,61,139,.22),transparent 70%),#1F1F23;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.meet-spot{position:absolute;left:-180px;top:-180px;width:360px;height:360px;border-radius:50%;z-index:-1;pointer-events:none;opacity:0;
  background:radial-gradient(closest-side,rgba(200,190,255,.32),rgba(160,77,255,.12) 55%,transparent);filter:blur(24px);transition:opacity .3s ease}
.meet-card.lit .meet-spot{opacity:1}
.meet-copy{position:relative;z-index:2;padding:64px clamp(28px,5vw,72px)}
.meet-copy h2{color:#fff;font-size:var(--h-l);line-height:.98;letter-spacing:-.045em;max-width:12ch}
.meet-copy h2 em{color:#CFC8FF}
.meet-copy p{margin:24px 0 34px;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#C9C9CF;max-width:32em}
.meet-btns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.meet .btn-join{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
/* secondary action next to a tile button: an underlined link (contact "Email us", and the copy button) */
.alt-link,.copybtn{color:inherit;font:600 18px/1.3 var(--sans);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent)}
.alt-link:hover,.copybtn:hover{text-decoration-color:currentColor}
.meet-3d{position:relative;align-self:stretch;min-height:420px}
.meet-canvas{position:absolute;inset:0;width:100%!important;height:100%!important;opacity:0;transition:opacity .8s ease;pointer-events:none}
.meet-3d.ready .meet-canvas{opacity:1}
.meet-fallback{position:absolute;inset:0;margin:auto;width:min(62%,340px);height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.4));transition:opacity .5s ease;animation:bob 6s var(--ease-in-out) infinite alternate}
.meet-3d.ready .meet-fallback{opacity:0}
@media (max-width:900px){.meet-card{grid-template-columns:1fr}.meet-copy{padding:48px 24px 8px}.meet-3d{min-height:380px}}
@media (prefers-reduced-motion:reduce){.meet-canvas,.meet-fallback,.meet-spot{transition:none}.meet-fallback{animation:none}}

/* booking popup: the Google appointment schedule inside a rounded sheet over a dimmed page */
.book-dlg{width:min(860px,calc(100vw - 32px));height:min(760px,calc(100svh - 48px));padding:0;border:0;border-radius:var(--r-lg);background:#fff;color:var(--ink);box-shadow:0 40px 80px -30px rgba(20,20,40,.45);overflow:hidden}
.book-dlg[open]{display:flex;flex-direction:column;animation:bdin .35s var(--ease-out)}
.book-dlg::backdrop{background:rgba(20,20,30,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
@keyframes bdin{from{opacity:0;transform:translateY(12px) scale(.98)}}
.bd-head{display:flex;justify-content:space-between;align-items:center;padding:18px 20px 14px 26px;border-bottom:1px solid var(--line)}
.bd-head b{font-size:19px}
.bd-x{width:40px;height:40px;border-radius:50%;border:0;background:var(--fog);font-size:26px;line-height:1;cursor:pointer;color:var(--ink)}
.bd-x:hover{background:#E6E6E6}
.bd-body{flex:1;min-height:0}
.bd-body iframe{display:block;width:100%;height:100%;border:0}
.bd-note{margin:0;padding:10px 26px 14px;font-size:14px;color:var(--stone);max-width:none}
.bd-open{color:inherit;font-weight:600}
@media (prefers-reduced-motion:reduce){.book-dlg[open]{animation:none}}

/* footer: the brand with a "Start today" tile, three short link columns, a giant EIGHT TWO TWO in the logo's typeface
   (cropped by the page edge like the old 8), then the small print */
.site-foot{background:#F3F3F1;padding-top:88px;overflow:hidden;font-size:16px;color:var(--ink)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
.foot-brand img{height:58px;width:auto}
.foot-brand p{margin:20px 0 26px;max-width:28ch;color:var(--stone)}
.foot-col{display:flex;flex-direction:column;gap:12px}
.foot-col b{font-size:14px;color:var(--stone);font-weight:600;margin-bottom:4px}
.foot-col a{text-decoration:none;font-weight:600}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-word{margin-top:80px;font-family:var(--display);font-weight:800;font-stretch:62%;font-size:clamp(44px,16.8vw,320px);line-height:.78;letter-spacing:-.01em;text-align:center;white-space:nowrap;color:var(--ink);user-select:none}
/* the footer wordmark dials: letters roll up one by one (each in its own clipped key), then EIGHT, TWO, TWO light in keylight
   orange and press in turn, like the 22. Runs once when it comes into view and again on hover (site.js adds .in and .dial). */
.foot-word .fw{display:inline-block;transform-origin:50% 100%}
.fl{position:relative;display:inline-block;overflow:hidden;padding:.06em 0;margin:-.06em 0;vertical-align:top}
.fl i,.fl b{display:block;font-style:normal;font-weight:800}
.fl b{position:absolute;left:0;top:.06em;color:#E8602C;opacity:0}
.js .foot-word.split .fl>i,.js .foot-word.split .fl>b{transform:translateY(110%);transition:transform .9s var(--ease-out) var(--ld,0s)}
.js .foot-word.split.in .fl>i,.js .foot-word.split.in .fl>b{transform:none}
.foot-word.dial .fw{animation:keypress .9s var(--ease-out) var(--wd,0s)}
.foot-word.dial .fl b{animation:keylight 1.8s ease-out var(--wd,0s)}
.foot-word .fw:nth-child(1){--wd:0s}.foot-word .fw:nth-child(2){--wd:.45s}.foot-word .fw:nth-child(3){--wd:.9s}
@media (prefers-reduced-motion:reduce){.js .foot-word.split .fl>i,.js .foot-word.split .fl>b{transform:none;transition:none}.foot-word.dial .fw,.foot-word.dial .fl b{animation:none}}
.foot-base{display:flex;justify-content:space-between;gap:16px;padding-block:22px 28px;font-size:14px;color:var(--stone)}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{grid-template-columns:1fr}}

.skip{position:absolute;left:-999px;top:8px;background:#fff;padding:8px 12px;z-index:9}
.skip:focus{left:8px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* ---------- v2: emphasis, hero accordion, chapters ---------- */
h1 em,h2 em,.rule-line em{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;font-size:1.08em}

/* hero (home page only, body.home): logo and two buttons top left, headline only, the 8, and five colorful panels on the right */
.home{--pad:clamp(16px,2.8vw,40px);--acc-w:clamp(560px,50vw,820px);--col-gap:clamp(32px,3.6vw,64px)}
.home .site-head{position:absolute;inset:0 0 auto;z-index:5;background:none;border:0;pointer-events:none}
.home .site-head .wrap,.hero-acc .wrap{max-width:1600px;padding-inline:var(--pad);display:grid;grid-template-columns:minmax(0,1fr) var(--acc-w);column-gap:var(--col-gap)}
.home .site-head .wrap{padding-block:var(--pad) 0}
.home .site-head .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:auto}
.home .site-nav{gap:10px}
.site-nav .btn:hover{text-decoration:none}
.btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s var(--ease-out),background-color .15s ease}
.btn.line::before,.btn.line::after{content:none}
.btn.line:hover{background:var(--fog)}

.hero-acc{padding-block:var(--pad)}
.hero-acc .wrap{align-items:stretch}
.hero-acc .copy{position:relative;max-width:none;display:flex;flex-direction:column;justify-content:center;padding-block:110px clamp(150px,30vh,300px)}
.hero-acc h1{position:relative;z-index:1;font-size:clamp(40px,4.7vw,80px);line-height:1.02;letter-spacing:-.035em;max-width:13ch;margin:0}

/* who it's for, right under the headline (12 Nov: both reviews and Steve) */
.hero-acc .hero-sub{position:relative;z-index:1;margin:24px 0 0;max-width:31ch;font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--stone)}

/* sticky header: a copy of the header bar that slides down when you scroll up past the hero, and away when you scroll down
   (site.js builds it). The page itself never shifts. */
.stick-bar{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 1px 0 rgba(20,20,20,.08);transform:translateY(-110%);transition:transform .35s var(--ease-out)}
.stick-bar.show{transform:none}
.stick-bar .wrap{max-width:1600px;padding-inline:clamp(16px,2.8vw,40px)}
.stick-bar .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.stick-bar .logo img{height:36px;width:auto}
.stick-bar .site-nav{display:flex;gap:10px}
.stick-bar .site-nav .btn{padding:9px 16px;font-size:15px}
@media (prefers-reduced-motion:reduce){.stick-bar{transition:none}}

/* the 8: rises in on load, takes a pale tint of whichever panel is open, and its outline drifts against the fill with the pointer */
.eight{position:absolute;right:0;bottom:calc(-1 * var(--pad) - .26em);font-size:clamp(300px,37vw,620px);pointer-events:none;user-select:none}
.eight span{display:block;font-family:var(--display);font-weight:800;font-stretch:78%;line-height:.8;transition:transform .9s var(--ease-out),color 1.2s ease}
.e-fill{color:#EFEFEF}
.e-line{position:absolute;left:.022em;top:-.02em;color:transparent;-webkit-text-stroke:2px var(--ink)}
.js .eight{opacity:0;transform:translateY(16%)}
.js .eight.in{opacity:1;transform:none;transition:opacity .8s ease .2s,transform 1.4s var(--ease-out) .2s}

/* panels */
.acc{--strip:52px;--gap:8px;display:flex;gap:var(--gap);height:clamp(600px,calc(100svh - 2 * var(--pad)),880px)}
.pnl{--fg:#fff;--fg2:rgba(255,255,255,.84);position:relative;isolation:isolate;flex:0 0 var(--strip);min-width:0;border-radius:28px;overflow:hidden;cursor:pointer;background:var(--c1);color:var(--fg);transition:flex-grow .7s var(--ease-out)}
.pnl.is-open{flex-grow:1;cursor:default}
.pnl:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.p-blue{--c1:#3124DD;--c2:#A04DFF;--c3:#FF8AD8;--c4:#1E4FF0}
.p-pink{--c1:#D3175C;--c2:#FF7A45;--c3:#FFA6D0;--c4:#9C127C}
.p-green{--c1:#087A4C;--c2:#35D27F;--c3:#D2F56C;--c4:#0A5A6B}
.p-sun{--c1:#FFC020;--c2:#FF8A1F;--c3:#FFF07E;--c4:#FF7AA8;--fg:var(--ink);--fg2:rgba(20,20,20,.78)}
.p-teal{--c1:#08707F;--c2:#2CC9B6;--c3:#86ECCB;--c4:#2D55D6}

/* soft color fields that drift while a panel is open */
.pnl-mesh{position:absolute;top:0;bottom:0;left:0;width:var(--open,100%);z-index:-1;overflow:hidden;pointer-events:none}
.pnl-mesh i{position:absolute;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,var(--b),transparent);animation:drift 16s var(--ease-in-out) infinite alternate paused}
.pnl.play .pnl-mesh i{animation-play-state:running}
.pnl-mesh i:nth-child(1){--b:var(--c2);width:130%;right:-62%;top:-48%}
.pnl-mesh i:nth-child(2){--b:var(--c3);width:78%;right:-28%;top:4%;animation-duration:19s;animation-direction:alternate-reverse}
.pnl-mesh i:nth-child(3){--b:var(--c4);width:120%;left:-58%;bottom:-48%;animation-duration:22s}
.pnl-mesh::after{content:"";position:absolute;width:170%;aspect-ratio:1;left:-36%;top:44%;border-radius:47% 53% 50% 50%;box-shadow:inset 0 40px 70px -34px rgba(255,255,255,.55);transform:rotate(-14deg)}
@keyframes drift{to{transform:translate(-9%,7%) scale(1.14)}}

.pnl-v{position:absolute;bottom:26px;left:calc(var(--strip) / 2);transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;white-space:nowrap;font-weight:700;font-size:16px;letter-spacing:-.005em;z-index:3;transition:opacity .25s ease .3s}
.pnl.is-open .pnl-v{opacity:0;transition-delay:0s}
.pnl-body{position:absolute;top:0;bottom:0;left:0;width:var(--open,100%);padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:18px;opacity:0;transition:opacity .2s ease;z-index:2}
.pnl.is-open .pnl-body{opacity:1;transition:opacity .3s ease .15s}
.pnl-body>:not(.pnl-obj){position:relative;z-index:2}
.pnl-body h2{font-size:clamp(30px,2.6vw,42px);line-height:1.02;letter-spacing:-.035em;max-width:11ch}
.pnl-foot{margin:0;font-size:15px;line-height:1.45;max-width:34ch;color:var(--fg2)}

/* the 3D object: swings in when the panel opens, floats, and tilts toward the pointer */
.pnl-obj{position:absolute;top:24px;right:12px;width:min(60%,320px);aspect-ratio:1;z-index:1;perspective:800px;pointer-events:none}
.pnl-obj .tilt{display:block;width:100%;height:100%;transition:transform .5s var(--ease-out)}
.pnl-obj img{display:block;width:100%;height:auto;filter:drop-shadow(0 22px 26px rgba(0,0,0,.2));animation:bob 6s var(--ease-in-out) infinite alternate paused}
.pnl.play .pnl-obj img{animation-play-state:running}
@keyframes bob{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-14px) rotate(2deg)}}
.js .pnl .pnl-obj{opacity:0;transform:perspective(800px) translateY(28px) rotateX(18deg) rotateY(-26deg) scale(.9);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .pnl-obj{opacity:1;transform:none;transition:opacity .5s var(--ease-out) .15s,transform 1.1s var(--ease-out) .15s}

/* 4: mascot faces for how people feel about you, at different depths so they separate when the panel tilts */
.faces .tilt{transform-style:preserve-3d}
.faces .face{position:absolute;display:block;transform:translateZ(var(--z))}
.faces .f1{--z:-20px;--fd:.4s;width:50%;left:0;top:36%}
.faces .f2{--z:-34px;--fd:.55s;width:44%;left:54%;top:2%}
.faces .f3{--z:40px;--fd:.25s;width:62%;left:28%;top:30%}
.faces .f1 img{animation-duration:5.2s;animation-delay:-1.4s}
.faces .f2 img{animation-duration:6.8s;animation-delay:-3s}
.js .pnl .faces .face{opacity:0;transform:translateZ(var(--z)) translateY(18px) scale(.86);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .faces .face{opacity:1;transform:translateZ(var(--z));transition:opacity .4s var(--ease-out) var(--fd),transform .7s var(--ease-out) var(--fd)}
/* 1: subscriptions */
.pnl-swaps{list-style:none;margin:0;padding:0}
.pnl-swaps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:16px;align-items:center;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.26)}
.pnl-swaps s{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:34px;line-height:1;color:rgba(255,255,255,.5);text-decoration:none;position:relative;justify-self:start}
.pnl-swaps s::after{content:"";position:absolute;left:-3%;right:-3%;top:46%;height:3px;background:#fff}
.pnl-swaps span{font-size:15px;font-weight:600;line-height:1.35}
/* 2: agents */
.pnl-drafts{display:grid;gap:10px}
.dr{position:relative;background:#fff;color:var(--ink);border-radius:14px;padding:14px 16px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.dr b{font-size:13px;letter-spacing:.02em}
.dr i{display:block;height:7px;border-radius:4px;background:#E6E6E6}
.dr .w90{width:90%}.dr .w80{width:80%}.dr .w75{width:75%}.dr .w70{width:70%}.dr .w60{width:60%}
.ok{position:absolute;top:11px;right:12px;font-style:normal;font-size:12px;font-weight:700;line-height:1;background:var(--ink);color:#fff;border-radius:999px;padding:5px 9px;transform-origin:right center}
/* 3: websites */
.pnl-chart{background:#fff;color:var(--ink);border-radius:16px;padding:16px 18px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.pnl-chart .pk{font-size:12px;font-weight:700;letter-spacing:.03em;color:var(--stone)}
.bars{display:flex;align-items:flex-end;gap:5px;height:96px;padding-top:4px}
.bars i{flex:1;height:calc(var(--h) * 1%);background:var(--ink);border-radius:2px 2px 0 0;transform-origin:bottom center}
.pnl-chart .cap{font-size:12px;color:var(--stone);font-weight:600}
/* 4: listening */
.pnl-src{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pnl-src li{display:grid;grid-template-columns:80px 1fr;gap:14px;align-items:center;font-size:14px;font-weight:700;padding:12px 14px;background:rgba(255,255,255,.58);border-radius:12px}
.pnl-src li::after{content:"";height:7px;border-radius:4px;background:rgba(20,20,20,.2);transform-origin:left center}
.pnl-src li:nth-child(2)::after{width:70%}.pnl-src li:nth-child(3)::after{width:85%}.pnl-src li:nth-child(4)::after{width:60%}
.sum{background:#fff;color:var(--ink);border-radius:14px;padding:16px 18px;display:grid;gap:8px;box-shadow:0 16px 30px -16px rgba(0,0,0,.26)}
.sum p{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.35}
.sum i{display:block;height:7px;border-radius:4px;background:#E6E6E6;width:90%}
.sum i+i{width:62%}
/* 5: training */
.pnl-rules{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pnl-rules div{background:#fff;color:var(--ink);border-radius:14px;padding:16px;display:grid;gap:9px;align-content:start;box-shadow:0 16px 30px -16px rgba(0,0,0,.32)}
.pnl-rules b{font-size:13px;letter-spacing:.02em;margin-bottom:2px}
.pnl-rules span{font-size:15px;font-weight:600;display:flex;gap:8px;align-items:baseline}
.pnl-rules div:first-child span::before{content:"✓";font-weight:800}
.pnl-rules div:last-child span::before{content:"✓";font-weight:800}

/* panel content plays in each time a panel opens (.play, set by site.js). Without JS it simply shows. */
.js .pnl .in-up{opacity:0;transform:translateY(12px);transition:opacity .15s ease,transform .15s ease}
.js .pnl .in-left{opacity:0;transform:translateX(-14px);transition:opacity .15s ease,transform .15s ease}
.js .pnl .in-right{opacity:0;transform:translateX(18px);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play :is(.in-up,.in-left,.in-right){opacity:1;transform:none;transition:opacity .45s var(--ease-out) var(--d,.2s),transform .6s var(--ease-out) var(--d,.2s)}
.js .pnl .draw,.js .pnl .pnl-src li::after,.js .pnl .pnl-swaps s::after{transform:scaleX(0);transform-origin:left center;transition:transform .15s ease}
.js .pnl.play .draw,.js .pnl.play .pnl-src li::after,.js .pnl.play .pnl-swaps s::after{transform:none;transition:transform .5s var(--ease-out) var(--dd,.4s)}
/* 1: each tool gets struck through, dims, then its replacement slides in */
.pnl-swaps li:nth-child(1){--r:.3s}.pnl-swaps li:nth-child(2){--r:.5s}.pnl-swaps li:nth-child(3){--r:.7s}.pnl-swaps li:nth-child(4){--r:.9s}
.pnl-swaps li{--d:var(--r)}
.pnl-swaps s::after{--dd:calc(var(--r) + .3s)}
.pnl-swaps span{--d:calc(var(--r) + .45s)}
.js .pnl .pnl-swaps s{color:#fff;transition:color .15s ease}
.js .pnl.play .pnl-swaps s{color:rgba(255,255,255,.5);transition:color .3s ease calc(var(--r) + .4s)}
.pnl-swaps~.pnl-foot{--d:1.6s}
/* 2: drafts arrive, lines write themselves, then each is marked ready */
.dr:nth-child(1){--r:.3s}.dr:nth-child(2){--r:.6s}.dr:nth-child(3){--r:.9s}
.dr{--d:var(--r)}
.dr i:nth-of-type(1){--dd:calc(var(--r) + .2s)}.dr i:nth-of-type(2){--dd:calc(var(--r) + .32s)}
.js .pnl .ok{opacity:0;transform:scale(.92);transition:opacity .15s ease,transform .15s ease}
.js .pnl.play .ok{opacity:1;transform:none;transition:opacity .3s var(--ease-out) calc(var(--r) + .6s),transform .3s var(--ease-out) calc(var(--r) + .6s)}
.pnl-drafts~.pnl-foot{--d:1.7s}
/* 3: the chart grows left to right */
.pnl-chart{--d:.35s}
.js .pnl .bars i{transform:scaleY(0);transition:transform .15s ease}
.js .pnl.play .bars i{transform:none;transition:transform .5s var(--ease-out) calc(.6s + var(--i) * 45ms)}
.pnl-chart .cap{--d:1.3s}
/* 4: sources come in, then the one-page summary */
.pnl-src li:nth-child(1){--r:.3s}.pnl-src li:nth-child(2){--r:.42s}.pnl-src li:nth-child(3){--r:.54s}.pnl-src li:nth-child(4){--r:.66s}
.pnl-src li{--d:var(--r);--dd:calc(var(--r) + .2s)}
.sum{--d:1.1s}
.sum i:nth-of-type(1){--dd:1.35s}.sum i:nth-of-type(2){--dd:1.47s}
/* 5: the do and don't lists check in one by one */
.pnl-rules div:nth-child(1){--d:.3s}.pnl-rules div:nth-child(2){--d:.42s}
.pnl-rules div:nth-child(1) span:nth-of-type(1){--d:.55s}.pnl-rules div:nth-child(1) span:nth-of-type(2){--d:.67s}.pnl-rules div:nth-child(1) span:nth-of-type(3){--d:.79s}
.pnl-rules div:nth-child(2) span:nth-of-type(1){--d:1s}.pnl-rules div:nth-child(2) span:nth-of-type(2){--d:1.12s}.pnl-rules div:nth-child(2) span:nth-of-type(3){--d:1.24s}
.pnl-rules~.pnl-foot{--d:1.6s}
@media (prefers-reduced-motion:reduce){.pnl-mesh i,.pnl-obj img{animation:none}}

@media (max-width:1240px){.pnl-swaps s{font-size:28px}.pnl-body{padding:24px}}
/* narrower screens: header back in the flow, headline above the panels */
@media (max-width:1080px){
  .home .site-head{position:static}
  .home .site-head .wrap{display:block}
  .hero-acc .wrap{grid-template-columns:1fr;row-gap:28px}
  .hero-acc .copy{padding-block:64px 40px;overflow:hidden}
  .hero-acc h1{font-size:clamp(38px,7vw,68px);max-width:12ch}
  .eight{font-size:min(56vw,420px);right:-.04em;bottom:-.3em}
  .e-line{-webkit-text-stroke-width:1.5px}
  .acc{height:640px}
}
/* phones: panels stack, the open one grows */
@media (max-width:760px){
  .hero-acc .copy{padding-bottom:150px!important}
  .home .site-nav .btn{padding:9px 14px;font-size:14px}
  .home .site-head .logo img{height:40px}
  .hero-acc .copy{padding-block:48px 28px}
  .acc{flex-direction:column;height:auto}
  .pnl{flex:none;height:60px;border-radius:22px;transition:height .6s var(--ease-out)}
  .pnl.is-open{height:560px}
  .pnl-v{writing-mode:horizontal-tb;transform:none;top:0;bottom:auto;left:22px;height:60px;display:flex;align-items:center}
  .pnl-body{width:100%;padding:22px}
  .pnl-obj{width:108px;top:10px;right:8px}
}

.chapters{position:relative}
.chapter{position:sticky;top:0;min-height:100vh;display:flex;align-items:center;border-top:0!important;padding-block:80px}
.ch-dark{background:var(--ink);color:#fff}
.ch-fog{background:var(--fog)}
.ch-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:center;width:100%}
.ch-n{font-size:120px;display:block;margin-bottom:18px}
.ch-dark .ch-n{color:#fff}
.ch-tag{font-size:14px;font-weight:700;color:var(--stone);margin-bottom:10px}
.ch-dark .ch-tag{color:#A8A8A8}
.ch-copy h2{margin-bottom:16px}
.ch-line{font-size:19px;color:var(--stone);max-width:36ch;margin-bottom:26px}
.ch-dark .ch-line{color:#CFCFCF}
.ch-stats{list-style:none;padding:0;margin:0 0 28px;display:flex;gap:40px;flex-wrap:wrap;font-size:14px;font-weight:600;color:var(--stone)}
.ch-stats .num{display:block;font-size:56px;color:var(--ink);margin-bottom:6px}
.swaps p{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:20px;align-items:baseline;padding:18px 0;border-bottom:1px solid #333;margin:0;max-width:none}
.swaps s{font-family:var(--display);font-weight:800;font-stretch:78%;font-size:clamp(30px,3.4vw,46px);line-height:1;color:#6F6F6F;text-decoration-thickness:3px;text-decoration-color:#fff}
.swaps span{font-size:17px;color:#fff;font-weight:600}
.swaps .rule-line{display:block;border:0;padding-top:30px;font-size:24px;font-weight:700;color:#fff}
.scroller{display:block;aspect-ratio:16/11;border:1px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;box-shadow:8px 8px 0 var(--ink)}
.scroller span{display:block;width:100%;height:100%;background-size:100% auto;background-repeat:no-repeat;background-position:50% 0;animation:scrollshot 26s ease-in-out infinite alternate}
.scroller:hover span{animation-play-state:paused}
@keyframes scrollshot{0%,8%{background-position:50% 0}92%,100%{background-position:50% 100%}}
@media (max-width:900px){.chapter{position:relative;min-height:0}.ch-grid{grid-template-columns:1fr;gap:40px}.ch-n{font-size:84px}}

/* case study pages */
.cs-hero{padding-block:96px 64px;border-top:0}
.cs-hero .ch-tag{margin-bottom:14px}
.cs-hero h1{max-width:18ch;margin-bottom:18px}
.cs-body{display:grid;grid-template-columns:220px 1fr;gap:56px;padding-block:72px}
.cs-body h2{font-size:28px;margin-bottom:14px}
.cs-side{position:sticky;top:24px;align-self:start;font-size:14px;color:var(--stone);display:grid;gap:18px}
.cs-side b{display:block;color:var(--ink);font-size:15px}
.cs-main>div{margin-bottom:52px}
.cs-main ul,.cs-main ol{padding-left:20px;margin:0;max-width:62ch}
.cs-main li{margin:8px 0}
.cs-stats{display:flex;gap:48px;flex-wrap:wrap;margin:6px 0 4px}
.cs-stats div{font-size:14px;font-weight:600;color:var(--stone);max-width:180px}
.cs-stats .num{display:block;font-size:64px;color:var(--ink);margin-bottom:8px}
.callout{border:2px solid var(--ink);border-radius:8px;padding:22px 26px;font-size:18px;max-width:62ch}
.cs-shot{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px}
.next{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
@media (max-width:820px){.cs-body{grid-template-columns:1fr;gap:28px}.cs-side{position:static;grid-template-columns:1fr 1fr}}

/* reveal on scroll */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.scroller span{animation:none}.js .reveal{opacity:1;transform:none}}
.swaps s{text-decoration:none;position:relative;display:inline-block}
.swaps s::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;height:3px;background:#fff;transform:translateY(-50%)}
.swaps s{justify-self:start;width:max-content}
.swaps s{color:#8A8A8A}
.q-next{align-self:center}