/* formats/multi-page/format.css - Cormarsh Marine, the multi-page with tabs demo.
   Brand truth: formats/multi-page/BRAND.md. Every selector is prefixed .fmt-multi-page.
   Layout, tiles, hcards, rows, chat, band and figcap come from shared.css; this file sets the
   brand hooks, the display face, the grounds and the page recipes.

   THE WATER AND THE CHART (2026-09-13, second pass).
   Two grounds, alternating the way the work does: the deep, #0F272E, cold green-black water; and
   the chart, #CFDAD5, cold grey green paper, never white. Every page opens in the water (nav, hero
   or page head), rises onto the chart for the working sections and closes in the water (contact
   panel, footer). The deep carries a soundings ruling; the home hero carries a drawn seabed profile.
   The accent is the sounding trace, the colour an echo sounder draws the bed in: #7FE3CF on the
   deep, deepened to #0A574F on the chart. There is no orange in the interface. Orange lives only in
   the photographs, on a float or a rust bloom. Buttons are square cut chart paper on the deep and
   deep teal on the chart, never a round coloured pill: the bathhouse owns the ember pill on a dark
   ground and this page must never read as its sibling.

   CONTRAST, measured, WCAG relative luminance, ratio = (L1 + .05) / (L2 + .05).
   chart #CFDAD5:  ink 11.49  text2 #2E4F5C 6.14  text3 #365A66 5.21  teal #0A574F 5.88
   chart2 #C3D0CA: ink 10.36  text2 5.53  text3 4.69  teal 5.30
   deep #0F272E:   paper #DFE8E4 13.56  sea #9DB4B3 7.12  trace #7FE3CF 10.22
   deep2 #16333B:  paper 10.70  sea 6.12  trace 8.78
   fills:          white on teal 8.44   deep on paper 13.56   ink on trace 10.82

   HOME HERO (a bento of the work, 22 Sep; replaces the survey sheet deck)
   section.hero-f.ground-dark.cm-hero > .container.cm-bento
     .cm-cell.cm-sheet-a (.k .h1 .lead .row(Start, Open) .micro .cm-profile)
     figure.cm-cell.cm-shot (picture cormarsh-dawn poster + video.cm-video)
     .cm-cell.chat.cm-log (static, three lines)
     nav.cm-doors > a.cm-door x4 (picture.cm-door-pic, .cm-door-t, .cm-door-p, i.cm-door-go) to ./work#<service>
   No cell sits over another. The log is data-chat="static": all three lines are in the html, format.js only
   moves a marker down them. At 900 px and under the cells stack sheet, doors, film, log.
   Subpages open with section.hero-f.page-head.ground-dark (.k .h1 .lead) and a 21:9 band.

   MOTION (2026-09-19, v8: more media, more motion). Native CSS and small JS only.
   - The hero photograph cell now carries a six second Kling clip of the same frame (.cm-video),
     faded in over the still once it is playing. The still stays underneath as the no-video and
     reduced motion fallback; the video is first painted at opacity 0, so it is never offered to
     the largest contentful paint and the h1 keeps that title.
   - The soundings in the hero profile drop first, then the bed line draws through them.
   - A slow swell of open water light drifts across the deep behind the hero (transform only).
   - The hero sheet drifts down 56 px over the first viewport of scroll (a CSS scroll timeline,
     nothing scripted); the bands keep their scrubbed parallax from format.js.
   - Media reveals ([data-reveal="media"]) settle from a slight scale rather than rising. The full
     bleed bands keep the plain rise: a scaled band is wider than the viewport until it lands.
   - Every eyebrow rule draws in as its section reveals; the step labels and captions too.
   - The sticky tab rule slides to the hovered or focused tab and back (format.js, transform).
   - Cards lift 1 px on hover and press to .98; the pill already does the press in tokens.css.
   All of it sits behind prefers-reduced-motion: the block at the end returns every element to its
   final state and the video is hidden. */

/* ---------- type: Libre Franklin, an open Franklin Gothic, the working gothic of harbour notices
   and survey title blocks. One setting, wght 600. Fallback metrics measured against Arial at that
   weight; the build line and the reasoning are in assets/fonts/NOTE-multi-page-display.md. ---------- */
