@import url("../fonts/fonts.css");
/* ===========================================================================
   ΓΚΑΝΤΖΟΣ — portfolio

   THEME IS EXPLICIT, NEVER INHERITED FROM THE OS.
   There is deliberately no `prefers-color-scheme` rule anywhere in this file.
   The theme comes only from  <html data-theme="dark|light">,  which an inline
   script sets from localStorage before first paint. A Windows/macOS high
   contrast or dark theme therefore cannot change how this site looks.
   `forced-color-adjust: none` opts every element out of forced-colours mode
   for the same reason.
   =========================================================================== */

:root,
:root[data-theme="dark"]{
  color-scheme:dark;

  --bg:#08090a;
  --bg-2:#0e0f11;
  --surface:#131416;
  --surface-2:#191a1d;
  --scrim:rgba(8,9,10,.62);

  --line:rgba(255,255,255,.08);
  --line-2:rgba(255,255,255,.055);
  --line-3:rgba(255,255,255,.14);

  --text:#f7f8f8;
  --dim:#9ca3af;
  --dim-2:#6b7280;

  --accent:#6e5bf5;
  --accent-2:#22d3ee;
  --accent-soft:#a99bff;

  --btn-bg:#f7f8f8;
  --btn-fg:#08090a;

  --ok:#34d399;
  --bad:#f87171;

  --shadow:0 1px 1px rgba(0,0,0,.4),0 18px 40px -16px rgba(0,0,0,.75),0 50px 90px -40px rgba(0,0,0,.9);

  --page-bg:#0a0b0d;
  --sheet-shadow:0 -46px 90px -36px rgba(0,0,0,.85);
  --recede:#000;
}

:root[data-theme="light"]{
  color-scheme:light;

  --bg:#f7f7f5;
  --bg-2:#ffffff;
  --surface:#ffffff;
  --surface-2:#f2f2ef;
  --scrim:rgba(247,247,245,.66);

  --line:rgba(17,17,19,.11);
  --line-2:rgba(17,17,19,.07);
  --line-3:rgba(17,17,19,.2);

  --text:#111113;
  --dim:#55596180;
  --dim:#555961;
  --dim-2:#80858f;

  --accent:#5b46e5;
  --accent-2:#0e9bb8;
  --accent-soft:#5b46e5;

  --btn-bg:#111113;
  --btn-fg:#ffffff;

  --ok:#059669;
  --bad:#dc2626;

  --shadow:0 1px 1px rgba(17,17,19,.05),0 18px 40px -18px rgba(17,17,19,.18),0 50px 90px -45px rgba(17,17,19,.22);

  --page-bg:#f7f7f4;
  --sheet-shadow:0 -40px 80px -40px rgba(17,17,19,.22);
  --recede:#0b0b0d;
}

/* Ignore the operating system's high-contrast / forced-colours mode entirely. */
:root{
  --glow-a:#6e5bf5;
  --glow-b:#22d3ee;
  --recede-k:.4;
}
:root{forced-color-adjust:none}
@media (forced-colors:active){
  :root,*,*::before,*::after{forced-color-adjust:none !important}
}

:root{
  --shell:min(1440px,94vw);
  --gut:clamp(20px,4vw,44px);
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;background:var(--bg)}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(16px,.42vw + 15px,19px);
  line-height:1.6;
  font-feature-settings:"cv05" 1,"ss03" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  overflow-x:clip;
  transition:background-color .5s var(--ease),color .5s var(--ease);
}

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.035em;line-height:1.05}
p{margin:0}

::selection{background:var(--accent);color:#fff}

:where(a,button,input,textarea):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;
}

.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut)}

.skip{position:fixed;top:-100px;left:12px;z-index:400;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:12px}

em{
  font-family:Literata,Georgia,serif;
  font-style:italic;font-weight:400;letter-spacing:-.02em;
  color:var(--accent-soft);
}

.eyebrow{
  font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:500;color:var(--dim-2);margin-bottom:1.6em;
}

/* ---------------------------------------------------------------------------
   The animated background. One fixed canvas behind everything; sections are
   transparent and sit above it with a scrim where text needs contrast.
   --------------------------------------------------------------------------- */
