/* ============================================================
   Creative Works v4 x JKR register - site styles
   Design concept: one long told story on a dark stage. Type does the work: a single grotesk at
   giant sizes, one Bodoni italic word per beat in electric blue. The page changes tone as you read
   (dark -> paper -> dark -> blue -> dark) instead of boxed sections. Motion is reading motion:
   the name folds into the monogram, the reel folds into a window, words light up as they are read.
   No cards, no icons, no gradients as decoration; blue glass ribbons are the only picture.

   1 Tokens   2 Type   3 Chrome   4 Sections   5 Components   6 Responsive
   ============================================================ */

/* ---------- 1 Tokens ---------- */
:root{
  --ink:#1a1c1f; --paper:#f2f2f3;
  --blue:#0573b6; --blue-deep:#045a91; --blue-ink:#045a91; --blue-hi:#4fa8e0; --blue-pale:#d6ebf7;  /* brand blue from the logo file */

  /* dark tone (default) */
  --bg:var(--ink); --fg:var(--paper);
  --card:#1e2023; --card-fg:var(--paper);
  --muted:#111111; --muted-fg:#a3a3a8;
  --primary:var(--paper); --on-primary:var(--ink);
  --secondary:#1e2023; --on-secondary:var(--paper);
  --accent:var(--blue); --on-accent:#ffffff;
  --em:var(--blue);
  --border:rgb(242 242 243 / .18);
  --ring:var(--blue-hi); --ring-outer:var(--ink);

  --font-body:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-display:"Host Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-em:"Bodoni Moda","Bodoni 72",Didot,"Times New Roman",serif;
  --fs-body:1.0625rem;

  --gut:clamp(20px,4vw,64px);
  --sec:clamp(96px,12vw,200px);
  --rv-dist:32px; --rv-dur:.8s;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
html.tone-light{
  /* was paper: the dark <-> paper flips were too harsh on the eyes, so chapters now shift one step of charcoal */
  --bg:#1a1c1f; --muted:#1e2023;
}
html.tone-blue{ --bg:var(--blue); --fg:#ffffff; --em:#ffffff; --muted-fg:#e3e9ff; --border:rgb(255 255 255 / .3); --ring:#ffffff; --ring-outer:var(--blue-deep) }

body{transition:background-color .7s var(--ease),color .7s var(--ease)}

/* ---------- 2 Type ---------- */
em{font-family:var(--font-em);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--em);transition:color .7s var(--ease)}

/* ---------- 3 Chrome ---------- */
.loader{background:var(--ink)!important;color:var(--paper)!important}
.loader__scene{display:grid;place-items:center}
.loader.is-out{transition:opacity .6s var(--ease),visibility 0s linear .6s}

.site-header{position:fixed;inset:0 0 auto;z-index:var(--z-sticky);display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px var(--gut);color:var(--fg);transition:color .7s var(--ease),transform .3s var(--ease)}
.site-header__brand{display:inline-flex;align-items:center;gap:14px;min-height:44px;text-decoration:none}
.site-nav ul{display:flex;align-items:center;gap:clamp(18px,2.4vw,36px);margin:0;padding:0;list-style:none}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;letter-spacing:.02em;text-decoration:none;position:relative}
.site-nav li:not(.site-nav__cta) a::after{content:"";position:absolute;left:0;right:0;bottom:10px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.site-nav li:not(.site-nav__cta) a:hover::after{transform:scaleX(1);transform-origin:left}
.site-nav__cta a{padding:0 18px;border:1px solid currentColor;border-radius:var(--r-full);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.site-nav__cta a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.site-header__menu{display:none}

/* ---------- 4 Sections ---------- */

/* Reel */
.reel{position:relative;height:230svh}
.reel__pin{position:sticky;top:0;height:100svh;overflow:hidden}
.reel__stage{position:absolute;inset:0;background:#121b23;clip-path:inset(calc(var(--k,0) * 14svh) calc(var(--k,0) * 7vw) calc(var(--k,0) * 14svh) calc(var(--k,0) * 7vw) round calc(var(--k,0) * 28px));will-change:clip-path}
.reel__canvas{position:absolute;inset:0;width:100%;height:100%}
.reel__stage::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgb(18 27 35 / .86) 0%,rgb(18 27 35 / .55) 38%,rgb(18 27 35 / 0) 64%);pointer-events:none}
.reel__grain{position:absolute;inset:0;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");pointer-events:none;display:none}
.reel__copy{position:absolute;inset:auto var(--gut) clamp(32px,7svh,72px);display:grid;gap:clamp(22px,3.4svh,40px);color:var(--paper);opacity:calc(1 - var(--k,0) * 2.2);transform:translateY(calc(var(--k,0) * -60px))}
.reel__title{font:400 clamp(52px,8.6vw,148px)/.9 var(--font-display);letter-spacing:-.055em;max-width:12ch}
.reel__title em{color:var(--blue);padding-right:.04em}
.line{display:block;overflow:hidden;padding:0 .06em .26em 0;margin-bottom:-.26em}
.line>span{display:inline-block}
.reel__foot{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:20px 48px}
.reel__lede{max-width:34ch;font-size:clamp(16px,1.3vw,19px);line-height:1.45;color:#d4d4d7}
.reel__ctas{display:flex;flex-wrap:wrap;gap:12px}
.reel__ctas .btn-line{color:var(--paper)}
.reel__ctas .btn-line:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* opener entrance */
.js:not(.is-opened) [data-opener]{transform:translateY(105%);opacity:0}
.js .line [data-opener]{transition:transform 1.1s var(--ease-out) var(--d,0s),opacity .6s var(--ease) var(--d,0s)}
.js .reel__kicker[data-opener],.js .reel__lede[data-opener],.js .reel__ctas[data-opener]{transition:transform 1s var(--ease-out) var(--d,0s),opacity 1s var(--ease) var(--d,0s)}
.js:not(.is-opened) .reel__lede,.js:not(.is-opened) .reel__ctas{transform:translateY(16px)}

/* Manifesto */
.manifesto{position:relative;padding:var(--sec) var(--gut) calc(var(--sec) * .8)}
.manifesto__col{display:grid;gap:clamp(36px,5vw,72px);max-width:1120px;margin:0 auto}
.say{font:400 clamp(30px,4.3vw,66px)/1.1 var(--font-display);letter-spacing:-.035em;text-wrap:pretty}
.say .w{transition:opacity .2s linear}
.say--title{font-size:clamp(40px,6.4vw,108px);line-height:.95;letter-spacing:-.05em;margin-bottom:clamp(8px,2vw,32px)}

/* Work (paper tone) */
.work{padding:var(--sec) var(--gut)}
.work__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:16px 32px;margin-bottom:clamp(32px,4vw,56px)}
.work__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:14ch}
.work__lede,.services__lede,.cma__lede{max-width:40ch;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--muted-fg)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(24px,3vw,40px)}
.filter{min-height:44px;padding:0 18px;border:1px solid var(--border);border-radius:var(--r-full);background:none;font-size:14px;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.filter sup{font-size:10px;margin-left:2px;color:var(--muted-fg)}
.filter:hover{border-color:var(--fg)}
.filter[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filter[aria-pressed="true"] sup{color:inherit}
.work__note{margin-top:28px;font-size:14px;color:var(--muted-fg)}
.tile__link{display:grid;gap:16px;text-decoration:none}
.tile.is-hiding{opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.tile.is-showing{animation:tile-in .6s var(--ease-out) both}
@keyframes tile-in{from{opacity:0;transform:translateY(24px)}}
.work__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px)}
.tile.is-lead{grid-column:1 / -1}
.tile__media{position:relative;overflow:hidden;border-radius:4px;background:#1e2023}
.tile.is-lead .tile__media{aspect-ratio:16 / 7}
.tile__media{aspect-ratio:4 / 3}
.tile__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 24px}
.tile__name{font:400 clamp(24px,2.4vw,40px)/1.05 var(--font-display);letter-spacing:-.03em}
.tile__cat{font-size:15px;color:var(--muted-fg)}
.js .tile[data-tile] .tile__media{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease-out)}
.js .tile[data-tile].is-in .tile__media{clip-path:inset(0 0 0 0)}
.tile:hover .cover,.tile__link:focus-visible .cover{scale:1.035}
.tile__link:hover .tile__name{color:var(--em)}
.tile__name{transition:color .3s var(--ease)}

