/* v4. The page Luc laid out on 2026-11-13. Sits on top of styles, media, story and theme. */

body{line-height:1.6}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
figure,blockquote{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.pill:focus-visible{border-radius:999px}

/* Nav lives outside the hero so it follows the whole page. */
body>.nav{position:sticky;top:0;z-index:50;margin:0;padding:24px 40px}
body>.nav.scrolled{padding-top:12px;padding-bottom:12px}

/* 1. Hero */
.hero.split{min-height:calc(100vh - 86px);padding-top:24px;gap:56px}
.hero.split h1 .w{display:inline-block;white-space:nowrap;opacity:0;transform:translateY(.38em);filter:blur(14px);animation:settle 1.25s cubic-bezier(.16,1,.3,1) forwards}
@keyframes settle{to{opacity:1;transform:none;filter:none}}
.hero.split h1 .l{display:inline-block;transition:transform .3s}
.hero.split h1.done .l:hover{transform:translateY(-4px)}
.hero.split .lead{max-width:52ch}
.hero.split .cta{flex-wrap:wrap}

/* The film frame. Neutral on purpose, it is an edit and not a Loom. */
.film{position:relative;border-radius:14px;overflow:hidden;background:#0F0F10;border:1px solid var(--rule)}
.film .scr{position:relative;aspect-ratio:16/10;overflow:hidden}
.film .scr .dash{border:0;border-radius:0;min-height:100%;transition:transform .9s cubic-bezier(.2,.8,.2,1);transform-origin:50% 40%}
.film:hover .scr .dash{transform:scale(1.02)}
.film .scr::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,0,0,.34),rgba(0,0,0,.08) 62%),linear-gradient(180deg,rgba(0,0,0,0) 62%,rgba(0,0,0,.55));pointer-events:none}
.film .play{z-index:2;width:76px;height:76px;margin:-38px 0 0 -38px;background:var(--ink);box-shadow:none}
.film .play::after{border-left-color:#121212}
.film:hover .play{transform:scale(1.08)}
.film .dur{top:auto;bottom:14px;right:14px;z-index:2}
.film .meta{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 18px;border-top:1px solid var(--rule);font-size:14px;color:var(--body);line-height:1.45}
.film .meta b{display:block;color:var(--ink);font-weight:500;font-size:16px;margin-bottom:2px}
.film .meta .mono{white-space:nowrap}

/* Tiles shrink with the frame instead of pushing out of it on a laptop. */
.dash .tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
.dash .t{min-width:0}
.dash .t .v{overflow:hidden;text-overflow:clip;white-space:nowrap}
.film .dash.full .t .v{font-size:clamp(16px,1.55vw,28px)}

/* Every stand in carries the same small tag, so nothing fake can pass for real. */
.tag{position:absolute;left:12px;top:12px;z-index:3;background:rgba(0,0,0,.6);color:rgba(255,255,255,.82);padding:4px 8px;border-radius:4px;font-size:10px}

/* Section heads. A heading, and now and then one plain note beside it. */
.head h2{max-width:20em}
.note{font-size:14px;color:var(--mute);max-width:34ch;line-height:1.5}
.head .note{text-align:right}

/* 2. The build in the film. No rules, no small labels. A statement, then a tour. */
.shot{box-shadow:none}
#work .head{margin-bottom:28px}
.statement{font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(23px,2.5vw,40px);line-height:1.22;letter-spacing:-0.025em;color:var(--ink);max-width:25em;margin:0 0 72px;text-wrap:pretty}
.statement .wd{opacity:.2;transition:opacity .4s linear}
.statement .wd.lit{opacity:1}

.tour{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr);grid-template-rows:repeat(4,auto);column-gap:72px}
.tour .step{display:contents}
.tour .txt{grid-column:1;min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;opacity:.26;transition:opacity .5s}
.tour .step:nth-child(1) .txt{grid-row:1}
.tour .step:nth-child(2) .txt{grid-row:2}
.tour .step:nth-child(3) .txt{grid-row:3}
.tour .step:nth-child(4) .txt{grid-row:4}
.tour .step.on .txt{opacity:1}
.tour .txt h3{font-size:clamp(30px,3.6vw,56px);letter-spacing:-0.035em;line-height:1}
.tour .txt p{font-size:17px;color:var(--body);max-width:30ch}
.tour .shot{grid-column:2;grid-row:1/-1;align-self:start;position:sticky;top:max(96px,calc(50vh - 255px));opacity:0;transform:translateY(22px) scale(.985);transition:opacity .22s linear,transform .75s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.tour .step.on .shot{opacity:1;transform:none;pointer-events:auto;transition:opacity .5s cubic-bezier(.2,.8,.2,1) .12s,transform .75s cubic-bezier(.2,.8,.2,1) .08s}
.tour .shot .dash{min-height:450px;font-size:12px}
.tour .shot .dash .t .v{font-size:24px}
.demo{margin:56px 0 0;font-size:15px;color:var(--mute);max-width:60ch}
/* With no screens yet, the four pages sit as a plain two by two. */
.tour:not(:has(.shot)){grid-template-columns:1fr 1fr;grid-template-rows:none;gap:44px 72px}
.tour:not(:has(.shot)) .step .txt{grid-column:auto;grid-row:auto;min-height:0;opacity:1}
.tour:not(:has(.shot)) .txt h3{font-size:clamp(26px,2.6vw,38px)}
.tour:not(:has(.shot)) .txt p{max-width:44ch}
figcaption{margin-top:14px;font-size:15px;color:var(--body);max-width:52ch}

/* The mocks reuse .r for red and for table rows. Keep the red ones from picking up row layout. */
.dash .t .d.r{display:block;border:0;padding:0}
.dash .cal i.r{display:block;border:0;padding:0}

/* Factory mock, the render tiles */
.dash .renders{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.dash .rn{position:relative;aspect-ratio:4/5;max-height:150px;width:100%;border-radius:6px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#2A2622,#17171A 70%);overflow:hidden}
.dash .rn .pl{position:absolute;left:6px;bottom:6px;background-color:rgba(0,0,0,.55)}

/* With no film in the frame there is nothing to dim the screen for. */
.film .scr:not(:has(.play))::after{background:none}

/* 3. Two more builds. Same rule as the agency section, no hairlines and no small labels. */
#builds .beats{gap:12px;margin-top:20px}
#builds .beat{display:block;border-top:0;padding:0;font-size:17px;max-width:44ch}
#builds .beat .mono{display:none}
#builds .story{align-items:start;padding:64px 0;border-top:0}
#builds .story:first-of-type{padding-top:8px}
#builds .story:last-of-type{padding-bottom:0}
#builds .story>div:first-child{position:sticky;top:110px}
.shots{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0}
.shots .shot:first-child{grid-column:1/-1}
.shots .shot.small .dash{grid-template-columns:1fr;min-height:0;font-size:10.5px}
.shots .shot.small .sb{display:none}
.shots .shot.small .r{grid-template-columns:1.5fr .9fr .9fr .9fr .9fr;gap:6px}
.shots .shot.small .r.h{letter-spacing:.02em}
.shots .shot.small .r>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shots .shot.small .t .v{font-size:17px}

/* 4. Interviews */
.talks{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.talk{display:flex;flex-direction:column;gap:16px;min-width:0}
.talk .ph.face{aspect-ratio:4/5;min-height:0;border-radius:10px}
.talk .quote{font-size:clamp(18px,1.5vw,22px);color:var(--mute)!important}

/* 5. Clips */
.clips{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.clips .ph.clip{aspect-ratio:9/16;min-height:0;border-radius:12px}
.clips .cap{padding:72px 16px 18px;font-size:14px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.82) 58%)}
.clips .cap .mono{color:rgba(255,255,255,.78)}

/* 6. FAQ */
.faq{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.faq-head{position:sticky;top:110px;display:flex;flex-direction:column;gap:16px}
.qa{border-top:1px solid var(--rule)}
.qa details{border-bottom:1px solid var(--rule)}
.qa summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 0;cursor:pointer;font-family:"Inter Tight",Inter,sans-serif;font-size:clamp(18px,1.6vw,23px);letter-spacing:-0.02em;line-height:1.2;transition:color .25s}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--ink)}
.qa summary i{position:relative;flex:0 0 auto;width:14px;height:14px}
.qa summary i::before,.qa summary i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--ink);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.qa summary i::after{transform:rotate(90deg)}
.qa details[open] summary i::after{transform:rotate(0)}
.qa details p{padding:0 40px 26px 0;max-width:62ch;color:var(--body);font-size:16px}
@supports (interpolate-size:allow-keywords){
  :root{interpolate-size:allow-keywords}
  .qa details::details-content{block-size:0;overflow:hidden;transition:block-size .4s cubic-bezier(.2,.8,.2,1),content-visibility .4s allow-discrete}
  .qa details[open]::details-content{block-size:auto}
}

