/* Disk Media - rebuilt 21-09-2026, revised the same day after a design and a copy review.
   Notes below record WHY, because several of these look like taste and are not. */

/* The wordmark in the logo IS Kamerik 105 Bold, so the old system-font-only page pegged
   Kamerik against SF Pro 30px apart in the header. The "no webfonts, renders instantly"
   argument did not survive an autoplaying hero video: two subset weights are 24 KB, well
   under 1% of the reel. Body text on the 14,000px terms page stays on the system stack,
   where SF Pro's x-height genuinely reads better. */
@font-face{font-family:Kamerik;src:url(fonts/kamerik-book.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Kamerik;src:url(fonts/kamerik-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --ink:#181818;
  --ink-soft:#6a6a68;
  --paper:#fff;
  --black:#000;
  --accent:#3881ff;             /* never on body text: 3.65:1 on white */
  --line:rgba(24,24,24,.42);    /* was .14 = 1.33:1, and it was the ONLY cue a link was a link */
  --gut:clamp(20px,5vw,64px);
  --maxw:1320px;
  --r:14px;
  --display:Kamerik,-apple-system,BlinkMacSystemFont,"SF Pro Display",Inter,system-ui,sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,"Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);
  font-size:clamp(16px,1.05vw,17px);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.022em;line-height:1.05;margin:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px}

/* ---- header ------------------------------------------------------------ */
/* Sticky: past the hero there was no route to contact except the very bottom of a 3000px
   phone page, and contact is the only conversion on the site. */
.site-head{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:14px var(--gut);background:rgba(255,255,255,.88);backdrop-filter:saturate(1.6) blur(14px);
  border-bottom:1px solid rgba(24,24,24,.08)}
.site-head .logo{display:block;width:clamp(116px,11vw,150px);padding-block:12px}  /* 13px tall = under the 24px AA floor */
.head-link{font-family:var(--display);font-size:.95rem;text-decoration:none;padding:12px 2px;border-bottom:1px solid transparent;transition:border-color .18s}
.head-link:hover{border-bottom-color:currentColor}

/* ---- hero -------------------------------------------------------------- */
/* Actually full bleed now. It used to sit inside .wrap as a 1192px rounded card with 124px of
   white each side, and because the opening shot is a white wall its top edge dissolved into
   the page. The reel itself was rebuilt too: the old one had letterbox and pillarbox bars
   baked into the file, which no amount of object-fit can remove. */
.hero{position:relative;width:100%;background:#0d0d0d;overflow:hidden}
.hero video{width:100%;height:clamp(420px,72vh,820px);object-fit:cover}
/* On a phone the box is portrait and cover throws away ~58% of every frame, so cap it nearer
   the shot's own ratio instead of filling the screen. */
@media (max-width:700px){.hero video{height:clamp(260px,46vh,420px)}}
.hero-copy{position:absolute;left:0;right:0;bottom:0;padding:clamp(22px,4vw,52px) var(--gut);
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.28) 55%,rgba(0,0,0,0))}
.hero-copy h1{max-width:18em;margin:0 auto;width:100%;max-width:min(18em,var(--maxw));color:#fff;
  font-size:clamp(28px,4.4vw,56px);letter-spacing:-.028em;text-wrap:balance}
@media (min-width:1448px){.hero-copy{padding-inline:calc((100vw - var(--maxw))/2 + var(--gut))}}

/* ---- sections ---------------------------------------------------------- */
.section{padding-block:clamp(48px,6.5vw,88px)}
.section--intro{padding-block:clamp(40px,5vw,68px)}
.section--dark{background:var(--black);color:#fff}
.section-h{font-size:clamp(20px,2.1vw,26px);margin:0 0 clamp(16px,2vw,24px)}

/* The measure has to sit on the CHILD in its own em. On the parent, 62ch resolved against the
   16px container while the text renders at 26px, so the lede broke at ~38 characters. */
.lede{display:grid;gap:clamp(10px,1.4vw,16px)}
.lede p{margin:0;font-size:clamp(19px,1.9vw,25px);line-height:1.32;letter-spacing:-.016em;max-width:19em;font-family:var(--display);font-weight:400}
.lede p+p{font-size:clamp(16px,1.15vw,18px);line-height:1.55;letter-spacing:0;color:var(--ink-soft);max-width:36em;font-family:var(--text)}

/* ---- work grid --------------------------------------------------------- */
/* Two columns, not three. At three the films were 384x216 - smaller than a YouTube search
   result - and the work took 17% of the page while the footer took 27%. Two columns makes
   them 648x365, a 2.25x area increase, on the page whose entire job is showing the work. */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(12px,1.6vw,24px);list-style:none;margin:0;padding:0}
@media (min-width:1800px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}

.case{position:relative;margin:0}
.case a,.case .static{display:block;position:relative;border-radius:var(--r);overflow:hidden;background:#eee;text-decoration:none;color:#fff}
/* height:auto is load-bearing: with width/height attributes set and no height:auto the
   attribute height wins, aspect-ratio is ignored, and every tile rendered 384x900. */
.case img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.case a:hover img{transform:scale(1.03)}
.case .scrim{position:absolute;inset:auto 0 0 0;height:58%;background:linear-gradient(to top,rgba(0,0,0,.8),rgba(0,0,0,.26) 48%,rgba(0,0,0,0));pointer-events:none}
.case .meta{position:absolute;left:0;bottom:0;padding:clamp(14px,1.5vw,22px);z-index:1}
.case .client{display:block;font-family:var(--display);font-weight:700;font-size:clamp(17px,1.5vw,22px);letter-spacing:-.018em;text-shadow:0 1px 14px rgba(0,0,0,.45)}
.case .kind{display:block;font-size:.86rem;color:rgba(255,255,255,.8);margin-top:3px}
.case .play{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.case .play span{width:clamp(48px,3.6vw,62px);aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.93);display:grid;place-items:center;transition:transform .25s,background .25s}
.case .play svg{width:36%;height:36%;fill:#111;margin-left:8%}
.case a:hover .play span{transform:scale(1.07);background:#fff}
.case--nofilm .play{display:none}
.case--nofilm .static{cursor:default}

/* ---- lightbox ---------------------------------------------------------- */
/* Backdrop was .93 alpha, so the homepage text was legible THROUGH the film. The close button
   was rgba(255,255,255,.14) on it = 1.21:1, i.e. an invisible button with a visible cross. */
.lb[hidden]{display:none}
.lb{position:fixed;inset:0;z-index:50;background:#050505;display:grid;place-items:center;grid-auto-rows:min-content;gap:14px;padding:clamp(14px,4vw,48px)}
.lb video{width:min(100%,1400px);max-height:82vh;border-radius:8px;background:#000}
.lb video.is-portrait{width:auto;height:min(82vh,1000px)}
.lb-title{color:rgba(255,255,255,.72);font-size:.95rem;text-align:center}
.lb-title b{font-family:var(--display);font-weight:700;color:#fff;margin-right:.5em}
.lb .close{position:absolute;top:clamp(10px,2vw,22px);right:clamp(10px,2vw,22px);width:44px;height:44px;
  border:1px solid rgba(255,255,255,.38);border-radius:50%;background:rgba(255,255,255,.22);color:#fff;font-size:22px;line-height:1;cursor:pointer}
.lb .close:hover{background:rgba(255,255,255,.34)}

/* ---- cta --------------------------------------------------------------- */
/* Was clamp(2.1rem,6.4vw,4.6rem) = 74px, the largest thing on a film company's site, and the
   page's only heading. The work outranks the call to action now. */
.cta{background:var(--ink);padding-block:clamp(48px,5.5vw,84px)}   /* #181818 against the footer's #000 so they stop merging into one slab */
.cta h2{font-size:clamp(26px,4.2vw,46px);letter-spacing:-.03em;max-width:16em}
.cta-sub{margin:.6em 0 0;color:rgba(255,255,255,.66);font-size:clamp(16px,1.2vw,18px)}
.cta .go{display:inline-flex;align-items:center;gap:.5em;margin-top:clamp(20px,2.6vw,30px);font-family:var(--display);
  font-size:clamp(17px,1.5vw,21px);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.4);padding:8px 0 .2em;transition:border-color .2s,gap .2s}
.cta .go:hover{border-bottom-color:#fff;gap:.85em}
.cta .go svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.6}

/* ---- contact / prose --------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(20px,3vw,44px)}
.contact-grid h1{grid-column:1/-1;margin:0;font-size:clamp(34px,5.4vw,60px);letter-spacing:-.032em}
.contact-intro{grid-column:1/-1;margin:.1em 0 clamp(14px,2vw,26px);max-width:34em;font-size:clamp(17px,1.4vw,20px);color:var(--ink-soft)}
.dl{margin:0}
.dl dt{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft)}
.dl dd{margin:.25em 0 0;font-size:1.1rem}          /* rhythm comes from the grid's row-gap, not from dd margins */
.dl dd+dt{margin-top:26px}
.dl a{display:inline-block;padding-block:8px;text-decoration:none;border-bottom:1px solid var(--line)}
.dl a:hover{border-bottom-color:currentColor}

/* 90 characters per line over 14 metres of scroll, with headings 2.4px larger than body. */
.prose{max-width:640px}
.prose h1{font-size:clamp(30px,4.6vw,46px);margin:0 0 1em}
.prose h2.art{font-size:clamp(21px,2.4vw,26px);margin:72px 0 .5em;padding-top:22px;border-top:1px solid var(--line)}
.prose h3{font-family:var(--display);font-size:17px;font-weight:700;margin:2em 0 .5em;letter-spacing:-.01em;color:var(--ink)}
.prose p{margin:0 0 1em;color:#2f2f2f}
.prose ol.toc{margin:0 0 2.6em;padding:0;list-style:none}
.prose ol.toc li{margin-bottom:.4em}
.prose ol.toc a{text-decoration:none;border-bottom:1px solid var(--line)}

/* ---- footer ------------------------------------------------------------ */
.site-foot{background:var(--black);color:#fff;padding-block:clamp(36px,4vw,56px)}
.foot-top{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding-bottom:clamp(24px,3vw,34px);border-bottom:1px solid rgba(255,255,255,.16)}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;text-align:left}}
.foot-top .logo{display:block;width:clamp(112px,10vw,146px);padding-block:12px}
.social{display:flex;gap:14px;justify-self:center}
@media (max-width:760px){.social{justify-self:start}}
.social a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .2s}
.social a:hover{background:rgba(255,255,255,.26)}
.social svg{width:17px;height:17px;fill:#fff}
.foot-contact{justify-self:end;text-align:right;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.8)}
@media (max-width:760px){.foot-contact{justify-self:start;text-align:left}}
.foot-contact a{display:inline-block;padding-block:6px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.34)}
.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:clamp(14px,2vw,22px);font-size:.85rem;color:rgba(255,255,255,.62)}
.foot-bot a{display:inline-block;padding-block:8px;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.32)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .case a:hover img{transform:none}
}