/* formats/one-page/format.css - Brackenhaw Frames, the one-page scroll demo.
   Brand truth: formats/one-page/BRAND.md. Every selector is prefixed .fmt-one-page.
   Layout, tiles, rows, chat, band and reveal come from shared.css; this file sets the brand hooks,
   the Fraunces display face (one weight, 500, opsz driven by size) and the page recipes.
   Rhythm and grounds: hero (oat, the display word and one print breaking the grid) > proof (hairline grid) > services (ground2)
   > band (full bleed image) > work (oat, hairline under each caption) > studio (ground2) > questions
   (end grain texture under ground2) > contact (deep green panel) > footer (ground2).

   CLASS INVENTORY (what the html agent writes, in page order)
   nav      header.f-nav > .container.f-nav-in > a.f-brand(.f-mark inline svg + name)
            + nav.f-tabs#f-tabs(span.f-ink[aria-hidden] + a href="#services|#work|#studio|#questions")
            + .f-nav-acts > a.pill.pill-ink.sm[href="#contact"] Start
   hero     section.hero-f.hero.op-hero > .container.op-grid
              span.k.op-k | h1.h1.op-h1#hero-h > span.op-big (span.op-w > span x2, "oak" is span.op-oak) + span.op-deck
              .op-copy(p.lead, .row(a.pill.pill-ink.lg Start, a.pill.pill-ghost.lg Open), p.micro)
              figure.op-fig#op-fig > .op-print > picture (brackenhaw-mortise, eager high)
                                   + .chat.op-chat[data-chat=static] with the three lines written in
   proof    section.proof.sec-sm.sec-flush > .container > h2.visually-hidden#proof-h + ul.proof-list > li(b + span) x3
   services section#services.svc.sec-tint > .container > .sec-h(span.k, h2.h2#services-h, p.sub)
              + .grid.g-3.svc-grid > article.hcard.svc-c x3 (span.hcard-k, h3.hcard-t, p.hcard-p, ul.svc-l > li x3)
   band     section.band-sec > .container > figure.band > picture(band, lazy async) + figcaption.figcap(span.k, b, span)
   work     section#work.work > .container > .sec-h(span.k, h2.h2#work-h, p.sub)
              + .grid.g-3.work-grid > figure.fig.work-fig x3 (picture > img 4:3 lazy async, figcaption.fig-cap(b + span))
              + p.work-note
   studio   section#studio.studio.sec-tint > .container > .studio-grid
              .studio-fig: .tile.tile-4x3.studio-tile[data-tile] > picture(studio) + .tile-inset.studio-inset > picture(portrait)
                           (the inset is a SIBLING of the tile, it hangs off the tile's lower left corner)
              .studio-copy: span.k, h2.h2#studio-h, p.sub, ul.rows.people > li(b + span) x3, p.micro
   questions section#questions.qa.sec-tint > .container > .q-grid
              .sec-h.q-head(span.k, h2.h2#questions-h, p.sub) + .faq > details(summary + .faq-b > p) x5
   contact  section#contact.cta.sec-flush > .container > .tile.cta-tile[data-tile]
              .shader[data-shader="grain"][aria-hidden] (open to ?palette=, no data-palette-fixed; the brand tint
              comes from shared.js data-brand-palette, see requests)
              + .cta-in > .cta-copy(span.k, h2.h2#cta-h, p.sub)
                        + .cta-act(form.cta-form#cta-form(label.visually-hidden[for=cta-note], input.cta-f#cta-note,
                          button.pill.pill-ink.lg Send), p.cta-ok#cta-ok[role=status][hidden], p.micro)
              .cta-tile carries its own on-green tokens; .ground-accent is not needed on it
   footer   footer.f-foot > .container.f-foot-in > a.f-brand(.f-mark + name) + p (the disclaimer)
   notes    one .lead on the page (the hero); section sublines are p.sub. Eyebrows are span.k, written in sentence case.
            .ex pills (shared) may sit in .work-note or .fig-cap span. No .hcard.work-c, no .shader-still, no mesh tile. */

