/* Roboto, variable weight 100 to 900 (v4: headlines Bold and Thin, small text Light), latin-ext. Licence: url(../fonts/roboto-LICENSE.txt?v=e02abcec) ships next to the fonts */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-latin-ext-wght-normal.woff2?v=a6323dda) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/roboto-latin-wght-normal.woff2?v=665db5e1) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin-ext.woff2?v=45eff25e) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/bodoni-moda-italic-latin.woff2?v=3d674016) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(../fonts/martian-mono-normal-latin-ext.woff2?v=734b2e7b) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Martian Mono';
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 112.5%;
  font-display: swap;
  src: url(../fonts/martian-mono-normal-latin.woff2?v=53a4a47c) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* TGW Studios · greatwanderer.studio
   Design system: "Desqueeze". A production-monitor HUD around the work,
   headlines that unsqueeze like an anamorphic image, letterbox cuts between pages. */


:root{
  color-scheme:dark;
  --ink:#07080a; --ink2:#0d0f12; --ink3:#14171b; --ink4:#1c2025;
  --paper:#ecebe6; --paper2:#c8c7c1; --dim:#9b9d9f; --mute:#6c6f73;
  --faint:rgba(236,235,230,.10); --hair:rgba(236,235,230,.2); --hair2:rgba(236,235,230,.34);
  --tally:#da1414; --tally-glow:rgba(218,20,20,.45);
  /* small text (under 24px) on ink: --tally and --mute stay for marks, bars and large type only */
  --tally-text:#ef3e3e; --mute-text:#85888c;
  --signal:#b4e7ff;
  --g:max(16px,4.2vw);
  --maxw:1480px;
  --hud-h:64px;
  --disp:'Archivo','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --serif:'Bodoni Moda','Bodoni 72',Didot,Georgia,serif;
  --ease:cubic-bezier(.2,.7,.1,1);
  --ease-io:cubic-bezier(.7,0,.2,1);
  --f-body:16px;
  --f-lead:clamp(18px,1.45vw,22px);
  --f-h4:clamp(22px,2.2vw,32px);
  --f-h3:clamp(28px,3.4vw,52px);
  --f-h2:clamp(38px,5.6vw,92px);
  --f-h1:clamp(48px,9.2vw,168px);
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--disp);font-size:var(--f-body);font-weight:330;
  font-stretch:100%;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:hidden}
main{overflow-x:clip}
img,video,canvas{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--tally);outline-offset:3px}
::selection{background:var(--tally);color:#fff}
h1,h2,h3,h4,h5,h6{margin:0;font-weight:300;line-height:1.02;text-wrap:balance;letter-spacing:-.005em}
p{margin:0}
b,strong{font-weight:780;font-stretch:112%}
.t{font-weight:150;font-stretch:100%}
.n{font-weight:330}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* skip link: hidden until focused, then top left above everything */
.skip{position:fixed;left:12px;top:calc(12px + env(safe-area-inset-top,0px));z-index:200;padding:12px 16px;background:var(--paper);color:var(--ink);
  font-family:var(--mono);font-size:12px;line-height:1.2;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.skip:not(:focus){width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;box-shadow:none}
.skip:focus-visible{outline:2px solid var(--tally);outline-offset:2px}
/* targets that only take focus from a skip link or an in-page anchor */
main:focus,[tabindex="-1"]:focus{outline:none}
.wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--g));margin-inline:auto;padding-inline:var(--g)}
.mono,.lab{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;font-weight:400;font-stretch:100%}
.lab{color:var(--dim)}
.dim{color:var(--dim)}
.dash{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--mute-text)}
.slate{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper2)}
.slate .sq{color:var(--tally)}
section{position:relative}

/* ─────────── film grain + viewport frame ─────────── */
.grain{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:.06;mix-blend-mode:overlay;background-size:240px 240px;animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-83px 61px}40%{background-position:71px -97px}60%{background-position:-37px 113px}80%{background-position:127px 29px}100%{background-position:0 0}}
.vf{position:fixed;inset:0;z-index:60;pointer-events:none}
.vf i{position:absolute;width:18px;height:18px;border-color:var(--hair2);border-style:solid;border-width:0}
.vf i:nth-child(1){left:10px;top:10px;border-left-width:1px;border-top-width:1px}
.vf i:nth-child(2){right:10px;top:10px;border-right-width:1px;border-top-width:1px}
.vf i:nth-child(3){left:10px;bottom:10px;border-left-width:1px;border-bottom-width:1px}
.vf i:nth-child(4){right:10px;bottom:10px;border-right-width:1px;border-bottom-width:1px}
.vf .rd{position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;font-variant-numeric:tabular-nums}
.vf .rd-bl{left:34px;bottom:14px}
.vf .rd-br{right:34px;bottom:14px;display:flex;gap:14px;align-items:center}
.vf .rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--tally);box-shadow:0 0 10px var(--tally-glow);animation:tally 2.4s ease-in-out infinite}
@keyframes tally{0%,100%{opacity:1}50%{opacity:.35}}

/* ─────────── HUD / header ─────────── */
.hud{position:fixed;z-index:65;left:0;right:0;top:0;height:calc(var(--hud-h) + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) var(--g) 0;
  display:flex;align-items:center;justify-content:space-between;gap:24px;transition:background .5s var(--ease),transform .5s var(--ease)}
.hud::before{content:"";position:absolute;inset:0 0 -28px;background:linear-gradient(rgba(7,8,10,.94) 0,rgba(7,8,10,.9) calc(100% - 28px),rgba(7,8,10,0));opacity:0;transition:opacity .5s;pointer-events:none;z-index:-1}
.hud.solid::before{opacity:1}
.hud.hide{transform:translateY(-110%)}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand .gl{width:16px;height:16px;display:block}
.brand .wm{height:13px;width:auto;display:block}
.nav{display:flex;align-items:center;gap:clamp(14px,2.2vw,34px)}
.nav a{position:relative;font-size:13.5px;font-weight:420;letter-spacing:.01em;padding:6px 0;color:var(--paper2);transition:color .25s}
.nav a:hover{color:var(--paper)}
.nav a[aria-current="page"]{color:var(--tally-text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:var(--tally);box-shadow:0 0 8px var(--tally-glow)}
.hud-r{display:flex;align-items:center;gap:18px}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
.lang a{padding:5px 6px;color:var(--mute-text);border:1px solid transparent}
.lang a[aria-current="true"]{color:var(--paper);border-color:var(--hair)}
.menu-btn{display:none;width:40px;height:40px;position:relative}
.menu-btn span{position:absolute;left:9px;right:9px;height:1px;background:var(--paper);transition:transform .4s var(--ease),opacity .3s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:20px}.menu-btn span:nth-child(3){top:26px}
.menu-open .menu-btn span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn span:nth-child(2){opacity:0}
.menu-open .menu-btn span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{position:fixed;inset:0;z-index:64;background:rgba(7,8,10,.97);display:flex;flex-direction:column;justify-content:center;padding:calc(var(--hud-h) + 20px) var(--g) 40px;
  clip-path:inset(0 0 100% 0);transition:clip-path .7s var(--ease-io),visibility 0s .7s;overflow:hidden;visibility:hidden}
.menu-open .mnav{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--ease-io)}
.mnav a{display:block;font-size:clamp(34px,9vw,64px);font-weight:250;line-height:1.15;padding:4px 0;border-bottom:1px solid var(--faint)}
.mnav a b{font-stretch:118%}
.mnav a[aria-current="page"]{color:var(--tally-text)}
.mnav .dial{position:absolute;right:-18vw;bottom:-18vw;width:70vw;max-width:560px;opacity:.28;pointer-events:none}
.mnav .mlang{margin-top:28px;display:flex;gap:10px}

/* ─────────── shutter (page cut) ─────────── */
.shutter{position:fixed;inset:0;z-index:95;pointer-events:none}
.shutter i{position:absolute;left:0;right:0;height:50.5%;background:#000;transform:scaleY(0);transition:transform .25s var(--ease-io)}
.shutter i:first-child{top:0;transform-origin:50% 0}.shutter i:last-child{bottom:0;transform-origin:50% 100%}
.shutter.close i{transform:scaleY(1)}

/* ─────────── generic media ─────────── */
.media{position:relative;overflow:hidden;background:var(--ink2)}
.media>img,.media>video,.media>canvas,.media>picture img{width:100%;height:100%;object-fit:cover}
.media>picture{display:block;width:100%;height:100%}
.media>img,.media>video,.media>canvas,.media>picture{position:absolute;inset:0}
.tier .mono-lith>.media,.proven .bgv>.media{position:absolute;inset:0}
.ratio-16x9{aspect-ratio:16/9}.ratio-239{aspect-ratio:2.39/1}.ratio-9x16{aspect-ratio:9/16}.ratio-4x5{aspect-ratio:4/5}
.vid-ui{position:absolute;right:10px;bottom:10px;z-index:5;display:flex;gap:6px}
.vid-ui button{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;background:rgba(7,8,10,.62);border:1px solid var(--hair);color:var(--paper2)}
.vid-ui button:hover{color:var(--paper);border-color:var(--hair2)}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;z-index:4;
  background:rgba(7,8,10,.35);border:1px solid rgba(236,235,230,.55);transition:transform .5s var(--ease),background .3s,border-color .3s;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.play::after{content:"";width:0;height:0;border-left:17px solid var(--paper);border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.play::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:1px solid var(--tally);opacity:.0;transform:scale(.8);transition:opacity .4s,transform .6s var(--ease)}
.facade:hover .play,.play:focus-visible{transform:scale(1.06);background:rgba(218,20,20,.18);border-color:var(--paper)}
.facade:hover .play::before{opacity:1;transform:scale(1)}
.facade{display:block;position:relative;cursor:pointer;width:100%;text-align:left}
.facade .media img{transition:transform 1.4s var(--ease),filter .6s}
.facade:hover .media img{transform:scale(1.035);filter:brightness(1.08)}
.facade .cap{display:flex;justify-content:space-between;gap:16px;margin-top:12px;flex-wrap:wrap}
.facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:7}
.embed-note{font-family:var(--mono);font-size:10px;letter-spacing:.08em;color:var(--mute-text)}

/* ─────────── buttons ─────────── */
.btn{display:inline-flex;align-items:center;gap:12px;padding:14px 22px;border:1px solid var(--hair2);font-size:13px;font-weight:520;letter-spacing:.06em;text-transform:uppercase;font-stretch:108%;
  position:relative;overflow:hidden;transition:color .35s,border-color .35s;isolation:isolate}
.btn::before{content:"";position:absolute;inset:0;background:var(--paper);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease);z-index:-1}
.btn:hover{color:var(--ink);border-color:var(--paper)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn .dot{width:7px;height:7px;background:var(--tally);border-radius:50%;box-shadow:0 0 8px var(--tally-glow)}
.btn.ext::after{content:"↗";font-size:13px;margin-left:2px}
.btn.solid{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.solid::before{background:var(--tally)}
.btn.solid:hover{color:#fff;border-color:var(--tally)}

/* ─────────── headings ─────────── */
.h1{font-size:var(--f-h1);line-height:.9;font-weight:200}
.h2{font-size:var(--f-h2);line-height:.96;font-weight:220}
.h3{font-size:var(--f-h3);line-height:1.02;font-weight:260}
.h4{font-size:var(--f-h4);line-height:1.15;font-weight:320}
.lead{font-size:var(--f-lead);line-height:1.55;font-weight:300;color:var(--paper2)}
.prose p+p{margin-top:1.1em}
.prose{max-width:66ch}

/* ─────────── HERO (film frame) ─────────── */
.hero-film{--ap:calc(100vw / 2.39);position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:#000}
.hero-film .layer{position:absolute;inset:0;width:100%;height:100%}
.hero-film .still{object-fit:cover;object-position:50% 45%}
.hero-film canvas.layer{z-index:2}
.hero-film .lb{position:absolute;left:0;right:0;height:calc((100% - var(--ap))/2);min-height:0;background:#000;z-index:4;transform-origin:50% 0}
.hero-film .lb.b{bottom:0;transform-origin:50% 100%}
.hero-film .lb.t{top:0}
.hero-film .vig{position:absolute;inset:0;z-index:3;background:radial-gradient(130% 90% at 50% 45%,transparent 50%,rgba(0,0,0,.6) 100%),linear-gradient(transparent 70%,rgba(7,8,10,.8));pointer-events:none}
.glyph-x{position:absolute;left:50%;top:50%;z-index:5;width:clamp(96px,13vw,200px);aspect-ratio:1;transform:translate(-50%,-50%)}
.glyph-x svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glyph-x .r{mix-blend-mode:screen;opacity:.85}
.glyph-x .ch-r path{fill:#ff2a2a}.glyph-x .ch-c path{fill:#29e0ff}.glyph-x .ch-w path{fill:#fff}
.hero-film .hcap{position:absolute;z-index:6;left:var(--g);right:var(--g);bottom:calc(max(22px,(100% - var(--ap))/2) + 18px);display:flex;justify-content:space-between;align-items:flex-end;gap:18px}
.hero-film .cue{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--paper2);display:flex;align-items:center;gap:10px}
.hero-film .cue i{display:block;width:1px;height:34px;background:linear-gradient(var(--paper),transparent);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* strip hero (sub pages) */
.strip{position:relative;height:clamp(220px,31vw,460px);overflow:hidden;background:#000;margin-top:0}
.strip .media{position:absolute;inset:0}
.strip .media video,.strip .media img{width:100%;height:100%;object-fit:cover}
.strip::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(7,8,10,.82),rgba(7,8,10,.35) calc(var(--hud-h) + 30px),transparent calc(var(--hud-h) + 90px),transparent 60%,var(--ink));pointer-events:none}

/* ─────────── HOME: intro ─────────── */
.intro{padding-block:clamp(90px,11vw,170px) clamp(70px,8vw,130px)}
.intro .h-main{font-size:clamp(34px,4.4vw,72px);line-height:1.08;font-weight:180;max-width:22ch}
.intro .h-main b{font-weight:800}
.intro .h-main .n{font-weight:200}
.intro .meta{display:flex;justify-content:space-between;align-items:center;margin-top:34px;padding-top:14px;border-top:1px solid var(--hair)}
.intro .cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,2fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);margin-top:clamp(40px,5vw,72px);align-items:start}
.intro .c1{font-size:clamp(18px,1.55vw,24px);line-height:1.5;font-weight:280}
.intro .c1 .sl{display:block;font-family:var(--mono);font-size:12px;color:var(--mute-text);letter-spacing:.2em;margin-bottom:12px}
.intro .c3{font-size:clamp(17px,1.35vw,21px);line-height:1.55;font-weight:280;color:var(--paper2)}
.intro .c3 p+p{margin-top:1em}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);transition:border-color .3s,background .3s}
.socials a:hover{border-color:var(--paper);background:rgba(255,255,255,.04)}
.socials svg{width:16px;height:16px;fill:var(--paper)}
.hudscreen{width:58px;height:36px;margin-top:28px;opacity:.9}

/* ─────────── HOME: TGR teaser ─────────── */
.tgr-teaser{padding-block:clamp(60px,8vw,120px);background:linear-gradient(var(--ink),#0b0c0f 18%,#0b0c0f 82%,var(--ink))}
.knock{position:relative;overflow:hidden;background:#000;isolation:isolate}
.knock video,.knock img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.knock .kt{position:relative;z-index:2;background:#000;color:#fff;mix-blend-mode:multiply;margin:0;padding:.06em .02em .02em;text-align:center;
  font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.84;letter-spacing:-.01em;font-size:clamp(58px,13.2vw,236px)}
.knock .kt span{display:block}
.tgr-teaser .syn{max-width:880px;margin:clamp(34px,4vw,56px) auto 0;text-align:center;font-size:clamp(17px,1.5vw,22px);line-height:1.6;font-weight:280;color:var(--paper2)}
.tgr-teaser .syn .sl,.intro .c1 .sl{display:block;font-family:var(--mono);color:var(--mute-text);letter-spacing:.2em;font-size:12px;margin-bottom:10px}
.tgr-teaser .facade{max-width:1040px;margin:clamp(40px,5vw,72px) auto 0}

/* HUD dial band */
.dialband{height:clamp(260px,28vw,420px);display:grid;place-items:center;background:#1a1b1d;overflow:hidden}
.dial{width:min(440px,70vw);aspect-ratio:1;overflow:visible}
.dial *{vector-effect:non-scaling-stroke}

/* collaborate */
.collab-h{padding-block:clamp(50px,6vw,90px);text-align:center}
.collab-h h2{font-size:var(--f-h2);font-weight:780;line-height:1}
.collab-h h2 .t{font-weight:120}
.fullvid{position:relative;height:min(62vw,100svh);min-height:340px;overflow:hidden;background:#000}
.fullvid .media{position:absolute;inset:0}
.fullvid video,.fullvid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* logo wall */
.logos{padding-block:clamp(70px,8vw,120px);overflow:hidden;position:relative}
.logos .dial-l,.logos .dial-r{position:absolute;top:50%;width:min(36vw,420px);transform:translateY(-50%);opacity:.22;pointer-events:none}
.logos .dial-l{left:-12vw}.logos .dial-r{right:-12vw}
.logos .h3x{text-align:center;font-size:clamp(16px,1.3vw,19px);font-weight:420;letter-spacing:.04em;color:var(--paper2)}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(36px,4vw,60px);border-top:1px solid var(--faint);border-left:1px solid var(--faint);position:relative;z-index:1}
.wall li{list-style:none;position:relative;min-height:clamp(96px,9vw,132px);display:grid;place-items:center;border-right:1px solid var(--faint);border-bottom:1px solid var(--faint);padding:16px;overflow:hidden}
.wall li .nm{font-weight:820;font-stretch:122%;text-transform:uppercase;font-size:clamp(13px,1.35vw,20px);letter-spacing:.02em;text-align:center;line-height:1.1;transition:letter-spacing .6s var(--ease),color .4s}
.wall li:hover .nm{letter-spacing:.12em;color:#fff}
.wall li img{max-height:38px;width:auto;filter:brightness(0) invert(1);opacity:.92}
.wall li::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 80% at var(--mx,50%) var(--my,50%),rgba(255,255,255,.06),transparent 70%);opacity:0;transition:opacity .4s}
.wall li:hover::after{opacity:1}

/* ─────────── FOOTER / contact ─────────── */
.foot{position:relative;padding-block:clamp(70px,8vw,120px) 26px;border-top:1px solid var(--faint);background:linear-gradient(var(--ink),#050607)}
.foot .cols{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:28px}
.foot h2,.foot h6,.foot .fh{font-size:14px;font-weight:620;letter-spacing:.02em;margin-bottom:14px;color:var(--paper)}
.foot p,.foot address{font-style:normal;font-size:14px;line-height:1.65;color:var(--paper2);font-weight:320}
.foot .cols a{overflow-wrap:anywhere}
.foot a{border-bottom:1px solid var(--hair);transition:border-color .3s,color .3s}
/* stacked footer links: each one at least 24px tall (WCAG 2.5.8) */
.foot .fl a{display:inline-block;min-height:24px;padding-block:2px;line-height:20px;vertical-align:top}
.foot a:hover{color:#fff;border-color:var(--tally)}
.foot .socials a{border-bottom:1px solid var(--hair)}
.foot .big{margin-top:clamp(60px,7vw,110px);opacity:.95}
.foot .big svg{width:100%;height:auto;display:block}
.foot .fine{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding:14px 0 34px;border-top:1px solid var(--faint)}

/* ─────────── TGR page ─────────── */
.tgr-main{padding-block:clamp(60px,7vw,110px)}
.tgr-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(28px,5vw,90px);align-items:start}
.scrub-col{position:sticky;top:calc(var(--hud-h) + 24px)}
.scrub{position:relative;aspect-ratio:9/16;background:#000;overflow:hidden;max-height:calc(100vh - var(--hud-h) - 90px);margin-inline:auto}
.scrub canvas{position:absolute;inset:0;width:100%;height:100%}
.scrub .rd{position:absolute;left:10px;right:10px;bottom:10px;z-index:3;display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--paper2);font-variant-numeric:tabular-nums}
.scrub .prog{position:absolute;left:0;bottom:0;height:2px;background:var(--tally);width:0;z-index:3;box-shadow:0 0 8px var(--tally-glow)}
.tgr-title{font-size:clamp(40px,6.4vw,110px);line-height:.92;font-weight:180;text-transform:uppercase;padding-top:12px;border-top:1px solid var(--hair2)}
.tgr-title b{font-weight:840}
.tgr-text{margin-top:clamp(28px,3vw,48px);font-size:clamp(17px,1.3vw,20px);line-height:1.72;font-weight:300;color:var(--paper2)}
.tgr-text p{max-width:62ch}
.tgr-text p+p{margin-top:1.2em}
.tgr-text p.pull{color:var(--paper);font-size:clamp(22px,2.2vw,34px);line-height:1.3;font-weight:320;white-space:pre-line}
.join{position:relative;min-height:clamp(340px,40vw,560px);display:grid;place-items:center;text-align:center;overflow:hidden;background:#000}
.join .bg{position:absolute;inset:-6% 0;width:100%;height:112%;object-fit:cover;filter:grayscale(.2) contrast(1.05) brightness(.62)}
.join .ht{position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.55) 1px,transparent 1.6px);background-size:5px 5px;mix-blend-mode:multiply;opacity:.6}
.join .in{position:relative;z-index:2;padding:40px var(--g);display:grid;gap:16px;justify-items:center}
.join h2{font-size:clamp(40px,6.4vw,104px);font-weight:160;line-height:.95}
.join h2 b{font-weight:840}
.join p{font-size:clamp(16px,1.5vw,22px);font-weight:620}
.tgr-soc{padding-block:clamp(60px,7vw,110px);display:grid;justify-items:center;gap:18px}
.tgr-soc .socials a{width:56px;height:56px}
.tgr-soc .socials svg{width:20px;height:20px}

/* contact sheet */
.sheet-wrap{padding-block:clamp(40px,5vw,90px) clamp(70px,8vw,130px);perspective:1400px;overflow:hidden}
.sheet{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.7vw,12px);padding:clamp(14px,1.6vw,26px);background:#0b0c0e;border:1px solid var(--faint);
  transform-origin:50% 0;transform-style:preserve-3d;position:relative}
.sheet::before,.sheet::after{content:"";position:absolute;left:0;right:0;height:10px;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(236,235,230,.14) 14px 22px)}
.sheet::before{top:2px}.sheet::after{bottom:2px}
.sheet figure{margin:0;position:relative;cursor:zoom-in}
.sheet figure .media{aspect-ratio:16/9}
.sheet figure.w2{grid-column:span 2}
.sheet figure.w2 .media{aspect-ratio:auto;height:100%}
.sheet figure img{transition:transform .9s var(--ease),filter .5s;filter:saturate(.9)}
.sheet figure:hover img{transform:scale(1.05);filter:saturate(1.1)}
.sheet figcaption{position:absolute;left:6px;bottom:5px;font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#f2d24b;text-shadow:0 1px 2px #000;pointer-events:none}

/* lightbox / cinema */
.lbx{position:fixed;inset:0;z-index:92;background:rgba(3,4,5,.96);display:grid;grid-template-rows:auto 1fr auto;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.lbx.open{opacity:1;visibility:visible;transition:opacity .4s}
.lbx .bar{display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) var(--g) 14px}
.lbx .stage{position:relative;display:grid;place-items:center;padding:0 var(--g);min-height:0}
.lbx .stage img,.lbx .stage video{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 120px rgba(0,0,0,.6)}
.lbx .stage .slatebox{position:relative;inset:auto;width:min(900px,90vw);aspect-ratio:16/9}
.lbx .nav2{display:flex;justify-content:center;gap:10px;padding:14px var(--g) calc(18px + env(safe-area-inset-bottom,0px))}
.lbx .nav2 button,.lbx .x{font-family:var(--mono);font-size:11px;letter-spacing:.16em;border:1px solid var(--hair);padding:9px 14px;text-transform:uppercase}
.lbx .nav2 button:hover,.lbx .x:hover{border-color:var(--paper)}
.lbx .ttl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--dim);text-transform:uppercase}
.lbx .stage>div:last-child .desc{margin-top:8px}
.lbx .desc{max-width:680px;margin:14px auto 0;text-align:center;color:var(--paper2);font-size:15px}

/* ─────────── BRANDS ─────────── */
.b-intro{padding-block:clamp(60px,7vw,110px) clamp(30px,3vw,50px)}
.b-intro h2{font-size:clamp(30px,3.9vw,64px);line-height:1.08;font-weight:180;max-width:24ch}
.b-intro h2 b{font-weight:800}
.b-intro .meta{display:flex;justify-content:space-between;align-items:center;margin-top:30px;padding-top:14px;border-top:1px solid var(--hair)}
.b-intro .sub{margin-top:26px;max-width:46ch;font-size:clamp(17px,1.5vw,22px);line-height:1.5;font-weight:280;color:var(--paper2)}
.rack{position:relative;padding-block:clamp(20px,3vw,40px) clamp(60px,7vw,110px)}
.rack-pin{position:relative;overflow:hidden}
.rack-track{display:flex;gap:clamp(12px,1.4vw,22px);padding-inline:var(--g);will-change:transform}
.cat{flex:0 0 clamp(280px,40vw,640px);position:relative}
.cat .media{aspect-ratio:3/4}
.cat .media video,.cat .media img{transition:transform 1.2s var(--ease),filter .6s}
.cat:hover .media video,.cat:hover .media img{transform:scale(1.04)}
.cat .ov{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(16px,1.8vw,28px);
  background:linear-gradient(transparent 38%,rgba(5,6,7,.9));pointer-events:none}
.cat .idx{position:absolute;right:14px;top:12px;z-index:4;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--paper2)}
.cat h3{font-size:clamp(22px,2.1vw,34px);font-weight:760;font-stretch:112%;line-height:1.05}
.cat p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--paper2);max-width:42ch}
.rack-pin.native{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.rack-pin.native .cat{scroll-snap-align:start}
.rack-bar{margin:22px var(--g) 0;height:1px;background:var(--faint);position:relative}
.rack-bar b{position:absolute;left:0;top:0;height:1px;width:0;background:var(--tally);box-shadow:0 0 8px var(--tally-glow)}
.reel{padding-block:clamp(60px,7vw,110px)}
.reel h2{text-align:center;font-size:var(--f-h2);font-weight:180}
.reel h2 b{font-weight:800}
.reel .facade{margin-top:clamp(34px,4vw,60px)}
.collage{padding-block:clamp(40px,5vw,80px);overflow:hidden;display:grid;gap:clamp(8px,.9vw,14px)}
.crow{display:flex;gap:clamp(8px,.9vw,14px);width:max-content;will-change:transform}
.crow figure{margin:0;flex:0 0 auto;height:clamp(150px,19vw,300px);aspect-ratio:16/9;position:relative;cursor:zoom-in}
.crow figure.wide{aspect-ratio:2.2/1}
.crow figure .media{position:absolute;inset:0}
.crow figure img{transition:transform 1s var(--ease)}
.crow figure:hover img{transform:scale(1.05)}
.process{padding-block:clamp(70px,8vw,120px)}
.process .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px)}
.process h2{font-size:var(--f-h2);font-weight:780;line-height:1}
.process h2 .t{font-weight:120}
.process .pl{margin-top:26px;font-size:16px;line-height:1.7;color:var(--paper2);white-space:pre-line;max-width:52ch}
.process .btn{margin-top:28px}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:st}
.steps li{position:relative;padding:26px 0 26px 74px;border-top:1px solid var(--faint)}
.steps li:last-child{border-bottom:1px solid var(--faint)}
.steps li::before{counter-increment:st;content:"0" counter(st);position:absolute;left:0;top:28px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--tally-text)}
.steps li .fill{position:absolute;left:0;top:-1px;height:1px;width:100%;background:var(--paper);transform:scaleX(0);transform-origin:left}
.steps h3{font-size:clamp(20px,1.8vw,26px);font-weight:720;font-stretch:110%}
.steps p{margin-top:10px;font-size:15px;line-height:1.65;color:var(--paper2);max-width:56ch}
.ways{padding-block:clamp(50px,6vw,90px) 0;text-align:center}
.ways h2{font-size:var(--f-h2);font-weight:780;line-height:1}
.ways h2 .t{font-weight:120}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,40px);padding-block:clamp(40px,5vw,70px);perspective:1200px}
.tier{position:relative;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.tier .mono-lith{position:relative;aspect-ratio:9/16;max-height:620px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:translateZ(0)}
.tier .mono-lith img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.78) saturate(.9)}
.tier:hover .mono-lith img{transform:scale(1.05);filter:brightness(.9) saturate(1)}
.tier .glare{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.14) 48%,transparent 62%);transform:translateX(var(--gx,-60%));pointer-events:none;mix-blend-mode:screen}
.tier .tt{position:absolute;left:0;right:0;bottom:0;padding:22px;z-index:2;text-align:center;background:linear-gradient(transparent,rgba(0,0,0,.75))}
.tier h3{font-size:clamp(22px,2.1vw,32px);font-weight:800;line-height:1.05;white-space:pre-line}
.tier h3 .t{display:block;font-weight:140;color:var(--paper2)}
.tier .desc{margin-top:20px;font-size:15px;line-height:1.65;color:var(--paper2);text-align:left}
.tier .price{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.12em;color:var(--paper);padding-top:12px;border-top:1px solid var(--faint);text-transform:uppercase}
.custom{padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,120px);text-align:center}
.custom h2{font-size:clamp(26px,2.8vw,44px);font-weight:740;line-height:1.15}
.custom p{margin-top:18px;font-size:clamp(17px,1.6vw,24px);font-weight:180;color:var(--paper2);white-space:pre-line}
.forbrands{padding-block:clamp(70px,8vw,120px);background:linear-gradient(var(--ink),#101215 12%,#101215 88%,var(--ink))}
.forbrands .grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,7fr);gap:clamp(28px,5vw,90px);align-items:start}
.forbrands .vert{position:sticky;top:calc(var(--hud-h) + 30px)}
.forbrands .vert .media{aspect-ratio:9/16}
.fb-title{font-size:clamp(40px,5vw,84px);font-weight:160;line-height:.95;text-transform:uppercase;padding-top:12px;border-top:1px solid var(--hair2)}
.fb-title b{font-weight:840}
.serif-sub{font-family:var(--serif);font-style:italic;font-weight:420;font-size:clamp(22px,2.1vw,34px);line-height:1.25;margin-top:clamp(22px,2.4vw,36px);letter-spacing:.01em}
.fb-body{margin-top:clamp(20px,2vw,30px);font-size:16px;line-height:1.75;color:var(--paper2);max-width:70ch}
.fb-body p+p{margin-top:1em}
.spec{margin-top:clamp(36px,4vw,60px)}
.spec .lab{margin-bottom:14px;display:block}
.spec .cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair)}
.spec ul{list-style:none;margin:0;padding:0}
.spec li{padding:12px 14px 12px 0;border-bottom:1px solid var(--faint);font-size:15px;display:flex;gap:10px;align-items:baseline}
.spec li::before{content:"■";font-size:8px;color:var(--tally);transform:translateY(-2px)}
.spec+.btn{margin-top:32px}
.monitors{padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,120px)}
.monitors .grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(6px,.8vw,12px)}
.monitors figure{margin:0;position:relative;cursor:zoom-in}
.monitors .media{aspect-ratio:16/10}
.monitors figure:nth-child(7n+1){grid-column:span 2;grid-row:span 2}
.monitors figure:nth-child(7n+1) .media{aspect-ratio:auto;height:100%}
.monitors img{transition:transform 1s var(--ease),filter .5s;filter:brightness(.9)}
.monitors figure:hover img{transform:scale(1.05);filter:brightness(1.05)}

