/* ============================================================
   v3 mock C, the Collins pass (2026-11-09). Loaded after mock.css, instead of mock-b.css (B3 lives at index-b3.html,
   D at index-d.html). Kevin: pull more of wearecollins.com's look and feel, their case studies and how they show
   what they do; learn from their minimalism and type hierarchy; a brand reel instead of the scroller.

   What is taken from Collins (the grammar, never the parts):
   - one section pattern everywhere: a quiet sentence-case label, a serif line at a calm size, sometimes one button,
     then a lot of air before the content
   - labels and buttons in sentence case; no tracked capitals anywhere on the page
   - case studies as a row of tall cards whose tops step down, on the dark page
   - what we do as a ruled list: the name large on the left, one line on the right
   What stays DEPOPAS: Bespoke Serif and Inter, square corners, the ink button, the palette clock in the footer, the
   page turning dark on scroll.

   The page, in order: 1 hero and reel, 2 the problem (the page turns dark), 3 recent work (still dark), 4 what we do
   (back to white), 5 our process, 6 who does the work, 7 questions, 8 footer.
   ============================================================ */

/* ---------- type: one calm scale ---------- */
.eyebrow,.sh__l{font-family:var(--text);font-weight:450;font-size:16px;line-height:1.4;letter-spacing:0;text-transform:none;color:var(--muted)}
.h2{font-size:clamp(30px,3.1vw,44px);line-height:1.12;letter-spacing:-.022em}
.nav__links a.label{font-family:var(--text);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.foot .label{font-family:var(--text);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none}
.btn{height:52px;padding:0 24px;gap:12px;font-family:var(--text);font-size:15px;font-weight:500;letter-spacing:0;text-transform:none}
.btn .ar{display:inline-block;font-size:16px;transition:transform .35s cubic-bezier(.16,.84,.24,1)}
.btn:hover .ar{transform:translateX(4px)}

/* ---------- the section pattern ---------- */
.sec{padding:152px 0}
.sh{max-width:none}
.sh__l{margin-bottom:22px}
.sh__h{max-width:20ch;text-wrap:balance}
.sh__h--wide{max-width:31ch}
.sh__p{margin-top:22px;max-width:56ch;font-size:18px;line-height:1.5;letter-spacing:-.01em;color:var(--body);text-wrap:pretty}
.sh .btn{margin-top:36px}

/* ---------- 1. hero and reel ---------- */
.hero-c{padding:calc(72px + clamp(56px,10vh,112px)) 0 0;background:var(--page)}
.c__h1{font-size:clamp(48px,5.6vw,80px);line-height:1;letter-spacing:-.035em;max-width:none;text-wrap:wrap}
.c__sub{margin-top:28px;font-size:20px;line-height:1.45;letter-spacing:-.01em;color:var(--body)}
.c__ask{display:flex;align-items:center;gap:20px;margin-top:36px}
.c__note{font-size:14px;line-height:1.4;color:var(--muted)}
.reel{position:relative;margin:clamp(64px,10vh,104px) 0 0;aspect-ratio:16/9;overflow:hidden;background:var(--mount)}
.reel video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reel__tag{position:absolute;left:16px;bottom:16px;padding:8px 12px;background:rgba(0,16,20,.78);color:#fff;font-size:12px;line-height:1;font-weight:500}   /* mock only */

/* the nav: its button folds away while the hero's own ask is on screen */
.nav__links>.btn{max-width:240px;overflow:hidden;transition:max-width .6s cubic-bezier(.16,.84,.24,1),padding .6s cubic-bezier(.16,.84,.24,1),margin .6s cubic-bezier(.16,.84,.24,1),opacity .3s ease}
html.fold-now .nav__links>.btn{transition:none}
html.ask-on .nav__links>.btn{max-width:0;padding-left:0;padding-right:0;margin-left:-32px;opacity:0;pointer-events:none}

/* ---------- 3. recent work: tall cards, tops stepping down ---------- */
.cases{padding-top:40px}   /* the problem's own air sits above it */
.cs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:end;margin-top:88px}
.cs__c{display:block}
.cs__img{display:block;overflow:hidden;background:rgba(255,255,255,.06)}
.cs__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,.84,.24,1)}
.cs__c:hover .cs__img img{transform:scale(1.03)}
/* each piece keeps its whole artwork: a and c sit at their own proportions; b is a flat blue poster, so its frame is
   a little taller than the art and the same blue fills the difference */