/* ---------- type: Fraunces, quoted verbatim from assets/fonts/BRANDS.md (opsz 72, wght 500 against Georgia) ---------- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/fraunces-display.woff2') format('woff2')}
@font-face{font-family:'Fraunces Fallback';src:local('Georgia');size-adjust:97.5%;ascent-override:100.3%;descent-override:26.2%;line-gap-override:0%}

/* ---------- brand hooks (BRAND.md palette) ---------- */
.fmt-one-page{
  --b-ground:#F6F2EA;--b-ground2:#EFE9DE;--b-ink:#1B1A16;--b-accent:#24352A;--b-accent-tint:#DCE3D8;
  --b-on-accent:#F6F2EA;--b-on-accent-dim:#C9D3C7;
  --b-display:'Fraunces','Fraunces Fallback',Georgia,serif;--b-display-weight:500;
  --b-line:rgba(27,26,22,.14);--b-surface:#F6F2EA;--b-focus:#24352A;
  --text-2:#665F52;--text-3:#6E6254;--bg-3:#E6DFD1;--line-control:rgba(27,26,22,.4);
  --b-dot:#24352A;--b-dot-ring:#DCE3D8;
  --r-tile:16px;--r-card:12px;
}
.fmt-one-page main{background:var(--bg)}

/* ---------- the display face: one weight, the browser drives opsz from the size ---------- */
.fmt-one-page .f-brand,.fmt-one-page main .h1,.fmt-one-page main .h2,.fmt-one-page .fig-cap b{
  font-family:var(--b-display);font-weight:500;font-optical-sizing:auto;font-synthesis:none}
.fmt-one-page main .h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.02em;line-height:1.02;max-width:none}
.fmt-one-page main .h2{font-size:clamp(28px,3.4vw,44px);letter-spacing:-.015em;line-height:1.1;max-width:20ch;margin-bottom:16px}
/* the face is only for h1, h2, the work captions and the lockup: card titles and the band caption stay Inter */
.fmt-one-page main .hcard-t,.fmt-one-page .figcap b{font-family:var(--font-sans);font-weight:500}
.fmt-one-page .f-brand{font-size:18px;letter-spacing:-.01em;gap:9px;color:var(--ink);white-space:nowrap;flex:none}
@media (max-width:420px){.fmt-one-page .f-brand{font-size:16px;gap:7px}.fmt-one-page .f-tabs{gap:14px}}
.fmt-one-page .f-mark{color:var(--accent)}
.fmt-one-page .f-mark svg *{fill:currentColor}
/* eyebrow: a small green tenon square before the label, sentence case in the html, upper case here */
.fmt-one-page main .k{display:flex;align-items:center;gap:10px;color:var(--accent);margin-bottom:16px}
.fmt-one-page main .k::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:1px;flex:none}
.fmt-one-page .lead{color:var(--text-2)}
.fmt-one-page .sub{font-size:clamp(16px,1.25vw,19px);color:var(--text-2);line-height:1.5;max-width:48ch;margin:0 0 clamp(20px,2.4vw,28px)}
.fmt-one-page .sec-h .sub{margin-bottom:0}
.fmt-one-page main p a{color:var(--accent);text-underline-offset:3px}
.fmt-one-page main .pill-ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.fmt-one-page main .pill-ghost:hover{background:var(--accent-tint);border-color:transparent}
.fmt-one-page .f-nav .pill-ink{background:var(--ink);color:var(--bg)}
.fmt-one-page .micro{color:var(--text-3)}

/* ---------- nav: one underline that slides to the section in view (format.js) ---------- */
.fmt-one-page .f-nav{border-bottom-color:var(--line)}
.fmt-one-page .f-tabs{position:relative}
.fmt-one-page .f-tabs a.is-on::after,.fmt-one-page .f-tabs a[aria-current]::after{display:none}
.fmt-one-page .f-ink{position:absolute;left:0;bottom:-2px;height:1px;width:0;background:var(--ink);
  transform:translateX(0);transform-origin:left center;opacity:0;pointer-events:none;
  transition:transform .42s var(--ease),width .42s var(--ease),opacity .2s var(--ease)}