@font-face{font-family:'Libre Franklin';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/multi-page-display.woff2') format('woff2')}
@font-face{font-family:'Libre Franklin Fallback';src:local('Arial');size-adjust:105.2%;ascent-override:91.8%;descent-override:23.4%;line-gap-override:0%}

/* ---------- brand hooks ---------- */
.fmt-multi-page{
  --b-ground:#CFDAD5;--b-ground2:#C3D0CA;--b-ink:#08222B;
  --b-accent:#0A574F;--b-accent-text:#0A574F;--b-accent-tint:#B9D3CB;--b-on-accent:#FFFFFF;
  --b-display:'Libre Franklin','Libre Franklin Fallback',Arial,sans-serif;--b-display-weight:600;
  --b-line:rgba(8,34,43,.18);--b-surface:var(--b-ground2);
  --b-cta:#0A574F;--b-on-cta:#FFFFFF;--b-focus:#0A574F;--b-tab-rule:#0A574F;
  --b-dot:#0A574F;--b-dot-ring:#B9D3CB;
  --text-2:#2E4F5C;--text-3:#365A66;--bg-3:#B6C6BF;--line-control:rgba(8,34,43,.45);
  /* the deep: every .ground-dark scope on the page reads these */
  --b-dark:#0F272E;--b-dark-ink:#DFE8E4;--b-dark-text2:#9DB4B3;--b-dark-text3:#9DB4B3;
  --b-dark-line:rgba(223,232,228,.17);--b-dark-accent:#7FE3CF;
  --r-tile:4px;--r-card:4px;--shadow-tile:0 30px 60px -40px rgba(8,34,43,.55)
}
.fmt-multi-page main{background:var(--bg)}
.fmt-multi-page main a:not(.pill):not(.hcard):not(.f-brand){color:var(--b-accent-text);text-decoration-thickness:1px;text-underline-offset:3px}

/* the deep. shared.css owns .ground-dark and already turns .pill-ink into paper on water; this
   narrows the surfaces to sea green and makes the trace the accent. */
.fmt-multi-page .ground-dark{
  --bg-2:#16333B;--bg-3:#1E434C;--b-surface:var(--bg-2);
  --b-accent-text:var(--b-dark-accent);--b-mark-accent:var(--b-dark-accent);
  --b-tab-rule:var(--b-dark-accent);--b-focus:var(--b-dark-accent);--b-dot:var(--b-dark-accent);--b-dot-ring:rgba(127,227,207,.2)
}
.fmt-multi-page main .ground-dark a:not(.pill):not(.hcard),
.fmt-multi-page .ground-dark main a:not(.pill):not(.hcard){color:var(--b-dark-accent)}

/* ---------- the display face: one setting, wght 600 ---------- */
.fmt-multi-page .f-brand,.fmt-multi-page main .h1,.fmt-multi-page main .h2,.fmt-multi-page .hcard-t,
.fmt-multi-page .step-t,.fmt-multi-page .tile-t,.fmt-multi-page .figcap b{font-family:var(--b-display);font-weight:600;font-stretch:normal}
.fmt-multi-page main .h1{font-size:clamp(36px,5.4vw,78px);letter-spacing:-.022em;line-height:1.04;max-width:13ch;margin-bottom:clamp(16px,1.6vw,22px)}
.fmt-multi-page main .h2{font-size:clamp(28px,3.1vw,46px);letter-spacing:-.018em;line-height:1.1;max-width:20ch;margin-bottom:16px}
.fmt-multi-page .f-brand{font-size:17px;letter-spacing:-.015em;gap:9px;white-space:nowrap;flex:none}
.fmt-multi-page .f-mark{width:20px;height:20px;border-radius:0}
.fmt-multi-page .f-mark .mk-a{fill:var(--b-mark-accent,var(--b-accent))}
.fmt-multi-page .f-mark .mk-i{fill:currentColor}
.fmt-multi-page .lead{color:var(--text-2)}
/* the plain sub line under a section h2: never .lead, one .lead per page */
.fmt-multi-page .sub{font-size:clamp(16px,1.2vw,18px);color:var(--text-2);line-height:1.5;max-width:46ch;margin:0 0 clamp(20px,2.4vw,28px)}
/* eyebrow: a short signal rule before the label. The rule is the accent, the label is not. */
.fmt-multi-page main .k{display:flex;align-items:center;gap:10px;color:var(--text-3)}
.fmt-multi-page main .k::before{content:"";width:18px;height:2px;background:var(--accent);flex:none}
.fmt-multi-page .page-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--text-3)}

/* ---------- reveals this brand adds to the shared one: the eyebrow rule draws in after its label
   lands, media settles from a slight scale instead of rising, cards lift on hover and press ---------- */
.fmt-reveal .fmt-multi-page main .k[data-reveal]::before,.fmt-reveal .fmt-multi-page main .figcap[data-reveal] b::after{transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease) .3s}
.fmt-reveal .fmt-multi-page main .k[data-reveal].is-in::before,.fmt-reveal .fmt-multi-page main .figcap[data-reveal].is-in b::after{transform:scaleX(1)}
.fmt-reveal .fmt-multi-page .steps li[data-reveal] .step-k::before{transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease) .35s}
.fmt-reveal .fmt-multi-page .steps li[data-reveal].is-in .step-k::before{transform:scaleX(1)}
.fmt-reveal .fmt-multi-page [data-reveal="media"]{transform:scale(1.035);transition-duration:.7s}
.fmt-reveal .fmt-multi-page [data-reveal="media"].is-in{transform:none}
.fmt-multi-page a.hcard{transition:border-color .2s var(--ease),transform .25s var(--ease),background .2s var(--ease)}
.fmt-multi-page a.hcard:hover{transform:translateY(-1px)}
.fmt-multi-page a.hcard:active{transform:scale(.98)}
.fmt-multi-page .pill:hover{transform:translateY(-1px)}
.fmt-multi-page .pill:active{transform:scale(.98)}

