/* ============================================================
   Fluid Design System Case Study — bespoke additive layer.
   Shared components (chips, labels, mainrows, scores, notes,
   accordion, tables vocabulary) come from the library CSS.
   Scope: body.ord.fluid — additive only, no shared-rule edits.
   ============================================================ */

/* ---------- central single column, wide gutters (source geometry:
   224px gutters at 1440 viewport → 992px content column). Hero title +
   full-bleed case-study image sections keep full width via .fl-wide. ---------- */
.fluid section.section:not(.fl-wide) .maxw{max-width:992px;}

/* ---------- hero background: Fluid DS collage (content pre-rotated in the
   image — NO added rotation). Full-bleed cover; edges fade into the page bg
   (house edge-fade treatment: layered gradient masks, composited). Slight
   scale head-room keeps the parallax drift from exposing the top edge. ---------- */
body.ord.fluid .hero-bg .hero-grid{
  --hero-lift:14vh;
  width:100%;height:100%;top:0;right:0;left:0;bottom:0;
  object-fit:cover;object-position:center;
  transform:translate3d(0,calc(var(--gy,0px) - var(--hero-lift)),0) scale(1.06);
  transform-origin:center;
  filter:none;
  -webkit-mask-image:
    linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(to bottom,transparent 0,#000 8%,#000 90%,transparent 100%),
    linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect;}

/* hero block sits 50px above the viewport bottom edge (Fluid only;
   base body.ord .hero in visual.css uses 20px) */
body.ord.fluid .hero{padding-bottom:50px;}

/* ---------- prose sections ---------- */
.fluid .sec-prose .lead{max-width:76ch;}
.fluid .sec-prose .lead+.lead{margin-top:14px;}

/* ---------- process heads ---------- */
/* main section head — house cluster-head scale (matches OP v5 / OT v3) */
.fluid .proc-head h2.h-sec{font-size:clamp(28px,3.4vw,52px);margin-top:12px;}
/* sub-section heads (Colours / Spacing / Icons …) — clearly subordinate */
/* sub-section separation: visually 2× the desc→first-slot gap (A).
   A = .ot-main/.ot-mainrow margin-top = clamp(40px,5vh,72px). Rect-to-rect
   that's 2A doubled per-component, +9px leading compensation so the INK
   gaps hit 2:1 — desc text carries ~5.5px half-leading below its last line
   (counted inside A's ink gap, ×2 for B's target) while the h3 adds only
   ~2px above its cap line: 2×5.5 − 2 ≈ +9. */
.fluid .sub-head{margin-top:calc(clamp(80px,10vh,144px) + 9px);}
.fluid .sub-head h3.h-sec{font-size:clamp(19px,1.8vw,27px);}
/* sub-head → descriptive text: identical negative space everywhere, matched
   to the Colours reference (.fl-edcols margin-top). First-line half-leading
   of .lead (~5.3px) vs .ot-zp (~4.9px) differs sub-pixel — no compensation
   needed at any viewport. */
.fluid .sub-head+.lead{margin-top:clamp(20px,3vh,36px);}
.fluid .sub-head .pk{color:var(--peach);}

/* ---------- annot text (same treatment as CWAP) ---------- */
.fluid .ot-annot>.pv4-lab{margin-bottom:2px;}
.fluid .ot-annot>.ot-notes{margin-top:0;}
.fluid .ot-an-t b{color:var(--cream);}
.fluid .ot-an-t p{margin:3px 0 0;font-size:clamp(12.5px,.92vw,14.5px);color:var(--grey-dim);line-height:1.5;}

/* ---------- two-column editorial text layout (magazine style) ---------- */
.fl-edcols{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(36px,5vw,72px);row-gap:clamp(18px,2.6vh,28px);align-items:start;margin-top:clamp(20px,3vh,36px);}
.fl-edcol{display:flex;flex-direction:column;gap:clamp(14px,2vh,20px);}
.fl-edcol .lead{margin:0;}
@media(max-width:820px){.fl-edcols{grid-template-columns:1fr;}}

/* ---------- numbered observation rows ---------- */
.fl-obs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vh,22px) clamp(22px,2.8vw,44px);margin-top:clamp(20px,3vh,36px);}
.fl-obs .ot-an{display:flex;gap:12px;align-items:flex-start;}
.fl-obs .ot-an-t p{margin:2px 0 0;font-size:clamp(13px,.98vw,15.5px);color:var(--grey);line-height:1.55;}
.fl-obs.fl-stack{grid-template-columns:1fr;width:fit-content;max-width:100%;}
@media(max-width:760px){.fl-obs{grid-template-columns:1fr;}}

