/* Inter (21 Oct, Andy's choice) — self-hosted variable font. Styrene kept below for reference; the logotype is an SVG. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Inter-Variable.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/Inter-Variable-Italic.woff2) format('woff2')}
/* Styrene B — self-hosted, cached immutably. */
@font-face{font-family:'Styrene B';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/StyreneB-Regular.woff) format('woff')}
@font-face{font-family:'Styrene B';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/StyreneB-RegularItalic.woff) format('woff')}
@font-face{font-family:'Styrene B';font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/StyreneB-Bold.woff) format('woff')}
/* Float — design tokens and base styles.
   Pair with float-fonts-embedded.css (single-file HTML) or
   float-fonts-linked.css (when fonts/ ships alongside). */

:root{
  /* Core palette. Dark grey, black and white do most of the work;
     light grey and mid grey support; red is a rare accent. */
  --float-white:      #ffffff;
  --float-black:      #000000;
  --float-dark-grey:  #2d2d2d;
  --float-mid-grey:   #b8bbb3;
  --float-light-grey: #f0ede4;
  --float-red:        #ff0000;

  /* Tints (the guidelines show each core colour with a tint ramp) */
  --float-dark-grey-60: #6b6b6b;
  --float-mid-grey-50:  #dcddd9;
  --float-mid-grey-25:  #edeeec;
  --float-light-grey-50:#f8f6f2;
  --float-red-15:       #ffe0e0;

  /* Semantic — dark grey surface, white ink, is the Float default */
  --surface:        var(--float-dark-grey);
  --surface-deep:   var(--float-black);
  --ink:            var(--float-white);
  --ink-muted:      var(--float-mid-grey);
  --rule:           rgba(255,255,255,.22);
  --accent:         var(--float-red);

  /* Type */
  --font-display: 'Styrene A', 'Styrene B', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Styrene B', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Copy is set at 80% of its leading — i.e. line-height is 1.25x the size */
  --leading: 1.25;

  --step--1: .8125rem;
  --step-0:  1rem;
  --step-1:  1.375rem;
  --step-2:  1.9375rem;
  --step-3:  2.75rem;
  --step-4:  3.875rem;

  --space-1: .5rem;  --space-2: 1rem;  --space-3: 1.5rem;
  --space-4: 2.5rem; --space-5: 4rem;  --space-6: 6.5rem;
}

/* Light surface — for long-form documents and print */
.float-light{
  --surface:      var(--float-white);
  --surface-deep: var(--float-light-grey);
  --ink:          var(--float-black);
  --ink-muted:    #6b6b6b;              /* mid grey fails contrast on light — use a tint of black */
  --rule:         rgba(0,0,0,.16);
}
/* Warm variant of the light surface, when white feels too clinical */
.float-light.float-warm{ --surface: var(--float-light-grey); --surface-deep: var(--float-white); }

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--leading);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--font-body);font-weight:700;line-height:1.1;margin:var(--space-4) 0 var(--space-2)}
h1{margin-top:0}
:where(h1,h2,h3,h4):first-child{margin-top:0}
h1{font-size:var(--step-3)}
h2{font-size:var(--step-2)}
h3{font-size:var(--step-1)}
h4{font-size:var(--step-0);letter-spacing:.02em}
p{margin:0 0 var(--space-2);max-width:68ch}
strong{font-weight:700}
em{font-style:italic}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--accent)}
small,.float-caption{font-size:var(--step--1);color:var(--ink-muted)}
hr,.float-rule{border:0;border-top:1px solid var(--rule);margin:var(--space-4) 0}

/* Eyebrow / running head — the guidelines' page furniture */
.float-eyebrow{
  font-size:var(--step--1);color:var(--ink-muted);
  display:flex;gap:var(--space-4);margin-bottom:var(--space-5);
}

/* Contents-style list: label left, value right, hairline under each row */
.float-index{list-style:none;padding:0;margin:0}
.float-index li{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--space-2) 0;border-bottom:1px solid var(--rule);
  font-size:var(--step-1);
}

/* Logotype and monogram --------------------------------------------------- */
.float-logotype{display:block;width:180px;height:auto;color:currentColor}
.float-monogram{display:block;width:40px;height:auto;color:currentColor}   /* 5:3 */
/* The monogram is black or white. Never mid grey, never red. */

/* The logotype sits on solid black or solid white — nothing else, and never on
   a split or graduated ground. Float does not cut the logotype with an edge. */
