/* ---------- Fonts ---------- */
@font-face{
  font-family:"Cal Sans";
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  src:url("../fonts/CalSans-Regular.ttf") format("truetype");
}
@font-face{
  font-family:"Google Sans Flex";
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  src:url("../fonts/GoogleSansFlex-Variable.ttf") format("truetype");
}

/* ---------- Tokens (pulled from Paper) ---------- */
:root{
  --color-ground:#FFFFFF;
  --color-ink:#1A1A1A;
  --color-muted:#6B6F76;
  --color-hairline:#E4E4E7;
  --color-surface:#F3F4F6;
  --color-primary:#1B1B8F;
  --color-primary-ink:#FFFFFF;
  --color-accent-red:#FF0000;
  --color-accent-amber:#FFBB00;
  --color-accent-magenta:#FF00A6;
  --color-accent-purple:#8211D9;

  --font-display:"Cal Sans", sans-serif;
  --font-body:"Google Sans Flex", sans-serif;

  --text-xs:12px;
  --text-sm:13px;
  --text-base:16px;
  --text-md:19px;
  --text-lg:24px;
  --text-xl:32px;
  --text-2xl:56px;
  --text-3xl:96px;
  --text-display:148px;

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;
  --font-weight-extrabold:800;
  --font-weight-black:900;

  --tracking-tight:-0.02em;
  --tracking-normal:0em;
  --tracking-wide:0.08em;

  --leading-tight:94%;
  --leading-snug:114.99999999999999%;
  --leading-normal:150%;

  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:160px;

  --radius-sm:4px;
  --radius-md:12px;
  --radius-lg:28px;

  --design-width:1728px;
}

/* ---------- Dark mode ---------- */
/* Nearly everything in this file already reads color from the tokens above,
   so overriding them under [data-theme="dark"] flips the whole site with no
   further changes needed. The exceptions handled separately below: the Work
   Grid's boil/plaza tiles set their own text color from --color-ink for
   contrast against a FIXED brand background (purple/amber) that doesn't
   change with theme, so those two get explicitly re-pinned back to dark
   ink; and a couple of hardcoded (non-token) colors — the nav's white-to-
   transparent fade and the toast component — get their own fixes further
   down where they're defined. */
