/* ──────────────────────────────────────────────────────────
   Corporate style layer.

   An alternative skin for the same markup — no second page, no
   duplicated content. Everything here is scoped to
   [data-style="corporate"] on <html>, so on the default studio site
   this file matches nothing.

   What it changes, in order of how much it matters:

     1. Page shape. The studio site is a horizontal slide deck on
        desktop (main is a flex row of 100vw sections, scrolled by a
        wheel-driven lerp). Corporate is an ordinary vertical
        document with a max-width column, which means undoing that
        deck rather than restyling it. The lerp itself is switched
        off in JS — see the guard in site-effects.js — because CSS
        alone would leave it swallowing wheel events.

     2. Palette. Neon cyan on near-black becomes ink on off-white,
        with one restrained accent used sparingly.

     3. Type. The hand-drawn display face and the oversized tracking
        give way to a single sans at a tight modular scale.

     4. Everything ambient. The duck, the chicks, the flower field,
        the games console, the grid backdrop and the ambient audio are
        all gone — most switched off in JS, the rest hidden here.

        The soft circle cursor is the exception and stays in both
        looks. It isn't decoration: the OS pointer is hidden site-wide
        so that element can BE the pointer, so removing it left the
        page with nothing to point with. Corporate only recolours it.

   The studio site is the default and is untouched by any of this.
   ────────────────────────────────────────────────────────── */

/* ─── Tokens ──────────────────────────────────────────────
   Deliberately a small palette: two inks, two surfaces, one line
   colour and one accent. Anything that needed a glow in the studio
   look gets weight or spacing here instead. */
[data-style="corporate"] {
  --c-bg:        #ffffff;
  --c-surface:   #f6f7f9;
  --c-surface-2: #eef0f4;
  --c-line:      #e2e5ea;
  --c-line-firm: #cfd4dc;
  --c-ink:       #14181f;
  --c-ink-soft:  #4a5260;
  --c-ink-faint: #6b7482;
  --c-accent:    #1a56db;
  --c-accent-soft: #eef2ff;

  /* The frosted-band recipe, shared by the hero and Get in touch. */
  --c-wash:
    radial-gradient(46% 52% at 14% 20%, rgba(26, 86, 219, 0.30), transparent 70%),
    radial-gradient(42% 48% at 86% 24%, rgba(124, 92, 226, 0.26), transparent 70%),
    radial-gradient(54% 52% at 60% 98%, rgba(0, 158, 190, 0.22), transparent 72%);
  --c-pane: rgba(255, 255, 255, 0.46);
  --c-pane-solid: rgba(255, 255, 255, 0.90);

  --c-maxw: 1120px;
  --c-gut: 32px;
  --c-radius: 10px;

  --c-font: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --c-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

[data-style="corporate"][data-theme="dark"],
[data-style="corporate"]:not([data-theme="light"]) {
  --c-wash:
    radial-gradient(46% 52% at 14% 20%, rgba(111, 155, 255, 0.34), transparent 70%),
    radial-gradient(42% 48% at 86% 24%, rgba(160, 120, 255, 0.28), transparent 70%),
    radial-gradient(54% 52% at 60% 98%, rgba(0, 190, 220, 0.24), transparent 72%);
  --c-pane: rgba(14, 17, 22, 0.52);
  --c-pane-solid: rgba(14, 17, 22, 0.90);
  --c-bg:        #0e1116;
  --c-surface:   #161a21;
  --c-surface-2: #1d222b;
  --c-line:      #262c36;
  --c-line-firm: #39414e;
  --c-ink:       #eef1f6;
  --c-ink-soft:  #a8b1c0;
  --c-ink-faint: #7f8896;
  --c-accent:    #6f9bff;
  --c-accent-soft: #172037;
}
/* The site stores light as the default and only marks dark implicitly,
   so light has to win explicitly wherever both could match. */
[data-style="corporate"][data-theme="light"] {
  --c-wash:
    radial-gradient(46% 52% at 14% 20%, rgba(26, 86, 219, 0.30), transparent 70%),
    radial-gradient(42% 48% at 86% 24%, rgba(124, 92, 226, 0.26), transparent 70%),
    radial-gradient(54% 52% at 60% 98%, rgba(0, 158, 190, 0.22), transparent 72%);
  --c-pane: rgba(255, 255, 255, 0.46);
  --c-pane-solid: rgba(255, 255, 255, 0.90);
  --c-bg:        #ffffff;
  --c-surface:   #f6f7f9;
  --c-surface-2: #eef0f4;
  --c-line:      #e2e5ea;
  --c-line-firm: #cfd4dc;
  --c-ink:       #14181f;
  --c-ink-soft:  #4a5260;
  --c-ink-faint: #6b7482;
  --c-accent:    #1a56db;
  --c-accent-soft: #eef2ff;
}

/* ─── Page shell ──────────────────────────────────────────
   Undo the deck. html/body are locked to 100vh with overflow:hidden
   on the studio desktop layout; both have to come back before the
   document can scroll normally. */
[data-style="corporate"],
[data-style="corporate"] body {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
  background: var(--c-bg) !important;
  color: var(--c-ink);
  font-family: var(--c-font);
  scroll-behavior: smooth;
}

[data-style="corporate"] main {
  display: block !important;
  flex-direction: initial !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 76px;              /* clears the fixed top bar */
}

/* Sections stop being 100vw slides and become ordinary bands. */
[data-style="corporate"] main > section {
  flex: none !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  display: block !important;
  padding: 88px var(--c-gut) !important;
  max-width: none !important;
  scroll-snap-align: none !important;
}

/* One shared measure for every section's content. */
[data-style="corporate"] main > section > * {
  max-width: var(--c-maxw);
  margin-left: auto;
  margin-right: auto;
}

/* ─── Two views ───────────────────────────────────────────
   About is not part of the homepage here: the page opens on the hero,
   the work and My Alias, and About replaces them when its tab is
   pressed. The contact block is the page footer and stays on both.

   Driven by data-view on <html> so the whole switch is one attribute,
   and so the state is readable from anywhere without a class hunt. */
[data-style="corporate"] #connect { display: none !important; }
[data-style="corporate"][data-view="about"] #connect { display: block !important; }
[data-style="corporate"][data-view="about"] #hero,
[data-style="corporate"][data-view="about"] #work,
[data-style="corporate"][data-view="about"] #tattoos { display: none !important; }
/* The bar has no hero behind it on the About view, so it keeps its
   ground rather than going transparent over the content. */
[data-style="corporate"][data-view="about"] #sidenav.is-over-hero {
  background: var(--c-bg);
  border-bottom-color: var(--c-line);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* Clear of the fixed bar, since there is no hero reaching up behind it
   to provide that space on this view. */
[data-style="corporate"][data-view="about"] #connect { padding-top: 132px !important; }

/* Alternating surfaces give the page rhythm without decoration. */
[data-style="corporate"] #work { background: var(--c-surface); }
[data-style="corporate"] #connect { background: var(--c-bg); }

/* ─── Ambient studio machinery: off ───────────────────────
   Most of this is already prevented from starting in JS; these rules
   cover the markup that ships in the HTML regardless. */
[data-style="corporate"] .grid-bg,
[data-style="corporate"] .ground-art,
[data-style="corporate"] .flowerfield,
[data-style="corporate"] .guestbook-grass-canvas,
[data-style="corporate"] .field-chick,
[data-style="corporate"] .duck-fart,
[data-style="corporate"] .duck-fart-fx,
[data-style="corporate"] .site-scrollbar,
[data-style="corporate"] .duck-speech-bubble,
[data-style="corporate"] .home-icon,
[data-style="corporate"] .games-drawer,
[data-style="corporate"] #outro,
[data-style="corporate"] .hero-starter-pack,
[data-style="corporate"] .coin-slot,
[data-style="corporate"] .film-reset,
[data-style="corporate"] .guestbook,
[data-style="corporate"] body::after,
[data-style="corporate"] body::before {
  display: none !important;
}

/* The studio site paints a full-bleed gradient and grid behind
   everything; corporate wants flat paper. */
[data-style="corporate"] section::before,
[data-style="corporate"] section::after { display: none !important; }

/* ─── Top bar ─────────────────────────────────────────────
   The studio nav is a 120px band with an animated indicator riding a
   track. Corporate turns the same markup into a plain sticky bar. */
[data-style="corporate"] #sidenav {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: 76px;
  display: flex;
  /* home.css lays the studio nav out as a COLUMN — without this the
     wordmark and the links stack instead of sitting on one bar. */
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 0 var(--c-gut);
  /* Solid, not a translucent blur. A backdrop-filter here has to sample
     and re-composite the whole band on every scroll frame, and it was
     smearing a ghost of the page behind the bar; a corporate header
     gains nothing from the effect anyway. */
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-line);
  transition: background 0.2s ease, border-color 0.2s ease;
  z-index: 300;
  /* Below 900px the studio site slides this bar out of view with a
     translate and hands navigation to the hamburger. Corporate keeps one
     bar at every width, so the transform has to be cancelled. */
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
[data-style="corporate"] .nav-track,
[data-style="corporate"] .nav-indicator,
[data-style="corporate"] .nav-dot,
[data-style="corporate"] .current-page { display: none !important; }