.float-logo-panel{
  display:grid;place-items:center;
  min-height:60vh;padding:var(--space-5);
  background:var(--float-black);
}
.float-logo-panel .float-logotype{width:min(46vw,520px);color:#ffffff}

.float-logo-panel--white{background:#ffffff}
.float-logo-panel--white .float-logotype{color:var(--float-black)}

/* Red is for flourishes and small details only — never body copy, never a
   large field of colour, and never as a text colour on dark grey (3.4:1). */
.float-accent{color:var(--accent)}
.float-tick{width:6px;height:6px;background:var(--accent);display:inline-block}

/* Tables ------------------------------------------------------------------ */
table{border-collapse:collapse;width:100%;font-size:var(--step--1)}
th{text-align:left;font-weight:700;padding:var(--space-1) var(--space-2) var(--space-1) 0;
   border-bottom:1px solid var(--ink-muted)}
td{padding:var(--space-1) var(--space-2) var(--space-1) 0;border-bottom:1px solid var(--rule)}

.float-page{max-width:1080px;margin:0 auto;padding:var(--space-5) var(--space-4)}
.float-footer{
  margin-top:var(--space-6);padding-top:var(--space-3);
  border-top:1px solid var(--rule);font-size:var(--step--1);color:var(--ink-muted);
  display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-4);
}


/* ==========================================================================
   Float — prototype site styles
   Built on the Float brand system. Dark grey ground, Styrene, red rationed
   to one element per view. No shadows, no rounded corners, no icon sets.
   ========================================================================== */

:root{
  --step-5: 5.5rem;
  --measure: 68ch;
  --nav-h: 64px;
  --gut: clamp(1.25rem, 4vw, 4rem);
}

html{ scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
}

body{ overflow-x:hidden }

/* --- shared ------------------------------------------------------------- */
.wrap{ max-width:1440px; margin:0 auto; padding-inline:var(--gut) }
.wrap--narrow{ max-width:900px }
.stack > * + *{ margin-top:var(--space-3) }
.lede{ font-size:clamp(1.125rem,1.6vw,1.4375rem); color:var(--float-light-grey); max-width:46ch }
.muted{ color:var(--ink-muted) }
.hide{ display:none !important }

/* Eyebrow label — the guidelines' running head, reused as a section marker */
.label{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); margin:0 0 var(--space-3);
  display:flex; align-items:center; gap:.6rem;
}
.label::before{ content:""; width:6px; height:6px; background:var(--float-mid-grey); flex:none }
.label--plain::before{ display:none }
/* Red is rationed to exactly one mark per page — either the response promise
   or, on pages without one, a single section marker. */
.label--key::before{ background:var(--accent) }

/* The one red thing per view is usually the section marker. Anything else
   that wants red has to earn it. */

/* Section rhythm */
section{ padding-block:clamp(3.5rem, 8vw, 7rem) }
section.tight{ padding-block:clamp(2.5rem,5vw,4rem) }
.rule{ border:0; border-top:1px solid var(--rule); margin:0 }

/* Buttons and links ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  min-height:48px; padding:.85rem 1.4rem;
  border:1px solid var(--ink); background:transparent; color:var(--ink);
  font:inherit; font-weight:700; font-size:.9375rem;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--ink); color:var(--float-dark-grey) }
.btn--solid{ background:var(--ink); color:var(--float-dark-grey) }
.btn--solid:hover,.btn--solid:focus-visible{ background:transparent; color:var(--ink) }
.btn--quiet{ border-color:var(--rule); font-weight:400 }

.arrowlink{
  display:inline-flex; align-items:center; gap:.5rem; min-height:32px;
  text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:.2rem;
  font-weight:700; font-size:.9375rem;
}
.arrowlink:hover,.arrowlink:focus-visible{ border-bottom-color:var(--accent); color:var(--ink) }
.arrowlink::after{ content:"\2192"; transition:transform .18s ease }
.arrowlink:hover::after{ transform:translateX(4px) }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px;
}

/* Every interactive target clears WCAG 2.2 SC 2.5.8 (24x24 CSS px minimum) */
.tap{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center }