:root[data-theme="dark"]{
  --color-ground:#121214;
  --color-ink:#F2F2F0;
  --color-muted:#9A9DA6;
  --color-hairline:#2C2C30;
  --color-surface:#1C1C1F;
  --color-primary:#7B86F5;
  --color-primary-ink:#121214;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing:border-box; }
/* min-height + background on BOTH html and body — a page shorter than the
   viewport (like Coming Soon, with far less content than the homepage) can
   otherwise leave iOS Safari's overscroll/rubber-band area beyond the body's
   own content box unstyled, which shows through black instead of white. */
html{
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  min-height:100%;
  background:var(--color-ground);
}
body{
  margin:0;
  min-height:100vh;
  background:var(--color-ground);
  color:var(--color-ink);
  font-family:var(--font-body);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* viewport-fit=cover lets the page extend under the notch/home indicator
     (needed so those areas paint our white background instead of the
     browser's own default chrome) — these keep real content clear of them. */
  padding-top:env(safe-area-inset-top, 0px);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
img, svg, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

/* ---------- Page frame ----------
   The whole design was authored at a fixed 1728px canvas in Paper. We keep
   every section's internal spacing in real px (matching Paper exactly) and
   scale the canvas itself down on narrower viewports via `zoom` (see
   main.js), rather than re-deriving a responsive layout right now. */
.page{
  width:var(--design-width);
  background:var(--color-ground);
  margin:0 auto;
}

.px-96{ padding-left:96px; padding-right:96px; }

/* ---------- Nav ---------- */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:96px;
  padding:32px 96px;
  background-image:linear-gradient(180deg, var(--color-ground) 0%, transparent 100%); /* was a hardcoded white oklab fade — needs to track the theme so it fades from dark, not white, in dark mode */
}
.nav-wordmark{
  display:flex;
  align-items:center;
  gap:12px;
  height:65px;
  width:245px;
  flex-shrink:0;
}
.nav-logo-slot{
  width:59px;
  height:61px;
  flex-shrink:0;
  border-radius:8px;
  overflow:hidden;
  position:relative;
}
.nav-logo-img{
  position:absolute;
  top:calc(50% + 0.5px); left:50%;
  transform:translate(-50%,-50%);
  width:47px; height:52px;
  opacity:1;
}
.icon-stack{
  position:absolute;
  inset:0;
}
.icon-stack > div{ opacity:0; }

/* ---------- Logo intro animation scaffolding ---------- */
.headline-wrap{ position:relative; }
.hero-headline .ch{ position:relative; display:inline-block; }

/* Positioned in normal document flow (absolute, not fixed) so they scroll
   away with the page instead of trailing the viewport if the user scrolls
   mid-animation. Coordinates are set in JS as document-relative (viewport
   rect + scroll offset), matching how position:absolute resolves top/left
   against the initial containing block for elements parented to <body>. */
.blob{
  position:absolute;
  left:0; top:0;
  overflow:hidden;
  opacity:0;
  pointer-events:none;
  z-index:3;
}
.blob svg{ width:100%; height:100%; display:block; }
.blob path{ fill:none; stroke-linecap:round; stroke-linejoin:round; }

.rise{
  position:absolute;
  left:0; top:0;
  width:46px;
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none;
  z-index:6;
}
.rise svg{ width:100%; height:auto; display:block; }

/* Positioned in normal flow off the headline's own box (not position:fixed)
   so it scrolls away naturally with the page instead of staying pinned to
   the viewport. Safe from overflow because .hero-heading-group is capped at
   900px while the hero content area is ~1536px wide — 600+px of guaranteed
   clearance to the right regardless of how wide the headline text renders. */
.assembly{
  position:absolute;
  left:100%;
  top:50%;
  transform:translate(48px, -50%);
  display:flex;
  align-items:center;
  gap:16px;
  pointer-events:none;
}
.assembly .icon-frame{
  position:relative;
  width:190px;
  height:254px;
}
.assembly .icon-frame > div{ position:absolute; }
.nav-wordmark-text{
  font-family:var(--font-display);
  font-weight:var(--font-weight-extrabold);
  font-size:22px;
  letter-spacing:var(--tracking-normal);
  line-height:28px;
  color:var(--color-ink);
}
.nav-links{
  display:flex;
  align-items:center;
  gap:48px;
}
.nav-link{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-base);
  line-height:20px;
  color:var(--color-muted);
}
.nav-link.is-current{ color:var(--color-ink); }
.nav-cta{
  display:flex;
  align-items:center;
  padding:12px 22px;
  border-radius:999px;
  background:var(--color-ink);
}
.nav-cta span{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-sm);
  line-height:16px;
  color:var(--color-ground);
}
.nav-toggle{
  display:none; /* shown only below the mobile breakpoint */
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  flex-shrink:0;
  position:relative;
  z-index:21; /* stays above the backdrop and clickable while the menu is open */
}
.nav-backdrop{
  display:none; /* shown only below the mobile breakpoint */
}

/* ---------- Theme toggle ---------- */
.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  flex-shrink:0;
  border-radius:999px;
  color:var(--color-ink);
  transition:background 0.2s ease;
}
.theme-toggle:hover{ background:var(--color-surface); }
.theme-toggle svg{ width:18px; height:18px; stroke:currentColor; fill:none; }
.theme-toggle .theme-icon--moon{ display:none; }
:root[data-theme="dark"] .theme-toggle .theme-icon--sun{ display:none; }
:root[data-theme="dark"] .theme-toggle .theme-icon--moon{ display:block; }