/* "Playground" points at the flower field / games / film scatter, none of
   which corporate has as a section. corporate.js also removes it, but JS
   is deferred — so the bar painted WITH the link and then dropped it, a
   visible flicker on every load. Hiding it here settles it on the first
   paint, because the style flag is set by the inline script in <head>. */
[data-style="corporate"] #sidenav [data-section="play"],
[data-style="corporate"] .hamburger-dropdown [data-section="play"] { display: none !important; }

[data-style="corporate"] .nav-items {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  /* Centred on the BAR, not on whatever space is left between the
     wordmark and the hamburger — absolute positioning keeps the links
     dead centre no matter how wide the name is or whether the burger is
     showing. The mobile panel below resets this.

     top/right/bottom are pinned explicitly, not left to the static
     position: below 900px home.css gives this group `top: 60px` for the
     studio's drop-down menu, which pushed the links out of the bar and
     left them hanging underneath it. Centring on both axes is the only
     thing that holds at every width. */
  position: absolute;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  /* Below 900px the studio site hides this group — faded out AND clipped
     to nothing — and hands over to its slanted-card menu. Corporate uses
     these links as the navigation at every width (inline in the bar down
     to 620px, then inside its own hamburger panel), so both halves of
     that hiding have to be undone here rather than in one breakpoint:
     the clip applies from 900px down, and leaving it to the 620px query
     left the links invisible in the band between the two. */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  clip-path: none !important;
}
/* The studio panel hangs an invisible hover-bridge above itself. */
[data-style="corporate"] .nav-items::before { display: none !important; }
[data-style="corporate"] .nav-item {
  position: static !important;
  transform: none !important;
  writing-mode: horizontal-tb !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 14px;
  border-radius: 7px;
  opacity: 1 !important;
  color: var(--c-ink-soft);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
[data-style="corporate"] .nav-label {
  writing-mode: horizontal-tb !important;
  transform: none !important;
  font-family: var(--c-font);
  font-size: 21px;   /* 14px + 50% */
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}
/* No pill behind the link on hover, and no marker beside it. The studio
   nav hangs a hand-drawn ginkgo leaf off .nav-item::before — masked PNG,
   shown on the active tab and on hover — which is the sparkle. Weight
   and colour carry the state here instead. */
[data-style="corporate"] .nav-item::before,
[data-style="corporate"] .nav-item::after { display: none !important; }
[data-style="corporate"] .nav-item:hover { background: none; color: var(--c-ink); }
[data-style="corporate"] .nav-item.active { color: var(--c-ink); font-weight: 600; }

/* Wordmark on the left of the bar, drawn in rather than added to the
   markup so the studio DOM is untouched. */
/* The wordmark reuses #sidenav::before — which below 900px is ALSO the
   studio's mobile nav: a full-width lavender card, 3px teal border,
   rotated -4deg, sitting behind the pill menu. Overriding only the
   typography left the corporate wordmark printed inside that card, which
   is the tilted blue-bordered box on mobile. Every box property it
   carries has to be unwound, not just the text ones. */
[data-style="corporate"] #sidenav::before {
  content: 'Kathlyn Teh';
  display: block;                 /* home.css hides this pseudo on desktop */
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0 auto 0 0;             /* margin-right:auto pushes the links right */
  background: none;
  border: none;
  border-radius: 0;
  transform: none;
  transition: none;
  opacity: 1;
  z-index: auto;
  font-family: var(--c-font);
  font-size: 24px;   /* 16px + 50% */
  font-weight: 650;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}

/* ─── Type scale ──────────────────────────────────────────
   One family, four sizes, no tracking games. */
[data-style="corporate"] h1,
[data-style="corporate"] h2,
[data-style="corporate"] h3,
[data-style="corporate"] h4,
[data-style="corporate"] p,
[data-style="corporate"] li,
[data-style="corporate"] a,
[data-style="corporate"] span,
[data-style="corporate"] div {
  font-family: var(--c-font);
}
[data-style="corporate"] p,
[data-style="corporate"] li {
  color: var(--c-ink-soft);
  font-size: 16.5px;
  line-height: 1.7;
  letter-spacing: 0;
}

/* Small uppercase section label, drawn before each section's content. */
[data-style="corporate"] main > section::before {
  display: block !important;
  font-family: var(--c-mono);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  max-width: var(--c-maxw);
  margin: 0 auto 22px;
  content: '';
  position: static;
  background: none;
  width: auto;
  height: auto;
  inset: auto;
}
[data-style="corporate"] #work::before    { content: 'Featured work'; }
[data-style="corporate"] #connect::before { content: 'About'; }
[data-style="corporate"] #hero::before    { content: none; }

/* The wordmark is a control now — it takes you home. (No cursor rule:
   the site hides the native pointer site-wide and draws its own, so one
   here would do nothing. pointer-events lives on the main rule below,
   which is later in the file and would otherwise win.) */