/* ---------- page transition: rise once, transform only. No opacity: an element first painted at
   opacity 0 is never offered to the largest contentful paint, and the h1 has to be. ---------- */
@keyframes fmt-mp-in{from{transform:translateY(12px)}to{transform:none}}
.fmt-multi-page .page-in{animation:fmt-mp-in .5s var(--ease) both}

/* ---------- the nav sits in the water on every page and stays there while the chart scrolls under it ---------- */
.fmt-multi-page .f-nav{background:rgba(15,39,46,.92);border-bottom-color:rgba(223,232,228,.22)}
.fmt-multi-page .f-tabs a{opacity:1;color:var(--text-2);padding:6px 0}
.fmt-multi-page .f-tabs a:hover{color:var(--ink)}
.fmt-multi-page .f-tabs a.is-on,.fmt-multi-page .f-tabs a[aria-current]{color:var(--ink)}
.fmt-multi-page .f-tabs a.is-on::after,.fmt-multi-page .f-tabs a[aria-current]::after{height:2px;bottom:-3px;background:var(--b-tab-rule)}
/* the tab rule slides: format.js sets --tab-x and --tab-s on the row, the static rule under the
   current tab steps aside while the moving one is live */
.fmt-multi-page .f-tabs{position:relative}
.fmt-multi-page .f-tabs.has-wipe::after{content:"";position:absolute;left:0;bottom:-3px;width:100px;height:2px;background:var(--b-tab-rule);
  transform-origin:left center;transform:translateX(var(--tab-x,0px)) scaleX(var(--tab-s,0));transition:transform .4s var(--ease);pointer-events:none}
.fmt-multi-page .f-tabs.has-wipe a.is-on::after,.fmt-multi-page .f-tabs.has-wipe a[aria-current]::after{opacity:0}
@media (max-width:820px){
  .fmt-multi-page .f-tabs.has-wipe::after{bottom:0}
  .fmt-multi-page .f-tabs{display:flex;gap:18px;font-size:14px;min-width:0;overflow-x:auto;scrollbar-width:none;align-items:center;height:100%}
  .fmt-multi-page .f-tabs::-webkit-scrollbar{display:none}
  .fmt-multi-page .f-tabs a{padding:0;flex:none;height:100%;display:inline-flex;align-items:center}
  .fmt-multi-page .f-tabs a.is-on::after,.fmt-multi-page .f-tabs a[aria-current]::after{bottom:0}
  .fmt-multi-page .f-nav-in{gap:16px}
}
@media (max-width:420px){.fmt-multi-page .f-brand{font-size:15px;gap:6px}.fmt-multi-page .f-tabs{gap:14px}}

/* ---------- footer: back in the water, the same four pages ---------- */
.fmt-multi-page .f-foot{border-top:1px solid var(--line)}
.fmt-multi-page .f-foot-nav a{color:var(--text-2)}
.fmt-multi-page .f-foot-nav a:hover,.fmt-multi-page .f-foot-nav a[aria-current]{color:var(--ink)}
.fmt-multi-page .f-foot-in p{max-width:52ch;margin:0}

/* ---------- the deep ground: soundings. Hairlines every 30 px the way depth is ruled on a sounding
   sheet, a low swell of open water light near the top, both fading out before the copy. ---------- */
.fmt-multi-page .hero-f,.fmt-multi-page .cta.ground-dark{position:relative;isolation:isolate;overflow:hidden}
.fmt-multi-page .hero-f{padding-top:clamp(44px,6vw,84px);padding-bottom:clamp(72px,9vw,136px)}
.fmt-multi-page .ground-dark::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:repeating-linear-gradient(to bottom,rgba(223,232,228,.085) 0 1px,transparent 1px 30px),
    radial-gradient(120% 70% at 22% 0%,rgba(157,180,179,.16),transparent 62%);
  -webkit-mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%);mask-image:linear-gradient(180deg,#000 0 62%,transparent 100%)}
.fmt-multi-page .f-nav.ground-dark::before,.fmt-multi-page .f-foot.ground-dark::before{content:none}

/* ---------- home hero: a bento of the work ----------
   Five cells on a twelve column grid, 12 px of the deep between them, square cut (3 px), no cell over another:
     .cm-sheet-a  columns 1-8, rows 1-2: the survey sheet. Eyebrow, the h1, the lead, the actions, the micro claim,
                  and the drawn seabed profile as its foot rule.
     .cm-shot     columns 9-12, row 1: the film cell, a buoy at first light (cormarsh-dawn), 16:10.
     .cm-log      columns 9-12, row 2: the assistant log, static, the marker walks it (format.js 3c).
     .cm-doors    row 3, all twelve columns: four doors on the chart, one per service page.
   The h1 is the largest paint: at 1440 the film cell is ~430 x 270 against an h1 near 760 x 250. Under 900 px
   the cells stack sheet, doors, film, log, so the film is out of the first screen on a phone. */
.fmt-multi-page .cm-hero{padding-top:clamp(20px,2.4vw,36px);padding-bottom:clamp(40px,5vw,72px)}
.fmt-multi-page .cm-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto auto;gap:12px}
.fmt-multi-page .cm-cell{position:relative;margin:0;border:1px solid var(--line-control);border-radius:3px;background:var(--bg-2);overflow:hidden}
.fmt-multi-page .cm-sheet-a{grid-column:1 / 9;grid-row:1 / 3;display:flex;flex-direction:column;padding:clamp(24px,2.8vw,44px) clamp(24px,2.8vw,44px) 0;
  background:linear-gradient(180deg,rgba(22,51,59,.92),rgba(15,39,46,.6))}