/* ---------- Hero ---------- */
.hero{
  display:flex;
  flex-direction:column;
  width:100%;
  height:737px;
  padding:244px 96px 459px;
  gap:72px;
}
.hero-heading-group{
  display:flex;
  flex-direction:column;
  width:900px;
  height:176px;
  gap:20px;
}
.hero-eyebrow{
  font-family:var(--font-body);
  font-weight:var(--font-weight-semibold);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  line-height:16px;
  color:var(--color-primary);
}
.hero-headline{
  position:relative;
  z-index:8; /* sits above the paint layer so the solid letterforms mask the
                color to just the negative-space gaps, not the whole glyph */
  width:100%;
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-black);
  letter-spacing:var(--tracking-normal);
  color:var(--color-ink);
  font-size:120px;
  line-height:var(--leading-tight);
}
.hero-sub-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  width:100%;
  gap:64px;
}
.hero-intro{
  max-width:900px;
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--font-weight-regular);
  font-size:30px;
  line-height:var(--leading-normal);
  color:var(--color-ink);
}
.hero-scroll{
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
  padding-bottom:8px;
  gap:12px;
}
.hero-scroll-label{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-xs);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  writing-mode:vertical-rl;
  line-height:16px;
  color:var(--color-muted);
}
.hero-scroll svg{ flex-shrink:0; }

/* ---------- Coming Soon page ---------- */
.coming-soon-hero{
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  padding:40px 96px 24px; /* was a fixed 531px matching Paper's empty Hero frame — cut down since the video now fills that space and the fixed height pushed the heading off a laptop-height viewport */
}
/* the live NFC contact card shows this same video in a wide 4:3 box with
   object-fit:cover (cropping top/bottom of the native tall portrait video)
   rather than contained at its native aspect ratio — that reads bigger/bolder
   AND is shorter vertically, matching that here instead of the old approach */
.coming-soon-artwork-frame{
  width:440px;
  max-width:100%;
  aspect-ratio:4/3;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 6px 14px -2px rgba(0,0,0,0.10);
}
.coming-soon-artwork{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
/* on the homepage .work-header's bottom padding is the gap before .work-grid;
   on this page .work-header is followed directly by .footer instead, so it
   needs its own (larger) bottom padding rather than sharing the homepage value */
.work-header.coming-soon-work-header{ padding-top:40px; padding-bottom:96px; }

/* ---------- Work header ---------- */
.work-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  width:100%;
  padding:96px 96px 56px;
}
.work-heading-group{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.work-eyebrow{
  font-family:var(--font-body);
  font-weight:var(--font-weight-semibold);
  font-size:var(--text-sm);
  letter-spacing:var(--tracking-wide);
  text-transform:uppercase;
  line-height:16px;
  color:var(--color-primary);
}
.work-heading{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-black);
  letter-spacing:var(--tracking-tight);
  color:var(--color-ink);
  font-size:var(--text-3xl);
  line-height:var(--leading-tight);
  white-space:pre-wrap;
}
.work-note{
  max-width:420px;
  margin:0;
  text-align:right;
  font-family:var(--font-body);
  font-weight:var(--font-weight-regular);
  font-size:var(--text-md);
  line-height:var(--leading-normal);
  color:var(--color-muted);
}

/* ---------- Work grid ---------- */
.work-grid{
  display:flex;
  flex-direction:column;
  width:100%;
  height:1173px; /* taller than the two rows' own content (1044px) — the
    ~129px left over is deliberate breathing room before the Discipline
    Strip, per Paper's own declared section height */
  gap:24px;
  padding:0 96px;
}
.grid-row{
  display:flex;
  width:100%;
  gap:24px;
  flex-shrink:0;
}
.grid-row--1{ height:560px; }
.grid-row--2{ height:460px; }

.tile{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between; /* pins the top row to the top edge and the
    wordmark to the bottom edge of the padded box — without this the
    wordmark just sits in normal flow right under the top row */
  height:100%;
  padding:40px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background-size:cover;
  background-position:50%;
  isolation:isolate;
}
.tile--flex1{ flex:1 1 0; }
.tile--grow{ flex:1 1 0%; }
.tile--grow2{ flex:2 1 0%; }

