/* Creative Sync — site styles
   Tokens first. Every colour, type and spacing decision on the site comes from here. */

/* fonts: self-hosted, latin subset, SIL Open Font License (assets/fonts/OFL-*.txt) */
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 300; font-display: swap; src: url("/assets/fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }

:root {
  /* colour */
  --bg: #000000;          /* page ground */
  --bg-2: #0d0d0d;        /* raised panels, tiles */
  --bg-3: #161616;        /* frames, cards */
  --fg: #f2f0ec;          /* primary type, off-white */
  --fg-2: #cfcac2;        /* secondary type */
  --muted: #8a867f;       /* captions, meta */
  --line: #1f1f1f;        /* rules and borders, kept faint */
  --purple: #9345f9;      /* brand purple, from the logo */
  --teal: #3bbebe;        /* brand teal, from the logo */
  --teal-soft: #7fbcc0;   /* teal for text on black (passes contrast) */
  --paper: #f2f0ec;       /* white sections */
  --ink: #000000;         /* type on white sections */
  --white: #ffffff;       /* pure white, only behind client artwork shot on white */

  /* type */
  --display: "Outfit", "Helvetica Neue", Arial, sans-serif;
  --body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  /* scale */
  --t-hero: clamp(44px, 6.6vw, 96px);
  --t-h1: clamp(36px, 4.4vw, 64px);
  --t-h2: clamp(28px, 3vw, 44px);
  --t-h3: clamp(22px, 2.2vw, 32px);
  --t-lead: clamp(17px, 1.4vw, 20px);
  --t-body: 16px;
  --t-small: 13px;
  --t-label: 11px;

  /* layout */
  --gutter: clamp(20px, 3.3vw, 48px);
  --max: 1440px;
  --gap: 20px;
  --radius: 0px;      /* square. No rounded corners anywhere on the site */
  --radius-s: 0px;
  --radius-cap: 0 999px 999px 0;   /* the S stroke end: square left, semicircle right. Buttons only */

  /* motion */
  --ease: cubic-bezier(.2, .8, .2, 1);
  --dur: .6s;
  --dur-slow: .9s;

  /* the S mark as a mask: the Work tile "window" rest state */
  --mark-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjgwIDgwIDk0MCA4MjAiPjxwYXRoIGRhdGEtbWFyaz0icHVycGxlIiBmaWxsPSIjZmZmIiBkPSJNNzQ2LjA0LDY1NC42bC0zNTUuNzUtLjI3Yy03My41NywwLTEzNy4zOC0yNi4zNy0xODkuNjEtNzguMzYtNTIuMTMtNTIuNC03OC41My0xMTYuMjQtNzguNTMtMTg5LjgxczI2LjM1LTEzNy4wMSw3OC4zNC0xODkuMjdjNTIuNDMtNTIuMTYsMTE2LjI2LTc4LjU2LDE4OS44MS03OC41Nmw1MTkuOC0uMWMzNi40MywwLDY2LjA3LDI5LjY0LDY2LjA3LDY2LjA3cy0yOS42NCw2Ni4wNy02Ni4wNyw2Ni4wN2wtNTE5LjgtLjFjLTM4LjM5LDAtNjguOSwxMi43MS05Ni4wMyw0MC4wMi0yNy4yMSwyNy4yMS0zOS44NCw1Ny42NC0zOS44NCw5NS44NnMxMi42Myw2OS4wMiwzOS43NSw5Ni4xM2MyNy4xNCwyNy4xNCw1Ny42OSwzOS43Nyw5Ni4xMywzOS43N2wzNTUuNzUtLjA1YzM2LjU1LDAsNjYuMjksMjkuNzQsNjYuMjksNjYuMjlzLTI5Ljc0LDY2LjI5LTY2LjI5LDY2LjI5Wk0zOTAuMjksMTY4LjY4Yy01OS43NSwwLTExMS42NCwyMS40Ni0xNTQuMjEsNjMuODEtNDIuMTUsNDIuMzgtNjMuNTksOTQuMTItNjMuNTksMTUzLjY3czIxLjQ2LDExMS42Nyw2My43OCwxNTQuMjFjNDIuMzgsNDIuMTgsOTQuMjQsNjMuNjEsMTU0LjAyLDYzLjYxbDM1Ny43Ny4zN2M2Ljc4LS4xLDEzLjk0LTcuMjUsMTMuOTQtMTYuMDVzLTYuNjEtMTUuMzktMTQuOTItMTUuOTNsLTEuNDcuMDJoLTM1NS4zMWMtNTEuOTYsMC05NS4wNS0xNy44Mi0xMzEuNzItNTQuNTItMzYuNjctMzYuNjctNTQuNDktNzkuNzYtNTQuNDktMTMxLjcyczE3Ljg1LTk0LjcxLDU0LjU0LTEzMS40YzM2LjYyLTM2Ljg3LDc5Ljc0LTU0LjgxLDEzMS42Ny01NC44MWw1MjEuMjcuMDJjNy45OS0uNzQsMTQuMjYtNy40NywxNC4yNi0xNS42NnMtNi40Mi0xNS4wNy0xNC41NS0xNS42OGwtMi4yNC4wNUgzOTAuMjlaIi8+IDxwYXRoIGRhdGEtbWFyaz0idGVhbCIgZmlsbD0iI2ZmZiIgZD0iTTIwNS42NCw4NTMuOGMtMzYuNDMsMC02Ni4wNy0yOS42NC02Ni4wNy02Ni4wNywwLTI4LjIyLDE3Ljc3LTUyLjMzLDQyLjctNjEuNzksMCwwLDguNzEtMy4zMiwxNC43Ny00LjA4LDYuMDctLjc2LDEwLjQtLjIyLDEwLjQtLjIyaDUyMC41NGMzOC4zOSwwLDY4LjktMTIuNzEsOTYuMDEtNDAuMDQsMjcuMjMtMjcuMTksMzkuODctNTcuNjIsMzkuODctOTUuODRzLTEyLjYzLTY5LjAyLTM5Ljc1LTk2LjEzYy0yNy4xNC0yNy4xNC01Ny42OS0zOS43Ny05Ni4xMy0zOS43NywwLDAtMzUzLjYzLDIuNS0zNjMuMTMsMC05LjUtMi41LTE0LjU1LTUuOS0xNC41NS01LjktMjQuNjMtOS43MS00MS45My0zMy43LTQxLjkzLTYxLjMsMC00MC4xNCwzNi4zMy03Mi4yNiw3Ny4zNS02NS4wNmgzNDIuMjZjNzMuNTcsMCwxMzcuMzgsMjYuMzcsMTg5LjYxLDc4LjM2bC4xLjFjNTIuMDQsNTIuMzEsNzguNDMsMTE2LjE0LDc4LjQzLDE4OS43MXMtMjYuMzUsMTM2Ljk4LTc4LjM0LDE4OS4yN2MtNTIuNCw1Mi4xMy0xMTYuMjQsNzguNTMtMTg5LjgxLDc4LjUzbC01MjIuMzMuMjVaTTIwNC40Niw3NzIuMDVjLTguMTQuNTktMTQuNTUsNy40LTE0LjU1LDE1LjY4czcuMDUsMTUuNzMsMTUuNzMsMTUuNzNsNTIyLjMzLS4yNWM1OS43OCwwLDExMS42Ny0yMS40NiwxNTQuMjEtNjMuNzgsNDIuMTUtNDIuNCw2My41OS05NC4xNCw2My41OS0xNTMuNjdzLTIxLjQzLTExMS42NC02My43NC0xNTQuMTdjLTQyLjQ3LTQyLjI1LTk0LjMxLTYzLjY2LTE1NC4wNy02My42NmwtMzUwLjIyLS42MWMtMTEuMjgtMi40OC0xOS4wMiw1LjYzLTE5LjA1LDE1LjM0LDAsOC4xNCw2LjQ0LDE0Ljk0LDE0LjY3LDE1LjQ5bDE5LjA1LDEuMzhoMzM1LjU1YzUxLjk2LDAsOTUuMDUsMTcuODIsMTMxLjcyLDU0LjUyLDM2LjY3LDM2LjY3LDU0LjQ5LDc5Ljc2LDU0LjQ5LDEzMS43MnMtMTcuODUsOTQuNzEtNTQuNTQsMTMxLjM4Yy0zNi42MiwzNi44Ny03OS43MSw1NC44NC0xMzEuNjcsNTQuODRsLTUyMy41MS4wN1oiLz48L3N2Zz4=");

  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--body); font-size: var(--t-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .75; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: var(--gutter); top: -60px; z-index: 50; background: var(--fg); color: var(--ink); padding: 10px 16px; font-size: 15px; }
.skip:focus { top: 12px; }
::selection { background: var(--purple); color: #fff; }

.wrap { max-width: var(--max); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
/* phones and small tablets: every 12-column layout stacks into one column (pages place children with inline grid-column) */
@media (max-width: 860px) { .grid12 > * { grid-column: 1 / -1 !important; } }

/* type */
h1, h2, h3, .display { font-family: var(--display); font-weight: 300; letter-spacing: -.035em; line-height: 1; margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); } h2 { font-size: var(--t-h2); letter-spacing: -.02em; } h3, .h3 { font-size: var(--t-h3); letter-spacing: -.02em; }
.hero-title { font-size: var(--t-hero); line-height: .98; }
.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); }
.muted { color: var(--muted); }
.label { font-size: var(--t-small); color: var(--muted); }
.accent { color: var(--teal-soft); }
.num { font-family: var(--display); font-weight: 300; font-size: var(--t-small); color: var(--teal-soft); font-variant-numeric: tabular-nums; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* buttons */
/* buttons are a piece of the S stroke: square where the stroke runs on, the logo's round end cap on the right.
   Hover draws the stroke out to the right; pressing pushes it a little further */
.btn { --btn-bg: var(--fg); --btn-line: transparent; position: relative; isolation: isolate; display: inline-flex; align-items: center; background: none; color: var(--ink); border: 0; padding: 13px 30px 13px 22px; font-size: 15px; font-weight: 500; cursor: pointer; }
/* the stroke is drawn behind the label, so it can extend past the button without moving anything around it */
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-bg); border: 1px solid var(--btn-line); border-radius: var(--radius-cap); transition: right .4s var(--ease); }
.btn:hover { opacity: 1; }
.btn:hover::before { right: -24px; }
.btn:active::before { right: -34px; transition-duration: .15s; }
.btn.purple { --btn-bg: var(--purple); color: #fff; }
.btn.ghost { --btn-bg: transparent; --btn-line: var(--line); color: var(--fg); }
.btn.on-paper { --btn-bg: var(--ink); color: var(--paper); }
.link { font-size: 15px; color: var(--teal-soft); }

/* site header: logo left, nav and CTA right. Sticky; slides away while reading down, returns on scroll up */
/* The header keeps one fixed height in every state. The solid bar and the smaller logo happen inside it, so the
   page never shifts when it changes (a changing height moved the scroll position and made the header flicker) */
.site-head { --logo-w: clamp(204px, 20vw, 300px); --logo-w-solid: clamp(164px, 13vw, 200px);
  position: sticky; top: 0; z-index: 60; height: calc(var(--logo-w) * .2857 + 56px); pointer-events: none; transition: transform .45s var(--ease); }
.site-head::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--logo-w-solid) * .2857 + 28px); background: var(--bg); box-shadow: 0 1px 0 var(--line); opacity: 0; transition: opacity .35s var(--ease); }
.site-head.solid::before, body.menu-open .site-head::before { opacity: 1; }
.site-head.away { transform: translateY(-100%); }
.top { position: relative; pointer-events: auto; display: flex; align-items: center; gap: 36px; padding-block: 28px; transition: padding .4s var(--ease); }
.site-head.solid .top { padding-block: 14px; }
.top .logo { display: block; margin-right: auto; }
.top .logo svg { width: var(--logo-w); height: auto; display: block; overflow: visible; transition: width .4s var(--ease); }
.site-head.solid .logo svg { width: var(--logo-w-solid); }
.primary { display: flex; gap: 32px; }
.primary a, .menu-btn { font-size: 15px; font-weight: 500; }
.primary a[aria-current="page"] { color: var(--teal-soft); }
.menu-btn { display: none; background: none; border: 0; padding: 10px 0; color: var(--fg); cursor: pointer; }
@media (max-width: 860px) { .primary, .head-cta { display: none; } .menu-btn { display: block; } }

