/* Retype — homepage. Tokens live in css/tokens/*.css (source of truth). */

/* Window inset for the menu: the hole in the white sheet that shows the page behind */
:root { --win-t: 14vh; --win-r: 37vw; --win-b: 6vh; --win-l: 37vw; --menu-gap: clamp(28px,3.4vw,56px); }

html { scroll-behavior: smooth; scrollbar-width: none; -webkit-text-size-adjust: 100%; }
html::-webkit-scrollbar { display: none; }
html.locked { overflow: hidden; }
body {
  margin: 0; background: var(--surface-page); color: var(--text-primary);
  font-family: var(--f-body); letter-spacing: var(--tracking-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--link-hover); }
button { font: inherit; color: inherit; }
img { max-width: 100%; }
em { font-style: italic; }
.plate-blue { color: var(--rt-blue-plate); }
.muted { color: var(--text-muted); }

.ico { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }

/* ---------- Primitives (ported from the Retype design system) ---------- */
.eyebrow { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta); }
.eyebrow.sm { font: var(--type-label-sm); }
.eyebrow.tone-accent { color: var(--accent-on-dark); }
.eyebrow.tone-light { color: var(--text-meta-light); }
.eyebrow-plain { display: block; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.body-lg { margin: 0; font: var(--type-body-lg); text-wrap: pretty; }
.lede { font: var(--type-lede); }

.glass-pill {
  position: relative; display: inline-flex; align-items: center; gap: 10px; box-sizing: border-box;
  height: var(--h-pill); padding: 0 20px;
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  background: var(--glass-fill); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  color: var(--rt-white); font: var(--type-pill); letter-spacing: var(--tracking-pill);
  cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: background var(--dur-hover) var(--ease-out);
}
.glass-pill:hover { background: rgba(255,255,255,.2); color: var(--rt-white); }
.glass-pill.light { border: 0; background: var(--glass-fill-ink); color: var(--rt-ink); }
.glass-pill.light:hover { background: rgba(17,17,19,.16); color: var(--rt-ink); }
.glass-pill.sm { height: var(--h-pill-sm); padding: 0 15px; border: 0; font: var(--type-pill-sm); letter-spacing: 0; }

.contact-pill {
  display: inline-flex; align-items: center; gap: .7em; padding: .55rem 1.05rem;
  border: 1px solid var(--glass-border); border-radius: var(--radius-pill);
  background: var(--glass-fill); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  color: var(--rt-white); font: var(--type-button); letter-spacing: var(--tracking-button); white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-out);
}
.contact-pill:hover { background: rgba(255,255,255,.2); color: var(--rt-white); }
.contact-pill .reveal {
  display: block; overflow: hidden; max-width: 0; opacity: 0; margin-left: -.7em;
  transition: max-width .42s var(--ease-out), opacity .3s var(--ease-out), margin-left .42s var(--ease-out);
}
.contact-pill:hover .reveal, .contact-pill:focus-visible .reveal { max-width: 7.5em; opacity: 1; margin-left: 0; }

.logo { display: block; }
.logo img { display: block; height: 30px; width: auto; }
/* Blinking cursor: the wordmark's end block (x 1416-1585 of 1590) is clipped
   off and back on like a text cursor, so it works on any background. */
.wordmark { display: block; }
.wordmark img { animation: rt-blink-crop 1.06s steps(1, end) infinite; }
@keyframes rt-blink-crop { 0%, 50% { clip-path: inset(0 0 0 0); } 50.01%, 100% { clip-path: inset(0 12% 0 0); } }