.cs__c--a .cs__img{aspect-ratio:944/1342}
.cs__c--b .cs__img{aspect-ratio:3/4;background:#7ea7e7}
.cs__c--b .cs__img img{object-fit:contain}
.cs__c--c .cs__img{aspect-ratio:4/5}
.cs__cap{display:block;margin-top:18px;min-height:74px}
.cs__cap b{display:block;font-size:18px;font-weight:500;letter-spacing:-.01em;color:var(--fg)}
.cs__cap i{display:block;margin-top:6px;font-style:normal;font-size:15px;line-height:1.45;color:var(--muted);max-width:34ch}

/* ---------- 4. what we do: the ruled list ---------- */
.progs{margin-top:72px}
.prog{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,10fr);gap:32px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--hair)}
.prog h3{font-family:var(--text);font-weight:450;font-size:clamp(24px,2.1vw,30px);line-height:1.15;letter-spacing:-.022em;color:var(--fg)}
.prog p{font-size:17px;line-height:1.5;color:var(--body);max-width:54ch;text-wrap:pretty}
.prog--ask{border-bottom:0;padding-top:44px;padding-bottom:0}
.prog--ask .btn{margin-top:28px}
.prog .plan__date{color:var(--fg)}

/* ---------- 5. our process ---------- */
.steps{margin-top:56px}

/* ---------- 6. who does the work ---------- */
.who__in{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,5fr);gap:clamp(40px,8vw,140px);align-items:end}
.who__img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;background:var(--mount)}
.who__logos{display:flex;gap:36px;align-items:center;flex-wrap:wrap;margin-top:44px}
.who__logos img{height:20px;width:auto;opacity:.62;filter:brightness(0)}   /* the logo files are white, drawn for a dark field */
html[data-theme="dark"] .who__logos img,html[data-field="1"] .who__logos img{filter:none;opacity:.8}
.who .link{display:inline-block;margin-top:40px}

