/* ===========================================================
   Creative Club Cult — shared styles
   Layout system: full-bleed editorial poster (oversized display
   type, sharp media, pill controls, whitespace as structure).
   Brand: CCC dark palette + Heros.
   =========================================================== */
@font-face {
  font-family: 'Heros'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('fonts/heros-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Heros'; font-style: normal; font-weight: 600 800; font-display: swap;
  src: url('fonts/heros-bold.woff2') format('woff2');
}

:root {
  /* Colour — CCC */
  --bg: #05070C;
  --bg-soft: #0A0E16;
  --ink: #EAEDF1;
  --graphite: rgba(234, 237, 241, 0.62);   /* secondary text, meta */
  --ash: rgba(234, 237, 241, 0.34);        /* control borders, inactive */
  --line: rgba(234, 237, 241, 0.14);       /* hairlines */
  --steel: #9FB2C9;                         /* accent: small hits only */
  --deep: #16283A;                          /* accent card surface */
  --media: radial-gradient(140% 120% at 30% 20%, #16283a 0%, #0a121c 55%, #070b12 100%);

  /* Type scale */
  --t-caption: 12px;
  --t-body-sm: 14px;
  --t-body: 16px;
  --t-sub: 20px;
  --t-heading-sm: clamp(26px, 2.4vw, 34px);
  --t-heading: clamp(34px, 3.8vw, 54px);
  --t-display: clamp(44px, 5.9vw, 84px);

  /* Space & shape (8px base) */
  --pad: clamp(16px, 2.6vw, 40px);
  --section: clamp(72px, 8vw, 128px);
  --gap: clamp(16px, 1.8vw, 28px);
  --pill: 1440px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.menu-open { overflow: hidden; }
::selection { background: var(--ink); color: var(--bg); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Heros', Helvetica, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--t-body);
  line-height: 1.4;
  letter-spacing: -0.018em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

main { position: relative; z-index: 1; }
.wrap { padding-inline: var(--pad); }

/* ---------- Type ---------- */
.display {
  font-size: var(--t-display); font-weight: 400;
  line-height: 1; letter-spacing: -0.04em;
}
.heading {
  font-size: var(--t-heading); font-weight: 400;
  line-height: 1.02; letter-spacing: -0.023em;
}
.heading-sm {
  font-size: var(--t-heading-sm); font-weight: 400;
  line-height: 1.2; letter-spacing: -0.02em;
}
.dim, .display em, .heading em, .statement em { font-style: normal; color: var(--graphite); }
.eyebrow {
  font-size: var(--t-caption); line-height: 1.43;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite);
}
.eyebrow a { color: var(--ink); }
.lead { font-size: var(--t-sub); line-height: 1.4; color: var(--graphite); max-width: 52ch; }
.muted { color: var(--graphite); }

/* ---------- Pills: buttons, tags, filters ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: var(--pill); border: 0;
  background: var(--ink); color: var(--bg);
  font-size: var(--t-body); line-height: 1.25; cursor: pointer;
  transition: opacity .2s, gap .25s;
}
.btn:hover { opacity: 0.86; gap: 16px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ash); }
.btn.ghost:hover { opacity: 1; box-shadow: inset 0 0 0 1px var(--ink); }
.btn:disabled { opacity: 0.5; cursor: default; }

.tag {
  display: inline-flex; align-items: center;
  padding: 8px 12px; border-radius: var(--pill);
  border: 1px solid var(--ash); background: transparent; color: var(--ink);
  font-size: var(--t-caption); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em;
  cursor: pointer; transition: border-color .2s, background .2s, color .2s;
}
a.tag:hover, button.tag:hover { border-color: var(--ink); }
.tag[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.tag.accent { background: var(--steel); color: var(--bg); border-color: transparent; }
span.tag { cursor: default; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Header: plain text, inverts over whatever is behind it ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: baseline; gap: clamp(12px, 1.2vw, 18px);
  padding: 16px var(--pad);
  color: #fff; mix-blend-mode: difference;
  font-size: var(--t-body); line-height: 1.2; letter-spacing: -0.01em;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
.site-header a { transition: opacity .2s; }
.site-header a:hover, .site-header a[aria-current="page"] { opacity: 0.5; }
.brand { margin-right: auto; white-space: nowrap; }
.brand sup { font-size: 0.5em; vertical-align: 0.9em; margin-left: 1px; }
.nav-links { display: flex; gap: inherit; }
/* Careers set apart in the header: a hairline pill (the vertical padding is taken back by the margin,
   so the header keeps its height and the words stay on one baseline) */
.nav-careers { padding: 2px 10px; margin-block: -3px; border: 1px solid currentColor; border-radius: var(--pill); }
.menu-btn { display: none; background: none; border: 0; padding: 0; color: inherit; font-size: inherit; cursor: pointer; }
/* Phone, scrolled: the header returns over running text, so it drops the inversion and sits on a fade
   of the page colour (at the top of the page it stays transparent over the heroes) */
@media (max-width: 760px) {
  .site-header { --hb: #05070C; }
  body.is-light .site-header { --hb: #EAEDF1; }
  .site-header::before { content: ""; position: absolute; inset: 0 0 -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--hb) 45%, transparent); opacity: 0; transition: opacity .35s; }
  html.is-scrolled:not(.menu-open) .site-header { mix-blend-mode: normal; color: #EAEDF1; }
  html.is-scrolled:not(.menu-open) body.is-light .site-header { color: #020202; }
  html.is-scrolled:not(.menu-open):not(.hdr-hidden) .site-header::before { opacity: 1; }
}

/* ---------- Menu overlay ---------- */
.menu {
  position: fixed; inset: 0; z-index: 99;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(88px, 14vh, 140px) var(--pad) 24px;
  background: var(--bg); color: var(--ink); /* (its own colour: light pages set the body's text dark) */
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility .45s;
  overflow-y: auto;
}
.menu.open { opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s; }
.menu-links { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.menu-links a {
  display: flex; align-items: baseline; gap: clamp(16px, 3vw, 48px);
  padding-block: clamp(10px, 1.6vh, 18px);
  border-bottom: 1px solid var(--line);
  font-size: var(--t-display); line-height: 1; letter-spacing: -0.04em;
  transition: color .25s, padding-left .35s cubic-bezier(.2,.8,.2,1);
}
.menu-links a:hover { padding-left: 12px; }
.menu-links a[aria-current="page"] { color: var(--graphite); }
.menu-tag { align-self: center; padding: 4px 10px; border: 1px solid var(--ash); border-radius: var(--pill); font-size: var(--t-caption); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; }
.menu.open .menu-links a { animation: menuIn .6s cubic-bezier(.2,.85,.25,1) backwards; }
.menu.open .menu-links a:nth-child(1) { animation-delay: .06s; }
.menu.open .menu-links a:nth-child(2) { animation-delay: .12s; }
.menu.open .menu-links a:nth-child(3) { animation-delay: .18s; }
.menu.open .menu-links a:nth-child(4) { animation-delay: .24s; }
.menu.open .menu-links a:nth-child(5) { animation-delay: .30s; }
@keyframes menuIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.menu-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: var(--t-body-sm); color: var(--graphite); }
.menu-foot a { color: var(--ink); }

/* ---------- Sections ---------- */
.sec { padding-top: var(--section); }
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-head .eyebrow { margin-bottom: clamp(20px, 2.4vw, 32px); }
.sec-head .heading { max-width: 22ch; }
.statement { font-size: var(--t-heading); line-height: 1.08; letter-spacing: -0.023em; max-width: 24ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: clamp(28px, 3vw, 40px); }

/* ===========================================================
   HOME — landing. Opening loader, hero that sinks under the next
   section, pinned intro whose plus grows into a white screen,
   giant titles with falling letters, accordion project slider.
   =========================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Placeholder box: marks where a photo still needs to go */
.slot {
  position: relative; display: grid; place-items: center; padding: 16px;
  background: var(--bg-soft); border: 1px dashed var(--ash);
  color: var(--graphite); font-size: var(--t-caption); line-height: 1.4;
  text-transform: uppercase; letter-spacing: 0.02em; text-align: center;
}
.slot-fill { position: absolute; inset: 0; place-items: start; padding: clamp(16px, 2vw, 28px); padding-top: 80px; }

.fit { white-space: nowrap; }
.ulink {
  display: inline-block; margin-top: 18px; padding-bottom: 3px;
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em;
  /* the underline is a drawn line (not a border) so it can move: on hover it runs out to the right
     and draws itself back in from the left */
  background: linear-gradient(currentColor, currentColor) no-repeat 100% 100% / 100% 1px;
}
.ulink:hover, .ulink:focus-visible { animation: ulink-redraw .8s cubic-bezier(.65, 0, .35, 1) both; }
@keyframes ulink-redraw {
  0% { background-size: 100% 1px; background-position: 100% 100%; }
  45% { background-size: 0% 1px; background-position: 100% 100%; }
  46% { background-size: 0% 1px; background-position: 0% 100%; }
  100% { background-size: 100% 1px; background-position: 0% 100%; }
}
@media (prefers-reduced-motion: reduce) { .ulink:hover, .ulink:focus-visible { animation: none; } }

/* Opening loader: the logotype on light, a window opening between its words (app.js) */
.h-loader { position: fixed; inset: 0; z-index: 200; display: none; place-items: center; overflow: hidden; pointer-events: none; background: #EAEDF1; color: #020202; }
html.is-loading .h-loader { display: grid; }
html.is-loading .site-header > * { opacity: 0; }
.h-load-word { display: flex; align-items: center; justify-content: center; gap: 0.12em; width: 100vw; font-size: clamp(34px, 6.6vw, 124px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
/* two equal halves keep the window on the centre line, so it can open straight out to the screen's edges */
.h-load-half { flex: 1 1 0; min-width: 0; display: flex; }
.h-load-half.is-l { justify-content: flex-end; }
.h-load-text { display: block; overflow: hidden; padding-bottom: 0.04em; }
.h-load-text .ch { display: inline-block; }
.h-load-box { position: relative; flex: none; width: 0; height: 0.74em; overflow: hidden; background: #020202; }
.h-load-box img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; visibility: hidden; }
/* the hero's own veil, drawn in as the window becomes the hero */
.h-load-box::after { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 12, 0.35); opacity: var(--shade, 0); }

/* Hero: sinks and darkens while the black section slides over it */
.h-hero { position: relative; z-index: 0; height: 100svh; min-height: 560px; overflow: hidden; background: #000; }
.h-hero-inner { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; will-change: transform; }
.h-hero-media { position: absolute; inset: 0; }
.h-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.h-hero-media::after { content: ""; position: absolute; inset: 0; background: rgba(5, 7, 12, 0.35); }
.h-hero-shade { position: absolute; inset: 0; background: #000; opacity: 0; }
.h-hero-title { position: relative; z-index: 1; padding-inline: var(--pad); font-size: var(--t-display); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.h-hero-sub { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(20px, 3vw, 32px); font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; }

/* Black section: how-we-work rows + pinned intro */
/* z-index 2 and no own background: the work section overlaps the intro's last screen from below */
.h-black { position: relative; z-index: 2; }
.h-steps, .h-intro { background: #020202; }

/* How we work — Swiss grid: hairline rules, big word left, keywords and notes right,
   keywords aligned to the top of the word */
.h-steps { --fs: clamp(64px, 9.5vw, 168px); padding: clamp(32px, 4vw, 64px) var(--pad) clamp(40px, 5vw, 80px); overflow-x: clip; /* words glide in from the right */ }
.h-steps-label { padding-bottom: 12px; font-size: var(--t-caption); font-weight: 500; text-transform: uppercase; letter-spacing: 0.02em; }
.h-step {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start;
  padding-block: clamp(16px, 1.6vw, 24px) clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--line);
}
.h-step:last-child { border-bottom: 1px solid var(--line); }
.h-step-head { grid-column: 1 / span 7; position: relative; }
.h-step-word {
  position: relative; z-index: 1; /* letters paint over the icon as they slide off it */
  white-space: nowrap; overflow: hidden;
  font-size: var(--fs); font-weight: 500; line-height: 0.82; letter-spacing: -0.05em; padding-bottom: 0.06em;
}
.h-step-word .ch { display: inline-block; will-change: transform; }
/* keywords sit on the word's cap line, the note drops to its baseline */
.h-step-side {
  grid-column: 8 / span 5; align-self: stretch;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  padding-top: calc(var(--fs) * 0.07);
}

/* Hover (pointer devices), anywhere on a row: its word eases right, an icon appears in the gap,
   the other rows fade to grey. Only rows trigger it — not the label or the section's padding.
   (translate, not padding: no relayout per frame) */
.h-step-icon {
  position: absolute; z-index: 0; left: 0; top: calc(var(--fs) * 0.227); /* centred on the cap height */
  width: calc(var(--fs) * 0.48); height: calc(var(--fs) * 0.48);
  color: var(--ink); opacity: 0; transition: opacity .35s ease-in-out;
}
.h-step-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }
.h-step-word { translate: 0 0; transition: translate .7s cubic-bezier(.65, 0, .35, 1), color .45s ease-in-out, opacity .45s ease-in-out; }
.h-step-side p { transition: color .45s ease-in-out; }
@media (hover: hover) {
  .h-step:hover .h-step-word { translate: calc(var(--fs) * 0.66) 0; }
  .h-step:hover .h-step-icon { opacity: 1; }
  .h-steps:has(.h-step:hover) .h-step:not(:hover) .h-step-word { color: var(--graphite); opacity: 0.45; }
  /* colour, not opacity: GSAP owns their opacity */
  .h-steps:has(.h-step:hover) .h-step:not(:hover) .h-step-side p { color: rgba(234, 237, 241, 0.28); }
}

.h-intro { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.h-intro-top { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); padding-top: clamp(80px, 10vh, 120px); }
.h-intro-label { grid-column: 1 / span 3; font-size: var(--t-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }
.h-intro-text { grid-column: 7 / span 6; }
.h-intro-text p { font-size: var(--t-heading-sm); line-height: 1.15; letter-spacing: -0.02em; }
.h-plus { position: absolute; z-index: 3; left: 50%; top: 50%; width: clamp(80px, 8vw, 118px); height: clamp(80px, 8vw, 118px); margin: calc(clamp(80px, 8vw, 118px) / -2) 0 0 calc(clamp(80px, 8vw, 118px) / -2); }
.h-plus i { position: absolute; left: 50%; top: 50%; width: 20%; height: 20%; background: var(--ink); transform: translate(-50%, -50%) scale(5, 1); }
.h-plus i.v { transform: translate(-50%, -50%) scale(1, 5); }
/* the square that grows to fill the screen in the hand-over: a piece of its own, so the plus's journey
   and the hand-over never pull at the same bar (app.js) */
.h-plus i.sq { transform: translate(-50%, -50%); visibility: hidden; }
.h-strip { position: absolute; z-index: 1; left: 0; right: 0; bottom: clamp(16px, 2vw, 24px); overflow: hidden; }
/* one width, landscape and portrait mixed, sitting on a common baseline */
.h-strip-track { display: flex; align-items: flex-end; gap: 12px; width: max-content; padding-inline: var(--pad); will-change: transform; }
.h-strip-item { flex: none; width: clamp(140px, 12vw, 220px); }
.h-strip .slot { width: 100%; aspect-ratio: 4 / 3; }
.h-strip-item.tall .slot { aspect-ratio: 3 / 4; }
.h-strip-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.h-strip-item.tall img { aspect-ratio: 3 / 4; }

/* Light sections (turn dark when Contact arrives) */
.on-light { position: relative; z-index: 1; background: var(--ink); color: #020202; }
.on-light .eyebrow { color: rgba(2, 2, 2, 0.55); }

/* Giant titles; letters fall in (app.js) — the wrap clips their trailing copies */
.h-title { overflow: hidden; padding-top: clamp(8px, 1vw, 16px); }
/* Journal: letters right up to the section's top edge — pull the word up by the font's own space above
   its tallest letters (~0.07em), leaving a small gap (the wrapper's clip stays at the section edge) */
.h-journal .h-title { padding-top: 0; }
.h-journal .h-display { margin-top: calc(clamp(8px, 1.1vw, 16px) - 0.07em); }
/* Work title screen: title just under the header, label centred below it; it's a screen less the top of
   the slider's counter, which peeks in at the foot. --cnt is that counter's size. */
.h-work { z-index: 3; --cnt: clamp(56px, 7.4vw, 128px); } /* z: opens over the intro (app.js clips it to the plus square first) */
.h-work-intro { position: relative; height: calc(100svh - var(--cnt) * 0.7); min-height: 480px; display: flex; flex-direction: column; }
.h-work-intro .h-title { padding-top: clamp(48px, 4.5vw, 72px); }
/* centred in the space between the title and the counter */
.h-work-label {
  flex: 1; display: grid; place-items: center;
  font-size: var(--t-caption); font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em;
}
.h-display { font-size: 18vw; font-weight: 700; line-height: 0.78; letter-spacing: -0.05em; text-align: center; padding-bottom: 0.04em; }
.h-display .ch { display: inline-block; will-change: transform; }

/* Project slider, accordion.net.au-style. One box holds the counter and the slides: it starts narrow
   and opens to full width as it comes into view (app.js). The chosen slide opens wide; the rest are
   thin greyscale strips with their number. The counter's left figure rolls to the chosen slide. */
.h-slider { padding: 0 6px 6px; }
.h-slider-box { width: clamp(260px, 24vw, 400px); margin-inline: auto; transition: width .8s cubic-bezier(0.47, 0, 0, 1); }
.h-slider-box.is-open { width: 100%; }
.h-count {
  display: flex; justify-content: space-between; overflow: hidden; margin-bottom: 8px;
  font-size: var(--cnt); font-weight: 700; line-height: 0.86; letter-spacing: -0.04em;
}
.h-count > span { display: block; }
.h-count-roll { height: 0.86em; overflow: hidden; }
.h-count-col { display: block; transition: transform .8s cubic-bezier(0.47, 0, 0, 1); }
.h-count-col > span { display: block; height: 0.86em; }
.h-slides {
  --strip: clamp(24px, 3vw, 48px);
  container-type: inline-size; /* so a slide's photo can be sized off the whole row (cqw) */
  display: flex; justify-content: center; gap: 6px;
  height: calc(100svh - var(--cnt) * 0.86 - 20px); min-height: 420px;
}
.h-slide {
  position: relative; display: block; flex: 0 0 var(--strip); overflow: hidden; background: #020202; color: var(--ink);
  transition: flex-basis .8s cubic-bezier(0.47, 0, 0, 1);
}
.h-slide.is-active { flex-basis: calc(100% - (var(--n) - 1) * (var(--strip) + 6px)); }
/* Every photo is always the size of an open slide, centred: opening or closing a slide only widens
   or narrows the window onto it — the picture never re-crops or zooms as the width changes. */
.h-slide-bg {
  position: absolute; top: 0; left: 50%; height: 100%; max-width: none; translate: -50% 0;
  width: calc(100cqw - (var(--n) - 1) * (var(--strip) + 6px));
  object-fit: cover; filter: grayscale(1); transition: filter .8s, scale .9s cubic-bezier(0.22, 1, 0.36, 1);
}
.h-slide.is-lean .h-slide-bg { scale: 1.035; } /* the open slide's photo leans in under the cursor (app.js) */
.h-slide.is-active .h-slide-bg { filter: none; }
.h-slide::after { content: ""; position: absolute; inset: 0; background: rgba(2, 2, 2, 0.15); pointer-events: none; transition: background .8s; }
.h-slide.is-active::after { background: rgba(2, 2, 2, 0.42); }
/* a little more dark at the foot, under the credits */
.h-slide::before { content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 32%; background: linear-gradient(180deg, rgba(2,2,2,0), rgba(2,2,2,.55)); opacity: 0; transition: opacity .8s; pointer-events: none; }
.h-slide.is-active::before { opacity: 1; }
.h-slide-nr {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 12px; text-align: center;
  font-size: 10px; letter-spacing: 0.04em; transition: opacity .4s;
}
.h-slide.is-active .h-slide-nr { opacity: 0; }
/* fixed widths, centred on the slide, so nothing re-wraps while it opens. On opening, the title
   settles from large to its size as it fades in, and the credits rise as they fade in; on closing
   both just fade, quickly. */
.h-slide-body, .h-slide-credits {
  position: absolute; z-index: 2; left: 50%; text-align: center; pointer-events: none;
  opacity: 0; transition: opacity .3s, scale .3s, translate .3s;
}
.h-slide-body { top: 50%; width: min(80vw, 900px); translate: -50% -50%; scale: 1.18; }
.h-slide.is-active .h-slide-body {
  opacity: 1; scale: 1;
  transition: opacity .7s ease .35s, scale 1.2s cubic-bezier(0.22, 1, 0.36, 1) .35s;
}
.h-slide.is-active .h-slide-credits {
  opacity: 1; translate: -50% 0;
  transition: opacity .7s ease .55s, translate 1s cubic-bezier(0.22, 1, 0.36, 1) .55s;
}
.h-slide-client { margin-bottom: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.h-slide-title { font-size: clamp(40px, 4.4vw, 76px); font-weight: 500; line-height: 0.95; letter-spacing: -0.035em; }
/* lines a little taller than the title's own, so nothing of a letter is clipped (pulled back in by the margin) */
.h-roll { position: relative; display: inline-block; overflow: hidden; vertical-align: top; margin-block: -0.2em; }
.h-roll-a, .h-roll-b { display: block; line-height: 1.35; }
.h-roll-b { position: absolute; left: 0; right: 0; top: 100%; }
.h-roll .ch { display: inline-block; }
.h-slide-credits { bottom: clamp(16px, 2.2vw, 30px); width: min(70vw, 760px); translate: -50% 28px; font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: 0.02em; }
.h-slide-credits .r { font-size: 9px; color: rgba(234, 237, 241, 0.6); }
.h-slide-credits .n { margin-right: 8px; }
.h-slide-credits .scope { margin-top: 4px; font-size: 9px; color: rgba(234, 237, 241, 0.6); }
/* Opening a project: the open slide's photo grows to fill the screen exactly as the project page's
   hero shows it (full width, 118% tall from the top, its gradient over it), then the page changes. */
.h-zoom { position: fixed; z-index: 90; overflow: hidden; pointer-events: none; background: #020202; }
.h-zoom-img { position: absolute; max-width: none; object-fit: cover; }
.h-zoom-dim, .h-zoom-shade { position: absolute; inset: 0; }
.h-zoom-dim { background: linear-gradient(180deg, rgba(2, 2, 2, 0.42) 68%, rgba(2, 2, 2, 0.62) 100%); }
.h-zoom-shade { opacity: 0; background: linear-gradient(180deg, rgba(5,7,12,.35) 0%, rgba(5,7,12,.5) 55%, rgba(5,7,12,.72) 100%); }

/* Typographic CTA with corner pluses */
.h-cta-sec { min-height: 60svh; display: grid; place-items: center; overflow: hidden; }
.h-cta { position: relative; display: block; overflow: hidden; padding-block: 6px; border-top: 3px solid currentColor; border-bottom: 3px solid currentColor; }
.h-cta-t { display: block; font-size: clamp(32px, 3.6vw, 52px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; text-transform: uppercase; white-space: nowrap; }
.h-cta-t.dup { position: absolute; left: 0; right: 0; top: 6px; }
.h-cta-t .ch { display: inline-block; }
.h-cta-t.dup .ch { transform: translateY(-1.5em); }
.corner { position: absolute; width: 22px; height: 22px; }
.corner::before, .corner::after { content: ""; position: absolute; left: 50%; top: 50%; background: currentColor; transform: translate(-50%, -50%); }
.corner::before { width: 100%; height: 2px; }
.corner::after { width: 2px; height: 100%; }
.corner.tl { left: var(--pad); top: var(--pad); } .corner.tr { right: var(--pad); top: var(--pad); }
.corner.bl { left: var(--pad); bottom: var(--pad); } .corner.br { right: var(--pad); bottom: var(--pad); }
.h-cta-sec { position: relative; }

/* Full-bleed photo with parallax and a centred statement */
.h-full { position: relative; z-index: 1; height: 110svh; display: grid; place-items: center; overflow: hidden; background: #020202; text-align: center; }
.h-full-bg { position: absolute; inset: -8% 0; will-change: transform; }
.h-full-copy { position: relative; z-index: 1; padding-inline: var(--pad); }
.h-full-copy p { max-width: 24ch; margin-inline: auto; font-size: var(--t-heading-sm); line-height: 1.15; letter-spacing: -0.02em; }

/* Journal on light ground */
.h-journal-label { margin: clamp(40px, 5vw, 72px) 0 16px; }
.on-light .entries { border-top-color: rgba(2, 2, 2, 0.14); }
.on-light .entry { border-bottom-color: rgba(2, 2, 2, 0.14); }
.on-light .entry .c { color: rgba(2, 2, 2, 0.55); }
.on-light .entries-hl { background: #020202; }
.on-light .entries.is-hover .entry.is-active, .on-light .entry:focus-visible { color: var(--ink); }
.on-light .entries.is-hover .entry.is-active .c { color: var(--graphite); }

/* Contact: everything turns dark as it arrives */
.h-contact { position: relative; z-index: 1; padding-top: var(--section); }
/* Home end panel: Contact and the footer fill one screen, the call at the top, the wordmark at the
   foot. It sits beneath the sections above (they're z-index 1), which slide up off it (app.js). */
.h-end { position: relative; z-index: 0; } /* stays put: it's what the scroll is measured against */
.h-end-in { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; background: var(--bg); }
.h-end .h-contact { padding-top: clamp(64px, 9vh, 96px); }
.h-end-veil { position: absolute; inset: 0; z-index: 2; background: #000; opacity: 0; pointer-events: none; } /* app.js fades it out as the panel is uncovered */

/* ---------- Steps (How we work) ---------- */
.steps { border-top: 1px solid var(--line); }
.step {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 8px var(--gap); align-items: baseline;
  padding-block: clamp(16px, 1.8vw, 24px);
  border-bottom: 1px solid var(--line);
}
.step .name { font-size: var(--t-heading-sm); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.step .kw { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.step .desc { margin-top: 6px; max-width: 56ch; color: var(--graphite); }
@media (hover: hover) {
  .step { transition: opacity .3s ease; }
  .steps:hover .step { opacity: 0.32; }
  .steps:hover .step:hover { opacity: 1; }
}

/* ---------- Cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px var(--gap); }
.cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* the work archive while it holds four projects or fewer */
.card { display: flex; flex-direction: column; min-width: 0; }
.card .media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-soft); }
.card .media .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--media);
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
.card .media .ph span { font-size: clamp(40px, 6vw, 96px); font-weight: 600; color: rgba(159, 178, 201, 0.16); letter-spacing: -0.03em; }
a.card:hover .media .ph { transform: scale(1.04); }
.card .media img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
a.card:hover .media img { transform: scale(1.04); }
.card .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.card h3 { font-size: var(--t-sub); font-weight: 400; line-height: 1.3; letter-spacing: -0.018em; transition: color .25s; }
a.card:hover h3 { color: var(--steel); }
.card .meta .y { font-size: var(--t-caption); color: var(--graphite); white-space: nowrap; }
.card .eyebrow { margin-top: 6px; }
.card p {
  margin-top: 8px; font-size: var(--t-body-sm); line-height: 1.43; color: var(--graphite);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.card .tag { align-self: flex-start; margin-top: 16px; }

/* Accent card: the one colour rupture in a row */
.card.accent, .card.tint {
  padding: 24px; justify-content: space-between; gap: 32px; min-height: 100%;
}
.card.accent { background: var(--ink); color: var(--bg); }
.card.accent .eyebrow, .card.accent p { color: rgba(5, 7, 12, 0.62); }
.card.tint { background: var(--deep); }
.card .heading-sm, .card.accent p.heading-sm {
  display: block; overflow: visible; -webkit-line-clamp: unset;
  font-size: var(--t-heading-sm); line-height: 1.15; color: inherit; max-width: 14ch;
}
.card.accent .go, .card.tint .go { font-size: var(--t-body); display: inline-flex; gap: 10px; transition: gap .25s; }
.card.accent:hover .go, .card.tint:hover .go { gap: 16px; }

/* Rail: a 3-up card row with arrow controls */
.rail {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--gap)) / 3);
  gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; }
.rail-lg { grid-auto-columns: calc((100% - var(--gap)) / 2); }
.rail-lg .card .media { aspect-ratio: 3 / 2; }
.rail-lg .card h3 { font-size: var(--t-heading-sm); letter-spacing: -0.02em; line-height: 1.15; }
.arrows { display: flex; gap: 8px; }

/* Journal entries: text list; on hover a light panel glides to the row and thumbnails reveal */
.entries { position: relative; border-top: 1px solid var(--line); }
.entries-hl {
  position: absolute; left: calc(-1 * var(--pad)); right: calc(-1 * var(--pad)); top: 0; height: 0;
  background: var(--ink); opacity: 0; pointer-events: none; z-index: 0;
  transition: transform .5s cubic-bezier(.65,0,.25,1), height .5s cubic-bezier(.65,0,.25,1), opacity .3s ease;
}
.entries.is-hover .entries-hl { opacity: 1; }
.entry {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr) 48px;
  gap: var(--gap); align-items: center;
  min-height: clamp(96px, 9vw, 148px); padding-block: 20px;
  border-bottom: 1px solid var(--line);
  transition: color .3s ease;
}
.entry .t { font-size: var(--t-heading-sm); line-height: 1.12; letter-spacing: -0.02em; max-width: 24ch; }
.entry .c { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); transition: color .3s ease; }
.entry .thumbs { display: flex; justify-content: flex-end; gap: 2px; }
.entry .thumbs i {
  width: clamp(64px, 6.4vw, 104px); aspect-ratio: 4 / 5; background: var(--media);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .5s cubic-bezier(.65,0,.25,1);
}
.entry .thumbs i { background: var(--pic, none) 0% 50% / 300% auto no-repeat, var(--media); }
.entry .thumbs i:nth-child(2) { background-position: 50% 50%; }
.entry .thumbs i:nth-child(3) { background-position: 100% 50%; }
.entry .thumbs i:nth-child(2) { transition-delay: .06s; }
.entry .thumbs i:nth-child(3) { transition-delay: .12s; }
.entry .go { justify-self: end; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; border-bottom: 1px solid currentColor; opacity: 0; transition: opacity .3s ease; }
.entries.is-hover .entry.is-active, .entry:focus-visible { color: var(--bg); }
.entries.is-hover .entry.is-active .c, .entry:focus-visible .c { color: rgba(5, 7, 12, 0.62); }
.entries.is-hover .entry.is-active .thumbs i, .entry:focus-visible .thumbs i { clip-path: inset(0 0 0 0); }
.entries.is-hover .entry.is-active .go, .entry:focus-visible .go { opacity: 1; }
.entry:focus-visible { outline: none; background: var(--ink); }
.arrow {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--ash); background: transparent; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .2s, opacity .2s;
}
.arrow:hover { border-color: var(--ink); }
.arrow:disabled { opacity: 0.3; cursor: default; border-color: var(--ash); }
.arrow svg { width: 16px; height: 16px; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-top: clamp(112px, 17vh, 190px); }
.page-hero .eyebrow { margin-bottom: clamp(20px, 2.4vw, 32px); }
.page-hero h1 { max-width: 20ch; }
.page-hero .lead { margin-top: clamp(20px, 2.4vw, 32px); }

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }

/* Light pages (the Journal, after accordion.net.au's work index): the page's own colours flip to the light
   CCC surface; the header and cursor follow by blend. The menu overlay is left as it is. */
body.is-light { background: #EAEDF1; color: #020202; }
body.is-light main, body.is-light .site-footer {
  --bg: #EAEDF1; --bg-soft: #DDE1E6; --ink: #020202;
  --graphite: rgba(2, 2, 2, 0.6); --ash: rgba(2, 2, 2, 0.36); --line: rgba(2, 2, 2, 0.14);
  color: var(--ink);
}
/* entry cards, grid pictures and thumbs stand in for photos: they stay dark, their text light */
body.is-light .jl-item, body.is-light .jl-tile-media { --ink: #EAEDF1; color: #EAEDF1; }
body.is-light .jl-item .slot, body.is-light .jl-tile-media .slot {
  background: var(--media); border-color: rgba(234, 237, 241, 0.16); color: rgba(234, 237, 241, 0.5);
}
/* "All entries" card under an article: black on the light page so its words read */
body.is-light .card.tint { background: #020202; color: #EAEDF1; }
body.is-light .card.tint .eyebrow { color: rgba(234, 237, 241, 0.55); }

/* Journal index (accordion.net.au/work-style): filters + List/Grid switch held at the left, tall entry
   cards down the centre, a travelling strip of thumbnails at the right. Grid view: square tiles. */
.jl {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) min(50vw, 840px) minmax(0, 1fr);
  column-gap: var(--gap); padding-inline: var(--pad);
}
.jl-side, .jl-rail { grid-row: 1; height: 100vh; position: sticky; top: 0; } /* app.js pins them instead under the smoother */
html.has-smoother .jl-side, html.has-smoother .jl-rail { position: relative; }
.jl-side { grid-column: 1; display: flex; flex-direction: column; justify-content: center; }
.jl-filters { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.jl-views { position: absolute; left: 0; bottom: clamp(16px, 2vw, 24px); display: flex; gap: 14px; }
.jl-filters button, .jl-views button {
  display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--t-caption); font-weight: 600; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--ash); transition: color .25s;
}
.jl-filters button:hover, .jl-views button:hover,
.jl-filters button[aria-pressed="true"], .jl-views button[aria-pressed="true"] { color: var(--ink); }
/* the square: on the chosen filter only (it pushes the word over); always on the view switches */
.jl-filters button::before, .jl-views button::before {
  content: ""; flex: none; width: 0; height: 7px; margin-right: 0; background: currentColor;
  transition: width .3s, margin .3s;
}
.jl-filters button[aria-pressed="true"]::before, .jl-views button::before { width: 7px; margin-right: 6px; }
.jl-filters sup { margin-left: 2px; font-size: 8px; font-weight: 500; vertical-align: super; color: var(--ash); }

.jl-list { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 6px; padding-block: clamp(64px, 8vh, 88px) 12vh; }
.jl-item { position: relative; display: block; aspect-ratio: 5 / 6; color: var(--ink); }
/* the card's visible layer: the arrival slides this, never the card box itself, which the scroll
   effects are measured against (moving it would make the picture jump once they re-measure) */
.jl-in { position: absolute; inset: 0; overflow: hidden; background: var(--bg-soft); }
.jl-media { position: absolute; inset: -5% 0; transition: filter .6s; will-change: transform; }
.jl-media .slot { position: absolute; inset: 0; padding-top: 14%; }
.jl-tile-media img, .jl-thumb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* An entry picture is the same size wherever it shows (card, opening, entry-page hero): tall enough for
   the card with its drift and for the hero, at least full width, centred. Only the window onto it
   changes, so opening an entry widens the frame without zooming the photo. */
.jl-media img, .ar-hero img, .jl-zoom img {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; max-width: none; object-fit: cover;
  width: auto; min-width: 100vw; height: max(var(--ar-h), calc(min(50vw, 840px) * 1.32));
}
.jl-thumb-media { position: relative; }
.jl-in::after { content: ""; position: absolute; inset: 0; background: rgba(2, 2, 2, 0.3); pointer-events: none; transition: opacity .5s ease; }
/* opening an entry (app.js): the veil, the hover blur and the words clear off the picture */
.jl-item.is-opening .jl-in::after { opacity: 0; }
.jl-zoom { position: fixed; z-index: 90; overflow: hidden; pointer-events: none; background: var(--media); }
.jl-zoom > * { position: absolute; max-width: none; }
.jl-zoom img { object-fit: cover; }
.jl-zoom .slot { background: var(--media); border-color: rgba(234, 237, 241, 0.16); color: rgba(234, 237, 241, 0.5); padding-top: 14%; }
.jl-item.is-opening .jl-media { filter: none !important; }
.jl-item.is-opening .jl-title, .jl-item.is-opening .jl-details { opacity: 0 !important; transition: opacity .35s ease; }
.jl-item:hover .jl-media { filter: saturate(0) blur(10px); }
.jl-title { position: absolute; z-index: 2; left: 50%; top: 50%; width: 88%; translate: -50% -50%; text-align: center; pointer-events: none; }
.jl-eyebrow { margin-bottom: 12px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.jl-title h2 { font-size: clamp(32px, 3.6vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.jl-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.2em; margin-bottom: -0.2em; } /* room for descenders */
.jl-title .wi, .jl-eyebrow .wi { display: inline-block; }
.jl-eyebrow { overflow: hidden; }
.jl-details {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(16px, 2vw, 28px); width: 72%; translate: -50% 0;
  text-align: center; font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none;
}

.jl-rail { grid-column: 3; justify-self: end; width: 4.5rem; }
.jl-thumbs { position: absolute; top: 50%; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 6px; translate: -50% 0; }
.jl-thumb { display: block; width: 2.75rem; height: 3.25rem; padding: 0; border: 0; overflow: hidden; cursor: pointer; opacity: 0.45; }
.jl-thumb-media { display: block; width: 100%; height: 100%; background: var(--media); }
/* the two pluses flank whichever thumb sits at the strip's centre line */
.jl-plus { position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; }
.jl-plus::before, .jl-plus::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ink); translate: -50% -50%; }
.jl-plus::before { width: 9px; height: 1px; }
.jl-plus::after { width: 1px; height: 9px; }
.jl-plus.l { right: calc(50% + 1.75rem + 8px); }
.jl-plus.r { left: calc(50% + 1.75rem + 8px); }

.jl-grid { grid-column: 2 / 4; grid-row: 1; display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; align-content: start; padding-block: clamp(64px, 8vh, 88px) 12vh; }
.jl.is-grid .jl-grid { display: grid; }
.jl-tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; color: var(--ink); }
.jl-tile-media { position: absolute; inset: 0 0 0 0; z-index: 1; overflow: hidden; transition: bottom .5s cubic-bezier(0.22, 1, 0.36, 1), filter .5s; }
.jl-tile-media .slot { position: absolute; inset: 0; padding: 0; border-style: solid; }
.jl-grid:has(.jl-tile:hover) .jl-tile:not(:hover) .jl-tile-media { filter: saturate(0) brightness(0.7); } /* only while a square itself is under the cursor, not the gaps or the empty cells */
.jl-tile:hover .jl-tile-media { bottom: 17%; }
.jl-tile-cap { position: absolute; left: 0; right: 0; bottom: 0; height: 17%; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.jl-tile-cap h3 { font-size: clamp(14px, 1.2vw, 18px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; }
.jl-tile-cap p { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); }
@media (max-width: 760px) {
  .jl { grid-template-columns: minmax(0, 1fr); }
  .jl-side, html.has-smoother .jl-side { position: relative; height: auto; padding-top: 88px; flex-direction: row; justify-content: space-between; align-items: flex-end; }
  .jl-views { position: static; }
  .jl-list, .jl-grid { grid-column: 1; grid-row: 2; padding-top: 20px; }
  .jl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jl-rail { display: none; }
}

/* Work index head (accordion.net.au-style): title left; Service and Industry as tight plain lists,
   grey until hovered or chosen. A hovered entry shows one of its projects just left of its list. */
.work-head {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start;
  padding-top: clamp(64px, 8vw, 128px); padding-bottom: clamp(48px, 6vw, 96px); /* under the page hero */
}
.work-title { grid-column: 1 / span 4; font-size: var(--t-heading-sm); font-weight: 500; line-height: 1; letter-spacing: -0.03em; }
.wf-group { position: relative; display: flex; gap: clamp(10px, 1vw, 16px); }
.wf-list { margin: 0; padding: 0; list-style: none; }
.wf-service { grid-column: 6 / span 4; }
.wf-industry { grid-column: 10 / span 3; }
.wf-label, .wf-list button {
  font-size: clamp(15px, 1.25vw, 20px); font-weight: 500; line-height: 1.02; letter-spacing: -0.02em;
}
.wf-list button {
  display: block; padding: 0; border: 0; background: none; text-align: left; cursor: pointer;
  color: rgba(234, 237, 241, 0.4); transition: color .2s;
}
.wf-list button:hover, .wf-list button:focus-visible, .wf-list button[aria-pressed="true"] { color: var(--ink); }
.wf-thumb {
  position: absolute; top: 0; right: calc(100% + clamp(16px, 2vw, 32px));
  width: clamp(72px, 5.6vw, 112px); aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px;
  opacity: 0; scale: 0.96; transition: opacity .25s ease, scale .35s cubic-bezier(0.22, 1, 0.36, 1); pointer-events: none;
}
.wf-thumb.is-on { opacity: 1; scale: 1; }
.wf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.work-grid { padding-top: 0; }
/* archive cards stand upright (3:4, like the project thumbnails), three to a row; the disciplines
   line sits small and close under the name */
.work-grid .card .media { aspect-ratio: 3 / 4; }
.work-grid .card .meta { margin-top: 12px; }
.work-grid .card .eyebrow { margin-top: 2px; font-size: 10px; }
/* the active filter, just above the grid; clicking it clears */
.wf-chip { margin-bottom: 16px; }
.wf-chip button {
  padding: 0; border: 0; background: none; color: var(--graphite); cursor: pointer;
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; transition: color .2s;
}
.wf-chip button:hover { color: var(--ink); }
@media (max-width: 760px) {
  .work-title { grid-column: 1 / -1; margin-bottom: 24px; }
  .wf-service, .wf-industry { grid-column: 1 / -1; margin-bottom: 16px; }
  .wf-label { min-width: 5.5em; }
  .wf-thumb { display: none; }
}

/* ---------- Project detail ---------- */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line); }
.facts dt { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); margin-bottom: 6px; }
.facts dd { font-size: var(--t-body); }
.cover { margin-top: clamp(40px, 5vw, 72px); position: relative; aspect-ratio: 16 / 8; min-height: 360px; background: var(--media); overflow: hidden; }
.cover .ph { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(60px, 12vw, 180px); font-weight: 600; color: rgba(159, 178, 201, 0.14); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); }
.split p { font-size: var(--t-sub); line-height: 1.5; color: var(--graphite); max-width: 56ch; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.figure { position: relative; overflow: hidden; background: var(--media); display: grid; place-items: center; aspect-ratio: 4 / 5; }
.figure.wide { aspect-ratio: 16 / 9; }
.figure .ph { font-size: clamp(40px, 8vw, 120px); font-weight: 600; color: rgba(159, 178, 201, 0.14); }
.caption { margin-top: 12px; font-size: var(--t-caption); color: var(--graphite); }
.credits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--line); padding-top: 20px; }
.credits dt { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); margin-bottom: 8px; }
.credits dd { font-size: var(--t-body-sm); line-height: 1.7; }

/* ---------- Project story: pinned photo, title + description scroll over it ---------- */
.pstory { position: relative; }
.pstory-bg {
  position: sticky; top: 0; z-index: 0;
  height: 100svh; margin-bottom: -100svh; overflow: hidden;
}
html.has-smoother .pstory-bg { position: relative; } /* pinned by ScrollTrigger instead */
.pstory-bg img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 50%; } /* room for the parallax drift */
html.has-smoother .pstory-bg img { will-change: transform; }
.pstory-shade { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.pstory-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,12,.35) 0%, rgba(5,7,12,.5) 55%, rgba(5,7,12,.72) 100%);
}
.pstory-hero {
  position: relative; z-index: 1;
  min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: clamp(20px, 3vw, 32px);
}
.ptitle { white-space: nowrap; font-size: clamp(40px, 14vw, 240px); font-weight: 400; line-height: .86; letter-spacing: -0.045em; text-transform: uppercase; }
.pmeta {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  margin-top: clamp(20px, 2.4vw, 32px);
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em;
}
.pstory-body {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  padding-block: clamp(64px, 10vw, 160px) clamp(80px, 12vw, 180px);
}
.pdesc { grid-column: 2; max-width: 50ch; }
.pdesc p { font-size: var(--t-body); line-height: 1.5; margin-bottom: 1em; }
.pfacts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px var(--gap); margin-top: clamp(40px, 4vw, 56px); }
.pfacts dt { font-size: var(--t-body-sm); color: var(--graphite); margin-bottom: 8px; }
.pfacts dd { font-size: var(--t-caption); line-height: 1.6; text-transform: uppercase; letter-spacing: 0.02em; }
.pfacts .credits-row { grid-column: 1 / -1; }
.pfacts .credits-row dd { display: grid; grid-template-columns: 1fr 1fr; gap: 2px var(--gap); }
.pfacts .credits-row dd span:nth-child(odd) { color: var(--graphite); }
/* Slides up over the held project photo */
.pgallery { position: relative; z-index: 2; background: var(--bg); display: flex; flex-direction: column; gap: var(--gap); padding-top: var(--gap); }
.pgallery + .sec { position: relative; z-index: 2; background: var(--bg); }
.pgallery img { width: 100%; height: auto; display: block; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
/* a big picture set off against a smaller one: the small one drops (stagger) or sits low on the left
   (stagger-r), so a run of pairs doesn't read as one even grid */
.duo.stagger { grid-template-columns: 7fr 5fr; align-items: start; }
.duo.stagger > :last-child { margin-top: 12vw; }
.duo.stagger-r { grid-template-columns: 5fr 7fr; align-items: end; }

/* ---------- Project end: prev/next + giant wordmark ---------- */
.pnav { display: flex; justify-content: space-between; gap: var(--gap); padding-top: var(--section); }
.pnav a {
  display: flex; flex-direction: column;
  font-size: var(--t-heading-sm); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--graphite); transition: color .25s;
}
.pnav a u { text-decoration-thickness: 2px; text-underline-offset: 4px; }
.pnav a:hover { color: var(--ink); }
.pnav-next { align-items: flex-end; text-align: right; }
.bigfoot { padding-top: clamp(32px, 4vw, 56px); padding-bottom: 20px; }
main + .bigfoot { margin-top: var(--section); } /* home: no prev/next row above it */
/* Sized so the wordmark spans the content width (ratio measured for Heros) */
.bigmark {
  font-size: calc((100vw - 2 * var(--pad)) * 0.135); line-height: 0.8;
  letter-spacing: -0.05em; white-space: nowrap;
}
.bigmark sup { font-size: 0.22em; vertical-align: 2.6em; margin-left: 0.02em; letter-spacing: 0; }
.bigfoot-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--gap);
  margin-top: clamp(16px, 2vw, 28px);
  font-size: var(--t-caption); line-height: 1.5;
}
.bigfoot-row a:hover { color: var(--graphite); }

