/* 2026-10-12 THE ONE-SCREEN LANDING (James: "not making this a scroller, and having the landing page be just the hero").
   The page is the bar and the slab. The slab takes its size from the viewport: as wide as the wrap allows, but never
   taller than the space under the bar, so there is never a scrollbar on a desktop. Loaded fifth, landing only. */
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100svh}
#main{flex:1 1 auto;display:grid;place-items:center;padding:clamp(12px,1.6vw,22px) 0 clamp(16px,2.2vw,30px)}
/* width from the height: 16/9 of what's left under the bar and the paddings; capped by the wrap */
.hero.hero-two{
  --room:calc(100svh - 68px - clamp(12px,1.6vw,22px) - clamp(16px,2.2vw,30px) - 4px);
  width:min(1320px,calc(100% - var(--gutter)*2),calc(var(--room) * 16 / 9));
  margin:0 auto}
.bar+main .hero.hero-two{margin-top:0}
/* the lead for the people who won't watch: muted, on the kicker line, so the copy stays inside the film's paper band */
.hero-two .hero-lead{margin-left:14px;padding-left:14px;border-left:1px solid var(--rule);color:var(--muted);font:400 13px/1 var(--sans);letter-spacing:0;text-transform:none}
.hero.hero-two h1{font-size:clamp(30px,3.3vw,48px)}
@media (max-width:900px){
  html,body{height:auto}
  #main{display:block;padding:0}
  .hero.hero-two{width:min(1320px,calc(100% - var(--gutter)*2))}
  .hero-two .hero-lead{display:block;margin:8px 0 0;padding:0;border:0}
}

/* ── 2026-10-12 NO CONTAINER ON THE LANDING (James: "since its just a single page hero now do we really need the
   container?"). The viewport is the frame: the film runs edge to edge under the bar, cropped a few percent where the
   screen isn't 16:9 (the composition keeps its bottom quarter clear, so the copy never collides); the copy stays in
   the wrap. Under 900 px the film is 16:9 on top and the copy drops below, as before. */
@media (min-width:901px){
  #main{display:block;padding:0}
  .hero.hero-two{width:100%;max-width:none;margin:0;aspect-ratio:auto;height:calc(100svh - 69px);min-height:560px;
    background:var(--paper);border:0;border-radius:0;box-shadow:none;overflow:hidden}
  .hero-two .hero-frame{position:absolute;inset:0}
  .hero-two .hero-video{object-fit:cover;object-position:50% 50%}
  .hero-two .hero-copy{width:min(1320px,calc(100% - var(--gutter)*2));margin-inline:auto;padding-inline:0;padding-bottom:clamp(28px,3.6vw,52px)}
}

/* the hero's own button exists for phones only (James, desktop: "no button here either: the bar's Discuss a project is the one") */
.hero-two .hero-acts{display:none}

/* ── 2026-10-12 evening: the copy waits out the film's cold open, then rises in and STAYS (hero.js adds .up once at
   7.1 s; a fallback adds it after 2.5 s if the film never plays, and reduced motion gets it at once). One line, one
   button in the portal's style (.btn-ink); no eyebrow, no "See the work". */
.hero.hero-two .hero-copy{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.25,1,.5,1),transform .9s cubic-bezier(.25,1,.5,1)}
.hero.hero-two .hero-copy.up{opacity:1;transform:none}
.hero.hero-two .hero-acts{margin-top:18px}
@media (prefers-reduced-motion:reduce){.hero.hero-two .hero-copy{opacity:1;transform:none;transition:none}}

/* ── 2026-10-13 THE PHONE CUT (James: "make a separate video for the phone version adapted to 9:16 … wire it up on the
   preview"). Portrait phones get the 9:16 film (index.html's first <source>). Landscape phones and tablets keep the
   16:9 slab.
   2026-10-13 evening (James, on the phone: "the heading and discuss a project button are right on top of the bottom
   half of the video"): NO OVERLAP. The phone cut is composed full-frame (the built site, the bridge, the cards all live
   in its bottom half), so nothing can sit on it. The words get a fixed room at the foot (--words); the film takes every
   pixel left under the bar as a true 9/16 box, its width from that height, centred; the copy is the film's width so the
   headline lines up with the film's left edge. Nothing is cropped and there is still no room to scroll. */
@media (max-width:900px) and (orientation:portrait){
  .hero.hero-two{--words:132px;--fh:calc(100svh - 61px - 12px - var(--words));--fw:min(calc(var(--fh) * 9 / 16),calc(100vw - 32px));
    width:100%;max-width:none;margin:0;height:calc(100svh - 61px);min-height:0;padding-bottom:0;overflow:hidden}
  .bar+main .hero.hero-two{margin-top:0}
  .hero-two .hero-frame{width:var(--fw);height:auto;aspect-ratio:9/16;margin:12px auto 0;border:0;border-radius:12px;
    box-shadow:0 24px 50px -36px rgba(15,27,39,.5);background:var(--paper)}
  .hero-two .hero-frame::after{content:none}
  /* 14 top + two lines (60) + 10 + the 36 px button = 120 of the 132; the rest is paper under the button */
  .hero-two .hero-copy{width:var(--fw);margin:14px auto 0;padding:0;row-gap:0}
  /* (James) Discuss a project moves under the headline on phones, small; the bar's copy goes (landing only; the other pages keep it in the bar) */
  .bar .btn-ink{display:none}
  .hero.hero-two .hero-acts{display:block;margin-top:10px}   /* .hero.hero-two: the desktop rule's 18 px margin outranked the two-class one */
  .hero-two .hero-acts .btn-ink{min-height:36px;padding:0 13px 0 14px;gap:8px;font-size:12.5px}
  .hero-two .hero-acts .btn-ink .btn-ar{width:13px;height:13px}
  /* the headline scales with the film's width so it holds two lines on a small phone too (an SE's 200 px film → 20 px type) */
  .hero.hero-two h1{font-size:clamp(20px,calc(var(--fw) * .1),26px);line-height:1.15;max-width:none}
  .hero.hero-two h1 .h1-and{display:none}
  /* 2026-10-13 the bar waits out the cold open (its 61 px stay reserved, paper on paper), then slides in with the headline
     (hero.js adds .up to it at 7.1 s, or after 2.5 s if the film never plays); the menu is in it: About · Services · Work */
  .bar{opacity:0;transform:translateY(-10px);transition:opacity .6s cubic-bezier(.25,1,.5,1),transform .8s cubic-bezier(.25,1,.5,1)}
  .bar.up{opacity:1;transform:none}
}
@media (max-width:900px) and (orientation:portrait) and (prefers-reduced-motion:reduce){.bar{opacity:1;transform:none;transition:none}}