.fmt-multi-page .cm-sheet-a .k{margin-bottom:clamp(14px,1.6vw,22px)}
.fmt-multi-page .cm-hero .h1{font-size:clamp(46px,6vw,88px);line-height:.98;letter-spacing:-.03em;max-width:13ch;margin:0}
.fmt-multi-page .cm-sheet-a .lead{margin:clamp(18px,2vw,28px) 0 clamp(18px,2vw,26px);max-width:40ch}
.fmt-multi-page .cm-sheet-a .micro{margin-top:14px;color:var(--text-3)}
.fmt-multi-page .cm-profile{margin-top:auto;height:clamp(40px,4vw,58px);margin-left:calc(-1 * clamp(24px,2.8vw,44px));margin-right:calc(-1 * clamp(24px,2.8vw,44px));padding-top:18px}
.fmt-multi-page .cm-profile svg{width:100%;height:100%;display:block;overflow:visible}
.fmt-multi-page .cm-profile path{fill:none}
.fmt-multi-page .cm-surface,.fmt-multi-page .cm-drops{vector-effect:non-scaling-stroke}
.fmt-multi-page .cm-surface{stroke:rgba(223,232,228,.45);stroke-width:1}
.fmt-multi-page .cm-drops{stroke:rgba(223,232,228,.22);stroke-width:1}
.fmt-multi-page .cm-drops[pathLength]{stroke-dasharray:1000;animation:fmt-mp-draw 1.4s var(--ease) .1s both}
.fmt-multi-page .cm-bed{stroke:var(--b-dark-accent);stroke-width:2;stroke-dasharray:1000;animation:fmt-mp-draw 2.4s var(--ease) .7s both}
@keyframes fmt-mp-draw{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
/* the swell: a low drift of open water light across the deep behind the hero, transform only */
.fmt-multi-page .cm-hero::after{content:"";position:absolute;left:-12%;right:-12%;top:-10%;height:80%;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 46% at 28% 24%,rgba(127,227,207,.11),transparent 72%);
  animation:fmt-mp-swell 18s ease-in-out infinite alternate}
@keyframes fmt-mp-swell{from{transform:translate3d(-2.5%,0,0)}to{transform:translate3d(2.5%,2%,0)}}

.fmt-multi-page .cm-shot{grid-column:9 / 13;grid-row:1;aspect-ratio:16/10;background:var(--bg-3)}
.fmt-multi-page .cm-shot picture,.fmt-multi-page .cm-shot img{position:absolute;inset:0;width:100%;height:100%}
.fmt-multi-page .cm-shot img{object-fit:cover;object-position:50% 55%;display:block}
.fmt-multi-page .cm-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;display:block;
  z-index:1;opacity:0;transition:opacity .9s var(--ease);pointer-events:none}
.fmt-multi-page .cm-video.is-live{opacity:1}

.fmt-multi-page .cm-log.chat{width:auto;border:1px solid var(--line-control);border-radius:3px;padding:16px 18px 14px;
  background:var(--bg-2);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--ink);
  --text-2:#9DB4B3;--text-3:#9DB4B3}
.fmt-multi-page .cm-hero .cm-log.chat{grid-column:9 / 13;grid-row:2}
.fmt-multi-page .cm-log .chat-head{margin-bottom:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.fmt-multi-page .cm-log .chat-time{color:var(--text-3)}
.fmt-multi-page .cm-log .chat-log{min-height:0;gap:0}
.fmt-multi-page .cm-log .bub{max-width:none;align-self:stretch;opacity:1;transform:none;background:none;border:0;border-radius:0;
  padding:8px 0 8px 14px;font-size:13.5px;line-height:1.4;color:var(--text-2);position:relative;transition:color .5s var(--ease)}
.fmt-multi-page .cm-log .bub+.bub{border-top:1px solid var(--line)}
.fmt-multi-page .cm-log .bub::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;background:rgba(223,232,228,.2);transition:background .5s var(--ease)}
.fmt-multi-page .cm-log .bub.out{color:var(--ink)}
.fmt-multi-page .cm-log .bub.out::before{background:var(--b-dark-accent)}
.fmt-multi-page .cm-log .bub.is-now{color:var(--ink)}
.fmt-multi-page .cm-log .bub.is-now::before{background:var(--b-dark-accent)}
.fmt-multi-page .cm-who{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:2px}
.fmt-multi-page .cm-log .bub.out .cm-who{color:var(--b-dark-accent)}
/* the same log on the contact page panel, framed on its own */
.fmt-multi-page .cta .cm-log.chat{border:1px solid var(--line-control);border-radius:var(--r-card);background:rgba(22,51,59,.94)}