.fmt-one-page .f-ink.is-on{opacity:1}
@media (max-width:820px){.fmt-one-page .f-ink{display:none}}

/* ---------- hero: editorial, type led, one print breaking the grid ----------
   The display word "Green oak" is the picture: Fraunces 500 at poster size across most of the measure, "oak" in the
   deep green. The rest of the h1 hangs under it as a deck, then the lead and the one next step. One tall print of a
   mortise being cut stands in the right column and runs off the page edge; a hairline under the display word runs
   behind it, and the assistant card is pinned across the print's lower left corner, into the text column. The print
   is held under the h1's area at 1440 and 390 so the headline stays the largest paint.
   Motion: the headline settles (never hidden, so it is painted at once), the rule draws, the print is let down from the top like a beam on a
   rope, and on scroll the print drifts inside its frame (CSS scroll timeline where supported). Reduced motion:
   everything rests in place. */
.fmt-one-page .op-hero{position:relative;padding-top:clamp(28px,3.6vw,56px);padding-bottom:clamp(40px,4.6vw,72px);overflow:clip}
.fmt-one-page .op-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,23.5vw,340px);column-gap:clamp(32px,4.4vw,72px);
  grid-template-areas:"k fig" "h1 fig" "copy fig";grid-template-rows:auto auto 1fr;align-items:start}
.fmt-one-page .op-k{grid-area:k;margin-bottom:clamp(14px,1.8vw,26px)}
.fmt-one-page .op-h1{grid-area:h1;margin:0;position:relative;z-index:1;line-height:1;padding-bottom:clamp(22px,2.4vw,34px)}
/* every part of the h1 is inline, so the browser reads the whole headline as one text block for the largest paint */
.fmt-one-page .op-big{font-size:clamp(84px,13.6vw,200px);line-height:.94;letter-spacing:-.05em;margin-left:-.05em}
.fmt-one-page .op-oak{color:var(--b-accent)}
.fmt-one-page .op-deck{font-size:clamp(28px,2.9vw,44px);line-height:1.5;letter-spacing:-.025em}
/* the rule the print breaks: from the headline to the page edge, behind the print */
.fmt-one-page .op-h1::after{content:"";position:absolute;left:0;bottom:0;width:100vw;height:1px;background:var(--b-line);transform-origin:left center}
.fmt-one-page .op-copy{grid-area:copy;margin-top:clamp(22px,2.4vw,34px)}
.fmt-one-page .op-copy .lead{margin:0 0 clamp(20px,2.2vw,28px);max-width:40ch;color:var(--text-2)}
.fmt-one-page .op-copy .micro{margin-top:clamp(16px,1.8vw,22px);max-width:44ch}

.fmt-one-page .op-fig{grid-area:fig;position:relative;z-index:2;margin:0;align-self:start;
  margin-right:calc(-1 * (var(--gutter) + max(0px, (100vw - var(--maxw)) / 2)))}
.fmt-one-page .op-print{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--bg-3)}
.fmt-one-page .op-print picture,.fmt-one-page .op-print img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.fmt-one-page .op-print img{object-position:52% 40%}
.fmt-one-page .op-chat{position:absolute;z-index:3;left:clamp(-190px,-11vw,-120px);bottom:clamp(20px,2.4vw,36px);width:clamp(260px,21vw,300px);
  padding:13px 13px 8px;background:var(--bg)}