/* ─────────── MOTION PANELS ─────────── */
.mp{--acc:var(--signal)}
.mp-hud .pw{display:flex;align-items:center;gap:12px}
.mp-hud .pw .gl{width:30px;height:30px}
.mp-hud .pw small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;line-height:1.2}
.mp-hud .pw .wm{height:11px}
.mp-hud .fc{padding:9px 16px;border:1px solid rgba(180,231,255,.55);color:var(--signal);font-size:12px;font-weight:560;letter-spacing:.06em;text-transform:uppercase;transition:background .3s,color .3s}
.mp-hud .fc:hover{background:var(--signal);color:var(--ink)}
.mp-hud .socials a{width:32px;height:32px;border-color:transparent}
.mp-hero{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;background:radial-gradient(90% 70% at 50% 110%,#1b2530 0%,#0a0d10 45%,#050607 100%)}
.mp-hero .floor{position:absolute;left:-20%;right:-20%;bottom:-10%;height:46%;background:
  repeating-linear-gradient(90deg,rgba(180,231,255,.08) 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,rgba(180,231,255,.08) 0 1px,transparent 1px 80px);
  transform:perspective(600px) rotateX(64deg);transform-origin:50% 100%;mask-image:linear-gradient(transparent,#000 50%)}
.mp-hero .stage{position:relative;height:100vh;height:100svh;display:grid;place-items:center;perspective:1500px}
.stele{position:relative;width:clamp(200px,24vw,340px);aspect-ratio:9/16;transform-style:preserve-3d;will-change:transform}
.stele .face{position:absolute;inset:0;background:#000;overflow:hidden;box-shadow:0 0 0 6px #15181c,0 0 0 7px #2a2f35,0 40px 120px rgba(0,0,0,.7),0 0 90px rgba(180,231,255,.12)}
.stele .face canvas,.stele .face img,.stele .face video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stele .side{position:absolute;top:-6px;bottom:-6px;width:44px;background:linear-gradient(90deg,#0f1114,#23272c);transform-origin:left;right:-44px;transform:rotateY(90deg) translateZ(0)}
.stele .side.l{left:-44px;right:auto;transform-origin:right;transform:rotateY(-90deg)}
.stele .base{position:absolute;left:12%;right:12%;bottom:-18%;height:18%;background:linear-gradient(#181b1f,#0b0c0e);transform:translateZ(-10px)}
.stele .refl{position:absolute;left:0;right:0;top:100%;height:60%;transform:scaleY(-1);opacity:.14;filter:blur(3px);overflow:hidden;mask-image:linear-gradient(rgba(0,0,0,.9),transparent 70%)}
.mp-hero .ttl{position:absolute;inset:0;z-index:3;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(var(--hud-h) + 40px) var(--g) clamp(40px,6vw,90px)}
.mp-hero h1{font-size:clamp(46px,8.4vw,150px);line-height:.88;font-weight:130;text-transform:uppercase;text-shadow:0 10px 60px rgba(0,0,0,.6)}
.mp-hero h1 b{font-weight:860}
.mp-hero h2{align-self:flex-end;text-align:right;font-size:clamp(20px,2.3vw,38px);font-weight:200;line-height:1.1;max-width:10ch;color:var(--paper2)}
.mp-transform{padding-block:clamp(70px,8vw,120px) clamp(40px,4vw,60px)}
.mp-transform h2{font-size:clamp(32px,4.4vw,74px);font-weight:760;line-height:1.08;max-width:22ch}
.mp-transform h2 .t{font-weight:130}
.mp-transform .meta{display:flex;justify-content:space-between;margin-top:26px;padding-top:12px;border-top:1px solid var(--hair)}
.marquee{overflow:hidden;border-block:1px solid var(--faint);padding-block:24px;margin-top:10px;position:relative}
.marquee .tr{display:flex;gap:clamp(40px,5vw,90px);width:max-content;animation:mq 38s linear infinite;align-items:center}
.marquee .tr span{font-weight:840;font-stretch:122%;text-transform:uppercase;font-size:clamp(16px,1.7vw,26px);letter-spacing:.03em;color:var(--paper2);white-space:nowrap}
.marquee .tr img{height:28px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.marquee:hover .tr{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.grab{padding-block:clamp(70px,8vw,120px);background:#121418}
.grab .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,5vw,90px);align-items:center}
.grab h3{font-size:clamp(34px,4vw,64px);font-weight:160;text-transform:uppercase;letter-spacing:.06em;line-height:1;text-align:right;padding-top:12px;border-top:1px solid var(--hair2)}
.grab h3 b{font-weight:840}
.grab .gl1{margin-top:28px;text-align:right;font-size:clamp(19px,1.8vw,26px);line-height:1.4;font-weight:300;white-space:pre-line}
.grab .gl2{margin-top:24px;text-align:right;font-style:italic;font-size:clamp(16px,1.4vw,19px);line-height:1.55;color:var(--paper2);white-space:pre-line}
.ba{display:grid;gap:clamp(20px,2.4vw,36px)}
.ba-head{display:grid;grid-template-columns:1fr 60px 1fr;text-align:center}
.ba-head h3{font-size:clamp(20px,2vw,30px);letter-spacing:.3em;font-weight:780;text-transform:uppercase;border:0;padding:0;text-align:center}
.ba-row{display:grid;grid-template-columns:1fr 60px 1fr;align-items:center}
.ba-row figure{margin:0;display:grid;gap:10px;justify-items:center}
.ba-row .media{width:min(100%,210px);aspect-ratio:9/16}
.ba-row figcaption{font-size:14px;color:var(--paper2);text-align:center}
.ba-row .arr{display:grid;place-items:center}
.ba-row .arr svg{width:38px;height:38px;stroke:var(--paper);fill:none;stroke-width:1.5}
.ba-or{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--dim)}
.tier-row{padding-block:clamp(60px,7vw,110px);border-top:1px solid var(--faint)}
.tier-row .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:center}
.tier-row.flip .grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.tier-row.flip .tmedia{order:2}
.tmedia{display:grid;place-items:center;perspective:1200px}
.tmedia .media{width:min(100%,360px);aspect-ratio:9/16;box-shadow:0 0 0 5px #15181c,0 0 0 6px #2a2f35,0 40px 100px rgba(0,0,0,.6);transform:rotateY(var(--ry,-10deg)) rotateX(2deg)}
.tier-row.flip .tmedia .media{--ry:10deg}
.tier-row h3{font-size:clamp(32px,3.8vw,60px);font-weight:160;text-transform:uppercase;letter-spacing:.08em;line-height:1;padding-top:12px;border-top:1px solid var(--hair2)}
.tier-row h3 b{font-weight:860}
.tier-row h4{margin-top:22px;font-size:clamp(20px,1.9vw,28px);line-height:1.3;font-weight:320}
.tier-row .bl{margin-top:22px;display:grid;gap:8px;font-size:14.5px;color:var(--paper2)}
.tier-row .bl p .sq{color:var(--acc)}
.tier-row .ideal{margin-top:22px;font-size:14.5px;line-height:1.6;color:var(--paper2);white-space:pre-line}
.tier-row .ideal b{color:var(--paper);font-weight:700}
.tier-row .price{margin-top:clamp(26px,3vw,44px);font-size:clamp(26px,3.2vw,48px);font-weight:200;letter-spacing:.14em;text-transform:lowercase}
.tier-row .price b{font-weight:860;letter-spacing:.06em}
.tier-row .btn{margin-top:22px;border-color:rgba(180,231,255,.6);color:var(--signal)}
.tier-row .btn::before{background:var(--signal)}
.tier-row .btn:hover{color:var(--ink)}
.depth-card{position:relative}
.depth-card canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.feats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.feats .f{padding:clamp(20px,2.4vw,40px) clamp(16px,1.6vw,26px);min-height:clamp(220px,20vw,300px);position:relative;overflow:hidden}
.feats .f:nth-child(1){background:#5c2f47}.feats .f:nth-child(2){background:#4c3450}.feats .f:nth-child(3){background:#3d3a58}.feats .f:nth-child(4){background:#2e3f5d}.feats .f:nth-child(5){background:#274a6b}
.feats .f::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(255,255,255,.08),transparent 40%);pointer-events:none}
.feats h3{font-size:clamp(17px,1.35vw,21px);font-weight:760;line-height:1.2}
.feats p{margin-top:14px;font-size:14px;line-height:1.55;color:rgba(236,235,230,.86)}
.proven{position:relative;padding-block:clamp(80px,9vw,140px);overflow:hidden}
.proven .bgv{position:absolute;inset:0}
.proven .bgv video,.proven .bgv img{width:100%;height:100%;object-fit:cover}
.proven .bgv::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,8,10,.86),rgba(7,8,10,.45) 60%,rgba(7,8,10,.7))}
.proven .grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(30px,5vw,90px);align-items:center}
.proven .rows{list-style:none;margin:0;padding:0}
.proven .rows li{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair)}
.proven .rows li:first-child{border-top:1px solid var(--hair)}
.proven .rows h4{font-size:clamp(17px,1.5vw,22px);font-weight:620}
.proven .rows button{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border:1px solid var(--hair2);transition:background .3s,color .3s}
.proven .rows button:hover{background:var(--paper);color:var(--ink)}
.proven h3{font-size:clamp(34px,4vw,66px);font-weight:820;line-height:1.02}
.proven .pp{margin-top:22px;font-size:17px;line-height:1.65;color:var(--paper2)}
dialog.pop{border:1px solid var(--hair2);background:#0c0e11;color:var(--paper);max-width:min(560px,92vw);padding:clamp(24px,3vw,40px);box-shadow:0 40px 140px rgba(0,0,0,.7)}
dialog.pop::backdrop{background:rgba(3,4,5,.72);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog.pop h3{font-size:clamp(24px,2.4vw,34px);font-weight:760;line-height:1.1}
dialog.pop p{margin-top:16px;font-size:16px;line-height:1.7;color:var(--paper2)}
dialog.pop form{margin-top:24px;display:flex;justify-content:flex-end}
.interest{padding-block:clamp(60px,7vw,100px) clamp(30px,3vw,40px);background:#101215}
.interest h3{font-size:clamp(30px,3.6vw,58px);font-weight:760;line-height:1.08;max-width:18ch}
.interest h3 .y{display:block;font-weight:200;color:var(--signal)}
.faq{padding-block:clamp(80px,9vw,140px)}
.faq .list{max-width:920px;margin:clamp(34px,4vw,60px) 0 0}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-size:clamp(16px,1.3vw,19px);font-weight:420}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{position:relative;width:14px;height:14px;flex:0 0 14px}
.faq summary i::before,.faq summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--paper);transition:transform .4s var(--ease)}
.faq summary i::after{transform:rotate(90deg)}
.faq details[open] summary i::after{transform:rotate(0)}
.faq .ans{padding:0 0 26px;color:var(--paper2);font-size:15.5px;line-height:1.7;max-width:74ch}
.faq .ans p+p{margin-top:.7em}
.faq .ans .gap{height:.4em}
.steles{padding-block:clamp(40px,5vw,80px) clamp(80px,9vw,140px);perspective:1600px;overflow:hidden}
.steles .row{display:flex;gap:clamp(12px,1.4vw,22px);justify-content:center;transform-style:preserve-3d;padding-inline:var(--g)}
.steles figure{margin:0;flex:0 0 clamp(120px,11.4vw,190px);transform-style:preserve-3d;cursor:zoom-in}
.steles .media{aspect-ratio:9/16;box-shadow:0 0 0 3px #15181c,0 0 0 4px #2a2f35,0 30px 60px rgba(0,0,0,.6)}
.steles figcaption{margin-top:12px;font-family:var(--mono);font-size:9px;letter-spacing:.1em;color:var(--mute-text);text-align:center;word-break:break-all}

/* ─────────── IMPRINT ─────────── */
.imp-banner{position:relative;height:clamp(260px,40vw,640px);overflow:hidden;background:#000}
.imp-banner img,.imp-banner canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.imp-banner canvas{z-index:2}
.imp-banner .glyph-x{z-index:4;width:clamp(80px,10vw,150px)}
.legal{padding-block:clamp(60px,7vw,110px)}
.legal .body{max-width:78ch;font-size:15px;line-height:1.75;color:var(--paper2)}
.legal .body h2{font-size:clamp(40px,5vw,80px);font-weight:840;font-stretch:120%;line-height:1;color:var(--paper);margin-bottom:28px}
.legal .body h3{font-size:18px;font-weight:720;color:var(--paper);margin:2.2em 0 .6em}
.legal .body p{margin:0 0 .9em;white-space:pre-line}
.legal .wrap{display:grid;grid-template-columns:minmax(0,78ch) minmax(0,1fr);gap:clamp(40px,6vw,120px);align-items:start}
.legal .toc{position:sticky;top:calc(var(--hud-h) + 40px);justify-self:end;width:min(100%,280px);font-size:13px}
.legal .toc .lab{display:block;text-transform:uppercase;margin-bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--mute-text)}
.legal .toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--hair);counter-reset:t}
.legal .toc li{counter-increment:t}
.legal .toc a{display:flex;gap:12px;padding:7px 0 7px 16px;margin-left:-1px;border-left:1px solid transparent;color:var(--paper2);transition:color .3s,border-color .3s}
.legal .toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:10px;color:var(--mute-text);padding-top:2px}
.legal .toc a:hover,.legal .toc a.on{color:var(--paper);border-left-color:var(--tally)}
@media (max-width:1100px){.legal .wrap{grid-template-columns:1fr}.legal .toc{display:none}}
.legal .body .kv{font-size:16px;color:var(--paper)}

/* ─────────── BLOG ─────────── */
.blog-top{padding-block:calc(var(--hud-h) + clamp(40px,6vw,90px)) clamp(30px,3vw,50px)}
.blog-top .cats{display:flex;gap:10px;flex-wrap:wrap}
.blog-top .cats a{padding:9px 14px;border:1px solid var(--hair);font-size:13px;font-weight:520;letter-spacing:.04em}
.blog-top .cats a[aria-current="page"]{border-color:var(--tally);color:var(--tally-text)}
.blog-top h1{margin-top:28px;font-size:var(--f-h2);font-weight:780;line-height:1}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2vw,32px);padding-bottom:clamp(80px,9vw,140px)}
.post-card{display:flex;flex-direction:column;border:1px solid var(--faint);background:var(--ink2);transition:border-color .3s,transform .6s var(--ease)}
.post-card:hover{border-color:var(--hair2);transform:translateY(-4px)}
.post-card .media{aspect-ratio:16/10}
.post-card .in{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-card h2{font-size:clamp(19px,1.5vw,23px);font-weight:620;line-height:1.25}
.post-card p{font-size:14px;color:var(--paper2);line-height:1.6}
.post-card .m{margin-top:auto;display:flex;gap:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--mute-text);text-transform:uppercase}
.article{padding-block:calc(var(--hud-h) + clamp(40px,6vw,90px)) clamp(80px,9vw,140px)}
.article .head{max-width:900px;margin-inline:auto}
.article .cats{display:flex;gap:8px;flex-wrap:wrap}
.article .cats a{padding:7px 12px;border:1px solid var(--hair);font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper2);transition:border-color .3s,color .3s}
.article .cats a:hover{border-color:var(--tally);color:var(--paper)}
.article h1{font-size:clamp(34px,4.4vw,66px);font-weight:720;line-height:1.05}
.article .by{margin-top:20px;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--dim);text-transform:uppercase}
.article .body{max-width:720px;margin:clamp(34px,4vw,56px) auto 0;font-size:17px;line-height:1.78;color:var(--paper2)}
.article .body h2{font-size:clamp(24px,2.2vw,32px);font-weight:740;color:var(--paper);margin:2em 0 .6em;line-height:1.15}
.article .body h3{font-size:clamp(19px,1.6vw,23px);font-weight:700;color:var(--paper);margin:1.6em 0 .5em}
.article .body h4{font-size:17px;font-weight:600;color:var(--paper);margin:1.2em 0 .4em}
.article .body p{margin:0 0 1em}
.article .body ul,.article .body ol{padding-left:1.2em;margin:0 0 1.2em}
.article .body li{margin:.3em 0}
.article .body li::marker{color:var(--tally)}
.article .body a{color:var(--paper);border-bottom:1px solid var(--tally)}
.article .body strong{color:var(--paper)}
.article .body figure{margin:2em 0;position:relative}
.article .body figure.miss .slate{position:relative;aspect-ratio:16/9;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12.5%),radial-gradient(120% 90% at 50% 40%,#16191e,#07080a);border:1px solid var(--faint)}
.article .body figure.miss .slate::after{content:"SUBSTITUTE · " attr(data-k) " not found locally";position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#ffd9d6;border:1px solid rgba(218,20,20,.55);padding:4px 7px}
.article .body .pgal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:2em 0}
.article .body .pgal figure{margin:0}
.article .body figure.miss .slate[data-k="video"]::before{content:"";position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px 0 0 -27px;border:1px solid var(--hair2);border-radius:50%;background:radial-gradient(circle,transparent 60%,rgba(255,255,255,.04))}
.article .body figcaption{margin-top:10px;font-size:13px;color:var(--mute-text);font-style:italic}
.article .tags{max-width:720px;margin:40px auto 0;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.article .tags a{padding:6px 10px;border:1px solid var(--hair);font-size:12px}

/* ─────────── Guest area / 404 ─────────── */
/* ─────────── reveal ─────────── */
.rv{opacity:1;transform:none}
.js .rv.pre{opacity:0;transform:translate3d(0,28px,0)}
.js .rv.in{opacity:1;transform:none;transition:opacity 1s var(--ease),transform 1.2s var(--ease)}

/* ─────────── responsive ─────────── */
@media (max-width:1100px){
  .nav{display:none}.menu-btn{display:block}
  .foot .cols{grid-template-columns:repeat(3,minmax(0,1fr))}
  .feats{grid-template-columns:repeat(2,minmax(0,1fr))}.feats .f:last-child{grid-column:1/-1}
  .sheet{grid-template-columns:repeat(4,minmax(0,1fr))}
  .monitors .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .posts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  :root{--hud-h:58px}
  .vf .rd-bl{display:none}
  .intro .cols{grid-template-columns:1fr}
  .intro .c2{order:3}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tgr-grid,.process .grid,.forbrands .grid,.grab .grid,.proven .grid,.tier-row .grid,.tier-row.flip .grid{grid-template-columns:1fr}
  .tier-row.flip .tmedia{order:0}
  .scrub-col{position:relative;top:0;max-width:300px;margin-inline:auto}
  .forbrands .vert{position:relative;top:0;max-width:220px}
  .tiers{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .spec .cols{grid-template-columns:1fr}
  .sheet{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sheet figure.w2{grid-column:span 2}
  .sheet figure.w2 .media{aspect-ratio:16/9;height:auto}
  .monitors .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .monitors figure:nth-child(7n+1) .media{aspect-ratio:16/10;height:auto}
  .feats{grid-template-columns:1fr}
  .grab h3,.grab .gl1,.grab .gl2{text-align:left}
  .posts{grid-template-columns:1fr}
  .cat{flex-basis:78vw}
  .rack-pin{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .rack-pin .cat{scroll-snap-align:center}
  .steles .row{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
  .steles figure{scroll-snap-align:center;flex-basis:44vw}
  .mp-hud .pw small,.mp-hud .socials{display:none}
  .mp-hud .fc{padding:7px 10px;font-size:10.5px}
  .hero-film .hcap .lab{display:none}
  .ba-row .media{width:min(100%,150px)}
}
@media (max-width:480px){
  .mp-hud .hud-r{gap:8px}
  .mp-hud .pw{gap:8px}
  .mp-hud .hud-r>.lang{display:none}
  .mp-hud .fc{white-space:nowrap;padding:7px 9px;font-size:9.5px;letter-spacing:.04em}
  .mp-hud .pw .gl{width:24px;height:24px}
  .mp-hud .pw .wm{height:9px}
}
@media (max-width:374px){.mp-hud .pw span{display:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .grain{display:none}
  .js .rv.pre{opacity:1;transform:none}
  .marquee .tr{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
}

@media (max-aspect-ratio:1/1){.hero-film{--ap:min(calc(100vw * 1.25),72svh)}.hero-film .hcap .lab{display:none}}
.strip{margin-top:0}
.tgr-main,.b-intro{position:relative;z-index:1}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 2: new structure, haptic motion layer, estimator, form, feed.
   Motion rules: everything is readable at rest; motion only adds.
   ═══════════════════════════════════════════════════════════════════════ */
:root{--ease-out:cubic-bezier(.16,1,.3,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* ───────── open items from the deck, visible in the preview ───────── */
.chk,.lnk{display:inline-block;vertical-align:baseline;margin:0 .25em;padding:1px 6px;font:500 10px/1.5 var(--mono);letter-spacing:.06em;text-transform:none;
  color:#fff;background:var(--tally);border-radius:2px;white-space:nowrap;font-stretch:100%;text-shadow:none}
.lnk{background:#8f6600}
.miss{opacity:.9}

/* missing media slate */
.slatebox{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:18px;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 12.5%),radial-gradient(120% 90% at 50% 40%,#16191e,#07080a)}
.slatebox .s-in{display:grid;gap:8px}.slatebox .s-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--tally-text)}
.slatebox .s-n{font-family:var(--mono);font-size:11px;color:var(--paper2)}

/* ───────── headings: masked line rise with character stagger ───────── */
[data-split] .ln{display:block;overflow:hidden;padding:.06em 0 .1em;margin:-.06em 0 -.1em}
[data-split] .w{display:inline-block;white-space:nowrap}
/* only headings that start below the fold get .sp (set by the script); on-screen text never waits for it.
   sp-chars: short headings rise per character; sp-words: longer headings rise per word; sp-para: paragraphs, per word, no blur */
.js:not(.rm) .sp-chars .ch,.js:not(.rm) .sp-words .wu{display:inline-block;transform:translate3d(0,108%,0) rotate(5deg);opacity:0;transform-origin:0 100%;
  transition:transform .9s var(--ease-out) var(--d,0s),opacity .45s linear var(--d,0s)}
.js:not(.rm) .sp-words .wu{transform:translate3d(0,108%,0) rotate(3deg)}
.js:not(.rm) .sp-para .wd{display:inline-block;transform:translate3d(0,.7em,0);opacity:0;transition:transform .8s var(--ease-out) var(--d,0s),opacity .5s linear var(--d,0s)}
.js:not(.rm) .sp.in .ch,.js:not(.rm) .sp.in .wu,.js:not(.rm) .sp.in .wd{transform:none;opacity:1}
/* compositor layers only while a reveal runs (the script adds .done when it has finished) */
.js:not(.rm) .sp-chars.in:not(.done) .ch,.js:not(.rm) .sp-words.in:not(.done) .wu,.js:not(.rm) .sp-para.in:not(.done) .wd{will-change:transform,opacity}
.sl{font-family:var(--mono);font-weight:400;font-size:.36em;letter-spacing:.14em;color:var(--tally-text);vertical-align:.55em;margin-right:.6em;font-stretch:100%}
.h1-hero{font-size:clamp(40px,7vw,128px);line-height:.92;font-weight:200;max-width:14ch}
.h1-hero .ln:first-child{font-weight:760;font-stretch:112%}
.h1-hero .ln+.ln{font-size:.32em;line-height:1.25;font-weight:300;max-width:34ch;margin-top:.9em;color:var(--paper2);letter-spacing:.005em}
.h1-page{font-size:clamp(46px,8vw,140px);line-height:.92;font-weight:780;font-stretch:115%;letter-spacing:-.01em}
.h2{font-size:clamp(34px,5.2vw,86px);line-height:.98;font-weight:240}
.h2 .sl{font-size:.3em}
.h3{font-size:clamp(24px,2.8vw,44px);line-height:1.05;font-weight:300}
.lead{font-size:var(--f-lead);line-height:1.55;font-weight:300;color:var(--paper2);max-width:60ch}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tally-text)}
.small{font-size:12.5px}
section{scroll-margin-top:calc(var(--hud-h) + 10px)}

/* ───────── cursor: the system pointer stays; ring, focus brackets and label follow it as decoration ───────── */
.cursor{position:fixed;left:0;top:0;z-index:99;pointer-events:none;display:none;transition:opacity .3s}
html.fine.js:not(.rm) .cursor{display:block}
.cursor.off{opacity:0}
.cursor .cr-ring{position:fixed;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:1px solid rgba(236,235,230,.55);transition:width .35s var(--ease-out),height .35s var(--ease-out),left .35s var(--ease-out),top .35s var(--ease-out),opacity .3s,border-color .3s}
.cursor.hot .cr-ring{width:64px;height:64px;left:-32px;top:-32px;border-color:var(--paper)}
.cursor.down .cr-ring{width:26px;height:26px;left:-13px;top:-13px}
.cursor.framing .cr-ring{opacity:0}
.cursor .cr-br{position:fixed;left:0;top:0;width:0;height:0;opacity:0;transition:opacity .25s}
.cursor.framing .cr-br{opacity:1}
.cursor .cr-br b{position:absolute;width:16px;height:16px;border:0 solid var(--paper)}
.cursor .cr-br b:nth-child(1){left:-6px;top:-6px;border-left-width:1.5px;border-top-width:1.5px}
.cursor .cr-br b:nth-child(2){right:-6px;top:-6px;border-right-width:1.5px;border-top-width:1.5px}
.cursor .cr-br b:nth-child(3){left:-6px;bottom:-6px;border-left-width:1.5px;border-bottom-width:1.5px}
.cursor .cr-br b:nth-child(4){right:-6px;bottom:-6px;border-right-width:1.5px;border-bottom-width:1.5px}
.cursor .cr-lab{position:fixed;left:0;top:0;transform:translate(22px,18px);font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--ink);background:var(--paper);padding:4px 7px 3px;
  opacity:0;transition:opacity .2s;white-space:nowrap}
.cursor.lab .cr-lab{opacity:1}
.clickflash{position:fixed;z-index:98;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1px solid var(--tally);pointer-events:none;animation:cflash .6s var(--ease-out) forwards}
@keyframes cflash{to{transform:scale(7);opacity:0}}

/* ───────── buttons ───────── */
.btn{gap:14px;padding:15px 22px 14px;will-change:transform;transition:color .35s,border-color .35s,transform .6s var(--ease-out)}
.btn .bt{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em;vertical-align:top}
.btn .bt::after{content:none}
.btn .bt{text-shadow:0 1.4em 0 currentColor}
.btn .bt>*{display:inline}
.btn:hover .bt{animation:roll .5s var(--ease-out)}
@keyframes roll{0%{transform:none}49.9%{transform:translateY(-1.4em)}50%{transform:translateY(1.4em)}100%{transform:none}}
.btn .bt{position:relative}
.ar{position:relative;display:inline-block;width:16px;height:9px;flex:0 0 16px;transition:transform .45s var(--ease-out)}
.ar::before{content:"";position:absolute;left:0;right:1px;top:4px;height:1px;background:currentColor}
.ar::after{content:"";position:absolute;right:0;top:1px;width:6px;height:6px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.btn:hover .ar,.lnk-arrow:hover .ar,a:hover>.tg-btn .ar,a:hover .rd .ar,.door:hover .btn .ar{transform:translateX(5px)}
.btn.big{padding:19px 28px 18px;font-size:14px}
.btn.solid .dot{display:none}
.lnk-arrow{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:560;letter-spacing:.06em;text-transform:uppercase;padding:8px 0;position:relative}
.lnk-arrow::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(.18);transform-origin:left;transition:transform .5s var(--ease-out)}
.lnk-arrow:hover::after{transform:scaleX(1)}
.lnk-arrow .bt{display:inline-block}
.lnk-arrow.ext .ar{transform:rotate(-45deg)}.lnk-arrow.ext:hover .ar{transform:rotate(-45deg) translateX(4px)}
.reel-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;padding:10px 16px 10px 10px;
  border:1px solid var(--hair2);background:rgba(7,8,10,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--paper);transition:border-color .3s,background .3s,transform .6s var(--ease-out)}
.reel-btn .pl{width:26px;height:26px;border-radius:50%;border:1px solid var(--paper);display:grid;place-items:center}
.reel-btn .pl::after{content:"";border-left:8px solid var(--paper);border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.reel-btn:hover{border-color:var(--paper);background:rgba(218,20,20,.2)}

/* ───────── header + menu ───────── */
.hud .brand .wm{height:12px}
.nav{gap:clamp(12px,1.8vw,30px)}
.nav .ni{position:relative}
.nav .ni>a{display:inline-flex;align-items:center;gap:7px}
.nav .ni>a[data-in]{color:var(--paper)}
.nav .chev{width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease-out)}
.nav .has-sub:hover .chev,.nav .has-sub:focus-within .chev{transform:translateY(1px) rotate(225deg)}
.nav .sub{position:absolute;left:-18px;top:calc(100% + 10px);min-width:230px;padding:10px;background:rgba(10,11,13,.97);border:1px solid var(--hair);
  display:grid;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .35s var(--ease-out),visibility 0s .35s}
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .has-sub:hover .sub,.nav .has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .35s var(--ease-out)}
.nav .sub a{display:flex;align-items:center;gap:12px;padding:10px 12px;font-size:13.5px;color:var(--paper2);transition:background .2s,color .2s}
.nav .sub a:hover,.nav .sub a[aria-current]{background:rgba(255,255,255,.05);color:var(--paper)}
.nav .sub a[aria-current]::after{display:none}
.nav .sub .n{font-family:var(--mono);font-size:9.5px;color:var(--tally-text);letter-spacing:.1em}
.nav-cta{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border:1px solid var(--hair2);font-size:12.5px;font-weight:560;letter-spacing:.05em;text-transform:uppercase;transition:background .3s,color .3s,border-color .3s,transform .6s var(--ease-out)}
.nav-cta .dot{width:6px;height:6px;border-radius:50%;background:var(--tally);box-shadow:0 0 8px var(--tally-glow)}
.nav-cta:hover,.nav-cta[aria-current]{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.mnav nav{display:grid}
.mnav a.m1{display:flex;align-items:baseline;gap:14px;font-size:clamp(30px,8.5vw,58px);font-weight:260;line-height:1.1;padding:6px 0;border-bottom:1px solid var(--faint)}
.mnav a.m1 .n{font-family:var(--mono);font-size:11px;color:var(--tally-text);letter-spacing:.12em}
.mnav a.m2{font-size:clamp(17px,4.6vw,24px);padding:7px 0 7px 36px;color:var(--paper2);border-bottom:1px solid var(--faint)}
.mnav a[aria-current="page"]{color:var(--tally-text)}
.mnav .mfoot{display:flex;justify-content:space-between;align-items:center;margin-top:26px}
.mnav .mclose{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;border:1px solid var(--hair);padding:9px 14px}
.menu-open .mnav a.m1,.menu-open .mnav a.m2{animation:mIn .7s var(--ease-out) both}
.menu-open .mnav a:nth-child(2){animation-delay:.04s}.menu-open .mnav a:nth-child(3){animation-delay:.08s}.menu-open .mnav a:nth-child(4){animation-delay:.12s}
.menu-open .mnav a:nth-child(5){animation-delay:.16s}.menu-open .mnav a:nth-child(6){animation-delay:.2s}.menu-open .mnav a:nth-child(7){animation-delay:.24s}
.menu-open .mnav a:nth-child(8){animation-delay:.28s}.menu-open .mnav a:nth-child(9){animation-delay:.32s}
@keyframes mIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (max-width:1180px){.nav{display:none}.menu-btn{display:block}}
/* touch screens get the menu button at any width (no hover for the dropdowns) */
@media (hover:none){.nav{display:none}.menu-btn{display:block}}

/* ───────── hero film ───────── */
.hero-film{height:100svh;min-height:600px}
.hero-film>.media{position:absolute;inset:0;background:#000}
.hero-film>.media video{object-fit:cover}
.hero-film .lb{z-index:4}
.hero-film .vig{background:radial-gradient(120% 90% at 50% 40%,transparent 45%,rgba(0,0,0,.55) 100%),linear-gradient(transparent 45%,rgba(7,8,10,.85))}
.hero-film .hcap{position:absolute;left:0;right:0;bottom:calc(max(22px,(100% - var(--ap))/2) + 22px);z-index:6;display:grid;gap:26px}
.hero-film .hmeta{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--hair)}
.hero-film .hmeta .meta{display:flex;gap:22px;align-items:center}
.hero-film .cue{position:absolute;z-index:6;right:var(--g);top:50%;writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--paper2);display:flex;gap:12px;align-items:center}
.hero-film .cue i{display:block;width:1px;height:48px;background:linear-gradient(var(--paper),transparent);animation:cue 2.2s var(--ease) infinite}
.av-hero .hcap .sub{max-width:52ch;font-size:clamp(16px,1.35vw,20px);color:var(--paper2);line-height:1.5}
.av-hero .btns{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.av-hero .h1-hero{max-width:20ch}.av-hero .h1-hero .ln:first-child{font-weight:300;font-stretch:100%}
@media (max-width:760px){.hero-film .cue{display:none}.hero-film .hcap{gap:18px}}

/* ───────── intro ───────── */
.intro .cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);margin-top:0;gap:clamp(30px,6vw,120px)}
.intro .big{font-size:clamp(24px,2.7vw,44px);line-height:1.25;font-weight:250}
.intro .c3{display:grid;gap:1.1em;align-content:start;font-size:clamp(16px,1.2vw,19px)}
.intro .c3 .btn{justify-self:start;margin-top:10px}
@media (max-width:760px){.intro .cols{grid-template-columns:1fr}}

/* ───────── doors ───────── */
.doors{padding-block:clamp(70px,8vw,130px)}
.door-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(14px,1.6vw,26px);margin-top:clamp(30px,4vw,60px);perspective:1400px}
.door{position:relative;display:block;min-height:clamp(420px,46vw,720px);overflow:hidden;background:#000;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.door:not(.big){min-height:clamp(420px,46vw,720px)}
.door .media{position:absolute;inset:0}
.door .media video{transition:transform 1.4s var(--ease-out),filter .6s;filter:brightness(.72) saturate(.95)}
.door:hover .media video{transform:scale(1.045);filter:brightness(.85) saturate(1.05)}
.door::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(5,6,7,.92));pointer-events:none}
.door-in{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(20px,2.6vw,42px);display:grid;gap:14px;justify-items:start;transform:translateZ(40px)}
.door-in .lab{color:var(--tally-text)}
.door-in h3{max-width:16ch}
.door-in p{max-width:44ch;color:var(--paper2);font-size:15.5px;line-height:1.6}
.door-in .btn{margin-top:6px}
.door:hover .door-in .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
@media (max-width:900px){.door-grid{grid-template-columns:1fr}.door,.door:not(.big){min-height:clamp(380px,110vw,560px)}}

/* ───────── Great Revolt block on home / originals ───────── */
.tgr-block,.or-tgr{position:relative;overflow:hidden;background:#000;padding-block:clamp(90px,10vw,170px)}
.tgr-block>.media.bg,.or-tgr>.media.bg{position:absolute;inset:0}
.tgr-block>.media.bg video,.or-tgr>.media.bg video{object-fit:cover;filter:saturate(.9) brightness(.55)}
.tb-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.92) 0%,rgba(11,11,12,.55) 55%,rgba(11,11,12,.25)),linear-gradient(var(--ink),transparent 18%,transparent 82%,var(--ink))}
.tgr-block .wrap,.or-tgr .wrap{position:relative;z-index:2}
.tb-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,90px);align-items:center}
.tb-l{display:grid;gap:22px;justify-items:start}
.tb-l .prem{font-family:'EB Garamond',Georgia,serif;font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:#e9e7e1;max-width:46ch}
.tb-l .prem .sl{font-size:.55em;vertical-align:.25em}
.tb-l .now{font-size:15px;line-height:1.65;color:var(--paper2);max-width:52ch}
.fcap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:12px}
@media (max-width:900px){.tb-grid{grid-template-columns:1fr}}

