/* formats/portal/format.css - Halvard Yard, the landing plus client area demo.
   Brand truth: formats/portal/BRAND.md. Every selector is prefixed .fmt-portal.
   shared.css gives layout, tiles, hcards, rows, chat and the band; this file sets the brand hooks, the
   Condensed Display face, a ground per section, the two states (white public side, slate client area).

   CLASS INVENTORY (what the html agent writes, in page order)
   nav        header.f-nav > .container.f-nav-in > a.f-brand(> i.f-mark > inline svg fill="none" stroke paths) + text
                + nav.f-tabs(a x4: Boats Services Yard Contact) + .f-nav-acts > button.rect.rect-blue[data-enter-portal]
   hero       section#hero.hero-f.p-hero > .p-faces (two faces, no .container: each face reaches its page edge)
                .p-face.p-face-pub > .p-face-in: span.k (Boatyard) h1.h1 p.lead .row(a.pill.pill-ink.lg Start,
                           button.pill.pill-ghost.lg[data-enter-portal] Open) p.micro
                           + .p-run > ul.p-run-in > li.p-run-t > picture x6 (the strip that follows the scroll)
                aside.p-face.p-door > .p-door-in: p.p-door-k.mono, h2.p-door-h#p-door-h, p.p-door-s,
                           figure.p-door-fig (picture halvard-cover poster + video.p-strip-video),
                           ul.p-door-sheet > li(span.p-door-tag.mono + span) x2, button.pill.pill-ink.lg.p-door-go[data-enter-portal] Open
   boats      section#boats.sec-tint.p-boats > .container > .sec-h(span.k h2.h2 p.sub)
                + ul.rows.p-board > li(span.tag, span.p-boat > b + span, span.chip-s) x4 + p.p-note
   services   section#services.p-svc > .container > .sec-h(span.k h2.h2 p.sub)
                + .grid.g-4.svc-grid > article.hcard.hcard-fig.svc-c(picture 4:3 lazy, span.hcard-k tag, h3.hcard-t, p.hcard-p) x4
   yard       section#yard.p-yard > figure.band > picture(band-yard, lazy) + figcaption.figcap.plate > span(b + text)
   client     section#client.p-cl-sec > .container > .two-col.p-cl
                .p-cl-copy: span.k h2.h2 p.sub ul.rows.p-cl-list(li b span) .row(button.rect.rect-blue.lg#p-enter[data-enter-portal] Open, span.chip-s)
                .tile.tile-4x3.p-cl-tile[data-tile] > .shader.shader-still[data-palette-fixed] + .tile-copy.on-dark(span.tile-k > span + span.ex, p.tile-t)
   questions  section#questions.sec-tint.p-faq > .container > .sec-h(span.k h2.h2) + .rows.p-faq-list > details(summary, p) x5
   contact    section#contact.sec-flush.p-cta > .container > .tile.p-cta-tile[data-tile] > .shader[data-shader="orbit"]
                + .p-cta-in(span.k h2.h2.center p.sub.center .row.center > a.pill.pill-ink.lg Start)
   footer     footer.f-foot > .container.f-foot-in > a.f-brand + p (disclaimer)
   client area .p-app#p-app[role=dialog] > .p-app-in
                aside.pt-side: .pt-side-h(span.f-brand + p.pt-side-k) nav.pt-nav#pt-nav(a x4) .pt-who(i.pt-av + span(b + span))
                .pt-main: header.pt-top(div(p.pt-k h2.pt-h#pt-h) button.pill.pill-ghost#p-exit) + .pt-body
                  section#pt-overview: h3.pt-sec-h + .grid.g-3 > article.hcard(span.hcard-k p.hcard-p) x3
                  section#pt-docs: .pt-sec-k(h3.pt-sec-h span.ex) + ul.pt-docs > li(span.pt-thumb(inline svg or img 3:4),
                                   span.pt-doc-t(b span), span.chip-s, button.pill.pill-ghost.sm[aria-expanded][aria-controls], p.pt-prev[hidden]) x4
                  section#pt-messages: .pt-sec-k + .tile.tile-16x9.pt-msg[data-tile] > picture(tex-slate, lazy) + .chat.on-dark[data-lines]
                  section#pt-account: h3.pt-sec-h + ul.rows.pt-acct(li b span) + p.micro
   one .lead on the page (hero); every other sub line is p.sub. Mono tags are sentence case in the html. */