[data-style="corporate"] .c-wordmark-travel:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 4px;
}

/* ─── The toggle, once it is in the menu ──────────────────
   Below 620px corporate.js moves the style toggle into the hamburger
   panel, where it reads as a row like the links beside it rather than a
   floating disc. Everything the disc needed — fixed position, the
   circle, the frosting — has to come back off. */
[data-style="corporate"] .nav-items > .style-toggle {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 14px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--c-ink-soft);
}
/* The label stops being a hover tip and becomes the row's text. */
[data-style="corporate"] .nav-items > .style-toggle .to-studio {
  position: static !important;
  opacity: 1 !important;
  transform: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  color: inherit !important;
  font-family: var(--c-font) !important;
  font-size: 19.5px !important;
  letter-spacing: 0 !important;
  pointer-events: none;
}
/* Icon after the words, matching "make it fun ✨" rather than an icon
   with a caption trailing it. */
[data-style="corporate"] .nav-items > .style-toggle .style-toggle-spark {
  order: 2;
  width: 20px;
  height: 20px;
}

/* ─── The studio toggle, once it is in the menu ───────────
   Same idea on the other side: below 900px the studio site folds its
   links into the slanted card, and the toggle goes in with them as
   "make it boring" with the broom. The pill it is the rest of the
   time has to be unwound the same way corporate's disc is. */
/* Scoped away from corporate rather than left unscoped and relying on
   specificity: corporate has its own row a few rules up, and an unscoped
   rule here beat it for the glyph — which put BOTH the broom and the
   sparkle in corporate's menu at once. */
html:not([data-style="corporate"]) .nav-items > .style-toggle {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  padding: 10px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  gap: 8px;
}
/* The hover tip stands down; the row label takes over. */
html:not([data-style="corporate"]) .nav-items > .style-toggle .to-corporate {
  display: none !important;
}
html:not([data-style="corporate"]) .nav-items > .style-toggle .to-corporate-menu {
  display: inline !important;
  font-family: var(--font-mono);
  color: var(--cyan);
}
html:not([data-style="corporate"]) .nav-items > .style-toggle .style-toggle-broom {
  /* The desktop rule that switches the broom on lives in a min-width
     query, which by definition does not match here — so the menu row has
     to turn it on itself. */
  display: block !important;
  order: 2;
  width: 17px;
  height: 17px;
}

/* ─── Seamless header ─────────────────────────────────────
   While the hero is behind it the bar has no ground of its own — no
   fill, no rule — so the frosted band runs unbroken from the top of the
   page and the two read as one surface. corporate.js adds the class;
   solid is the default precisely so a script failure leaves a legible
   bar rather than type floating over the page.

   Still a flat fill and not a blur when it is opaque: a backdrop-filter
   here has to re-composite the whole band on every scroll frame, and it
   smeared a ghost of the page behind the bar. */
[data-style="corporate"] #sidenav.is-over-hero {
  /* Not fully transparent: the hero statement scrolls up underneath this
     band, and without something between them the nav links sat straight on
     top of the headline. A blur plus a light wash keeps the hero readable
     as it passes behind and gives the links their own ground, without
     drawing an edge — which is the whole point of the seam being gone.

     This is the one place the blur earns its cost: it only runs while the
     hero is behind the bar, not for the whole page. */
  background: rgba(255, 255, 255, 0.30);
  border-bottom-color: transparent;
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
[data-style="corporate"][data-theme="dark"] #sidenav.is-over-hero,
[data-style="corporate"]:not([data-theme="light"]) #sidenav.is-over-hero {
  background: rgba(14, 17, 22, 0.30);
}
[data-style="corporate"][data-theme="light"] #sidenav.is-over-hero {
  background: rgba(255, 255, 255, 0.30);
}
@media (prefers-reduced-transparency: reduce) {
  [data-style="corporate"] #sidenav.is-over-hero {
    background: var(--c-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* An open menu panel needs the bar opaque whatever is behind it. */
[data-style="corporate"] #sidenav.is-over-hero.c-nav-open {
  background: var(--c-bg);
  border-bottom-color: var(--c-line);
}
/* ─── Hero ────────────────────────────────────────────────
   The studio hero is a per-letter wobbling wordmark in a hand-drawn
   face over a starter-pack collage. Corporate keeps the same words
   and drops every one of those devices. */
[data-style="corporate"] #hero {
  /* Pulled up under the fixed 76px bar and given the height back as
     padding, so the frosted band and its wash start at the very top of
     the page while the type stays where it was. That is what lets the
     bar sit ON the hero rather than above it. main keeps its own
     padding-top, so every other section still clears the bar. */
  margin-top: -76px;
  padding-top: calc(108px + 76px) !important;
  padding-bottom: 88px !important;
  /* No rule under the hero: the frosted band already ends where it ends,
     and a hairline on top of that edge just draws the seam twice. */
  border-bottom: 0;
  /* Containing block for the wash and the pane, and its own stacking
     context so their z-indexes cannot leak. The travelling wordmark is a
     fixed clone on <body>, so clipping here never touches it. */
  position: relative;
  overflow: hidden !important;
  isolation: isolate;
}

/* ─── Glass hero ──────────────────────────────────────────
   The frosted pane IS the hero band — full bleed, not a card floating
   inside it. Three layers in one stacking context:

     ::before  the colour wash                     (z 0)
     ::after   the frosted pane over all of it     (z 1)
     content   the wordmark and the statement      (z 2)

   The wash is what makes this read as glass at all — a backdrop filter
   with nothing behind it is invisible, and the hero is otherwise flat
   --c-bg. Kept low-contrast so the page still reads restrained.

   ::before is normally each section's small uppercase label; the hero
   sets that to content:none, so it is free here — but the label rule's
   own properties have to be unwound. */
[data-style="corporate"] #hero::before {
  content: '';
  display: block !important;
  position: absolute;
  inset: -12% -6%;
  z-index: 0;
  margin: 0;
  max-width: none;
  pointer-events: none;
  background: var(--c-wash);
  filter: blur(26px);
}
[data-style="corporate"] #hero::after {
  content: '';
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--c-pane);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
/* Above both layers. !important because the corporate reset further down
   pins .hero-name-block to position:static, and a static element ignores
   z-index — which left the tagline painting UNDER the frosted pane and
   being blurred by it. */
[data-style="corporate"] #hero > * { position: relative !important; z-index: 2; }

/* The statement is no longer a card — the band behind it is the glass. */
[data-style="corporate"] .hero-name-row {
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0 !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Safari and Firefox before 103 ignore backdrop-filter, where a 46%
   white pane over the wash would leave the type sitting on colour.
   Fall back to a near-opaque pane. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-style="corporate"] #hero::after,
  [data-style="corporate"] .c-contact::after { background: var(--c-pane-solid); }
}

/* Dark and light are handled by the --c-wash / --c-pane tokens now,
   which the theme blocks at the top of this file redefine — so both
   bands invert together and there is one place to tune them. */