/* ───────── originals counter line ───────── */
.orig-line{padding-block:clamp(70px,8vw,120px)}
.ol-grid,.oc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center;padding:clamp(24px,3vw,48px) 0;border-block:1px solid var(--hair)}
.ol-n{font-size:clamp(64px,12vw,220px);line-height:.85;font-weight:800;font-stretch:118%;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ol-grid .lab,.oc .lab{margin-bottom:12px}
.ol-grid .lead,.oc .lead{margin-bottom:18px}
.oc-sum{display:flex;flex-wrap:wrap;gap:10px 16px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--dim);margin-top:8px}
@media (max-width:760px){.ol-grid,.oc{grid-template-columns:1fr}}

/* odometer */
.odo{display:inline-flex;white-space:nowrap;font-variant-numeric:tabular-nums}
.odo .dg{display:inline-block;height:1em;overflow:hidden;line-height:1;vertical-align:top}
.odo .dg i{display:block;font-style:normal;transition:transform 1.6s var(--ease-out)}
.odo .dg i b{display:block;height:1em;font-weight:inherit}

/* ───────── feed / post cards ───────── */
.feed{padding-block:clamp(60px,7vw,110px)}
.feed-h{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:clamp(24px,3vw,44px);flex-wrap:wrap}
.posts{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);padding-bottom:0;perspective:1400px}
.post-card{border:1px solid var(--faint);background:var(--ink2);transform-style:preserve-3d;transition:border-color .3s,transform .6s var(--ease-out)}
.post-card>a{display:flex;flex-direction:column;height:100%}
.post-card:hover{border-color:var(--hair2);transform:none}
.post-card .pc-media{aspect-ratio:16/10;position:relative}
.post-card .pc-media img{transition:transform 1.2s var(--ease-out)}
.post-card:hover .pc-media img{transform:scale(1.05)}
.pc-type{display:grid;place-items:center;background:radial-gradient(120% 100% at 30% 20%,#1b1f25,#0a0b0d)}
.pc-type.t-originals{background:radial-gradient(120% 100% at 30% 20%,#23301f,#0a0b0d)}
.pc-type.t-tgr{background:radial-gradient(120% 100% at 30% 20%,#3a1214,#0b0b0c)}
.pc-type .pc-g{width:34%;max-width:120px;color:rgba(236,235,230,.1);transition:transform 1.2s var(--ease-out),color .5s}
.pc-type .pc-g svg{width:100%;height:auto}
.post-card:hover .pc-type .pc-g{transform:rotate(-6deg) scale(1.06);color:rgba(236,235,230,.18)}
.pc-type .pc-k{position:absolute;left:16px;bottom:14px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.post-card .in{gap:12px}
.post-card .m1{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.tag{display:inline-block;padding:4px 8px;border:1px solid var(--hair);font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper2)}
.tag.t-archviz{border-color:rgba(180,231,255,.5);color:var(--signal)}.tag.t-tgr{border-color:rgba(211,39,43,.7);color:#ff8d8f}.tag.t-originals{border-color:rgba(160,220,140,.5);color:#b9e4a8}
.post-card h3,.post-card h2{font-size:clamp(18px,1.45vw,22px);font-weight:600;line-height:1.25}
.post-card .m{justify-content:space-between;align-items:center}
.post-card .rd{display:inline-flex;align-items:center;gap:10px;color:var(--paper)}
.post-card:hover .rd .ar{transform:translateX(5px)}
.empty{color:var(--dim);font-family:var(--mono);font-size:12px;letter-spacing:.08em}
@media (max-width:1000px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.posts{grid-template-columns:1fr}}

/* ───────── client wall ───────── */
.wall li img{max-height:40px;max-width:78%;width:auto;filter:none;opacity:.86;transition:opacity .4s,transform .6s var(--ease-out)}
.wall li:hover img{opacity:1}
.wall li{transition:background .4s}
.logos .h3x{max-width:28ch;margin-inline:auto}

/* ───────── CTA ───────── */
.cta{padding-block:clamp(80px,10vw,170px)}
.cta-in{display:grid;justify-items:center;text-align:center;gap:26px;padding:clamp(40px,6vw,100px) var(--g);border:1px solid var(--hair);position:relative;overflow:hidden;
  background:radial-gradient(90% 120% at var(--mx,50%) var(--my,50%),rgba(218,20,20,.14),transparent 60%)}
.cta-in .h2{max-width:18ch}
.cta-in .lead{text-align:center}

/* ───────── rails: drag, flick, wheel ───────── */
.rail{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-block:6px 10px}
.rail::-webkit-scrollbar{display:none}
.rail-track{display:flex;gap:clamp(12px,1.4vw,22px);padding-inline:var(--g);width:max-content}
html.fine .rail{cursor:grab}
html.fine .rail.drag{cursor:grabbing}
.rail.drag *{user-select:none;pointer-events:none}
@media (hover:none){.rail{scroll-snap-type:x mandatory}.rail-track>*{scroll-snap-align:center}}
.rail-bar{height:1px;background:var(--faint);position:relative;margin-top:22px;padding:0!important;max-width:calc(100% - 2*var(--g));margin-inline:auto}
.rail-bar b{position:absolute;left:0;top:0;height:1px;background:var(--tally);box-shadow:0 0 8px var(--tally-glow);width:10%;transition:width .2s}

/* ArchViz make cards */
.make{padding-block:clamp(70px,8vw,130px) clamp(60px,6vw,100px)}
.make-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.mk{flex:0 0 clamp(290px,34vw,540px);position:relative}
.mk .mk-media{aspect-ratio:4/3}
.mk.mk-v{flex-basis:clamp(210px,19vw,300px)}.mk.mk-v .mk-media{aspect-ratio:9/16}
.mk .idx{position:absolute;right:12px;top:10px;z-index:3;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--paper2);mix-blend-mode:difference}
.mk-t{padding-top:16px}.mk-t h3{font-size:clamp(20px,1.7vw,26px);font-weight:620}.mk-t p{margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--paper2);max-width:42ch}
.mk .media video,.mk .media img{transition:transform 1.2s var(--ease-out)}
.mk:hover .media video,.mk:hover .media img{transform:scale(1.04)}
[data-scrub]::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--sp,0%);background:var(--tally);z-index:3;transition:width .1s linear;box-shadow:0 0 8px var(--tally-glow)}
@media (max-width:760px){.make-h{grid-template-columns:1fr}.mk{flex-basis:80vw}.mk.mk-v{flex-basis:58vw}}

/* who it is for: list with an image that follows the cursor */
.who{padding-block:clamp(70px,8vw,130px)}
.who-list{list-style:none;margin:clamp(30px,4vw,60px) 0 0;padding:0;border-top:1px solid var(--hair)}
.who-list li{display:grid;grid-template-columns:70px minmax(0,5fr) minmax(0,6fr);gap:clamp(12px,3vw,40px);align-items:baseline;padding:clamp(20px,2.4vw,34px) 0;border-bottom:1px solid var(--hair);position:relative;transition:padding .5s var(--ease-out),color .3s}
.who-list li::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(218,20,20,.1),transparent 70%);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease-out);pointer-events:none}
.who-list li:hover::before{transform:scaleX(1)}
.who-list li:hover{padding-left:14px}
.who-list .n{font-family:var(--mono);font-size:11px;color:var(--tally-text);letter-spacing:.12em}
.who-list h3{font-size:clamp(22px,2.4vw,40px);font-weight:300;line-height:1.1}
.who-list p{color:var(--paper2);font-size:15.5px;line-height:1.6}
.hover-img{position:fixed;left:0;top:0;z-index:40;width:clamp(220px,22vw,340px);aspect-ratio:4/3;pointer-events:none;opacity:0;transform:scale(.8);transition:opacity .35s,transform .5s var(--ease-out);overflow:hidden;border:1px solid var(--hair2)}
.hover-img.on{opacity:1;transform:scale(1)}
.hover-img img{width:100%;height:100%;object-fit:cover}
@media (max-width:760px){.who-list li{grid-template-columns:44px 1fr}.who-list p{grid-column:2}.hover-img{display:none}}

/* process (numbered) */
.av-proc .grid,.process .grid{align-items:start}
.av-proc .pl-col{position:sticky;top:calc(var(--hud-h) + 30px)}
.process .pl.dim{color:var(--dim);margin-top:18px}
.steps.numbered li::before{content:none}
.steps.numbered li{padding-left:0}
.steps.numbered h3{font-weight:620}
@media (max-width:760px){.av-proc .pl-col{position:relative;top:0}}

/* needs */
.needs{padding-block:clamp(70px,8vw,120px);background:linear-gradient(var(--ink),#0e1013 20%,#0e1013 80%,var(--ink))}
.needs .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px)}
.need-list{list-style:none;margin:0;padding:0;counter-reset:nd}
.need-list li{display:flex;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--faint);font-size:clamp(16px,1.3vw,19px);line-height:1.5}
.need-list .tick{flex:0 0 12px;height:7px;border-left:1.5px solid var(--tally);border-bottom:1.5px solid var(--tally);transform:rotate(-45deg) translateY(-3px)}
.plans{margin-top:26px;padding:20px 22px;border:1px dashed var(--hair2);color:var(--paper);font-size:16px;line-height:1.6}
@media (max-width:760px){.needs .grid{grid-template-columns:1fr}}

