/* 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 } }