.close-btn {
  display: inline-flex; align-items: center; gap: 8px; height: var(--h-pill); padding: 0 18px;
  border: 0; border-radius: var(--radius-pill); background: var(--glass-fill-strong);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  color: var(--rt-white); font: var(--type-pill); cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out);
}
.close-btn:hover { background: rgba(255,255,255,.24); }
/* Flat pills (header Menu / contact / Close buttons), original colours: translucent white on dark, ink tint on the white menu */
.glass-pill:not(.light):not(.sm), .contact-pill, .close-btn {
  height: 40px; padding: 0 22px; box-sizing: border-box; color: #fff;
  border: 1px solid var(--glass-border); background: var(--glass-fill); box-shadow: none;
  backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass);
  font: 400 15px/1 var(--f-ui); letter-spacing: .04em;
}
.close-btn { border: 0; background: var(--glass-fill-strong); }
.glass-pill:not(.light):not(.sm):hover, .contact-pill:hover { color: #fff; background: rgba(255,255,255,.2); }
.close-btn:hover { color: #fff; background: rgba(255,255,255,.24); }
.glass-pill.light[data-close-menu] { height: 40px; padding: 0 22px; font: 400 15px/1 var(--f-ui); letter-spacing: .04em; }
.contact-pill { gap: 14px; padding: 0 20px; }

.mask { overflow: hidden; padding: .16em 0 .24em; margin: -.16em 0 -.18em; }
.section-title { margin: 0; font: var(--type-section); letter-spacing: var(--tracking-display); }
.reveal-up { transform: translate3d(0,110%,0); transition: transform var(--dur-mask) var(--ease-reveal); }
.reveal-up.shown { transform: none; }
.mega { margin: 0; font: var(--type-mega); letter-spacing: var(--tracking-display); }
.mega .line { display: block; }
.mega .indent { padding-left: clamp(24px,14vw,280px); }




/* ---------- Header ---------- */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px; min-height: 72px; box-sizing: border-box;
  padding: 22px var(--gutter); transition: opacity .4s var(--ease-out);
}
html.intro-on .header { opacity: 0; pointer-events: none; } /* the logo and menu come in once the intro is over */
html.menu-open .header, html.studio-open .header { opacity: 0; max-width: calc(100% - 2 * var(--gutter)); pointer-events: none; }

/* ---------- Intro: the bag and the line; the receipt flies out of the bag onto the homepage receipt (intro.js) ---------- */
html.intro-on { overflow: hidden; }
html.no-intro .intro { display: none; }
.intro { position: fixed; inset: 0; z-index: 500; background: #080808; transition: background-color .6s var(--ease-out); }
/* Hand-over: the dark background and the 3D canvas melt away around the homepage receipt, which is printing */
html.intro-leaving .intro { background-color: rgba(8,8,8,0); pointer-events: none; }
html.intro-leaving .intro-gl, html.intro-leaving .intro-skip, html.intro-leaving .intro-bits { opacity: 0; }
.intro-gl { position: absolute; inset: 0; transition: opacity .6s var(--ease-out); }
.intro-gl canvas { display: block; width: 100%; height: 100%; }
.intro-bits { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; transition: opacity .6s var(--ease-out); } /* the line's letters, broken into bits */
.intro-line { /* the line beside the floating bag (intro.js fades it) */
  position: absolute; left: var(--gutter); top: 50%; transform: translateY(-50%); max-width: 44vw; margin: 0;
  font: 500 clamp(30px, 4.4vw, 68px)/1.08 var(--f-display, 'Jost', sans-serif); letter-spacing: .06em; text-transform: uppercase;
  color: #f4f2ec; opacity: 0; pointer-events: none; }
@media (max-width: 759px) { .intro-line { top: 96px; transform: none; max-width: none; right: var(--gutter); font-size: clamp(26px, 8vw, 40px); } }
.intro-skip { position: absolute; right: var(--gutter); bottom: 28px; transition: opacity .3s var(--ease-out); }
.intro-skip:focus-visible { outline: 2px solid var(--rt-blue-light); outline-offset: 3px; }

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 150; pointer-events: none; visibility: hidden; transition: visibility 0s linear .95s; }
.menu.open { pointer-events: auto; visibility: visible; transition: visibility 0s linear 0s; }
.menu-window {
  position: absolute; top: -40px; right: -40px; bottom: -40px; left: -40px;
  border-radius: var(--radius-window); box-shadow: 0 0 0 200vmax #fff; cursor: pointer;
  transition: all .95s var(--ease-wipe);
}
.menu.open .menu-window { top: var(--win-t); right: var(--win-r); bottom: var(--win-b); left: var(--win-l); }

.menu-content {
  position: absolute; inset: 0; pointer-events: none; color: var(--rt-ink);
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.menu.open .menu-content { opacity: 1; transform: none; transition: opacity .5s var(--ease-out) .5s, transform .7s var(--ease-out) .5s; }
.menu-top {
  position: absolute; left: 0; right: 0; top: 0; min-height: 72px; box-sizing: border-box;
  display: flex; align-items: center; gap: 10px; padding: 22px var(--gutter); pointer-events: auto;
}
/* Selected work + Services as pills next to the logo */
.menu-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-right: auto; margin-left: 14px; }
.menu-pills .glass-pill { height: 40px; padding: 0 20px; font: 400 15px/1 var(--f-ui); letter-spacing: .04em; }
.menu-pills .glass-pill:focus-visible { outline: 2px solid var(--rt-blue); outline-offset: 3px; }
.blue-pills {
  display: flex; align-items: center; gap: 2px; padding: 0 4px; height: 40px;
  border-radius: var(--radius-pill); background: var(--rt-blue-plate);
}
.blue-pills a {
  display: flex; align-items: center; justify-content: center; width: 32px; height: var(--h-chip);
  border-radius: var(--radius-pill); color: var(--rt-white); transition: background var(--dur-hover) var(--ease-out);
}
.blue-pills a.wide { width: auto; min-width: 32px; padding: 0 8px; }
.blue-pills a:hover { background: rgba(255,255,255,.18); color: var(--rt-white); }
/* Three columns on one grid: navigation | window | journal. All three share the window's top
   and bottom edges; the side columns run from the page margin to a fixed gap off the window. */
.menu-left, .menu-right {
  position: absolute; top: var(--win-t); bottom: var(--win-b); display: flex; flex-direction: column; pointer-events: auto;
}
.menu-left { left: var(--gutter); width: calc(var(--win-l) - var(--gutter) - var(--menu-gap)); }
.menu-right { right: var(--gutter); width: calc(var(--win-r) - var(--gutter) - var(--menu-gap)); gap: 10px; overflow: hidden; }
/* Case studies sit level with the top of the window; Get in touch sits on its bottom edge */
.menu-left nav { order: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-top: auto; margin-bottom: -.2em; }
.menu-link {
  font: 500 clamp(28px,2.5vw,40px)/1.1 var(--f-display); letter-spacing: .06em;
  color: var(--rt-ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: color .2s var(--ease-out), background-size .35s var(--ease-out);
}
.menu-link:hover, .menu-link:focus-visible { color: var(--rt-blue); background-size: 100% 2px; }
.menu-link:focus-visible, .case-link:focus-visible, .jcard.compact:focus-visible { outline: 2px solid var(--rt-blue); outline-offset: 4px; border-radius: 3px; }
.menu-label { display: block; font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: #55554f; }
.cases { order: 1; display: flex; flex-direction: column; gap: 10px; }
.case-list { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(17,17,19,.14); }
.case-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; box-sizing: border-box;
  padding: 8px 2px; border-top: 1px solid rgba(17,17,19,.14);
  font: 500 clamp(15px,1.15vw,18px)/1.15 var(--f-display); letter-spacing: .08em; color: var(--rt-ink); text-decoration: none;
  transition: color .2s var(--ease-out);
}
.case-arrow { font-family: var(--f-ui); font-size: .8em; opacity: 0; transform: translateX(-8px); transition: opacity .25s var(--ease-out), transform .3s var(--ease-out); }
.case-link:hover, .case-link:focus-visible { color: var(--rt-blue); }
.case-link:hover .case-arrow, .case-link:focus-visible .case-arrow { opacity: 1; transform: none; }
.jcard.compact {
  display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: var(--radius-card);
  background: var(--surface-card-light); color: var(--rt-ink); transition: background var(--dur-hover) var(--ease-out);
}
.jcard.compact:hover { background: #e9e9e6; color: var(--rt-ink); }
.jcard.compact .meta { display: flex; justify-content: space-between; gap: 12px; font: var(--type-label-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-light); }
.jcard.compact .cat { color: var(--accent); }
.jcard.compact .title { font: var(--type-card-title); letter-spacing: var(--tracking-title); text-wrap: pretty; }
.jcard.compact .read { font: var(--type-label-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-light); }
.menu-right .menu-label { margin-bottom: 4px; }
.jcard.compact .title { font-size: 17px; }
.tagline { order: 9; margin-top: auto; font: var(--type-tagline); letter-spacing: -.01em; text-wrap: balance; }


/* ---------- Studio page ---------- */
.studio {
  position: fixed; inset: 0; z-index: 200; overflow-y: auto; overscroll-behavior: contain;
  background: var(--rt-black); color: var(--text-primary);
  opacity: 0; transform: translateY(40px); visibility: hidden;
  transition: opacity .6s var(--ease-out) 0s, transform .8s var(--ease-out) 0s, visibility 0s linear .6s;
}
.studio.open { opacity: 1; transform: none; visibility: visible; transition: opacity .6s var(--ease-out) .35s, transform .8s var(--ease-out) .35s, visibility 0s linear 0s; }
.studio-close { position: fixed; top: 22px; right: var(--gutter); z-index: 2; }
.studio-logo { position: fixed; top: 27px; left: var(--gutter); z-index: 2; }
.studio-head { padding: var(--section-pad-top) var(--gutter) clamp(56px,7vw,104px); }
.studio-lede { margin: clamp(40px,5vw,72px) 0 0 auto; max-width: 520px; color: var(--text-muted); text-wrap: pretty; }
.studio-img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.studio-rows { padding: clamp(48px,6vw,96px) var(--gutter) var(--section-pad-top); display: flex; flex-direction: column; gap: var(--stack-section); }
.detail-row { display: flex; flex-wrap: wrap; gap: 16px clamp(32px,6vw,120px); }
.detail-row .label { flex: 0 0 var(--label-col); font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-on-dark); }
.detail-row .body { flex: 1 1 420px; max-width: 900px; }
.numbered { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); column-gap: 40px; }
.numbered > div { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--border-hairline); font: 400 16px/1.4 var(--f-body); }
.numbered span { font: var(--type-label-xs); color: var(--text-meta); }
.page-foot { display: flex; justify-content: space-between; gap: 16px; padding: 28px var(--gutter); color: var(--text-meta); font: var(--type-body-sm); border-top: 1px solid var(--border-hairline); }
.page-foot a { color: var(--text-primary); text-decoration: none; }

/* ---------- 01 Hero ---------- */
.hero { position: relative; background: #080808; }
.hero-panel { position: sticky; top: 0; height: 100vh; min-height: 560px; overflow: hidden; background: #080808; }
@media (max-width: 760px) {
  .contact-pill .ico-phone { display: none; }
}

/* ---------- Hero: the receipt (main.js); the intro hands over to it ---------- */
.hs { position: relative; height: 100vh; min-height: 560px; }
.hs-pin { position: relative; height: 100%; overflow: hidden; }
.hs .hero { height: 100%; }
.hs .hero-panel { position: relative; height: 100%; min-height: 0; }

/* ---------- The receipt: the description prints on it ---------- */
.vh-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero-receipt { position: absolute; left: 50%; top: 50%; z-index: 3; width: min(310px, 76vw, 46vh); transform: translate(-50%,-50%); }
.receipt {
  --paper: #f4f2ec;
  position: relative; box-sizing: border-box; display: flex; flex-direction: column;
  padding: 26px 22px 30px; background: var(--paper); color: #141414;
  font: 400 13px/1.55 var(--f-mono); letter-spacing: .01em;
  box-shadow: 0 26px 40px -18px rgba(0,0,0,.7);
  clip-path: inset(-60px -60px 100% -60px); transition: clip-path .4s cubic-bezier(.2,.7,.3,1); /* rolled up until it prints: it feeds out (main.js) */
}
/* During the intro the receipt sits above it, hidden until the flying receipt lands on it (intro.js) */
html.intro-on .hero-receipt { z-index: 501; }
html.intro-on .receipt { transition: none; }
html.paper-out .receipt { /* after the intro the paper is already out at full size; only the print appears */
  clip-path: inset(-60px); transition: none;
}
.receipt::before { /* torn zigzag top edge: teeth in the panel colour */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7px;
  background: linear-gradient(135deg, #080808 50%, transparent 50%) 0 0 / 12px 7px repeat-x,
              linear-gradient(225deg, #080808 50%, transparent 50%) 0 0 / 12px 7px repeat-x;
}
.receipt::after { /* a few soft creases: it was crumpled once */
  content: ""; position: absolute; inset: 7px 0 0; pointer-events: none; mix-blend-mode: multiply;
  background:
    linear-gradient(101deg, transparent 37%, rgba(0,0,0,.03) 39.5%, rgba(255,255,255,0) 40%, transparent 45%),
    linear-gradient(78deg, transparent 57%, rgba(0,0,0,.022) 60%, transparent 64%),
    linear-gradient(172deg, transparent 27%, rgba(0,0,0,.025) 29%, transparent 33%),
    linear-gradient(-6deg, transparent 66%, rgba(0,0,0,.022) 68.5%, transparent 73%),
    linear-gradient(140deg, rgba(0,0,0,.018), transparent 30%, transparent 70%, rgba(0,0,0,.02));
}
.r-line { margin: 0; }
.r-line + .r-line { margin-top: 10px; }
.r-line.unprinted { visibility: hidden; }
/* Typed text sits over an invisible copy of the full text, so the paper never changes size */
.r-typed { display: grid; }
.r-ghost, .r-ink { grid-area: 1 / 1; }
.r-ghost { visibility: hidden; }
.r-logo img { display: block; height: 22px; width: auto; margin: 4px auto 6px; }
.r-c { text-align: center; text-transform: uppercase; letter-spacing: .08em; }
.r-small { font-size: 11px; }
.r-row { display: flex; justify-content: space-between; gap: 12px; text-transform: uppercase; font-size: 12px; letter-spacing: .05em; }
.r-rule { height: 0; border-top: 1px dashed rgba(20,20,20,.55); margin-top: 14px !important; }
.r-rule + .r-line { margin-top: 14px; }
.r-body { font-size: 15px; line-height: 1.6; }
.r-body b { font-weight: 700; }
/* Actions under the introduction: a blue primary link and a quieter text link */
.r-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 18px !important; }
.r-actions a { text-transform: uppercase; letter-spacing: .08em; text-decoration: none; border-radius: 2px; }
.r-cta { padding: 6px 8px; margin-left: -8px; color: var(--rt-blue); font-weight: 700; box-shadow: inset 0 -2px 0 var(--rt-blue);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out); }
.r-cta:hover, .r-cta:focus-visible { background: var(--rt-blue); color: #f4f2ec; }
.r-quiet { padding: 2px 0; color: #55554f; font-size: .9em; border-bottom: 1px dotted currentColor; transition: color .2s var(--ease-out); }
.r-quiet:hover, .r-quiet:focus-visible { color: var(--rt-blue); border-bottom-style: solid; }
.r-actions a:focus-visible { outline: 2px solid var(--rt-blue); outline-offset: 3px; }
.r-actions + .r-rule { margin-top: clamp(28px, 7vh, 72px) !important; } /* a measured gap before the barcode */

.r-body { margin-bottom: 14px; }
.r-barcode { height: 38px; margin-left: auto; margin-right: auto; width: 82%; }
.r-caret { display: inline-block; width: .6em; height: 1.05em; margin-left: 1px; vertical-align: -0.15em; background: #141414; animation: rt-caret .7s steps(1) infinite; }
@keyframes rt-caret { 50% { opacity: 0; } }
@media (min-width: 900px) {
  .hero-receipt { width: min(440px, 32vw, 48vh); }
  .receipt { font-size: min(15px, 1.7vh); padding: min(38px, 4.4vh) 32px min(42px, 4.8vh); }
  .r-line + .r-line { margin-top: min(12px, 1.3vh); }
  .r-body { font-size: min(20px, 2.2vh); line-height: 1.5; }
  .r-row { font-size: min(13px, 1.5vh); }
  .r-small { font-size: min(12px, 1.4vh); }
  .r-logo img { height: min(30px, 3.4vh); }
  .r-barcode { height: min(52px, 5.8vh); }
}
@media (max-width: 760px) {
  .hero-receipt { width: min(330px, 84vw, 50vh); }
  .receipt { font-size: 12px; padding: 22px 18px 26px; }
  .r-body { font-size: 14px; }
}

/* ---------- Selected work (homepage) ---------- */
.sw { background: #080808; color: #f4f2ec; padding: clamp(96px,11vw,176px) var(--gutter) clamp(96px,10vw,160px); }
.sw-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-bottom: clamp(40px,5vw,72px); }
.sw-title { margin: 0; font: 500 clamp(32px,4.6vw,72px)/1.05 var(--f-display); letter-spacing: var(--tracking-display); color: #f4f2ec; }
.sw-all { color: #f4f2ec; font: 400 15px/1 var(--f-ui); letter-spacing: .04em; padding-bottom: 4px; border-bottom: 1px solid rgba(244,242,236,.35); transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.sw-all:hover { color: var(--rt-blue-light); border-color: var(--rt-blue-light); }
.sw-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(64px,7vw,112px) clamp(24px,3vw,48px); }
.sw-feature { grid-column: 1 / -1; }
.sw-media { display: block; overflow: hidden; border-radius: 6px; background: #141414; aspect-ratio: 4 / 3; }
.sw-feature .sw-media { aspect-ratio: 2 / 1; }
.sw-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.sw-item:hover .sw-media img { transform: scale(1.025); }
.sw-meta { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: baseline; gap: 6px 20px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(244,242,236,.16); }
.sw-num { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--rt-blue-light); }
.sw-name { margin: 0; font: 500 clamp(20px,2vw,30px)/1.1 var(--f-display); letter-spacing: .07em; color: #f4f2ec; }
.sw-cat, .sw-sum { grid-column: 2 / -1; margin: 0; }
.sw-cat { font: 400 12px/1.6 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: #b5b5b2; }
.sw-sum { font: var(--type-body); color: rgba(244,242,236,.78); }
.sw-link { justify-self: end; white-space: nowrap; color: #f4f2ec; font: 400 15px/1 var(--f-ui); letter-spacing: .04em; padding: 6px 0; border-bottom: 1px solid var(--rt-blue); transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.sw-link:hover { color: var(--rt-blue-light); border-color: var(--rt-blue-light); }
.sw-link:focus-visible, .sw-all:focus-visible { outline: 2px solid var(--rt-blue-light); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 760px) {
  .sw-grid { grid-template-columns: 1fr; gap: 64px; }
  .sw-feature .sw-media { aspect-ratio: 4 / 3; }
  .sw-meta { grid-template-columns: auto minmax(0,1fr); gap: 6px 14px; }
  .sw-link { grid-column: 2; justify-self: start; margin-top: 10px; order: 9; }
}
@media (prefers-reduced-motion: reduce) { .sw-media img { transition: none; } .sw-item:hover .sw-media img { transform: none; } }

/* ---------- 03 Contact ---------- */
.contact { background: var(--rt-blue); color: #fff; padding: clamp(100px,14vw,200px) var(--gutter) 28px; }
.email-row { margin-top: clamp(48px,6vw,96px); display: flex; justify-content: flex-end; }
.email {
  font: var(--type-email); letter-spacing: var(--tracking-email); color: #fff;
  border-bottom: 2px solid #fff; padding-bottom: 8px; max-width: 100%; overflow-wrap: anywhere;
}
.email:hover { color: var(--rt-blue-mist); border-color: var(--rt-blue-mist); }
/* Contact form: white underline fields on the blue section */
.contact-form { margin-top: clamp(56px,7vw,112px); max-width: 1040px; }
.cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px clamp(24px,4vw,56px); }
.cf-field { display: flex; flex-direction: column; gap: 10px; }
.cf-wide { grid-column: 1 / -1; }
.cf-label { font: var(--type-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-on-accent); }
.cf-label i { font-style: normal; text-transform: none; letter-spacing: 0; opacity: .75; }
.cf-field input, .cf-field textarea {
  width: 100%; box-sizing: border-box; margin: 0; padding: 6px 0 12px; border: 0; border-bottom: 1px solid rgba(255,255,255,.45); border-radius: 0;
  background: transparent; color: #fff; font: 400 clamp(19px,1.6vw,23px)/1.4 var(--f-body); outline: none; transition: border-color .2s;
}
.cf-field textarea { resize: vertical; min-height: 120px; }
.cf-field input:focus, .cf-field textarea:focus { border-bottom-color: #fff; }
.cf-field.invalid input, .cf-field.invalid textarea { border-bottom: 2px solid #ffc4c4; }
.cf-field.invalid .cf-label { color: #ffc4c4; }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 24px; margin-top: 40px; }
.cf-submit { display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 26px; border: 0; border-radius: var(--radius-pill);
  background: #fff; color: var(--rt-blue); font: 500 15px/1 var(--f-ui); letter-spacing: .02em; cursor: pointer; transition: opacity .2s, transform .2s; }
.cf-submit:hover { transform: translateX(2px); }
.cf-submit[disabled] { opacity: .6; cursor: default; transform: none; }
.cf-status { margin: 0; font: var(--type-body); color: #fff; }
.contact-form.sent .cf-grid, .contact-form.sent .cf-submit { display: none; }
.contact-form.sent .cf-status { font: italic 400 clamp(22px,2.2vw,30px)/1.35 var(--f-body); }
@media (max-width: 760px) { .cf-grid { grid-template-columns: 1fr; gap: 28px; } }
.contact-cols { display: flex; flex-wrap: wrap; gap: 40px clamp(32px,5vw,96px); margin-top: clamp(80px,10vw,160px); padding-top: 28px; border-top: 1px solid var(--border-on-accent); }
.contact-cols .col { flex: 1 1 200px; display: flex; flex-direction: column; gap: 12px; }
.col-label { font: var(--type-label-sm); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-meta-on-accent); }
.contact-cols .body { font: var(--type-body); }
.social { display: flex; align-items: center; gap: 12px; }
.social a { display: block; width: 40px; height: 40px; border-radius: 50%; transition: transform var(--dur-hover) var(--ease-out); }
.social a:hover { transform: scale(1.08); }
.social img { display: block; width: 100%; height: 100%; filter: invert(1); }
.footer {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(80px,10vw,140px);
  font: 400 11.5px/1.5 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-meta-on-accent);
}
.footer a { color: #fff; }

/* ---------- Small screens ---------- */
@media (max-width: 760px) {
  :root { --win-t: 50vh; --win-r: 50vw; --win-b: 50vh; --win-l: 50vw; } /* no window: the menu is all white */
  .menu.open .menu-content { pointer-events: auto; overflow-y: auto; overscroll-behavior: contain; }
  .menu-left, .menu-right { position: static; width: auto; padding: 0 var(--gutter); }
  .menu-top { position: static; } /* in the flow, so the pills can wrap without covering the links */
  .menu-left { padding-top: 28px; gap: 36px; }
  .menu-left nav { order: 0; margin: 0; } /* phones: navigation first, then case studies */
  .menu-right { overflow: visible; padding-top: 40px; padding-bottom: 40px; }
  .menu-right .tagline { display: none; }
  .blue-pills { display: none; }
  .menu-top { flex-wrap: wrap; justify-content: space-between; row-gap: 14px; }
  .menu-pills { order: 3; flex-basis: 100%; margin: 0; }
  .menu-pills .glass-pill { height: 34px; padding: 0 12px; font-size: 13px; letter-spacing: .02em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark img { animation: none; }
  .reveal-up { transform: none; }
}

/* ---------- Hero: featured project (about 60%) | receipt (about 40%) ----------
   Two columns, vertically centred, generous margins; it fills the screen on desktop but is
   never locked to it. Phones: the receipt first, the featured project second. */
.hs, .hs-pin, .hs .hero { height: auto; min-height: 0; }
.hs-pin { overflow: visible; }
.hs .hero-panel {
  position: relative; height: auto; min-height: max(640px, 100vh); overflow: visible; box-sizing: border-box;
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; column-gap: clamp(40px, 6vw, 112px);
  padding: clamp(104px, 13vh, 140px) var(--gutter) clamp(56px, 8vh, 96px);
}
.hs .hero-receipt { position: relative; left: auto; top: auto; transform: none; justify-self: center; width: min(100%, 440px); }
.hero-feature { min-width: 0; transition: opacity .8s var(--ease-out) .25s; }
html.intro-on:not(.intro-leaving) .hero-feature { opacity: 0; } /* it appears as the intro hands over */
.hf-media { display: block; overflow: hidden; border-radius: 6px; background: #141414; aspect-ratio: 16 / 10; }
.hf-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; transition: transform .9s var(--ease-out); }
.hero-feature:hover .hf-media img { transform: scale(1.02); }
.hf-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(244,242,236,.16); color: #f4f2ec; }
.hf-text { display: grid; gap: 6px; min-width: 0; }
.hf-label { font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--rt-blue-light); }
.hf-name { margin: 2px 0 0; font: 500 clamp(28px, 3vw, 48px)/1.05 var(--f-display); letter-spacing: .06em; text-transform: uppercase; color: #f4f2ec; }
.hf-cat { margin: 0; font: 400 12px/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #b5b5b2; }
.hf-sum { margin: 0; font: var(--type-body); color: rgba(244,242,236,.78); }
.hf-link { flex: 0 0 auto; white-space: nowrap; color: #f4f2ec; font: 500 15px/1 var(--f-ui); letter-spacing: .04em; padding: 6px 0;
  border-bottom: 1px solid var(--rt-blue); text-decoration: none; transition: color .2s var(--ease-out), border-color .2s var(--ease-out); }
.hf-link:hover { color: var(--rt-blue-light); border-color: var(--rt-blue-light); }
.hf-link:focus-visible { outline: 2px solid var(--rt-blue-light); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 899px) {
  .hs .hero-panel { min-height: 0; grid-template-columns: minmax(0, 1fr); row-gap: 56px; padding: 112px var(--gutter) 72px; }
  .hs .hero-receipt { order: -1; width: min(100%, 360px); }
  .hf-meta { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hero-feature { transition: none; } .hero-feature:hover .hf-media img { transform: none; } }

/* ---------- Services (homepage) ---------- */
.hsv { background: #080808; color: #f4f2ec; padding: 0 var(--gutter) clamp(96px,10vw,160px); }
.hsv-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(16px,2vw,28px); }
.hs-item { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 22px 0 0; border-top: 1px solid rgba(244,242,236,.2);
  color: #f4f2ec; text-decoration: none; }
.hs-num { font: 400 12px/1 var(--f-mono); letter-spacing: .08em; color: var(--rt-blue-light); }
.hs-name { font: 500 clamp(17px,1.4vw,21px)/1.15 var(--f-display); letter-spacing: .06em; text-transform: uppercase; transition: color .2s var(--ease-out); }
.hs-desc { font: var(--type-body); color: rgba(244,242,236,.75); text-wrap: pretty; }
.hs-more { margin-top: auto; padding-top: 8px; font: 500 14px/1 var(--f-ui); letter-spacing: .04em; color: #f4f2ec; }
.hs-item:hover .hs-name, .hs-item:focus-visible .hs-name, .hs-item:hover .hs-more { color: var(--rt-blue-light); }
.hs-item:focus-visible { outline: 2px solid var(--rt-blue-light); outline-offset: 6px; border-radius: 2px; }
@media (max-width: 999px) { .hsv-grid { grid-template-columns: repeat(2, minmax(0,1fr)); row-gap: 40px; } }
@media (max-width: 560px) { .hsv-grid { grid-template-columns: minmax(0,1fr); row-gap: 32px; } }

/* ---------- Type: headings in capitals ----------
   Display and headings: Jost Medium, all caps, tracked loose, tight line height.
   (html prefix: outranks the per-component letter-spacing set above and in pages.css) */
html .mega, html .section-title, html .sw-title, html .sw-name, html .menu-link, html .case-link,
html .tagline, html .project-name, html .jcard h3, html .jcard.compact .title, html .hf-name, html .hs-name {
  text-transform: uppercase; letter-spacing: var(--tracking-display);
}
html .jcard h3, html .jcard.compact .title, html .case-link { letter-spacing: var(--tracking-title); }