#bgGL{
  position:fixed;inset:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;display:block;border:0;
}
/* what shows if WebGL is unavailable */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(45% 40% at 70% 30%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(40% 36% at 22% 68%,color-mix(in srgb,var(--accent-2) 12%,transparent),transparent 72%);
}
/* Only the flowing content is lifted above the canvas. An earlier version used
   `body > *:not(#bgGL)` here — :not(#id) carries ID specificity, which beat
   .nav / .cur / .pre and silently turned every position:fixed element into
   position:relative. The nav disappeared on scroll and the cursor sat in
   normal flow at the bottom of the document. */
main,.foot{position:relative;z-index:1}

/* ---------------------------------------------------------------------------
   Split text
   --------------------------------------------------------------------------- */
.w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.c{display:inline-block;will-change:transform}
.js-motion [data-anim]{opacity:0}

/* ---------------------------------------------------------------------------
   Cursor — a soft faded glow under the system arrow, on every page. Same
   colours in both themes. Own compositor layer, so moving it never repaints.
   --------------------------------------------------------------------------- */
.cur{position:fixed;top:0;left:0;pointer-events:none;z-index:500;will-change:transform;transition:opacity .2s}
.cur.is-out{opacity:0}
.cur__g{
  position:absolute;top:0;left:0;border-radius:50%;pointer-events:none;
  width:64px;height:64px;margin:-32px 0 0 -32px;
  background:radial-gradient(circle,
    color-mix(in srgb,var(--glow-a) 36%,transparent) 0%,
    color-mix(in srgb,var(--glow-b) 12%,transparent) 44%,
    transparent 70%);
  transition:transform .3s var(--ease-out);
}
.cur.is-on .cur__g{transform:scale(1.25)}
@media (pointer:coarse){.cur{display:none}}

/* ---------------------------------------------------------------------------
   Preloader
   --------------------------------------------------------------------------- */
html.is-loading,html.is-loading body{overflow:hidden}
.pre{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center;clip-path:inset(0% 0% 0% 0%)}
/* last-resort safety net, no JavaScript involved: if the scripts never run
   (blocked CDN, old browser), the preloader still gets out of the way */
.pre{animation:preFailsafe .45s ease 6s forwards}
@keyframes preFailsafe{to{opacity:0;visibility:hidden}}
.pre__inner{display:flex;align-items:flex-end;gap:16px;line-height:1}
/* Logo lockup: mark is 1.62× the wordmark size, gap .42em (logo/lockups/lockups-urbanist-final.html) */
.pre__mark{display:flex;align-items:center;gap:.42em;font-family:Urbanist,Inter,system-ui,sans-serif;font-size:clamp(30px,6vw,56px);font-weight:500;letter-spacing:-.025em}
.pre__logo{width:1.62em;height:1.62em;flex:none}
.pre__num{font-size:.8rem;font-weight:500;color:var(--dim-2);font-variant-numeric:tabular-nums;padding-bottom:.6em}
.pre__bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)}
.pre__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transform:scaleX(0);transform-origin:0 50%}

/* ---------------------------------------------------------------------------
   Nav
   --------------------------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding-block:15px;transition:background .45s var(--ease),border-color .45s var(--ease),padding .45s var(--ease)}
.nav.is-stuck{
  background:var(--scrim);
  backdrop-filter:saturate(1.5) blur(16px);-webkit-backdrop-filter:saturate(1.5) blur(16px);
  border-bottom:1px solid var(--line-2);padding-block:10px;
}
.nav__in{display:flex;align-items:center;gap:20px}
.nav__brand{display:flex;align-items:center;gap:7px;flex:none}
.nav__mark{width:28px;height:28px;flex:none}
.nav__name{font-family:Urbanist,Inter,system-ui,sans-serif;font-weight:500;letter-spacing:-.025em;font-size:17px;line-height:1}
.nav__links{display:flex;gap:28px;margin-inline:auto;font-size:.92rem;color:var(--dim)}
.nav__links a{position:relative;transition:color .25s}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease-out)}
.nav__links a:hover{color:var(--text)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav__right{display:flex;align-items:center;gap:12px;flex:none}

.lang{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:500;color:var(--dim-2)}
.lang button{background:none;border:0;padding:2px;cursor:pointer;letter-spacing:.07em;transition:color .25s}
.lang button.is-on{color:var(--text)}

.themer{
  width:30px;height:30px;flex:none;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  transition:border-color .3s,background .3s;
}
.themer:hover{border-color:var(--line-3);background:var(--surface)}
.themer svg{width:15px;height:15px;display:block}
.themer .i-sun{display:none}
:root[data-theme="light"] .themer .i-sun{display:block}
:root[data-theme="light"] .themer .i-moon{display:none}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger i{display:block;width:19px;height:1.5px;background:var(--text);transition:transform .4s var(--ease-out)}
.burger i+i{margin-top:5px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.2px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.2px) rotate(-45deg)}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);
  padding:14px 26px;border-radius:999px;
  font-weight:500;font-size:.95rem;letter-spacing:-.01em;cursor:pointer;
  transition:box-shadow .4s var(--ease),border-color .3s,background .3s,color .3s;
  will-change:transform;
}
.btn:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--btn-bg) 16%,transparent)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line-3)}
.btn--ghost:hover{border-color:var(--text);box-shadow:none;background:color-mix(in srgb,var(--text) 6%,transparent)}
.btn--sm{padding:8px 16px;font-size:.82rem}
.btn--full{width:100%;padding:15px 22px}
.btn[disabled]{opacity:.45;pointer-events:none}

/* ===========================================================================
   HERO
   =========================================================================== */