/* Services */
.services{padding:var(--sec) var(--gut)}
.services__head,.work__head,.cma__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px 48px;margin-bottom:clamp(40px,6vw,96px)}
.services__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:13ch}
.svc{margin:0;padding:0;list-style:none;border-bottom:1px solid var(--border)}
.svc__row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:16px;padding:clamp(14px,2vw,28px) 0;border-top:1px solid var(--border);outline:none}
.svc__name{font:400 clamp(38px,6.6vw,116px)/.95 var(--font-display);letter-spacing:-.05em;transition:transform .5s var(--ease-out),color .4s var(--ease)}
.svc__line{max-width:30ch;font-size:15px;line-height:1.45;color:var(--muted-fg);transition:color .4s var(--ease)}
.svc__row:hover .svc__name,.svc__row:focus .svc__name,.svc__row.is-hit .svc__name{transform:translateX(clamp(8px,1.4vw,24px));color:var(--em)}
.svc__row:hover .svc__line{color:var(--fg)}

/* Process (paper tone) */
.process{padding:var(--sec) var(--gut)}
.process__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px 32px;margin-bottom:clamp(40px,5vw,80px)}
.process__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:14ch}
.steps{margin:0;padding:0;list-style:none}
.step{display:grid;grid-template-columns:clamp(40px,6vw,96px) 1fr minmax(0,26ch);align-items:center;gap:16px 32px;padding:clamp(8px,1.4vw,20px) 0;border-top:1px solid var(--border)}
.step:last-child{border-bottom:1px solid var(--border)}
.step__word{font:400 clamp(56px,11vw,196px)/.9 var(--font-display);letter-spacing:-.06em}
.step__text{font-size:clamp(16px,1.25vw,19px);line-height:1.45;color:var(--muted-fg)}
.js .step .step__word,.js .step .step__text{opacity:.18;transition:opacity .6s var(--ease),transform .8s var(--ease-out)}
.js .step .step__word{transform:translateX(-.06em)}
.js .step.is-lit .step__word,.js .step.is-lit .step__text{opacity:1;transform:none}

