/* ==========================================================================
   FANG FUTURES — offering pages (What we do → Reinvent work, Make what
   matters, Build your team)
   One level below the home, and quieter: a single column, generous air, one
   geometry — a funnel of hairline outlines: rings, squares or triangles — where
   the home has its rolling field. Light throughout; Gold closes it. Chrome is shared.
   ========================================================================== */

/* --- hero ------------------------------------------------------------------- */
.o-hero{position:relative;overflow:hidden;background:var(--bg);color:var(--fg1);min-height:88svh;display:grid;align-content:center;padding:140px var(--container-gutter) 96px}
.o-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
html.motion .o-rings{display:block}
.o-hero-inner{position:relative;max-width:var(--container-max);margin-inline:auto;width:100%;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(40px,6vw,120px);align-items:start}   /* the lede's first line sits with the breadcrumb on every page */
.o-hero-head{display:grid;gap:var(--space-5);justify-items:start}
.o-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);margin-bottom:var(--space-4)}
.o-crumb li{display:flex;align-items:center;gap:12px}
.o-crumb li+li::before{content:"";width:14px;height:1px;background:currentColor;opacity:.5}
.o-crumb a:hover,.o-crumb a:focus-visible{color:var(--fg1)}
.o-crumb [aria-current]{color:var(--fg1)}
.o-title{font-size:clamp(3rem,8.4vw,8rem);max-width:100%}   /* the head column sets the measure; balance sets the break */
.o-title-long{font-size:clamp(2.5rem,6vw,5.6rem)}   /* "Superpowered." must fit a 342px phone column */   /* a longer title steps down so its longest word still fits the head column */
.o-title .line-mask{display:block;padding:.06em .04em .12em;margin:-.06em -.04em -.12em}
.o-lede{display:grid;gap:var(--space-5);padding:clamp(20px,2vw,28px);margin:calc(-1*clamp(20px,2vw,28px));background:rgba(255,255,255,.6);border-radius:var(--radius-soft)}   /* a veil over the funnel: the type stays fully opaque, the motion shows through */
.o-lede p{font-weight:200;font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.5;color:var(--fg1);text-wrap:pretty;max-width:34ch}
.o-lede b{font-weight:600}
.o-lede .btn{justify-self:start;margin-top:var(--space-2);box-shadow:0 0 0 10px var(--bg)}   /* a white keyline holds the rings off the button */

