/* anthonyarlene.com, v3.
   One family (Instrument Sans, variable weight and width), four colours
   (white, black, silver, forest green), big type, warm photographs.
   Body text never drops below 18px. Every animation has a static state. */

:root{
  --white:#ffffff;
  --paper:#f4f4f2;
  --black:#0b0b0b;
  --ink:#111111;
  --ink-2:#3b3b3b;
  --ink-3:#555555;
  --silver:#c6c8ca;
  --silver-2:#e2e3e5;
  --silver-3:#f0f0f1;
  --green:#1e4d3a;
  --green-deep:#143326;
  --green-tint:#e6efe9;
  --green-light:#8fcfae;
  --on-dark:#f5f5f5;
  --on-dark-2:#cfd2d4;
  --on-dark-3:#9ea2a5;
  --font:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --gut:clamp(20px,5vw,80px);
  --max:1440px;
  --edge:max(var(--gut),calc((100vw - var(--max)) / 2));
  --radius:28px;
  --radius-s:18px;
  --nav-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 24px);background:var(--white)}
body{margin:0;background:var(--white);color:var(--ink);font:400 19px/1.6 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img,picture,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.14em;text-decoration-thickness:from-font}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
dl,dd{margin:0}
ul{margin:0;padding:0}
:focus-visible{outline:3px solid var(--green);outline-offset:3px;border-radius:4px}
.bg-black :focus-visible,.foot :focus-visible{outline-color:var(--green-light)}
.bg-green :focus-visible{outline-color:#fff}
::selection{background:var(--green);color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
main{padding-top:var(--nav-h)}

@media (max-width:640px){
  body{font-size:18px}
  :root{--nav-h:64px}
}

/* ---------- Type ---------- */
h1,h2,h3,h4{margin:0;font-weight:650;letter-spacing:-.03em;line-height:1.02;color:var(--ink);text-wrap:balance}
.t-hero{font-size:clamp(46px,7vw,108px);line-height:.96;letter-spacing:-.04em}
.t-1{font-size:clamp(38px,5.2vw,76px);line-height:1;letter-spacing:-.035em}
.t-2{font-size:clamp(32px,3.8vw,56px);line-height:1.04;letter-spacing:-.03em}
.t-3{font-size:clamp(25px,2.4vw,34px);line-height:1.15;letter-spacing:-.02em;font-weight:600}
.lede{font-size:clamp(20px,1.5vw,23px);line-height:1.5;color:var(--ink-2);max-width:36ch;text-wrap:pretty}
.eyebrow{font-size:18px;font-weight:600;color:var(--green);margin:0 0 20px;line-height:1.3}
.measure{max-width:60ch}
.note{font-size:18px;color:var(--ink-3);max-width:46ch;margin-top:20px}

.bg-black,.bg-green{color:var(--on-dark)}
.bg-black h1,.bg-black h2,.bg-black h3,.bg-green h1,.bg-green h2,.bg-green h3{color:#fff}
.bg-black .lede,.bg-black .note{color:var(--on-dark-2)}
.bg-green .lede{color:#dbe8df}
.bg-black .eyebrow{color:var(--green-light)}
.bg-green .eyebrow{color:#cfe6d7}

/* ---------- Layout ---------- */
.wrap{width:min(100% - 2 * var(--gut),var(--max));margin-inline:auto}
.sec{padding-block:clamp(72px,9vw,136px)}
.sec-tight{padding-block:clamp(56px,7vw,96px)}
.bg-paper{background:var(--paper)}
.bg-black{background:var(--black)}
.bg-green{background:var(--green)}
.sec-head{display:grid;gap:20px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p{font-size:clamp(19px,1.4vw,22px);line-height:1.5;color:var(--ink-2);margin:0;max-width:46ch;text-wrap:pretty}
@media (min-width:900px){
  .sec-head{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:end;gap:48px}
  .sec-head p{justify-self:end}
}

/* ---------- Buttons and links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:0 30px;border-radius:999px;background:var(--green);color:#fff;font:600 18px/1.1 var(--font);text-decoration:none;border:2px solid var(--green);cursor:pointer;text-align:center;transition:background .35s var(--ease),border-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease)}
.btn:hover{background:var(--green-deep);border-color:var(--green-deep)}
.btn:active{transform:scale(.98)}
.btn svg{flex:none;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.btn-light:hover{background:#fff;border-color:#fff;color:var(--ink)}
.btn-sm{min-height:46px;padding:0 20px;font-size:18px}
.btn[disabled]{opacity:.6;cursor:progress}
.actions{display:flex;flex-wrap:wrap;gap:14px 16px;align-items:center;margin-top:8px}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--silver);padding-bottom:3px;transition:border-color .3s,color .3s}
.tlink:hover{border-color:var(--green);color:var(--green)}
.tlink svg{transition:transform .4s var(--ease)}
.tlink:hover svg{transform:translate(3px,-3px)}
.bg-black .tlink{color:#fff;border-color:#3a3a3a}
.bg-black .tlink:hover{color:var(--green-light);border-color:var(--green-light)}

/* ---------- Status chip ---------- */
.status{display:inline-flex;align-items:center;gap:10px;background:var(--green-tint);color:var(--green);font-weight:600;font-size:18px;line-height:1.2;border-radius:999px;padding:10px 16px;margin:18px 0 0}
.actions .status{margin:0}
.status .dot{width:10px;height:10px;border-radius:50%;background:var(--green);flex:none}

/* ---------- Header ---------- */
.skip{position:absolute;left:16px;top:-120px;z-index:100;background:var(--ink);color:#fff;padding:14px 20px;border-radius:999px;font-weight:600;text-decoration:none;font-size:18px}
.skip:focus{top:14px}
/* The frosted background lives on a pseudo-element: a backdrop-filter on the
   header itself would become the containing block for the fixed mobile menu. */
.top{position:fixed;inset:0 0 auto;z-index:50;height:var(--nav-h);border-bottom:1px solid transparent;transition:border-color .3s}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);transition:background .3s}
.top.is-scrolled{border-color:var(--silver-2)}
.top.is-scrolled::before{background:rgba(255,255,255,.96)}
/* Centred nav: Workshops, [wordmark], Systems, with the Say hello pill pinned
   to the right edge of the bar. A three-column grid keeps the wordmark on the
   exact centre line whatever the two sides weigh; the nav itself is
   display:contents on desktop so its two lists sit either side of the mark,
   and the right list stretches to the edge so the pill can sit at its end.
   On mobile the nav becomes the full-screen panel. */
.top-in{height:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:clamp(28px,3.2vw,56px)}
.mark{grid-column:2;grid-row:1;justify-self:center;font-weight:700;font-size:17px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--ink);white-space:nowrap;padding:8px 2px;transition:color .3s}
.mark:hover{color:var(--green)}
.menu{display:contents}
.menu ul{list-style:none;display:flex;align-items:center;gap:clamp(22px,2.6vw,44px);grid-row:1}
.menu-l{grid-column:1;justify-self:end}
.menu-r{grid-column:3;justify-self:stretch}
.menu-cta{margin-left:auto;white-space:nowrap}
.menu a:not(.btn){display:inline-block;white-space:nowrap;font-size:18px;font-weight:500;color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:2px solid transparent;transition:border-color .3s,color .3s}
.menu a:not(.btn):hover{color:var(--green)}
.menu a[aria-current="page"]{border-bottom-color:var(--green);color:var(--green);font-weight:600}
.burger{display:none}

@media (max-width:1060px){
  .top-in{column-gap:12px}
  .menu{display:block;position:fixed;inset:var(--nav-h) 0 0;background:#fff;padding:12px var(--gut) 40px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s;overflow:auto}
  .menu-open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
  .menu ul{flex-direction:column;align-items:stretch;gap:0;justify-self:stretch}
  .menu li{border-bottom:1px solid var(--silver-2)}
  .menu li.menu-cta{border:0;padding-top:28px;margin-left:0}
  .menu a:not(.btn){display:block;font-size:32px;font-weight:600;letter-spacing:-.02em;padding:22px 0;border-bottom:0}
  .menu .btn{width:100%;min-height:62px;font-size:19px}
  .burger{grid-column:3;grid-row:1;justify-self:end;display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:7px;width:50px;height:50px;margin-right:-8px;border:0;background:transparent;cursor:pointer;padding:0;border-radius:14px}
  .burger span{display:block;width:26px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease)}
  .menu-open .burger span:first-child{transform:translateY(4.75px) rotate(45deg)}
  .menu-open .burger span:last-child{transform:translateY(-4.75px) rotate(-45deg)}
  html.menu-open,html.menu-open body{overflow:hidden}
}

/* ---------- Home: hero ---------- */
.hero-home{display:grid;grid-template-columns:minmax(0,1fr);min-height:calc(100svh - var(--nav-h))}
.hero-home .copy{display:flex;flex-direction:column;justify-content:center;gap:26px;padding:clamp(40px,6vw,96px) var(--gut) clamp(40px,5vw,80px) var(--edge);max-width:940px}
.hero-home .copy .eyebrow{margin:0}
.hero-home .copy .actions{margin-top:10px}

/* The device slot. The Blender render (video) sits on top of a code-built
   phone; a video with no playable source paints nothing, so the placeholder
   shows through, and site.js hides whichever layer is not needed. */
.hero-device{position:relative;overflow:hidden;background:var(--white);display:grid;place-items:center;--pw:clamp(176px,21vw,286px)}
/* The render is square on a near-white (#f6f6f3) backdrop: cover the tall slot
   with it and lift that backdrop to page white; the matte black phone is unmoved. */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:brightness(1.05);opacity:0;transition:opacity .6s var(--ease)}
html:not(.js) .hero-video,.hero-device.has-video .hero-video{opacity:1}
.hero-device.has-video .hero-video{background:var(--white)}
.hero-device.has-video .hero-ph{display:none}
.hero-device.no-video .hero-video{display:none}
.hero-ph{position:relative;width:100%;height:100%;display:grid;place-items:center;perspective:1800px}
.ph-phone{position:relative;width:var(--pw);aspect-ratio:1/2.06;border-radius:calc(var(--pw) * .15);padding:calc(var(--pw) * .036);background:linear-gradient(145deg,#232323,#0b0b0b 46%,#181818);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 1px 1px 0 rgba(255,255,255,.05),0 70px 90px -50px rgba(0,0,0,.55),0 28px 40px -30px rgba(0,0,0,.4);transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(4deg)}
.ph-phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#1d1d1d;box-shadow:0 0 0 1px #2c2c2c;transform:translateZ(-14px)}
.ph-phone::after{content:"";position:absolute;inset:0;border-radius:inherit;background:#101010;transform:translateZ(-7px)}
.ph-screen{position:relative;z-index:1;height:100%;border-radius:calc(var(--pw) * .114);background:#000;overflow:hidden;color:#fff;font-size:calc(var(--pw) * .052);line-height:1.3;letter-spacing:-.005em}
.ph-screen::before{content:"";position:absolute;z-index:2;top:calc(var(--pw) * .04);left:50%;width:calc(var(--pw) * .03);height:calc(var(--pw) * .03);margin-left:calc(var(--pw) * -.015);border-radius:50%;background:#0a0a0a;box-shadow:inset 0 0 0 1.5px #262626}
.ph-state{position:absolute;inset:0;padding:17% 9% 10%;display:flex;flex-direction:column;opacity:0}
.ph-cap{opacity:1}
.ph-k{margin:0;font-size:.82em;font-weight:600;color:var(--green-light);letter-spacing:.01em}
.ph-n{margin:6px 0 0;font-size:1.3em;font-weight:650;letter-spacing:-.02em;line-height:1.1}
.ph-capcard{margin-top:auto;background:#1b1b1b;border-radius:.9em;padding:.75em .85em .8em;display:grid;gap:.15em;font-weight:500;font-size:1.02em;line-height:1.3}
.ph-call{align-items:center;text-align:center;justify-content:center;gap:0}
.ph-call-k{display:grid;justify-items:center}
.ph-call-k span{grid-area:1/1}
.ph-call-k .k1{opacity:0}
.ph-ans{display:grid;place-items:center;width:3.4em;height:3.4em;border-radius:50%;background:var(--green);margin-top:1.9em}
.ph-ans svg{width:1.6em;height:1.6em}
.ph-wave{justify-content:center}
.ph-wave .ph-n{font-size:1.1em}
.ph-bars{display:flex;align-items:center;gap:3px;height:5.4em;margin:1.3em 0 1.1em}
.ph-bars span{flex:1;height:var(--h,50%);background:#fff;border-radius:2px;transform-origin:center}
.ph-shadow{position:absolute;left:50%;top:calc(50% + var(--pw) * 1.03 + 6px);width:calc(var(--pw) * .84);height:calc(var(--pw) * .09);transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.26),rgba(0,0,0,0) 68%);filter:blur(3px)}
@media (max-width:899px){
  .hero-device{height:min(64svh,540px)}
  .hero-home .copy{padding-left:var(--gut)}
}
@media (min-width:900px){
  .hero-home{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
  .hero-device{min-height:calc(100svh - var(--nav-h));max-height:1080px}
}

/* ---------- Statement bands ---------- */
.mission-grid{display:grid;gap:36px}
.mission-grid .big{font-size:clamp(32px,4.4vw,64px);font-weight:650;letter-spacing:-.035em;line-height:1.02;max-width:20ch;color:#fff}
.mission-grid p{font-size:clamp(20px,1.55vw,24px);line-height:1.5;color:#dbe8df;max-width:46ch;text-wrap:pretty}
@media (min-width:960px){
  .mission-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:80px;align-items:end}
}

/* ---------- Home: routes ---------- */
/* Two doors, side by side: equal halves of the wrap, each a black stage over a
   paper body. Padding grows with the tile so the wider card keeps its proportions. */
.routes-grid{display:grid;gap:clamp(16px,2vw,28px)}
@media (min-width:900px){.routes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.route{display:flex;flex-direction:column;background:var(--paper);border-radius:var(--radius);overflow:hidden;text-decoration:none;color:inherit;height:100%;transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.route:hover{transform:translateY(-6px);box-shadow:0 30px 70px -36px rgba(0,0,0,.4)}
.route .vis{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--black)}
.route .body{display:flex;flex-direction:column;gap:12px;flex:1;padding:clamp(28px,2.6vw,38px) clamp(28px,2.6vw,38px) clamp(32px,2.9vw,42px)}
.route h3{font-size:clamp(30px,2.5vw,38px)}
.route p{margin:0;color:var(--ink-2);font-size:19px;line-height:1.5;text-wrap:pretty}
.route .for{color:var(--green);font-weight:600;font-size:18px}
.route .go{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:18px;font-weight:600;font-size:19px;color:var(--ink);transition:color .3s}
.route .go svg{transition:transform .4s var(--ease)}
.route:hover .go{color:var(--green)}
.route:hover .go svg{transform:translateX(6px)}

/* Line-art tiles: one stage (400 x 300), one stroke weight, one colour (white).
   The markup is the final frame; the .play animations below run from the
   first frame back to it. */
.vis-la svg{width:100%;height:100%;display:block}
.la path,.la circle{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.la .d{stroke-dasharray:1 1.04;stroke-dashoffset:0}
.la text{fill:#fff;stroke:none;font:650 16px/1 var(--font);text-anchor:middle;letter-spacing:-.015em}
.la .sy-sub{font-size:14px;font-weight:500;fill:var(--on-dark-2)}
.ws-cover{transform:scaleX(-1);transform-origin:200px 150px}
.ws-spine,.ws-page,.sy-arc,.sy-in{opacity:0}
.ws-page{transform-origin:200px 150px}
.ws-big{transform:scale(1.9);transform-origin:216px 104px;stroke-width:1.316} /* 2.5 / 1.9: the grown line keeps the shared weight */
.ws-shift{transform:translateY(14px)}
.sy-phone{transform-origin:200px 150px}

/* ---------- Home: about ---------- */
.about-grid{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:900px){.about-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:start}}
.about .portrait{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;background:var(--silver-2)}
@media (min-width:900px){.about .portrait{position:sticky;top:calc(var(--nav-h) + 24px)}}
.about .portrait img{width:100%;height:100%;object-fit:cover}
.about .text p{font-size:clamp(20px,1.45vw,23px);line-height:1.55;color:var(--ink);max-width:56ch;margin-bottom:1.1em;text-wrap:pretty}
.about .text p.first{font-size:clamp(25px,2.3vw,34px);line-height:1.28;font-weight:500;letter-spacing:-.02em;margin:28px 0 24px}

/* ---------- CTA ---------- */
.cta-grid{display:grid;gap:36px}
@media (min-width:960px){.cta-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:80px}}
.cta .lede{margin-top:24px}
.cta-side{display:grid;gap:28px;justify-items:start}
.cta .mail{font-size:clamp(24px,3.4vw,52px);font-weight:650;letter-spacing:-.035em;line-height:1.1;text-decoration:none;color:var(--ink);border-bottom:3px solid var(--green);overflow-wrap:anywhere;transition:color .3s}
.cta .mail:hover{color:var(--green)}

/* ---------- Split heroes (workshops, systems) ---------- */
.hero-split{display:grid;gap:clamp(36px,5vw,72px);align-items:center;padding-block:clamp(40px,6vw,104px)}
.hero-split h1{font-size:clamp(40px,5.4vw,80px);line-height:.98;letter-spacing:-.04em}
.hero-split .copy{display:grid;gap:26px;justify-items:start}
.hero-split .copy .eyebrow{margin:0}
.hero-split .copy .actions{margin-top:6px}
@media (min-width:960px){.hero-split{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);min-height:calc(100svh - var(--nav-h))}}

/* Tablet (workshops hero) */
.device-stage{display:grid;place-items:center;perspective:1500px;padding:16px 0}
@media (max-width:959px){.device-stage{overflow-x:clip}}
.tablet{position:relative;width:min(100%,430px);aspect-ratio:565/745;--k:1;transition:transform 1.6s var(--ease)}
/* Blender sway loop (assets/media/src/tablet_build.py, SWAY=1). site.js pins the live screen onto it every frame. */
.tablet-video{position:absolute;left:-10.442%;top:-5.772%;width:178.407%;max-width:none;height:auto;aspect-ratio:1008/912;clip-path:inset(4px 12px 16px 4px);z-index:1;filter:brightness(1.05);pointer-events:none}
.tablet .screen{position:absolute;top:0;left:0;width:402px;height:545.333px;transform-origin:0 0;transform:scale(var(--k)) matrix3d(0.9985820895522388,0,0,0,0.006756568684201216,1.0029847318336718,0,0.0000315505469673636,0,0,1,0,13.14,16.5,0,1);z-index:2;will-change:transform}
.screen{height:100%;background:#fff;border-radius:28px;overflow:hidden;padding:22px 20px 20px;display:flex;flex-direction:column;font-size:17px;color:var(--ink);line-height:1.3}
.scr-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;font-weight:600;font-size:17px}
.scr-head .back{color:var(--green)}
.scr-title{font-size:30px;font-weight:650;letter-spacing:-.03em;margin:18px 0 8px}
.textsize{display:flex;align-items:center;gap:16px;padding:14px 0 16px}
.textsize .aa{font-weight:650;font-size:44px;line-height:1;letter-spacing:-.03em;min-width:66px;transform-origin:left center}
.textsize .track{position:relative;flex:1;height:6px;border-radius:3px;background:var(--silver-2)}
.textsize .track::before{content:"";position:absolute;top:0;bottom:0;left:0;right:30%;border-radius:3px;background:var(--green)}
.textsize .track::after{content:"";position:absolute;top:50%;left:70%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:#fff;box-shadow:0 1px 5px rgba(0,0,0,.35)}
.scr-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid var(--silver-2);font-weight:500}
.tog{position:relative;flex:none;width:52px;height:32px;border-radius:16px;background:var(--green)}
.tog::after{content:"";position:absolute;top:3px;left:23px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.caption{margin-top:auto;background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px 13px;font-size:17px;line-height:1.35;font-weight:500}
.caption b{display:block;color:var(--green-light);font-weight:600;font-size:16px;margin-bottom:3px}

/* ---------- Feature blocks ---------- */
.feature{display:grid;gap:clamp(28px,4vw,72px);align-items:center;padding-block:clamp(36px,4.5vw,64px)}
.feature + .feature{border-top:1px solid var(--silver-2)}
@media (min-width:960px){
  .feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .feature.flip .media-col{order:2}
}
.feature .media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;background:var(--paper)}
.feature .media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.feature:hover .media img{transform:scale(1.03)}
.feature h3{font-size:clamp(34px,3.6vw,56px)}
.feature h3 + p{margin-top:20px}
.feature .tag{font-size:clamp(21px,1.7vw,26px);font-weight:500;line-height:1.35;letter-spacing:-.015em;color:var(--ink);margin:18px 0 14px;max-width:30ch;text-wrap:pretty}
.feature p{color:var(--ink-2);max-width:52ch;text-wrap:pretty}
.feature .actions{margin-top:26px}
.checks{list-style:none;display:grid;gap:11px;margin:22px 0 0}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:19px;line-height:1.45;color:var(--ink)}
.checks svg{flex:none;margin-top:5px;color:var(--green)}
.meta{display:grid;gap:18px;margin-top:28px;padding-top:22px;border-top:1px solid var(--silver)}
@media (min-width:560px){.meta{grid-template-columns:1.3fr 1fr}}
.meta .k{font-size:18px;color:var(--ink-3);margin:0 0 4px;font-weight:500}
.meta .v{font-size:18px;font-weight:600;margin:0;line-height:1.4;color:var(--ink)}


/* Private machine mock (systems). It grows with its content instead of clipping. */

/* ---------- Proof ---------- */
.proof-grid{display:grid;gap:clamp(16px,2vw,28px)}
@media (min-width:800px){.proof-grid{grid-template-columns:1fr 1fr}}
.proof-card{background:var(--paper);border-radius:var(--radius);padding:clamp(28px,3.2vw,48px);display:flex;flex-direction:column;gap:14px}
.proof-card .k{font-size:18px;color:var(--green);font-weight:600;margin:0}
.proof-card h3{font-size:clamp(28px,2.8vw,42px);margin-bottom:8px}
.proof-card p{color:var(--ink-2);margin:0;max-width:40ch;text-wrap:pretty}

/* ---------- Forms ---------- */
.book-grid{display:grid;gap:clamp(36px,5vw,80px)}
@media (min-width:960px){.book-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}}
.book-copy .lede{margin-top:24px}
.rates{margin-top:36px;padding-top:28px;border-top:1px solid var(--silver)}
.rates h3{margin-bottom:12px}
.rates p{color:var(--ink-2);max-width:44ch}
.rates a{font-weight:600;color:var(--ink)}
.rates a:hover{color:var(--green)}
.form-card{background:#fff;border-radius:var(--radius);padding:clamp(24px,3vw,44px);border:1px solid var(--silver-2);box-shadow:0 40px 90px -60px rgba(0,0,0,.3)}
.form{display:grid;gap:22px}
@media (min-width:640px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:8px;align-content:start}
.field label{font-size:18px;font-weight:600;color:var(--ink);line-height:1.3}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:19px;line-height:1.4;color:var(--ink);background:#fff;border:1.5px solid var(--silver);border-radius:14px;padding:14px 16px;min-height:58px;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none;margin:0}
.field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'><path d='M5 8l5 5 5-5' stroke='%23111' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 16px center;padding-right:48px;cursor:pointer}
.field textarea{min-height:150px;resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--ink-3)}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px rgba(30,77,58,.2)}
.form .btn{justify-self:start;min-width:180px}
.form-status{margin:0;font-size:18px;font-weight:600;color:var(--green);grid-column:1/-1}
.form-status:empty{display:none}
.form-status.err{color:var(--ink)}
.form.is-done{display:none}
.form-done{display:grid;gap:14px;padding:8px 0}
.form-done[hidden]{display:none}
.form-done p{color:var(--ink-2)}
.form-done a{font-weight:600;color:var(--ink)}
.hp{display:none}

.hero-sys .why{margin:6px 0 0;padding-top:24px;border-top:1px solid var(--silver-2);width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;font-size:19px;font-weight:600;color:var(--ink)}
/* Laptop turntable (same render family as the home phone) fills the hero slot. */
.sys-device{position:relative;overflow:hidden;background:var(--white);width:100%;aspect-ratio:1/1;max-height:min(70svh,640px);justify-self:center}
.sys-device .hero-video{object-fit:cover;object-position:50% 50%;transform:scale(1.4);filter:brightness(1.05)}
html:not(.js) .sys-device .hero-video,.sys-device.has-video .hero-video{opacity:1}
@media (max-width:959px){.sys-device{max-width:560px}}

/* ---------- Versan placeholder (HTML, no image yet) ---------- */
.versan-ph{aspect-ratio:5/3;display:grid;place-content:center;justify-items:center;gap:clamp(12px,1.6vw,20px);background:radial-gradient(120% 90% at 50% 40%,#151515,#0a0a0a 70%);color:#eceae6;text-align:center;padding:24px}
.vz-word{font-family:"Cormorant Garamond","Didot","Bodoni 72",Georgia,serif;font-weight:300;font-size:clamp(40px,6vw,84px);letter-spacing:.32em;margin-right:-.32em;line-height:1}
.vz-line{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:clamp(11px,.95vw,13px);letter-spacing:.28em;text-transform:lowercase;color:var(--silver)}

/* ---------- Footer ---------- */
.foot{background:var(--black);color:var(--on-dark);padding:clamp(72px,9vw,120px) 0 40px}
.foot-big{font-size:clamp(34px,4.6vw,68px);font-weight:650;letter-spacing:-.035em;line-height:1.02;max-width:17ch;margin:0 0 clamp(48px,6vw,88px);color:#fff}
.foot-grid{display:grid;gap:40px;padding-top:40px;border-top:1px solid #2a2a2a}
@media (min-width:720px){.foot-grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot h2{font-size:18px;font-weight:600;color:var(--on-dark-3);margin:0 0 16px;letter-spacing:0}
.foot ul{list-style:none;display:grid;gap:12px;justify-items:start}
.foot a{color:#fff;text-decoration:none;font-size:19px;font-weight:500;border-bottom:1px solid #3a3a3a;line-height:1.35;transition:border-color .3s,color .3s}
.foot a:hover{border-color:var(--green-light);color:var(--green-light)}
.foot .mail{font-size:clamp(22px,2vw,28px);font-weight:600;letter-spacing:-.015em;overflow-wrap:anywhere}
.foot .where{color:var(--on-dark-2);font-size:18px;margin-top:14px}
.foot-bottom{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:1px solid #2a2a2a;display:grid;gap:18px;color:var(--on-dark-2);font-size:18px;line-height:1.5}
.foot-bottom p{margin:0;max-width:60ch;text-wrap:pretty}
.foot-bottom a{font-size:18px}
.foot-bottom .also{font-size:15px;color:var(--on-dark-2);opacity:.75}
.foot-bottom .also a{font-size:15px;color:inherit}
@media (min-width:900px){.foot-bottom{grid-template-columns:1fr auto;align-items:center;gap:40px}}

/* ---------- Scroll reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

/* ---------- Motion (only when the visitor allows it) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero-home .copy > *{opacity:0;animation:rise .9s var(--ease) forwards}
  .hero-home .copy > :nth-child(1){animation-delay:.1s}
  .hero-home .copy > :nth-child(2){animation-delay:.2s}
  .hero-home .copy > :nth-child(3){animation-delay:.32s}
  .hero-home .copy > :nth-child(4){animation-delay:.44s}
  .hero-ph{animation:photoIn 1.2s var(--ease) .2s both}
  .hero-split .copy > *{opacity:0;animation:rise .9s var(--ease) forwards}
  .hero-split .copy > :nth-child(1){animation-delay:.1s}
  .hero-split .copy > :nth-child(2){animation-delay:.2s}
  .hero-split .copy > :nth-child(3){animation-delay:.32s}
  .hero-split .copy > :nth-child(4){animation-delay:.44s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes photoIn{from{opacity:0}to{opacity:1}}

  /* Device tilts in, then settles flat when it scrolls into view */
  @media (min-width:960px){
    .js .device-stage .tablet{transform:rotateY(-16deg) rotateX(6deg) rotateZ(2deg)}
    .js .device-stage.in .tablet{transform:none}
  }

  /* Tablet screen: text grows, captions switch on, a caption appears */
  .textsize .aa{animation:aaGrow 10s var(--ease) infinite}
  .textsize .track::before{animation:fillGrow 10s var(--ease) infinite}
  .textsize .track::after{animation:knobMove 10s var(--ease) infinite}
  .tog-cap{animation:togOn 10s var(--ease) infinite}
  .tog-cap::after{animation:knobOn 10s var(--ease) infinite}
  .caption{animation:capIn 10s var(--ease) infinite}
  @keyframes aaGrow{0%,16%{transform:scale(.58)}30%,93%{transform:none}100%{transform:scale(.58)}}
  @keyframes fillGrow{0%,16%{right:70%}30%,93%{right:30%}100%{right:70%}}
  @keyframes knobMove{0%,16%{left:30%}30%,93%{left:70%}100%{left:30%}}
  @keyframes togOn{0%,40%{background:var(--silver)}48%,93%{background:var(--green)}100%{background:var(--silver)}}
  @keyframes knobOn{0%,40%{left:3px}48%,93%{left:23px}100%{left:3px}}
  @keyframes capIn{0%,52%{opacity:0;transform:translateY(14px)}60%,93%{opacity:1;transform:none}100%{opacity:0;transform:translateY(14px)}}

  /* Home hero placeholder: a slow turntable, and a screen that cycles through
     live captions, an incoming call being answered, and a waveform (12s). */
  .ph-phone{animation:phTurn 16s ease-in-out infinite alternate}
  @keyframes phTurn{from{transform:rotateY(-18deg) rotateX(4deg)}to{transform:rotateY(18deg) rotateX(4deg)}}
  .ph-cap{animation:phA 12s linear infinite}
  .ph-call{animation:phB 12s linear infinite}
  .ph-wave{animation:phC 12s linear infinite}
  @keyframes phA{0%{opacity:0;transform:translateY(6px)}3%,30%{opacity:1;transform:none}34%,100%{opacity:0}}
  @keyframes phB{0%,33%{opacity:0;transform:translateY(6px)}36%,63%{opacity:1;transform:none}67%,100%{opacity:0}}
  @keyframes phC{0%,66%{opacity:0;transform:translateY(6px)}69%,97%{opacity:1;transform:none}100%{opacity:0}}
  .ph-capcard span{animation:phLine 12s linear infinite}
  .ph-capcard span:nth-child(2){animation-delay:-11.4s}
  .ph-capcard span:nth-child(3){animation-delay:-10.8s}
  @keyframes phLine{0%,4%{opacity:0;transform:translateY(4px)}8%,32%{opacity:1;transform:none}36%,100%{opacity:0}}
  .ph-call-k .k1{animation:phK1 12s linear infinite}
  .ph-call-k .k2{animation:phK2 12s linear infinite}
  @keyframes phK1{0%,51%{opacity:1}53%,100%{opacity:0}}
  @keyframes phK2{0%,54%{opacity:0}56%,100%{opacity:1}}
  .ph-ans{animation:phRing 12s linear infinite}
  @keyframes phRing{0%,36%{box-shadow:0 0 0 0 rgba(143,207,174,.55)}40%{box-shadow:0 0 0 1.1em rgba(143,207,174,0)}40.1%{box-shadow:0 0 0 0 rgba(143,207,174,.55)}44%{box-shadow:0 0 0 1.1em rgba(143,207,174,0)}44.1%{box-shadow:0 0 0 0 rgba(143,207,174,.55)}48%{box-shadow:0 0 0 1.1em rgba(143,207,174,0)}48.1%,100%{box-shadow:0 0 0 0 rgba(143,207,174,0)}}
  .ph-ans svg{animation:phWig 12s linear infinite}
  @keyframes phWig{0%,36%,52%,100%{transform:none}38%,42%,46%,50%{transform:rotate(-14deg)}40%,44%,48%{transform:rotate(14deg)}}
  .ph-bars span{animation:phBar 1.1s ease-in-out var(--p,0s) infinite alternate}
  @keyframes phBar{from{transform:scaleY(.3)}to{transform:scaleY(1)}}

  /* Home tiles: one 2.6s choreography shared by both. Every stroke draws
     with the same dash rule; each element holds its first frame (fill-mode
     both) until its cue, then lands on the final frame the markup describes. */
  @keyframes laDraw{from{stroke-dashoffset:1.02}to{stroke-dashoffset:0}}
  @keyframes laIn{from{opacity:0}to{opacity:1}}
  @keyframes laOut{from{opacity:1}to{opacity:0}}
  @keyframes laHold{0%{opacity:0}12%,85%{opacity:1}100%{opacity:0}}
  /* Workshops: closed book, cover opens, pages turn, text draws, one line grows */
  .play .ws-cover{animation:laDraw .6s var(--ease) both,wsFlip .6s var(--ease) .66s both}
  .play .ws-spine{animation:laDraw .4s var(--ease) .2s both,laOut .18s linear .66s both}
  .play .ws-right{animation:laIn .08s linear .94s both}
  .play .ws-mid{animation:laDraw .3s var(--ease) 1s both}
  .play .ws-p1{animation:wsPage .4s var(--ease) 1.16s both}
  .play .ws-p2{animation:wsPage .4s var(--ease) 1.36s both}
  .play .ws-t{animation:laDraw .3s var(--ease) calc(1.56s + var(--i) * .07s) both}
  .play .ws-big{animation:laDraw .3s var(--ease) calc(1.56s + var(--i) * .07s) both,wsGrow .38s var(--ease) 2.22s both}
  .play .ws-shift{animation:laDraw .3s var(--ease) calc(1.56s + var(--i) * .07s) both,wsShift .38s var(--ease) 2.22s both}
  @keyframes wsFlip{from{transform:scaleX(1)}to{transform:scaleX(-1)}}
  @keyframes wsPage{0%{opacity:0;transform:scaleX(1)}2%,80%{opacity:1}100%{opacity:0;transform:scaleX(-1)}}
  @keyframes wsGrow{from{transform:scale(1);stroke-width:2.5}to{transform:scale(1.9);stroke-width:1.316}}
  @keyframes wsShift{from{transform:none}to{transform:translateY(14px)}}
  /* Systems: phone draws, buzzes with ring arcs, is answered, booked */
  .play .sy-body{animation:laDraw .6s var(--ease) both}
  .play .sy-spk{animation:laDraw .25s var(--ease) .3s both}
  .play .sy-home{animation:laDraw .25s var(--ease) .35s both}
  .play .sy-name{animation:laIn .25s linear .5s both}
  .play .sy-in{animation:laHold 1s linear .6s both}
  .play .sy-phone{animation:syBuzz .9s linear .7s both}
  .play .sy-arc{animation:syArc .42s linear calc(.7s + var(--i) * .06s) 2 both}
  .play .sy-ring{animation:laDraw .4s var(--ease) 1.62s both}
  .play .sy-check{animation:laDraw .3s var(--ease) 1.95s both}
  .play .sy-a1{animation:laIn .3s linear 1.9s both}
  .play .sy-a2{animation:laIn .3s linear 2.1s both}
  @keyframes syBuzz{0%,50%,100%{transform:rotate(0)}10%,30%,60%,80%{transform:rotate(-2.5deg)}20%,40%,70%,90%{transform:rotate(2.5deg)}}
  @keyframes syArc{0%{stroke-dashoffset:1.02;opacity:1}55%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rv{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

@media print{
  .top,.skip,.burger{display:none}
  main{padding-top:0}
  .js .rv{opacity:1;transform:none}
}

/* Demo brand lockups on /systems */
.demo-logo{display:block;height:44px;width:auto;max-width:100%;margin:0 0 22px}
@media (max-width:640px){.demo-logo{height:34px}}
.demo-logo[alt="Rose City Cuts"]{height:68px}
.demo-logo[alt="Versan"]{height:50px}
.media-col .demo-logo{margin:0 0 18px}
@media (max-width:640px){.demo-logo[alt="Rose City Cuts"]{height:54px}.demo-logo[alt="Versan"]{height:38px}}
@media (max-width:640px){.demo-logo[alt="Rose City Cuts"]{height:52px}}

/* ---------- Pillars: three home doors, Art hero, Meet page ---------- */
@media (min-width:900px){.routes-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.routes-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.routes-3 .route h3{font-size:clamp(28px,2.2vw,34px)}
.art-hero-media{align-self:center;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/11;background:var(--paper)}
.art-hero-media img{width:100%;height:100%;object-fit:cover}
@media (max-width:959px){.art-hero-media{margin-bottom:40px}}
.demo-logo[alt="BetaSoul"]{height:64px}
@media (max-width:640px){.demo-logo[alt="BetaSoul"]{height:50px}}
.about .text .meet-h{margin:44px 0 14px;color:var(--green)}
.about .text p.name-note{margin-top:40px;padding-top:22px;border-top:1px solid var(--silver-2);font-size:17px;color:var(--ink-2)}
@media (prefers-reduced-motion:no-preference){
  .play .ar-g{animation:laDraw .55s var(--ease) calc(var(--i) * .16s) both}
  .play .ar-dot{animation:laDraw .3s var(--ease) .7s both}
  .play .ar-base{animation:laDraw .35s var(--ease) 1s both}
  .play .ar-arm{animation:laDraw .6s var(--ease) 1.2s both}
}

/* ---------- Centre nav item reads "Home", styled as a nav link ---------- */
.mark{font-size:18px;font-weight:500;letter-spacing:0;text-transform:none;padding:10px 0;border-bottom:2px solid transparent;transition:border-color .3s,color .3s}
.mark[aria-current="page"]{border-bottom-color:var(--green);color:var(--green);font-weight:600}
.mark-name{display:none}
.menu-home{display:none}
@media (max-width:1060px){
  .mark{grid-column:1 / 3;justify-self:start;font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-bottom:0;color:var(--ink)}
  .mark[aria-current="page"]{color:var(--ink);font-weight:700}
  .mark-home{display:none}
  .mark-name{display:inline}
  .menu li.menu-home{display:list-item}
}
@media (min-width:1061px){.top-in{column-gap:clamp(22px,2.6vw,44px)}}
.demo-logo[alt="CNTRL//Radio"]{height:50px}
@media (max-width:640px){.demo-logo[alt="CNTRL//Radio"]{height:38px}}

/* ---------- Art hero: Blender record button loop (src/record_build.py) ---------- */
.rec-stage{position:relative;justify-self:center;align-self:center;width:min(100%,680px);aspect-ratio:1200/1010;overflow:hidden;border-radius:var(--radius)}
.rec-video{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 85%;mix-blend-mode:multiply;background:#fff;pointer-events:none}
@media (min-width:960px){.hero-art .rec-stage{width:min(104%,700px)}}
@media (max-width:959px){.rec-stage{width:min(100%,460px);margin:0 auto 32px}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.rec-overlay{--in:24px;position:fixed;inset:0;z-index:60;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s;box-shadow:inset 0 0 0 1px rgba(130,34,35,.55),inset 0 0 160px rgba(60,10,10,.10)}
.rec-overlay.on{opacity:1;visibility:visible;transition:opacity .15s ease}
@media (max-width:640px){.rec-overlay{--in:16px}}
.rc{position:absolute;width:34px;height:34px;border:0 solid #822223}
.rc-tl{top:var(--in);left:var(--in);border-top-width:2px;border-left-width:2px}
.rc-tr{top:var(--in);right:var(--in);border-top-width:2px;border-right-width:2px}
.rc-bl{bottom:var(--in);left:var(--in);border-bottom-width:2px;border-left-width:2px}
.rc-br{bottom:var(--in);right:var(--in);border-bottom-width:2px;border-right-width:2px}
.rec-hud{position:absolute;top:calc(var(--in) + 14px);left:calc(var(--in) + 16px);margin:0;display:flex;align-items:center;gap:8px;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.14em;color:#822223;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.85);padding:6px 10px;border-radius:6px}
.rec-dot{width:9px;height:9px;border-radius:50%;background:#c0262b}
@media (prefers-reduced-motion:no-preference){
  .rec-overlay.on .rec-dot{animation:recBlink 1s steps(1) infinite}
  .rec-live .rec-cta{animation:recPulse 1.6s ease-in-out infinite}
}
.rec-live .rec-cta{box-shadow:0 0 0 3px rgba(130,34,35,.35)}
@keyframes recBlink{50%{opacity:0}}
@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(130,34,35,.45)}50%{box-shadow:0 0 0 7px rgba(130,34,35,0)}}
@media (max-width:959px){.rec-hud{top:calc(var(--nav-h) + 8px)}}