.hero{position:relative}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.hero__title{font-size:clamp(2.4rem,4.4vw,4.2rem);letter-spacing:-.045em;margin-bottom:.62em;text-wrap:balance}
.hero__lead{font-size:clamp(1.02rem,.42vw + .94rem,1.2rem);color:var(--dim);max-width:46ch;margin-bottom:2em}
.hero__act{display:flex;gap:12px;flex-wrap:wrap}

.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:4;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim-2);
}
.hero__scroll i{display:block;width:1px;height:38px;background:linear-gradient(to bottom,var(--line-3),transparent);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;top:-60%;left:0;width:100%;height:60%;background:var(--text);animation:sdown 2.1s var(--ease) infinite}
@keyframes sdown{0%{top:-60%}60%,100%{top:100%}}

/* --- the deck --- */
.deck{position:relative;z-index:3}
/* A clear lane for the page indicator on the right. The deck's back cards fan
   out to the right, past their own column, and ran underneath it on
   laptop-width screens. Only while the indicator is shown (it hides <=860px). */
@media (min-width:861px){.deck{margin-right:clamp(56px,6.5vw,104px)}}
.deck__stage{position:relative;width:100%;aspect-ratio:8/6.1;perspective:1600px;transform-style:preserve-3d;transition:transform .9s var(--ease-out)}
.card{
  position:absolute;inset:0;margin:auto;width:88%;height:auto;aspect-ratio:8/5.35;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden;transform-origin:50% 60%;
  transition:transform .85s var(--ease-out),opacity .6s var(--ease);
  will-change:transform;cursor:pointer;user-select:none;-webkit-user-select:none;
}
.card img{width:100%;height:calc(100% - 26px);object-fit:cover;object-position:top center}