/* The Featured work label carries its own space; a full band padding on
   top of it read as a bigger gap than it is. */
[data-style="corporate"] #work { padding-top: 56px !important; }

@media (max-width: 620px) {
  [data-style="corporate"] #hero { padding-bottom: 56px !important; }
  [data-style="corporate"] #work { padding-top: 40px !important; }
}

@media (prefers-reduced-transparency: reduce) {
  [data-style="corporate"] #hero::before,
  [data-style="corporate"] .c-contact::before { display: none !important; }
  [data-style="corporate"] #hero::after,
  [data-style="corporate"] .c-contact::after {
    background: var(--c-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
[data-style="corporate"] .hero-name-block,
[data-style="corporate"] .hero-name-row,
[data-style="corporate"] .hero-name-outer,
[data-style="corporate"] .hero-roles {
  display: block !important;
  transform: none !important;
  width: auto !important;
  max-width: var(--c-maxw);
  margin: 0 auto;
  position: static !important;
}
[data-style="corporate"] .hero-greeting { display: none !important; }

/* ─── The travelling wordmark ─────────────────────────────
   The name sits above the statement at the top of the page and then
   moves up and left into the header slot as you scroll — one mark that
   relocates, rather than a hero name and a separate nav wordmark saying
   the same thing twice.

   The element in flow keeps its space but is invisible; corporate.js
   clones it to a fixed-position copy on <body> and drives that copy's
   transform from scroll position. It has to live outside <main> to do
   that: main carries z-index 1, so nothing inside it can paint over the
   fixed header at z-index 300. */
[data-style="corporate"] .hero-name {
  display: block !important;
  font-family: var(--c-font) !important;
  font-size: clamp(38px, 4.1vw, 54px) !important;
  font-weight: 650 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  color: var(--c-ink) !important;
  margin: 0 0 18px !important;
}
[data-style="corporate"] .hero-name .first,
[data-style="corporate"] .hero-name .last {
  display: inline !important;
  font-family: inherit !important;
}
/* The two halves are separate spans on their own source lines, so the
   markup already supplies the space between them. */
[data-style="corporate"] .hero-name .last { margin-left: 0; }
/* The per-letter wobble spans stay in the markup, just inert. */
[data-style="corporate"] .hero-name .letter {
  display: inline !important;
  animation: none !important;
  transform: none !important;
  margin: 0 !important;
  font-family: inherit !important;
}
/* Once the travelling copy exists, the original only reserves space. */
[data-style="corporate"] .hero-name.is-travel-source { visibility: hidden; }

[data-style="corporate"] .c-wordmark-travel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 320;                   /* over the header (300) */
  margin: 0;
  /* Must match .hero-name exactly — the clone starts life sitting on top
     of the original, and any difference in type shows as a jump on the
     first scroll. Same clamp, so they stay matched at every width. */
  font-family: var(--c-font);
  font-size: clamp(38px, 4.1vw, 54px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.015em;
  transform-origin: top left;
  white-space: nowrap;
  /* It takes you home now, so it has to be hittable. This used to be
     none because the mark was decoration painted over the page. */
  pointer-events: auto;
  will-change: transform;
  color: var(--c-ink);
}
/* The header's own wordmark stands down — the travelling one lands in
   its place and becomes it. */
[data-style="corporate"] #sidenav::before { content: none !important; }

[data-style="corporate"] .hero-role-line { display: block; }
/* ch units scale with the font, so a fixed ch cap that reads well at the
   32px mobile size becomes a narrow ribbon at 54px on a wide screen.
   These are sized for the LARGE end — roughly three lines of statement —
   and the clamped font-size handles the small end. */
[data-style="corporate"] .hero-role-lead {
  display: block;
  font-size: clamp(32px, 4.6vw, 54px);
  font-weight: 620;
  line-height: 1.16;
  color: var(--c-ink);
  letter-spacing: -0.022em;
  margin-bottom: 20px;
  max-width: 24ch;
}
[data-style="corporate"] .hero-role-rest {
  display: block;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  color: var(--c-ink-soft);
  max-width: 46ch;
}
/* The rotating role is a doodle-font word inside a hand-drawn ink box
   (a masked SVG on ::before). Corporate keeps the rotation — it's real
   content — and drops the box and the display face. */
[data-style="corporate"] .hero-role-rotator {
  color: var(--c-accent);
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 600;
  line-height: inherit !important;
  padding: 0 !important;
  border: none;
  background: none;
  text-align: left !important;
  width: auto !important;
}
[data-style="corporate"] .hero-role-rotator::before,
[data-style="corporate"] .hero-role-rotator::after { display: none !important; }

/* ─── Work ────────────────────────────────────────────────
   Four case-study cards on a plain two-column grid: no tilt, no
   glow, no lift on hover beyond a border and a shadow. */
[data-style="corporate"] .work-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  width: auto !important;
  max-width: var(--c-maxw);
  margin: 0 auto !important;
  transform: none !important;
  position: static !important;
  /* Below 900px the studio deck sets an inline height here to fit its
     tallest card. The deck no longer runs in corporate mode, but the
     !important keeps a stale inline value from squashing the grid. */
  height: auto !important;
  align-items: stretch !important;
  overflow: visible !important;
}
[data-style="corporate"] .deck-gallery { display: none !important; }
[data-style="corporate"] .project-card {
  position: static !important;
  /* The studio cards lean and bob using the INDIVIDUAL rotate/translate
     properties, which compose alongside `transform` rather than being
     covered by it — resetting transform alone left them tilted. The
     max-width is home.css's card size and would cap them well inside
     their grid track. */
  transform: none !important;
  rotate: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  opacity: 1 !important;
  display: flex !important;
  flex-direction: column;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
[data-style="corporate"] .project-card:hover {
  border-color: var(--c-line-firm);
  box-shadow: 0 10px 28px -18px rgba(16, 24, 40, 0.35);
  transform: translateY(-2px) !important;
}
/* Card internals: a header row (title + badge), the cover figure, and a
   footer row holding the category. Corporate reorders them visually so
   the image leads — the studio look puts the title above the photo,
   which reads as a filed document rather than a portfolio piece. */
[data-style="corporate"] .project-figure {
  order: -1;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background: var(--c-surface-2) !important;
  overflow: hidden;
  transform: none !important;
  width: auto !important;
  height: auto !important;
}
[data-style="corporate"] .project-figure img {
  /* home.css sizes these through .work-grid .project-card .project-figure,
     which out-specifies a plain attribute-scoped rule — hence the
     !importants on the three properties that decide the crop. */
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  filter: none !important;
  margin: 0 !important;
  transform: none !important;
  transition: transform 0.3s ease;
}
[data-style="corporate"] .project-card:hover .project-figure img {
  transform: scale(1.02) !important;
}
[data-style="corporate"] .tc-top {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
}
[data-style="corporate"] .project-title {
  font-size: 19px !important;
  font-weight: 620 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.3 !important;
  color: var(--c-ink) !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--c-font) !important;
}
/* One line here: the corporate card is wide enough and the qualifier
   reads as part of the name rather than a second line of display type. */
[data-style="corporate"] .project-title .pt-sub { display: inline; }
/* Except where a card asks for it underneath (labelBelow in the project
   list) — a long name plus its label runs the whole width of the card. */
[data-style="corporate"] .project-title .pt-sub--below { display: block; }

[data-style="corporate"] .tc-badge {
  flex: none;
  font-family: var(--c-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  padding: 4px 8px !important;
  border-radius: 100px !important;
  background: var(--c-accent-soft) !important;
  border: 1px solid var(--c-line) !important;
  color: var(--c-accent) !important;
  text-transform: uppercase;
}
[data-style="corporate"] .tc-bottom {
  padding: 8px 22px 22px !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  display: block !important;
}
[data-style="corporate"] .tc-cat {
  font-family: var(--c-font) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--c-ink-soft) !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

/* ─── About ───────────────────────────────────────────────
   The studio version scales this whole block with a single transform
   so it shrinks as one unit. Corporate lets it reflow like normal
   text in a two-column grid. */
/* The bio and portraits first, then the three media carousels that
   corporate.js appends. The clip slot itself is gone by then — the reel
   inside it is lifted into the first carousel and the empty shell
   removed — so there is nothing here dressing it any more. */
[data-style="corporate"] .story-scale-unit { display: flex; flex-direction: column; }
[data-style="corporate"] .story-grid { order: 1; }
[data-style="corporate"] .c-carousel { order: 2; }

/* Shared by the clips wherever they sit. The stack is display:contents
   inside a carousel track, so these apply to the videos directly. */
[data-style="corporate"] .story-reel-video {
  border: 0;
  border-radius: var(--c-radius);
  background: var(--c-surface);
}


/* Snapshots. corporate.js lifts this whole element out of the About grid
   and into a carousel of its own, so all it needs here is to stop being
   the tall masked column the studio deck makes of it. */
[data-style="corporate"] .story-me-strip {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
}
/* The grid holds only the text and the portraits here — the snapshot
   strip has moved out into its own carousel. What is needed is the
   opposite of a pin: home.css puts .story-photos in column 3 for the
   studio deck, where the strip occupies column 2, and carrying that over
   left corporate with a phantom middle track and the text narrower than
   the photos beside it. Back to auto placement. */
[data-style="corporate"] .story-text-col,
[data-style="corporate"] .story-photos { grid-column: auto !important; }
[data-style="corporate"] .story-me-track {
  flex-direction: row;
  width: max-content;
  gap: 14px;
}
[data-style="corporate"] .story-me-item { width: 150px; }
[data-style="corporate"] .story-me-item img { border: 0; border-radius: var(--c-radius); }

/* .story-lead-wrap used to be listed here too, but it now needs its own
   narrower max-width (see the clip row above) and this rule would
   override it — the resets it still needs are restated there. */
[data-style="corporate"] .story-scale-unit {
  transform: none !important;
  width: auto !important;
  max-width: var(--c-maxw) !important;
  margin: 0 auto !important;
  position: static !important;
}
[data-style="corporate"] .story-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 56px;
  width: auto !important;
  max-width: var(--c-maxw) !important;
  margin: 0 auto !important;
  transform: none !important;
  align-items: start;
}
[data-style="corporate"] .story-text-col,
[data-style="corporate"] .story-text {
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  opacity: 1 !important;
}
[data-style="corporate"] .story-text p { margin-bottom: 15px; }
[data-style="corporate"] .story-list {
  list-style: none;
  padding: 0;
  margin: 18px 0;
  display: grid;
  gap: 9px;
}
[data-style="corporate"] .story-list li {
  padding-left: 20px;
  position: relative;
  font-size: 16px;
}
[data-style="corporate"] .story-list li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
}
[data-style="corporate"] .story-exp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  /* Spacing, not a rule — About had a hairline above every block and read
     as a stack of strips rather than one section. */
  margin: 48px 0 18px;
}
[data-style="corporate"] .story-exp-title {
  font-size: 13px !important;
  font-family: var(--c-mono) !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--c-ink-faint) !important;
  margin: 0 !important;
}
[data-style="corporate"] .story-resume-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 7px;
  background: var(--c-ink);
  color: var(--c-bg);
  border: none;
  font-size: 13.5px;
  font-weight: 550;
  text-decoration: none;
  transition: opacity 0.18s ease;
}
[data-style="corporate"] .story-resume-btn:hover { opacity: 0.86; }
[data-style="corporate"] .story-exp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
}
[data-style="corporate"] .story-exp-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 15.5px;
  color: var(--c-ink);
}
[data-style="corporate"] .story-exp-row:last-child { border-bottom: none; }
/* The two portraits keep the studio arrangement here: a stacked,
   overlapping, slightly tilted pair rather than a flat column. Nothing
   to write — home.css already describes it at both widths, so this is
   only the note that the overrides which used to flatten it are
   deliberately gone. The one thing corporate still needs is the
   fade-in reset, since the scroll-reveal never runs here. */