/* --- header -------------------------------------------------------------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--float-black); color:#fff; padding:1rem 1.25rem;
}
.skip:focus{ left:0 }

.masthead{
  position:sticky; top:0; z-index:50;
  background:var(--float-black);           /* the logotype sits on solid black. Always. */
  border-bottom:1px solid rgba(255,255,255,.14);
}
.masthead__inner{
  display:flex; align-items:center; gap:var(--space-3);
  min-height:var(--nav-h); max-width:1440px; margin:0 auto; padding-inline:var(--gut);
}
.brand{ display:flex; align-items:center; text-decoration:none; padding:.5rem 0; margin-right:auto }
.brand svg{ display:block; width:104px; height:auto; color:#fff }
.brand:hover svg{ color:#fff }

.nav{ display:flex; align-items:center; gap:clamp(.5rem,1.6vw,1.75rem) }
.nav a{
  text-decoration:none; font-size:.9375rem; color:#fff;
  padding:.75rem .25rem; min-height:44px; display:inline-flex; align-items:center;
  border-bottom:2px solid transparent;
}
.nav a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.5) }
.nav a[aria-current="page"]{ border-bottom-color:#fff }
.masthead__tel{
  font-size:.9375rem; color:#fff; text-decoration:none; white-space:nowrap;
  padding:.75rem 0; min-height:44px; display:inline-flex; align-items:center;
}
.masthead__tel:hover{ color:#fff; text-decoration:underline }
.navtoggle{ display:none }

@media (max-width: 900px){
  .brand svg{ width:88px }
  .navtoggle{
    display:inline-flex; align-items:center; margin-left:auto; background:none; border:1px solid rgba(255,255,255,.4);
    color:#fff; font:inherit; font-size:.875rem; padding:.5rem .8rem; min-height:44px; cursor:pointer;
  }
  .nav{
    position:fixed; inset:var(--nav-h) 0 auto 0; background:var(--float-black);
    flex-direction:column; align-items:stretch; gap:0; padding:var(--space-2) var(--gut) var(--space-4);
    border-bottom:1px solid rgba(255,255,255,.14);
  }
  .nav[hidden]{ display:none }
  .nav a{ padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.12); font-size:1.125rem }
  .nav a[aria-current="page"]{ border-bottom-color:#fff }
  .masthead__tel{ display:none }
}

/* --- media --------------------------------------------------------------- */
/* Every image sits in a fixed-ratio frame, so nothing shifts as it loads.
   62% of mobile pages ship an unsized image; this site ships none. */
.frame{
  position:relative; display:block; overflow:hidden;
  background:#1f1f1f; aspect-ratio:16/9;
}
.frame img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; border:0;
}
.frame--tall{ aspect-ratio:3/4 }
.frame--square{ aspect-ratio:1/1 }
.frame--wide{ aspect-ratio:21/9 }
.frame--portrait{ aspect-ratio:4/5 }

figure{ margin:0 }
figcaption{ font-size:.8125rem; color:var(--ink-muted); padding-top:.6rem; max-width:56ch }

/* --- hero ---------------------------------------------------------------- */
.hero{ position:relative; padding:0; border-bottom:1px solid var(--rule) }
.hero__media{ position:relative; aspect-ratio:16/9; min-height:min(78vh,760px); background:#1f1f1f; overflow:hidden }
.hero__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.55) 38%, rgba(0,0,0,.15) 70%, rgba(0,0,0,.35) 100%);
}
.hero__body{
  position:absolute; inset:auto 0 0 0; padding-bottom:clamp(2rem,5vw,4.5rem);
}
.hero h1{
  font-size:clamp(2rem, 5.2vw, 4.25rem); letter-spacing:-.015em; max-width:19ch;
  margin:0 0 var(--space-3); text-wrap:balance;
}
.hero__sub{ font-size:clamp(1rem,1.5vw,1.3125rem); color:var(--float-light-grey); max-width:48ch; margin:0 0 var(--space-4) }
.hero__actions{ display:flex; flex-wrap:wrap; gap:var(--space-2) }

/* Showreel: poster first, click to play, never auto-loaded.
   The LCP element is the still — not a video the browser has to negotiate. */