/* phone menu: full-screen black panel under the header, large links like the footer */
.menu-panel { position: fixed; inset: 0; z-index: 55; background: var(--bg); padding: 150px max(var(--gutter), env(safe-area-inset-left, 0px)) 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; overflow-y: auto; }
.menu-panel[hidden] { display: none; }
.menu-panel .big a { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(40px, 11vw, 64px); line-height: 1.15; letter-spacing: -.03em; }
.menu-panel .big a[aria-current="page"] { color: var(--teal-soft); }
body.menu-open { overflow: hidden; }
body.menu-open .site-head { transform: none; }


/* logo motion: Sync in on first load, magnet on hover */
.logo [data-mark="purple"], .logo [data-mark="teal"] { transform-box: fill-box; transform-origin: center; transition: transform .35s var(--ease); }
.logo:hover [data-mark="purple"] { transform: translate(-40px, -30px); }
.logo:hover [data-mark="teal"] { transform: translate(40px, 30px); }
body.intro .logo [data-mark="purple"] { animation: cs-slL 1.1s var(--ease) both; }
body.intro .logo [data-mark="teal"] { animation: cs-slR 1.1s var(--ease) .12s both; }
body.intro .logo [data-wordmark] { animation: cs-rise .8s var(--ease) .7s both; }
@keyframes cs-slL { from { transform: translateX(-900px); opacity: 0; } }
@keyframes cs-slR { from { transform: translateX(900px); opacity: 0; } }
@keyframes cs-rise { from { transform: translateY(140px); opacity: 0; } }