/* the doors: the chart ground inside the deep, one per service page */
.fmt-multi-page .cm-doors{grid-column:1 / 13;grid-row:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fmt-multi-page .cm-door{position:relative;display:grid;grid-template-columns:clamp(64px,6.6vw,96px) minmax(0,1fr) auto;grid-template-rows:auto auto;
  column-gap:14px;align-items:center;align-content:center;padding:10px 16px 10px 10px;min-height:clamp(76px,7.6vw,104px);
  background:#CFDAD5;color:#08222B;border-radius:3px;text-decoration:none;transition:background .3s var(--ease),transform .3s var(--ease)}
.fmt-multi-page .cm-door-pic{grid-row:1 / 3;align-self:stretch;position:relative;overflow:hidden;border-radius:2px;background:#C3D0CA}
.fmt-multi-page .cm-door-pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.fmt-multi-page .cm-door-t{grid-column:2;color:#08222B;font-family:var(--b-display);font-weight:600;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.015em;line-height:1.1;align-self:end}
.fmt-multi-page .cm-door-p{grid-column:2;font-size:13px;line-height:1.35;color:#2E4F5C;align-self:start;margin-top:3px}
.fmt-multi-page .cm-door-go{grid-column:3;grid-row:1 / 3;width:10px;height:10px;border-top:2px solid #0A574F;border-right:2px solid #0A574F;transform:rotate(45deg);transition:transform .3s var(--ease)}
.fmt-multi-page .cm-door:hover{background:#DCE6E1}
.fmt-multi-page .cm-door:hover .cm-door-go{transform:translateX(3px) rotate(45deg)}
.fmt-multi-page .cm-door:hover .cm-door-pic img{transform:scale(1.06)}
.fmt-multi-page .cm-door:active{transform:scale(.98)}
.fmt-multi-page .cm-door:focus-visible{outline:2px solid var(--b-dark-accent);outline-offset:2px}

/* arrival: the cells come up in reading order, once, transform and opacity only */
@media (prefers-reduced-motion:no-preference){
  .fmt-multi-page .cm-shot,.fmt-multi-page .cm-hero .cm-log,.fmt-multi-page .cm-door{animation:fmt-mp-cell .9s var(--ease) both}
  .fmt-multi-page .cm-shot{animation-delay:.12s}
  .fmt-multi-page .cm-hero .cm-log{animation-delay:.24s}
  .fmt-multi-page .cm-door:nth-child(1){animation-delay:.36s}
  .fmt-multi-page .cm-door:nth-child(2){animation-delay:.42s}
  .fmt-multi-page .cm-door:nth-child(3){animation-delay:.48s}
  .fmt-multi-page .cm-door:nth-child(4){animation-delay:.54s}
}
@keyframes fmt-mp-cell{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}

@media (max-width:1100px) and (min-width:901px){
  .fmt-multi-page .cm-sheet-a{grid-column:1 / 8}
  .fmt-multi-page .cm-shot,.fmt-multi-page .cm-hero .cm-log.chat{grid-column:8 / 13}
  .fmt-multi-page .cm-doors{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .fmt-multi-page .cm-bento{grid-template-columns:minmax(0,1fr)}
  .fmt-multi-page .cm-sheet-a,.fmt-multi-page .cm-shot,.fmt-multi-page .cm-hero .cm-log.chat,.fmt-multi-page .cm-doors{grid-column:1;grid-row:auto}
  .fmt-multi-page .cm-sheet-a{padding:24px 20px 0}
  .fmt-multi-page .cm-profile{margin-left:-20px;margin-right:-20px}
  .fmt-multi-page .cm-hero .h1{font-size:clamp(46px,12.4vw,72px)}
  .fmt-multi-page .cm-doors{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .fmt-multi-page .cm-door{grid-template-columns:minmax(0,1fr) auto;padding:12px 12px 12px 14px;min-height:0}
  .fmt-multi-page .cm-door-pic{display:none}
  .fmt-multi-page .cm-door-t,.fmt-multi-page .cm-door-p{grid-column:1}
  .fmt-multi-page .cm-door-go{grid-column:2}
  .fmt-multi-page .cm-shot{aspect-ratio:16/9}
  .fmt-multi-page .cm-doors{order:1}
  .fmt-multi-page .cm-shot{order:2}
  .fmt-multi-page .cm-hero .cm-log.chat{order:3}
}

/* ---------- services: four jobs as one hairline grid on the chart, a signal rule rises on hover ---------- */
.fmt-multi-page .svc{padding-top:var(--sec-sm);padding-bottom:var(--sec-sm)}
.fmt-multi-page .svc .sec-h{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-multi-page .svc .h2{margin-bottom:0}
.fmt-multi-page .svc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.fmt-multi-page .svc-c{--svc-pad:clamp(18px,2vw,26px);position:relative;border:0;border-radius:0;background:var(--bg-2);gap:0;padding:0;min-height:0;
  grid-template-rows:auto auto auto 1fr;transition:background .2s var(--ease),filter .6s var(--ease),transform .6s var(--ease)}
.fmt-multi-page .svc-c::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.fmt-multi-page .svc-pic{display:block;background:var(--bg-3);border-bottom:1px solid var(--line);overflow:hidden}
.fmt-multi-page .svc-pic img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;transition:transform .6s var(--ease)}
.fmt-multi-page a.svc-c:hover .svc-pic img{transform:scale(1.03)}
.fmt-multi-page .svc-c .hcard-k{padding:var(--svc-pad) var(--svc-pad) 0}
.fmt-multi-page .svc-c .hcard-t{padding:6px var(--svc-pad) 0}
.fmt-multi-page .svc-c .hcard-p{padding:10px var(--svc-pad) var(--svc-pad)}
.fmt-multi-page a.svc-c:hover{background:var(--bg);border-color:transparent}
.fmt-multi-page a.svc-c:hover::before,.fmt-multi-page a.svc-c:focus-visible::before{transform:scaleX(1)}
.fmt-multi-page .svc-c .hcard-k{color:var(--b-accent-text)}
.fmt-multi-page .svc-c .hcard-t{font-size:clamp(19px,1.6vw,23px);letter-spacing:-.015em;margin-top:2px}
.fmt-multi-page .svc-c .hcard-p{align-self:end}
@media (max-width:900px){.fmt-multi-page .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.fmt-multi-page .svc-grid{grid-template-columns:1fr}.fmt-multi-page .svc-c{min-height:0}}

/* ---------- bands: full bleed 21:9, the image bleeds 16% so the scrubbed parallax never shows ground ---------- */
.fmt-multi-page .band-sec{padding:0}
.fmt-multi-page .band{background:var(--bg-3)}
.fmt-multi-page .band>picture>img{top:-8%;bottom:auto;height:116%;will-change:transform}
.fmt-multi-page .band .figcap{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding-top:14px;padding-bottom:clamp(20px,2.4vw,32px)}
.fmt-multi-page .figcap b{font-size:16px;letter-spacing:-.01em}
.fmt-multi-page .figcap b::after{content:"";display:inline-block;width:14px;height:1px;background:var(--accent);margin:0 0 4px 12px;vertical-align:baseline}

/* ---------- page head (work, process, contact): the same water as the home hero, then the band ---------- */
.fmt-multi-page .page-head{padding-bottom:0}
.fmt-multi-page .page-head .lead{margin-bottom:0}
.fmt-multi-page .page-head .h1{max-width:18ch}
.fmt-multi-page .page-head .band{margin-top:clamp(36px,4.5vw,64px)}
.fmt-multi-page .page-head .band .figcap{padding-bottom:0}
/* the band breaks the container, so the soundings stop where the water stops */
.fmt-multi-page .page-head::before{mask-image:linear-gradient(180deg,#000 0 70%,transparent 100%);-webkit-mask-image:linear-gradient(180deg,#000 0 70%,transparent 100%)}

/* ---------- job cards: photograph first, hairline card on the chart, the picture settles on hover ---------- */
.fmt-multi-page .work-prev{padding-top:var(--sec-sm)}
.fmt-multi-page .work-c{padding:0;overflow:hidden;gap:0;background:var(--bg-2);border-color:var(--line);grid-template-rows:auto auto auto 1fr}
.fmt-multi-page .work-c picture{display:block;background:var(--bg-3);border-bottom:1px solid var(--line);overflow:hidden}
.fmt-multi-page .work-c img{border-radius:0;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block;transition:transform .6s var(--ease)}
.fmt-multi-page a.work-c:hover img{transform:scale(1.025)}
.fmt-multi-page .work-c .hcard-k{padding:clamp(16px,1.8vw,22px) clamp(16px,1.8vw,22px) 0;color:var(--b-accent-text)}
.fmt-multi-page .work-c .hcard-t{padding:6px clamp(16px,1.8vw,22px) 0;font-size:clamp(19px,1.6vw,22px);letter-spacing:-.015em}
.fmt-multi-page .work-c .hcard-p{padding:8px clamp(16px,1.8vw,22px) clamp(18px,2vw,24px)}
.fmt-multi-page a.work-c:hover{border-color:var(--line-control)}
.fmt-multi-page .work-prev .sec-h,.fmt-multi-page .jobs .sec-h{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-multi-page .home-more{margin-top:clamp(24px,3vw,36px)}
.fmt-multi-page .jobs{padding-top:clamp(40px,5vw,72px)}
.fmt-multi-page .jobs .grid{gap:clamp(16px,2vw,24px)}

/* ---------- work: also on the books, rows beside a 16:9 tile on the tinted chart ---------- */
.fmt-multi-page .also .sec-h{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-multi-page .more-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,64px);align-items:center}
.fmt-multi-page .more-list li{padding:16px 0}
.fmt-multi-page .more-list li:first-child{border-top-color:var(--ink)}
.fmt-multi-page .more-tile{box-shadow:var(--shadow-tile)}
@media (max-width:900px){.fmt-multi-page .more-grid{grid-template-columns:1fr}}

/* ---------- studio: the tinted chart, yard photograph left, the crew as rows ---------- */
.fmt-multi-page .studio{padding:var(--sec-sm) 0}
.fmt-multi-page .studio-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.fmt-multi-page .studio-tile{box-shadow:var(--shadow-tile)}
.fmt-multi-page .sec-tint{--b-surface:var(--bg);--bg-2:var(--b-ground2);--bg-3:#B6C6BF}
.fmt-multi-page .sec-tint .hcard{background:var(--bg)}
.fmt-multi-page .people li{padding:13px 0}
.fmt-multi-page .people li:first-child{border-top-color:var(--ink)}
.fmt-multi-page .studio-copy .micro{margin-top:18px;max-width:46ch}
@media (max-width:900px){.fmt-multi-page .studio-grid{grid-template-columns:1fr}}

/* ---------- the contact close: back in the water, the one grain shader on the site under a deep
   wash so the copy reads. The layer keeps no data-palette-fixed, so ?palette= still retints it. ---------- */
.fmt-multi-page .cta{padding:var(--sec-sm) 0}
.fmt-multi-page .cta-panel{aspect-ratio:auto;border-radius:var(--r-tile);padding:clamp(28px,4.5vw,72px) clamp(24px,4vw,64px);border:1px solid var(--line);background:var(--bg-2)}
.fmt-multi-page .cta-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,rgba(15,39,46,.95) 0 44%,rgba(15,39,46,.78) 68%,rgba(15,39,46,.5) 100%)}
.fmt-multi-page .cta-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:center}
/* shared.css's `.tile .chat{position:absolute}` (its own line 202) sits after `.tile-flow .chat`
   (its line 132) at equal specificity, so the flow override never wins and the chat card floats
   free of the grid at >=820px, printing on top of .cta-facts. Same specificity fight, scoped to
   this page, settles it without touching the shared file (requests: shared.css §chat/tile-flow). */
.fmt-multi-page .cta-panel .chat{position:relative;left:auto;bottom:auto;width:auto;margin:0;box-shadow:none}
.fmt-multi-page .cta-copy .h2{max-width:18ch}
.fmt-multi-page .cta-copy .sub{margin-bottom:clamp(24px,3vw,32px)}
.fmt-multi-page .cta-facts{background:rgba(15,39,46,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--line);border-radius:var(--r-card);padding:8px clamp(16px,2vw,24px)}
.fmt-multi-page .cta-facts .rows li:first-child{border-top:0}
.fmt-multi-page .cta-facts .rows li:last-child{border-bottom:0}
.fmt-multi-page .proc-facts li{align-items:start;gap:20px}
.fmt-multi-page .proc-facts b{flex:none}
.fmt-multi-page .proc-facts span{text-align:right;max-width:24ch}
@media (max-width:900px){.fmt-multi-page .cta-grid{grid-template-columns:1fr}.fmt-multi-page .cta-panel::after{background:rgba(15,39,46,.92)}}

/* ---------- process: lettered stages, a photograph each side down the sequence, sticky facts ---------- */
.fmt-multi-page .stages{padding-top:clamp(40px,5vw,72px)}
.fmt-multi-page .proc-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:start}
.fmt-multi-page .steps{list-style:none;margin:0;padding:0;display:grid;border-top:1px solid var(--ink)}
.fmt-multi-page .steps li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,44px);align-items:center;
  padding:clamp(24px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.fmt-multi-page .steps li:nth-child(even) .step-fig{order:-1}
.fmt-multi-page .step-copy{display:grid;gap:8px;align-content:center}
.fmt-multi-page .step-k{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-weight:400;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--b-accent-text)}
.fmt-multi-page .step-k::before{content:"";width:18px;height:2px;background:var(--accent);flex:none}
.fmt-multi-page .step-t{font-size:clamp(21px,2vw,28px);letter-spacing:-.02em;line-height:1.15;margin:2px 0 0;font-weight:600}
.fmt-multi-page .step-p{font-size:16px;color:var(--text-2);line-height:1.5;max-width:44ch;margin:0}
.fmt-multi-page .step-fig{margin:0}
.fmt-multi-page .step-fig picture{display:block;background:var(--bg-3);border-radius:var(--r-card);overflow:hidden}
.fmt-multi-page .step-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}
.fmt-multi-page .proc-side{display:grid;gap:20px;align-content:start;position:sticky;top:calc(var(--demo-bar-h) + var(--fnav-h) + 32px);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-card);padding:clamp(18px,2vw,26px)}
.fmt-multi-page .proc-side .rows li:first-child{border-top:0}
.fmt-multi-page .proc-tile{aspect-ratio:3/2;border-radius:var(--r-tile)}
.fmt-multi-page .proc-cta{justify-self:start}
@media (max-width:900px){.fmt-multi-page .proc-grid{grid-template-columns:1fr}.fmt-multi-page .proc-side{position:static}}
@media (max-width:620px){.fmt-multi-page .steps li{grid-template-columns:1fr}.fmt-multi-page .steps li:nth-child(even) .step-fig{order:0}}

/* ---------- contact page: the form that sends nothing on the chart, the office window beside it ---------- */
.fmt-multi-page .form-sec{padding-top:clamp(40px,5vw,72px)}
.fmt-multi-page .contact-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,64px);align-items:start}
.fmt-multi-page .form-card{gap:18px;padding:clamp(20px,2.6vw,32px);background:var(--bg-2)}
.fmt-multi-page .form-card .hcard-t{font-size:clamp(22px,1.9vw,28px);letter-spacing:-.015em}
.fmt-multi-page .form{display:grid;gap:16px;margin:0}
.fmt-multi-page .field input,.fmt-multi-page .field textarea{background:var(--bg);border-radius:6px;transition:border-color .2s var(--ease),background .2s var(--ease)}
.fmt-multi-page .field textarea{line-height:1.45}
.fmt-multi-page .field input:focus,.fmt-multi-page .field textarea:focus{background:#E2EAE6;border-color:var(--line-control);outline:none}
.fmt-multi-page .field input:focus-visible,.fmt-multi-page .field textarea:focus-visible{outline:2px solid var(--b-accent-text);outline-offset:2px}
.fmt-multi-page .form-foot{margin-top:2px}
.fmt-multi-page .form-note.is-done{color:var(--ink)}
.fmt-multi-page .contact-side{display:grid;gap:20px;align-content:start}
.fmt-multi-page .contact-tile{box-shadow:var(--shadow-tile)}
.fmt-multi-page .contact-side .micro{margin-top:0}
.fmt-multi-page .q-tile{box-shadow:var(--shadow-tile);align-self:start}
@media (max-width:900px){.fmt-multi-page .contact-grid{grid-template-columns:1fr}}

/* ---------- buttons on this brand: square cut, never a round pill. Teal on the chart; on the deep
   shared.css turns .pill-ink into paper with deep text. Ghost is a hairline. ---------- */
.fmt-multi-page .pill{border-radius:3px;letter-spacing:.005em}
.fmt-multi-page .pill-ink,.fmt-multi-page .f-nav .pill-ink{background:var(--b-cta);color:var(--b-on-cta)}
.fmt-multi-page .pill-ink:hover,.fmt-multi-page .f-nav .pill-ink:hover{background:color-mix(in srgb,var(--b-cta) 84%,#08222B)}
.fmt-multi-page .ground-dark .pill-ink:hover{background:#FFFFFF}
.fmt-multi-page main .pill-ghost,.fmt-multi-page .f-nav .pill-ghost{background:transparent;border-color:var(--line-control);color:var(--ink)}
.fmt-multi-page main .pill-ghost:hover,.fmt-multi-page .f-nav .pill-ghost:hover{background:var(--bg-2);border-color:var(--ink)}
.fmt-multi-page .booked{color:#fff;background:var(--b-accent)}

@media (prefers-reduced-motion:reduce){
  .fmt-multi-page .page-in{animation:none}
  .fmt-multi-page .cm-bed{stroke-dasharray:none;animation:none}
  .fmt-multi-page .cm-log .bub,.fmt-multi-page .cm-log .bub::before{transition:none}
  .fmt-multi-page .field input,.fmt-multi-page .field textarea,.fmt-multi-page .svc-c,.fmt-multi-page .svc-c::before,.fmt-multi-page .work-c img{transition:none}
  .fmt-multi-page a.work-c:hover img{transform:none}
  .fmt-multi-page .band>picture>img{top:0;height:100%;will-change:auto}
  .fmt-multi-page .cm-drops[pathLength]{stroke-dasharray:none;animation:none}
  .fmt-multi-page .cm-hero::after{animation:none}
  .fmt-multi-page .cm-door,.fmt-multi-page .cm-door-go,.fmt-multi-page .cm-door-pic img{transition:none}
  .fmt-multi-page .cm-door:hover .cm-door-go{transform:rotate(45deg)}
  .fmt-multi-page .cm-door:hover .cm-door-pic img{transform:none}
  .fmt-multi-page .cm-video{display:none}
  .fmt-multi-page .f-tabs.has-wipe::after{transition:none}
  .fmt-multi-page a.hcard,.fmt-multi-page .pill,.fmt-multi-page .svc-pic img{transition:none}
  .fmt-multi-page a.hcard:hover,.fmt-multi-page .pill:hover,.fmt-multi-page a.svc-c:hover .svc-pic img{transform:none}
  .fmt-reveal .fmt-multi-page main .k[data-reveal]::before,.fmt-reveal .fmt-multi-page main .figcap[data-reveal] b::after,.fmt-reveal .fmt-multi-page .steps li[data-reveal] .step-k::before{transform:none;transition:none}
  .fmt-reveal .fmt-multi-page [data-reveal="media"]{transform:none;transition:none}
}