.tile-photo{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:50%;
  transition:filter 600ms cubic-bezier(.22,.61,.36,1), transform 900ms cubic-bezier(.22,.61,.36,1);
  transform:scale(1);
  filter:brightness(1) saturate(1);
}
.tile.is-active .tile-photo{
  filter:brightness(0.62) saturate(0.94);
  transform:scale(1.045);
}

.tile-row{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  width:100%;
}
.tile-eyebrow{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-sm);
  line-height:16px;
}
.tile-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  flex-shrink:0;
  border-radius:999px;
}
.tile-arrow svg{ display:block; flex-shrink:0; }

.tile-word{
  position:relative;
  z-index:3;
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-black);
  letter-spacing:var(--tracking-normal);
  line-height:var(--leading-tight);
}

/* per-tile palette, matching Paper exactly */
.tile--oasis .tile-eyebrow{ color:#FFFFFFB8; }
.tile--oasis .tile-arrow{ background:#FFFFFF24; }
.tile--oasis .tile-word{ font-size:88px; color:#FFFFFF; text-shadow:0 2px 24px rgba(0,0,0,0.18); }

.tile--boil{ background-color:var(--color-accent-purple); }
.tile--boil .tile-eyebrow{ color:var(--color-ink); }
.tile--boil .tile-arrow{ background:var(--color-muted); opacity:0.6; }
.tile--boil .tile-word{ font-size:64px; color:var(--color-ink); opacity:0.9; }

.tile--hikaru{ background-color:var(--color-accent-magenta); }
.tile--hikaru .tile-eyebrow{ color:#FFFFFFC7; }
.tile--hikaru .tile-arrow{ background:#FFFFFF29; }
.tile--hikaru .tile-word{ font-size:64px; color:#FFFFFF; }

.tile--plaza{ background-color:var(--color-accent-amber); }
.tile--plaza .tile-eyebrow{ color:var(--color-ink); }
.tile--plaza .tile-arrow{ background:#1A1A1A1A; }
.tile--plaza .tile-word{ font-size:88px; color:var(--color-ink); opacity:0.9; }

/* Boil/Plaza read their text color from --color-ink for contrast against
   their own FIXED brand background (purple/amber) — that background never
   changes with theme, so their text must stay pinned to dark ink even in
   dark mode, rather than flipping to light ink like everything else. */
:root[data-theme="dark"] .tile--boil .tile-eyebrow,
:root[data-theme="dark"] .tile--boil .tile-word,
:root[data-theme="dark"] .tile--plaza .tile-eyebrow,
:root[data-theme="dark"] .tile--plaza .tile-word{
  color:#1A1A1A;
}

/* tiles without a full-bleed hero image (Boil/Hikaru fallback until their
   card layout gets a photo treatment identical to Oasis/Plaza) */
.tile-word,
.tile-row{ pointer-events:none; }
.tile-arrow{ pointer-events:auto; }

/* Reveal panel: the arrow button opens into a rounded-rectangle video
   window on hover — its top-right corner is pinned to the arrow's own
   28px radius (56px / 2) so the curve is continuous through the whole
   animation, only the other three corners ease to the card radius. */
.reveal{
  position:absolute;
  top:40px;
  right:40px;
  width:56px;
  height:56px;
  border-radius:28px;
  overflow:hidden;
  z-index:2;
  opacity:0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,0.4);
  transition:
    width 620ms cubic-bezier(.22,.61,.36,1),
    height 620ms cubic-bezier(.22,.61,.36,1),
    border-radius 620ms cubic-bezier(.22,.61,.36,1),
    opacity 260ms ease-out,
    box-shadow 620ms ease;
}
.tile.is-active .reveal{
  width:min(56%, 460px);
  height:min(72%, 420px);
  border-radius:var(--radius-md) 28px var(--radius-md) var(--radius-md);
  opacity:1;
}
.reveal video,
.reveal img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#111;
}

/* ---------- Discipline strip ---------- */
.discipline-strip{
  display:flex;
  width:100%;
  height:421px;
  padding:80px 96px;
  border-top:1px solid var(--color-hairline);
  border-bottom:1px solid var(--color-hairline);
}
.discipline{
  display:flex;
  flex-direction:column;
  flex:1 1 0%;
  gap:20px;
}
.discipline:first-child{ padding-right:48px; }
.discipline:not(:first-child):not(:last-child){ padding:0 48px; }
.discipline:last-child{ padding-left:48px; }
.discipline-divider{
  width:1px;
  flex-shrink:0;
  background:var(--color-hairline);
}
.discipline-index{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-sm);
  line-height:16px;
  color:var(--color-primary);
}
.discipline-title{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-extrabold);
  font-size:var(--text-lg);
  line-height:30px;
  color:var(--color-ink);
}
.discipline-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--font-weight-regular);
  font-size:var(--text-base);
  line-height:var(--leading-normal);
  color:var(--color-muted);
}

/* ---------- Awards strip ---------- */
.awards-strip{
  display:flex;
  flex-direction:column;
  gap:76px;
  width:100%;
  padding:80px 96px;
  border-top:1px solid var(--color-hairline);
  border-bottom:1px solid var(--color-hairline);
}
.awards-heading{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-black);
  font-size:var(--text-2xl);
  line-height:var(--leading-tight);
  letter-spacing:var(--tracking-tight);
  color:var(--color-ink);
}
.awards-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:48px;
}
.awards-text{
  display:flex;
  flex-direction:column;
  gap:20px;
  max-width:426px;
}
.awards-label{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-lg);
  line-height:30px;
  color:var(--color-primary);
}
.awards-name{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--font-weight-extrabold);
  font-size:var(--text-lg);
  line-height:30px;
  color:var(--color-ink);
}
.awards-logos{
  display:flex;
  align-items:center;
  gap:35px;
  flex-shrink:0;
}
.awards-logo{
  width:88px;
  height:80px;
  object-fit:cover;
}