[data-style="corporate"] .story-photos {
  opacity: 1 !important;
  transform: none !important;
}

/* ─── Photography ─────────────────────────────────────────
   No longer its own section: #guestbook held both the film scans and the
   flower field, and corporate keeps only the photos — which corporate.js
   re-parents into About as a carousel. The section itself goes.

   The studio version is a draggable scatter; here the same <ul> becomes
   a snapping horizontal track. */
[data-style="corporate"] #guestbook { display: none !important; }

/* ─── Tattoo wall ─────────────────────────────────────────
   Corporate shows the same 35 pieces, but as a plain grid rather than
   two drifting rows — the drift is a studio flourish, and a document
   that scrolls vertically has room to simply lay the work out.

   display:contents on the rows and their lists dissolves those boxes so
   every card becomes a direct grid item of .tattoo-wall. tattoo-wall.js
   skips its duplication step in corporate, so this grid holds 35 cards,
   not 70. Its lightbox still runs. */
/* Only the unhide is needed: the shared "main > section" band rule above
   already turns it into an ordinary block with the standard padding, and
   "main > section > *" caps and centres its children on the shared
   measure. */
[data-style="corporate"] #tattoos { display: block !important; }
/* No max-width of its own: it takes the shared measure from the
   "main > section > *" rule so its left edge lines up with the grid
   below. The reading limit goes on the paragraph inside instead. */
[data-style="corporate"] .tattoo-intro {
  padding: 0 !important;
  margin-bottom: 36px;
}
[data-style="corporate"] .tattoo-hint { max-width: 68ch; }
[data-style="corporate"] .tattoo-title {
  font-family: var(--c-font) !important;
  font-size: clamp(28px, 3.4vw, 40px) !important;
  font-weight: 660 !important;
  letter-spacing: -0.02em !important;
  color: var(--c-ink) !important;
}
[data-style="corporate"] .tattoo-hint { color: var(--c-ink-soft) !important; }
/* The line about hovering to hold the wall still describes a wall that
   does not move here. */