.reel{
  position:absolute; right:var(--gut); top:clamp(1.5rem,6vw,4rem);
  display:inline-flex; align-items:center; gap:.75rem;
  background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.45);
  color:#fff; font:inherit; font-size:.875rem; font-weight:700;
  padding:.7rem 1.1rem .7rem .8rem; min-height:48px; cursor:pointer;
  backdrop-filter:blur(2px);
}
.reel:hover,.reel:focus-visible{ background:#fff; color:var(--float-black); border-color:#fff }
.reel__tri{ width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor }
@media (max-width:640px){ .reel{ position:static; align-self:flex-start; margin:0 var(--gut) var(--space-3) } .hero__body{ position:static; padding-block:var(--space-4) } .hero__media{ min-height:52vh } .hero__scrim{ display:none } .hero{ display:flex; flex-direction:column-reverse } }

/* Reel dialog */
dialog.reelbox{
  border:0; padding:0; background:var(--float-black); color:#fff;
  width:min(1100px, 94vw); max-width:none;
}
dialog.reelbox::backdrop{ background:rgba(0,0,0,.88) }
.reelbox__frame{ aspect-ratio:16/9; display:grid; place-items:center; background:#111; text-align:center; padding:var(--space-4) }
.reelbox__bar{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.75rem 1rem; border-top:1px solid rgba(255,255,255,.2) }

/* --- stat / claim strip --------------------------------------------------- */
.claims{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) }
.claim{ border-top:1px solid var(--rule); padding-top:var(--space-3) }
.claim h3{ font-size:1.0625rem; margin:0 0 .5rem }
.claim p{ font-size:.9375rem; color:var(--ink-muted); margin:0 }

/* --- work grid ----------------------------------------------------------- */
.grid{ display:grid; gap:clamp(1rem,2.2vw,2rem); grid-template-columns:repeat(12,1fr) }
.card{ grid-column:span 4; display:block; text-decoration:none; color:inherit }
.card--wide{ grid-column:span 8 }
.card--half{ grid-column:span 6 }
.card--full{ grid-column:span 12 }
@media (max-width:900px){ .card,.card--wide,.card--half{ grid-column:span 6 } }
@media (max-width:600px){ .card,.card--wide,.card--half,.card--full{ grid-column:span 12 } }

.card .frame img{ transition:transform .5s cubic-bezier(.2,.7,.3,1) }
.card:hover .frame img,.card:focus-visible .frame img{ transform:scale(1.03) }
.card:focus-visible{ outline:2px solid var(--accent); outline-offset:4px }
.card__meta{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; padding-top:.75rem }
.card__title{ font-weight:700; font-size:1.0625rem; margin:0 }
.card__place{ font-size:.8125rem; color:var(--ink-muted); margin:0; white-space:nowrap }
.card__tags{ font-size:.75rem; color:var(--ink-muted); letter-spacing:.06em; text-transform:uppercase; margin:.35rem 0 0 }

/* --- filters ------------------------------------------------------------- */
.filters{ display:grid; gap:var(--space-3); margin-bottom:var(--space-4) }
.filterrow{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center }
.filterrow > .filterrow__label{
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
  width:104px; flex:none;
}
.chip{
  border:1px solid var(--rule); background:transparent; color:var(--ink);
  font:inherit; font-size:.8125rem; padding:.55rem .95rem; min-height:44px; cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}
.chip:hover{ border-color:var(--ink) }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--float-dark-grey); border-color:var(--ink); font-weight:700 }
.filtercount{ font-size:.875rem; color:var(--ink-muted); margin:0 0 var(--space-3) }
@media (max-width:640px){ .filterrow > .filterrow__label{ width:100% } }

/* --- case study ---------------------------------------------------------- */
.projhead{ padding-block:clamp(2rem,5vw,4rem) var(--space-4) }
.projhead h1{ font-size:clamp(1.875rem,4.4vw,3.5rem); max-width:16ch; letter-spacing:-.015em }
.facts{ display:grid; gap:var(--space-3) var(--space-4); grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--rule); padding-top:var(--space-3) }
.facts dt{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.35rem }
.facts dd{ margin:0; font-size:.9375rem; font-weight:700 }

.beats{ display:grid; gap:var(--space-5) }
.beat{ display:grid; gap:var(--space-2) var(--space-5); grid-template-columns:minmax(0,180px) minmax(0,var(--measure)) }
.beat > h2{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); font-weight:400; margin:0; padding-top:.35rem }
.beat > div > p:last-child{ margin-bottom:0 }
@media (max-width:800px){ .beat{ grid-template-columns:1fr } }

blockquote.pull{ margin:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding-block:var(--space-4) }
blockquote.pull p{ font-size:clamp(1.125rem,2.2vw,1.75rem); line-height:1.3; max-width:30ch; margin:0 0 var(--space-3) }
blockquote.pull footer{ font-size:.875rem; color:var(--ink-muted) }

/* --- people -------------------------------------------------------------- */
.people{ display:grid; gap:var(--space-4) clamp(1rem,2vw,2rem); grid-template-columns:repeat(auto-fill,minmax(190px,1fr)) }
.person h3{ font-size:1rem; margin:.75rem 0 .2rem }
.person p{ font-size:.8125rem; color:var(--ink-muted); margin:0 }

/* --- logos --------------------------------------------------------------- */
.logos{ display:grid; gap:var(--space-3) var(--space-4); grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); align-items:center }
.logos img{
  width:100%; height:44px; object-fit:contain; display:block;
  filter:grayscale(1) invert(1) brightness(1.6); opacity:.72;
}
.logos img:hover{ opacity:1 }