/* ---------- Footer ---------- */
.footer{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  width:100%;
  padding:48px 96px;
  border-top:1px solid var(--color-hairline);
}
.footer-copy{
  font-family:var(--font-body);
  font-weight:var(--font-weight-regular);
  font-size:var(--text-sm);
  line-height:16px;
  color:var(--color-muted);
}
.footer-links{
  display:flex;
  gap:32px;
}
.footer-links a{
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-sm);
  line-height:16px;
  color:var(--color-ink);
}

/* ---------- Toast (shared feedback for e.g. copy-to-clipboard) ---------- */
.toast{
  position:fixed;
  bottom:32px;
  left:50%;
  transform:translateX(-50%) translateY(16px);
  background:var(--color-ink);
  color:var(--color-ground);
  font-family:var(--font-body);
  font-weight:var(--font-weight-medium);
  font-size:var(--text-sm);
  padding:12px 24px;
  border-radius:999px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity 0.3s ease, transform 0.4s ease;
  z-index:999;
}
.toast.is-visible{ opacity:1; transform:translateX(-50%) translateY(0); }

@media (prefers-reduced-motion: reduce){
  .tile-photo, .reveal{ transition:none !important; }
}

/* ==========================================================================
   Mobile (< 768px) — a genuine reflow, not a further shrink of the desktop
   canvas. Below this width main.js stops applying `zoom` and lets these
   rules take over entirely; same content, same brand identity, same
   interaction patterns, laid out for a phone instead of scaled down to fit
   one. See main.js for the breakpoint constant (keep the two in sync).
   ========================================================================== */