/* ---------- media column: vertical stack of slots ---------- */
.fluid .ot-mainrow>.fl-mstack{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));display:flex;flex-direction:column;gap:clamp(14px,2vh,24px);}
.fluid .fl-mstack .shot{aspect-ratio:16/9;}
.fluid .fl-mstack .shot image-slot{display:block;width:100%;height:100%;}
.fluid .ot-mainrow.fl-center{justify-content:center;}
@media(max-width:900px){.fluid .ot-mainrow>.fl-mstack{width:100%;max-width:none;}}

/* ---------- role bullets: don't span the full page ---------- */
.fluid .fl-rolenotes{max-width:72ch;}

/* media column with caption stacked under the slot — caption bottom sits on
   the row's bottom edge (slot lifts up to make room). Same footprint as the
   standard mainrow media column. */
.fluid .ot-mainrow>.fl-media-cap{flex:none;width:66%;max-width:max(420px,calc((100svh - var(--resv,250px)) * 1.7778));display:flex;flex-direction:column;gap:12px;}
.fluid .fl-media-cap .shot{aspect-ratio:16/9;}
.fluid .fl-media-cap .shot image-slot{display:block;width:100%;height:100%;}
.fluid .fl-media-cap .fl-role-cap{max-width:none;margin:0;}
@media(max-width:900px){.fluid .ot-mainrow>.fl-media-cap{width:100%;max-width:none;}}

/* team paragraph below the role-row's right-hand slot (CWAP treatment):
   width-matched to the media column, flushed right */
.fluid .fl-role-cap{max-width:min(66%,max(420px,calc((100svh - 245px) * 1.7778)));margin:12px 0 0 auto;}
@media(max-width:900px){.fluid .fl-role-cap{max-width:none;}}

/* roletime strip in the role row's media column: straight single line (as
   in the ordering case studies), sitting above & outside the team image
   slot, right-aligned. Kills the shared big top margin + -10px indent. */
.fluid .fl-media-cap .roletime{margin:0 0 0 auto;}