/* 7. About. The photo is a portrait, not a wall. */
.about{grid-template-columns:.8fr 1.2fr}
.about .ph.photo{aspect-ratio:4/5;min-height:0}
.about .stack{max-width:60ch}

/* Pieces that are held back until the real thing exists. The layout closes up around the gap. */
#builds:not(:has(.shots)){display:grid;grid-template-columns:1fr 1fr;column-gap:64px}
#builds:not(:has(.shots)) .head{grid-column:1/-1}
#builds:not(:has(.shots)) .story{display:block;padding:0;border-top:0}
#builds:not(:has(.shots)) .story>div:first-child{position:static}
.about:not(:has(.ph)){grid-template-columns:1fr}
.about:not(:has(.ph)) .stack{max-width:none;display:grid;grid-template-columns:1fr 1fr;column-gap:64px;row-gap:20px;align-items:start}
.about:not(:has(.ph)) .stack h2{grid-row:span 3}
.hero.split:not(:has(.film)){grid-template-columns:1fr;align-content:center}
.hero.split:not(:has(.film)) h1{font-size:clamp(44px,7.4vw,112px);max-width:12em}
.hero.split:not(:has(.film)) .lead{font-size:19px;max-width:56ch}

/* Light. A slow warm field behind the whole page that moves as you scroll,
   a line that draws itself across the top of each section, and a glow under the tour screen. */