/* --- the argument: one column, one measure ------------------------------------ */
.o-body{background:var(--bg);color:var(--fg1);padding:0 var(--container-gutter)}
.o-col{max-width:720px;margin-inline:auto}
.o-chapter{padding:0 0 clamp(88px,13vh,150px);display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vh,44px)}
.o-chapter>*{min-width:0}   /* wide items must not grow the column they break out of */
/* the chapter divider — the home's page-meta row: chapter left, page right, over a hairline */
.o-divider.breakout{margin-bottom:clamp(32px,6vh,72px);--bw:100vw;padding-inline:var(--container-gutter)}   /* the rule runs edge to edge; the labels sit at the gutters */
.o-chapter h2{font-size:clamp(1.75rem,2.7vw,2.4rem)}   /* a step below the home's poster-sub: these titles are sentences, not slogans, and they must break well at 720px */
.o-h2 .line-mask{padding:.06em .04em .14em;margin:-.06em -.04em -.14em}
.o-h2 .glitch-text{display:inline}
.o-h2 .glitch-text::before,.o-h2 .glitch-text::after{white-space:pre-line}   /* the static copies honour the same sentence break as the type */
.o-chapter-head{display:grid;gap:var(--space-4)}   /* titles live in the reading column; only cards and panels step out of it */
.o-lines .nb{white-space:nowrap}                       /* sentences never break mid-line; the head widens instead */
.h-arrow{display:inline-block;width:.74em;height:.46em;margin:0 0 0 .04em;vertical-align:.1em;fill:none;stroke:currentColor;stroke-width:6;stroke-linejoin:miter;stroke-linecap:butt}   /* the arrow, drawn to the Black weight; Sofia Pro has none */
.h-arrow.at-start{margin:0 .04em 0 0}
.h-arrow.at-end{display:none}   /* on wide screens the break comes before the arrow, so line two leads with it */
/* sources — evidence, set as a meta list */
.sources{display:grid;gap:var(--space-3);margin-top:var(--space-4)}
.sources ul{display:grid}
.sources li{display:grid;grid-template-columns:104px minmax(0,1fr);gap:var(--space-4);padding:14px 0;border-top:var(--border-hair);font-size:var(--text-base);line-height:1.5;color:var(--fg2)}
.sources li:last-child{border-bottom:var(--border-hair)}
.sources a{font-weight:600;color:var(--fg1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1.5px}
.sources a:hover{text-decoration-color:var(--fg1)}
/* offset blocks — the page steps sideways now and then, the way the home does */
.o-offset{margin-left:clamp(0px,8vw,120px)}
/* the field: the home's wave texture, fixed behind everything after the hero, quieter */
.o-field{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;display:none;opacity:0}
html.motion .o-field{display:block}
html.motion .o-body{background:rgba(255,255,255,.6)}   /* a veil over the field so the reading column holds; the type stays fully opaque */
.o-hero{z-index:1}
.o-prose{display:grid;gap:1.15em;font-size:clamp(17px,1.25vw,19px);line-height:1.65;color:var(--fg2);text-wrap:pretty}
.o-prose .lead{font-weight:200;font-size:clamp(1.15rem,1.55vw,1.4rem);line-height:1.5;color:var(--fg1);max-width:56ch}
.o-prose .rule-accent{margin:.4em 0}
.o-prose b{color:var(--fg1);font-weight:600}
.o-prose a{color:var(--fg1);text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1.5px;transition:text-decoration-color var(--dur-fast) var(--ease-standard)}
.o-prose a:hover,.o-prose a:focus-visible{text-decoration-color:var(--fg1)}

/* breakout: card groups step out of the reading column to the wide measure */
.breakout{--bw:min(1160px,calc(100vw - 2*var(--container-gutter)));width:var(--bw);margin-left:calc(50% - var(--bw)/2)}

/* cards — one anatomy from the reference: title and glyph up top, a numbered rule and the
   description at the bottom, and room in between */
/* every card in a group shares three row tracks — head, air, foot — so the numbered rule
   sits on the same line in each card, whatever the description's length (CSS subgrid) */
.moves,.tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-4);grid-auto-rows:auto minmax(clamp(96px,14vh,150px),1fr) auto}
.moves.four{grid-template-columns:repeat(2,minmax(0,1fr))}   /* four ways in: a two-by-two block */
.tools{grid-template-columns:1fr 1fr}
.move,.tool{border-radius:var(--radius-soft);display:grid;grid-template-rows:subgrid;grid-row:span 3;padding:clamp(24px,2.6vw,36px);background:var(--bg);color:var(--fg1)}
.move-head{grid-row:1}
.move-foot{grid-row:3}
.moves.four .move:nth-child(n+3){margin-top:var(--space-4)}   /* the second row of the two-by-two block */
.move{border:1px solid var(--hairline-strong)}
.move-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.move h3,.tool h3{font-weight:900;font-size:clamp(1.3rem,1.8vw,1.7rem);line-height:1.12;letter-spacing:-.012em;text-wrap:balance;max-width:13ch}
.move h3{max-width:16ch}
.tool h3,.moves.four h3{max-width:22ch}   /* the two-up cards have room: the titles break once, not twice */
.glyph{flex:none;width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--fg2);transition:color var(--dur-base) var(--ease-standard)}
.move-foot{display:grid;gap:var(--space-3);align-content:start}
.move-num{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);padding-bottom:10px;border-bottom:1px solid var(--hairline-strong)}
.move p,.tool p{font-size:var(--text-base);line-height:1.5;color:var(--fg2);text-wrap:pretty}
/* hover: the card floods Signal, everything on it goes white */
.move{transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.move p,.move .move-num,.move .glyph{transition:color var(--dur-base) var(--ease-standard),border-color var(--dur-base) var(--ease-standard)}
.move:hover{background:var(--signal-orange);color:var(--white);border-color:var(--signal-orange)}
.move:hover p,.move:hover .move-num,.move:hover .glyph{color:var(--white)}
.move:hover .move-num{border-color:rgba(255,255,255,.5)}
.tool{border:1px solid var(--fg1);transition:background var(--dur-base) var(--ease-standard),color var(--dur-base) var(--ease-standard)}
.tool .text-link{font-size:var(--text-sm);margin-top:var(--space-2)}
.tool:hover,.tool:focus-visible{background:var(--void);color:var(--white)}
.tool:hover p,.tool:focus-visible p,.tool:hover .text-link,.tool:focus-visible .text-link{color:rgba(255,255,255,.8)}
.tool:hover .move-num,.tool:focus-visible .move-num{color:var(--oracle-gold);border-color:rgba(255,255,255,.18)}
.tool:hover .glyph,.tool:focus-visible .glyph{color:var(--oracle-gold)}

/* the methodology — one Void panel, the line and the door to the method */
.method{border-radius:var(--radius-soft);background:var(--bg);color:var(--fg1);padding:clamp(32px,4vw,56px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-6);align-items:end}
.method-copy{display:grid;gap:var(--space-4);max-width:56ch}
.method-body{font-size:clamp(16px,1.15vw,18px);line-height:1.6;color:var(--fg2);text-wrap:pretty}
.o-pull{font-weight:200;font-size:clamp(1.5rem,2.6vw,2.4rem);line-height:1.3;letter-spacing:-.01em;color:var(--fg1);text-wrap:balance}

/* the numeral is framed by two full-width Signal rules */
.rule-accent.rule-full.in,.in .rule-accent.rule-full{width:100%}
@media (prefers-reduced-motion:reduce){.rule-accent.rule-full{width:100%!important}}

/* one number, one claim */
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);align-items:start}
.stat-num{font-weight:900;font-size:clamp(4.5rem,9vw,8rem);line-height:.72;letter-spacing:-.04em;color:var(--accent-2);font-variant-numeric:tabular-nums;margin-top:.06em}
.stat-num .x{font-style:normal;font-weight:900;font-size:.5em;margin-left:.04em;vertical-align:.3em;line-height:0}
.stat-num .unit{font-style:normal;font-weight:900;font-size:.26em;letter-spacing:-.01em;margin-left:.1em;vertical-align:.95em;line-height:0;text-transform:uppercase}   /* a unit, set small and high: 32 pts */
.stat-label{display:grid;gap:10px;font-size:clamp(16px,1.15vw,18px);line-height:1.5;color:var(--fg2);max-width:36ch;margin-top:-.3em}
.stat-label .text-link{font-size:var(--text-sm)}