.fmt-one-page .op-chat .chat-head{font-size:12px;margin-bottom:10px}
.fmt-one-page .op-chat .chat-log{min-height:0;gap:7px}
.fmt-one-page .op-chat .bub{font-size:13.5px;line-height:1.34;padding:8px 12px;max-width:92%}
.fmt-one-page .op-chat .chat-foot{height:14px;margin-top:4px}
.fmt-one-page .chat{border-color:var(--line);box-shadow:0 24px 56px -30px rgba(27,26,22,.4)}
.fmt-one-page .chat-head .dot{background:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
.fmt-one-page .bub.out{background:var(--ink);color:var(--bg)}

@media (prefers-reduced-motion:no-preference){
  .fmt-one-page .op-h1{animation:op-settle 1.2s var(--ease) both}
  .fmt-one-page .op-h1::after{animation:op-draw 1.4s var(--ease) .35s both}
  .fmt-one-page .op-copy,.fmt-one-page .op-k{animation:op-up .9s var(--ease) both}
  .fmt-one-page .op-copy{animation-delay:.45s}
  .fmt-one-page .op-print{animation:op-lower 1.3s cubic-bezier(.65,0,.35,1) .15s both}
  .fmt-one-page .op-chat{animation:op-up .8s var(--ease) 1s both}
  @supports (animation-timeline:view()){
    .fmt-one-page .op-print img{transform:scale(1.12);animation:op-drift linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
}
@keyframes op-settle{from{transform:translateY(22px)}to{transform:none}}
@keyframes op-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes op-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes op-lower{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes op-drift{from{transform:scale(1.12) translateY(-4%)}to{transform:scale(1.12) translateY(4%)}}

@media (max-width:1100px) and (min-width:901px){
  .fmt-one-page .op-big{font-size:clamp(76px,11vw,120px)}
  .fmt-one-page .op-chat{left:-96px}
}
@media (max-width:900px){
  .fmt-one-page .op-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"k" "h1" "copy" "fig";grid-template-rows:none}
  .fmt-one-page .op-big{font-size:clamp(72px,25vw,150px);line-height:.88}
  .fmt-one-page .op-deck{font-size:clamp(28px,8.4vw,40px);line-height:1.12}
  .fmt-one-page .op-h1 br{display:block;content:"";margin-top:16px}
  /* the print hangs off the right edge at half the width; the card sits across its lower left and below it */
  .fmt-one-page .op-fig{justify-self:end;width:min(52vw,320px);margin-top:36px;margin-bottom:220px}
  .fmt-one-page .op-chat{left:calc(var(--gutter) - (100vw - min(52vw,320px)));bottom:-196px;width:min(300px,calc(100vw - 2 * var(--gutter) - 24px))}
}
/* ---------- proof strip: three items on a hairline grid ---------- */
.fmt-one-page .proof-list{list-style:none;margin:0;padding:0;display:grid;gap:0;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.fmt-one-page .proof-list li{display:grid;gap:6px;align-content:start;padding:clamp(20px,2.4vw,28px) clamp(20px,2.4vw,32px);border-left:1px solid var(--line)}
.fmt-one-page .proof-list li:first-child{border-left:0;padding-left:0}
.fmt-one-page .proof-list b{font-weight:500;font-size:17px;letter-spacing:-.01em}
.fmt-one-page .proof-list span{font-size:15px;color:var(--text-2);line-height:1.45;max-width:36ch}
@media (max-width:900px){
  .fmt-one-page .proof-list{grid-template-columns:1fr}
  .fmt-one-page .proof-list li{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-right:0}
  .fmt-one-page .proof-list li:first-child{border-top:0}
}

/* ---------- services: three oat cards on the ground2 tint, in the order a build happens ---------- */
.fmt-one-page .sec-tint .hcard,.fmt-one-page .sec-tint .chat{--b-surface:var(--bg)}
.fmt-one-page .svc .sec-h{margin-bottom:clamp(24px,3vw,40px)}
.fmt-one-page .svc-grid{gap:clamp(16px,2vw,24px)}
.fmt-one-page .svc-c{--pad:clamp(20px,2.4vw,30px);gap:8px;padding:var(--pad);background:var(--bg);border-color:var(--line);
  grid-template-rows:auto auto auto auto 1fr}
/* each card opens on its own photograph, full width of the card, a hairline under it */
.fmt-one-page .svc-pic{display:block;margin:calc(var(--pad) * -1) calc(var(--pad) * -1) 6px;border-bottom:1px solid var(--line);
  border-radius:calc(var(--r-card) - 1px) calc(var(--r-card) - 1px) 0 0;overflow:hidden;background:var(--bg-3)}
.fmt-one-page .svc-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:0}
.fmt-one-page .svc-c .hcard-k{color:var(--accent);letter-spacing:.06em}
.fmt-one-page .svc-c .hcard-t{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.015em;margin-top:4px}
.fmt-one-page .svc-c .hcard-p{font-size:15px}
.fmt-one-page .svc-l{list-style:none;margin:14px 0 0;padding:16px 0 0;border-top:1px solid var(--line);display:grid;gap:9px;align-self:end}
.fmt-one-page .svc-l li{font-size:15px;color:var(--text-2);display:flex;gap:10px;align-items:baseline;line-height:1.4}
.fmt-one-page .svc-l li::before{content:"";width:5px;height:5px;background:var(--accent);opacity:.7;border-radius:1px;flex:none;transform:translateY(-3px)}

/* ---------- the yard band: full bleed 21:9, caption on a short pale green rule ---------- */
.fmt-one-page .band-sec{padding:0}
.fmt-one-page .band{background:var(--bg-3)}
.fmt-one-page .band .figcap{padding-top:16px;padding-bottom:clamp(28px,3.5vw,48px);gap:4px}
.fmt-one-page .band .figcap::before{content:"";display:block;width:48px;height:2px;background:var(--accent-tint);margin-bottom:10px}
.fmt-one-page .band .figcap .k{margin:0 0 4px}
.fmt-one-page .band .figcap b{font-size:16px;letter-spacing:-.01em}
.fmt-one-page .band .figcap span{max-width:60ch}

/* ---------- work: three 4:3 photographs, caption below, hairline under each, no card border ---------- */
.fmt-one-page .work{padding-top:clamp(56px,7vw,104px)}
.fmt-one-page .work .sec-h{margin-bottom:clamp(24px,3vw,40px)}
.fmt-one-page .work-grid{gap:clamp(20px,3vw,40px) clamp(16px,2.4vw,32px);align-items:start}
.fmt-one-page .work-fig{margin:0;display:grid;gap:14px}
.fmt-one-page .work-fig picture{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--bg-3)}
.fmt-one-page .work-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}
.fmt-one-page .work-fig .fig-cap{border-top:0;border-bottom:1px solid var(--line);padding:2px 0 16px;gap:4px}
.fmt-one-page .work-fig .fig-cap b{font-size:clamp(20px,1.7vw,24px);letter-spacing:-.015em;line-height:1.15}
.fmt-one-page .work-fig .fig-cap span{font-size:15px;color:var(--text-2);line-height:1.45;max-width:40ch}
.fmt-one-page .work-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--text-3)}