/* sections */
.section { padding-block: clamp(96px, 12vw, 180px); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--line); padding-bottom: 28px; margin-bottom: 40px; }
.section-head.strong { border-color: var(--fg); }
@media (max-width: 600px) { .section-head.strong { flex-direction: column; align-items: flex-start; gap: 14px; } .section-head.strong > span { text-align: left !important; } }

/* services strip */
.services { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 40px; }
.service { border-top: 1px solid var(--line); padding-top: 24px; }
/* step numbers as a typographic feature: big, light, brand purple (large text, so purple on black passes contrast) */
.service .num { display: block; font-size: clamp(88px, 9.5vw, 152px); font-weight: 600; line-height: .78; letter-spacing: -.04em; color: var(--purple); margin: 18px 0 30px -.04em; }
.service h3 { margin-bottom: 10px; }
.service p { color: var(--muted); }
@media (max-width: 900px) { .services { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .services { grid-template-columns: 1fr; } }

/* stone-lay work grid: 12 columns, 40px rows */
.stone { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 40px; grid-auto-flow: row dense; gap: var(--gap); }
/* tile sizes, set per project in content/projects.json; all on a 4-column module so the grid always packs */
.tile.large { grid-column: span 8; grid-row: span 12; }
.tile.wide { grid-column: span 8; grid-row: span 6; }
.tile.tall { grid-column: span 4; grid-row: span 12; }
.tile.small { grid-column: span 4; grid-row: span 6; }
.stone.more .tile { grid-column: span 4; grid-row: span 8; }
.tile { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); display: block; }
.tile .ph { position: absolute; inset: 0; background-color: var(--ph, #1b1917); background-image: var(--img, none); background-size: cover; background-position: center; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
/* the image plain, no mask (27 October 2026); hover eases it in a touch and shades the foot for the title */
.tile .ph { transform: scale(1.001); }
.tile:hover .ph, .tile:focus-visible .ph { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 45%); opacity: 0; transition: opacity .4s var(--ease); }
.tile:hover::after, .tile:focus-visible::after { opacity: 1; }
@media (hover: none) { .tile::after { opacity: 1; } }
.tile .t { position: absolute; left: 22px; bottom: 22px; font-size: 15px; color: var(--fg); z-index: 2; opacity: 0; transform: translateY(8px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.tile .s { position: absolute; left: 22px; bottom: 44px; font-size: var(--t-small); color: var(--fg-2); z-index: 2; opacity: 0; transition: opacity .4s var(--ease) .05s; }
.tile:hover .t, .tile:focus-visible .t, .tile:hover .s, .tile:focus-visible .s { opacity: 1; transform: none; }
@media (hover: none) { .tile .t, .tile .s { opacity: 1; transform: none; } }
.tile:hover { opacity: 1; }
div.tile { cursor: default; }
@media (max-width: 760px) { .stone { grid-auto-rows: 32px; } .stone .tile { grid-column: 1 / -1 !important; grid-row: auto / span 8 !important; } }

/* contrast band: full brand teal, black type, the loudest moment before the footer */
.band { background: var(--teal); color: var(--ink); text-align: left; padding-block: clamp(110px, 13vw, 180px); }
.band .display { font-size: clamp(32px, 4.5vw, 64px); line-height: 1.08; letter-spacing: -.03em; max-width: 18ch; }
.band .display span { color: rgba(0,0,0,.55); }
.band .display a { font-weight: 500; }

/* footer */
.foot { margin: 0 var(--gutter); border-top: 1px solid var(--line); padding: clamp(48px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); display: grid; grid-template-columns: 1.1fr .8fr 1.3fr; column-gap: 48px; row-gap: 40px; }
.foot .big a { display: block; font-family: var(--display); font-weight: 300; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.35; letter-spacing: -.02em; }
.foot .mini { font-size: 15px; color: var(--fg-2); line-height: 1.8; }
.foot .mini a { display: block; }
.foot .cols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 24px; font-size: 14px; color: var(--muted); line-height: 1.6; }
.foot .cols a, .foot .cols span { margin-bottom: 10px; }
.foot .cols a, .foot .cols span { display: block; }
.legal { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 28px var(--gutter) max(40px, env(safe-area-inset-bottom, 0px)); font-size: var(--t-small); color: #7a766f; }
.legal .abn { color: #5f5b55; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr; } }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s } .reveal.d2 { transition-delay: .2s } .reveal.d3 { transition-delay: .3s }

/* custom cursor: dot and ring, difference blend, desktop only */
#cs-cursor, #cs-ring { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; border-radius: 50%; transform: translate(-50%, -50%); mix-blend-mode: difference; display: none; }
#cs-cursor { width: 5px; height: 5px; background: #fff; }
#cs-ring { width: 30px; height: 30px; border: 1px solid rgba(255,255,255,.7); transition: width .25s, height .25s, opacity .25s; }
#cs-ring.big { width: 64px; height: 64px; }
@media (hover: hover) and (pointer: fine) { body.cursor { cursor: none; } body.cursor a, body.cursor button { cursor: none; } #cs-cursor, #cs-ring { display: block; } }

/* browser frame and phone frame for site previews */
.browser { background: var(--bg-3); border: 1px solid var(--line); border-radius: 0; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.browser .bar { height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid var(--line); background: #1b1b1b; }
.browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #333; }
.browser .bar i:nth-child(1) { background: #ff5f57 } .browser .bar i:nth-child(2) { background: #febc2e } .browser .bar i:nth-child(3) { background: #28c840 }
.browser .bar span { margin-left: 12px; flex: 1; height: 20px; border-radius: 0; background: #0f0f0f; font-size: 12px; line-height: 20px; color: var(--muted); padding: 0 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.browser .view { position: relative; overflow: hidden; aspect-ratio: 16/10; background: #fff; }
.browser .view img, .browser .view canvas { position: absolute; left: 0; top: 0; width: 100%; height: auto; will-change: transform; }
/* static captures: the view takes the screenshot's own shape */
.browser.fit .view { aspect-ratio: auto; }
.browser.fit .view img { position: static; display: block; }
/* hero sliders: the captured slides crossfade */
.browser .view.slides img:not(:first-child) { position: absolute; inset: 0; animation: cs-slide 10s var(--ease) infinite; }
@keyframes cs-slide { 0%, 40% { opacity: 0; } 50%, 90% { opacity: 1; } 100% { opacity: 0; } }

/* case study modules */
.stream { display: grid; gap: 28px; min-width: 0; }
.mod { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--bg-2); }
.mod .cap { position: absolute; left: 16px; bottom: 14px; font-size: var(--t-small); color: var(--fg-2); text-shadow: 0 1px 8px rgba(0,0,0,.7); z-index: 2; }
.mod.wide { aspect-ratio: 21/9; } .mod.std { aspect-ratio: 16/9; } .mod.half { aspect-ratio: 4/3; }
/* images in modules: fill the frame; .contain keeps the whole piece (logos, product shots) with breathing room */
.mod > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mod.contain > img { object-fit: contain; padding: 9%; }
.mod.natural > img { height: auto; }
.mod.on-white { background: var(--white); } .mod.on-black { background: var(--bg); border: 1px solid var(--line); } .mod.on-paper { background: var(--paper); }
.mod .cap.dark { color: var(--ink); text-shadow: none; }
.swatches { display: grid; grid-template-columns: 2fr 1.4fr 1fr; aspect-ratio: 16/5; min-height: 260px; }
.swatches span { font-variant-numeric: tabular-nums; opacity: .85; }
@media (max-width: 760px) { .swatches { grid-template-columns: 1fr; aspect-ratio: auto; } .swatches > div { min-height: 150px; } }
.swatches > div { display: grid; align-content: end; gap: 2px; padding: clamp(12px, 2vw, 24px); font-size: var(--t-small); }
.swatches b { font-family: var(--display); font-weight: 400; font-size: clamp(16px, 1.6vw, 22px); }
.mods2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
@media (max-width: 760px) { .mods2 { grid-template-columns: 1fr; } }
.pin-track { height: 280vh; }
.pin-track.site { height: 320vh; }
.pin-track.site .browser { max-width: 1100px; margin: 0 auto; }
.pin-track.site .view { aspect-ratio: auto; height: min(76vh, 760px); }
.pin-track .browser { position: sticky; top: 10vh; }
@media (max-width: 860px) { .pin-track, .pin-track.site { height: auto; } .pin-track .browser { position: static; } .pin-track.site .view { height: 70vh; overflow-y: auto; } .pin-track.site .view img { position: static; } }
.index { position: sticky; top: 0; z-index: 5; display: flex; gap: 26px; padding: 16px 0; background: linear-gradient(var(--bg) 70%, transparent); font-size: 15px; overflow-x: auto; }
.index a { color: var(--muted); white-space: nowrap; } .index a.on { color: var(--teal-soft); }
.stream [id] { scroll-margin-top: 90px; }   /* section links land below the sticky index bar */

/* book flip */
.flip { height: 320vh; }
.flip .stage { position: sticky; top: 5vh; height: 90vh; display: grid; place-items: center; perspective: 2600px; }
.book3d { position: relative; width: min(42vw, calc(80vh * 3 / 4.2), 600px); margin-right: 0; aspect-ratio: 3/4.2; transform-style: preserve-3d; transform: translateX(0) rotateX(8deg); transition: transform .5s var(--ease); }
.book3d.open { transform: translateX(50%) rotateX(8deg); } .book3d.done { transform: translateX(100%) rotateX(8deg); }
.leaf { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; will-change: transform; }
.face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 0 3px 3px 0; overflow: hidden; background: #f2efe8; box-shadow: inset 6px 0 14px rgba(0,0,0,.08); }
.face img { width: 100%; height: 100%; object-fit: cover; }
.face.back { transform: rotateY(180deg); border-radius: 3px 0 0 3px; box-shadow: inset -6px 0 14px rgba(0,0,0,.08); }
.bookbase { position: absolute; inset: 0; background: #e8e4da; border-radius: 0 3px 3px 0; box-shadow: 12px 14px 40px rgba(0,0,0,.6); transform: translateZ(-2px); transition: opacity .3s var(--ease); }
/* once the back cover has turned there are no pages left on the right: hide the block so no white box is left */
.book3d.done .bookbase { opacity: 0; }
.flip .prog { position: absolute; bottom: 2vh; right: 0; font-size: var(--t-small); color: var(--muted); }
/* a flip book on the client's own colour: Phoenix orange panel, the book sitting on it with a faint shadow */
.flip.on-orange .stage { background: #f68f1e; }
.flip.on-orange .stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: min(84vw, calc(160vh * 3 / 4.2), 1200px); height: 14%; transform: translate(-50%, calc(40vh - 30%)); background: radial-gradient(closest-side, rgba(0,0,0,.16), transparent); pointer-events: none; }
.flip.on-orange .bookbase { box-shadow: 4px 8px 24px rgba(0,0,0,.14); }
.flip.on-orange .prog { color: rgba(0,0,0,.6); right: 20px; }
@media (max-width: 860px) { .flip { height: 240vh; } .book3d { width: 44vw; } }

/* shelf of publications */
.shelf { aspect-ratio: 16/7; display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 0 20px 34px; perspective: 1400px; background: radial-gradient(ellipse 70% 60% at 50% 110%, rgba(59,190,190,.14), transparent 70%), var(--bg-2); }
.shelf .book { width: 10%; aspect-ratio: 3/4.2; border-radius: 0 3px 3px 0; transform: rotateY(-18deg); transform-origin: left; box-shadow: 12px 18px 40px rgba(0,0,0,.6), inset 6px 0 10px rgba(0,0,0,.35); display: grid; align-content: end; padding: 8px; font: 500 clamp(9px, 1.2vw, 15px)/1 var(--display); color: #fff; transition: transform .5s var(--ease); background: var(--ph, #333); }
.shelf .book:hover { transform: rotateY(-6deg) translateY(-12px) scale(1.06); }
.shelf .book.cover { width: 14%; padding: 0; overflow: hidden; background: var(--bg-3); }
.shelf .book.cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 760px) { .shelf { aspect-ratio: 4/3; gap: 6px; } .shelf .book.cover { width: 15%; } }

/* forms */
.field { display: grid; gap: 8px; }
.field label { font-size: var(--t-small); color: var(--muted); }
.field input, .field select, .field textarea { background: transparent; border: 0; border-bottom: 1px solid var(--line); color: var(--fg); padding: 12px 0; font: inherit; border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal); }
.field select option { background: var(--bg-3); }
.enquiry { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 34px 24px; }
.enquiry .full { grid-column: 1 / -1; }
.needs { display: flex; flex-wrap: wrap; gap: 12px 26px; padding-top: 6px; }
.needs label { position: relative; cursor: pointer; }
.needs input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.needs span { display: inline-block; padding: 4px 0; font-size: 17px; color: var(--muted); border-bottom: 1px solid transparent; transition: color .35s var(--ease), border-color .35s var(--ease); }
.needs label:hover span { color: var(--fg-2); }
.needs input:checked + span { color: var(--fg); border-bottom-color: var(--teal); }
.needs input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 4px; }
@media (max-width: 600px) { .enquiry { grid-template-columns: 1fr; } }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.copy { background: none; border: 0; padding: 0 0 0 10px; color: var(--muted); font-size: var(--t-small); cursor: pointer; }
.copy:hover { color: var(--fg); }
.contact-list dt { font-size: var(--t-small); color: var(--muted); margin-top: 22px; }
.contact-list dd { margin: 4px 0 0; }

/* accordion */
.acc { border-top: 1px solid var(--line); }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 20px; padding: 26px 0; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary h2, .acc summary h3 { font-size: var(--t-h3); }
.acc summary .plus { font-family: var(--display); font-weight: 300; font-size: 28px; color: var(--muted); transition: transform .3s var(--ease); }
.acc details[open] .plus { transform: rotate(45deg); }
.acc .body { padding: 0 0 30px; color: var(--fg-2); max-width: 70ch; }
.acc .tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.acc .tags { color: var(--muted); font-size: 15px; }
.acc .tags span::after { content: "  ·  "; } .acc .tags span:last-child::after { content: ""; }

/* hero wall: Home and the coming soon page */
.hero { position: relative; height: 100svh; min-height: 640px; }
#wall { position: fixed; inset: 0; z-index: 0; cursor: grab; touch-action: pan-y; }
#wall.drag { cursor: grabbing; }
.wall-static { position: fixed; inset: -4vh -4vw; z-index: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); grid-auto-rows: 180px; grid-auto-flow: dense; gap: var(--gap); opacity: .55; overflow: hidden; }
.wall-tile { display: grid; place-items: center; font-family: var(--display); font-size: 18px; text-align: center; padding: 12px; overflow: hidden; }
.wall-tile.wide { grid-column: span 2; } .wall-tile.tall { grid-row: span 2; }
.wall-tile img { width: 100%; height: 100%; object-fit: cover; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse 80% 72% at 50% 50%, transparent 48%, rgba(0,0,0,.85) 100%); }
/* keep the logo and top button on near-black, never over busy tiles (brief §4 clear space) */
.hero::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 200px; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--bg) 0%, rgba(0,0,0,.82) 45%, transparent 100%); }
#tagline { position: fixed; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; text-align: center; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)); }
#tagbox { position: relative; padding: 40px 48px; max-width: 1100px; }
#tagbox::before { content: ""; position: absolute; inset: -30% -25%; z-index: -1; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(0,0,0,.9), rgba(0,0,0,.55) 45%, transparent 75%); }
#tagbox h1 { font-size: var(--t-hero); font-weight: 600; letter-spacing: -.03em; line-height: 1.02; }
/* "In sync." on a purple highlight: the one purple accent on the page, so the button below is off-white */
#tagbox h1 { isolation: isolate; }
/* the box sits behind every line of the headline, so it never covers a descender from the line above */
#tagbox h1 .hl { position: relative; white-space: nowrap; color: #fff; margin: 0 .12em; }
/* hugs the letters with even padding: top sits just above the capitals, bottom just below the tail of the y */
#tagbox h1 .hl::before { content: ""; position: absolute; z-index: -1; inset: .2em -.12em -.04em; background: var(--purple); }
#tagbox p { margin: 26px auto 0; max-width: 44ch; color: var(--muted); font-size: var(--t-lead); text-wrap: balance; }
#tagbox .btn { pointer-events: auto; margin-top: 30px; }
#tip { position: fixed; pointer-events: none; transform: translate(14px, 14px); opacity: 0; transition: opacity .15s; background: rgba(0,0,0,.75); border: 1px solid var(--line); padding: 8px 10px; max-width: 240px; z-index: 4; }
#tip.on { opacity: 1; }
#tip b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.1; }
#tip span { font-size: var(--t-small); color: var(--muted); }
.hero-hint { position: fixed; left: max(var(--gutter), env(safe-area-inset-left, 0px)); bottom: max(28px, env(safe-area-inset-bottom, 0px)); z-index: 3; font-size: var(--t-small); color: var(--muted); pointer-events: none; }

/* case study head, brief and pair */
.cs-head { margin-top: 40px; padding-bottom: 28px; border-bottom: 1px solid var(--fg); row-gap: 20px; }
.cs-head h1 { grid-column: 1 / 10; line-height: 1.02; }
.cs-meta { grid-column: 10 / 13; align-self: end; font-size: 15px; line-height: 1.7; }
.cs-head + .mod { margin-top: 40px; }
.cs-brief { padding: clamp(72px, 9vw, 120px) 0 60px; row-gap: 16px; }
.cs-brief .label { grid-column: 1 / 5; padding-top: 12px; }
.cs-brief-body { grid-column: 5 / 13; }
.cs-statement { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; line-height: 1.3; letter-spacing: -.015em; margin-bottom: 24px; }
.cs-brief .lead { max-width: 760px; }
.cs-pair { padding-bottom: 80px; row-gap: 32px; }
.cs-pair > div { grid-column: span 4; border-top: 1px solid var(--line); padding-top: 20px; }
.cs-pair > div:first-child { grid-column: 5 / 9; }
.cs-pair .label { margin-bottom: 14px; font-family: var(--display); font-weight: 600; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -0.01em; } .cs-pair .label.out { color: var(--purple); } .cs-pair .label.in { color: var(--teal-soft); }
.cs-pair p { font-size: var(--t-lead); line-height: 1.5; color: var(--fg-2); }
@media (max-width: 860px) { .cs-head h1, .cs-meta, .cs-brief .label, .cs-brief-body, .cs-pair > div, .cs-pair > div:first-child { grid-column: 1 / -1; } }

/* the mark in a panel (About) */
.mark-panel { width: 52%; } .mark-panel svg { width: 100%; height: auto; display: block; }

/* 404: the strokes drifted apart */
.lost { min-height: 70vh; display: grid; align-content: center; justify-items: start; gap: 24px; padding-block: 60px 140px; }
.lost-mark svg { width: clamp(140px, 18vw, 220px); height: auto; overflow: visible; }
.lost-mark { padding: 40px 0 20px 50px; }
.lost-mark [data-mark="purple"] { transform: translate(-160px, -110px); }
.lost-mark [data-mark="teal"] { transform: translate(160px, 110px); }
.lost-links { display: flex; gap: 12px; flex-wrap: wrap; }

.legal-page { padding-bottom: clamp(96px, 12vw, 180px); max-width: 900px; margin-left: 0; }
/* long-form legal text: readable measure, quiet hierarchy */
.prose { max-width: 68ch; color: var(--fg-2); }
.prose h2 { font-size: var(--t-h3); color: var(--fg); margin: 56px 0 16px; }
.prose h3 { font-size: 20px; color: var(--fg); margin: 32px 0 10px; }
.prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--teal-soft); }
.prose .updated { font-size: var(--t-small); color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  body.intro .logo * { animation: none !important; }
  .logo:hover [data-mark] { transform: none; }
  .tile .ph, .browser .view img { transition: none; }
  .browser .view.slides img:not(:first-child) { animation: none; opacity: 0; }
  .site-head, .site-head::before, .top, .top .logo svg, .btn::before { transition: none; }
  .btn:hover::before, .btn:active::before { right: 0; }
}