/* the tools: a short lead-in before the two rows */
.o-tools{display:grid;gap:var(--space-3)}
.o-tools-lede{font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--fg2);max-width:52ch;text-wrap:pretty}

/* rows — resources, and the other offerings */
.o-rows{display:grid}
.o-next{grid-template-columns:1fr 1fr;gap:0 var(--space-6)}
.o-next .o-row{border-bottom:var(--border-hair);align-items:start;align-content:start;padding-block:clamp(24px,3vh,32px)}
.o-next .o-row .arrow{margin-top:.55em}
.o-next .o-row h3{margin-bottom:0}
.o-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5);align-items:center;padding:clamp(20px,2.6vh,28px) 0;border-top:var(--border-hair);color:var(--fg1)}
.o-row:last-child{border-bottom:var(--border-hair)}
.o-row h3{font-weight:900;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.1;letter-spacing:-.01em;margin-bottom:6px}
.o-row p{font-size:var(--text-base);line-height:1.5;color:var(--fg2);max-width:52ch;text-wrap:pretty}
.o-row .chapter-tag{font-size:var(--text-xs);margin-bottom:8px}
.o-row .arrow{font-size:1.5rem;font-weight:600;color:var(--fg3);transition:transform var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard)}
.o-row:hover .arrow,.o-row:focus-visible .arrow{transform:translateX(6px);color:var(--fg1)}


/* --- still geometry for screens that do not run the canvases -------------------
   Below 900px, and for anyone who prefers reduced motion, the funnel and the field
   are the same shapes rendered once as SVG (assets/img/funnel-*.svg, field-*.svg,
   generated from the canvas formulas). Media-gated so wide screens never fetch them. */
@media (max-width:899px), (prefers-reduced-motion:reduce){
  .o-rings{display:block;opacity:.45;background:url(img/funnel-rings.svg) no-repeat center/contain}
  .o-rings[data-shape="square"]{background-image:url(img/funnel-squares.svg)}
  .o-rings[data-shape="triangle"]{background-image:url(img/funnel-triangles.svg)}
  .o-rings[data-shape="burst"]{background-image:url(img/funnel-burst.svg)}
  .o-field{display:block;opacity:1;background:url(img/field-light-wide.svg) no-repeat center/cover}
  .o-body{background:rgba(255,255,255,.6)}
}
@media (max-width:899px){
  .o-field{background-image:url(img/field-light.svg)}
}

/* --- responsive ------------------------------------------------------------------- */
@media (max-width:1024px){
  .moves{grid-template-columns:repeat(3,minmax(0,1fr))}
  .moves.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .move h3,.tool h3{max-width:none}
  .o-hero-inner{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}   /* a long word may not widen the column */
  .o-lede p{max-width:60ch}
  .o-rings{opacity:.4}
}
@media (max-width:768px){
  .o-br{display:none}
  .o-h2 .glitch-text::before,.o-h2 .glitch-text::after{white-space:normal}
  .o-hero{padding:120px var(--container-gutter) 72px;min-height:0}
  .moves,.moves.four,.tools{grid-template-columns:1fr;grid-auto-rows:auto var(--space-6) auto}
  .move,.tool{margin-top:var(--space-4)}
  .move:first-child,.tool:first-child{margin-top:0}
  .o-offset{margin-left:0}
  .o-next{grid-template-columns:1fr;gap:0}
  .o-next .o-row:last-child{border-top:0}
  .sources li{grid-template-columns:1fr;gap:6px}
  .method{grid-template-columns:1fr;align-items:start}
  .o-lines br{display:none}
  .o-lines .nb{display:block}                        /* one sentence per line on small screens */
  .h-arrow.at-end{display:inline-block}
  .h-arrow.at-start{display:none}
  .move h3,.tool h3{max-width:none}
  .stat{grid-template-columns:1fr;align-items:start;gap:var(--space-4)}
}
@media (max-width:480px){
  .o-crumb li:first-child{display:none}   /* the brand mark already links home; the trail keeps to one line */
  .o-crumb li:nth-child(2)::before{display:none}
}