.chrome{height:26px;display:flex;align-items:center;gap:5px;padding:0 10px;background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.chrome i{width:6px;height:6px;border-radius:50%;background:var(--line-3);flex:none}
.chrome span{margin-left:8px;font-size:8.5px;color:var(--dim-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.deck__ui{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px}
.dots{display:flex;gap:6px}
.dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:var(--line-3);cursor:pointer;transition:all .4s var(--ease-out)}
.dots button.is-on{background:var(--text);width:22px;border-radius:3px}
.deck__hint{font-size:.7rem;color:var(--dim-2)}

/* --- miniatures (own palettes, independent of site theme) --- */
.mini{
  height:calc(100% - 26px);display:flex;flex-direction:column;line-height:1.3;overflow:hidden;
  font-size:10px;
  --mb:#fff;--mt:#14110e;--mm:#8a8278;--ma:#2b2bf5;--mah:#fff;--mf:Inter,sans-serif;
  background:var(--mb);color:var(--mt);font-family:var(--mf);
}
.mini__nav{display:flex;align-items:center;gap:1em;padding:.7em 1.2em;border-bottom:1px solid rgba(128,128,128,.18);font-size:.7em;flex:none}
.mini__nav b{font-weight:800;letter-spacing:.06em}
.mini__nav u{text-decoration:none;color:var(--mm);margin-left:auto}
.mini__nav u+u{margin-left:0}
.mini__hero{position:relative;padding:1.4em 46% 1em 1.2em;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
/* a photo block on the right, in the drawing's own accent — without it the
   drawings read as empty wireframes rather than as a site's hero */
.mini__hero::after{
  content:"";position:absolute;right:1.2em;top:1.1em;bottom:.9em;width:38%;border-radius:.7em;
  background:linear-gradient(155deg,rgba(255,255,255,.28),rgba(0,0,0,.22)),var(--ma);
  opacity:.55;
}
.mini__kick{font-size:.56em;letter-spacing:.17em;color:var(--mm);margin:0 0 1.25em;font-weight:600}
.mini__hero h4{font-size:1.5em;line-height:1.05;letter-spacing:-.035em;margin:0 0 .6em;font-weight:700}
.mini__btns{display:flex;gap:.5em;flex-wrap:wrap}
.mini__btns s{text-decoration:none;font-size:.6em;font-weight:600;padding:.65em 1.3em;border-radius:999px;background:var(--ma);color:var(--mah);white-space:nowrap}
.mini__btns s.g{background:transparent;color:var(--mt);border:1px solid rgba(128,128,128,.35)}
.mini__row{display:grid;grid-template-columns:repeat(3,1fr);gap:.5em;padding:0 1.2em 1.2em;flex:none}
.mini__row d{display:block;height:2.4em;border-radius:.4em;background:rgba(128,128,128,.14)}

.mini--taverna{--mb:#231610;--mt:#f6efe6;--mm:#a08a76;--ma:#d0622f;--mah:#fff}
.mini--taverna .mini__hero h4{font-family:Literata,Georgia,serif;font-style:italic;font-weight:500}
.mini--taverna .mini__row d{background:rgba(246,239,230,.1)}
.mini--law{--mb:#0f1724;--mt:#eef2f8;--mm:#7f8fa6;--ma:#c7a658;--mah:#13171f}
.mini--law .mini__hero h4{font-family:Literata,Georgia,serif;font-style:italic;font-weight:400}
.mini--law .mini__row d{background:rgba(238,242,248,.09)}
.mini--auto{--mb:#16181a;--mt:#f4f5f6;--mm:#8b9196;--ma:#ff6a00;--mah:#16181a}
.mini--auto .mini__nav b{color:#ff6a00}
.mini--auto .mini__row d{background:rgba(244,245,246,.09)}
.mini--hair{--mb:#fbf5f3;--mt:#2a1f21;--mm:#a98e90;--ma:#b76e79;--mah:#fff}
.mini--hair .mini__hero h4{font-family:Literata,Georgia,serif;font-style:italic;font-weight:400}
.mini--hair .mini__row d{background:rgba(42,31,33,.09)}

/* ===========================================================================
   SECTIONS
   =========================================================================== */
/* ===========================================================================
   PAGES
   Every section is a full-screen page. Pages are sticky, so each one holds
   while the next slides up over it; motion.js recedes the covered page —
   scale back, round the corners, dim — which is the page transition and the
   depth at the same time. Padding lives on the card, not the section, so the
   card is the thing that moves.
   =========================================================================== */
.pages{position:relative}
.page{
  position:sticky;top:0;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;
}
/* The frame carries the INCOMING transition (data-tx); the card inside
   carries the OUTGOING one. The page itself is never transformed, so scroll
   measurements stay true. Overflow is clipped on the frame so the sheet's and
   the zoom's rounded corners clip the card; that does not flatten the cube,
   because the frame itself is the thing that turns. */
.page__frame{
  position:relative;flex:1;
  display:flex;flex-direction:column;
  overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.page[data-tx="sheet"] > .page__frame{
  --in-r:30px;
  border-radius:var(--in-r) var(--in-r) 0 0;
  box-shadow:var(--sheet-shadow);
}

/* the fading blue line around a page while it moves: --rim-in on the frame
   while it arrives, --rim-out on the card while it sinks back or flies past */
.page__rim{
  position:absolute;inset:0;z-index:7;pointer-events:none;
  border-radius:inherit;padding:1.5px;
  background:linear-gradient(118deg,var(--glow-a),transparent 30%,transparent 70%,var(--glow-b));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.page__rim--in{opacity:var(--rim-in,0)}
.page__rim--out{opacity:var(--rim-out,0)}

/* the sweep's lit diagonal */
.tx-lights{position:absolute;inset:0;z-index:8;pointer-events:none;overflow:hidden}
.tx-edge{
  position:absolute;left:0;top:0;opacity:0;pointer-events:none;
  width:200vmax;height:2px;transform-origin:0 50%;
  background:linear-gradient(90deg,transparent,var(--glow-a) 35%,var(--glow-b) 65%,transparent);
  box-shadow:0 0 14px 2px color-mix(in srgb,var(--glow-b) 55%,transparent);
}

/* measurement mode — see flowTop() in motion.js. Unpins every page and
   untransforms every face for one synchronous measurement. */
.st-measuring .page{position:relative !important;top:auto !important}
.st-measuring .page__frame,.st-measuring .page__card{transform:none !important;clip-path:none !important}

/* two sections live inside each pair page; space between them */
.pg-sec{position:relative}
.pg-sec + .pg-sec{margin-top:clamp(96px,14vh,190px)}

/* the cube's four other sides, BEHIND the page layer (main is z-index 1 and
   comes later in the document), showing through the turning glass faces */
.cube-back{position:fixed;inset:0;z-index:1;pointer-events:none;display:none;overflow:hidden}
/* depth of field: the far sides are seen through glass and slightly out of
   focus, so they read as walls of the box and their text never competes with
   the page you are reading. ONE blur over the whole layer, not one per side. */
@media (min-width:760px){.cube-back{filter:blur(2.4px)}}
.cube-back.is-on{display:block}
.cube-back .cface{
  position:absolute;left:50%;top:50%;overflow:hidden;
  background:var(--page-bg);
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  will-change:transform,opacity;
}
.cube-back .cface--img{background-size:cover;background-position:center top}
.cube-back .page{position:relative !important;top:auto !important;min-height:0;height:100%}
.cube-back .page__frame{overflow:hidden}
/* ceiling and floor are squares a screen wide: show each page from its top,
   heading first, instead of a centred slice from the middle of it */
/* ceiling and floor are squares a screen wide; a 16:10 design fills their
   width from the front edge back, so nothing of it is cropped off the sides */
.cube-back .cface--sq.cface--img{background-size:100% auto;background-repeat:no-repeat;background-position:center top}
/* the floor's front edge is the element's bottom edge: anchor the design there,
   next to the viewer, the same as the ceiling's sits at its front edge */
.cube-back .cface--floor{background-position:center bottom}

/* the cube's other parts, drawn in the same 3D space as its two faces:
   thin transparent top and bottom, and every edge as the fading line */
.cube3d{position:fixed;inset:0;z-index:120;pointer-events:none;display:none}
.cube3d.is-on{display:block}
.cube3d i{position:absolute;left:50%;top:50%;display:block;pointer-events:none;will-change:transform,opacity}
.cube3d .cap{
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--glow-a) 16%,transparent),
    color-mix(in srgb,var(--glow-b) 9%,transparent));
}
.cube3d .lid{background-size:100% auto;background-repeat:no-repeat;background-position:center top}
.cube3d .lid--bot{background-position:center bottom}
@media (min-width:760px){.cube3d .lid{filter:blur(1.4px)}}
.cube3d .ce-x{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--glow-a) 20%,var(--glow-b) 80%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--glow-b) 45%,transparent);
}
.cube3d .ce-y{
  width:2px;
  background:linear-gradient(180deg,transparent,var(--glow-a) 20%,var(--glow-b) 80%,transparent);
  box-shadow:0 0 12px 1px color-mix(in srgb,var(--glow-b) 45%,transparent);
}
/* The hero has no surface at rest — it is the nebula. While it turns away
   as a cube face it gains one (--face-t), so it reads as a solid side of
   the cube like every other page, not as text floating in space. */
.page--hero .page__frame::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--page-bg);opacity:var(--face-t,0);
}
.page--hero .page__card{z-index:1}

.page__card{
  position:relative;flex:1 1 auto;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:clamp(110px,14vh,170px) clamp(80px,11vh,140px);
  background:var(--page-bg);
  box-shadow:inset 0 0 0 1px var(--line-2);
  overflow:hidden;
  isolation:isolate;
}
/* the light along every page's top edge: a 1px line fading out at both ends,
   with a soft glow falling away beneath it. Same colours in both themes. */
.page__card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:56px;z-index:3;pointer-events:none;
  background:
    linear-gradient(90deg,transparent 0%,var(--glow-a) 30%,var(--glow-b) 70%,transparent 100%) top/100% 1px no-repeat,
    radial-gradient(50% 100% at 50% 0%,color-mix(in srgb,var(--glow-a) 22%,transparent),transparent 100%);
  opacity:.9;
}
/* the dim applied while a page recedes; driven through --recede-t by motion.js.
   NOT --dim: that name is already the muted-text colour token. Reusing it put a
   colour into a calc(), which made the opacity invalid (-> 1, a black page) and
   broke every color:var(--dim) inside the receding pages. */
.page__card::after{
  content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
  background:var(--recede);
  opacity:calc(var(--recede-t,0) * var(--recede-k));
}
.page--hero .page__card{background:transparent;padding-block:clamp(104px,13vh,140px) clamp(64px,9vh,100px)}
.page--hero .page__card::before{display:none}

.page__meta{
  position:relative;z-index:2;flex:none;
  width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gut);
  margin-bottom:clamp(22px,3vh,34px);
  display:flex;align-items:center;gap:14px;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim-2);
}
.page__num{color:var(--text);font-variant-numeric:tabular-nums;font-weight:500}
.page__rule{width:44px;height:1px;background:linear-gradient(90deg,var(--glow-a),var(--glow-b) 60%,transparent)}
/* the page label replaces the per-section eyebrow — saying it twice was noise */
.page:not(.page--hero) .eyebrow{display:none}