/* review */
.review{padding-block:clamp(70px,8vw,120px)}
.rv-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(30px,6vw,110px);align-items:start}
.quote{margin:0;padding:clamp(24px,3vw,44px);border:1px solid var(--hair);display:grid;gap:18px;background:var(--ink2)}
.quote .rating{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim)}
.stars{display:inline-flex;gap:4px}.stars i{width:13px;height:13px;background:var(--tally);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.quote blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,1.9vw,30px);line-height:1.4;color:var(--paper)}
.quote figcaption{display:flex;gap:14px;flex-wrap:wrap;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper2)}
.quote .lnk-arrow{justify-self:start}
@media (max-width:760px){.rv-grid{grid-template-columns:1fr}}

/* faq */
.faq summary{gap:18px}
.faq .qn{font-family:var(--mono);font-size:10.5px;color:var(--tally-text);letter-spacing:.12em;flex:0 0 28px}
.faq .qt{flex:1}
.faq details[open] summary .qt{color:var(--paper)}
.faq summary:hover .qt{transform:translateX(6px)}
.faq .qt{transition:transform .5s var(--ease-out)}
.faq .ans{padding-left:46px}

/* ───────── estimator ───────── */
.est{padding-block:clamp(80px,9vw,140px);background:linear-gradient(var(--ink),#0c0e11 12%,#0c0e11 88%,var(--ink))}
.est-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.est-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,3vw,50px);align-items:start}
.est-ctl{display:grid;gap:10px}
.est-ctl fieldset{margin:0;padding:clamp(18px,2vw,28px);border:1px solid var(--faint);background:rgba(255,255,255,.015);min-width:0}
/* 3D model + design: two fieldsets (one legend each) in one box, side by side */
.est-pair{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:clamp(18px,2vw,28px);border:1px solid var(--faint);background:rgba(255,255,255,.015)}
.est-ctl .est-pair fieldset{padding:0;border:0;background:none}
.est-ctl legend{float:left;width:100%;padding:0;margin-bottom:14px;font-size:clamp(17px,1.4vw,21px);font-weight:560}
.est-ctl .fh{clear:both;margin-top:12px;font-size:13px;line-height:1.55;color:var(--dim)}
.seg{position:relative;display:inline-flex;flex-wrap:wrap;border:1px solid var(--hair);clear:both;isolation:isolate}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:11px 18px 10px;font-size:13.5px;font-weight:520;letter-spacing:.02em;color:var(--paper2);transition:color .35s;position:relative;z-index:1}
.seg input:checked+span{color:var(--ink)}
.seg input:focus-visible+span{outline:2px solid var(--tally);outline-offset:-2px}
.seg .seg-ind{position:absolute;z-index:0;left:0;top:0;height:0;width:0;background:var(--paper);transition:transform .55s var(--ease-spring),width .45s var(--ease-spring),height .3s}
.js .seg input:checked+span{background:transparent}
html:not(.js) .seg input:checked+span{background:var(--paper)}
.seg.chips{display:flex;gap:6px;border:0}
.seg.chips label span{border:1px solid var(--hair);font-family:var(--mono);font-size:11px;letter-spacing:.06em;padding:10px 12px}
.seg.chips input:checked+span{border-color:var(--paper)}
.seg.mini span{padding:7px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.1em}
.est-row{clear:both;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:12px 0;border-top:1px solid var(--faint)}
.est-row[hidden]{display:none}
.er-t{display:grid;gap:2px}.er-l{font-size:15px;font-weight:520}.er-h{font-size:12.5px;color:var(--dim);line-height:1.45}
.step{display:inline-grid;grid-template-columns:40px 50px 40px;border:1px solid var(--hair);align-items:stretch}
.step button{font-size:18px;line-height:1;height:40px;transition:background .25s,color .25s}
.step button:hover{background:var(--paper);color:var(--ink)}
.step button:active{transform:scale(.9)}
.step input{width:50px;text-align:center;background:transparent;border:0;border-inline:1px solid var(--hair);color:var(--paper);font:600 16px var(--disp);font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.step input::-webkit-outer-spin-button,.step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.step input:focus{outline:none;background:rgba(218,20,20,.14)}
.step.bump input{animation:bump .45s var(--ease-spring)}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.28)}100%{transform:scale(1)}}
.chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;clear:both}
.chip{position:relative;display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--faint);cursor:pointer;transition:border-color .3s,background .3s,transform .5s var(--ease-out)}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip .cb{flex:0 0 16px;height:16px;border:1px solid var(--hair2);margin-top:2px;position:relative;transition:background .25s,border-color .25s}
.chip .cb::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) scale(0);transition:transform .35s var(--ease-spring)}
.chip input:checked~.cb{background:var(--paper);border-color:var(--paper)}
.chip input:checked~.cb::after{transform:rotate(45deg) scale(1)}
.chip:has(input:checked){border-color:var(--hair2);background:rgba(255,255,255,.035)}
.chip input:focus-visible~.cb{outline:2px solid var(--tally);outline-offset:2px}
.chip .ct{display:grid;gap:3px}.chip b{font-size:14px;font-weight:560}.chip small{font-size:12px;color:var(--dim);line-height:1.45}
[data-stills]{margin-top:10px}
.est-out{position:sticky;top:calc(var(--hud-h) + 20px);border:1px solid var(--hair2);background:#08090b}
.eo-in{padding:clamp(22px,2.4vw,36px);display:grid;gap:14px}
.est-range{font-size:clamp(30px,3.6vw,56px);font-weight:760;font-stretch:112%;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline}
.est-range .odo{white-space:nowrap}
.est-range.flash{animation:eflash .6s var(--ease-out)}
@keyframes eflash{0%{color:var(--tally)}100%{color:var(--paper)}}
.en{font-size:13.5px;line-height:1.55;color:var(--paper2)}
.est-cur{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:12px;border-top:1px solid var(--faint)}
.est-out .btn{justify-content:space-between;margin-top:6px}
.est-out .reset{justify-self:start;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--faint);padding:4px 0}
.est-out .reset:hover{color:var(--paper)}
.est-viz{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;min-height:48px;padding:10px 0;border-block:1px solid var(--faint)}
.est-viz i{display:block;background:var(--paper);opacity:.85;animation:vizIn .5s var(--ease-spring) both}
.est-viz i.s{width:9px;height:14px}.est-viz i.m{width:14px;height:22px}.est-viz i.l{width:24px;height:32px}.est-viz i.b{width:28px;height:44px;background:var(--tally);opacity:1}
@keyframes vizIn{from{transform:scaleY(0);transform-origin:bottom}to{transform:none}}
@media (max-width:1000px){.est-grid{grid-template-columns:1fr}.est-out{position:relative;top:0}.est-h{grid-template-columns:1fr}}
@media (max-width:560px){.chips{grid-template-columns:1fr}.est-pair{grid-template-columns:1fr}.est-row{grid-template-columns:1fr}.step{justify-self:start}}