@media (max-width:900px){
  .who__in{grid-template-columns:1fr;align-items:start}.who__img{max-width:320px}
}
@media (max-width:700px){
  .sec{padding:96px 0}
  .eyebrow,.sh__l{font-size:15px}.sh__l{margin-bottom:16px}
  .sh__p{font-size:17px}
  .hero-c{padding-top:calc(56px + 40px)}
  .c__h1{font-size:44px;text-wrap:balance}
  .c__sub{margin-top:20px;font-size:17px}
  .c__ask{flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
  .c__note{font-size:13px}
  .reel{margin-top:48px}
  .cases{padding-top:24px}
  .cs{display:flex;gap:12px;margin:56px calc(var(--pad) * -1) 0;padding:0 var(--pad);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;align-items:flex-end}   /* phone: the row runs off the edge, like Collins' */
  .cs::-webkit-scrollbar{display:none}
  .cs__c{flex:0 0 72%;scroll-snap-align:center}
  .progs{margin-top:48px}
  .prog{grid-template-columns:1fr;gap:8px;padding:24px 0}
  .prog--ask{padding-top:32px}
  .steps{margin-top:32px}
  .who__logos{gap:24px;margin-top:32px}.who__logos img{height:16px}
}

/* ============================================================
   C2 (2026-11-09, Kevin's notes on C): a smaller headline and no small print in the hero; "Work with us" in place of
   "Free teardown"; the problem without its floating tags; no "who does the work"; Heirlume as a crop of its street
   wall; Hinterland as its roll lockup redrawn in its own palette (khaki ground, ink type, crop-green mark) so it
   stands off the dark page; in "what we do" the ask sits under the head and the sprint's terms close the list.
   ============================================================ */
.c__h1{font-size:clamp(44px,4.6vw,66px)}
.c__note{display:none}
.problem__stage{height:min(46vh,420px)}

/* Heirlume: the lobby poster, the yellow poster and the walker */
.cs__c--a .cs__img img{object-position:75% 50%}

/* Hinterland: the roll, after its brand film (studies/brands/hinterland/media/roll.mp4), drawn live in Survey khaki
   #C9BE9D, Ink #181911 and Crop green #82953D. Units are the card's width: 1cqw is 1/100 of it; the film's
   1080 px frame maps to 100cqw. mock-c.js moves the words. */
.hl-roll{position:relative;display:block;aspect-ratio:4/5;background:#C9BE9D;container-type:inline-size;overflow:hidden}
.hl-roll__list{position:absolute;inset:0}
.hl-roll__w{position:absolute;left:0;top:50%;font-family:"Helvena",-apple-system,sans-serif;font-weight:500;font-size:7.2cqw;line-height:1;letter-spacing:-.025em;color:#181911;white-space:nowrap;will-change:transform,opacity}
.hl-roll__chip{position:absolute;left:11cqw;top:50%;width:5.2cqw;height:5.2cqw;margin-top:-2.75cqw;background:#82953D;border-radius:.9cqw;z-index:1}
.hl-roll__chip svg{display:block;width:100%;height:100%;fill:#181911}

/* what we do: the terms close the list as one quiet line */
.progs__end{margin-top:28px;font-size:15px;line-height:1.55;color:var(--muted);max-width:none;text-wrap:pretty}
.progs__end .plan__date{color:var(--fg)}

@media (max-width:700px){
  .c__h1{font-size:40px}
  .problem__stage{height:auto;min-height:320px}
  .progs__end{font-size:14px}
}

/* C2b: the list after Collins' programs (Kevin: "theirs is so tasteful compared to ours"). Lighter names, one short
   grey line each, tighter rows, and the closing line in ink like their "All Programs (11)". */
.progs{margin-top:88px}
.prog{padding:26px 0;gap:32px}
.prog h3{font-weight:400;font-size:clamp(22px,2vw,28px);letter-spacing:-.018em}
.prog p{font-size:16px;line-height:1.45;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progs__end{margin-top:26px;font-size:15px;color:var(--fg)}
.hl-roll__chip{left:14.7cqw}
@media (max-width:700px){
  .progs{margin-top:56px}.prog{padding:20px 0;gap:6px}.prog p{white-space:normal;font-size:15px}
}
/* Heirlume: start the crop at the shutters, below the strip of sky */
.cs__c--a .cs__img img{height:112%;margin-top:-10%}

/* C2c: the work row after Collins' (Kevin, 11/09): "Coming soon" first and the tallest, three across, the row running on
   past the page's right edge so the next card shows a quarter of itself; scroll or swipe sideways for the rest. Tops
   the first card is the tallest and every card after it is one size (Kevin, 11/09). The coming-soon card is not a link. */
.cs{--bleed:calc(max(0px,(100vw - var(--max)) / 2) + var(--pad));display:flex;gap:20px;align-items:flex-end;
  margin-right:calc(var(--bleed) * -1);padding-right:var(--bleed);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.cs::-webkit-scrollbar{display:none}
.cs>.cs__c{flex:0 0 calc((100% - 40px) / 3);scroll-snap-align:start}
.cs>.cs__c:nth-child(1) .cs__img{aspect-ratio:2/3}
.cs>.cs__c:nth-child(n+2) .cs__img{aspect-ratio:3/4}   /* Kevin, 11/09: one big card, then every other card Heirlume's size, laptop and phone */
.x10{position:relative;container-type:inline-size}
.x10__bg,.x10__img{position:absolute;inset:0;width:100%;height:100%}
.x10__img{object-fit:cover}
.x10__mark{position:absolute;left:50%;top:50%;height:19cqw;transform:translate(-50%,-50%)}
.cs__c--soon{cursor:default}
.cs__c--soon:hover .cs__img img{transform:none}
@media (max-width:700px){
  .cs>.cs__c{flex:0 0 76%;scroll-snap-align:center}
  .cs{margin-right:calc(var(--pad) * -1);padding-right:var(--pad)}
}

/* C2d: the C type carried to the other pages (Kevin, 11/09: "any edits we've made to the styling of the homepage, start
   pulling that through"): no tracked capitals anywhere, so every small label, the work page's tags and the booking
   form's field names are sentence case in Inter, like the homepage's. */
.label{font-family:var(--text);font-weight:500;font-size:14px;letter-spacing:0;text-transform:none}
.bw__tags .label{font-weight:450;font-size:15px;color:var(--muted)}
.td-f label{font-family:var(--text);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none}
.td-days b{font-family:var(--text);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none}

/* C2e (Kevin, 11/09): Minimal Clinic's card in its creator orange (art/mc-ribbon-orange.jpg, the ribbon poster with its
   blue keyed to #F0B673), so it stands apart from X-10's blue beside it */
.cs__c--b .cs__img{background:#F0B673}

/* C2f (Kevin, 11/09): Hinterland's card on its bright green, Crop green #82953D, instead of Survey khaki, which read
   taupe and clashed with Minimal Clinic's orange beside it. The words in its Ink #181911; the chip in the palette's
   light green #C7CFA8 with Ink dots, since a Crop green chip would vanish on Crop green. */
.hl-roll{background:#82953D}
.hl-roll__w{color:#181911}
.hl-roll__chip{background:#C7CFA8}
.hl-roll__chip svg{fill:#181911}

/* C2g (Kevin, 11/09, on his phone: "the button doesn't color in"): the phone menu is always near black, but its button
   took the page's button colors (ink at the top of the page, the field colors in the footer turn), so it showed no
   fill or a stray color. In the menu it is always white with ink type. */
.menu .menu__cta,html[data-theme="dark"] .menu .menu__cta,html[data-field="1"] .menu .menu__cta{background:#fff!important;color:#001014!important;box-shadow:none!important}
.menu .menu__cta .ar{color:inherit!important}

/* C2h (Kevin, 11/09, on his phone: the work page's type "muddled"): on a phone the name leads, one quiet line of
   description, the tags small and grey, the link small. Before, the description, tags and link all read at one size. */
@media (max-width:800px){
  .bw__meta{gap:8px;margin-top:20px}
  .bw__meta .h3{font-size:30px;line-height:1.1}
  .bw__meta .body{font-size:16px;line-height:1.5;color:var(--body);max-width:none}
  .bw__tags{gap:2px 14px;margin-top:4px}
  .bw__tags .label{font-size:13px}
  .bw__meta .link{font-size:14px;margin-top:10px}
}

/* C2i (Kevin, 11/09, on his phone: the hero "too big... gets too close to the edge"): the headline down from 40px with
   real air at the right, and the sub a step quieter */
@media (max-width:700px){
  .c__h1{font-size:34px;line-height:1.05;letter-spacing:-.03em;max-width:none;text-wrap:wrap}
  .c__sub{font-size:16px;line-height:1.5}
}

/* C2j (Kevin, 11/09, on his phone: Heirlume "looking bigger than the two before it"): the row lines cards up at their
   bottoms, captions included, so a caption one line longer lifted its picture. Every caption now keeps room for the
   name and three lines, so the pictures' bottoms line up whatever the copy. */
.cs__cap{min-height:calc(18px * 1.3 + 6px + 15px * 1.45 * 3)}
@media (max-width:700px){.cs__cap{min-height:calc(18px * 1.3 + 6px + 15px * 1.45 * 3 + 4px)}}