.pnav-preview {
  position: fixed; top: 0; left: 0; z-index: 90; pointer-events: none;
  width: clamp(180px, 15vw, 240px); aspect-ratio: 3 / 4; overflow: hidden;
  background: var(--media);
  clip-path: inset(100% 0 0 0);
  transition: clip-path .45s cubic-bezier(.65,0,.25,1);
}
.pnav-preview.is-on { clip-path: inset(0 0 0 0); }
.pnav-preview img { width: 100%; height: 100%; object-fit: cover; }
.pnav-preview.is-empty img { display: none; }

/* ---------- CCC page ---------- */
.caps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.cap { display: flex; flex-direction: column; padding: 20px 0 0; border-top: 1px solid var(--line); }
.cap h3 { font-size: var(--t-heading-sm); font-weight: 400; letter-spacing: -0.02em; line-height: 1.15; }
.cap p { margin-top: 8px; font-size: var(--t-body-sm); color: var(--graphite); }
.cap.tint { background: var(--deep); padding: 24px; border-top-color: transparent; }

/* ---------- Article ---------- */
.article-head h1 { max-width: 18ch; }
/* Journal entry page (accordion.net.au project-page opening): the picture full width under the header,
   title left and meta right beneath it, "( All entries )" centred. --ar-top / --ar-h are shared with the
   journal index, whose card grows into exactly this box. */