/* ───────── brands ───────── */
.strip-hero{position:relative;min-height:clamp(560px,82svh,900px);display:flex;align-items:flex-end;overflow:hidden;background:#000;padding-bottom:clamp(40px,6vw,90px)}
.strip-hero>.media{position:absolute;inset:0}
.strip-hero .vig{position:absolute;inset:0;z-index:1;background:linear-gradient(rgba(7,8,10,.7),transparent 30%,transparent 45%,rgba(7,8,10,.92))}
.sh-in{position:relative;z-index:2;display:grid;gap:22px}
.sh-in .meta{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid var(--hair);max-width:720px}
.sh-in .sub{max-width:46ch;font-size:clamp(16px,1.4vw,21px);color:var(--paper2);line-height:1.5}
.sh-in .h1-hero{max-width:18ch}.sh-in .h1-hero .ln:first-child{font-size:.5em;font-weight:840;letter-spacing:.04em}
.sh-in .h1-hero .ln+.ln{font-size:.62em;font-weight:220;color:var(--paper);margin-top:.2em;line-height:1.05;max-width:22ch}
.rack{padding-block:clamp(40px,5vw,70px) clamp(60px,7vw,110px)}
.cat{flex:0 0 clamp(300px,42vw,660px)}
.cat .media{aspect-ratio:3/2}
.cat .ov{position:relative;background:none;padding:16px 0 0;pointer-events:auto}
.cat .ov h3{font-size:clamp(20px,1.8vw,28px)}
.cat .ov .lnk-arrow{margin-top:10px;pointer-events:auto}
.cat .idx{mix-blend-mode:difference}
@media (max-width:760px){.cat{flex-basis:84vw}}
.reel .facade{display:block;max-width:1200px;margin:clamp(34px,4vw,60px) auto 0}
.reel .fcap{max-width:1200px;margin-inline:auto}
.tiers{perspective:1400px}
.tier .mono-lith{aspect-ratio:3/4}
.tier .tt h3 .t{font-size:.6em;margin-top:4px}
.custom{margin-top:clamp(20px,3vw,40px);padding:clamp(30px,4vw,60px);border:1px solid var(--hair);display:grid;justify-items:center;gap:16px}
.custom h3{font-size:clamp(24px,2.6vw,40px);font-weight:620;line-height:1.15;max-width:26ch}
.custom p{font-size:clamp(16px,1.4vw,20px);color:var(--paper2);max-width:52ch}
.fb-orig{margin-top:24px;padding:18px 20px;border-left:2px solid var(--tally);background:rgba(255,255,255,.02);font-size:15.5px;line-height:1.6;color:var(--paper)}
.fb-orig .lnk-arrow{margin-left:8px}
.forbrands .spec .cols ul li{font-size:14.5px}

/* ───────── motion panels ───────── */
.mp-hero .pw-lock{display:flex;align-items:center;gap:10px;color:var(--paper2)}
.mp-hero .pw-lock .gl{width:18px;height:18px}.mp-hero .pw-lock .wm{height:10px;width:auto}
.mp-hero h1 .sub2{font-size:.34em;font-weight:220;letter-spacing:.01em;text-transform:none;margin-top:.5em;max-width:24ch;line-height:1.15}
.mp-hero .ttl{pointer-events:none}.mp-hero .ttl .btn{pointer-events:auto;align-self:flex-start}
.mp-btn{border-color:rgba(180,231,255,.6)!important;color:var(--signal)}
.mp-btn:hover{color:var(--ink)}.mp-btn.solid{background:var(--signal);color:var(--ink);border-color:var(--signal)!important}
.stele .face>.media{position:absolute;inset:0}
.marquee .tr .mq-i{display:inline-flex;align-items:center}
.marquee .tr .mq-i img{height:28px;width:auto;filter:none;opacity:.8}
.marquee .tr .mq-i .nm{font-weight:840;font-stretch:122%;text-transform:uppercase;font-size:clamp(16px,1.7vw,24px);letter-spacing:.03em;color:var(--paper2)}
.ba-row .media.flat img{filter:saturate(.3) contrast(.9)}
.tmedia>.media{width:min(100%,340px);aspect-ratio:9/16;box-shadow:0 0 0 5px #15181c,0 0 0 6px #2a2f35,0 40px 100px rgba(0,0,0,.6);transform:rotateY(var(--ry,-10deg)) rotateX(2deg)}
.tier-row.flip .tmedia>.media{--ry:10deg}
.proven .bgv>.media{position:absolute;inset:0}
.interest{padding-block:clamp(70px,8vw,130px)}
.interest h3{margin-bottom:28px}

/* ───────── page top (originals, blog) ───────── */
.page-top,.blog-top{padding-block:calc(var(--hud-h) + clamp(50px,7vw,120px)) clamp(30px,4vw,60px)}
.page-top .lead,.blog-top .lead{margin-top:24px}
.blog-top .cats{margin-top:34px}
.blog-top .cats button{padding:10px 16px;border:1px solid var(--hair);font-size:13px;font-weight:520;letter-spacing:.04em;transition:border-color .3s,color .3s,background .3s,transform .5s var(--ease-out)}
.blog-top .cats button[aria-pressed="true"]{border-color:var(--tally);color:var(--paper);background:rgba(218,20,20,.14)}
.post-card.out{display:none}

/* originals: DFU */
.or-dfu{padding-block:clamp(70px,8vw,130px)}
.dfu-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(14px,1.6vw,26px);perspective:1400px}
.dfu,.dfu-game{padding:clamp(24px,3vw,48px);border:1px solid var(--hair);display:grid;gap:18px;align-content:start;justify-items:start;background:var(--ink2);transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.dfu{background:linear-gradient(160deg,#141a13,#0b0c0e 60%)}
.dfu-h{font-size:clamp(36px,4.6vw,76px);font-weight:820;font-stretch:118%;line-height:.95;letter-spacing:-.01em}
.or-stats{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--paper2)}
.or-stats li{padding-left:16px;position:relative}.or-stats li::before{content:"■";position:absolute;left:0;top:1px;font-size:8px;color:var(--tally)}
.dfu-game h3{font-size:clamp(24px,2.2vw,34px);font-weight:620}
/* the card game: a muted loop of the cards in a 4:3 frame */
.dfu-game .dfu-cards{justify-self:stretch;aspect-ratio:4/3;border:1px solid var(--hair);margin-bottom:6px}
.dfu-game .dfu-cards video{transition:transform 1.2s var(--ease-out)}
.dfu-game:hover .dfu-cards video{transform:scale(1.035)}
.or-count{padding-block:clamp(40px,5vw,80px) clamp(70px,8vw,120px)}
@media (max-width:900px){.dfu-grid{grid-template-columns:1fr}}
.or-in{display:grid;gap:22px;justify-items:start;max-width:760px}
.or-in .sunset{width:clamp(80px,9vw,130px)}
.or-in .prem{font-family:'EB Garamond',Georgia,serif;font-size:clamp(18px,1.5vw,23px);line-height:1.5;color:#e9e7e1}

/* ───────── article ───────── */
.article .head{max-width:900px;display:grid;gap:22px}
.article .head .cats{display:flex;gap:8px}
.post-hero{aspect-ratio:21/9;margin:clamp(30px,4vw,60px) auto 0;max-width:1200px}
.article .body .pfig img{width:200px;height:auto;margin:0 auto}
.article .body .btn{margin-top:18px}
.article .body figure{text-align:center}

/* ───────── contact ───────── */
.contact-pg{padding-block:calc(var(--hud-h) + clamp(50px,7vw,110px)) clamp(80px,9vw,140px)}
.c-head{display:grid;gap:24px;margin-bottom:clamp(40px,5vw,80px)}
.c-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(30px,5vw,90px);align-items:start}
.brief-form{display:grid;gap:20px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px 24px}
.fld{display:grid;gap:8px;align-content:start}
.fld.f-brief,.fld.f-links{grid-column:1/-1}
.fld label{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper2)}
.fld input,.fld select,.fld textarea{width:100%;background:rgba(255,255,255,.02);border:0;border-bottom:1px solid var(--hair2);color:var(--paper);font:inherit;font-size:16px;padding:12px 2px;border-radius:0;transition:border-color .3s,background .3s}
.fld textarea{resize:vertical;line-height:1.55;border:1px solid var(--hair);padding:12px}
.fld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--paper) 50%),linear-gradient(135deg,var(--paper) 50%,transparent 50%);background-position:calc(100% - 14px) 55%,calc(100% - 9px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.fld select option{background:#0c0e11;color:var(--paper)}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--tally);background:rgba(218,20,20,.05)}
.fld .help{font-size:12.5px;color:var(--dim);line-height:1.45}
.fld .err{font-family:var(--mono);font-size:11px;color:#ff7a7a;letter-spacing:.04em}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:#ff5a5a}
.fld.bad{animation:shake .45s var(--ease-out)}
@keyframes shake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.prefill{font-size:13.5px;color:var(--signal)}
.human .lab{margin-bottom:8px}
.privacy{font-size:13px;color:var(--dim)}.privacy a{color:var(--paper);border-bottom:1px solid var(--tally)}
.brief-form .btn{justify-self:start}
.form-err{color:#ff8a8a;font-size:14px}
.sent{padding:clamp(30px,4vw,60px);border:1px solid var(--hair2);display:grid;gap:16px}
.c-side{display:grid;gap:28px;font-size:15px;color:var(--paper2)}
.c-side .fh{font-weight:620;color:var(--paper);margin-bottom:8px}
.c-side a{border-bottom:1px solid var(--hair)}
.c-est{padding:20px;border:1px solid var(--hair);display:grid;gap:12px}
.c-est .lnk-arrow{border:0}
@media (max-width:900px){.c-grid{grid-template-columns:1fr}.fgrid{grid-template-columns:1fr}}

/* ───────── legal + 404 ───────── */
.legal.ds{padding-top:calc(var(--hud-h) + clamp(50px,7vw,110px))}
.legal .body h2{font-stretch:120%}
.imp-banner .vig{position:absolute;inset:0;z-index:3;background:linear-gradient(transparent 60%,var(--ink))}
.nf{min-height:100svh;display:grid;align-items:center;padding-block:calc(var(--hud-h) + 60px) 80px}
.nf .wrap{display:grid;gap:24px;justify-items:start}
.nf-code{font-size:14px;color:var(--tally-text)}
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 28px}

/* ───────── cinema overlay (reel on click) ───────── */
.cinema{position:fixed;inset:0;z-index:93;background:rgba(3,4,5,.96);display:grid;grid-template-rows:auto 1fr;opacity:0;visibility:hidden;transition:opacity .4s,visibility 0s .4s}
.cinema.open{opacity:1;visibility:visible;transition:opacity .4s}
.cinema .bar{display:flex;justify-content:space-between;align-items:center;padding:calc(14px + env(safe-area-inset-top,0px)) var(--g) 14px}
.cinema .x{font-family:var(--mono);font-size:11px;letter-spacing:.16em;border:1px solid var(--hair);padding:9px 14px;text-transform:uppercase}
.cinema .scr{display:grid;place-items:center;padding:0 var(--g) var(--g);min-height:0}
.cinema .frame{position:relative;width:min(100%,calc((100svh - 120px) * 16 / 9));aspect-ratio:16/9;background:#000}
.cinema iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cinema .msg{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper2);text-align:center;padding:20px}

/* play buttons on thumbnails */
.play.sm{width:54px;height:54px;margin:-27px 0 0 -27px}.play.sm::after{border-left-width:12px;border-top-width:8px;border-bottom-width:8px}

/* reduced motion: keep everything still and readable */
@media (prefers-reduced-motion:reduce){.hover-img{display:none}.cursor{display:none!important}}

/* ───────── fixes after the first review pass ───────── */
.btn.wrapl .bt{height:auto;text-shadow:none;white-space:normal;text-align:left}
.btn.wrapl:hover .bt{animation:none}
.process h2.h2,.ways h2.h2{font-weight:240;font-stretch:100%}
.h1-hero{font-size:clamp(40px,5.6vw,104px)}
.foot .socials{flex-wrap:wrap;gap:8px}
.foot .socials a,.foot .socials .soc{width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.foot .socials .soc.miss{width:auto;display:inline-flex;gap:6px;padding:0 0 0 12px}
.foot .socials .soc.miss .lnk{margin:0 6px 0 0}
.foot .socials svg{width:16px;height:16px;fill:var(--paper)}
.wall li img.sq{max-height:62px}
[hidden]{display:none!important}
[data-split] .ln{overflow:hidden;overflow:clip;overflow-x:visible}
@supports (overflow:clip){[data-split] .ln{overflow-x:visible;overflow-y:clip}}
.legal .h1-page{font-size:clamp(40px,6vw,96px)}
.article .body .btn.solid{color:var(--ink);border-bottom-color:var(--paper)}
.article .body .btn.solid:hover{color:#fff}
.marquee .tr .dup{display:contents}
@media (prefers-reduced-motion:reduce){.marquee .tr .dup{display:none}}
.chk,.lnk{white-space:normal;max-width:100%;overflow-wrap:anywhere}
[data-split] .w.long{white-space:normal}
.h1-hero{max-width:18ch}
html[lang="de"] .h1-hero{font-size:clamp(34px,4.8vw,92px)}
@media (max-width:760px){html[lang="de"] .h1-hero{font-size:clamp(26px,7.4vw,40px)}}
.seg.chips .seg-ind{display:none}
.seg.chips input:checked+span{background:var(--paper);color:var(--ink)}
@media (max-width:760px){
  .hero-film{--ap:100svh;min-height:560px}
  .hero-film .vig{background:linear-gradient(rgba(7,8,10,.35),transparent 30%,rgba(7,8,10,.55) 55%,rgba(7,8,10,.94))}
  .h1-hero{font-size:clamp(30px,8.6vw,46px)}
  .h1-hero .ln:first-child{font-stretch:100%}
  .h1-hero .ln+.ln{font-size:.46em}
  .av-hero .h1-hero .ln:first-child{font-weight:420}
  .hero-film .hcap{text-shadow:0 2px 18px rgba(0,0,0,.55)}
  .sh-in .h1-hero .ln:first-child{font-size:.6em}
  .reel-btn{font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════════════
   v3: first paint, contrast, phones, consistency
   ═══════════════════════════════════════════════════════════════════════ */
/* Motion Panels hero: the room the pinned stage needs is reserved before the script runs; the script swaps it for the
   pin spacer in the same frame (.pinned), so title, button and floor stay where they first paint. The stele already
   has its starting angle. Same distances as the pin in main.js (1.3 or 0.8 viewport heights). */
.js:not(.rm) .mp-hero:not(.pinned){padding-bottom:130svh}
@media (max-width:760px){.js:not(.rm) .mp-hero:not(.pinned){padding-bottom:80svh}}
.js:not(.rm) .mp-hero .stele{transform:rotateY(-32deg) rotateX(8deg)}

/* hero H1, second line: a readable subtitle at every width (EN and DE) */
.h1-hero .ln+.ln{font-size:max(16px,.32em)}
@media (max-width:760px){.h1-hero .ln+.ln{font-size:max(16px,.46em);line-height:1.35}}

/* film heroes (home, ArchViz): the caption sits on a scrim, so its text holds 4.5:1 over the brightest frames
   (measured frame by frame over both hero videos: worst line 5.4:1 or better at 360 and 1440, EN and DE) */
.hero-film .hcap::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-14vh;bottom:-6vh;
  background:linear-gradient(90deg,rgba(7,8,10,.8),rgba(7,8,10,.7) 42%,rgba(7,8,10,.32) 66%,rgba(7,8,10,0) 84%);
  -webkit-mask-image:linear-gradient(transparent,#000 14vh);mask-image:linear-gradient(transparent,#000 14vh)}
.av-hero .kicker{color:var(--paper)}
.av-hero .h1-hero .ln:first-child{font-weight:520}
.av-hero .hcap .sub{color:var(--paper);font-size:clamp(16px,1.35vw,20px)}
@media (max-width:760px){
  .hero-film .hcap::before{content:none}
  .av-hero>.media video{object-position:58% 50%}   /* phones: a building in frame, not sky */
  .av-hero .h1-hero .ln:first-child{font-weight:520}
  .av-hero .hcap::before{content:"";top:-90px;bottom:-44px;background:linear-gradient(rgba(7,8,10,0),rgba(7,8,10,.56) 90px,rgba(7,8,10,.62) 45%,rgba(7,8,10,.78));
    -webkit-mask-image:none;mask-image:none}
}

/* one H2 style: every section H2 has the same size and weight (the FAQ heading lost its centred heavy variant);
   alignment follows the section layout (centred only in centred blocks: reel, ways, CTA) */
.faq h2.h2{text-align:left}
.process h2.h2,.reel h2.h2,.ways h2.h2{font-size:clamp(34px,5.2vw,86px);font-weight:240;line-height:.98}

/* Motion Panels: the five feature tiles sit on the page surface (no colour band) */
.mp .feats{border-bottom:1px solid var(--faint)}
.mp .feats .f{background:none;border-top:1px solid var(--faint);box-shadow:inset 1px 0 0 var(--faint)}
.mp .feats .f::after{content:none}
.mp .feats p{color:var(--paper2)}

/* blog feed: one or two posts go wide instead of leaving empty columns */
@media (min-width:641px){
  .posts.n2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .posts.n1{grid-template-columns:minmax(0,1fr)}
  .posts.n1 .post-card>a{flex-direction:row}
  .posts.n1 .post-card .pc-media{flex:0 0 52%}
  .posts.n1 .post-card .in{padding:clamp(22px,2.6vw,40px);justify-content:center}
}

/* blog posts: the body text keeps the page gutter on phones */
.article .body,.article .tags{max-width:calc(720px + 2 * var(--g));padding-inline:var(--g)}

/* phones */
@media (max-width:760px){
  .vf .rd{display:none}
  .meta .dash{white-space:nowrap;flex:0 0 auto}
  .foot .f-call{grid-column:1/-1}
  .tg-soc,.blog-top .cats,.article .cats,.article .tags{justify-content:flex-start}
  .btn,.reel-btn,.lnk-arrow{max-width:100%}
  .btn .bt{height:auto;overflow:visible;text-shadow:none;white-space:normal;min-width:0;overflow-wrap:break-word;hyphens:auto;text-align:left}
  .lnk-arrow .bt{min-width:0;overflow-wrap:break-word;hyphens:auto}
  .btn:hover .bt{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 page level: estimator bar, hero rating, tier links, imprint title
   ═══════════════════════════════════════════════════════════════════════ */
.nw{white-space:nowrap}

/* estimator bar (phones and tablets): live range + the hand-off button, fixed to the bottom while the controls are in view
   and the result panel is not (main.js toggles .on); the section keeps room for it, focus never lands under it */
.est-bar{display:none}
@media (max-width:1000px){
  .js .est-bar{position:fixed;z-index:62;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:10px var(--g) calc(10px + env(safe-area-inset-bottom,0px));background:rgba(8,9,11,.96);border-top:1px solid var(--hair2);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -18px 40px rgba(0,0,0,.45);
    transform:translateY(110%);visibility:hidden;transition:transform .45s var(--ease-out),visibility 0s .45s}
  .js .est-bar.on{transform:none;visibility:visible;transition:transform .45s var(--ease-out)}
  .js .est{padding-bottom:calc(clamp(80px,9vw,140px) + 78px + env(safe-area-inset-bottom,0px))}
  html.est-bar-on{scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))}
}
.eb-t{display:grid;gap:3px;min-width:0}
.eb-t .lab{font-size:9.5px;line-height:1.3;letter-spacing:.16em}
.eb-r{font-size:17px;font-weight:760;font-stretch:112%;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--paper)}
.est-bar .eb-btn{flex:0 0 auto;padding:13px 16px 12px;gap:10px;font-size:12px}
.est-bar .eb-btn .bt{white-space:nowrap}
@media (max-width:400px){.eb-t .lab{font-size:9px;letter-spacing:.1em}.eb-r{font-size:15.5px}.est-bar .eb-btn{padding:12px 12px 11px;letter-spacing:.04em}.est-bar .eb-btn .ar{display:none}}

/* ArchViz hero: Google rating under the buttons */
.av-hero .hrate{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.08em;color:var(--paper);margin-top:-6px}
.av-hero .hrate a{display:inline-flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--hair2);transition:border-color .3s}
.av-hero .hrate a:hover{border-color:var(--paper)}
.av-hero .hrate .ar{width:12px;flex-basis:12px;transform:rotate(-45deg)}
.av-hero .hrate a:hover .ar{transform:rotate(-45deg) translateX(3px)}
/* phones held upright play the portrait cut (framed per shot): centred; the poster's first frame matches it there */
@media (max-width:820px) and (orientation:portrait){.av-hero>.media video{object-position:50% 50%}}

/* Brands tiers: the title is the link, its hit area covers the whole card */
.tier{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;transform-style:flat}
.tier .mono-lith{grid-area:1/1}
.tier .tt{grid-area:1/1;align-self:end;position:static;z-index:2}
.tier .tt a{color:inherit}
.tier-a::after{content:"";position:absolute;inset:0;z-index:1}
.tier-a:focus-visible{outline:none}
.tier-a:focus-visible::after{outline:2px solid var(--tally);outline-offset:6px}

/* imprint: the page title (same look as the Datenschutz H1), section heads as H2 with the former H3 look */
.legal.imp .body>h1{margin-bottom:28px}
.legal .body h2.lh{font-size:18px;font-weight:720;font-stretch:100%;line-height:1.02;letter-spacing:-.005em;color:var(--paper);margin:2.2em 0 .6em}

/* cinema + viewer: the focus sentinels sit outside the grid, so the label bar keeps its own height and the
   player or image gets the remaining row (on phones the bar used to take the 1fr row and push the video down) */
.cinema>[data-sentinel],.lbx>[data-sentinel]{position:absolute;width:1px;height:1px;overflow:hidden}
.cinema .x,.lbx .x{flex:0 0 auto;white-space:nowrap}

/* home hero slate: the place line stays on one row; on phones the decorative dashes make room for it */
.hero-film .hmeta .slate{white-space:nowrap}
@media (max-width:760px){.hero-film .hmeta .dash{display:none}}
/* Brands hero on phones: the caption sits on a darker lower half, so the H1 holds over the bright road */
@media (max-width:760px){
  .strip-hero .vig{background:linear-gradient(rgba(7,8,10,.7),transparent 24%,rgba(7,8,10,.5) 44%,rgba(7,8,10,.86) 64%,rgba(7,8,10,.95))}
}

/* ═══════════════════════════════════════════════════════════════════════
   v3 page level 2: image galleries, the image viewer, ArchViz Interactive
   ═══════════════════════════════════════════════════════════════════════ */
/* menu: one more line (Interactive under ArchViz); on short screens (phones held sideways) the list scrolls inside the menu
   instead of running off the top and bottom */
.menu-open .mnav a:nth-child(10){animation-delay:.36s}.menu-open .mnav a:nth-child(11){animation-delay:.4s}
.mnav nav{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}

/* galleries (data/galleries.json): every row is full in source order (the build sets the spans), one cell ratio per gallery (--r).
   Six tracks on desktop (a third spans two), two columns on phones; a frame far from the cell ratio is shown whole (.fit) */
.gal{padding-block:clamp(70px,8vw,130px)}
.gal-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,80px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.gal-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,16px)}
.gi{grid-column:span 2;min-width:0}
.gi.h{grid-column:span 3}.gi.w{grid-column:1/-1}.gi.f{grid-column:span 4;grid-row:span 2}
.gb{position:relative;display:block;width:100%;height:100%;cursor:zoom-in}
.gb .gm{display:block;width:100%;aspect-ratio:var(--r,16/9)}
.gi.f .gm{aspect-ratio:auto;height:100%}
.gi.w .gm{aspect-ratio:2.39}
.gb .gm img{transition:transform 1.2s var(--ease-out),filter .6s;filter:brightness(.9) saturate(.95)}
.gb:hover .gm img,.gb:focus-visible .gm img{transform:scale(1.04);filter:none}
.gb .gm.fit{background:#000}.gb .gm.fit img{object-fit:contain}
.gi-n{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 5px 3px;background:rgba(7,8,10,.62);font-family:var(--mono);font-size:10px;line-height:1;letter-spacing:.14em;color:var(--paper);pointer-events:none}
@media (max-width:760px){
  .gal-h{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gi,.gi.h,.gi.w,.gi.f{grid-column:span 1;grid-row:auto}
  .gi.p2{grid-column:1/-1}
  .gi.f .gm,.gi.w .gm{aspect-ratio:var(--r,16/9);height:auto}
}

/* image viewer: count and description on top, the picture box takes the image's ratio and the room the stage has
   (container units; the line before them is the fallback), the small file shows until the large one is in */
.lbx{grid-template-rows:auto minmax(0,1fr) auto}
.lbx .bar{gap:18px;align-items:flex-start}
.lbx .ttl{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;min-width:0;margin:0;padding-top:8px;font-family:var(--disp);font-size:14px;line-height:1.45;
  letter-spacing:0;text-transform:none;color:var(--paper2)}
.lbx .lb-n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--paper);white-space:nowrap}
.lbx .stage{container-type:size;overflow:hidden}
.lbx .pic{position:relative;width:min(100%,calc((100svh - 170px) * var(--ar,1.7778)));width:min(100cqw,calc(100cqh * var(--ar,1.7778)));aspect-ratio:var(--ar,1.7778);
  background:#0d0f12 center/contain no-repeat;box-shadow:0 30px 120px rgba(0,0,0,.6);transition:transform .35s var(--ease-out)}
.lbx .pic.drag{transition:none}
.lbx .pic img{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;box-shadow:none;opacity:0;transition:opacity .35s}
.lbx .pic.ok img{opacity:1}

/* ArchViz: the pointer to the apartment finder, one framed card after the work rail; its link covers the card */
.av-ia{padding-block:clamp(10px,2vw,30px) clamp(60px,7vw,110px)}
.ia-tease{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(22px,3.4vw,64px);align-items:center;
  padding:clamp(12px,1.4vw,22px);border:1px solid var(--hair);background:var(--ink2);transition:border-color .3s}
.ia-tease:hover{border-color:var(--hair2)}
.ia-tm{aspect-ratio:16/10}
.ia-tm img,.ia-cm img{transition:transform 1.2s var(--ease-out)}
.ia-tease:hover .ia-tm img,.ia-card:hover .ia-cm img{transform:scale(1.035)}
.ia-tt{display:grid;gap:18px;justify-items:start;padding-block:8px}
.ia-tt .lead{max-width:44ch}
.ia-go,.ia-view{display:inline-flex;align-items:center;gap:12px;font-size:13px;font-weight:560;letter-spacing:.06em;text-transform:uppercase;padding:8px 0;border-bottom:1px solid var(--hair2);transition:border-color .3s}
.ia-go::before,.ia-view::before{content:"";position:absolute;inset:0;z-index:2}
.ia-tease:hover .ia-go,.ia-card:hover .ia-view{border-color:var(--paper)}
.ia-tease:hover .ia-go .ar,.ia-card:hover .ia-view .ar{transform:translateX(5px)}
.ia-go:focus-visible,.ia-view:focus-visible{outline:none}
.ia-go:focus-visible::before,.ia-view:focus-visible::before{outline:2px solid var(--tally);outline-offset:5px}
@media (max-width:760px){.ia-tease{grid-template-columns:1fr}.ia-tt{padding:4px 4px 6px}}

/* ArchViz Interactive: hero with the finder on a monitor, buyer list, what to send, demo projects */
.ia-hero{padding-block:calc(var(--hud-h) + clamp(36px,5vw,90px)) clamp(50px,6vw,100px)}
.ia-top{display:grid;gap:22px;justify-items:start}
.ia-hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 48px;align-items:end;width:100%;margin-top:4px}
.ia-hrow .sub{max-width:54ch;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--paper2)}
.ia-hrow .btns{display:flex;gap:12px;flex-wrap:wrap}
.ia-mon{margin:clamp(34px,4vw,64px) 0 0;padding:clamp(8px,1vw,14px);border:1px solid var(--hair);background:var(--ink2)}
.ia-mon .media{aspect-ratio:16/9}
.ia-mon figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;padding:12px 2px 2px;font-family:var(--mono);font-size:10.5px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--paper2)}
.ia-rd{display:inline-flex;align-items:center;gap:10px}
.ia-rd .rec{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--tally);box-shadow:0 0 10px var(--tally-glow);animation:tally 2.4s ease-in-out infinite}
.ia-what{padding-block:clamp(70px,8vw,120px);background:linear-gradient(var(--ink),#0e1013 20%,#0e1013 80%,var(--ink))}
.ia-you{padding-block:clamp(30px,4vw,60px) clamp(70px,8vw,120px)}
.ia-what .grid,.ia-you .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px);align-items:start}
.ia-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.ia-list li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:baseline;padding:clamp(16px,1.6vw,22px) 0;border-bottom:1px solid var(--hair);
  font-size:clamp(17px,1.45vw,22px);line-height:1.45;font-weight:320}