/* Closer */
.closer{padding:clamp(24px,4vw,48px) 0 0}
.closer__band{position:relative;overflow:hidden;display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:32px 64px;padding:clamp(80px,12vw,180px) var(--gut) clamp(56px,7vw,96px);background:var(--blue);color:#ffffff;clip-path:inset(0 calc(var(--c,0) * 6vw) round calc(var(--c,0) * 28px))}
.closer__title{font:400 clamp(52px,8.4vw,144px)/.9 var(--font-display);letter-spacing:-.055em;max-width:13ch}
.closer__title em{color:#ffffff}
.closer__side{display:grid;gap:28px;justify-items:start;max-width:30ch;font-size:clamp(17px,1.4vw,21px);line-height:1.4}
.closer__ctas{display:flex;flex-wrap:wrap;gap:12px}
.closer__orbit{position:absolute;inset:auto 0 0;width:100%;height:60%;color:var(--blue-pale);opacity:.55;pointer-events:none}
.btn-pill{display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border:1px solid #ffffff;border-radius:var(--r-full);font-size:16px;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease)}
.btn-pill svg{transition:transform .3s var(--ease-out)}
.btn-pill:hover{background:#ffffff;color:var(--blue-deep)}
.btn-pill:hover svg{transform:translateX(4px)}
.closer :focus-visible{outline-color:#ffffff}

/* CMA (paper tone) */
.cma{padding:var(--sec) var(--gut)}
.cma__head{align-items:end}
.cma__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:13ch}
.cma-demo{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(12px,1.6vw,24px);align-items:stretch}
.cma-editor{display:grid;align-content:start;gap:20px;padding:clamp(20px,2.4vw,36px);border:1px solid rgb(242 242 243 / .12);border-radius:6px;background:#111214;color:var(--paper)}
.cma-editor__head{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid rgb(242 242 243 / .16);font-size:14px}
.cma-editor__head b{font-weight:600;letter-spacing:.02em}
.cma-editor__head span{color:#a3a3a8}
.cma-live{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--blue-hi)}
.cma-live i{width:7px;height:7px;border-radius:50%;background:var(--blue-hi);animation:live 1.6s ease-in-out infinite}
@keyframes live{50%{opacity:.25}}
.cma-field{display:grid;gap:8px}
.cma-field label,.cma-field__label{font-size:14px;color:#a3a3a8}
.cma-field input,.cma-field textarea{width:100%;padding:12px 14px;border:1px solid rgb(242 242 243 / .22);border-radius:4px;background:#0e0f11;color:var(--paper);font-size:16px;line-height:1.4;resize:vertical;transition:border-color .2s var(--ease)}
.cma-field input:focus,.cma-field textarea:focus{border-color:var(--blue-hi);outline:none;box-shadow:0 0 0 3px rgb(79 168 224 / .35)}
.cma-swatches{display:flex;gap:10px}
.cma-swatches button{width:48px;height:48px;border-radius:50%;border:2px solid transparent;cursor:pointer;box-shadow:0 0 0 1px rgb(242 242 243 / .2);transition:transform .25s var(--ease-out),box-shadow .25s var(--ease)}
.cma-swatches button:hover{transform:scale(1.06)}
.cma-swatches button.is-on{box-shadow:0 0 0 2px #111214,0 0 0 4px var(--blue-hi)}
.cma-swatches button:focus-visible{outline-color:var(--blue-hi)}
.cma-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding-top:4px}
.cma-publish{min-height:48px;padding:0 24px;border:0;border-radius:var(--r-full);background:var(--blue);color:#ffffff;font-size:15px;cursor:pointer;transition:background-color .25s var(--ease),transform .2s var(--ease)}
.cma-publish:hover{background:var(--blue-deep)}
.cma-publish:active{transform:scale(.97)}
.cma-publish:focus-visible{outline-color:var(--blue-hi)}
.cma-toast{font-size:14px;color:#a3a3a8}
.cma-site{display:grid;grid-template-rows:auto 1fr;overflow:hidden;border-radius:6px;background:#ffffff;color:#2a1d12;box-shadow:0 30px 60px -30px rgb(0 0 0 / .6);transition:transform .5s var(--spring)}
.cma-site.is-pub{transform:scale(.985)}
.cma-site__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid #eee7dd;background:#f7f3ee;font-size:12px}
.cma-site__bar i{width:9px;height:9px;border-radius:50%;background:#d9d1c5}
.cma-site__bar em{margin-left:12px;font-style:normal;color:#8a7e70}
.cma-site__state{margin-left:auto;padding:3px 10px;border-radius:var(--r-full);background:#ece4d8;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b5a48;transition:background-color .3s var(--ease),color .3s var(--ease)}
.cma-site__state.is-live{background:var(--blue);color:#ffffff}
.cma-site__body{display:grid;grid-template-rows:auto 1fr;padding:clamp(18px,2.4vw,36px);gap:clamp(18px,2.6vw,40px)}
.cma-site__nav{display:flex;justify-content:space-between;align-items:center;font:600 15px/1 var(--font-display);letter-spacing:-.02em}
.cma-site__links{display:flex;gap:10px}
.cma-site__links i{width:34px;height:6px;border-radius:3px;background:#e6ddd0}
.cma-site__hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,36px);align-items:center}
.cma-site__copy{display:grid;gap:14px;justify-items:start}
.cma-site__h{font:500 clamp(28px,3.2vw,52px)/.98 var(--font-display);letter-spacing:-.04em;overflow-wrap:anywhere;border-radius:4px}
.cma-site__p{font-size:clamp(14px,1.1vw,17px);line-height:1.5;color:#6b5a48;overflow-wrap:anywhere;border-radius:4px}
.cma-site__btn{padding:10px 18px;border-radius:var(--r-full);background:#2a1d12;color:#ffffff;font-size:13px}
.cma-site__img{aspect-ratio:4 / 5;border-radius:6px}
.cma-site__img.is-swap{animation:wipe .9s var(--ease-out) both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0 round 6px)}to{clip-path:inset(0 0 0 0 round 6px)}}
.cma-points{display:grid;grid-template-columns:repeat(4,1fr);gap:24px clamp(20px,2.4vw,40px);margin:clamp(48px,6vw,96px) 0 0}
.cma-points div{display:grid;gap:8px;align-content:start;padding-top:18px;border-top:1px solid var(--border)}
.cma-points dt{font-size:15px;font-weight:500;color:var(--fg)}
.cma-points dd{margin:0;font-size:16px;line-height:1.5;color:var(--muted-fg)}
.cma__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,56px)}

/* Why: four reasons, each lit in turn */
.why{padding:var(--sec) var(--gut)}
.why__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:13ch;margin-bottom:clamp(40px,6vw,96px)}
.why__list{margin:0;padding:0;list-style:none}
.why__row{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:baseline;gap:12px 40px;padding:clamp(20px,2.6vw,40px) 0;border-top:1px solid var(--border)}
.why__row:last-child{border-bottom:1px solid var(--border)}
.why__row h3{font:400 clamp(30px,3.6vw,60px)/1 var(--font-display);letter-spacing:-.04em}
.why__row p{font-size:clamp(16px,1.2vw,18px);line-height:1.5;color:var(--muted-fg)}
.js .why__row h3,.js .why__row p{opacity:.2;transition:opacity .6s var(--ease)}
.js .why__row.is-lit h3,.js .why__row.is-lit p{opacity:1}

/* Footer: one slim band with the white logo */
.site-footer{padding:clamp(40px,5vw,64px) var(--gut) 28px;border-top:1px solid var(--border);background:var(--ink);color:var(--paper)}
.site-footer__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 32px}
.site-footer__row--base{margin-top:clamp(24px,3vw,40px);font-size:14px;color:#a3a3a8}
.site-footer__logo{display:inline-flex;align-items:center;min-height:44px}
.footer-logo{display:block;width:clamp(180px,18vw,230px);aspect-ratio:304.3 / 45.5;background:var(--paper);-webkit-mask:url("../brand/logo.svg") center / contain no-repeat;mask:url("../brand/logo.svg") center / contain no-repeat}
.site-footer__links{display:flex;flex-wrap:wrap;gap:4px 28px;margin:0;padding:0;list-style:none}
.site-footer__links a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;text-decoration:none;transition:color .2s var(--ease)}
.site-footer__links a:hover{color:var(--blue-hi)}

/* ---------- 5 Components ---------- */

/* Project covers: code-drawn stand-ins in each client's colours until real screenshots arrive */
.cover{position:absolute;inset:-6% 0;transition:scale .9s var(--ease-out);translate:0 var(--py,0)}
.cover--site{display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:1fr;gap:6% 6%;padding:9% 7% 12%;background:var(--s-bg);color:var(--s-ink)}
.cs__name{align-self:end;font:500 clamp(26px,3.4vw,58px)/.95 var(--font-display);letter-spacing:-.045em;color:var(--s-acc)}
.cs__img{border-radius:4px;min-height:60%}

/* Material textures (from the live site) */
.tex-marble{background:radial-gradient(120% 60% at 20% 30%,rgba(255,255,255,.9),transparent 60%),linear-gradient(115deg,transparent 40%,rgba(120,130,140,.2) 42%,transparent 46%),linear-gradient(160deg,transparent 55%,rgba(120,130,140,.16) 57%,transparent 62%),linear-gradient(135deg,#f3f2ef,#d4d8dc)!important}
.tex-wood{background:repeating-linear-gradient(95deg,rgba(90,55,25,.1) 0 2px,transparent 2px 9px),linear-gradient(135deg,#cf9f6e,#8a5a33)!important}
.tex-meat{background:radial-gradient(40% 30% at 60% 55%,rgba(255,235,225,.35),transparent 70%),repeating-linear-gradient(140deg,rgba(255,240,235,.18) 0 3px,transparent 3px 14px),linear-gradient(135deg,#b23633,#5e1517)!important}
.tex-chart{background:linear-gradient(to top,rgba(46,163,107,.85) 0 30%,transparent 30%) 10% 100% / 8% 90% no-repeat,linear-gradient(to top,rgba(46,163,107,.85) 0 55%,transparent 55%) 26% 100% / 8% 90% no-repeat,linear-gradient(to top,rgba(46,163,107,.85) 0 42%,transparent 42%) 42% 100% / 8% 90% no-repeat,linear-gradient(to top,rgba(46,163,107,.85) 0 70%,transparent 70%) 58% 100% / 8% 90% no-repeat,linear-gradient(to top,rgba(46,163,107,.85) 0 88%,transparent 88%) 74% 100% / 8% 90% no-repeat,linear-gradient(160deg,#143150,#0a1a2b)!important}
.tex-concrete{background:radial-gradient(circle at 30% 40%,rgba(255,255,255,.35) 0 1px,transparent 2px) 0 0 / 9px 9px,linear-gradient(135deg,#bcc1c6,#7f878f)!important}
.tex-studio{background:radial-gradient(80% 70% at 75% 30%,rgba(255,255,255,.55),transparent 60%),linear-gradient(135deg,#8fc1da,#0076a8)!important}

/* Buttons */
.btn-line,.btn-solid{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border:1px solid currentColor;border-radius:var(--r-full);font-size:15px;text-decoration:none;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.btn-line::after,.btn-solid::after{content:"";width:14px;height:1px;background:currentColor;transition:width .3s var(--ease-out)}
.btn-line:hover::after,.btn-solid:hover::after{width:22px}
.btn-line:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn-solid{background:var(--blue);border-color:var(--blue);color:#ffffff}
.btn-solid:hover{background:var(--blue-deep);border-color:var(--blue-deep)}
.btn-pill--ghost{border-color:rgb(255 255 255 / .55)}
.flash{animation:flash .9s var(--ease)}
@keyframes flash{0%{background-color:rgb(5 115 182 / .18);box-shadow:0 0 0 0 rgb(5 115 182 / .45)}100%{background-color:transparent;box-shadow:0 0 0 12px rgb(5 115 182 / 0)}}

/* ---------- 6 Responsive ---------- */
@media (max-width:900px){
  .site-header__menu{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid currentColor;border-radius:var(--r-full);background:none;font-size:14px;cursor:pointer;position:relative;z-index:2}
  .site-nav{position:fixed;inset:0;z-index:1;display:grid;align-content:center;padding:var(--gut);background:var(--ink);color:var(--paper);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-drawer),visibility 0s linear .4s}
  .menu-open .site-nav{opacity:1;visibility:visible;transition:opacity .4s var(--ease-drawer)}
  .menu-open .site-header{color:var(--paper)}
  .site-nav ul{flex-direction:column;align-items:flex-start;gap:4px}
  .site-nav a{font-size:clamp(44px,12vw,72px);letter-spacing:-.04em;line-height:1.05}
  .site-nav__cta{margin-top:24px}
  .site-nav__cta a{font-size:18px;min-height:52px;letter-spacing:0}
  .site-header__brand{position:relative;z-index:2}
  .closer__band{grid-template-columns:1fr}
  .big__row{grid-template-columns:1fr}
  .step{grid-template-columns:40px 1fr}
  .step__text{grid-column:2}
  .cma-demo{grid-template-columns:1fr}
  .cma-points{grid-template-columns:1fr 1fr}
  .why__row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .reel{height:190svh}
  .reel__words{display:none}
  .reel__stage::after{background:linear-gradient(0deg,rgb(18 27 35 / .9) 0%,rgb(18 27 35 / .55) 50%,rgb(18 27 35 / .1) 100%)}
  .work__grid{grid-template-columns:1fr}
  .tile.is-lead .tile__media,.tile__media{aspect-ratio:4 / 3}
  .cover--site{grid-template-columns:1fr 1fr}
  .cma-site__hero{grid-template-columns:1fr}
  .cma-site__img{aspect-ratio:16 / 9}
  .cma-points{grid-template-columns:1fr}
  .svc__row{align-items:start}
  .svc__row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .reel{height:auto}
  .reel__pin{position:relative}
  .say .w{opacity:1!important}
  .js .step .step__word,.js .step .step__text{opacity:1;transform:none}
  .js .tile[data-tile] .tile__media{clip-path:none}
  .js .why__row h3,.js .why__row p{opacity:1}
}

/* Header gets the page tone behind it once the page scrolls, so giant type never runs under the links */
.site-header{background:transparent;transition:color .7s var(--ease),background-color .7s var(--ease),transform .3s var(--ease)}
.site-header.is-solid{background:var(--bg)}
.menu-open .site-header{background:transparent}

/* Demo chrome uses plain type, not the emphasis serif */
.cma-live,.cma-site__bar em{font-family:var(--font-body);font-style:normal;letter-spacing:.12em}
.cma-site__bar em{letter-spacing:0;color:#8a7e70}

/* How we work: the D slot machine (paper tone) */
.process{padding:0}
.dq{position:relative;height:calc(100svh + 5 * 55svh)}
.dq__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr auto;gap:16px;padding:calc(var(--header-h,72px) + 16px) var(--gut) clamp(20px,4svh,40px);overflow:hidden}
.dq__top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:start;gap:12px 32px}
.dq .process__title{font-size:clamp(28px,3.4vw,56px);line-height:.98;max-width:16ch}
.dq__stage{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px)}
.dq__word{display:flex;align-items:flex-start;font:400 clamp(72px,17vw,300px)/1 var(--font-display);letter-spacing:-.065em;white-space:nowrap}
.dq__d{display:inline-block;line-height:1.25;color:var(--blue);transform-origin:50% 80%}
.dq__d.is-bump{animation:dq-bump .55s var(--spring)}
@keyframes dq-bump{40%{transform:scale(1.08,.92) translateY(.03em)}}
.dq__reel{display:inline-block;height:1.25em;overflow:hidden;width:var(--rw,4.2em);transition:width .7s var(--spring)}
.dq__track{display:flex;flex-direction:column;transform:translateY(calc(var(--i,0) * -1.25em));transition:transform .75s var(--spring)}
.dq__track span{display:block;height:1.25em;line-height:1.25;transition:opacity .5s var(--ease),filter .5s var(--ease)}
.dq__track span:not(.is-on){opacity:.12}
.dq__side{display:grid;gap:18px;align-content:center;max-width:30ch}
.dq__q{min-height:2.1em;font:italic 400 clamp(28px,2.8vw,48px)/1.05 var(--font-em);letter-spacing:-.02em;color:var(--blue)}
.dq__caret{display:inline-block;width:.06em;height:.9em;margin-left:.08em;vertical-align:-.1em;background:currentColor;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.dq__text{font-size:clamp(16px,1.25vw,19px);line-height:1.5;color:var(--muted-fg);transition:opacity .35s var(--ease)}
.dq__text.is-swap{opacity:0}
.dq__rail{display:flex;gap:8px;margin:0;padding:0;list-style:none}
.dq__rail button{position:relative;min-width:56px;min-height:44px;padding:0 14px;border:1px solid var(--border);border-radius:var(--r-full);background:none;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;overflow:hidden;transition:border-color .25s var(--ease),color .25s var(--ease)}
.dq__rail button::before{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(var(--f,0));transform-origin:left;z-index:-1}
.dq__rail button{isolation:isolate}
.dq__rail button.is-done{color:var(--bg);border-color:var(--fg)}
.dq__rail button.is-cur{border-color:var(--blue-hi);color:var(--fg)}
.dq__rail button.is-cur::before{background:rgb(79 168 224 / .28)}
.dq__rail button:hover{border-color:var(--fg)}
.dq__list{list-style:none;margin:0;padding:0}
.js .dq__list{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .dq{display:none}
html:not(.js) .dq__list{display:grid;gap:24px;padding:var(--sec) var(--gut)}

@media (max-width:900px){
  .dq__stage{grid-template-columns:1fr;align-content:center;gap:24px}
  .dq__word{font-size:clamp(64px,19vw,180px)}
  .dq{height:calc(100svh + 5 * 45svh)}
}
@media (prefers-reduced-motion:reduce){
  .dq__caret{animation:none}
}

/* ---------- Logo intro (first view per session) and page change ----------
   The header logo is the loader: drawn in the middle of a dark stage, then flown to the top left.
   Page change: a panel covers the page under the header, the next page lifts it (Alpha Dots pattern). */
.site-header{z-index:calc(var(--z-loader) + 2)}
.brand-logo{display:block;height:30px;width:auto;overflow:visible;transform-origin:0 0}
.lg-word{transition:opacity .35s var(--ease)}
.site-header.is-solid .lg-word{opacity:0}
.site-header__brand:hover .lg-word,.site-header__brand:focus-visible .lg-word{opacity:1}
.js[data-preloader="p2"]:not(.is-repeat):not(.is-ready) .brand-logo{opacity:0}
html.intro-run .brand-logo{opacity:1!important}
.site-nav,.site-header__menu{transition:opacity .6s var(--ease)}
html.intro-run .site-nav,html.intro-run .site-header__menu{opacity:0}
html.intro-dock .site-nav,html.intro-dock .site-header__menu{opacity:1;transition-delay:.55s}
html.intro-dock .brand-logo{transition:transform 1s cubic-bezier(.7,0,.2,1)}
/* 1 the W is drawn as an outline in blue, then fills */
html.intro-run .brand-logo .lg-mark path[pathLength]{fill-opacity:0;stroke:var(--blue-hi);stroke-width:.5;stroke-dasharray:1;stroke-dashoffset:1;animation:lg-draw .7s cubic-bezier(.6,0,.3,1) forwards,lg-fill .4s var(--ease) .5s forwards}
html.intro-run .brand-logo .cw-fold{opacity:0;animation:lg-show .4s var(--ease) .8s forwards}
/* 2 CREATIVE WORKS, letter by letter */
html.intro-run .brand-logo .lg-word path{opacity:0;transform-box:fill-box;transform:translateY(40%);animation:lg-letter .45s var(--ease-out) forwards;animation-delay:calc(.45s + var(--l,0) * 32ms)}
@keyframes lg-draw{to{stroke-dashoffset:0}}
@keyframes lg-fill{to{fill-opacity:1;stroke-width:0}}
@keyframes lg-show{to{opacity:1}}
@keyframes lg-letter{to{opacity:1;transform:none}}

.page-cover{position:fixed;inset:0;z-index:calc(var(--z-loader) + 1);background:var(--ink);border-top:2px solid var(--blue-hi);transform:translateY(101%);visibility:hidden;pointer-events:none}
html.is-leaving .page-cover{visibility:visible;transform:none;transition:transform .6s cubic-bezier(.7,0,.2,1)}
html.is-arriving .page-cover{visibility:visible;transform:none;border-top-color:transparent}
html.is-arrived .page-cover{visibility:visible;transform:translateY(-101%);border-top-color:transparent;transition:transform .8s cubic-bezier(.7,0,.2,1)}
html.is-leaving .site-header,html.is-arriving .site-header{background:transparent!important;color:var(--paper)}
html.is-leaving .lg-word,html.is-arriving .lg-word{opacity:1}

/* Dummy page hero */
.page-hero{display:grid;gap:clamp(24px,4vw,48px);align-content:end;min-height:88svh;padding:calc(var(--header-h,72px) + var(--sec) * .6) var(--gut) clamp(48px,7vw,96px)}
.page-hero__title{font:400 clamp(52px,9vw,156px)/.9 var(--font-display);letter-spacing:-.055em}
.page-hero__lede{max-width:40ch;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--muted-fg)}
.js:not(.is-opened) .page-hero__lede{transform:translateY(16px)}
.js .page-hero__lede[data-opener]{transition:transform 1s var(--ease-out) var(--d,0s),opacity 1s var(--ease) var(--d,0s)}

@media (max-width:640px){.brand-logo{height:24px}}
@media (prefers-reduced-motion:reduce){.page-cover{display:none}}

/* ==========================================================================
   Revision 9: clients marquee, projects strip, accessibility, immersive contact
   with booking, Services / CMA / project pages, 5D rooms
   ========================================================================== */

/* Clients: one flat light tone for every logo; the row glides to a soft stop on hover */
.clients{padding:clamp(40px,5vw,80px) 0 clamp(72px,9vw,140px)}
.clients__title{padding:0 var(--gut);margin-bottom:clamp(24px,3vw,44px);font:400 clamp(24px,2.4vw,36px)/1.1 var(--font-display);letter-spacing:-.03em;color:var(--muted-fg)}
.marquee__track{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.marquee__group{display:flex;flex:none;align-items:center;margin:0;padding:0;list-style:none;will-change:transform}
.marquee__group li{flex:none;display:flex;align-items:center;height:64px;padding-right:clamp(52px,5.4vw,96px)}
.marquee__group img{display:block;width:auto;max-width:none;height:var(--h,30px);filter:brightness(0) invert(1);opacity:.62;transition:opacity .4s var(--ease)}
.marquee__word{font:600 clamp(19px,1.7vw,25px)/1 var(--font-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--paper);opacity:.62;transition:opacity .4s var(--ease)}
.marquee:hover img,.marquee:hover .marquee__word{opacity:.9}
.marquee:not(.is-live) .marquee__track{-webkit-mask-image:none;mask-image:none;padding:0 var(--gut)}
.marquee:not(.is-live) .marquee__group{flex:1 1 100%;flex-wrap:wrap;row-gap:8px}
.marquee:not(.is-live) .marquee__group[aria-hidden]{display:none}

/* Services: "and many more" row and the way to the full list */
.svc__row--more .svc__name em{color:var(--blue-hi)}
.services__cta{display:flex;justify-content:flex-end;margin-top:clamp(28px,3vw,48px)}

/* Projects: a strip that bleeds off the right edge */
.work{padding:var(--sec) 0 var(--sec) var(--gut)}
.work__layout{display:grid;grid-template-columns:minmax(280px,.4fr) minmax(0,1fr);gap:clamp(24px,3.4vw,64px);align-items:end}
.work__side{display:grid;gap:clamp(20px,2.4vw,32px);align-content:end}
.work__side .work__title{font-size:clamp(40px,4.6vw,84px);max-width:11ch}
.work__side .filters{margin:0}
.strip-nav{display:flex;align-items:center;gap:14px}
.strip-btn{display:grid;place-items:center;width:52px;height:52px;padding:0;border:1px solid var(--border);border-radius:50%;background:none;color:var(--fg);cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),opacity .25s var(--ease)}
.strip-btn:hover:not(:disabled){background:var(--fg);color:var(--bg);border-color:var(--fg)}
.strip-btn:disabled{opacity:.3;cursor:default}
.strip-count{min-width:5.5ch;font-size:15px;font-variant-numeric:tabular-nums;color:var(--muted-fg)}
.strip{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-padding-left:0;scrollbar-width:none;padding-right:var(--gut);cursor:grab}
.strip::-webkit-scrollbar{display:none}
.strip.is-dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.strip:focus-visible{outline-offset:-3px}
.strip__list{display:flex;gap:clamp(12px,1.4vw,20px);margin:0;padding:0;list-style:none}
.card{flex:none;width:clamp(260px,29vw,440px);scroll-snap-align:start}
.card[hidden]{display:none}
.card__link{display:grid;gap:14px;text-decoration:none;-webkit-user-drag:none}
.card__media{position:relative;overflow:hidden;aspect-ratio:4 / 5;border-radius:4px;background:var(--card)}
.card .cover{inset:0;grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:11% 10%;gap:9%}
.card .cs__name{align-self:start;font-size:clamp(26px,2.6vw,44px)}
.card__meta{display:grid;gap:4px}
.card__name{font:400 clamp(20px,1.7vw,28px)/1.1 var(--font-display);letter-spacing:-.025em;transition:color .3s var(--ease)}
.card__cat{font-size:15px;color:var(--muted-fg)}
.card__link:hover .card__name,.card__link:focus-visible .card__name{color:var(--blue-hi)}
.card__link:hover .cover,.card__link:focus-visible .cover{scale:1.04}
.card.is-hiding{opacity:0;transform:translateY(12px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.card.is-showing{animation:tile-in .6s var(--ease-out) both}
.card:nth-child(2).is-showing{animation-delay:.05s}.card:nth-child(3).is-showing{animation-delay:.1s}.card:nth-child(4).is-showing{animation-delay:.15s}

/* Accessibility */
.a11y{padding:var(--sec) var(--gut)}
.a11y__head{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(28px,6vw,120px);margin-bottom:clamp(48px,6vw,96px)}
.a11y__badge{position:relative;display:grid;place-items:center;width:clamp(150px,17vw,260px);aspect-ratio:1;font:400 clamp(64px,7.6vw,120px)/1 var(--font-display);letter-spacing:-.06em}
.a11y__ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.a11y__ring circle{fill:none;stroke:var(--blue-hi);stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-out) .2s}
.a11y__badge.is-in .a11y__ring circle{stroke-dashoffset:0}
.a11y__badge span{position:relative}
.a11y__copy{display:grid;gap:clamp(18px,2vw,28px)}
.a11y__title{font:400 clamp(44px,6.4vw,110px)/.92 var(--font-display);letter-spacing:-.05em;max-width:12ch}
.a11y__lede{max-width:46ch;font-size:clamp(17px,1.4vw,21px);line-height:1.5;color:var(--muted-fg)}
.a11y__list{display:grid;grid-template-columns:repeat(4,1fr);gap:24px clamp(20px,2.4vw,40px);margin:0;padding:0;list-style:none}
.a11y__list li{display:grid;gap:10px;align-content:start;padding-top:20px;border-top:1px solid var(--border)}
.a11y__list h3{font:400 clamp(22px,1.9vw,30px)/1.1 var(--font-display);letter-spacing:-.025em}
.a11y__list p{font-size:16px;line-height:1.5;color:var(--muted-fg)}

/* Why on a darker band */
.why--dark{background:none}  /* one background everywhere (user); kept as a hook */


/* Contact on the blue */
.contact{position:relative;padding:var(--sec-y) var(--gut);background:var(--blue);color:#ffffff}
.contact :focus-visible{outline-color:#ffffff}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,580px);gap:clamp(40px,6vw,120px);align-items:start}
.contact__title{margin-bottom:clamp(24px,3vw,40px);font:400 clamp(52px,7vw,124px)/.92 var(--font-display);letter-spacing:-.055em}
.contact__title em{color:#ffffff}
.contact__lede{max-width:34ch;margin-bottom:clamp(32px,4vw,56px);font-size:clamp(17px,1.4vw,21px);line-height:1.45}
.contact__details{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px;margin:0}
.contact__details dt{margin-bottom:2px;font-size:15px;color:#d9ebf6}
.contact__details dd{margin:0;font-size:17px;line-height:1.45}
.contact__details a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-underline-offset:.2em}
.contact .ph{border-bottom-color:rgb(255 255 255 / .7)}

/* Booking panel */
.book{display:grid;gap:24px;padding:clamp(22px,2.6vw,40px);border-radius:8px;background:var(--ink);color:var(--paper);box-shadow:0 40px 80px -40px rgb(0 0 0 / .55)}
.book__title{font:400 clamp(28px,2.4vw,40px)/1 var(--font-display);letter-spacing:-.035em}
.book fieldset{min-width:0;margin:0;padding:0;border:0}
.book legend{padding:0;margin-bottom:10px;font-size:15px;color:#a3a3a8}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:1px solid rgb(242 242 243 / .22);border-radius:var(--r-full);font-size:15px;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease)}
.chip:hover span{border-color:var(--paper)}
.chip input:checked+span{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.chip input:focus-visible+span{outline:3px solid var(--blue-hi);outline-offset:2px}
.days{flex-wrap:nowrap;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.day span{display:grid;justify-items:center;gap:1px;min-width:58px;padding:8px 6px;border-radius:10px;line-height:1.15}
.day small{font-size:12px;opacity:.8}
.day b{font-size:20px;font-weight:500}
.book__row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.book .field label{font-size:15px;color:#a3a3a8}
.book input[type="text"]{width:100%;min-height:48px;padding:0 14px;border:1px solid rgb(242 242 243 / .22);border-radius:6px;background:#0e0f11;color:var(--paper);font-size:16px}
.book input[type="text"]:focus{border-color:var(--blue-hi);outline:none;box-shadow:0 0 0 3px rgb(79 168 224 / .35)}
.book__summary{display:grid;gap:14px;justify-items:start;padding-top:20px;border-top:1px solid rgb(242 242 243 / .14)}
.book__recap{font-size:17px;line-height:1.45}
.book__go[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.book__note{font-size:15px;line-height:1.5;color:#a3a3a8}
.book__note a{color:var(--paper)}

/* Inner pages */
.page-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(32px,4vw,56px)}
.proj-hero{display:grid;gap:clamp(18px,2.6vw,36px);padding:calc(var(--header-h,72px) + var(--sec) * .6) var(--gut) clamp(40px,5vw,72px)}
.proj-hero__cat{font-size:17px;color:var(--muted-fg)}
.proj-hero__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 48px}
.js:not(.is-opened) .proj-hero__cat{transform:translateY(16px)}
.js .proj-hero__cat[data-opener]{transition:transform 1s var(--ease-out) var(--d,0s),opacity 1s var(--ease) var(--d,0s)}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,24px);padding:0 var(--gut) var(--sec)}
.frame{position:relative;margin:0;overflow:hidden;aspect-ratio:4 / 3;border-radius:4px;background:var(--s-bg,var(--card))}
.frame--wide{grid-column:1 / -1;aspect-ratio:16 / 8}
.frame .cover{inset:0}
.frame__fill{position:absolute;inset:0}
.frame__fill--soft{inset:14%;border-radius:4px}
.frame--palette{display:grid;grid-template-columns:2fr 1fr 1fr}
.frame--palette i{display:block}
.frame--type{display:grid;place-items:center;padding:8%;color:var(--s-acc);font:500 clamp(36px,5vw,88px)/.95 var(--font-display);letter-spacing:-.05em;text-align:center}
.proj-next{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:24px;padding:0 var(--gut) var(--sec)}
.proj-next__link{display:grid;gap:6px;text-decoration:none}
.proj-next__link span{font-size:16px;color:var(--muted-fg)}
.proj-next__link strong{font:400 clamp(36px,5vw,84px)/.95 var(--font-display);letter-spacing:-.05em;transition:color .3s var(--ease)}
.proj-next__link:hover strong{color:var(--blue-hi)}

/* How we work on the Services page: a room per step behind the slot machine, and a light that moves */
.dq__pin{isolation:isolate}
.dq__rooms{position:absolute;inset:0;z-index:-1;overflow:hidden}
.room{position:absolute;inset:0;will-change:clip-path,transform}
.room--1{background:radial-gradient(70% 60% at 85% 18%,rgb(5 115 182 / .42),transparent 62%),#11171d}
.room--2{background:radial-gradient(60% 70% at 12% 85%,rgb(79 168 224 / .3),transparent 60%),#0f1d27}
.room--3{background:linear-gradient(rgb(242 242 243 / .05) 1px,transparent 1px) 0 0 / 100% 64px,radial-gradient(60% 60% at 70% 60%,rgb(5 115 182 / .38),transparent 65%),#15171b}
.room--4{background:radial-gradient(85% 75% at 50% 115%,rgb(5 115 182 / .55),transparent 62%),#0c1620}
.room--5{background:radial-gradient(90% 90% at 82% 8%,rgb(79 168 224 / .35),transparent 60%),#06304f}
.dq__orb{position:absolute;left:0;top:0;width:clamp(200px,26vw,420px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgb(214 235 247 / .38),rgb(5 115 182 / .28) 42%,transparent 70%);transform:translate(var(--ox,62vw),var(--oy,8svh)) scale(var(--os,1));transition:transform 1.4s var(--ease-out)}
.dq__rail button.is-done{color:var(--ink)}

/* Responsive */
@media (max-width:900px){
  .work__layout{grid-template-columns:1fr}
  .card{width:min(76vw,360px)}
  .a11y__head{grid-template-columns:1fr}
  .a11y__list{grid-template-columns:1fr 1fr}
  .contact__grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  .a11y__list{grid-template-columns:1fr}
  .book__row{grid-template-columns:1fr}
  .contact__details{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .frame--wide{aspect-ratio:4 / 3}
  .services__cta{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  .a11y__ring circle{stroke-dashoffset:0;transition:none}
  .dq__orb{transition:none}
}

/* ---------- Revision 10: one section rhythm ----------
   Every home and inner section uses the same padding above and below, so the gap between any two is the same.
   Banded sections (Why, Contact) get it inside their band. */
:root{--sec-y:clamp(56px,6.4vw,112px)}
.manifesto,.clients,.services,.a11y,.work,.cma,.why,.contact{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.work{padding-right:0}
.clients__title{margin-bottom:clamp(16px,1.8vw,28px)}
.services__head,.work__head,.cma__head{margin-bottom:clamp(32px,4vw,64px)}
.a11y__head{margin-bottom:clamp(36px,4.4vw,72px)}
.why__title{margin-bottom:clamp(32px,4vw,64px)}
.gallery,.proj-next{padding-bottom:var(--sec-y)}
.closer{padding-top:0}

/* ---------- Revision 11: one background, section parallax ----------
   Every section sits on the same charcoal. A section change reads through movement instead: each section's
   heading block drifts a little slower than the page as it passes (main.js 17), so the next one slides in under it. */
html.tone-light{--bg:var(--ink)}
[data-px]{will-change:transform}
@media (prefers-reduced-motion:reduce){[data-px]{transform:none!important;will-change:auto}}

/* ---------- Revision 13: horizontal services on the home page ----------
   Three outlined panels share the row; the one under the pointer or focus widens and its drawing lifts.
   Descriptions always show. Phones: a sideways swipe strip with snap. */
.svc-h{display:flex;gap:clamp(10px,1.2vw,18px);margin:0;padding:0;list-style:none}
.svc-h__item{flex:1 1 0;min-width:0}
.svc-h__panel{display:grid;grid-template-rows:1fr auto;gap:clamp(20px,2.4vw,36px);height:clamp(380px,40vw,540px);padding:clamp(20px,2vw,32px);border:1px solid var(--border);border-radius:6px;text-decoration:none;overflow:hidden;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.svc-h__text{display:grid;gap:12px;align-content:end}
.svc-h__name{font:400 clamp(28px,2.7vw,46px)/1 var(--font-display);letter-spacing:-.04em;transition:color .4s var(--ease)}
.svc-h__line{max-width:34ch;font-size:16px;line-height:1.5;color:var(--muted-fg)}

/* the drawings: plain shapes in the page palette */
.svc-h__visual{position:relative;align-self:start;width:min(100%,320px);aspect-ratio:4 / 3;border-radius:6px;background:rgb(242 242 243 / .04);border:1px solid rgb(242 242 243 / .1);}
.svc-h__visual i{position:absolute;display:block;border-radius:3px;background:rgb(242 242 243 / .14)}
/* a page */
.svc-h__visual--site .v-bar{left:8%;right:8%;top:9%;height:7%}
.svc-h__visual--site .v-hero{left:8%;right:8%;top:23%;height:38%;background:linear-gradient(120deg,rgb(5 115 182 / .75),rgb(79 168 224 / .35))}
.svc-h__visual--site .v-line{left:8%;width:62%;top:69%;height:6%}
.svc-h__visual--site .v-line--short{top:80%;width:38%}
/* a product grid */
.svc-h__visual--shop i{width:38%;height:35%}
.svc-h__visual--shop i:nth-child(1){left:8%;top:9%;background:rgb(5 115 182 / .6)}
.svc-h__visual--shop i:nth-child(2){left:54%;top:9%}
.svc-h__visual--shop i:nth-child(3){left:8%;top:54%}
.svc-h__visual--shop i:nth-child(4){left:54%;top:54%;background:rgb(79 168 224 / .35)}
.svc-h__visual--shop i::after{content:"";position:absolute;left:10%;bottom:-16%;width:46%;height:8%;border-radius:2px;background:rgb(242 242 243 / .22)}
/* a dashboard */
.svc-h__visual--app .v-side{left:6%;top:9%;bottom:9%;width:18%}
.svc-h__visual--app .v-col{bottom:12%;width:9%;background:rgb(79 168 224 / .45)}
.svc-h__visual--app .v-col:nth-child(2){left:32%;height:30%}
.svc-h__visual--app .v-col:nth-child(3){left:45%;height:52%}
.svc-h__visual--app .v-col:nth-child(4){left:58%;height:40%}
.svc-h__visual--app .v-col:nth-child(5){left:71%;height:66%;background:rgb(5 115 182 / .85)}
.svc-h__visual--app .v-col:nth-child(6){left:84%;height:48%}

@media (max-width:900px){
  .svc-h{overflow-x:auto;scroll-snap-type:x mandatory;margin-right:calc(-1 * var(--gut));padding-right:var(--gut);scrollbar-width:none}
  .svc-h::-webkit-scrollbar{display:none}
  .svc-h__item{flex:0 0 min(78vw,360px);scroll-snap-align:start}
  .svc-h__panel{height:auto;min-height:420px}
}
@media (prefers-reduced-motion:reduce){
}

/* ---------- Revision 14: Spotlight panels and the Publish "ultimate" (gregorius.id/motion, Spotlight cards) ----------
   Panels: a soft glow and a glowing hairline border follow the pointer (two variables set in main.js 18).
   Publish: squash and pop, a flash, a shockwave ring, 12 sparks and a short shake, then a charged glow that holds
   until the next edit. Brand blue instead of the source's blue. Reduced motion: none of it, the state still shows. */
.svc-h__panel{position:relative;isolation:isolate;--mx:50%;--my:50%}
.svc-h__panel::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(300px circle at var(--mx) var(--my),rgb(5 115 182 / .24),transparent 65%);opacity:0;transition:opacity .35s var(--ease)}
.svc-h__panel::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:radial-gradient(180px circle at var(--mx) var(--my),rgb(242 242 243 / .62),transparent 65%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;transition:opacity .35s var(--ease);pointer-events:none}
.svc-h__panel:hover::before,.svc-h__panel:hover::after,.svc-h__panel:focus-visible::before,.svc-h__panel:focus-visible::after{opacity:1}

.cma-demo{position:relative}
.cma-publish{position:relative;transition:background-color .25s var(--ease),box-shadow .5s var(--ease)}
.cma-publish.is-charged{background:var(--blue);box-shadow:0 0 0 1px rgb(214 235 247 / .6),0 0 22px rgb(79 168 224 / .65),inset 0 0 12px rgb(214 235 247 / .25)}
.cma-publish.is-ult{animation:ult-push .62s cubic-bezier(.2,1.3,.3,1)}
.cma-demo.is-shake{animation:ult-shake .42s linear}
.ult-fx{position:absolute;z-index:3;border-radius:50%;pointer-events:none;translate:-50% -50%}
.ult-flash{width:90px;height:90px;mix-blend-mode:screen;background:radial-gradient(circle,rgb(255 255 255 / .9),rgb(79 168 224 / .55) 35%,transparent 70%);animation:ult-flash .8s cubic-bezier(.1,.8,.3,1) forwards}
.ult-ring{width:44px;height:44px;border:2px solid #9fd2f2;box-shadow:0 0 18px rgb(79 168 224 / .8),inset 0 0 12px rgb(79 168 224 / .6);animation:ult-ring .6s cubic-bezier(.1,.7,.3,1) forwards}
.ult-spark{width:14px;height:3px;border-radius:3px;rotate:var(--a);background:linear-gradient(90deg,transparent,#ffffff 60%,#9fd2f2);box-shadow:0 0 8px rgb(79 168 224 / .9);animation:ult-spark .55s cubic-bezier(.1,.8,.3,1) forwards}
@keyframes ult-push{0%{scale:1}14%{filter:brightness(.8);scale:.9}32%{filter:brightness(2.1) saturate(1.4);scale:1.07}55%{filter:brightness(1.2);scale:.985}to{filter:none;scale:1}}
@keyframes ult-flash{0%{opacity:1;scale:.3}to{opacity:0;scale:8}}
@keyframes ult-ring{0%{opacity:1;border-width:4px;scale:.4}to{opacity:0;border-width:1px;scale:7}}
@keyframes ult-spark{0%{opacity:1;transform:translate(6px) scaleX(.4)}60%{opacity:1}to{opacity:0;transform:translateX(var(--d)) scaleX(1.4)}}
@keyframes ult-shake{0%{translate:0}10%{translate:-7px 3px}20%{translate:6px -4px}30%{translate:-5px -2px}40%{translate:4px 3px}50%{translate:-3px 1px}62%{translate:2px -2px}75%{translate:-1px 1px}to{translate:0}}
@media (prefers-reduced-motion:reduce){
  .cma-publish.is-ult,.cma-demo.is-shake{animation:none}
  .ult-fx{display:none}
  .svc-h__panel::before,.svc-h__panel::after{transition:none}
}