/* ---------- studio: yard photograph left with the portrait hanging off its corner, roles right ---------- */
.fmt-one-page .studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.fmt-one-page .studio-fig{position:relative;padding:0 0 clamp(20px,2.6vw,36px) clamp(8px,1.4vw,20px)}
.fmt-one-page .studio-tile{box-shadow:0 24px 50px -36px rgba(27,26,22,.45);border:1px solid var(--line)}
.fmt-one-page .studio-inset{position:absolute;right:auto;left:0;bottom:0;z-index:2;width:clamp(120px,30%,240px);aspect-ratio:4/5;
  border-radius:calc(var(--r-tile) - 6px);overflow:hidden;box-shadow:0 0 0 5px var(--bg-2),0 18px 40px -24px rgba(27,26,22,.5);background:var(--bg-3)}
.fmt-one-page .studio-copy .h2{margin-bottom:14px}
.fmt-one-page .studio-copy .sub{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-one-page .people b{font-weight:500}
.fmt-one-page .people li{padding:13px 0;font-size:16px}
.fmt-one-page .studio-copy .micro{margin-top:18px;max-width:46ch}
@media (max-width:900px){
  .fmt-one-page .studio-grid{grid-template-columns:1fr}
  .fmt-one-page .studio-fig{order:2;padding-left:12px}
}

/* ---------- questions: oak end grain at low opacity under the ground2 tint, heading sticky, hairline list ---------- */
.fmt-one-page .qa{position:relative;isolation:isolate}
.fmt-one-page .qa::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;
  background:url('/assets/img/brands/one-page/grain-1600.webp') center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55))}