.ia-list .n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--tally-text)}
.ia-you-t{padding:clamp(20px,2.4vw,32px);border:1px dashed var(--hair2);font-size:clamp(17px,1.45vw,21px);line-height:1.6;color:var(--paper)}
.ia-work{padding-block:clamp(70px,8vw,130px)}
.ia-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.ia-card{position:relative;grid-column:span 2;display:flex;flex-direction:column;border:1px solid var(--faint);background:var(--ink2);transition:border-color .3s}
.ia-card:nth-child(-n+2){grid-column:span 3}
.ia-card:hover{border-color:var(--hair2)}
.ia-cm{aspect-ratio:16/10}
.ia-ct{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:clamp(16px,1.6vw,24px)}
.ia-m{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.ia-kind{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.ia-card h3{font-size:clamp(20px,1.7vw,26px);font-weight:620;line-height:1.15}
.ia-facts{font-family:var(--mono);font-size:11px;line-height:1.5;letter-spacing:.06em;color:var(--paper2)}
.ia-view{margin-top:auto}
@media (max-width:1100px){
  .ia-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ia-card,.ia-card:nth-child(-n+2){grid-column:span 1}
  .ia-card:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:center}
  .ia-card:last-child:nth-child(odd) .ia-cm{flex:0 0 55%}
}
@media (max-width:900px){.ia-hrow{grid-template-columns:1fr}}
@media (max-width:760px){.ia-what .grid,.ia-you .grid{grid-template-columns:1fr}}
@media (max-width:640px){
  .ia-cards{grid-template-columns:1fr}
  .ia-card:last-child:nth-child(odd){flex-direction:column;align-items:stretch}
  .ia-card:last-child:nth-child(odd) .ia-cm{flex:none}
}

/* mobile menu: the EN/DE switch keeps its small mono look instead of the big menu link size */
.mnav .mfoot .lang{gap:6px}
.mnav .mfoot .lang a{display:inline-flex;align-items:center;min-height:36px;font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.14em;line-height:1;padding:8px 12px;border:1px solid transparent;color:var(--mute-text)}
.mnav .mfoot .lang a[aria-current="true"]{color:var(--paper);border-color:var(--hair)}

/* ═══════════════════════════════════════════════════════════════════════
   The Great Revolt look (cover system of Episode 1): black, white and one red,
   Volante for display, Lazerkid scripts in red (each once), EB Garamond for prose,
   the sunset circle, 45° network lines, right-leaning chapter tiles.
   ═══════════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Volante';src:url(../tgr/fonts/volante-300.woff2?v=f56dac63) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Volante';src:url(../tgr/fonts/volante-500.woff2?v=1f34f170) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Volante';src:url(../tgr/fonts/volante-700.woff2?v=bda9062b) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Volante';src:url(../tgr/fonts/volante-900.woff2?v=fb625d57) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Volante Outline';src:url(../tgr/fonts/volante-900-outline.woff2?v=6d33be7f) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Lazerkid1';src:url(../tgr/fonts/lazerkid-1.woff2?v=87b3fb6b) format('woff2');font-display:swap}
@font-face{font-family:'Lazerkid2';src:url(../tgr/fonts/lazerkid-2.woff2?v=1f49fa6b) format('woff2');font-display:swap}
@font-face{font-family:'Lazerkid3';src:url(../tgr/fonts/lazerkid-3.woff2?v=46012361) format('woff2');font-display:swap}
@font-face{font-family:'EB Garamond';src:url(../tgr/fonts/eb-garamond-latin-wght-normal.woff2?v=dfb3b989) format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'EB Garamond';src:url(../tgr/fonts/eb-garamond-latin-ext-wght-normal.woff2?v=7de3171e) format('woff2');font-weight:400 600;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'EB Garamond';src:url(../tgr/fonts/eb-garamond-latin-wght-italic.woff2?v=75d32d72) format('woff2');font-weight:400 500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}

:root{--tg-ink:#0b0b0c;--tg-red:#d3272b;--tg-red-text:#ee4347;--tg-hair:rgba(255,255,255,.55);--tg-faint:rgba(255,255,255,.16);
  --tg-disp:'Volante','Arial Narrow','Helvetica Neue',Arial,sans-serif;--tg-serif:'EB Garamond',Garamond,Georgia,serif;
  --t1:#35507a;--t2:#d9a441;--t3:#2a2c30;--t4:#c4262a;--t5:#237a8c;--t6:#6a4a9c;--t7:#c8642a}
body.tgr,.route.tgr{background:var(--tg-ink)}
.tgr ::selection{background:var(--tg-red)}
.tgr .vf .rec{background:var(--tg-red)}
.tgr .hud.solid::before{background:linear-gradient(rgba(11,11,12,.96),rgba(11,11,12,.9) calc(100% - 28px),rgba(11,11,12,0))}

/* marks */
.sunset{display:block;width:clamp(90px,10vw,150px);height:auto}
.sunset.big{position:absolute;right:max(16px,8vw);top:18%;width:clamp(180px,26vw,420px);opacity:.92}
.sunset.mini{width:74px;margin-top:26px}
.net{position:absolute;left:max(16px,4vw);top:14%;width:clamp(120px,16vw,260px);opacity:.8}
.lv{width:clamp(90px,10vw,140px);height:auto;display:block;margin:40px auto 0;opacity:.8}
.lv path,.lv polygon,.lv rect,.lv circle{fill:#fff}

/* hero */
.tg-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#000;padding-bottom:clamp(40px,6vw,80px)}
.tg-hero>.media{position:absolute;inset:0}
.tg-hero>.media video{object-fit:cover;filter:saturate(.85) contrast(1.05) brightness(.62)}
.tg-shade{position:absolute;inset:0;background:linear-gradient(rgba(11,11,12,.55),transparent 30%,transparent 50%,rgba(11,11,12,.95)),radial-gradient(90% 70% at 30% 80%,rgba(11,11,12,.6),transparent)}
.tg-under{position:absolute;inset:0;pointer-events:none}
.tg-hin{position:relative;z-index:3;display:grid;gap:18px;justify-items:start}
.tg-ep{font-family:var(--tg-disp);font-weight:300;font-size:12px;letter-spacing:.42em;text-transform:uppercase;color:#fff}
.tg-wm{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;line-height:.84;font-size:clamp(64px,13vw,230px);letter-spacing:-.005em;color:#fff}
.tg-wm b{font-weight:900}
.tg-wm .ln+.ln{margin-top:-.02em}
.tg-wm.sm{font-size:clamp(46px,7vw,120px)}
.tg-h1{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;line-height:.9;font-size:clamp(46px,8vw,140px);max-width:12ch}
.tg-h1 .sl{display:none}
.tg-tag{font-family:var(--tg-serif);font-style:italic;font-size:clamp(19px,1.8vw,28px);line-height:1.4;max-width:34ch;color:#f4f3ef}
.tg-hero .cue{position:absolute;z-index:4;right:var(--g);bottom:clamp(40px,6vw,80px);writing-mode:vertical-rl;font-family:var(--tg-disp);font-weight:300;font-size:10px;letter-spacing:.4em;display:flex;gap:12px;align-items:center}
.tg-hero .cue i{display:block;width:1px;height:48px;background:linear-gradient(#fff,transparent);animation:cue 2.2s var(--ease) infinite}

/* chapter tiles: right-leaning parallelograms */
.tg-tiles{list-style:none;margin:14px 0 0;padding:0 0 0 10px;display:flex;gap:clamp(6px,.8vw,12px)}
.tg-tiles li{width:clamp(34px,4.4vw,64px);aspect-ratio:3/4;transform:skewX(-14deg);overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.25);transition:transform .6s var(--ease-out),box-shadow .3s}
.tg-tiles a,.tg-tiles .tile-img{display:block;width:100%;height:100%;position:relative}
.tg-tiles img{position:absolute;inset:0;width:140%;max-width:none;height:100%;left:-20%;object-fit:cover;transform:skewX(14deg);filter:grayscale(1) contrast(1.1)}
.tg-tiles i{position:absolute;inset:0;mix-blend-mode:multiply;opacity:.9;transition:opacity .4s}
.tg-tiles li:hover{transform:skewX(-14deg) translateY(-8px);box-shadow:0 0 0 1px #fff}
.tg-tiles li:hover i{opacity:.35}

/* sections */
.tgr .tg-h2,.tg-h2{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(30px,4vw,64px);line-height:.95}
.tg-h2 .sl{color:var(--tg-red-text);font-family:var(--tg-disp);font-weight:300;letter-spacing:.2em}
.tg-state{padding-block:clamp(80px,10vw,160px);border-bottom:1px solid var(--tg-faint)}
.tg-big{font-family:var(--tg-serif);font-size:clamp(26px,3.4vw,56px);line-height:1.2;max-width:26ch;color:#fff}
.tg-now{padding-block:clamp(70px,8vw,130px)}
.tg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,30px);margin-top:clamp(30px,4vw,60px);perspective:1400px}
.tg-card{position:relative;border-top:1px solid var(--tg-hair);padding-top:20px;transform-style:preserve-3d;transition:transform .7s var(--ease-out)}
.tg-card>a{display:grid;gap:14px}
.tg-cm{aspect-ratio:4/5;overflow:hidden;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);background:#111;transition:clip-path .8s var(--ease-out)}
.tg-card:hover .tg-cm{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.tg-cm img,.tg-cm video{transition:transform 1.2s var(--ease-out),filter .6s;filter:saturate(.9)}
.tg-card:hover .tg-cm img,.tg-card:hover .tg-cm video{transform:scale(1.05);filter:saturate(1.05)}
.tg-cm.cover{background:#000}.tg-cm.cover img{object-fit:contain;padding:8% 14%}
.tg-k{font-size:clamp(28px,2.6vw,40px);color:var(--tg-red);line-height:1;transform:rotate(-4deg);transform-origin:left;display:inline-block}
.tg-k.k1{font-family:'Lazerkid1',var(--tg-disp)}.tg-k.k2{font-family:'Lazerkid2',var(--tg-disp)}.tg-k.k3{font-family:'Lazerkid3',var(--tg-disp)}
.tg-card h3{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.8vw,28px);letter-spacing:.02em}
.tg-card p{font-family:var(--tg-serif);font-size:17px;line-height:1.5;color:#e9e7e1}
.tg-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--tg-disp);font-weight:700;font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding-bottom:6px;border-bottom:1px solid currentColor;justify-self:start}
@media (max-width:900px){.tg-cards{grid-template-columns:1fr}.tg-cm{aspect-ratio:16/10}}

.tg-numbers{padding-block:clamp(60px,7vw,110px);border-block:1px solid var(--tg-faint)}
.tg-nums{list-style:none;margin:clamp(30px,4vw,50px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0}
.tg-nums li{padding:18px 18px 18px 0;border-top:1px solid var(--tg-hair);display:grid;gap:10px}
.tg-nums li.wide{grid-column:1/-1;border-top:1px solid var(--tg-faint)}
.tg-n{font-family:var(--tg-disp);font-weight:900;font-size:clamp(34px,4vw,64px);line-height:1}
.tg-nl{font-family:var(--tg-disp);font-weight:300;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72)}
@media (max-width:760px){.tg-nums{grid-template-columns:1fr 1fr}}

.tg-premise{padding-block:clamp(80px,9vw,150px)}
.tg-pgrid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(30px,6vw,110px);align-items:start}
.tg-prose p{font-family:var(--tg-serif);font-size:clamp(18px,1.4vw,21px);line-height:1.65;color:#e9e7e1;max-width:60ch}
.tg-prose p+p{margin-top:1.1em}
.tg-side{position:sticky;top:calc(var(--hud-h) + 40px)}
.tg-pull{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;font-size:clamp(28px,3vw,50px);line-height:1;color:#fff}
.tg-pull .ln:last-child{color:var(--tg-red)}
.tg-p5{margin-top:clamp(40px,5vw,80px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--tg-hair);display:grid;gap:22px;justify-items:start}
.tg-p5 p{font-family:var(--tg-serif);font-style:italic;font-size:clamp(18px,1.5vw,22px);line-height:1.55;max-width:62ch}
@media (max-width:900px){.tg-pgrid{grid-template-columns:1fr}.tg-side{position:relative;top:0}}

.tgr-btn{border-color:rgba(255,255,255,.55)!important;font-family:var(--tg-disp);font-weight:700;letter-spacing:.2em}
.tgr-btn::before{background:var(--tg-red)!important}
.tgr-btn:hover{color:#fff!important;border-color:var(--tg-red)!important}
.tgr-solid{background:var(--tg-red)!important;border-color:var(--tg-red)!important;color:#fff!important;font-family:var(--tg-disp);font-weight:700;letter-spacing:.2em}
.tgr-solid::before{background:#fff!important}.tgr-solid:hover{color:#000!important}

.tgr .join h2,.tgr .join h2 b{font-family:var(--tg-disp);font-weight:900;letter-spacing:.02em}
.tgr .join p{font-family:var(--tg-serif);font-style:italic;font-weight:400;font-size:clamp(18px,1.6vw,24px)}

/* latest videos strip */
.yt-strip{padding-block:clamp(60px,7vw,110px)}
.yt-strip .embed-note{margin-top:-14px;margin-bottom:22px}
.yt{flex:0 0 clamp(260px,26vw,400px);display:grid;gap:10px;position:relative}
.yt .media{position:relative;display:block;overflow:hidden;background:#000}
.yt .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .5s;filter:saturate(.85)}
.yt:hover .media img{transform:scale(1.05);filter:saturate(1.05)}
.yt .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.yt-t{font-size:14.5px;line-height:1.4;color:#fff}
.yt-d{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.tgr .yt-t{font-family:var(--tg-serif);font-size:16.5px}

.tg-socs{padding-block:clamp(50px,6vw,90px)}
.tg-soc{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.tg-soc a,.tg-soc li>span{display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border:1px solid var(--tg-faint);font-family:var(--tg-disp);font-weight:500;font-size:13px;letter-spacing:.08em;transition:border-color .3s,background .3s}
.tg-soc a:hover{border-color:#fff;background:rgba(211,39,43,.18)}
.tg-soc svg{width:15px;height:15px;fill:#fff}

.tg-where,.tg-how,.tg-two,.tg-bookline{padding-block:clamp(60px,7vw,110px)}
.tg-plats{list-style:none;margin:clamp(30px,4vw,50px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,24px)}
.tg-plat{padding:24px;border:1px solid var(--tg-faint);display:grid;gap:14px;align-content:start}
.tg-plat>svg{width:26px;height:26px;fill:#fff}
.tg-plat p{font-family:var(--tg-serif);font-size:18px;line-height:1.5}
.tg-note{margin-top:28px;padding:22px 24px;border-left:2px solid var(--tg-red);background:rgba(255,255,255,.02);display:grid;gap:10px}
.tg-note .tg-k{font-size:28px}
.tg-bl{display:grid;grid-template-columns:clamp(120px,14vw,200px) minmax(0,1fr);gap:clamp(20px,4vw,60px);align-items:center;padding:clamp(20px,3vw,40px);border:1px solid var(--tg-faint)}
.tg-bl .cover{aspect-ratio:2/3;background:#000}.tg-bl .cover img{object-fit:contain}
.tg-bl>div:last-child{display:grid;gap:20px;justify-items:start}
.tg-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px)}
.tg-2col>div{padding:clamp(22px,3vw,40px);border:1px solid var(--tg-faint);display:grid;gap:14px;align-content:start}
.tg-2col h2,.tg-2col h3{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.2vw,34px)}
.tg-2col p{font-family:var(--tg-serif);font-size:18px;line-height:1.55;color:#e9e7e1}
.tg-lang{margin-top:18px;font-family:var(--tg-disp);font-weight:300;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
@media (max-width:900px){.tg-plats,.tg-2col{grid-template-columns:1fr}.tg-bl{grid-template-columns:110px 1fr}}

/* the book cover system inside the TGW pages (home block, originals block) */
.tgr-block .tgr-wm,.or-tgr .tg-wm{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;line-height:.84;font-size:clamp(52px,7.6vw,132px)}
.tgr-block .sunset{width:clamp(70px,7vw,110px)}
.tgr-block .tb-l .prem,.or-tgr .prem{font-family:var(--tg-serif)}
.tgr .feed h2,.tgr .feed-h h2{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase}
.tgr .faq h2{font-family:var(--tg-disp)}

/* blog cards on The Great Revolt pages: the cover system (hairline top, leaning image, Volante titles, Garamond text, red tags) */
.tgr .feed .post-card{background:none;border:0;border-top:1px solid var(--tg-hair);padding-top:20px}
.tgr .feed .post-card:hover{border-top-color:#fff}
.tgr .feed .post-card .pc-media{clip-path:polygon(6% 0,100% 0,94% 100%,0 100%);background:#111;transition:clip-path .8s var(--ease-out)}
.tgr .feed .post-card:hover .pc-media{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.tgr .feed .post-card .pc-type{background:radial-gradient(120% 100% at 30% 20%,#3a1214,#0b0b0c)}
.tgr .feed .post-card .in{padding:18px 0 0;gap:12px}
.tgr .feed .post-card h3{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(20px,1.8vw,28px);line-height:1}
.tgr .feed .post-card p{font-family:var(--tg-serif);font-size:17px;line-height:1.5;color:#e9e7e1}
.tgr .feed .post-card .m1,.tgr .feed .post-card .m{font-family:var(--tg-disp);font-weight:300;font-size:11px;letter-spacing:.24em}
.tgr .feed .tag{font-family:var(--tg-disp);font-weight:500;border-color:var(--tg-red);color:#fff}
.tgr .feed .post-card .rd{font-weight:700;color:#fff;padding-bottom:4px;border-bottom:1px solid currentColor}
@media (min-width:641px){.tgr .feed .posts.n1 .post-card .in{padding:0 0 0 clamp(22px,2.6vw,40px);justify-content:center}}

/* audio serial: a part playing on a phone, next to "How to listen" (decorative muted loop, 9:16) */
.tg-howgrid{align-items:center}
.tg-howgrid .tg-prose{margin-top:clamp(24px,3vw,44px)}
.tg-phone{position:relative;justify-self:center;width:min(100%,272px);aspect-ratio:9/16;padding:9px;border-radius:34px;background:#050506;
  box-shadow:0 0 0 1px var(--tg-hair),0 0 0 7px var(--tg-ink),0 0 0 8px var(--tg-faint),0 40px 110px rgba(0,0,0,.7)}
.tg-phone::after{content:"";position:absolute;left:-16px;bottom:22%;width:3px;height:56px;background:var(--tg-red)}
.tg-phone .tg-ph-scr{width:100%;height:100%;border-radius:26px;background:#000}
.tg-ph-cam{position:absolute;z-index:2;left:50%;top:17px;width:58px;height:16px;margin-left:-29px;border-radius:9px;background:#000}
@media (max-width:900px){.tg-phone{width:min(64vw,240px);margin-top:clamp(36px,8vw,56px)}}

/* image gallery in the cover system: frames lean right and straighten on hover or focus, Garamond intro,
   the yellow frame numbers of the old contact sheet */
.tgr .gal-h .lead{font-family:var(--tg-serif);font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:#e9e7e1}
.tgr .gb .gm{--lean:clamp(8px,1.1vw,18px);clip-path:polygon(var(--lean) 0,100% 0,calc(100% - var(--lean)) 100%,0 100%);transition:clip-path .8s var(--ease-out)}
.tgr .gb:hover .gm,.tgr .gb:focus-visible .gm{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.tgr .gi-n{font-family:var(--tg-disp);font-weight:500;font-size:11px;color:#f2d24b;background:none;text-shadow:0 1px 2px #000}

/* ══════════ v4 TGR round (20.10.2026) ══════════ */
/* Lazerkid labels are set straight everywhere */
.tg-k{transform:none}
/* the pre-order bar: thin, under the header on wide screens, at the bottom on phones, never over the open menu */
.tg-bar{position:fixed;z-index:60;left:0;right:0;top:calc(var(--hud-h) + env(safe-area-inset-top,0px));background:rgba(11,11,12,.93);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid rgba(211,39,43,.6);animation:tgbar-in .8s var(--ease-out) .6s both}
.tg-bar[hidden],.tgbar-x-pre .tg-bar[data-tgbar=pre],.tgbar-x-out .tg-bar[data-tgbar=out],.menu-open .tg-bar{display:none}
.tg-bar-in{position:relative;display:flex;align-items:center;justify-content:center;gap:10px clamp(12px,1.6vw,26px);min-height:44px;padding:6px calc(var(--g) + 40px) 6px var(--g)}
.tg-bar p{font-family:var(--tg-disp);font-weight:500;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;line-height:1.35}
.tg-bar .btn{padding:8px 15px 7px;font-size:11px;letter-spacing:.2em;flex:none}
.tg-bar-x{position:absolute;right:calc(var(--g) - 6px);top:50%;width:34px;height:34px;margin-top:-17px;display:grid;place-items:center;color:#fff;opacity:.8;transition:opacity .3s}
.tg-bar-x:hover,.tg-bar-x:focus-visible{opacity:1}
.tg-bar-x i{position:relative;width:14px;height:14px}
.tg-bar-x i::before,.tg-bar-x i::after{content:"";position:absolute;left:50%;top:0;width:1.5px;height:14px;margin-left:-.75px;background:currentColor;transform:rotate(45deg)}
.tg-bar-x i::after{transform:rotate(-45deg)}
@keyframes tgbar-in{from{transform:translateY(-100%);opacity:0}}
@keyframes tgbar-up{from{transform:translateY(100%);opacity:0}}
.rm .tg-bar{animation:none}
@media (max-width:760px){
  .tg-bar{top:auto;bottom:0;border-bottom:0;border-top:1px solid rgba(211,39,43,.6);animation-name:tgbar-up;padding-bottom:env(safe-area-inset-bottom,0px)}
  .tg-bar-in{justify-content:flex-start;padding:8px 52px 8px var(--g);min-height:52px}
  .tg-bar p{font-size:10.5px;letter-spacing:.1em}
  html.has-tgbar body{padding-bottom:calc(56px + env(safe-area-inset-bottom,0px))}
}

/* hero: release line, the pre-order and the trailer */
.tg-rel{font-family:var(--tg-disp);font-weight:700;font-size:clamp(15px,1.45vw,22px);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding-top:12px;border-top:2px solid var(--tg-red)}
.tg-hbtns{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;margin-top:4px}
.tg-trailer{font-family:var(--tg-disp);font-weight:700;font-size:12px;letter-spacing:.2em;border-color:rgba(255,255,255,.55);padding:12px 18px 12px 12px}
.tg-trailer .pl{border-color:#fff}
.tg-trailer:hover{background:rgba(211,39,43,.28);border-color:#fff}
.tg-intro{font-family:var(--tg-serif);font-size:clamp(17px,1.3vw,21px);line-height:1.55;max-width:52ch;color:#e9e7e1}

/* the three cards: titles are the first headings under the H1 (H2 in the look of the old H3) */
.tg-card .tg-ch{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;font-size:clamp(20px,1.8vw,28px);letter-spacing:.02em;line-height:1.05}
.tg-cm-v{position:relative;display:grid;place-items:center}
.tg-cm-v .bgb,.tg-blv .bgb{position:absolute;inset:-24px;background-size:cover;background-position:center;filter:blur(24px) brightness(.42) saturate(1.15)}
.tg-cm-v .tg-cm-in,.tg-blv .tg-cm-in{position:relative;height:86%;aspect-ratio:9/16;box-shadow:0 0 0 1px var(--tg-hair),0 30px 70px rgba(0,0,0,.65);background:#000}
.tg-card:hover .tg-cm-v video{transform:none}

/* follow block: the counts are the centrepiece */
.tg-follow{position:relative;overflow:hidden;padding-block:clamp(80px,9vw,150px);border-block:1px solid var(--tg-faint)}
.tg-follow .wrap{position:relative;z-index:2}
.tg-fgrid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,120px);align-items:center}
.tg-h2.tg-xl,.tgr .tg-h2.tg-xl{font-size:clamp(40px,6.2vw,108px);line-height:.9;font-weight:900}
.tg-lead{font-family:var(--tg-serif);font-style:italic;font-size:clamp(19px,1.7vw,26px);line-height:1.45;color:#f4f3ef;max-width:46ch}
.tg-fl>.tg-lead{margin-top:18px}
.tg-fcs{list-style:none;margin:clamp(30px,4vw,60px) 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--tg-hair)}
.tg-fc{padding:clamp(18px,2vw,30px) clamp(14px,2vw,30px) clamp(22px,2.4vw,36px) 0;border-bottom:1px solid var(--tg-faint);display:grid;gap:8px;align-content:start;justify-items:start}
.tg-fc:nth-child(odd){border-right:1px solid var(--tg-faint)}
.tg-fc:nth-child(even){padding-left:clamp(14px,2vw,30px)}
.tg-fp{display:flex;align-items:center;gap:10px;font-family:var(--tg-disp);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.tg-fp svg{width:18px;height:18px;fill:#fff}
.tg-fn{font-family:var(--tg-disp);font-weight:900;font-size:clamp(64px,8.6vw,156px);line-height:.84;letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.tg-fu{font-family:var(--tg-serif);font-style:italic;font-size:clamp(17px,1.3vw,20px);color:var(--tg-red-text)}
.tg-fc .btn{margin-top:12px}
.btn.sm{padding:11px 18px 10px;font-size:11.5px}
.tg-fgrid>.tg-phone{width:clamp(220px,19vw,300px)}
@media (max-width:900px){.tg-fgrid{grid-template-columns:1fr}.tg-fgrid>.tg-phone{width:min(64vw,240px)}}

@media (max-width:520px){.tg-fcs{grid-template-columns:1fr}.tg-fc:nth-child(odd){border-right:0}.tg-fc:nth-child(even){padding-left:0}.tg-fn{font-size:clamp(56px,19vw,84px)}}

/* hook: the page's story moment */
.tg-hook{position:relative;overflow:hidden;padding-block:clamp(120px,15vw,260px);background:#000}
.tg-hook-bg{position:absolute;inset:0}
.tg-hook-bg img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;filter:brightness(.42) saturate(.85)}
.tg-hook::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,11,12,.93),rgba(11,11,12,.6) 55%,rgba(11,11,12,.15)),linear-gradient(var(--tg-ink),transparent 18%,transparent 82%,var(--tg-ink));pointer-events:none}
.tg-hook .wrap{position:relative;z-index:2}
.tg-hk{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;font-size:clamp(36px,6vw,104px);line-height:.94;color:#fff;max-width:17ch}
.tg-hk .ln{display:block}.tg-hk .ln+.ln{margin-top:.08em}
.tg-hk .ln:last-child{color:var(--tg-red-text)}
.tg-hcta{margin-top:clamp(30px,4vw,56px);display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}

/* the saga over the Core clip, which leans back while the text passes */
.tg-saga{position:relative;overflow:hidden;padding-block:clamp(120px,14vw,240px);background:#000;perspective:1000px}
.tg-saga-v{position:absolute;inset:-6% -3%;transform-origin:50% 60%}
.tg-saga-v .media{position:absolute;inset:0;background:#000}
.tg-saga-v video{object-fit:cover;filter:brightness(.45) saturate(.85)}
.tg-saga-sh{position:absolute;inset:0;background:radial-gradient(85% 95% at 28% 50%,rgba(11,11,12,.78),rgba(11,11,12,.2)),linear-gradient(var(--tg-ink),transparent 18%,transparent 82%,var(--tg-ink));pointer-events:none}
.tg-saga .wrap{position:relative;z-index:2}
.tg-sg{max-width:920px}
.tg-sgt{font-family:var(--tg-serif);font-size:clamp(20px,1.75vw,28px);line-height:1.55;color:#f4f3ef;margin-top:clamp(24px,3vw,40px)}
.tg-themes{margin-top:clamp(30px,4vw,56px);display:flex;flex-wrap:wrap;row-gap:10px;font-family:var(--tg-disp);font-weight:700;font-size:clamp(13px,1.45vw,22px);letter-spacing:.26em;text-transform:uppercase;color:#fff}
.tg-themes span{display:inline-flex;align-items:center}
.tg-themes span+span::before{content:"";width:6px;height:6px;margin:0 .85em;background:var(--tg-red);transform:rotate(45deg)}

/* people: two rows of faces drift against each other with the scroll (wrapped rows without the script or with reduced motion) */
.tg-people{padding-block:clamp(80px,9vw,150px) clamp(60px,7vw,110px);overflow:hidden}
.tg-ppl{margin-top:clamp(30px,4vw,60px);display:grid;gap:clamp(8px,1vw,16px)}
.tg-ppl ul{list-style:none;margin:0;padding:0 var(--g);display:flex;flex-wrap:wrap;gap:clamp(8px,1vw,16px)}
.tg-ppl li{height:clamp(150px,22vw,400px);flex:0 0 auto;overflow:hidden;background:#111;clip-path:polygon(3% 0,100% 0,97% 100%,0 100%);transition:clip-path .8s var(--ease-out)}
.tg-ppl li:hover{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}
.tg-ppl img{height:100%;width:auto;max-width:none;display:block;filter:saturate(.92)}
.tg-ppl.on ul{flex-wrap:nowrap;width:max-content;padding:0;will-change:transform}
@media (max-width:760px){.tg-ppl li{height:clamp(120px,36vw,220px)}}

/* the city, bottom to top: a plain stack; with the script the stops share one pinned frame and the scroll is the altitude */
.tg-city{padding-top:clamp(80px,9vw,150px);background:#000}
.tg-city-h{padding-bottom:clamp(30px,4vw,60px)}
.tg-stops{list-style:none;margin:0;padding:0;display:grid;gap:clamp(40px,6vw,90px);padding-bottom:clamp(60px,7vw,110px)}
.tg-stop .st-img{position:relative;aspect-ratio:16/9;overflow:hidden;max-height:82vh}
.tg-stop .st-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.st-txt{padding-top:18px;display:grid;gap:10px}
.st-k{font-family:var(--tg-disp);font-weight:900;font-size:clamp(30px,4.6vw,76px);letter-spacing:.02em;text-transform:uppercase;color:#fff;line-height:.92}
.st-t{font-family:var(--tg-serif);font-style:italic;font-size:clamp(18px,1.6vw,26px);line-height:1.45;max-width:40ch;color:#f4f3ef}
.tg-alt{display:none}
.tg-climb.on{position:relative;height:calc(var(--n,5) * 85vh + 100vh)}
.tg-climb.on .tg-cl-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.tg-climb.on .tg-stops{display:block;position:absolute;inset:0;padding:0}
.tg-climb.on .tg-stop{position:absolute;inset:0}
.tg-climb.on .st-img{position:absolute;inset:-14% 0;max-height:none;aspect-ratio:auto;will-change:transform,opacity;opacity:0}
.tg-climb.on .st-img::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),transparent 32%,transparent 50%,rgba(0,0,0,.88))}
.tg-climb.on .st-txt{position:absolute;left:0;right:0;bottom:clamp(44px,9vh,110px);margin-inline:auto;z-index:3;opacity:0;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.tg-climb.on .tg-alt{display:flex;position:absolute;z-index:4;right:max(16px,3vw);top:50%;transform:translateY(-50%);height:min(56vh,440px);flex-direction:column;justify-content:space-between;align-items:center;width:14px}
.tg-alt-l{position:absolute;left:50%;top:0;bottom:0;width:1px;margin-left:-.5px;background:rgba(255,255,255,.28)}
.tg-alt-l b{position:absolute;inset:0;background:var(--tg-red);transform-origin:50% 100%;transform:scaleY(0)}
.tg-alt i{position:relative;width:13px;height:13px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:#000;transition:background .35s,border-color .35s,transform .35s}
.tg-alt i.on{background:var(--tg-red);border-color:var(--tg-red);transform:scale(1.15)}
@media (max-width:760px){.tg-climb.on .tg-alt{right:10px;height:40vh}.tg-climb.on .st-txt{bottom:calc(70px + env(safe-area-inset-bottom,0px))}}

/* feeds: grids, a click plays in place */
.tg-feed{padding-block:clamp(60px,7vw,110px)}
.tg-feed-2{padding-top:0}
.tg-feed .feed-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 30px}
.yt-grid{list-style:none;margin:clamp(24px,3vw,44px) 0 0;padding:0;display:grid;gap:clamp(10px,1.2vw,20px)}
.yt-grid.shorts{grid-template-columns:repeat(4,minmax(0,1fr))}
.yt-grid.long{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:clamp(22px,2.4vw,40px)}
@media (min-width:1300px){.pg-films .yt-grid.shorts{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (max-width:900px){.yt-grid.long{grid-template-columns:1fr 1fr}.yt-grid.shorts{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.yt-grid.long{grid-template-columns:1fr}.yt-grid.shorts{grid-template-columns:1fr 1fr}}
.media.r916{aspect-ratio:9/16}
.yt-c{position:relative;display:block;width:100%;padding:0;text-align:left}
.yt-c .media{display:block;position:relative;overflow:hidden;background:#000}
.yt-c .media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out),filter .5s;filter:saturate(.85)}
.yt-c:hover .media img,.yt-c:focus-visible .media img{transform:scale(1.05);filter:saturate(1.05)}
.yt-c .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:4}
.yt-grid .yt-t{margin-top:12px;font-family:var(--tg-serif);font-size:17px;line-height:1.38;color:#fff}

/* community: the Discord with a large button, then the Patreon banner */
.tg-disc{padding-block:clamp(70px,8vw,130px)}
.tg-dc{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,70px);align-items:center;padding:clamp(28px,4vw,64px);border:1px solid var(--tg-faint);
  background:radial-gradient(120% 160% at 0% 0%,rgba(211,39,43,.16),transparent 55%),rgba(255,255,255,.015)}
.tg-dct .tg-lead{margin-top:16px}
.btn.tgr-discord{font-size:clamp(14px,1.15vw,17px);padding:22px 32px 21px 26px;gap:14px}
.tgr-discord>svg{width:26px;height:26px;fill:currentColor;flex:none;position:relative;z-index:1}
@media (max-width:900px){.tg-dc{grid-template-columns:1fr}}

/* the closing statement */
.tg-state{position:relative;overflow:hidden;padding-block:clamp(110px,13vw,220px);text-align:center}
.tg-state .tg-big{font-family:var(--tg-disp);font-weight:900;text-transform:uppercase;font-size:clamp(46px,9vw,176px);line-height:.88;max-width:none;margin:0 auto}
.tg-state .tg-big .ln{display:block}
.tg-state .tg-big .ln:last-child{color:var(--tg-red-text)}
.sunset.st{width:clamp(80px,8vw,130px);margin:clamp(30px,4vw,56px) auto 0}

/* audiobook: one row per part */
.tg-parts{position:relative;overflow:hidden;padding-block:clamp(70px,8vw,130px)}
.tg-parts .wrap{position:relative;z-index:2}
@media (min-width:901px){.tg-abgrid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);align-items:start}}

.ab-list{list-style:none;margin:clamp(26px,3vw,46px) 0 0;padding:0;border-top:1px solid var(--tg-hair)}
.ab-row{display:grid;grid-template-columns:clamp(64px,6vw,96px) minmax(0,1fr) auto;gap:clamp(14px,2vw,30px);align-items:center;padding:clamp(14px,1.6vw,22px) 0;border-bottom:1px solid var(--tg-faint)}
.ab-play{position:relative;display:block;width:100%;padding:0}
.ab-play .media{display:block;position:relative;overflow:hidden;background:#111;box-shadow:0 0 0 1px var(--tg-faint)}
.ab-play img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.ab-play:hover img,.ab-play:focus-visible img{transform:scale(1.06)}
.ab-play .play{width:40px;height:40px;margin:-20px 0 0 -20px}.ab-play .play::after{border-left-width:10px;border-top-width:6px;border-bottom-width:6px;margin-left:3px}
.ab-k{font-family:var(--tg-disp);font-weight:500;font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--tg-red-text)}
.ab-t{font-family:var(--tg-disp);font-weight:700;text-transform:uppercase;font-size:clamp(22px,2.2vw,34px);line-height:1;margin-top:6px}
.ab-d{font-family:var(--tg-serif);font-style:italic;font-size:16px;color:rgba(255,255,255,.72);margin-top:6px}
.ab-pl{list-style:none;margin:0;padding:0;display:flex;gap:8px}
.ab-ic{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--tg-faint);transition:border-color .3s,background .3s}
.ab-ic svg{width:17px;height:17px;fill:#fff}
.ab-ic:hover,.ab-ic:focus-visible{border-color:#fff;background:rgba(211,39,43,.22)}
.ab-more{margin-top:22px;font-family:var(--tg-serif);font-style:italic;font-size:18px;color:#e9e7e1}
.tg-abside{display:grid;gap:30px;justify-items:center;position:sticky;top:calc(var(--hud-h) + 70px)}
.tg-abside .tg-note{margin-top:0;width:100%}
@media (max-width:900px){.ab-row{grid-template-columns:64px minmax(0,1fr)}.ab-pl{grid-column:2}.tg-abside{position:relative;top:0}}

/* closings: the book on one side, the other page on the other; every closing carries the pre-order */
.tg-close{padding-block:clamp(60px,7vw,110px)}
.tg-cl2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,30px)}
.tg-cl2 .tg-bl{grid-template-columns:clamp(100px,10vw,150px) minmax(0,1fr);align-items:center}
.tg-blm,.tg-blv{aspect-ratio:2/3;overflow:hidden;background:#000}
.tg-blm video{object-fit:cover}
.tg-blv{position:relative;display:grid;place-items:center}
.tg-bbtns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1100px){.tg-cl2{grid-template-columns:1fr}}

/* films: a clip on each kind, wide stills between the sections, the list of channels with room above it */
.tg-kind{overflow:hidden}
.tg-2col .tg-kind .tg-km{aspect-ratio:16/9;margin:calc(-1 * clamp(22px,3vw,40px)) calc(-1 * clamp(22px,3vw,40px)) 8px}
.tg-band{position:relative;overflow:hidden;height:clamp(240px,44vw,720px);background:#000}
.tg-band img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;filter:brightness(.82) saturate(.92)}
.tg-band::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--tg-ink),transparent 22%,transparent 78%,var(--tg-ink));pointer-events:none}
.tg-where .tg-soc{margin-top:clamp(26px,3vw,46px);justify-content:flex-start}
.tg-socs .tg-soc{justify-content:center}

/* the Home block: release line with the pre-order */
.tb-pre{margin-top:clamp(18px,2vw,28px);display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.tb-rel{font-family:var(--tg-disp);font-weight:700;font-size:clamp(14px,1.15vw,17px);letter-spacing:.16em;text-transform:uppercase;color:#fff}

/* v3: blog post bodies (legacy and new posts). Owned by the post cleanup. */

/* the text column keeps the page gutter on phones (720px of text on desktop, as before) */
.article .body{max-width:calc(720px + 2*var(--g));padding-inline:var(--g)}
.article .body>:first-child{margin-top:0}

/* headings: the post title is the H1; body headings are H2 and H3, scaled from the 17px body text
   (H2 about 1.4 to 1.8 times, H3 about 1.1 to 1.3 times), always larger and bolder than bold body text */
.article .body h2{font-size:clamp(23px,1.3em + .6vw,31px);font-weight:740;line-height:1.18;letter-spacing:-.01em;color:var(--paper);margin:2.2em 0 .7em;text-wrap:balance}
.article .body h3{font-size:clamp(19px,1.05em + .25vw,22px);font-weight:700;line-height:1.3;color:var(--paper);margin:1.8em 0 .5em;text-wrap:pretty}
.article .body h2+h3{margin-top:1em}

/* lists: one paragraph per point, spaced as points rather than as paragraphs */
.article .body li>p{margin:0}
.article .body li{margin:.55em 0;padding-left:.2em}
.article .body ol{padding-left:1.7em}

/* click-to-load YouTube player in a post (no poster: the videos are not ours, nothing loads before the click) */
.article .body .pvid{margin:2.2em 0;text-align:left}
.article .body .pvid .facade{border-bottom:0;color:inherit}
.article .body .pvid .media{border:1px solid var(--hair);
  background:radial-gradient(60% 75% at 50% 50%,rgba(236,235,230,.07),transparent 72%),repeating-linear-gradient(0deg,rgba(236,235,230,.03) 0 1px,transparent 1px 4px),var(--ink2)}
.article .body .pvid figcaption{font-style:normal;margin-top:12px;align-items:baseline}
.article .body .pvid .lab{color:var(--paper2)}

/* ══════════════════════════ v4 (change list of 18.10.2026) ══════════════════════════
   Loaded last. Type: Roboto Bold and Thin for headlines, Roboto Light for small text (no Acumin web licence), Archivo out.
   Sub-brand wordmarks, the hero glitch mark, the flourish, 16:9 videos uncropped on phones, the overlay player at 50 to 66 % width. */
:root{--disp:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif}
body:not(.tgr){font-weight:300;font-stretch:normal}
b,strong{font-weight:700;font-stretch:normal}
.t{font-weight:100}
.h1-hero{font-weight:100}
.h1-hero .ln:first-child{font-weight:700}
.h2{font-weight:100}
.h3{font-weight:300}
.intro .big{font-weight:300}
.steps h3,.mk-t h3,.cat .ov h3{font-weight:500}
.who-list h3{font-weight:200}
.fb-title{font-weight:100}
.btn{font-weight:500}
.tgr-btn,.tg-btn,.tgr-solid{font-weight:700}
@media (max-width:760px){.h2{font-weight:200}}

/* ── sub-brand wordmarks (inline SVG, outlined) ── */
.swm{display:block;height:1em;width:auto;color:var(--paper);overflow:visible}
.hero-wm{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin:0 0 clamp(14px,1.6vw,24px)}
.hero-wm .swm{height:clamp(20px,2.3vw,36px)}
.ia-label{color:var(--tally-text)}
.door-wm{display:block;margin-bottom:4px}
.door-wm .swm{height:clamp(20px,2.1vw,34px)}
.door:not(.big) .door-wm .swm{height:clamp(18px,1.7vw,28px)}
.fb-wm{border-top:1px solid var(--hair2);padding-top:18px}
.fb-wm .swm{height:auto;width:min(100%,600px)}
.mp-wm{margin:0 0 clamp(10px,1.2vw,18px)}
.mp-wm .swm{height:clamp(22px,3.2vw,56px)}

/* ── home hero: the loop is the showreel, the TGW mark glitches in the middle, the text sits small at the bottom left ── */
.glyph-x{position:absolute;left:50%;top:50%;z-index:5;width:clamp(92px,11vw,180px);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.glyph-x svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.glyph-x .r{mix-blend-mode:screen;opacity:.85}
.glyph-x .ch-r path{fill:#ff2a2a}.glyph-x .ch-c path{fill:#29e0ff}.glyph-x .ch-w path{fill:#fff}
.home-hero .hcap>*{max-width:min(100%,660px)}
html .home-hero .h1-hero{font-size:clamp(28px,2.5vw,44px)}
/* the text block stays left of the centered mark on every desktop width and in both languages */
@media (min-width:761px){.home-hero .hcap>*{max-width:min(100%,calc(40vw - 32px),600px)}}
.home-hero .h1-hero .ln+.ln{font-size:max(16px,.46em);max-width:36ch}
.hmethod{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--paper2);margin-top:-8px}

/* ── 16:9 on phones: the video shrinks and sits at the top of its section, uncropped; the text follows below ── */
@media (max-width:760px){
  .hero-film{height:auto;min-height:0;display:block;background:var(--ink);padding-top:var(--hud-h)}
  .hero-film>.media{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .hero-film>.media video{object-fit:contain}
  .hero-film .lb,.hero-film .vig{display:none}
  .hero-film .hcap{position:relative;left:auto;right:auto;bottom:auto;padding-top:26px;padding-bottom:40px;text-shadow:none}
  .hero-film .hcap::before{content:none}
  .home-hero .glyph-x{top:calc(var(--hud-h) + 28.125vw);width:22vw}
  .strip-hero{min-height:0;display:block;background:var(--ink);padding:var(--hud-h) 0 40px}
  .strip-hero>.media{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .strip-hero>.media video{object-fit:contain}
  .strip-hero .vig{display:none}
  .sh-in{padding-top:24px}
  .tg-hero{min-height:0;display:block;padding:var(--hud-h) 0 40px}
  .tg-hero>.media{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .tg-hero>.media video{object-fit:contain}
  .tg-hero .tg-hin{padding-top:24px}
  .door,.door:not(.big){min-height:0;display:flex;flex-direction:column}
  .door .media{position:relative;inset:auto;width:100%;aspect-ratio:16/9}
  .door .media video{object-fit:contain}
  .door::after{content:none}
  .door-in{position:relative;transform:none;padding:20px 18px 24px;background:var(--ink2)}
  .tgr-block>.media.bg{position:relative;inset:auto;aspect-ratio:16/9;margin:calc(-1 * clamp(90px,10vw,170px)) 0 32px}
  .tgr-block>.media.bg video{object-fit:contain}
}
/* brands hero: the wordmark took the label line, the tagline is the H1 */
.sh-in .h1-hero .ln:first-child{font-size:.62em;font-weight:200;letter-spacing:0;color:var(--paper);line-height:1.05;max-width:22ch}

/* ── facades: the poster stays visible, YouTube loads in place on the click ── */
button.facade{display:block;width:100%;padding:0;text-align:left}
.facade .media{display:block}
.facade .media iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:7}
.tb-r .facade{margin:0}
.fp-note{margin-top:10px}
button.yt{display:grid;text-align:left;width:auto}

/* ── TGR block: follower numbers per channel ── */
.tb-f{display:grid;gap:8px}
.tb-fl{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#fff}

/* ── home gallery: one mixed grid, every image links to its page ── */
.home-gal{padding-block:clamp(30px,5vw,80px) clamp(60px,7vw,110px)}
.hg-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(6px,.7vw,12px)}
.hg-a{display:block}
.hg-a .media{display:block;aspect-ratio:16/9}
.hg-a img{transition:transform 1.2s var(--ease),filter .6s;filter:brightness(.82) saturate(.95)}
.hg-a:hover img,.hg-a:focus-visible img{transform:scale(1.045);filter:none}
@media (max-width:760px){.hg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ── ArchViz: six cards in one style (16:9), the vertical social cut shown whole ── */
.mk .mk-media{aspect-ratio:16/9}
.mk .mk-media.fit{background:#000}
.mk .mk-media.fit video{object-fit:contain}
.mk-go{margin-top:12px}
.proc-img{aspect-ratio:16/9;width:clamp(260px,27vw,440px)}
.steps[data-hover-reveal] li{transition:padding .5s var(--ease)}
html.fine .steps[data-hover-reveal] li:hover{padding-left:84px}
/* reviews: a swipeable row, heavier and more readable type */
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px 30px;flex-wrap:wrap}
.rv-rating{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--paper2)}
.rv-rail{margin-top:clamp(28px,3vw,48px)}
.rv{flex:0 0 clamp(286px,31vw,470px);margin:0;padding:clamp(22px,2.3vw,34px);border:1px solid var(--hair);background:var(--ink2);display:flex;flex-direction:column;gap:18px}
.rv .rating{display:flex}
.rv blockquote{margin:0;font-family:var(--disp);font-style:normal;font-weight:400;font-size:clamp(17px,1.25vw,20px);line-height:1.6;color:var(--paper)}
.rv figcaption{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
.rv-n{font-weight:600;font-size:15px;color:var(--paper)}
.rv-tr{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.rv-foot{margin-top:24px}
/* Interactive: everything in one place */
.ia-all{padding-block:clamp(70px,8vw,120px)}
.ia-all .grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,6vw,110px)}
.ia-close{margin-top:26px;padding:20px 22px;border:1px solid var(--hair2);font-size:clamp(17px,1.4vw,21px);line-height:1.5}
@media (max-width:760px){.ia-all .grid{grid-template-columns:1fr}}

/* ── overlay player: 50 to 66 % of the width, centered, the page dimmed behind; close on Esc, outside click and phone back ── */
.cinema{background:rgba(3,4,5,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:grid;grid-template-rows:1fr;place-items:center}
.cinema .scr{display:grid;place-items:center;width:100%;height:100%;padding:var(--g)}
.cinema .box{width:clamp(min(100%,50vw),min(62vw,calc((100svh - 150px) * 16 / 9)),66vw);display:grid;gap:10px}
.cinema .bar{padding:0;display:flex;justify-content:space-between;align-items:center;gap:16px}
.cinema .frame{width:100%;aspect-ratio:16/9;background:#000;box-shadow:0 30px 120px rgba(0,0,0,.7)}
.cinema .frame video{position:absolute;inset:0;width:100%;height:100%;background:#000}
.cinema .x{background:rgba(7,8,10,.7)}
.cinema .x:hover{border-color:var(--paper);background:rgba(218,20,20,.25)}
@media (max-width:900px){.cinema .box{width:100%}}

/* ── the flourish: low opacity, behind content, never over text, one per viewport ── */
.has-fl{position:relative;overflow:hidden}
.has-fl>.wrap{position:relative;z-index:1}
.flr{position:absolute;z-index:0;pointer-events:none;width:min(80vw,780px);aspect-ratio:1;color:var(--paper);opacity:.1}
.flr svg{display:block;width:100%;height:100%;overflow:visible}
.flr .fl-main,.flr .fl-ch{fill:currentColor}
.flr .fl-ch{opacity:0;mix-blend-mode:screen;will-change:transform,opacity}
.flr .fl-cr{color:#ff2a2a}.flr .fl-cc{color:#29e0ff}
html.js:not(.rm) .flr .fl-main{fill-opacity:0;stroke:currentColor;stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;stroke-opacity:1;
  transition:stroke-dashoffset 2.8s var(--ease),fill-opacity 1.4s ease 1.7s,stroke-opacity 1.2s ease 2.6s}
html.js:not(.rm) .flr.drawn .fl-main{fill-opacity:1;stroke-dashoffset:0;stroke-opacity:0}
.fl-logos{opacity:.08;left:-16vw;top:50%;margin-top:calc(min(80vw,780px) / -2)}
.fl-tgr{right:-12vw;top:50%;margin-top:calc(min(80vw,780px) / -2);color:#d3272b;opacity:.16;z-index:1}
.tgr-block .wrap{z-index:2}
.fl-cta{opacity:.07;right:-22vw;top:50%;margin-top:calc(min(80vw,780px) / -2)}
.fl-tg{left:-18vw;top:50%;margin-top:calc(min(80vw,780px) / -2);color:#d3272b;opacity:.14}
.fl-menu{right:-18vw;bottom:-18vw;width:70vw;max-width:560px;opacity:.2}
.foot.has-fl{overflow:hidden}
.fl-edges{position:absolute;inset:0;pointer-events:none;z-index:0}
.foot.has-fl>.wrap{position:relative;z-index:1}
.fl-edge{width:min(56vw,620px);top:-8%;opacity:.08}
.fl-edge.l{left:calc(min(56vw,620px) / -1.7)}
.fl-edge.r{right:calc(min(56vw,620px) / -1.7)}
.logos .dial-l,.logos .dial-r{display:none}
@media (max-width:760px){.flr{opacity:.07}.fl-tgr,.fl-tg{opacity:.1}}

/* footer: the director credit next to the copyright line (a test for Josh) */
.foot .fine .dir{color:var(--paper2)}
.pv-note{position:absolute;left:12px;bottom:12px;z-index:8;margin:0}

.wall li img[src*="syoss_enso"]{max-height:72px}
.mp-head h1{margin-top:0}
.gi-n::before{content:attr(data-n)}   /* the number is decoration: drawn by CSS so the button name ("Open image 1 of 16") matches its text */

/* ── Motion Panels: client DOOH pieces, natively 9:16, as a drag rail (content round) ── */
.mp-work{padding-top:clamp(64px,8vw,128px)}
.mp-work .rail{margin-top:clamp(18px,2.2vw,34px)}
.mp-work .mpw{flex:0 0 clamp(170px,16vw,250px)}
.mp-work .mpw .media{border:1px solid var(--hair)}
@media (max-width:760px){.mp-work .mpw{flex-basis:46vw}}

/* ══════════ v4 round 3 (Josh's feedback of 20.10) ══════════ */
/* the slash system: // before a headline, / before its sub line, red and as tall as the letters, the same on every page (TGR keeps its own) */
body:not(.tgr) :is(h1,h2,h3,h4,.sub,.gl1) .sl{font:inherit;font-size:1em;line-height:inherit;vertical-align:baseline;letter-spacing:-.06em;margin-right:.3em;color:var(--tally-text)}
.sh-in .sub,.hcap .sub{margin-top:clamp(10px,1.2vw,18px)}
/* galleries: the first rows show, the button opens the rest */
.gal-grid:not(.open) .gx,.hg-grid:not(.open) .hx{display:none}
.gal-more{display:flex;justify-content:center;margin-top:clamp(22px,2.6vw,40px)}
/* the contact button: one clean solid block, no dot, no outline */
.nav-cta{gap:10px;padding:10px 15px 10px 17px;border:0;background:var(--paper);color:var(--ink);font-weight:600;letter-spacing:.08em}
.nav-cta .ar{width:14px;flex-basis:14px}
.nav-cta:hover,.nav-cta[aria-current]{background:var(--tally);color:#fff;border-color:transparent}
.nav-cta:hover .ar{transform:translateX(4px)}
.nav a.nav-cta{color:var(--ink);padding:10px 15px 10px 17px}
.nav a.nav-cta:hover,.nav a.nav-cta[aria-current]{color:#fff}
.nav a.nav-cta[aria-current]::after{content:none}
/* Brands hero: the splash runs bright scenes, so the text side gets a deeper shade */
@media (min-width:761px){body:not(.tgr) .strip-hero .vig{background:linear-gradient(90deg,rgba(7,8,10,.82) 0%,rgba(7,8,10,.55) 38%,rgba(7,8,10,0) 68%),linear-gradient(rgba(7,8,10,.7),transparent 30%,transparent 45%,rgba(7,8,10,.92))}}
/* ArchViz teaser: after the image comes forward, the finder clip fades in */
.ia-tm{position:relative}
.ia-tm>.ia-tv{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease-out) .35s;pointer-events:none}
.ia-tm>.ia-tv video{width:100%;height:100%;object-fit:cover}
.ia-tease:hover .ia-tm>.ia-tv{opacity:1}
@media (hover:none){.ia-tm>.ia-tv{display:none}}
/* Interactive hero: the finder loop on the monitor; the label sits on the wordmark's baseline */
.ia-mon>.media{aspect-ratio:16/9}
.ia-mon>.media video{width:100%;height:100%;object-fit:cover;display:block}
.ia-top .hero-wm{display:flex;align-items:flex-end;flex-wrap:wrap;gap:.25em .9em}
.ia-top .hero-wm .ia-label{line-height:1;margin:0}
/* TGW for Brands without the clip */
.forbrands .grid.solo{grid-template-columns:minmax(0,1fr);max-width:1000px}
/* Motion Panels grab: the PDF whole, before assets only a little flatter */
.ba-row .media.pdf img{object-fit:contain;background:#0e0e10}
.ba-row .media.flat img,.ba-row .media.flat video{filter:saturate(.8) contrast(.97)}
/* home TGR block: the channels as links */
.tb-fl a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px;transition:border-color .3s,color .3s}
.tb-fl a:hover{border-color:#fff}
/* Brands tiers: the animated emblems, sealed as images */
.tier .mono-lith{display:grid;place-items:center;padding-bottom:34%}
.tier .mono-lith .emb{display:block;width:84%;max-width:400px}
.tier .mono-lith .emb img{width:100%;height:auto;object-fit:contain;filter:none;transform:none}
.tier:hover .mono-lith .emb img{transform:scale(1.03);filter:none}
@media (max-width:760px){.tier .mono-lith{aspect-ratio:4/5;padding-bottom:22%}.tier .mono-lith .emb{width:70%}}

/* ══════════ v4 round 4 (Josh's notes of 20.10, evening) ══════════ */
/* one slash everywhere: drawn strokes of the same thin width, as tall as capital letters, red. The text // stays for the markup only */
:root{--slw:2.4px;--sl-c:var(--tally-text);--gold:#c9a45c;--gold-hi:#ecd593;--gold-text:#d8b86f}
@media (max-width:760px){:root{--slw:2px}}
body :is(h1,h2,h3,h4,p,figcaption,.sub,.gl1,.prem) .sl{display:inline-block!important;position:relative;font:inherit!important;font-size:inherit!important;letter-spacing:0!important;
  vertical-align:baseline!important;height:.71em;width:calc(var(--sln,2) * .3em);margin:0 .34em 0 0!important;color:transparent!important;overflow:hidden;white-space:nowrap;
  background:linear-gradient(to bottom right,transparent calc(50% - var(--slw) / 2),var(--sl-c) calc(50% - var(--slw) / 2),var(--sl-c) calc(50% + var(--slw) / 2),transparent calc(50% + var(--slw) / 2)) 0 0/.3em 100% repeat-x}
.sl1{--sln:1}.sl2{--sln:2}.sl3{--sln:3}
.tgr{--sl-c:var(--tg-red-text)}
.tg-h1 .sl{display:none!important}
/* gold: only the ways to reach the studio (Contact in the menu, every Send your brief, the form's send button) */
.nav a.nav-cta,.nav-cta{background:none;color:var(--gold-text);padding:10px 2px 10px 14px;border:0;font-weight:600;letter-spacing:.1em;transition:color .35s}
.nav a.nav-cta:hover,.nav a.nav-cta[aria-current]{background:none;color:var(--gold-hi)}
.nav a.nav-cta .ar{color:inherit}
.nav a.nav-cta[aria-current]::after{content:"";position:absolute;left:14px;right:2px;bottom:4px;height:1px;background:var(--gold);box-shadow:0 0 8px rgba(201,164,92,.45)}
.mnav a.m1.gold{color:var(--gold-text)}
.btn.gold{color:var(--gold-text);border-color:rgba(201,164,92,.75)!important}
.btn.gold::before{background:linear-gradient(115deg,#f0dca0,#c9a45c 55%,#ad8743)!important}
.btn.gold:hover{color:#0b0b0c!important;border-color:var(--gold)!important}
.btn.solid.gold,.btn.solid.gold.mp-btn{background:linear-gradient(115deg,#ead18d 0%,#cfaa5f 46%,#a98341 100%);color:#0b0b0c!important;border-color:#c9a45c!important;
  box-shadow:0 0 0 1px rgba(236,213,147,.25),0 10px 34px rgba(201,164,92,.22)}
.btn.solid.gold::before{background:linear-gradient(115deg,#fbeec3,#e7cf8c)!important}
.btn.solid.gold:hover{color:#0b0b0c!important;box-shadow:0 0 0 1px rgba(236,213,147,.5),0 12px 40px rgba(201,164,92,.35)}
/* home hero: the showreel button under the identity line */
.home-hero .hbtns{display:flex;justify-content:flex-start;margin-top:clamp(14px,1.6vw,22px)}
/* gallery numbers (preview only) also on the home grid */
.hg-a{position:relative;display:block}
/* ArchViz: three reviews stand in one centred row */
.rv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,26px);margin-top:clamp(28px,3vw,48px)}
.rv-grid.n1{grid-template-columns:minmax(0,560px);justify-content:center}.rv-grid.n2{grid-template-columns:repeat(2,minmax(0,560px));justify-content:center}
.rv-grid .rv{flex:none}
@media (max-width:900px){.rv-grid,.rv-grid.n2{grid-template-columns:1fr}}
/* Motion Panels: selected work across the full width, seven in a row (phones: a swipe row) */
.mpw-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:clamp(8px,.9vw,18px);padding-inline:var(--g,clamp(16px,3vw,48px));margin-top:clamp(20px,2.4vw,40px)}
.mpw-grid .mpw .media{border:1px solid var(--hair)}
@media (max-width:900px){.mpw-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:44vw;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.mpw-grid .mpw{scroll-snap-align:start}}
/* Motion Panels grab: the poster without its white page edges */
.ba-row .media.pdf{background:#0e0e10}