/* page indicator */
.pind{
  position:fixed;right:clamp(14px,1.8vw,28px);top:50%;transform:translateY(-50%);z-index:150;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:.78rem;letter-spacing:.08em;color:var(--dim);font-variant-numeric:tabular-nums;
  pointer-events:none;
}
.pind__n{display:block;height:1.25em;line-height:1.25em;overflow:hidden;color:var(--text);font-weight:600}
.pind__n span{display:block}
/* thicker, longer track; the fill is the same blue glow as the edge lines, in
   both themes, with a soft halo (no overflow:hidden, so the halo can spill) */
.pind__track{position:relative;width:2px;height:132px;border-radius:2px;background:color-mix(in srgb,var(--text) 18%,transparent)}
.pind__track i{
  position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(var(--glow-a),var(--glow-b));
  box-shadow:0 0 8px 1px color-mix(in srgb,var(--glow-b) 60%,transparent);
  transform-origin:50% 0;transform:scaleY(0);
}
.sec__head{max-width:62ch;margin-bottom:clamp(38px,5vw,66px)}
.sec__title{font-size:clamp(2.1rem,4.2vw,3.5rem);margin-bottom:.5em;text-wrap:balance}
/* > span:not(.w) — only the original second-line span. A plain `span` also
   matched every per-letter span from the splitter and greyed the whole heading. */