/* case study: empty hero slot, held until the hero image is chosen */
.mod.hero-blank { background: var(--bg-2); border: 1px solid var(--line); }

/* product cut-outs straight on the page ground, never larger than the source */
.mods2.cutouts { align-items: end; padding: clamp(24px, 4vw, 56px) 0; }
.cutout { display: grid; place-items: end center; }
.cutout img { width: auto; height: auto; max-width: 100%; max-height: min(62vh, 520px); filter: drop-shadow(0 30px 40px rgba(0,0,0,.55)); }
.cutouts .cap-line { grid-column: 1 / -1; text-align: center; font-size: var(--t-small); color: var(--muted); margin-top: 8px; }

/* sales deck on a laptop: slides play in turn on the screen */
.laptop { margin: clamp(24px, 4vw, 56px) auto; width: min(100%, 1100px); }
.laptop .lid { background: linear-gradient(160deg, #e4e5e7, #c3c5c9 45%, #9fa2a7); border-radius: 18px 18px 0 0; padding: 1.1% 1.1% 1.3%; box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.7); }
.laptop .screen { position: relative; aspect-ratio: 16/9; overflow: hidden; background: #000; border: clamp(6px, 1.3vw, 16px) solid #0b0b0b; border-radius: 10px 10px 0 0; box-sizing: content-box; }
/* the deck opens on its cover and only starts playing once the laptop scrolls into view */
.laptop .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: deck 16s infinite paused; }
.laptop .screen img:first-child { opacity: 1; animation-name: deck-first; }
.laptop.in .screen img { animation-play-state: running; }
.laptop .screen img:nth-child(2) { animation-delay: 4s; }
.laptop .screen img:nth-child(3) { animation-delay: 8s; } .laptop .screen img:nth-child(4) { animation-delay: 12s; }
@keyframes deck { 0% { opacity: 0 } 4% { opacity: 1 } 25% { opacity: 1 } 29% { opacity: 0 } 100% { opacity: 0 } }
@keyframes deck-first { 0% { opacity: 1 } 25% { opacity: 1 } 29% { opacity: 0 } 96% { opacity: 0 } 100% { opacity: 1 } }
.laptop .deck-base { position: relative; height: clamp(10px, 1.6vw, 20px); margin: 0 -7%; background: linear-gradient(#eceef0, #c4c6ca 55%, #8e9196); border-radius: 0 0 14px 14px / 0 0 100% 100%; box-shadow: 0 18px 30px rgba(0,0,0,.5); }
.laptop .deck-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 45%; transform: translateX(-50%); background: linear-gradient(#a7aaae, #c9cbce); border-radius: 0 0 10px 10px; }
.laptop figcaption { font-size: var(--t-small); margin-top: 22px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .laptop .screen img { animation: none; } .laptop .screen img:first-child { opacity: 1; } }

/* brand family: product logos on black, one even grid */
.logo-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logo-grid > div { background: var(--bg); aspect-ratio: 2.36; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 9% 13%; }
.logo-grid img { display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 860px) { .logo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mod.tagline { padding: clamp(40px, 7vw, 110px) 0 clamp(64px, 8vw, 120px); display: flex; justify-content: center; }
.mod.tagline > img { width: min(46%, 620px); height: auto; object-fit: contain; }
/* print advert: the page itself, at a real reading size */
.mod.print-ad { background: var(--bg-2); padding: clamp(32px, 6vw, 80px) 0; display: grid; place-items: center; }
.mod.print-ad > img { width: auto; height: min(84vh, 800px); max-width: 86%; object-fit: contain; box-shadow: 0 30px 70px rgba(0,0,0,.7); }

/* case study motion (28 October 2026, Joseph: more movement down the page). Images unveil from a smaller frame and
   settle, 16:9 and 21:9 images drift a little slower than the page, pairs open from their own side, logos and swatches
   arrive one by one, the laptop lid opens, captions follow. All of it off under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .cs-head h1 .w { display: inline-block; animation: wrise .9s var(--ease) both; animation-delay: calc(var(--i) * 55ms + .15s); }
  @keyframes wrise { from { opacity: 0; transform: translateY(.45em); } }

  .stream .mod.reveal { opacity: 1; transform: none; clip-path: inset(9% 7%); transition: clip-path 1.1s var(--ease); }
  .stream .mod.reveal.in { clip-path: inset(0); }
  .stream .mod.reveal > img { scale: 1.14; transition: scale 1.4s var(--ease); }
  .stream .mod.reveal.in > img { scale: 1; }
  .stream .mod .cap { opacity: 0; transition: opacity .6s var(--ease) .7s; } .stream .mod.in .cap { opacity: 1; }
  .stream .mods2 > .mod.reveal:nth-child(odd) { clip-path: inset(0 45% 0 0); }
  .stream .mods2 > .mod.reveal:nth-child(even) { clip-path: inset(0 0 0 45%); }
  .stream .mods2 > .mod.reveal.in { clip-path: inset(0); }
  .stream .cutout.reveal { transform: translateX(-70px); } .stream .cutout.reveal.d1 { transform: translateX(70px); } .stream .cutout.reveal.in { transform: none; }

  .stream .mod.swatches.reveal, .stream .logo-grid.reveal { opacity: 1; transform: none; clip-path: none; }
  .stream .swatches.reveal > div { opacity: 0; transform: translateY(50px); transition: opacity .7s var(--ease), transform .9s var(--ease); }
  .stream .logo-grid.reveal > div { opacity: 0; transform: scale(.86); transition: opacity .6s var(--ease), transform .8s var(--ease); }
  .stream .swatches.in > div, .stream .logo-grid.in > div { opacity: 1; transform: none; }
  .stream .swatches > div:nth-child(2) { transition-delay: .12s; } .stream .swatches > div:nth-child(3) { transition-delay: .24s; }
  .stream .logo-grid > div:nth-child(5n+2) { transition-delay: .06s; } .stream .logo-grid > div:nth-child(5n+3) { transition-delay: .12s; }
  .stream .logo-grid > div:nth-child(5n+4) { transition-delay: .18s; } .stream .logo-grid > div:nth-child(5n) { transition-delay: .24s; }

  /* the laptop opens: the lid starts folded down onto the base and swings up on its hinge, seen from slightly above */
  .stream .laptop.reveal { opacity: 1; transform: none; perspective: 2200px; perspective-origin: 50% -10%; }
  .stream .laptop.reveal .lid { transform-style: preserve-3d; transform-origin: 50% 100%; transform: rotateX(-88deg); transition: transform 1.5s var(--ease) .15s; }
  .stream .laptop.reveal .screen { backface-visibility: hidden; }
  .stream .laptop.reveal.in .lid { transform: none; }

  .stream .mod.drift > img { height: 116%; translate: 0 calc(-6.9% + var(--p, 0) * 6.9%); }
}