/* --- contact ------------------------------------------------------------- */
.contactgrid{ display:grid; gap:var(--space-5); grid-template-columns:repeat(auto-fit,minmax(280px,1fr)) }
.bigmail{
  font-size:clamp(1.25rem,3.4vw,2.4rem); font-weight:700; text-decoration:none;
  display:inline-block; border-bottom:2px solid var(--rule); padding-bottom:.25rem; letter-spacing:-.01em;
}
.bigmail:hover{ border-bottom-color:var(--accent); color:var(--ink) }
.promise{ display:inline-flex; align-items:flex-start; gap:.7rem; font-size:.9375rem; color:var(--float-light-grey); max-width:44ch }
.promise::before{ content:""; width:6px; height:6px; background:var(--accent); flex:none; margin-top:.45rem }

/* --- footer -------------------------------------------------------------- */
.sitefoot{ background:var(--float-black); padding-block:var(--space-5) var(--space-4); margin-top:0 }
.sitefoot .wrap{ display:grid; gap:var(--space-4); grid-template-columns:repeat(auto-fit,minmax(190px,1fr)) }
.sitefoot h4{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--float-mid-grey); margin:0 0 var(--space-2); font-weight:400 }
.sitefoot a{ color:#fff; text-decoration:none; display:block; padding:.3rem 0; font-size:.9375rem; min-height:28px }
.sitefoot a:hover{ color:#fff; text-decoration:underline }
.sitefoot address{ font-style:normal; font-size:.9375rem; color:var(--float-mid-grey); line-height:1.5 }
.footbar{ border-top:1px solid rgba(255,255,255,.16); margin-top:var(--space-4); padding-top:var(--space-3); font-size:.8125rem; color:var(--float-mid-grey); display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between }

/* The one honest line a shared link needs, before anyone scrolls. */
.statebar{
  background:#111; border-bottom:1px solid rgba(255,255,255,.14);
  font-size:.8125rem; color:var(--float-mid-grey);
}
.statebar .wrap{ display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; align-items:baseline; padding-block:.7rem }
.statebar strong{ color:#fff; font-weight:700 }

/* ==========================================================================
   Copy update, September 2026 — sections added for the new site copy.
   ========================================================================== */

/* Home intro: one big sentence, then the plain follow-up. */
.intro{ display:grid; gap:var(--space-3) var(--space-5); grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:end }
.intro__lead{ font-size:clamp(1.375rem,2.8vw,2.25rem); line-height:1.2; font-weight:700; letter-spacing:-.01em; max-width:26ch; margin:0; text-wrap:pretty }
.intro__more p{ color:var(--float-light-grey); font-size:clamp(1rem,1.3vw,1.1875rem); max-width:40ch; margin:0 }
@media (max-width:900px){ .intro{ grid-template-columns:1fr } }

/* Section heading with a short line beside the label */
.sectionhead{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.5rem var(--space-4); margin-bottom:var(--space-3) }
.sectionhead .label{ margin:0 }
.sectionsub{ margin:0; font-size:.9375rem; color:var(--ink-muted) }
.sectionintro{ font-size:clamp(1rem,1.4vw,1.1875rem); color:var(--float-light-grey); max-width:52ch; margin:0 0 var(--space-4) }

/* Larger claim blocks for the three "how we work" messages and the values */
.claims--big .claim h3{ font-size:clamp(1.125rem,1.6vw,1.375rem); margin-bottom:.6rem }
.claims--big .claim p{ font-size:1rem; line-height:1.4 }

/* Proof: awards as a short list of plain facts, press as one line */
.proof{ display:grid; gap:var(--space-4); margin-bottom:var(--space-5) }
.awards{ list-style:none; margin:0; padding:0 }
.awards li{
  font-size:clamp(1.125rem,2vw,1.625rem); font-weight:700; line-height:1.25;
  padding:var(--space-2) 0; border-bottom:1px solid var(--rule);
}
.awards li:first-child{ border-top:1px solid var(--rule) }
.press{ margin:0; font-size:.9375rem; color:var(--float-light-grey); max-width:none }
.press__label{ font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-right:.6rem }
.logosblock{ margin-top:var(--space-5) }

/* Studio teaser on the home page */
.teaser{ display:grid; gap:var(--space-3) var(--space-5); grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start }
.teaser h2{ margin:0; font-size:clamp(1.625rem,3.2vw,2.5rem); letter-spacing:-.01em; max-width:16ch }
.teaser p{ color:var(--float-light-grey); font-size:clamp(1rem,1.3vw,1.1875rem); max-width:44ch }
@media (max-width:800px){ .teaser{ grid-template-columns:1fr } }

/* Optional price box on Services */
.pricebox{ border:1px solid var(--rule); padding:clamp(1.25rem,3vw,2.5rem); max-width:760px }
.pricebox h2{ font-size:var(--step-1); margin:0 0 var(--space-2) }
.pricebox p{ margin:0; color:var(--float-light-grey) }

/* Team one-liners */
.person .person__bio{ margin-top:.5rem; color:var(--float-light-grey); line-height:1.4 }

/* Work filters: shown when a combination finds nothing */
.filterempty{ font-size:1rem; color:var(--float-light-grey); border-top:1px solid var(--rule); padding-top:var(--space-3); max-width:60ch }
.filterempty[hidden]{ display:none }

/* ---- 1.3 (October 2026): approved preview styles ---- */

/* Logo size (21 Oct): larger wordmark, clear space = letter height */
.brand{ padding:1.25rem 0 }
.brand svg{ width:176px }
@media (max-width:800px){ .brand{ padding:1rem 0 } .brand svg{ width:132px } }

/* Project images (21 Oct): show every gallery image whole and full width, and let any project image open large. */
.projhead ~ section .grid > figure{ grid-column:1/-1; margin:0 }
.projhead ~ section .grid > figure .frame{ aspect-ratio:auto }
.projhead ~ section .grid > figure .frame img{ position:static; height:auto }
.zoom{ position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; color:inherit }
.zoom:focus-visible{ outline:2px solid #fff; outline-offset:3px }
.zoom__hint{ position:absolute; right:12px; bottom:12px; display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .7rem;
  background:rgba(0,0,0,.72); color:#fff; font-size:.8125rem; line-height:1; opacity:.85; transition:opacity .2s }
.zoom:hover .zoom__hint,.zoom:focus-visible .zoom__hint{ opacity:1 }
.zoom__hint svg{ width:14px; height:14px }
.lb{ position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0b0b0b; color:#fff }
.lb::backdrop{ background:#0b0b0b }
.lb__stage{ position:absolute; inset:56px 0 64px; display:flex; align-items:center; justify-content:center; padding:0 64px; touch-action:pan-y pinch-zoom }
.lb__img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; display:block }
.lb__top,.lb__bot{ position:absolute; left:0; right:0; display:flex; align-items:center; gap:1rem; padding:0 16px }
.lb__top{ top:0; height:56px; justify-content:flex-end }
.lb__bot{ bottom:0; height:64px; justify-content:space-between; font-size:.875rem; color:#bdbdbb }
.lb__cap{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.lb__count{ white-space:nowrap; font-variant-numeric:tabular-nums }
.lb button{ min-width:44px; min-height:44px; display:inline-grid; place-items:center; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); cursor:pointer; font:inherit }
.lb button:hover{ border-color:#fff }
.lb button:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.lb__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4)!important }
.lb__prev{ left:12px } .lb__next{ right:12px }
.lb__close{ padding:0 .9rem }
.lb button svg{ width:20px; height:20px }
html.lb-open{ overflow:hidden }
@media (max-width:640px){ .lb__stage{ padding:0 } .lb__nav{ top:auto; bottom:10px; transform:none } .lb__prev{ left:auto; right:64px } .lb__bot{ padding-right:124px } }

/* Testimonials (21 Oct) */
.tquotes{ display:grid; align-items:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,4vw,3.5rem); margin-top:var(--space-4) }
.tquote{ margin:0; padding-top:1.25rem; border-top:1px solid rgba(255,255,255,.18); display:flex; flex-direction:column; gap:.9rem }
.tquote blockquote{ margin:0 }
.tquote blockquote p{ margin:0; font-size:clamp(1.0625rem,1.4vw,1.25rem); line-height:1.45; text-wrap:pretty }
.tquote figcaption{ display:flex; flex-direction:column; gap:.15rem; font-size:.875rem }
.tquote figcaption span{ color:var(--ink-muted) }
.tquote details{ font-size:.9375rem }
.tquote summary{ cursor:pointer; color:var(--ink-muted); text-decoration:underline; text-underline-offset:3px; min-height:24px; display:inline-block }
.tquote summary:hover{ color:var(--ink) }
.tquote__full{ padding-top:.75rem; color:var(--ink-muted); max-width:62ch }
.tquote__full p{ margin:0 0 .75rem }
@media (max-width:800px){ .tquotes{ grid-template-columns:1fr } }

/* Hero image (21 Oct): anchor to the bottom so any cropping happens at the top. */
.hero__media img{ object-position:50% 100% }

/* Inter as the site typeface (21 Oct) */
:root{
  --font-display:'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
}
body{ font-feature-settings:'cv11','ss03' }
h1,h2{ letter-spacing:-.022em }
h1,h2,h3,h4{ font-weight:650 }
/* Hero headline: two lines on desktop, not three */
.hero h1{ max-width:26ch; text-wrap:balance }
/* Home page recent work: keep the bottom of each image, crop the top */
.homework .card .frame img{ object-position:50% 100% }

/* Client logos (21 Oct): trimmed files, each sized by shape so they read at a similar size */
.logos{ grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:var(--space-4) var(--space-4) }
.logos img{ width:auto; max-width:100%; margin:0 auto; opacity:.85 }

/* Hero video loop (21 Oct): fades in over the still once playing; still stays for phones and reduced motion */
.hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; opacity:0; transition:opacity .8s ease }
.hero__video.is-on{ opacity:1 }
.hero__body{ z-index:2 }
.hero__pause{ position:absolute; right:16px; bottom:16px; z-index:3; min-height:44px; padding:0 .9rem; background:rgba(0,0,0,.55); color:#fff; border:1px solid rgba(255,255,255,.45); font:inherit; font-size:.8125rem; cursor:pointer }
.hero__pause:hover{ border-color:#fff }
.hero__pause:focus-visible{ outline:2px solid #fff; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ .hero__video{ display:none } }

/* ---- 1.4 (October 2026): privacy and cookies page ---- */
.visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.footbar a{ color:inherit; text-underline-offset:3px }
.ptoc ol{ margin:var(--space-3) 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:.4rem 1.25rem; font-size:.9375rem }
.ptoc a{ color:var(--ink-muted); text-underline-offset:3px }
.ptoc a:hover{ color:var(--ink) }
.privacy .beat{ scroll-margin-top:96px }
.privacy .stack a{ color:inherit; text-underline-offset:3px }
.ctable{ overflow-x:auto; margin:var(--space-2) 0; -webkit-overflow-scrolling:touch }
.ctable table{ width:100%; min-width:620px; border-collapse:collapse; font-size:.875rem; line-height:1.4 }
.ctable th,.ctable td{ text-align:left; vertical-align:top; padding:.6rem .75rem .6rem 0; border-bottom:1px solid var(--rule) }
.ctable thead th{ font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); font-weight:600 }
.ctable tbody th{ font-weight:400 }
.ctable code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.8125rem; white-space:nowrap }
@media (max-width:700px){
  .ctable table,.ctable thead,.ctable tbody,.ctable tr,.ctable th,.ctable td{ display:block; min-width:0 }
  .ctable thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0) }
  .ctable tr{ padding:.75rem 0; border-bottom:1px solid var(--rule) }
  .ctable th,.ctable td{ border:0; padding:.15rem 0 }
  .ctable td::before{ content:attr(data-label) ": "; color:var(--ink-muted) }
}

/* ---- 1.4: iPhone fixes ----
   Safari lets a min-height stretch an aspect-ratio box sideways, so the hero
   grew wider than the screen on iPhones (and the page could be dragged left,
   taking the logo off screen). The hero now takes its height directly. */
@supports (overflow:clip){ html,body{ overflow-x:clip } }   /* clip, not hidden: hidden on both would break the sticky header */
.hero__media{ aspect-ratio:auto; width:100%; max-width:100%; height:max(56.25vw, min(78vh,760px)); min-height:0 }
@media (max-width:640px){ .hero__media{ height:min(52vh,520px) } }
.brand{ flex-shrink:0 }
.brand svg{ flex-shrink:0; aspect-ratio:5710.88/734; height:auto; max-width:none }

/* ---- 1.4: work filters ----
   Wider screens: chips, every row starting on the same line. Phones: one
   compact drop-down per filter instead of a wall of buttons. */
.filterrow{ flex-wrap:nowrap; align-items:flex-start }
.filterrow > .filterrow__label{ padding-top:.85rem }
.filterrow .chips{ display:flex; flex-wrap:wrap; gap:.5rem; min-width:0 }
.chip{ padding:.5rem .8rem }
.filtersel{ display:none }
@media (max-width:720px){
  .filters{ gap:.6rem }
  .filterrow{ display:grid; grid-template-columns:5.5rem minmax(0,1fr); align-items:center; gap:.75rem }
  .filterrow > .filterrow__label{ width:auto; padding-top:0 }
  .filterrow .chips{ display:none }
  .filtersel{
    display:block; width:100%; min-height:44px; padding:.55rem 2.25rem .55rem .8rem; font:inherit; font-size:.9375rem;
    color:var(--ink); background-color:transparent; border:1px solid var(--rule); border-radius:0; appearance:none; -webkit-appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
    background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px; background-repeat:no-repeat;
  }
  .filtersel:focus-visible{ outline:2px solid var(--ink); outline-offset:2px }
  .filtersel option{ color:#000 }
}

/* ---- 1.4: films and virtual tours on project pages ---- */
.films{ display:grid; gap:var(--space-4) }
.film{ margin:0 }
.film__frame{ position:relative; aspect-ratio:16/9; background:#111; overflow:hidden }
.film__frame video,.film__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000 }
.film figcaption{ margin-top:.6rem; font-size:.875rem }
.film figcaption a{ color:inherit; text-underline-offset:3px }
.vfacade,.tourbtn{ position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; background:#111; cursor:pointer; color:#fff; font:inherit }
.vfacade img,.tourbtn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.85; transition:opacity .2s }
.vfacade:hover img,.tourbtn:hover img,.vfacade:focus-visible img,.tourbtn:focus-visible img{ opacity:1 }
.vfacade:focus-visible,.tourbtn:focus-visible{ outline:2px solid #fff; outline-offset:-4px }
.vfacade__play{ position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; border-radius:50%; background:rgba(0,0,0,.6); border:2px solid rgba(255,255,255,.85) }
.vfacade__play::after{ content:""; position:absolute; left:31px; top:24px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent #fff }
.tourbtn__label{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.6rem; padding:.8rem 1.2rem; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.7); font-weight:600; white-space:nowrap }
.tourbox{ position:fixed; inset:0; width:100vw; height:100vh; max-width:none; max-height:none; margin:0; padding:0; border:0; background:#0b0b0b; color:#fff }
.tourbox::backdrop{ background:#0b0b0b }
.tourbox__bar{ position:absolute; left:0; right:0; top:0; height:56px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 16px; font-size:.875rem }
.tourbox__bar a{ color:#fff }
.tourbox__bar button{ min-height:44px; padding:0 .9rem; background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35); font:inherit; cursor:pointer }
.tourbox iframe{ position:absolute; left:0; right:0; top:56px; bottom:0; width:100%; height:calc(100% - 56px); border:0 }
/* Several films or tours sit in pairs; with an odd number, the first runs full width. */
@media (min-width:900px){
  .films{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .films > .film:first-child:nth-last-child(odd){ grid-column:1/-1 }
}

/* ---- 1.4: opening screen fits the window ----
   The banner is never taller than the window, so the headline and the line
   under it are always visible without scrolling. */
.hero__media{ height:clamp(520px, calc(100svh - var(--nav-h)), 56.25vw) }
@supports not (height:100svh){ .hero__media{ height:clamp(520px, calc(100vh - var(--nav-h)), 56.25vw) } }
@media (max-width:640px){ .hero__media{ height:min(52vh,520px) } }

/* ---- 1.4: awards with their logos ---- */
.awards3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-4) clamp(1.5rem,4vw,3rem); margin-top:var(--space-2) }
.award{ display:flex; flex-direction:column; gap:1rem; padding-top:1.25rem; border-top:1px solid var(--rule) }
.award__logo{ height:120px; display:flex; align-items:center }
.award__logo img{ max-height:100%; max-width:100%; width:auto; height:auto; object-fit:contain }
.award h3{ margin:0 0 .3rem; font-size:1rem }
.award p{ margin:0; color:var(--ink-muted); font-size:.9375rem; line-height:1.45 }
@media (max-width:800px){ .awards3{ grid-template-columns:1fr } .award{ flex-direction:row; align-items:center } .award__logo{ height:84px; flex:0 0 132px; justify-content:center } }

/* ---- 1.4: who we work with ---- */
.wholist{ list-style:none; margin:var(--space-3) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 clamp(1.5rem,3vw,2.5rem) }
@media (max-width:900px){ .wholist{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:480px){ .wholist{ grid-template-columns:1fr } }
.wholist li{ padding:.85rem 0; border-bottom:1px solid var(--rule); font-size:clamp(1.0625rem,1.5vw,1.25rem); font-weight:500; letter-spacing:-.01em }

/* ---- 1.4: client logo on each testimonial, same treatment as the logo wall ---- */
.tquote__logo{ display:flex; align-items:center; min-height:42px }
.tquote__logo img{ width:auto; max-width:160px; filter:grayscale(1) invert(1) brightness(1.6); opacity:.85 }

/* 1.5: the lead image on a project page shows whole, as the artists framed it (no 21:9 crop).
   Portrait or very tall images are capped at 80% of the screen height and centred. */
.frame--lead{ aspect-ratio:auto; background:transparent }
.frame--lead img{ position:static; width:100%; height:auto; max-height:80vh; max-height:80svh; object-fit:contain }
.frame--lead .zoom{ height:auto }
@media (max-width:600px){
  .zoom__hint{ right:8px; bottom:8px; padding:.35rem; font-size:0; gap:0 }
  .zoom__hint svg{ width:16px; height:16px }
}