.sec__title > span:not(.w){color:var(--dim-2)}
.sec__lead{color:var(--dim);font-size:clamp(1rem,.4vw + .92rem,1.18rem);max-width:52ch}

/* --- work --- */
.works{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(22px,3vw,40px)}
.work__shot{
  position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);
  border:1px solid var(--line);aspect-ratio:16/10;
  transition:border-color .5s var(--ease),box-shadow .6s var(--ease),transform .7s var(--ease-out);
}
.work:hover .work__shot{border-color:var(--line-3);transform:translateY(-4px);box-shadow:var(--shadow)}
.work__shot img{width:100%;height:100%;object-fit:cover;object-position:top center;will-change:transform}
.work__meta{padding-top:22px}
.work__meta h3{font-size:1.2rem;margin-bottom:.3em;font-weight:600}
.work__kind{font-size:.78rem;color:var(--dim-2);margin-bottom:1em}
.work__body{color:var(--dim);font-size:.93rem;margin-bottom:1.1em;max-width:46ch}
.work__go{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;font-weight:500;color:var(--text)}
.work__go svg{transition:transform .4s var(--ease-out)}
.work:hover .work__go svg{transform:translate(3px,-3px)}

/* --- sectors --- */
.sxwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,70px);align-items:center}
.sx-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sx-label{display:flex;align-items:baseline;gap:12px;cursor:pointer;opacity:.36;transition:opacity .5s var(--ease)}
.sx-label:hover{opacity:.75}
.sx-label.is-on{opacity:1}
.sx-label.is-on b{color:var(--accent)}
.sx-label b{font-size:.68rem;color:var(--dim-2);font-variant-numeric:tabular-nums;font-weight:500}
.sx-label h3{font-size:clamp(1.05rem,1.8vw,1.4rem);font-weight:600}
.sx-label p{font-size:.86rem;color:var(--dim);margin-top:.25em;max-width:34ch}
.sx-stage{position:relative;aspect-ratio:8/5.35}
.sx{position:absolute;inset:0;border-radius:var(--r-lg);overflow:hidden;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .9s var(--ease-out),transform 1.1s var(--ease-out)}
.sx.is-on{opacity:1;transform:none}
.sx__badge{
  position:absolute;top:12px;right:12px;z-index:2;
  font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  background:var(--scrim);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--dim);padding:5px 9px;border-radius:999px;border:1px solid var(--line);
}