@supports (background-image:image-set(url('a.avif') type('image/avif'))){
  .fmt-one-page .qa::before{background-image:image-set(url('/assets/img/brands/one-page/grain-1600.avif') type('image/avif'),url('/assets/img/brands/one-page/grain-1600.webp') type('image/webp'))}
}
.fmt-one-page .q-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:start}
.fmt-one-page .q-head{margin-bottom:0;position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h) + 32px)}
/* the pegs print under the sticky heading: bounded so the heading block still fits a 900 tall viewport.
   Capped at 248px (was 300px): at 300 the print outran the five collapsed FAQ rows by about 225px,
   leaving a bare tint gap under the questions on the tall .qa section (eye judge, low). Shrinking the
   print plus a little more breathing room per row (below) closes most of the gap without touching the
   FAQ's mobile stack, which never had a second column to fall short of. */
.fmt-one-page .q-fig-w{margin-top:clamp(24px,3vw,40px)}
.fmt-one-page .q-fig{margin:0;width:min(100%,248px);padding:8px;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  box-shadow:0 24px 44px -36px rgba(27,26,22,.5);transform:rotate(-1.2deg)}
.fmt-one-page .q-fig>picture{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--bg-3)}
.fmt-one-page .q-fig img{display:block;width:100%;height:100%;object-fit:cover}
.fmt-one-page .faq{display:grid;border-top:1px solid var(--line)}
.fmt-one-page .faq details{border-bottom:1px solid var(--line);background:transparent}
.fmt-one-page .faq summary{list-style:none;cursor:pointer;display:flex;gap:20px;align-items:baseline;justify-content:space-between;
  padding:30px 2px;font-size:clamp(16px,1.35vw,19px);letter-spacing:-.01em;line-height:1.35}
.fmt-one-page .faq summary::-webkit-details-marker{display:none}
.fmt-one-page .faq summary::after{content:"";flex:none;width:10px;height:10px;margin-top:6px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);
  transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.fmt-one-page .faq details[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.fmt-one-page .faq summary:hover{color:var(--text-2)}
.fmt-one-page .faq-b{padding:0 2px 22px;max-width:56ch}
.fmt-one-page .faq-b p{font-size:16px;color:var(--text-2);line-height:1.5}
@media (max-width:900px){
  .fmt-one-page .q-grid{grid-template-columns:1fr}
  .fmt-one-page .q-head{position:static}
  .fmt-one-page .q-fig{width:min(100%,220px)}
}

/* ---------- contact: the one next step on a deep green panel, the grain shader behind ----------
   The panel is green before the shader mounts and stays green under it: the wash keeps the oat copy above the
   threshold whatever ?palette= the picker sends. Tokens are set here so the html needs no .ground-accent. */
.fmt-one-page .cta{padding-top:var(--sec-sm);padding-bottom:var(--sec)}
.fmt-one-page .cta-tile{--bg:var(--b-accent);--bg-2:rgba(246,242,234,.08);--bg-3:rgba(246,242,234,.14);--ink:var(--b-on-accent);
  --text-2:var(--b-on-accent-dim);--text-3:var(--b-on-accent-dim);--line:rgba(246,242,234,.24);--line-control:rgba(246,242,234,.42);
  --accent:var(--b-on-accent);--accent-tint:rgba(246,242,234,.12);--b-surface:rgba(246,242,234,.08);
  aspect-ratio:auto;background:var(--bg);color:var(--ink);border-radius:var(--r-tile);min-height:min(60vh,520px);
  display:grid;align-items:center;padding:clamp(32px,5vw,72px) clamp(24px,4.5vw,72px)}
.fmt-one-page .cta-tile::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(26,40,32,.86) 0 40%,rgba(26,40,32,.62) 65%,rgba(26,40,32,.46) 100%)}
.fmt-one-page .cta-in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:clamp(24px,3.5vw,56px);align-items:center}
/* the plot print on an oat mat, hung a little off square at the left of the panel */
.fmt-one-page .cta-fig{margin:0;justify-self:start;width:min(100%,240px);padding:8px;background:var(--b-on-accent);border-radius:6px;
  box-shadow:0 30px 50px -30px rgba(0,0,0,.6);transform:rotate(-2deg)}