[data-style="corporate"] .tattoo-hint-do { display: none !important; }

/* Two scrolling rows rather than a grid of 35 — the same shape the
   studio wall has, and it costs two card-heights instead of six. The
   rows themselves are the tracks; the inner list is dissolved so the
   cards become their direct children. corporate.js puts one nav above
   the pair, and tattoo-wall.js skips its drift here. */
[data-style="corporate"] .tattoo-wall {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
/* The list itself is the scrolling track (corporate.js puts
   .c-carousel-track on it), so the cards are its direct children and
   the drift has real boxes to measure. The .tattoo-row wrapper just
   carries them and drops the studio mask. */
/* Faded at both ends, the way the studio wall is — cards enter and
   leave rather than being guillotined at the column edge. */
[data-style="corporate"] .tattoo-row {
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
[data-style="corporate"] .tattoo-track { animation: none; }
[data-style="corporate"] .tattoo-wall .tattoo-card {
  flex: 0 0 auto;
  height: 212px;
  width: auto;
  scroll-snap-align: start;
}
[data-style="corporate"] .tattoo-card {
  height: auto;
  width: 100%;
  transform: none !important;
  border: 0;
  border-radius: var(--c-radius);
  background: var(--c-surface);
  box-shadow: none;
}
[data-style="corporate"] .tattoo-card:hover {
  border-color: var(--c-line-firm);
  box-shadow: 0 6px 20px rgba(20, 24, 31, 0.09);
}
[data-style="corporate"] .tattoo-card:focus-visible { border-color: var(--c-accent); }

/* Spacing separates these media blocks now, not rules — three
   hairlines in a row turned About into a stack of strips. */
[data-style="corporate"] .c-carousel {
  max-width: var(--c-maxw);
  margin: 52px auto 0;
}
[data-style="corporate"] .c-carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 20px;
}
[data-style="corporate"] .c-carousel-title {
  font-family: var(--c-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0;
}
/* The arrows are gone from both walls — they carry themselves — so the
   nav and button styling that lived here has gone with them. */

/* The track. Scroll-snap makes an arrow press and a trackpad swipe land
   in the same places, and the scrollbar is hidden because the arrows
   already say the strip moves. */
[data-style="corporate"] .c-carousel-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 16px;
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  position: static !important;
  transform: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  /* proximity, not mandatory: mandatory forces the nearest snap point on
     every scroll, which stops the track ever resting at its true start
     or end — so the arrows could never tell they'd run out of track.
     proximity still snaps card edges into place when you're close. */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
[data-style="corporate"] .c-carousel-track::-webkit-scrollbar { display: none; }

/* A carousel with more than one row: the rows sit under one head and
   are paged together by its arrows. */
/* !important because the shared .c-carousel-track rule zeroes margins
   with one of its own — the single-row carousels need that, and without
   matching it here the two rows sat flush against each other. */
[data-style="corporate"] .c-carousel--rows .c-carousel-track + .c-carousel-track {
  margin-top: 26px !important;
}
/* Faded at both ends, matching My Alias — cards enter and leave
   rather than being cut off square at the column edge. */
[data-style="corporate"] .c-carousel--rows .c-carousel-track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent) !important;
}
/* No outline around the photos — the wall reads as pictures, not as a
   set of framed cards. */
[data-style="corporate"] .c-carousel--rows .film-card { border: 0 !important; }

/* Everything in the About wall is a list item, whatever it holds. */
[data-style="corporate"] .c-media-item {
  flex: 0 0 auto;
  margin: 0;
  list-style: none;
  scroll-snap-align: start;
}

/* Items. Every card is flex:none — otherwise the track squeezes the
   whole set into view instead of scrolling. */
/* One height across the wall, widths following each image's own shape,
   so squares, portraits and landscapes sit on a single baseline. */
[data-style="corporate"] .c-carousel-track .story-me-item {
  flex: 0 0 auto;
  width: 186px;
  scroll-snap-align: start;
}
/* !important on the height too: the base .film-card rule above pins
   height:auto !important for the standalone film carousel, and without
   matching it here every scan sized to its own image and blew the row
   out to 500px. */
[data-style="corporate"] .c-carousel--rows .film-card {
  width: auto !important;
  height: 186px !important;
}
[data-style="corporate"] .c-carousel--rows .film-card img {
  width: auto !important;
  height: 100% !important;
  object-fit: cover;
}
[data-style="corporate"] .c-media-item .story-reel-video {
  /* The row is sized by the film cards; a 4:5 clip matched to their
     height rather than their width keeps the row even. */
  width: auto;
  height: 186px;
  min-width: 0;
  max-width: none;
  margin: 0;
}
[data-style="corporate"] .film-scatter-hint { display: none !important; }
[data-style="corporate"] .film-card {
  position: static !important;
  transform: none !important;
  /* Three across at the widest, shrinking to one on a phone. flex:none
     stops the track from squeezing nine cards into view. */
  flex: 0 0 auto !important;
  width: clamp(220px, 31%, 340px) !important;
  max-width: none !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  scroll-snap-align: start;
  rotate: none !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: none !important;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
[data-style="corporate"] .film-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 26px -18px rgba(16, 24, 40, 0.4);
}
[data-style="corporate"] .film-card img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  filter: none !important;
}

/* ─── Closing contact block ───────────────────────────────
   The page used to end on a copyright line drawn with a pseudo-element,
   with the email and profiles buried in a paragraph of About prose. This
   is a real ending: one clear invitation, the address as the largest
   thing on it, and the three links a reader might actually want.

   Markup lives in index.html and is hidden by default, so the studio
   site — which ends on its own games/outro beat — never shows it. */
.c-contact { display: none; }
/* The page closes on the same frosted band it opens with. Same three
   layers as the hero — wash, pane, content — from the same tokens.

   Full bleed, with the measure held by the padding rather than a
   max-width: that keeps the band edge to edge while the writing stays
   on the same column as every other section, and needs no extra
   wrapper element around the content. */
[data-style="corporate"] .c-contact {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  max-width: none;
  margin: 96px 0 0;
  padding: 88px max(var(--c-gut), calc((100% - var(--c-maxw)) / 2));
  border-top: 0;
}
[data-style="corporate"] .c-contact::before {
  content: '';
  position: absolute;
  inset: -12% -6%;
  z-index: 0;
  pointer-events: none;
  background: var(--c-wash);
  filter: blur(26px);
}
[data-style="corporate"] .c-contact::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: var(--c-pane);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  backdrop-filter: blur(26px) saturate(150%);
}
/* Above both layers, or the address and links would be blurred by the
   pane sitting on top of them — the same trap the hero tagline fell
   into. */