/* --- process --- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.step{border-top:1px solid var(--line);padding-top:20px}
.step__n{display:block;font-size:.7rem;font-weight:600;letter-spacing:.1em;margin-bottom:1.8em;font-variant-numeric:tabular-nums;color:var(--accent)}
.step h3{font-size:1.02rem;margin-bottom:.55em;font-weight:600}
.step p{color:var(--dim);font-size:.9rem}

.note{
  position:relative;margin-top:clamp(42px,5vw,70px);padding:clamp(24px,3.2vw,38px);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid var(--line);
  font-size:clamp(1rem,.5vw + .9rem,1.2rem);line-height:1.5;letter-spacing:-.015em;max-width:60ch;
  will-change:transform;
}
.note::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 55%,transparent),transparent 42%,color-mix(in srgb,var(--accent-2) 38%,transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* --- why --- */
.why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,3.4vw,48px)}
.why__i{border-top:1px solid var(--line);padding-top:20px}
.why__i h3{font-size:1rem;margin-bottom:.55em;font-weight:600}
.why__i p{color:var(--dim);font-size:.9rem;max-width:46ch}

/* ===========================================================================
   DOMAIN — pricing + availability
   =========================================================================== */
.dom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,5vw,64px);align-items:start}

.dcheck{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(20px,3vw,30px)}
.dcheck__row{display:flex;gap:10px}
.dcheck__row input{
  flex:1;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:13px 15px;color:var(--text);font:inherit;font-size:.95rem;
  transition:border-color .3s var(--ease);
}
.dcheck__row input:hover{border-color:var(--line-3)}
.dcheck__row input:focus{border-color:var(--accent);outline:none}
.dcheck__row .btn{flex:none}