.fmt-one-page .cta-fig>picture{display:block;aspect-ratio:4/5;overflow:hidden;border-radius:3px;background:var(--bg-3)}
.fmt-one-page .cta-fig img{display:block;width:100%;height:100%;object-fit:cover}
.fmt-one-page .cta-copy .h2{margin-bottom:14px;max-width:16ch}
.fmt-one-page .cta-copy .sub{margin-bottom:0;max-width:44ch}
/* the form sits on its own dark glass so the status line and the micro stay readable whatever the shader shows */
.fmt-one-page .cta-act{display:grid;gap:14px;align-content:center;padding:clamp(18px,2.2vw,28px);border-radius:var(--r-card);
  background:rgba(26,40,32,.6);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(246,242,234,.16)}
.fmt-one-page .cta-form{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin:0}
.fmt-one-page .cta-f{flex:1 1 220px;min-width:0;height:48px;padding:0 20px;border-radius:var(--r-pill);border:1px solid rgba(246,242,234,.38);
  background:rgba(246,242,234,.1);color:var(--ink);font:inherit;font-size:16px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.fmt-one-page .cta-f::placeholder{color:var(--b-on-accent);opacity:.85}
.fmt-one-page .cta-f:hover{border-color:rgba(246,242,234,.6)}
.fmt-one-page .cta-f:focus{background:rgba(246,242,234,.16);border-color:rgba(246,242,234,.7);outline:none}
.fmt-one-page .cta-f:focus-visible{outline:2px solid var(--b-on-accent);outline-offset:2px}
.fmt-one-page .cta-tile .pill-ink{background:var(--b-on-accent);color:var(--b-accent)}
.fmt-one-page .cta-tile .pill-ink:hover{background:#fff}
.fmt-one-page .cta-ok{margin:0;font-size:15px;color:var(--ink)}
.fmt-one-page .cta-act .micro{margin-top:0;max-width:44ch;color:var(--ink)}
@media (max-width:900px){
  .fmt-one-page .cta-in{grid-template-columns:1fr}
  .fmt-one-page .cta-fig{width:min(50%,180px)}
  .fmt-one-page .cta-tile::after{background:rgba(26,40,32,.74)}
}
@media (max-width:520px){.fmt-one-page .cta-form .pill{flex:1 1 100%}}

/* ---------- footer: ground2, the lockup and the disclaimer ---------- */
.fmt-one-page .f-foot{background:var(--bg-2);border-top-color:var(--line)}
.fmt-one-page .f-foot-in p{max-width:52ch;margin:0}

/* ---------- motion that belongs to this page ----------
   Hover and press: cards and prints lift a pixel, buttons lift a pixel and press to .98, photographs ease a hair
   closer. Transform and opacity only, nothing moves layout.
   The chalk line: every hairline that sits under something arriving (the work captions, the service lists, the
   questions, the band caption's short rule) is snapped in from the left as its block reveals, on the same
   IntersectionObserver pass shared.js runs for data-reveal. html.fmt-reveal is only set when motion is allowed,
   so under reduced motion every line simply sits there drawn. */
.fmt-one-page .svc-c{transition:transform .35s var(--ease),border-color .2s var(--ease),box-shadow .35s var(--ease)}
.fmt-one-page .svc-c:hover{transform:translateY(-1px);border-color:var(--line-control);box-shadow:0 18px 36px -28px rgba(27,26,22,.45)}
.fmt-one-page .svc-pic img,.fmt-one-page .work-fig img,.fmt-one-page .studio-tile img,.fmt-one-page .q-fig img,.fmt-one-page .cta-fig img{transition:transform 1.1s var(--ease)}
.fmt-one-page .svc-c:hover .svc-pic img,.fmt-one-page .work-fig:hover img,.fmt-one-page .studio-fig:hover .studio-tile img,
.fmt-one-page .q-fig:hover img,.fmt-one-page .cta-fig:hover img{transform:scale(1.03)}
.fmt-one-page main .pill,.fmt-one-page .f-nav .pill{transition:transform .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.fmt-one-page main .pill:hover,.fmt-one-page .f-nav .pill:hover{transform:translateY(-1px)}
.fmt-one-page main .pill:active,.fmt-one-page .f-nav .pill:active{transform:translateY(0) scale(.98)}
.fmt-one-page .faq summary{transition:color .2s var(--ease),transform .15s var(--ease)}
.fmt-one-page .faq summary:active{transform:translateX(1px)}
.fmt-one-page .work-fig .fig-cap,.fmt-one-page .svc-l,.fmt-one-page .faq details{position:relative}
.fmt-one-page .work-fig .fig-cap,.fmt-one-page .faq details{border-bottom:0}
.fmt-one-page .svc-l{border-top:0}
.fmt-one-page .work-fig .fig-cap::after,.fmt-one-page .svc-l::before,.fmt-one-page .faq details::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--line);transform-origin:left center}
.fmt-one-page .work-fig .fig-cap::after,.fmt-one-page .faq details::after{bottom:0}
.fmt-one-page .svc-l::before{top:0}
.fmt-one-page .band .figcap::before{transform-origin:left center}
.fmt-reveal .fmt-one-page .work-fig .fig-cap::after,.fmt-reveal .fmt-one-page .svc-l::before,.fmt-reveal .fmt-one-page .faq details::after,
.fmt-reveal .fmt-one-page .band .figcap::before{transform:scaleX(0);transition:transform .7s var(--ease) .25s}
.fmt-reveal .fmt-one-page .work-fig.is-in .fig-cap::after,.fmt-reveal .fmt-one-page .svc-c.is-in .svc-l::before,
.fmt-reveal .fmt-one-page .faq details.is-in::after,.fmt-reveal .fmt-one-page .band.is-in .figcap::before{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .fmt-one-page .f-ink{transition:none}
  .fmt-one-page .faq summary::after,.fmt-one-page .cta-f{transition:none}
  .fmt-one-page .svc-c,.fmt-one-page main .pill,.fmt-one-page .f-nav .pill,.fmt-one-page .faq summary,
  .fmt-one-page .svc-pic img,.fmt-one-page .work-fig img,.fmt-one-page .studio-tile img,.fmt-one-page .q-fig img,.fmt-one-page .cta-fig img{transition:none}
  .fmt-one-page .svc-c:hover,.fmt-one-page main .pill:hover,.fmt-one-page .f-nav .pill:hover,.fmt-one-page main .pill:active,.fmt-one-page .f-nav .pill:active,
  .fmt-one-page .faq summary:active,.fmt-one-page .svc-c:hover .svc-pic img,.fmt-one-page .work-fig:hover img,.fmt-one-page .studio-fig:hover .studio-tile img,
  .fmt-one-page .q-fig:hover img,.fmt-one-page .cta-fig:hover img{transform:none}
}