:root { --ar-top: clamp(56px, 7vh, 72px); --ar-h: 78vh; }
.ar-hero { position: relative; margin-top: var(--ar-top); height: var(--ar-h); overflow: hidden; background: var(--media); }
.ar-hero .slot { position: absolute; inset: 0; background: var(--media); border-color: rgba(234, 237, 241, 0.16); color: rgba(234, 237, 241, 0.5); }
.ar-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap); padding-top: 12px; }
.ar-title { font-size: clamp(28px, 3vw, 48px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; }
.ar-meta { flex: none; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.ar-back { margin: clamp(12px, 1.4vw, 20px) 0 clamp(48px, 6vw, 96px); text-align: center; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; }
.ar-back a:hover { color: var(--graphite); }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--gap); margin-top: clamp(40px, 5vw, 72px); padding-top: 20px; border-top: 1px solid var(--line); }
.article-aside { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: var(--t-body-sm); color: var(--graphite); }
.article-body { max-width: 680px; }
.article-body p { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; color: var(--graphite); margin-bottom: 1.3em; }
.article-body h2 { font-size: var(--t-heading-sm); font-weight: 400; letter-spacing: -0.02em; color: var(--ink); margin: 1.8em 0 0.6em; }
.article-body .figure { margin: 2.2em 0; }
.article-body blockquote { margin: 1.6em 0; font-size: var(--t-heading-sm); line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.contact-info .mail { display: inline-block; margin-top: 24px; font-size: var(--t-heading-sm); letter-spacing: -0.02em; border-bottom: 1px solid var(--ash); padding-bottom: 4px; transition: border-color .25s; }
.contact-info .mail:hover { border-color: var(--ink); }
.contact-info .detail { margin-top: 32px; color: var(--graphite); line-height: 1.7; }
.contact-info .detail a { color: var(--ink); border-bottom: 1px solid var(--ash); }
form.inquiry { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field > label, .field > .label { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.field .req { color: var(--ink); }
.field input, .field textarea, .field select {
  width: 100%; background: transparent; color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ash); border-radius: 0;
  font-family: inherit; font-size: var(--t-body); letter-spacing: -0.018em; padding: 10px 0;
  transition: border-color .25s;
}
.field select { color: var(--graphite); }
.field select option { background: var(--bg); color: var(--ink); }
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-bottom-color: var(--ink); }
.field input::placeholder, .field textarea::placeholder { color: var(--graphite); opacity: 0.7; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px var(--gap); }
.form-status { font-size: var(--t-body-sm); color: var(--steel); min-height: 1.4em; }
.form-status.is-error { color: #E5484D; }
.form-note { margin-bottom: -8px; }
.field .opt { margin-left: 4px; text-transform: none; letter-spacing: 0; opacity: 0.7; }
/* a required answer that's still missing (app.js); clears as soon as it's given */
.field.is-invalid > label, .field.is-invalid > .label, .consent.is-invalid { color: #E5484D; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea, .field.is-invalid .file-input { border-bottom-color: #E5484D; }
.consent.is-invalid input { outline: 1px solid #E5484D; outline-offset: 2px; }
.inquiry.is-sending .submit-btn { opacity: 0.5; cursor: progress; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* spam trap, off screen */

/* ---------- Careers ---------- */
/* Hero: a moving gradient (drawn live, app.js) under the title. It stays put while the rest of the page
   slides up over it, a curtain (sticky here; held by a ScrollTrigger pin under the smoother). Until the
   gradient draws, or without WebGL, a still version of it shows. */
.cr-hero {
  position: sticky; top: 0; z-index: 0; height: 48vh; min-height: 340px; overflow: hidden; color: #EAEDF1;
  background: /* a still of the live gradient, for when WebGL isn't there */
    radial-gradient(25% 30% at 70% 45%, rgba(133, 186, 227, 0.55), transparent 75%),
    radial-gradient(40% 45% at 62% 50%, rgba(46, 102, 168, 0.6), transparent 75%),
    radial-gradient(60% 70% at 40% 40%, rgba(10, 31, 61, 0.9), transparent 75%),
    #02050A;
}
html.has-smoother .cr-hero { position: relative; }
.cr-gradient { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cr-hero-text { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--gap); padding-bottom: clamp(20px, 3vw, 40px); }
.cr-title { line-height: 0.95; }
.cr-down { flex: none; width: clamp(32px, 3.4vw, 52px); height: clamp(32px, 3.4vw, 52px); margin-bottom: 0.4vw; color: inherit; transition: translate .35s cubic-bezier(.2, .8, .2, 1); }
.cr-down svg { width: 100%; height: 100%; display: block; }
.cr-down:hover { translate: 0 6px; }
.cr-body { position: relative; z-index: 1; background: var(--bg); }
.cr-intro { padding-top: var(--section); }
.cr-body #apply { padding-top: calc(var(--section) * 2); } /* the form gets more air above it than a plain section */
.cr-lead { max-width: 20ch; font-size: var(--t-heading); line-height: 1.06; letter-spacing: -0.023em; }
.cr-sub { max-width: 46ch; margin-top: clamp(20px, 2.4vw, 32px); font-size: var(--t-sub); line-height: 1.4; color: var(--graphite); }
@media (min-width: 761px) {
  .cr-hero-text { padding-bottom: 2.778vw; }
  .cr-down { width: 3.4vw; height: 3.4vw; }
  .cr-sub { margin-top: 2.222vw; }
}
/* the three ways in link to their own pages: on hover the top rule draws across and the arrow steps on */
a.cap-link { position: relative; color: inherit; }
a.cap-link::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform .7s cubic-bezier(.65, 0, .35, 1);
}
a.cap-link:hover::before, a.cap-link:focus-visible::before { transform: scaleX(1); }
.cap-link h3 { display: flex; justify-content: space-between; align-items: center; gap: 16px; transition: color .3s; }
.cap-go { flex: none; width: 0.8em; height: 0.8em; transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
a.cap-link:hover .cap-go, a.cap-link:focus-visible .cap-go { translate: 0.25em 0; }
.caps:has(.cap-link:hover) .cap-link:not(:hover) h3 { color: var(--graphite); }

/* Careers subpages: a title column and a body column under a rule, section after section */
.cr-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--gap);
  padding-top: clamp(20px, 2vw, 28px); border-top: 1px solid var(--line);
}
.depts { display: flex; flex-direction: column; gap: clamp(56px, 6.667vw, 96px); }
.dept[hidden] { display: none; }
.dept-head .eyebrow { margin-bottom: 12px; }
.dept-state {
  display: inline-flex; margin-top: 20px; padding: 6px 12px; border: 1px solid var(--ash); border-radius: var(--pill);
  font-size: var(--t-caption); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite);
}
.dept-state.is-hiring { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.dept-desc { max-width: 52ch; line-height: 1.6; color: var(--graphite); }
.jobs { margin-top: clamp(20px, 2.2vw, 32px); }
.jobs:empty { display: none; }
.job { border-top: 1px solid var(--line); }
.job:last-child { border-bottom: 1px solid var(--line); }
.job summary {
  list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 16px 0; cursor: pointer;
}
.job summary::-webkit-details-marker { display: none; }
.job-arrow { width: 18px; height: 18px; transition: rotate .35s cubic-bezier(.2, .8, .2, 1); }
.job[open] .job-arrow { rotate: 90deg; }
.job-title { font-size: var(--t-sub); line-height: 1.25; }
.job-meta { grid-column: 2; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.job-more {
  grid-column: 3; grid-row: 1 / span 2; padding: 6px 12px; border: 1px solid var(--ash); border-radius: var(--pill);
  font-size: var(--t-caption); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; transition: border-color .2s;
}
.job summary:hover .job-more { border-color: var(--ink); }
.job-more .o, .job[open] .job-more .c { display: none; }
.job[open] .job-more .o { display: inline; }
.job-body { padding: 4px 0 28px 32px; }
.job[open] .job-body { animation: job-in .5s cubic-bezier(.2, .7, .2, 1); }
@keyframes job-in { from { opacity: 0; translate: 0 8px; } }
.job-body p { max-width: 60ch; line-height: 1.6; color: var(--graphite); white-space: pre-line; }
.job-body p + p { margin-top: 14px; }
.job-body .btn { margin-top: 22px; }
.cr-kv > div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); gap: var(--gap); padding: 16px 0; border-bottom: 1px solid var(--line); }
.cr-kv > div:first-child { padding-top: 0; }
.cr-kv dt { padding-top: 3px; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.cr-kv dd { line-height: 1.6; }
.cr-end .cr-split { grid-template-columns: 1fr; }
.cr-end .heading { max-width: 20ch; }
.cr-end .actions { margin-top: clamp(24px, 2.8vw, 40px); }
.crafts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(28px, 3vw, 44px) var(--gap); }
.craft-col { padding-top: 16px; border-top: 1px solid var(--line); }
.craft-col .eyebrow { margin-bottom: 12px; }
.craft-col ul { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-sub); line-height: 1.3; }
@media (min-width: 761px) {
  .cr-split { padding-top: 1.944vw; }
  .depts { gap: 6.667vw; }
  .jobs { margin-top: 2.222vw; }
  .job summary { padding: 1.111vw 0; }
  .job-body { padding: 0.278vw 0 1.944vw 2.222vw; }
  .crafts { gap: 3.056vw var(--gap); }
  .cr-end .actions { margin-top: 2.778vw; }
}
@media (max-width: 760px) {
  .cr-split { grid-template-columns: 1fr; gap: 20px; }
  .cr-kv > div { grid-template-columns: 1fr; gap: 4px; }
  .crafts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .craft-col ul { font-size: var(--t-body); }
  .job-body { padding-left: 0; }
}

.apply [hidden] { display: none !important; } /* fields for another track (app.js) */
/* until a track is picked, only the picker shows (app.js sets data-track) */
.apply:not([data-track]) > :not(.form-note):not(.track-field):not(.hp) { display: none; }
/* the three ways in, solid until one is picked; then the others step back to outlines. On hover a
   button brightens and an arrow slides out of it, pointing down to the form */
.apply [data-choice="track"] { gap: 10px; }
.apply [data-choice="track"] .tag {
  gap: 0; padding: 14px 20px; font-size: var(--t-body-sm);
  background: var(--ink); color: var(--bg); border-color: var(--ink);
  transition: background .3s, color .3s, border-color .3s, gap .3s, padding .3s;
}
.apply [data-choice="track"] .tag-go { width: 0; height: 14px; opacity: 0; transform: rotate(90deg); transition: width .3s, opacity .3s; } /* points down, to the form */
.apply[data-track] [data-choice="track"] .tag[aria-pressed="false"] { background: transparent; color: var(--ink); border-color: var(--ash); }
@media (hover: hover) {
  .apply [data-choice="track"] .tag:hover { background: #fff; color: var(--bg); border-color: #fff; gap: 10px; padding-right: 18px; }
  .apply [data-choice="track"] .tag:hover .tag-go { width: 14px; opacity: 1; }
}
.apply [data-choice="track"] .tag[aria-pressed="true"] { gap: 10px; padding-right: 18px; }
.apply [data-choice="track"] .tag[aria-pressed="true"] .tag-go { width: 14px; opacity: 1; }
.apply[data-track] [data-track-hint] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .apply[data-track] > :not(.form-note):not(.track-field) { animation: apply-open .6s cubic-bezier(.2, .8, .2, 1) both; }
}
@keyframes apply-open { from { opacity: 0; transform: translateY(12px); } }
.roles { border-top: 1px solid var(--line); }
.roles-empty { padding: 20px 0; color: var(--graphite); }
.role {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr) auto; gap: var(--gap); align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.role h3 { font-size: var(--t-heading-sm); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; }
.role p { margin-top: 6px; color: var(--graphite); font-size: var(--t-body-sm); }
.role .meta { font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); }
.role .ulink { margin-top: 0; }
/* crafts: one row per field, closed until tapped (any number open); an open field slides down to show
   its crafts as pills, a closed one lists what's picked in it (under the name on phones) */