.dres{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.dres li{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  font-size:.9rem;
}
.dres__name{font-weight:600;letter-spacing:-.01em}
.dres__tag{margin-left:auto;font-size:.75rem;font-weight:600;letter-spacing:.02em;display:inline-flex;align-items:center;gap:6px}
.dres__tag i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.is-free{color:var(--ok)}
.is-taken{color:var(--bad)}
.is-unknown{color:var(--dim-2)}
.dres__note{flex-basis:100%;font-size:.78rem;color:var(--dim-2);line-height:1.45}
.dres__note a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

.dnote{font-size:.78rem;color:var(--dim-2);margin-top:14px;line-height:1.5}

.dprice{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.dprice__i{display:flex;gap:14px;align-items:flex-start;padding-top:14px;border-top:1px solid var(--line)}
.dprice__i b{font-size:.95rem;font-weight:600;flex:none;min-width:84px}
.dprice__i p{font-size:.88rem;color:var(--dim)}
.dprice__i a{color:var(--text);text-decoration:underline;text-underline-offset:2px}

/* --- contact --- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(36px,6vw,80px);align-items:start}
.contact__direct{margin-top:2.4em;display:flex;flex-direction:column;gap:.55em}
.big-link{font-size:clamp(1.1rem,2.2vw,1.65rem);font-weight:600;letter-spacing:-.035em;width:fit-content;
  background-image:linear-gradient(90deg,var(--accent),var(--accent-2));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease-out)}
.big-link:hover{background-size:100% 1px}
.big-link--sm{font-size:clamp(.92rem,1.3vw,1.05rem);font-weight:400;color:var(--dim)}

.form{display:grid;gap:13px}
.f{position:relative}
.f input,.f textarea{
  width:100%;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 16px 10px;color:var(--text);font:inherit;font-size:.93rem;resize:vertical;
  transition:border-color .3s var(--ease),background .3s;
}
.f input:hover,.f textarea:hover{border-color:var(--line-3)}
.f input:focus,.f textarea:focus{border-color:var(--accent);outline:none;background:var(--surface-2)}
.f label{position:absolute;left:17px;top:15px;font-size:.93rem;color:var(--dim-2);pointer-events:none;transform-origin:0 0;transition:transform .3s var(--ease-out),color .3s}
.f input:focus + label,.f input:not(:placeholder-shown) + label,
.f textarea:focus + label,.f textarea:not(:placeholder-shown) + label{transform:translateY(-9px) scale(.72)}
.f small{display:block;font-size:.72rem;color:var(--bad);padding:4px 2px 0}
.f.is-bad input,.f.is-bad textarea{border-color:var(--bad)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__out{font-size:.88rem;min-height:1.2em}
.form__out b{display:block;font-size:.98rem}
.form__out.is-ok{color:var(--text)}
.form__out.is-bad{color:var(--bad)}

/* --- footer --- */
.foot{border-top:1px solid var(--line-2);padding-block:38px;background:var(--scrim)}
.foot__in{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:baseline;justify-content:space-between}
.foot__name{font-weight:600;letter-spacing:-.02em}
.foot__role,.foot__built,.foot__c{font-size:.8rem;color:var(--dim-2)}
.foot__built{max-width:34ch}

/* ===========================================================================
   RESPONSIVE — the phone is the primary case
   =========================================================================== */
@media (max-width:1020px){
  .hero__in{grid-template-columns:1fr;gap:clamp(34px,7vw,54px)}
  .hero__copy{max-width:36ch}
  .hero__title{font-size:clamp(2.5rem,9vw,3.8rem)}
  .deck__stage{aspect-ratio:8/6.4}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sxwrap{grid-template-columns:1fr;gap:34px}
  .dom{grid-template-columns:1fr;gap:34px}
  .hero__scroll{display:none}
}

@media (max-width:860px){
  .pind{display:none}
  .page__card{padding-block:clamp(92px,12vh,120px) clamp(64px,9vh,96px)}
  .nav__links{
    position:fixed;inset:0 0 auto;top:0;flex-direction:column;gap:0;
    margin:0;padding:86px var(--gut) 30px;background:var(--bg);
    border-bottom:1px solid var(--line-2);
    transform:translateY(-101%);transition:transform .55s var(--ease-out);
    font-size:1.45rem;font-weight:600;letter-spacing:-.03em;
  }
  .nav__links a{padding:12px 0;color:var(--text)}
  .nav__links a::after{display:none}
  .nav.is-open .nav__links{transform:none}
  .burger{display:block;z-index:2}
  .nav__right .btn--sm{display:none}
}

@media (max-width:760px){
  .works,.why,.contact{grid-template-columns:1fr}
  .works{gap:42px}
  .contact{gap:44px}
  .sx-label p{max-width:none}
}

@media (max-width:560px){
  .steps{grid-template-columns:1fr;gap:0}
  .step{padding:18px 0}
  .step__n{margin-bottom:.9em}
  .hero__act{gap:9px}
  .hero__act .btn{flex:1 1 auto;padding:12px 18px}
  .hero__title{margin-bottom:.48em}
  .hero__lead{margin-bottom:1.6em}
  .eyebrow{margin-bottom:1.1em}
  .deck__stage{aspect-ratio:8/6.8}
  .card{width:94%}

  /* the domain checker must not become a cramped two-up on a phone */
  .dcheck__row{flex-direction:column}
  .dcheck__row .btn{width:100%}
  .dres li{font-size:.86rem}
  .dres__tag{margin-left:0;flex-basis:100%}
  .dprice__i{flex-direction:column;gap:4px}
  .dprice__i b{min-width:0}
  .nav__in{gap:12px}
}

/* Phone proportions. The sizes above were the desktop scale shrunk a little,
   which on a phone read as oversized. Same hierarchy, phone scale. */
@media (max-width:560px){
  :root{--shell:100%;--gut:clamp(20px,6vw,26px)}
  .hero__copy{max-width:none}
  .hero__title{font-size:clamp(1.9rem,8.2vw,2.4rem)}
  .hero__lead{font-size:.94rem}
  .sec__title{font-size:clamp(1.6rem,7vw,2rem)}
  .sec__lead{font-size:.94rem}
  .work__meta{padding-top:18px}
  .work__meta h3{font-size:1.06rem}
  .work__body{font-size:.875rem}
  .sx-label h3{font-size:1rem}
  .sx-label p{font-size:.82rem}
  .dprice__i b{font-size:.9rem}
  .dprice__i p{font-size:.84rem}
  .btn{font-size:.9rem;padding:12px 20px}
  .nav__mark{width:24px;height:24px}
  .nav__name{font-size:15.5px}
}

/* iOS Safari zooms the whole page in when a field under 16px gets focus */
@media (pointer:coarse){
  .f input,.f textarea,.dcheck__row input{font-size:16px}
}

/* ===========================================================================
   REDUCED MOTION
   =========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .pre{display:none}
  .cur{display:none}
  .hero__scroll i::after{display:none}
  [data-anim]{opacity:1 !important}
}

.no-motion [data-anim]{opacity:1 !important}