[data-style="corporate"] .c-contact > * { position: relative; z-index: 2; }
[data-style="corporate"] .c-contact-kicker {
  font-family: var(--c-mono) !important;
  font-size: 13px !important;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint) !important;
  margin: 0 0 14px !important;
}
[data-style="corporate"] .c-contact-lead {
  font-size: clamp(19px, 2vw, 24px) !important;
  line-height: 1.4 !important;
  color: var(--c-ink) !important;
  max-width: 30ch;
  margin: 0 0 20px !important;
}
[data-style="corporate"] .c-contact-mail {
  display: inline-block;
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--c-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--c-accent);
  padding-bottom: 2px;
  transition: color 0.18s ease;
}
[data-style="corporate"] .c-contact-mail:hover { color: var(--c-accent); }
[data-style="corporate"] .c-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 30px 0 0;
}
[data-style="corporate"] .c-contact-links li { margin: 0; }
[data-style="corporate"] .c-contact-links a {
  font-size: 15.5px !important;
  font-weight: 500;
  color: var(--c-ink-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line-firm);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
[data-style="corporate"] .c-contact-links a:hover {
  color: var(--c-ink);
  border-color: var(--c-ink);
}
/* The site already ships a <footer> carrying this exact line for the
   studio look. Corporate's contact block ends the page instead, so that
   one goes — otherwise the copyright appears twice. */
[data-style="corporate"] body > footer { display: none !important; }

[data-style="corporate"] .c-contact-legal {
  font-family: var(--c-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.03em;
  color: var(--c-ink-faint) !important;
  margin: 44px 0 0 !important;
  padding-top: 22px;
  border-top: 1px solid var(--c-line);
}

/* Superseded by .c-contact above — the old one-line pseudo footer. */
[data-style="corporate"] #connect::after { display: none !important; }

/* ─── Cursor ──────────────────────────────────────────────
   The soft circle stays. It's the site's actual pointer in both looks —
   site-effects.css hides the OS cursor site-wide so that this element
   can be it — and it reads as a considered detail rather than as
   flair, so corporate keeps it instead of falling back to the arrow.

   Only the colour changes: the studio dot is mixed from --text, which
   is a cyan-tinted near-white in dark mode and would sit oddly against
   this neutral palette. Corporate mixes from its own ink instead, and
   dresses the expanded label pill to match. */
[data-style="corporate"] .site-cursor:not(.has-label) {
  background: var(--c-ink);
  background: color-mix(in srgb, var(--c-ink) 62%, transparent);
}
[data-style="corporate"] .site-cursor.has-label {
  background: var(--c-ink);
  color: var(--c-bg);
}

/* ─── Links, focus, motion ────────────────────────────────*/
[data-style="corporate"] a { color: var(--c-accent); }
[data-style="corporate"] a:focus-visible,
[data-style="corporate"] button:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}
/* The studio site reveals nearly everything with a translate+fade on
   scroll. Corporate keeps content visible and still — a reader
   shouldn't have to wait for a paragraph to arrive. */
[data-style="corporate"] .fade-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ─── The style toggle itself ─────────────────────────────
   Lives beside the theme toggle in both looks, so it is styled for
   the studio site here too (unscoped) and then restyled below. */
/* A worded pill rather than an icon. "Sweep it" / "make it fancy" say
   what pressing it DOES, which an icon can't — a star and a grid glyph
   both need a caption to mean anything, and the two phrases are the
   caption. Width follows the text; the pill is pinned by its right edge
   so the two labels swap without shifting the control. */
.style-toggle {
  position: fixed;
  bottom: calc(20px + 2vh + env(safe-area-inset-bottom, 0px));
  right: calc(32px + 76px + 12px);
  height: 36px;
  padding: 0 16px;
  border-radius: 100px;
  background: var(--bg);
  border: 2px solid var(--border-glow);
  color: var(--cyan);
  cursor: pointer;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.style-toggle:hover { border-color: var(--cyan); transform: translateY(-1px); }

/* ─── Studio: the broom disc ──────────────────────────────
   The studio toggle joins the same corner corporate's sparkle sits in,
   so the control does not move when you switch looks. These rules live
   HERE rather than in home.css because the unscoped .style-toggle base
   above is in this file — home.css loads first, so anything it says
   about this control loses to the base no matter how specific it is.

   Desktop only: below 900px the studio's slanted card menu owns the top
   right, so the worded pill stays at the bottom there.

   The words are not gone — the label is still the button's accessible
   name, and it becomes the hover tip, which is the glyph's caption. */
@media (min-width: 901px) {
  .style-toggle {
    top: calc(20px + 2vh);
    bottom: auto;
    right: 32px;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    overflow: visible;
  }
  .style-toggle .to-corporate {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--text);
    color: var(--bg);
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }
  .style-toggle:hover .to-corporate,
  .style-toggle:focus-visible .to-corporate {
    opacity: 1;
    transform: none;
  }
  /* Corporate keeps its own label as the tip; this one must not show. */
  [data-style="corporate"] .style-toggle .to-corporate { display: none; }
}
/* Only the label for where you're going is rendered. */
.style-toggle .to-studio { display: none; }
.style-toggle .to-corporate { display: inline; }
/* Each look shows its own glyph. Both are hidden by default so neither
   leaks into the other; the studio rules below switch the broom on. */
.style-toggle-spark, .style-toggle-broom { display: none; }
/* The studio menu row's label. Only rendered once the toggle is
   actually in the panel — display, not opacity, so the button never
   carries both this and the hover tip as its accessible name. */
.style-toggle .to-corporate-menu { display: none; }
[data-style="corporate"] .style-toggle-broom { display: none !important; }
/* After the defaults above, not before them: a media query adds no
   specificity, so declared earlier it simply lost to display:none. */
@media (min-width: 901px) {
  .style-toggle-broom { display: block; width: 18px; height: 18px; }
}
[data-style="corporate"] .style-toggle .to-corporate { display: none; }
[data-style="corporate"] .style-toggle-spark { display: block; width: 18px; height: 18px; }

[data-style="corporate"] .style-toggle,
[data-style="corporate"] .theme-toggle {
  background: var(--c-bg);
  border: 1px solid var(--c-line-firm);
  color: var(--c-ink-soft);
  box-shadow: 0 4px 14px -8px rgba(16, 24, 40, 0.4);
}
[data-style="corporate"] .style-toggle:hover,
[data-style="corporate"] .theme-toggle:hover {
  border-color: var(--c-ink-faint);
  color: var(--c-ink);
}
/* ─── Corporate: sparkle in the bar ───────────────────────
   An icon rather than a worded pill, sitting in the empty right end of
   the top bar. The note above still stands — a glyph needs a caption —
   so the label has not gone anywhere: it is the button's accessible
   name, and it becomes the hover tip. Above the bar's z-index so it
   reads as part of it. */
[data-style="corporate"] .style-toggle {
  top: 20px;                 /* (76px bar - 36px button) / 2 */
  bottom: auto;
  right: var(--c-gut);
  width: 36px;
  padding: 0;
  border-radius: 50%;
  z-index: 320;
  overflow: visible;
  /* Frosted, like the hero band it sits on — it is part of that surface
     rather than a control parked on top of it. Once the page scrolls the
     bar turns opaque behind it and the disc simply picks that up. */
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.70);
  box-shadow: 0 6px 18px rgba(20, 24, 31, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}
[data-style="corporate"] .style-toggle:hover {
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(20, 24, 31, 0.14),
              inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
[data-style="corporate"][data-theme="dark"] .style-toggle,
[data-style="corporate"]:not([data-theme="light"]) .style-toggle {
  background: rgba(18, 22, 29, 0.45);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-style="corporate"][data-theme="dark"] .style-toggle:hover,
[data-style="corporate"]:not([data-theme="light"]) .style-toggle:hover {
  border-color: rgba(255, 255, 255, 0.26);
}
/* Light has to win explicitly wherever both could match. */
[data-style="corporate"][data-theme="light"] .style-toggle {
  background: rgba(255, 255, 255, 0.45);
  border-color: rgba(255, 255, 255, 0.70);
}
/* Without backdrop-filter a 45% disc over the wash leaves the sparkle
   sitting on colour; fall back to the flat control it was. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-style="corporate"] .style-toggle {
    background: var(--c-bg);
    border-color: var(--c-line-firm);
  }
}
@media (prefers-reduced-transparency: reduce) {
  [data-style="corporate"] .style-toggle {
    background: var(--c-bg);
    border-color: var(--c-line-firm);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
/* The label, revealed under the sparkle on hover or keyboard focus.
   Kept in the accessibility tree at all times — opacity, not display —
   so the button is never an unlabelled icon. */
[data-style="corporate"] .style-toggle .to-studio {
  display: block;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--c-ink);
  color: var(--c-bg);
  font-family: var(--c-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
[data-style="corporate"] .style-toggle:hover .to-studio,
[data-style="corporate"] .style-toggle:focus-visible .to-studio {
  opacity: 1;
  transform: none;
}
/* The theme pill's knob and icons are cyan-on-glow in the studio look. */
[data-style="corporate"] .theme-toggle::before { background: var(--c-ink); }
[data-style="corporate"] .theme-toggle svg { color: var(--c-bg); }

/* ─── Narrow screens ──────────────────────────────────────*/
@media (max-width: 900px) {
  .style-toggle { right: calc(18px + 76px + 10px); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 860px) {
  [data-style="corporate"] .work-grid { grid-template-columns: 1fr; }
  [data-style="corporate"] .story-grid { grid-template-columns: 1fr; gap: 34px; }
  [data-style="corporate"] .film-card { width: clamp(200px, 46%, 300px) !important; }
  [data-style="corporate"] main > section { padding: 60px 20px !important; }
  [data-style="corporate"] #hero { padding-top: calc(92px + 76px) !important; }
  [data-style="corporate"] #sidenav { padding: 0 20px; }
  [data-style="corporate"] #sidenav::before { font-size: 22.5px; }
  [data-style="corporate"] .nav-item { padding: 8px 10px; }
  [data-style="corporate"] .nav-label { font-size: 19.5px; }
}
/* ─── Mobile: hamburger ───────────────────────────────────
   At the larger nav type the three links need ~340px on their own,
   which is the whole bar on a phone — the wordmark got squeezed to a
   dozen pixels and the links ran past the edge. Below 620px they fold
   into a menu behind a hamburger at the top right instead, and the
   wordmark keeps the left.

   The studio site has its own slanted-card menu on mobile, so this
   button is corporate-only and hidden everywhere else. */
.c-nav-toggle { display: none; }

@media (max-width: 620px) {
  /* Mobile is an ordinary header: name on the left, hamburger on the
     right. Bare stripes — no box, no border — pinned to the right gutter
     and vertically centred. */
  /* The hamburger owns the right edge at this width, so the sparkle
     steps left of it rather than sitting on top of it. */
  [data-style="corporate"] .style-toggle { right: 64px; }
  [data-style="corporate"] .c-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: auto;
    right: 20px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    padding: 0;
    margin: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: var(--c-ink);
    cursor: pointer;
  }

  /* The name lives in the bar at this width instead of travelling into
     it, so the hero doesn't say it a second time — it opens straight on
     the statement. corporate.js parks the mark on its header slot. */
  [data-style="corporate"] .hero-name { display: none !important; }
  [data-style="corporate"] .c-nav-bars {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 18px;
  }
  [data-style="corporate"] .c-nav-bars > span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform 0.22s ease, opacity 0.16s ease;
  }
  /* Open state — top and bottom bars cross, middle one fades. */
  [data-style="corporate"] #sidenav.c-nav-open .c-nav-bars > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  [data-style="corporate"] #sidenav.c-nav-open .c-nav-bars > span:nth-child(2) { opacity: 0; }
  [data-style="corporate"] #sidenav.c-nav-open .c-nav-bars > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  /* The links become a panel dropping out of the bar.

     The studio's mobile menu hides its own panel with
     `clip-path: inset(0 0 100% 0)` and reveals it on #sidenav.open. This
     one opens on a different class, so that clip stays applied and would
     crop the panel to nothing — while still reporting a full-size rect,
     which makes it look present in the DOM and invisible on screen.
     Clearing the clip is what actually shows it. */
  /* The links become a band under the bar. It spans the full width so
     opening it can push the page down rather than cover it (see the
     main padding below), and the links themselves sit to the right.

     The studio's mobile menu hides its own panel with
     `clip-path: inset(0 0 100% 0)` and reveals it on #sidenav.open. This
     one opens on a different class, so that clip stays applied and would
     crop the panel to nothing — while still reporting a full-size rect,
     which makes it look present in the DOM and invisible on screen.
     Clearing the clip is what actually shows it. */
  [data-style="corporate"] .nav-items {
    display: none;
    position: fixed;
    top: 76px;
    left: 0;
    right: 0;
    transform: none;              /* undo the desktop centring */
    flex-direction: column;
    align-items: flex-end;        /* links to the right of the screen */
    text-align: right;
    gap: 0;
    padding: 4px 20px 12px;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    clip-path: none;
    transition: none;
  }
  /* The studio panel also hangs an invisible hover-bridge above itself. */
  [data-style="corporate"] .nav-items::before { display: none; }
  [data-style="corporate"] #sidenav.c-nav-open .nav-items { display: flex; }
  [data-style="corporate"] .nav-item {
    padding: 14px 0;
    border-radius: 0;
    border-bottom: 1px solid var(--c-line);
    width: 100%;
    text-align: right;
    justify-content: flex-end;
  }
  [data-style="corporate"] .nav-item:last-child { border-bottom: none; }

  /* Opening the menu displaces the page instead of covering it. The
     height is measured in JS (the panel is position:fixed, so it has no
     effect on flow) and written to --c-nav-panel-h. */
  [data-style="corporate"] main {
    padding-top: calc(76px + var(--c-nav-panel-h, 0px));
    transition: padding-top 0.26s cubic-bezier(0.22, 1, 0.36, 1);
  }
  [data-style="corporate"] .nav-item:hover { background: none; }
}

@media (max-width: 520px) {
  [data-style="corporate"] .film-card { width: 78% !important; }
  [data-style="corporate"] .story-exp-row { grid-template-columns: 1fr; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  [data-style="corporate"] * { scroll-behavior: auto !important; }
}