.skill-groups { margin-top: 6px; border-top: 1px solid var(--line); }
.sg { border-bottom: 1px solid var(--line); }
.sg[hidden], .sg .tag[hidden] { display: none; } /* crafts that don't fit the picked way in (app.js) */
.sg-head {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 4px 12px; align-items: center; width: 100%; padding: 14px 0;
  border: 0; background: none; text-align: left; font-size: var(--t-body-sm); line-height: 1.3; color: var(--ink); cursor: pointer;
}
.sg-arrow { width: 14px; height: 14px; color: var(--graphite); transition: rotate .5s cubic-bezier(.65, 0, .35, 1), color .2s; }
.sg-head:hover .sg-arrow, .sg-head[aria-expanded="true"] .sg-arrow { color: var(--ink); }
.sg-head[aria-expanded="true"] .sg-arrow { rotate: 90deg; }
.sg-picked { justify-self: end; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--graphite); }
.sg-head[aria-expanded="true"] .sg-picked { display: none; }
.sg-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s cubic-bezier(.65, 0, .35, 1); }
.sg-head[aria-expanded="true"] + .sg-body { grid-template-rows: 1fr; }
.sg-clip { min-height: 0; overflow: hidden; }
.sg-panel { padding: 0 0 18px 26px; opacity: 0; translate: 0 -6px; transition: opacity .4s cubic-bezier(.65, 0, .35, 1), translate .5s cubic-bezier(.65, 0, .35, 1); }
.sg-head[aria-expanded="true"] + .sg-body .sg-panel { opacity: 1; translate: none; }
@media (prefers-reduced-motion: reduce) { .sg-body, .sg-panel, .sg-arrow { transition: none; } }
.field-hint { margin-top: -4px; font-size: var(--t-caption); color: var(--graphite); }
.links { display: flex; flex-direction: column; gap: 6px; }
.add-link, .file-list button {
  align-self: flex-start; margin-top: 8px; padding: 0; border: 0; background: none; cursor: pointer;
  font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); transition: color .2s;
}
.add-link:hover, .file-list button:hover { color: var(--ink); }
.file-input { padding: 10px 0; border-bottom: 1px solid var(--ash); color: var(--graphite); font: inherit; font-size: var(--t-body-sm); }
.file-input::file-selector-button {
  margin-right: 12px; padding: 8px 14px; border: 1px solid var(--ash); border-radius: var(--pill);
  background: transparent; color: var(--ink); font: inherit; font-size: var(--t-caption); text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer;
}
.file-hint { font-size: var(--t-caption); color: var(--graphite); }
.file-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-body-sm); }
.file-list li { display: flex; justify-content: space-between; gap: 16px; }
.file-list button { margin-top: 0; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--t-body-sm); color: var(--graphite); cursor: pointer; }
.consent input { margin-top: 3px; accent-color: var(--ink); width: 16px; height: 16px; flex: none; }
.consent a { color: var(--ink); border-bottom: 1px solid var(--ash); }
.apply-done { padding: 24px 0; }
.apply-done .detail { margin-top: 16px; color: var(--graphite); line-height: 1.7; }
@media (max-width: 760px) {
  .role { grid-template-columns: 1fr; gap: 8px; }
  .sg-picked { grid-column: 2 / -1; justify-self: start; }
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative; z-index: 1;
  margin-top: var(--section);
  padding: clamp(40px, 5vw, 64px) var(--pad) 24px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px var(--gap);
}
.site-footer > .col:first-child, .site-footer .brandcol + .col { grid-column: 2; } /* the columns keep their places on the right */
.site-footer .brandcol { display: none; } /* (a page still cached from before the footer change) */
/* the giant wordmark under the columns, as on the home and project pages */
.site-footer .bigmark { grid-column: 1 / -1; margin-top: clamp(40px, 6vw, 96px); }
.site-footer h4 { font-size: var(--t-caption); font-weight: 400; text-transform: uppercase; letter-spacing: 0.02em; color: var(--graphite); margin-bottom: 16px; }
.site-footer .col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--t-body-sm); }
.site-footer .col a:hover { color: var(--graphite); }
.site-footer .col span { color: var(--graphite); }
.footbar {
  grid-column: 1 / -1;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-top: clamp(16px, 2vw, 28px);
  font-size: var(--t-caption); color: var(--graphite);
}