/* ---------- team member cards ---------- */
.fl-team{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,20px);margin-top:clamp(20px,3vh,32px);}
.fl-member{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px;border-radius:16px;border:1px solid var(--line);background:rgba(244,236,226,.025);}
.fl-member .av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:.76rem;font-weight:700;color:var(--cream);background:rgba(244,236,226,.06);border:1px solid var(--line-2);letter-spacing:.05em;}
.fl-member.is-me .av{color:var(--peach);background:rgba(255,188,149,.12);border-color:color-mix(in oklab,var(--peach) 40%,transparent);}
.fl-member .mtxt{display:flex;flex-direction:column;gap:3px;}
.fl-member .nm{font-size:.92rem;font-weight:650;color:var(--cream);line-height:1.25;}
.fl-member .rl{font-size:.78rem;color:var(--grey-dim);line-height:1.4;}
@media(max-width:1000px){.fl-team{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.fl-team{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.fl-team{grid-template-columns:1fr;}}

/* ---------- KPI 4-up ---------- */
.fluid .scores.fl-4{grid-template-columns:repeat(4,1fr);}
@media(max-width:1000px){.fluid .scores.fl-4{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.fluid .scores.fl-4{grid-template-columns:1fr;}}

/* ---------- two-up limit cards ---------- */
.fl-2col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px);margin-top:clamp(20px,3vh,32px);}
.fl-2col .limitcard{margin-top:0;}
@media(max-width:820px){.fl-2col{grid-template-columns:1fr;}}

/* ---------- data tables (house-styled, text verbatim) ---------- */
.fl-scroll{overflow-x:auto;margin-top:clamp(16px,2.2vh,24px);}
.fl-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(244,236,226,.02);min-width:640px;}
.fl-tr{display:grid;gap:12px;align-items:center;padding:11px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--grey);}
.fl-tr:first-child{border-top:0;}
.fl-tr.head{color:var(--cream);font-weight:700;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;background:rgba(244,236,226,.035);}
.fl-table--ramp .fl-tr{grid-template-columns:1.25fr .95fr .95fr .6fr .85fr 1.25fr;}
.fl-table--tok .fl-tr{grid-template-columns:.9fr 2.3fr .6fr;}
.fl-name{color:var(--cream);font-weight:600;display:flex;align-items:center;gap:9px;}
.fl-swatch{width:15px;height:15px;border-radius:4px;border:1px solid var(--line-2);flex:none;}
.fl-mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;}
.fl-tok-path{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--peach);opacity:.85;word-break:break-all;}

/* ---------- closing-notes section: ambient background video (same treatment
   as OP v5 Learnings — dimmed, edge-masked, behind the content) ---------- */
.learn-bgsec{position:relative;}
.learn-bgv{position:absolute;inset:0;z-index:0;pointer-events:none;}
.learn-bgv video{width:100%;height:100%;object-fit:cover;object-position:center;display:block;opacity:.2;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent 0,#000 15%,#000 85%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 15%,#000 85%,transparent 100%);
  mask-composite:intersect;}
.learn-bgsec .maxw{position:relative;z-index:1;}

/* ---------- closing-notes portrait art slot (sticky column) ---------- */
body.ord .fluid-close figure.fl-close-art{margin:20% 0;width:min(100%,calc(46vh * .75));}

/* ---------- Foundation full-width media rows (.ot-main.fl-full) ----------
   The slot spans the FULL content column (fluid's wide gutters excluded) —
   width never changes with the image; height does. A small script in the
   page sets each figure.fl-ar .shot's aspect-ratio from the placed image's
   natural dimensions, so the image fits 100% with no crop, on any desktop /
   iPad-landscape width. Empty slots hold the 16:9 default. */
.fluid .ot-main.fl-full{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,24px);}
/* NEVER cap these slots' height (overrides refine.css's .shot fold-cap
   max-height:min(66vh,640px)) — width is constant, height always fits the
   image's full aspect ratio, 100% visible on any viewport */
.fluid .frame.fl-ar .shot{max-height:none;min-height:0;}
/* no bottom "framed window" scrim on the two slots the user flagged (refine.css
   .frame:not(.phone) .shot::after draws a 64px dark fade band) */
.fluid .shot:has(> #fl-sol-var)::after,
.fluid .shot:has(> #fl-challenge)::after{content:none;display:none;}
.fluid .ot-main.fl-full>.frame{width:100%;margin:0;}
.fluid .ot-main.fl-full>.fl-mstack{display:flex;flex-direction:column;gap:clamp(14px,2vh,24px);}
.fluid .ot-main.fl-full .fl-mstack>.frame{margin:0;}
/* numbered call-outs re-flowed as a horizontal strip under the full-width main */
.fluid .ot-main.fl-full>.ot-annot{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 36px;align-items:start;}
.fluid .ot-main.fl-full>.ot-annot .pv4-lab{grid-column:1/-1;justify-self:start;}
.fluid .ot-main.fl-full>.ot-annot .ot-an+.ot-an{padding-top:0;border-top:0;}