.glow{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.glow i{position:absolute;left:0;top:0;width:90vmax;height:90vmax;margin:-45vmax 0 0 -45vmax;border-radius:50%;will-change:transform,opacity}
.glow i:nth-child(1){background:radial-gradient(closest-side,rgba(150,112,80,.34),rgba(138,106,79,.13) 46%,rgba(138,106,79,0))}
.glow i:nth-child(2){background:radial-gradient(closest-side,rgba(112,92,140,.30),rgba(104,86,128,.11) 46%,rgba(104,86,128,0))}
.glow i:nth-child(3){width:70vmax;height:70vmax;margin:-35vmax 0 0 -35vmax;background:radial-gradient(closest-side,rgba(168,92,64,.26),rgba(150,84,62,.09) 46%,rgba(150,84,62,0))}
.glow::after{content:"";position:absolute;inset:0;background:url(grain.png)}
.hero.split{overflow:visible;overflow-x:clip}
.progress{background:linear-gradient(90deg,#8A6A4F,#C9A98A 55%,var(--ink))}
.sec{border-top:0}
.sec::before{content:"";position:absolute;top:0;left:40px;right:40px;height:1px;background:linear-gradient(90deg,rgba(201,169,138,.7),rgba(237,235,230,.2) 38%,rgba(237,235,230,0) 92%);transform-origin:left;pointer-events:none}
.sec.ln::before{transform:scaleX(0);opacity:0;transition:transform 1.6s cubic-bezier(.16,1,.3,1),opacity .6s linear}
.sec.ln.seen::before{transform:none;opacity:1}
.enquire{background:rgba(255,255,255,.022)}
.tour .step:nth-child(1) .shot{box-shadow:0 0 150px -30px rgba(150,112,80,.5)}
.tour .step:nth-child(2) .shot{box-shadow:0 0 150px -30px rgba(112,92,140,.5)}
.tour .step:nth-child(3) .shot{box-shadow:0 0 150px -30px rgba(168,92,64,.45)}
.tour .step:nth-child(4) .shot{box-shadow:0 0 150px -30px rgba(160,136,96,.45)}

/* Form. One hidden field for bots, one line that says what happened. */
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form-note{min-height:1.5em;margin:-12px 0 0;font-size:14px;color:var(--mute)}
.form button:disabled{opacity:.5;cursor:default}

/* Footer links */
.foot a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .hero.split h1 .w{animation:none;transform:none;opacity:1;filter:none}
  .glow i{transition:none}
  .sec.ln::before{transition:none;transform:none;opacity:1}
  .film .scr .dash,.qa summary i::before,.qa summary i::after,.tour .txt,.tour .shot{transition:none}
  .tour .shot{transform:none}
  .statement .wd{opacity:1;transition:none}
  .qa details::details-content{transition:none}
}
body.static .hero.split h1 .w{animation:none;transform:none;opacity:1;filter:none}
body.static .sec.ln::before{transition:none;transform:none;opacity:1}
body.static *{scroll-behavior:auto}
body.static .statement .wd{opacity:1}

@media (max-width:1100px){
  .hero.split{grid-template-columns:1fr;gap:36px;min-height:0;padding-bottom:56px}
  .hero.split h1{font-size:clamp(40px,8vw,72px)}
}
@media (max-width:900px){
  body>.nav{padding:16px 20px}
  .sec::before{left:20px;right:20px}
  .tour .step .shot{box-shadow:none}
  .hero.split{padding-top:12px}
  .head .note{text-align:left}
  .talks,.faq,.about{grid-template-columns:1fr}
  .statement{margin-bottom:44px}
  .tour,.tour:not(:has(.shot)){display:block}
  .tour .step{display:block;margin-bottom:44px}
  .tour .step:last-child{margin-bottom:0}
  .tour .txt{min-height:0;opacity:1;margin-bottom:16px;gap:8px}
  .tour .shot{position:static;opacity:1;transform:none;pointer-events:auto}
  .tour .shot .dash{min-height:0}
  .tour:not(:has(.shot)) .step{margin-bottom:28px}
  .demo{margin-top:36px}
  #builds .story{padding:44px 0}
  #builds .story>div:first-child,.faq-head{position:static}
  #builds:not(:has(.shots)){display:block}
  #builds:not(:has(.shots)) .story+.story{margin-top:36px}
  .about:not(:has(.ph)) .stack{display:flex}
  .faq{gap:28px}
  .qa details p{padding-right:0}
  .film .meta{flex-direction:column;align-items:flex-start;gap:6px}
  /* Clips and interviews scroll sideways on a phone, so four tall videos never stack. */
  .clips,.talks{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -20px;padding:0 20px 8px;scrollbar-width:none}
  .clips::-webkit-scrollbar,.talks::-webkit-scrollbar{display:none}
  .clips .ph.clip{flex:0 0 66%;scroll-snap-align:center}
  .talk{flex:0 0 78%;scroll-snap-align:center}
}
@media (max-width:560px){
  .shots{grid-template-columns:1fr}
  .dash .renders{grid-template-columns:repeat(4,1fr);gap:6px}
}