/* ---------- Reveal + word-mask motion ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.anim-text .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.14em; margin-bottom: -0.14em; }
.anim-text .word .wi { display: inline-block; transform: translateY(118%); transition: transform .9s cubic-bezier(.22,.9,.28,1); will-change: transform; }
.anim-text.in .word .wi { transform: none; }

/* ---------- Custom cursor (fine pointers) ---------- */
.cursor { position: fixed; top: 0; left: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; background: #EAEDF1; pointer-events: none; z-index: 9999; mix-blend-mode: difference; opacity: 0; transition: width .28s cubic-bezier(.2,.8,.2,1), height .28s cubic-bezier(.2,.8,.2,1), margin .28s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.cursor.ready { opacity: 1; }
.cursor.hover { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
body.has-cursor, body.has-cursor * { cursor: none !important; }
@media (hover: none), (pointer: coarse) { .cursor { display: none !important; } }

/* ---------- Page transitions ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: pt-out .34s ease both; }
::view-transition-new(root) { animation: pt-in .46s cubic-bezier(.2,.8,.2,1) both; }
/* from the home slider's photo zoom: the screen already shows this page's hero — no fade, no nudge */
html.from-zoom::view-transition-old(root), html.from-zoom::view-transition-new(root) { animation: none; }
@keyframes pt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes pt-in { from { opacity: 0; transform: translateY(14px); } }
html.pt-fallback body { opacity: 0; transition: opacity .34s ease; }
html.pt-fallback body.pt-in { opacity: 1; }
html.pt-fallback body.pt-out { opacity: 0; }
html.pt-fallback.from-zoom body { opacity: 1; transition: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .anim-text .word .wi { transform: none; transition: none; }
  .menu.open .menu-links a { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.pt-fallback body { opacity: 1 !important; transition: none; }
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 760px) { /* (760, not 960: zoomed in, desktop keeps its layout) */
  .cards, .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rail, .rail-lg { grid-auto-columns: calc((100% - var(--gap)) / 2); }
  .entry { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 48px; }
  .entry .thumbs { display: none; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .site-footer > .col:first-child, .site-footer .brandcol + .col { grid-column: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split, .article-grid, .contact-grid { grid-template-columns: 1fr; }
  .step { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-links, .nav-contact { display: none; }
  .menu-btn { display: block; }
}
@media (max-width: 600px) {
  .cards, .cards.two, .caps, .duo, .trio, .credits { grid-template-columns: 1fr; }
  .duo.stagger, .duo.stagger-r { grid-template-columns: 1fr; }
  .duo.stagger > :last-child { margin-top: 0; }
  .pstory-body { grid-template-columns: 1fr; }
  .bigfoot-row { grid-template-columns: 1fr 1fr; }
  .bigfoot-row span:first-child { grid-column: 1 / -1; }
  .pnav a { font-size: var(--t-sub); }
  .pdesc { grid-column: 1; }
  .rail, .rail-lg { grid-auto-columns: 84%; }
  .entry { grid-template-columns: 1fr; gap: 8px; min-height: 0; }
  .entries-hl { display: none; }
  .entry .thumbs, .entry .go { display: none; }
  .h-intro-label, .h-intro-text { grid-column: 1 / -1; }
  .h-step { grid-template-columns: 1fr; gap: 16px; }
  .h-step-head, .h-step-side { grid-column: 1 / -1; }
  .h-step-side { display: block; padding-top: 0; }
  .h-slides { --strip: 20px; }
  .h-slide-title { font-size: 10vw; }
  .h-slide-credits .scope { display: none; }
  .cover { aspect-ratio: 4 / 5; min-height: 0; }
  .field-row { grid-template-columns: 1fr; }
}

/* ===========================================================
   ZOOM LOCK (desktop). Boxes, pictures and the spaces between them are sized off the screen's
   width only (vw / vh, worked out from how they measure on a 1440px-wide screen), with no px
   floors or ceilings, so browser zoom leaves the layout exactly where it is and only the text
   grows or shrinks (as on accordion.net.au). Phones keep the px-based values above.
   =========================================================== */
@media (min-width: 761px) {
  :root { --pad: 2.6vw; --gap: 1.8vw; --section: 8vw; --ar-top: 7vh; }
  /* big type is part of the layout (it sizes cards, rows, screens): it's locked too. Small type
     (captions, body, the header and the filters) stays in px and follows the zoom. */
  :root { --t-heading-sm: 2.361vw; --t-heading: 3.75vw; --t-display: 5.833vw; }
  .h-load-word { font-size: 6.6vw; }
  .h-steps { --fs: 9.5vw; }
  .h-work { --cnt: 7.4vw; }
  .h-slides { height: calc(100svh - var(--cnt) * 0.86 - 1.389vw); }
  .h-slide-title { font-size: 4.4vw; }
  .h-cta-t { font-size: 3.6vw; }
  .card .media .ph span { font-size: 6vw; }
  .jl-title h2 { font-size: 3.6vw; }
  .ptitle { font-size: 14vw; }
  .cover .ph { font-size: 12vw; }
  .figure .ph { font-size: 8vw; }
  .ar-title { font-size: 3vw; }

  .slot-fill { padding: 5.556vw 1.944vw 1.944vw; }
  .sec-head { margin-bottom: 3.889vw; }
  .sec-head .eyebrow, .page-hero .eyebrow { margin-bottom: 2.222vw; }
  .actions { margin-top: 2.778vw; }

  /* home */
  .h-hero-sub { bottom: 2.222vw; }
  .h-steps { padding: 4vw var(--pad) 5vw; }
  .h-step { padding-block: 1.6vw 3vw; }
  .h-intro-top { padding-top: 10vh; }
  .h-plus { width: 8vw; height: 8vw; margin: -4vw 0 0 -4vw; }
  .h-strip { bottom: 1.667vw; }
  .h-strip-track { gap: 0.833vw; }
  .h-strip-item { width: 12vw; }
  .h-title { padding-top: 1vw; }
  .h-journal .h-title { padding-top: 0; }
  .h-journal .h-display { margin-top: calc(1.1vw - 0.07em); }
  .h-work-intro .h-title { padding-top: 4.5vw; }
  .h-slider { padding: 0 0.417vw 0.417vw; }
  .h-slider-box { width: 24vw; }
  .h-slides { --strip: 3vw; gap: 0.417vw; }
  .h-slide.is-active { flex-basis: calc(100% - (var(--n) - 1) * (var(--strip) + 0.417vw)); }
  .h-slide-bg { width: calc(100cqw - (var(--n) - 1) * (var(--strip) + 0.417vw)); }
  .h-slide-credits { bottom: 2.083vw; }
  .corner { width: 1.528vw; height: 1.528vw; }
  .h-journal-label { margin-top: 5vw; }
  .h-end .h-contact { padding-top: 9vh; }

  /* lists, cards */
  .step { padding-block: 1.667vw; }
  .cards { gap: 3.333vw var(--gap); }
  .entry { min-height: 9vw; }
  .entry .thumbs i { width: 6.4vw; }

  /* inner pages */
  .page-hero { padding-top: 17vh; }
  .page-hero .lead { margin-top: 2.222vw; }
  .filters { margin-bottom: 3.889vw; }

  /* journal index */
  .jl { grid-template-columns: minmax(0, 1fr) 50vw minmax(0, 1fr); }
  .jl-views { bottom: 1.667vw; }
  .jl-list { gap: 0.417vw; padding-block: 8vh 12vh; }
  .jl-media img, .ar-hero img, .jl-zoom img { height: max(var(--ar-h), 66vw); }
  .jl-details { bottom: 1.944vw; }
  .jl-rail { width: 5vw; }
  .jl-thumbs { gap: 0.417vw; }
  .jl-thumb { width: 3.056vw; height: 3.611vw; } /* app.js widens the current one to 3.889vw */
  .jl-plus { width: 0.625vw; height: 0.625vw; margin-top: -0.3125vw; }
  .jl-plus::before { width: 0.625vw; }
  .jl-plus::after { height: 0.625vw; }
  .jl-plus.l { right: calc(50% + 2.5vw); }
  .jl-plus.r { left: calc(50% + 2.5vw); }
  .jl-grid { gap: 0.278vw; padding-block: 8vh 12vh; }

  /* work index */
  .work-head { padding-top: 8vw; padding-bottom: 6vw; }
  .wf-thumb { right: calc(100% + 2vw); width: 5.6vw; }

  /* project */
  .facts { margin-top: 3.889vw; }
  .cover { margin-top: 5vw; }
  .pstory-hero { padding-bottom: 2.222vw; }
  .pmeta { margin-top: 2.222vw; }
  .pstory-body { padding-block: 10vw 12vw; }
  .pfacts { margin-top: 3.889vw; gap: 2.222vw var(--gap); }
  .bigfoot { padding-top: 3.889vw; }
  .bigfoot-row { margin-top: 1.944vw; }
  .pnav-preview { width: 15vw; }

  /* journal entry, contact, footer */
  .ar-back { margin: 1.389vw 0 6vw; }
  .article-grid { margin-top: 5vw; }
  .contact-grid { gap: 6vw; }
  .site-footer { padding: 4.444vw var(--pad) 1.667vw; gap: 2.778vw var(--gap); }
  .site-footer .bigmark { margin-top: 6vw; }
  .footbar { padding-top: 1.944vw; }
}