/* ---------- display face (verbatim from assets/fonts/BRANDS.md, declared here and nowhere else) ---------- */
@font-face{font-family:'Condensed Display';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/ibm-plex-sans-condensed-display.woff2') format('woff2')}
@font-face{font-family:'Condensed Display Fallback';src:local('Arial');size-adjust:94.2%;ascent-override:108.8%;descent-override:29.2%;line-gap-override:0%}

/* ---------- brand hooks (BRAND.md). --b-ground2 is the pale grey the shared tint recipes need; the bible's
   slate ground2 lives in --b-slate and is applied to .p-app. ---------- */
.fmt-portal{
  --b-ground:#FFFFFF;--b-ground2:#F4F5F6;--b-ink:#14181C;--b-slate:#101418;
  --b-accent:#E8B923;--b-accent-tint:#FBF3D2;--b-on-accent:#14181C;
  --b-display:'Condensed Display','Condensed Display Fallback',Arial,sans-serif;--b-display-weight:600;
  --b-line:rgba(20,24,28,.12);--b-surface:#FFFFFF;--b-cta:#E8B923;--b-on-cta:#14181C;--b-tab-rule:#E8B923;--b-focus:#14181C;
  --b-slate-ink:#E9ECEF;--b-slate-text2:#A9B1BA;--b-slate-line:rgba(233,236,239,.14);
  /* scrim: the copy block over a photograph is brand slate, not the shared blue black default, and the
     gradient above it lands opaque enough that the mono kicker clears AA at 12px. */
  --b-scrim:rgba(16,20,24,.92);--b-scrim-solid:#101418;--b-scrim-ink:#FFFFFF;
  --b-scrim-grad:linear-gradient(180deg,rgba(16,20,24,.10) 0%,rgba(16,20,24,.58) 54%,rgba(16,20,24,.88) 100%);
  --text-2:#5A626B;--text-3:#6E767F;--bg-3:#E8EAEC;--line-control:rgba(20,24,28,.4);
  --grid-line:rgba(20,24,28,.1);--r-tile:20px;--r-card:14px;
}
.fmt-portal main{background:var(--bg)}
.fmt-portal main ::selection,.fmt-portal .f-nav ::selection{background:var(--accent-tint);color:var(--ink)}
/* text3 clears AA on white only (4.60), so every tinted ground reads its small lines in text2 */
.fmt-portal .sec-tint,.fmt-portal .figcap.plate{--text-3:#5A626B}

/* ---------- type: Condensed Display 600 for h1, h2, lockup, boat name, tile titles; cards stay Inter ---------- */
.fmt-portal .f-brand,.fmt-portal main .h1,.fmt-portal main .h2,.fmt-portal .tile-t,.fmt-portal .figcap b,.fmt-portal .pt-h{font-family:var(--b-display);font-weight:600}
.fmt-portal main .h1{font-size:clamp(46px,7.4vw,106px);letter-spacing:-.015em;line-height:.98;max-width:14ch}
.fmt-portal main .h2{font-size:clamp(32px,4.2vw,58px);letter-spacing:-.01em;line-height:1.04;max-width:18ch;margin-bottom:16px}
.fmt-portal .tile-t{font-size:clamp(22px,2vw,28px);letter-spacing:-.01em;line-height:1.08}
.fmt-portal .hcard-t{font-family:var(--font-sans);font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em}
.fmt-portal .lead{color:var(--text-2);margin-bottom:clamp(24px,3vw,32px)}
.fmt-portal .sub{font-size:clamp(16px,1.25vw,19px);color:var(--text-2);line-height:1.5;max-width:52ch;margin:0 0 clamp(20px,2.4vw,28px)}
/* mono tags: yard tags, status chips, eyebrows, client area labels; sentence case in the html */
.fmt-portal .tag,.fmt-portal .chip-s,.fmt-portal .hcard-k,.fmt-portal .tile-k,.fmt-portal .pt-side-k,.fmt-portal .pt-k,.fmt-portal .pt-sec-h,.fmt-portal main .k{
  font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.fmt-portal main .k{display:flex;align-items:center;gap:10px;color:var(--text-3);margin-bottom:16px}
/* the yellow strap: a fill, never a word, on the public side */
.fmt-portal main .k::before{content:"";width:22px;height:3px;background:var(--accent);flex:none}
.fmt-portal .tile-k{margin-bottom:10px}
.fmt-portal .f-brand{font-size:18px;letter-spacing:0;gap:9px;white-space:nowrap}
@media (max-width:420px){.fmt-portal .f-brand{font-size:16px;gap:7px}}
.fmt-portal .f-mark{width:22px;height:22px}
.fmt-portal .f-mark svg,.fmt-portal .f-mark svg path{fill:none;stroke:currentColor}

/* ---------- nav and footer ---------- */
.fmt-portal .f-nav{border-bottom-color:var(--line)}
.fmt-portal .f-tabs a{opacity:.72}
.fmt-portal .f-tabs a:hover,.fmt-portal .f-tabs a.is-on{opacity:1}
.fmt-portal .f-tabs a.is-on::after,.fmt-portal .f-tabs a[aria-current]::after{height:2px;bottom:-4px}
/* the entry rect keeps its class; here it is ink, not blue (the demo bar keeps its blue) */
.fmt-portal .f-nav .rect-blue,.fmt-portal main .rect-blue{background:var(--ink);color:#fff}
.fmt-portal .f-nav .rect-blue:hover,.fmt-portal main .rect-blue:hover{filter:none;background:#2A3138}
.fmt-portal .pill-ink{background:var(--b-cta);color:var(--b-on-cta)}
.fmt-portal .pill-ink:hover{background:#F0C53A}
.fmt-portal .f-foot{border-top-color:var(--line);padding:40px 0 64px}
.fmt-portal .f-foot-in p{max-width:52ch;margin:0}

/* ---------- hairline grid ground: job sheet paper under the hero and the client pitch ---------- */
.fmt-portal .p-hero,.fmt-portal .p-cl-sec{position:relative;isolation:isolate}
.fmt-portal .p-hero::before,.fmt-portal .p-cl-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(to right,var(--grid-line) 1px,transparent 1px),linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:88px 88px;background-position:center top}
.fmt-portal .p-hero::before{-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}
.fmt-portal .p-cl-sec::before{-webkit-mask-image:linear-gradient(180deg,transparent,#000 30% 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30% 70%,transparent)}

/* ---------- hero: two faces, side by side ----------
   The public face on white (the job sheet grid under it): eyebrow, h1, lead, actions, the micro claim, and along
   its foot a strip of the yard that slides left as the page scrolls (a CSS scroll timeline; it never moves by
   itself, so there is nothing to pause, and it rests under reduced motion). The client face is a slate door to
   the right edge of the page: the owner's boat under its cover as a bounded film cell, the first two lines of
   her sheet with yellow tags, and the yellow Open that grows into the signed in view. Ink never sits on slate;
   on slate the yellow is a word or a line, and on the button it is a fill under ink. */
.fmt-portal .p-hero{padding:0}
.fmt-portal .p-faces{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);min-height:calc(100svh - var(--demo-bar-h) - var(--fnav-h))}
.fmt-portal .p-face-pub{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,3vw,40px);min-width:0;
  padding:clamp(28px,3.4vw,56px) clamp(24px,3.4vw,56px) clamp(24px,2.6vw,36px) max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter)))}
.fmt-portal .p-face-in .h1{margin-bottom:clamp(18px,2vw,26px);max-width:14ch;font-size:clamp(46px,6.5vw,96px)}
.fmt-portal .p-face-in .lead{max-width:44ch;margin-bottom:clamp(20px,2.2vw,28px)}
.fmt-portal .p-face-in .micro{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:7px 14px 7px 12px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--bg-2);color:var(--text-2)}
.fmt-portal .p-face-in .micro::before{content:"";width:8px;height:8px;background:var(--accent);flex:none}

/* the yard, a strip that follows the scroll */
.fmt-portal .p-run{position:relative;margin-right:calc(-1 * clamp(24px,3.4vw,56px));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
.fmt-portal .p-run-in{list-style:none;margin:0;padding:0;display:flex;gap:10px;width:max-content}
.fmt-portal .p-run-t{flex:none;width:clamp(170px,14.4vw,216px);aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--bg-3);position:relative}
.fmt-portal .p-run-t picture,.fmt-portal .p-run-t img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
@media (prefers-reduced-motion:no-preference){
  .fmt-portal .p-run-t{animation:p-tile-in .8s var(--ease) both}
  .fmt-portal .p-run-t:nth-child(2){animation-delay:.08s}
  .fmt-portal .p-run-t:nth-child(3){animation-delay:.16s}
  .fmt-portal .p-run-t:nth-child(4){animation-delay:.24s}
  .fmt-portal .p-run-t:nth-child(5){animation-delay:.32s}
  .fmt-portal .p-run-t:nth-child(6){animation-delay:.4s}
  @supports (animation-timeline:scroll()){
    .fmt-portal .p-run-in{animation:p-run-slide linear both;animation-timeline:scroll(root);animation-range:0 90vh}
  }
  .fmt-portal .p-door-in>*{animation:p-door-in .9s var(--ease) both}
  .fmt-portal .p-door-in>:nth-child(2){animation-delay:.08s}
  .fmt-portal .p-door-in>:nth-child(3){animation-delay:.14s}
  .fmt-portal .p-door-in>:nth-child(4){animation-delay:.2s}
  .fmt-portal .p-door-in>:nth-child(5){animation-delay:.3s}
  .fmt-portal .p-door-in>:nth-child(6){animation-delay:.4s}
  .fmt-portal .p-door{animation:p-door-open 1.1s cubic-bezier(.65,0,.35,1) both}
}
@keyframes p-tile-in{from{opacity:0;transform:translate3d(24px,0,0)}to{opacity:1;transform:none}}
@keyframes p-run-slide{to{transform:translate3d(-38%,0,0)}}
@keyframes p-door-in{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:none}}
@keyframes p-door-open{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}