@media (max-width: 767px){

  .page{ width:100%; }

  /* ---- Nav ---- */
  .nav{
    padding:16px 20px;
    position:relative;
  }
  .nav-wordmark-text{ font-size:18px; }
  /* Desktop shrinks the logo along with the whole canvas via `zoom` as the
     viewport narrows; mobile bypasses that (see main.js) and reflows at real
     px instead, so the logo needs its own explicit size here — first cut
     15% down from the 59x61/47x52 desktop slot/icon, then another 20% down
     from that per feedback (still read oversized on a real phone). */
  .nav-logo-slot{ width:40px; height:42px; }
  .nav-logo-img{ width:32px; height:35px; }
  .nav-toggle{ display:flex; }
  .nav-links{
    display:none;
    position:absolute;
    top:100%; left:0; right:0;
    z-index:20; /* above .nav-backdrop */
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:56px 20px 32px; /* generous space above "Work", the first item */
    background:var(--color-ground);
    box-shadow:0 16px 32px -12px rgba(0,0,0,0.18);
    border-bottom-left-radius:var(--radius-md);
    border-bottom-right-radius:var(--radius-md);
  }
  .nav-links.is-open{ display:flex; }
  .nav-cta{ margin-top:4px; }

  /* Dark scrim behind the open menu, so the menu panel is the only clearly
     legible thing on screen while it's open — everything else (hero text)
     fades into near-black beneath it. Starts below the nav itself (96px,
     matches its rendered height) rather than covering the full viewport, so
     the header keeps its normal light-mode colors instead of dimming too. */
  .nav-backdrop{
    display:block;
    position:fixed;
    top:96px; left:0; right:0; bottom:0;
    z-index:15;
    opacity:0;
    background:linear-gradient(180deg, rgba(8,8,12,0.9), rgba(8,8,12,0.98));
    transition:opacity 260ms ease;
    pointer-events:none;
  }
  .nav-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  /* ---- Hero ---- */
  .hero{
    height:auto;
    padding:132px 20px 56px; /* extra top room for a bigger formation icon */
    gap:32px;
  }
  .hero-heading-group{
    width:100%;
    height:auto;
  }
  .hero-headline{
    font-size:clamp(40px, 13vw, 64px);
  }
  .hero-eyebrow{ font-size:11px; }
  .hero-sub-row{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
  }
  .hero-intro{
    font-size:17px;
    max-width:100%;
  }
  .hero-scroll{ display:none; } /* scroll affordance isn't needed on touch */

  /* Assembly forms in the empty top-right corner of the hero (inside its
     top padding, above the eyebrow) rather than beside or below the
     headline — there's no clean space in either of those spots on a phone
     without the shapes passing directly over body text mid-flight.
     .headline-wrap is un-set as a positioning context here so .assembly's
     containing block resolves up to .hero instead (the next positioned
     ancestor), independent of the headline's own position/width/wrapping.
     .icon-frame's mobile size is matched by logo-intro.js reading
     window.innerWidth at runtime; keep the two in sync if either changes. */
  .headline-wrap{ position:static; }
  .hero{ position:relative; }
  .assembly{
    left:auto;
    top:12px;
    right:20px;
    transform:none;
  }
  /* Deliberately much bigger than the 47px header target (nav-logo-img) —
     the formation is the "big reveal" moment and should read that way; the
     shrink-then-fly sequence (see logo-intro.js) is what makes it land at
     the small header size, not this resting size being small to begin with. */
  .assembly .icon-frame{
    width:85px;
    height:113px;
  }

  /* ---- Coming Soon page ---- */
  .coming-soon-hero{ height:auto; padding:39px 20px 27px; } /* top+bottom cut ~30% again per feedback (56/39 -> 39/27) */
  .coming-soon-artwork-frame{ width:320px; }
  /* the visible gap below the video is this padding-bottom PLUS the work-header's
     own padding-top right after it — cutting only the first wasn't enough, so
     both get scoped overrides here (homepage's .work-header padding is untouched) */
  .work-header.coming-soon-work-header{ padding-top:45px; padding-bottom:64px; }

  /* ---- Work header ---- */
  .work-header{
    flex-direction:column;
    align-items:flex-start;
    padding:64px 20px 32px;
    gap:20px;
  }
  .work-heading{ font-size:40px; }
  .work-note{
    max-width:100%;
    text-align:left;
    font-size:15px;
  }

  /* ---- Work grid: single column, tiles sized by aspect-ratio instead of
     a fixed px height so they scale naturally with viewport width ---- */
  .work-grid{
    height:auto;
    padding:0 20px;
    gap:16px;
  }
  .grid-row{
    flex-direction:column;
    height:auto;
    gap:16px;
  }
  .grid-row--1, .grid-row--2{ height:auto; }
  .tile{
    height:auto;
    aspect-ratio:4/5;
    padding:24px;
  }
  /* These distribute WIDTH between two tiles in a desktop row. On mobile
     .grid-row becomes column-direction, so flex-grow/flex-basis:0 would
     instead fight over HEIGHT and collapse every tile down to near-zero
     (its content's minimum), overriding aspect-ratio entirely. */
  .tile--flex1, .tile--grow, .tile--grow2{ flex:none; }
  .tile--oasis .tile-word,
  .tile--plaza .tile-word{ font-size:44px; }
  .tile--boil .tile-word,
  .tile--hikaru .tile-word{ font-size:34px; }
  .tile-arrow{ width:44px; height:44px; }

  /* reveal's pinned corner tracks the smaller mobile arrow (44px / 2 = 22px,
     was 28px for the 56px desktop arrow) so the corner-continuity trick
     still lines up exactly */
  .reveal{
    top:24px; right:24px;
    width:44px; height:44px;
    border-radius:22px;
  }
  .tile.is-active .reveal{
    border-radius:var(--radius-md) 22px var(--radius-md) var(--radius-md);
  }

  /* ---- Discipline strip: stack, dividers go horizontal. Internal spacing
     (between the three blocks) is kept tight; the TOP padding specifically
     is generous — that's the breathing room between the divider line and
     the "01 Industrial Design" text starting below it. margin-top is the
     separate gap between the Work Grid tiles ending and the divider line
     itself — on desktop this is a fixed .work-grid height 129px taller
     than its content; mobile switches .work-grid to height:auto (so tiles
     scale by aspect-ratio) which drops that trick, so it has to be
     recreated here instead. */
  .discipline-strip{
    flex-direction:column;
    height:auto;
    margin-top:48px;
    padding:88px 20px 40px;
    gap:20px;
  }
  .discipline{
    padding:0 !important;
    gap:12px;
  }
  .discipline-divider{
    width:100%;
    height:1px;
  }
  .discipline-title{ font-size:20px; line-height:26px; }
  .discipline-body{ font-size:14px; }

  /* ---- Awards strip: stack each row (text above logos) and let the logo
     group wrap, matching how other sections reflow to single-column ---- */
  .awards-strip{ padding:56px 20px; gap:40px; }
  .awards-heading{ font-size:32px; }
  .awards-row{ flex-direction:column; align-items:flex-start; gap:24px; }
  /* matches .discipline's mobile gap directly above this section — desktop
     already matched (both 20px) but mobile didn't, since .discipline drops
     to 12px on mobile while this had no override and stayed at 20px */
  .awards-text{ max-width:100%; gap:12px; }
  /* matches .discipline-title's mobile size directly above this section —
     both text lines were the same 24px as each other at every breakpoint
     before this, differentiated only by color/weight, so keeping them equal
     here preserves that same relationship */
  .awards-label, .awards-name{ font-size:20px; line-height:26px; }
  .awards-logos{ flex-wrap:wrap; gap:16px; } /* tighter than desktop's 35px now that the logos themselves are half the size */
  .awards-logo{ width:44px; height:40px; } /* 50% down from the 88x80 desktop size */

  /* ---- Footer: smaller and tighter, but with real breathing room above it
     separating it from the Discipline Strip's divider line ---- */
  .footer{
    flex-direction:column;
    align-items:flex-start;
    gap:20px;
    padding:56px 20px 28px;
  }
  .footer-links{ gap:20px; }
}