/* the door: slate to the right edge of the page */
.fmt-portal .p-door{position:relative;background:#101418;color:#E9ECEF;display:flex;align-items:center;
  padding:clamp(28px,3.4vw,56px) max(var(--gutter),calc((100vw - var(--maxw)) / 2 + var(--gutter))) clamp(28px,3vw,48px) clamp(28px,3.4vw,56px)}
.fmt-portal .p-door::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--accent)}
.fmt-portal .p-door-in{width:100%;max-width:480px}
.fmt-portal .p-door-k{margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.fmt-portal .p-door-h{margin:0;font-family:var(--b-display);font-weight:600;font-size:clamp(30px,2.8vw,42px);line-height:1.02;letter-spacing:-.01em;color:#E9ECEF}
.fmt-portal .p-door-s{margin:8px 0 clamp(16px,1.8vw,22px);font-size:15px;line-height:1.45;color:#A9B1BA}
.fmt-portal .p-door-fig{position:relative;margin:0;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:#1B2127;box-shadow:0 0 0 1px rgba(233,236,239,.1)}
.fmt-portal .p-door-fig picture,.fmt-portal .p-door-fig img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.fmt-portal .p-door-fig .p-strip-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.fmt-portal .p-door-sheet{list-style:none;margin:clamp(14px,1.6vw,20px) 0 clamp(18px,2vw,26px);padding:0;display:grid}
.fmt-portal .p-door-sheet li{display:grid;grid-template-columns:4.5ch minmax(0,1fr);gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid rgba(233,236,239,.14);font-size:14px;line-height:1.45;color:#E9ECEF}
.fmt-portal .p-door-sheet li:last-child{border-bottom:1px solid rgba(233,236,239,.14)}
.fmt-portal .p-door-tag{font-size:12px;color:var(--accent)}
.fmt-portal .p-door .p-door-go{background:var(--accent);color:#14181C;border-color:var(--accent)}
.fmt-portal .p-door .p-door-go:hover{background:#F2C83A}
.fmt-portal .p-door .p-door-go:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (max-width:1100px) and (min-width:901px){
  .fmt-portal .p-faces{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
}
@media (max-width:900px){
  .fmt-portal .p-faces{grid-template-columns:minmax(0,1fr);min-height:0}
  .fmt-portal .p-face-pub{padding:28px var(--gutter) 28px}
  .fmt-portal .p-run{margin-right:calc(-1 * var(--gutter))}
  .fmt-portal .p-door{padding:36px var(--gutter) 40px}
  .fmt-portal .p-door-in{max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .fmt-portal .p-door .p-door-go{transition:none}
}

/* ---------- boats: the public job board ---------- */
.fmt-portal .p-boats{padding-top:var(--sec-sm);padding-bottom:var(--sec-sm)}
.fmt-portal .p-boats .sec-h{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-portal .p-board li{display:grid;grid-template-columns:5ch minmax(0,1fr) auto;gap:8px clamp(16px,2.4vw,32px);align-items:center;padding:16px 0}
.fmt-portal .p-board li>.tag{min-width:0;color:var(--text-2)}
.fmt-portal .p-boat{display:grid;gap:2px;min-width:0}
.fmt-portal .p-boat b{font-weight:500;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.01em}
.fmt-portal .p-boat span{font-size:15px;color:var(--text-2);line-height:1.45}
.fmt-portal .p-board .chip-s,.fmt-portal .chip-s.tint{background:var(--accent-tint);border-color:transparent;color:var(--ink);padding:5px 10px 4px}
.fmt-portal .chip-s{padding:5px 10px 4px;line-height:1.4}
.fmt-portal .p-note{margin-top:clamp(20px,2.4vw,28px);font-size:14px;color:var(--text-3)}
@media (max-width:560px){
  .fmt-portal .p-board li{grid-template-columns:5ch minmax(0,1fr)}
  .fmt-portal .p-board .chip-s{grid-column:2;justify-self:start;margin-left:0}
}

/* ---------- services: four 4:3 photographs, the tag in mono above the title ---------- */
.fmt-portal .p-svc{padding-bottom:clamp(56px,6vw,96px)}
.fmt-portal .svc-grid{gap:clamp(12px,1.6vw,20px)}
.fmt-portal .svc-c{background:var(--b-surface);border-color:var(--line)}
.fmt-portal .svc-c>picture{background:var(--bg-3);border-bottom:1px solid var(--line)}
.fmt-portal .svc-c>picture>img{aspect-ratio:4/3;transition:transform .6s var(--ease)}
.fmt-portal .svc-c:hover>picture>img{transform:scale(1.03)}
.fmt-portal .svc-c>.hcard-k{padding-top:clamp(14px,1.6vw,20px);color:var(--text-2)}
.fmt-portal .svc-c>.hcard-t{padding-top:8px}
.fmt-portal .svc-c>.hcard-p{padding-bottom:clamp(16px,1.8vw,22px)}

/* ---------- yard: the full bleed band, its caption on the straw plate ---------- */
.fmt-portal .p-yard{padding:0}
.fmt-portal .band{background:var(--bg-3)}
.fmt-portal .band>picture{--band-max:min(62vh,700px)}
.fmt-portal .figcap.plate{padding:16px var(--gutter) 18px;font-size:15px}
.fmt-portal .figcap.plate b{font-size:clamp(18px,1.5vw,22px);letter-spacing:-.01em;margin-right:6px}
.fmt-portal .figcap.plate span{color:var(--text-2)}

/* ---------- client pitch: three rows and the entry rect; the tile is a CSS still of the signed in view
   (slate, sidebar strip, yellow current rule, card stubs, row hairlines). No context. ---------- */
.fmt-portal .p-cl{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(32px,5vw,80px)}
.fmt-portal .p-cl-copy .sub{margin-bottom:clamp(20px,2.4vw,28px)}
.fmt-portal .p-cl-list{margin-bottom:clamp(22px,2.6vw,30px)}
.fmt-portal .p-cl-list li{align-items:baseline;gap:20px}
.fmt-portal .p-cl-list b{flex:none}
.fmt-portal .p-cl-list span{text-align:right;max-width:28ch}
.fmt-portal .p-cl .row .chip-s{background:var(--bg-2);border-color:var(--line);color:var(--text-2)}
.fmt-portal .p-cl-tile{background:var(--b-slate);box-shadow:0 30px 60px -40px rgba(20,24,28,.5)}
.fmt-portal .p-cl-tile .shader-still{
  background-color:var(--b-slate);
  background-image:
    linear-gradient(var(--b-accent),var(--b-accent)),
    repeating-linear-gradient(180deg,rgba(233,236,239,.26) 0 6px,transparent 6px 22px),
    linear-gradient(rgba(233,236,239,.07),rgba(233,236,239,.07)),
    linear-gradient(rgba(233,236,239,.07),rgba(233,236,239,.07)),
    linear-gradient(rgba(233,236,239,.07),rgba(233,236,239,.07)),
    repeating-linear-gradient(180deg,transparent 0 38px,rgba(233,236,239,.12) 38px 39px),
    linear-gradient(90deg,rgba(255,255,255,.035) 0 26%,rgba(233,236,239,.16) 26% calc(26% + 1px),transparent calc(26% + 1px));
  background-repeat:no-repeat;
  background-size:13% 2px,13% 28%,19% 20%,19% 20%,19% 20%,66% 40%,100% 100%;
  background-position:7% 16%,7% 36%,38% 21%,69% 21%,97% 21%,92% 96%,0 0}
.fmt-portal .p-cl-tile .tile-copy{padding:clamp(18px,2.4vw,28px);background:linear-gradient(180deg,rgba(16,20,24,0),rgba(16,20,24,.86) 55%);color:var(--b-slate-ink)}
.fmt-portal .p-cl-tile .tile-k,.fmt-portal .p-cl-tile .tile-s{color:var(--b-slate-text2)}
@media (max-width:900px){
  .fmt-portal .p-cl{grid-template-columns:1fr}
  .fmt-portal .p-cl-list span{text-align:left;max-width:none}
}

/* ---------- questions ---------- */
.fmt-portal .p-faq .sec-h{margin-bottom:clamp(20px,2.4vw,32px)}
.fmt-portal .p-faq-list{max-width:820px}
.fmt-portal .p-faq-list>details>summary{padding:16px 0;font-size:clamp(16px,1.25vw,18px)}
.fmt-portal .p-faq-list>details>summary::after{font-family:var(--font-mono);color:var(--text-2)}
.fmt-portal .p-faq-list>details>p{padding-bottom:18px}

/* ---------- contact: the one live shader, open to ?palette=. Copy sits on a glass plate so it reads at 4.5:1. ---------- */
.fmt-portal .p-cta{padding-bottom:var(--sec)}
.fmt-portal .p-cta-tile{min-height:clamp(420px,46vw,580px);display:grid;place-items:center;padding:clamp(20px,4vw,56px)}
.fmt-portal .p-cta-in{position:relative;z-index:2;text-align:center;max-width:680px;padding:clamp(28px,4vw,52px) clamp(24px,4vw,48px);
  background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.7);border-radius:var(--r-card);box-shadow:0 20px 60px -30px rgba(20,24,28,.35)}
.fmt-portal .p-cta-in .k{justify-content:center;color:var(--text-2)}
.fmt-portal .p-cta-in .h2{margin-left:auto;margin-right:auto}
.fmt-portal .p-cta-in .sub{margin:0 auto 28px}
@media (prefers-reduced-transparency:reduce){.fmt-portal .p-cta-in{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ========== the client area: opens in place from any [data-enter-portal], goes slate, closes back into the button ========== */
.fmt-portal .p-public{transition:opacity .4s var(--ease)}
.fmt-portal .p-public.is-off{opacity:0}
.fmt-portal .p-app{
  --bg:var(--b-slate);--bg-2:rgba(255,255,255,.05);--bg-3:rgba(255,255,255,.09);
  --ink:var(--b-slate-ink);--text-2:var(--b-slate-text2);--text-3:var(--b-slate-text2);
  --line:var(--b-slate-line);--line-control:rgba(233,236,239,.34);
  --accent:var(--b-accent);--accent-tint:rgba(232,185,35,.14);--b-surface:rgba(255,255,255,.04);
  position:fixed;top:var(--demo-bar-h);left:0;right:0;bottom:0;z-index:40;
  background:var(--bg);color:var(--ink);overflow:hidden;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .4s var(--ease),visibility 0s linear .4s}
.fmt-portal .p-app.is-on{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .4s var(--ease),visibility 0s linear 0s}
.fmt-portal .p-app-in{display:grid;grid-template-columns:256px minmax(0,1fr);height:100%}
.fmt-portal.p-locked{overflow:hidden}
.fmt-portal .p-app :focus-visible{outline-color:var(--accent)}
.fmt-portal .p-app ::selection{background:var(--accent);color:var(--b-on-accent)}

/* ---------- sidebar ---------- */
.fmt-portal .pt-side{display:flex;flex-direction:column;gap:24px;min-height:0;padding:24px 18px;border-right:1px solid var(--line);background:rgba(255,255,255,.025)}
.fmt-portal .pt-side-h{display:grid;gap:8px;padding:0 6px}
.fmt-portal .pt-side .f-brand{color:var(--ink)}
.fmt-portal .pt-side-k,.fmt-portal .pt-k{color:var(--accent);margin:0}
.fmt-portal .pt-nav{display:grid;gap:2px;min-height:0;overflow:auto}
.fmt-portal .pt-nav a{display:block;padding:10px 12px;border-radius:10px;font-size:15px;text-decoration:none;color:var(--text-2);
  transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.fmt-portal .pt-nav a:hover{background:var(--bg-2);color:var(--ink)}
/* on slate the yellow may be a line or a word: the current link is both */
.fmt-portal .pt-nav a[aria-current]{background:var(--bg-2);color:var(--accent);box-shadow:inset 2px 0 0 var(--accent)}
.fmt-portal .pt-who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:16px 6px 0;border-top:1px solid var(--line);font-size:14px}
.fmt-portal .pt-who>span{display:grid;min-width:0}
.fmt-portal .pt-who b{font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.fmt-portal .pt-who span span{color:var(--text-2);font-size:13px}
.fmt-portal .pt-av{flex:none;width:34px;height:34px;border-radius:9px;border:1px solid var(--line-control);color:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-weight:400;font-size:12px;font-style:normal;letter-spacing:.04em}

/* ---------- main column ---------- */
.fmt-portal .pt-main{min-width:0;display:flex;flex-direction:column;overflow:hidden}
.fmt-portal .pt-top{flex:none;display:flex;align-items:center;gap:16px;padding:18px clamp(20px,3vw,40px);border-bottom:1px solid var(--line)}
.fmt-portal .pt-h{font-size:clamp(26px,2.6vw,38px);letter-spacing:-.01em;line-height:1.04;margin-top:6px;color:var(--ink)}
.fmt-portal .pt-h:focus{outline:none}
.fmt-portal .pt-top .pill{margin-left:auto}
.fmt-portal .p-app .pill-ghost{background:transparent;border-color:var(--line-control);color:var(--ink)}
.fmt-portal .p-app .pill-ghost:hover{background:var(--bg-2)}
.fmt-portal .pt-body{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:clamp(20px,3vw,32px) clamp(20px,3vw,40px) 72px;display:grid;gap:clamp(32px,4vw,52px);align-content:start}
.fmt-portal .pt-body section{padding:0}
.fmt-portal .pt-body [id]{scroll-margin-top:12px}
.fmt-portal .pt-sec-h{color:var(--text-2);margin:0 0 14px;font-weight:400}
.fmt-portal .pt-sec-k{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.fmt-portal .pt-sec-k .ex{margin-bottom:14px}
.fmt-portal .p-app .ex{background:transparent;border-color:var(--line-control);color:var(--text-2)}
.fmt-portal .p-app .hcard{background:var(--b-surface);border-color:var(--line);gap:8px;padding:clamp(16px,2vw,22px)}
.fmt-portal .p-app .hcard-k{color:var(--accent)}
.fmt-portal .p-app .hcard-p{color:var(--ink);font-size:16px}
.fmt-portal .p-app .chip-s{background:transparent;border-color:rgba(232,185,35,.4);color:var(--accent)}

/* ---------- documents: vector thumbnails on slate, Open toggles the one line preview ---------- */
.fmt-portal .pt-docs{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--b-surface);overflow:hidden}
.fmt-portal .pt-docs li{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:12px 16px;border-top:1px solid var(--line)}
.fmt-portal .pt-docs li:first-child{border-top:0}
.fmt-portal .pt-thumb{flex:none;width:42px;aspect-ratio:3/4;border-radius:4px;border:1px solid var(--line);background:rgba(255,255,255,.04);overflow:hidden;display:block}
.fmt-portal .pt-thumb svg,.fmt-portal .pt-thumb img{display:block;width:100%;height:100%}
/* thumbnails are drawn ink on white: on slate the ink becomes slate text, the white fill goes, the yellow stays */
.fmt-portal .pt-thumb svg [stroke="#14181C" i]{stroke:var(--ink)}
.fmt-portal .pt-thumb svg [fill="#14181C" i]{fill:var(--ink)}
.fmt-portal .pt-thumb svg [fill="#FFFFFF" i],.fmt-portal .pt-thumb svg [fill="#FFF" i],.fmt-portal .pt-thumb svg [fill="white" i]{fill:transparent}
.fmt-portal .pt-doc-t{display:grid;gap:2px;min-width:0;margin-right:auto}
.fmt-portal .pt-doc-t b{font-weight:500;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.fmt-portal .pt-doc-t span{font-size:13px;color:var(--text-2)}
.fmt-portal .pt-docs .chip-s{flex:none}
.fmt-portal .pt-prev{flex:1 1 100%;margin:2px 0 4px 56px;padding:10px 14px;font-size:14px;color:var(--ink);border-left:2px solid var(--accent);background:var(--bg-2);border-radius:0 8px 8px 0}

/* ---------- messages: the slate texture under the assistant card ---------- */
.fmt-portal .pt-msg{max-width:860px;background:#161B20}
.fmt-portal .pt-msg>picture>img{opacity:.9}
.fmt-portal .pt-msg .chat,.fmt-portal .pt-msg .chat.on-dark{--b-glass:rgba(16,20,24,.8);--b-glass-line:var(--b-slate-line);--b-surface:rgba(255,255,255,.07);--ink:var(--b-slate-ink);--text-2:var(--b-slate-text2);--text-3:var(--b-slate-text2);--line:var(--b-slate-line);
  background:var(--b-glass);border-color:var(--b-glass-line);color:var(--ink);box-shadow:0 24px 60px -30px rgba(0,0,0,.6)}
.fmt-portal .pt-msg .chat .bub.out{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-portal .pt-msg .chat .bub.in{background:var(--b-surface);border-color:var(--line);color:var(--ink)}
.fmt-portal .pt-msg .chat-head .dot{background:var(--accent);box-shadow:0 0 0 3px rgba(232,185,35,.18)}
.fmt-portal .pt-acct{max-width:560px}
.fmt-portal .pt-acct li b{color:var(--ink)}
.fmt-portal .p-app .micro{color:var(--text-2)}

/* ---------- small screens: the sidebar becomes a row ---------- */
@media (max-width:900px){
  .fmt-portal .p-app-in{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  .fmt-portal .pt-side{flex-direction:row;align-items:center;gap:12px;overflow-x:auto;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}
  .fmt-portal .pt-side-h,.fmt-portal .pt-who{display:none}
  .fmt-portal .pt-nav{display:flex;gap:6px;overflow:visible}
  .fmt-portal .pt-nav a{white-space:nowrap;padding:8px 12px}
  .fmt-portal .pt-nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--accent)}
}
@media (max-width:620px){
  .fmt-portal .pt-doc-t{flex:1 1 100%;order:1;margin-right:0}
  .fmt-portal .pt-thumb{order:0}
  .fmt-portal .pt-docs .chip-s{order:2;margin-left:56px}
  .fmt-portal .pt-docs .pill{order:3;margin-left:auto}
  .fmt-portal .pt-prev{order:4;margin-left:0}
}

@media (prefers-reduced-motion:reduce){
  .fmt-portal .p-public,.fmt-portal .p-app,.fmt-portal .pt-nav a,.fmt-portal .svc-c>picture>img{transition:none}
  .fmt-portal .svc-c:hover>picture>img{transform:none}
}

/* ========== v8: more media, more motion ==========
   Everything below moves transform and filter only, never layout. Scroll reveals are the shared data-reveal
   (shared.js adds html.fmt-reveal outside reduced motion, so every .fmt-reveal rule here is silent under it);
   the hover and press rules are switched off again in the reduced motion block at the end. The signature move
   for this brand: the yellow strap is laid, never faded. Every yellow rule scales in from its left end once its
   block is in view, the hulls settle into the plan and the strap goes across the visitor's cradle last, the
   nav underline wipes in the same way, and a status chip is stamped onto its row. */


/* ---------- board: a square photograph per boat ---------- */
.fmt-portal .p-board li{grid-template-columns:5ch 88px minmax(0,1fr) auto}
.fmt-portal .p-thumb{display:block;width:88px;aspect-ratio:1/1;border-radius:8px;overflow:hidden;background:var(--bg-3);border:1px solid var(--line)}
.fmt-portal .p-thumb>img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.fmt-portal .p-board li:hover .p-thumb>img{transform:scale(1.04)}
@media (max-width:560px){
  .fmt-portal .p-board li{grid-template-columns:5ch 64px minmax(0,1fr)}
  .fmt-portal .p-thumb{width:64px}
  .fmt-portal .p-board .chip-s{grid-column:3}
}

/* ---------- questions: the list left, the slip at a rising tide right ---------- */
.fmt-portal .p-faq-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,5vw,80px);align-items:center}
.fmt-portal .p-faq-main{min-width:0}
.fmt-portal .p-faq-fig{margin:0}
.fmt-portal .p-faq-fig>picture{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-tile);overflow:hidden;background:var(--bg-3);box-shadow:0 30px 60px -44px rgba(20,24,28,.5)}
.fmt-portal .p-faq-fig>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:900px){
  .fmt-portal .p-faq-grid{grid-template-columns:1fr;gap:clamp(24px,4vw,40px)}
  .fmt-portal .p-faq-fig>picture{aspect-ratio:4/3}
}

/* ---------- client area overview: the owner's boat this week, above the three cards ---------- */
.fmt-portal .pt-view{margin:0 0 clamp(14px,1.6vw,20px);max-width:860px}
.fmt-portal .pt-view>picture{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.fmt-portal .pt-view>picture>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ---------- hover and press: one pixel up, a hair smaller on press ---------- */
.fmt-portal main .pill,.fmt-portal main .rect,.fmt-portal .f-nav .rect,.fmt-portal .p-app .pill{transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fmt-portal main .pill:hover,.fmt-portal main .rect:hover,.fmt-portal .f-nav .rect:hover,.fmt-portal .p-app .pill:hover{transform:translateY(-1px)}
.fmt-portal main .pill:active,.fmt-portal main .rect:active,.fmt-portal .f-nav .rect:active,.fmt-portal .p-app .pill:active,.fmt-portal .pt-nav a:active{transform:scale(.98)}
.fmt-portal .svc-c{transition:transform .28s var(--ease),border-color .28s var(--ease),box-shadow .28s var(--ease)}
.fmt-portal .svc-c:hover{transform:translateY(-1px);border-color:var(--line-control);box-shadow:0 22px 44px -34px rgba(20,24,28,.55)}
.fmt-portal .p-app .hcard{transition:transform .25s var(--ease),border-color .25s var(--ease)}
.fmt-portal .p-app .hcard:hover{transform:translateY(-1px);border-color:var(--line-control)}
.fmt-portal .pt-docs li{transition:background .2s var(--ease)}
.fmt-portal .pt-docs li:hover{background:var(--bg-2)}
.fmt-portal .p-faq-list>details>summary{transition:color .2s var(--ease)}
.fmt-portal .p-faq-list>details>summary:hover{color:var(--text-2)}

/* ---------- the nav underline wipes in from the left and out to the right ---------- */
.fmt-portal .f-tabs a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--b-tab-rule);transform:scaleX(0);transform-origin:100% 50%;transition:transform .35s var(--ease)}
.fmt-portal .f-tabs a:hover::after,.fmt-portal .f-tabs a.is-on::after,.fmt-portal .f-tabs a[aria-current]::after{transform:scaleX(1);transform-origin:0 50%}

/* ---------- the strap is laid: yellow rules scale in from the left once their block is in view ---------- */
.fmt-reveal .fmt-portal main .k::before{transform:scaleX(0);transform-origin:0 50%;transition:transform .55s var(--ease) .25s}
.fmt-reveal .fmt-portal .is-in .k::before,.fmt-reveal .fmt-portal .k.is-in::before{transform:scaleX(1)}
/* the board: the status chip is stamped onto the row a beat after the row arrives */
.fmt-reveal .fmt-portal .p-board li[data-reveal] .chip-s{filter:opacity(0);transform:scale(1.14);transition:filter .4s var(--ease) .32s,transform .45s var(--ease) .32s}
.fmt-reveal .fmt-portal .p-board li[data-reveal].is-in .chip-s{filter:none;transform:none}

@media (prefers-reduced-motion:reduce){
  .fmt-portal .p-thumb>img,.fmt-portal main .pill,.fmt-portal main .rect,.fmt-portal .f-nav .rect,.fmt-portal .p-app .pill,.fmt-portal .svc-c,.fmt-portal .p-app .hcard,.fmt-portal .pt-docs li,.fmt-portal .p-faq-list>details>summary,.fmt-portal .f-tabs a::after{transition:none}
  .fmt-portal .p-board li:hover .p-thumb>img,.fmt-portal main .pill:hover,.fmt-portal main .rect:hover,.fmt-portal .f-nav .rect:hover,.fmt-portal .p-app .pill:hover,.fmt-portal .svc-c:hover,.fmt-portal .p-app .hcard:hover{transform:none}
}