/* G3 Bookended — toasted hero, narrow Method, full claret close */

/* ── Self-hosted fonts (A3 / D-01..D-03) ──────────────────────────────────────
   Latin-subset woff2 from @fontsource (OFL-1.1; licenses in fonts/), served
   same-origin. Replaces the render-blocking cross-origin Google Fonts CSS.
   font-display: swap + metrics-matched fallbacks keep the wordmark always-on
   brand-correct with ~zero swap CLS. unicode-range matches Google's Latin range. */
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-pro-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif Pro';
  font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/source-serif-pro-latin-400-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Source Serif Pro';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/source-serif-pro-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metrics-matched fallbacks — prevent layout shift while the web font loads.
   size-adjust/ascent/descent computed from the woff2 metrics (RESEARCH §Pattern 1). */
@font-face {
  font-family: 'Source Serif Pro Fallback';
  font-style: normal; font-weight: 400;
  src: local('Georgia'), local('Noto Serif');
  size-adjust: 96.70%; ascent-override: 94.93%; descent-override: 34.64%;
}
@font-face {
  font-family: 'JetBrains Mono Fallback';
  font-style: normal; font-weight: 600;
  src: local('Menlo'), local('Courier New');
  size-adjust: 104.29%; ascent-override: 97.81%; descent-override: 28.77%;
}

:root{
  --parchment:#FAF7F0;--parchment-100:#FCFAF4;--parchment-300:#F2EEE2;--parchment-400:#E8E2D1;
  --navy:#0F2244;--navy-800:#0A1932;--navy-900:#06112A;
  --charcoal:#1A1F2E;
  --ochre:#A07C45;--ochre-200:#E0C994;--ochre-300:#CDAF6E;
  --claret:#7A1F2C;--claret-100:#ECC4C8;--claret-700:#4A1219;--claret-900:#1B0608;
  --slate:#5A5F6A;--hairline:#D7DAE0;--hairline-warm:#E8DFC9;
  --serif:'Source Serif Pro','Source Serif Pro Fallback',Georgia,serif;--mono:'JetBrains Mono','JetBrains Mono Fallback',Menlo,monospace;
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
}
*{box-sizing:border-box}html,body{margin:0;padding:0}
body{background:var(--parchment);color:var(--charcoal);font-family:var(--serif);font-size:19px;line-height:1.6;-webkit-font-smoothing:antialiased}
::selection{background:rgba(15,34,68,.12)}
.band{padding:120px 0}
.band > .inner{max-width:1320px;margin:0 auto;padding:0 64px}

/* Hero on toasted ground */
.band-hero{background:var(--parchment-400);padding:128px 0 96px;border-bottom:1px solid rgba(15,34,68,.1)}
.wordmark{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(56px, 11.5vw, 144px);line-height:.92;letter-spacing:-.02em;margin:0}
.descriptor{font-family:var(--serif);color:var(--charcoal);font-size:clamp(18px, 1.7vw, 22px);line-height:1.4;margin:24px 0 0;max-width:560px;text-wrap:pretty}
.hero-meta{display:grid;grid-template-columns:auto 1fr;column-gap:48px;align-items:start;margin-top:48px;padding-top:24px;border-top:1px solid rgba(15,34,68,.15)}
.hero-meta .col-l{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--charcoal);line-height:1.8}
.hero-meta .col-r{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--claret);text-align:right;line-height:1.8}

.band-practice{background:var(--parchment);padding:96px 0 128px;overflow-x:clip}

/* Narrower Method band */
.band-method{background:var(--navy-900);color:var(--ochre-200);padding:96px 0 96px}
.band-method h2{color:var(--parchment);font-size:clamp(32px, 4.5vw, 56px)}
.band-method .body{color:var(--ochre-200)}
.band-method .b-sub{color:var(--parchment)}
.band-method .rule-kicker{color:var(--ochre-300)}
.band-method .rule-kicker::before{background:var(--ochre)}
.band-method .rule-kicker::after{background:rgba(224,201,148,.2)}
.band-method .rule-kicker .num{color:var(--parchment)}
.band-method .plate{background:var(--navy-800);border:1px solid rgba(224,201,148,.2)}
.band-method .plate .stripes{background-image:repeating-linear-gradient(135deg,rgba(224,201,148,.07) 0,rgba(224,201,148,.07) 1px,transparent 1px,transparent 8px)}
.band-method .plate .badge{color:var(--ochre-300);background:var(--navy-900);border-color:rgba(224,201,148,.25)}
.band-method .plate .legend{color:var(--ochre-300)}

/* Inquiry — short setup band */
.band-inquiry{background:var(--parchment);padding:128px 0 96px;border-top:1px solid var(--hairline-warm)}

/* Full claret close */
.band-close{background:var(--claret);color:var(--parchment);padding:144px 0 96px}
.band-close .inner{display:grid;grid-template-columns:1.4fr 1fr;column-gap:96px;align-items:end}
.band-close .lab{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--claret-100);margin:0 0 24px;display:flex;align-items:center;gap:12px}
.band-close .lab::before{content:"";display:inline-block;width:48px;height:1px;background:var(--ochre-300)}
.band-close h2{color:var(--parchment);font-size:clamp(40px, 5.5vw, 72px);margin:0 0 32px;max-width:680px}
.band-close .lead{color:var(--ochre-200);font-style:italic;font-size:clamp(22px, 2.4vw, 30px);line-height:1.3;margin:0 0 40px;max-width:560px}
.band-close p{color:var(--claret-100);font-size:18px;line-height:1.6;margin:0 0 24px;max-width:520px}
.band-close a.email{font-family:var(--serif);font-size:clamp(28px, 3.6vw, 48px);line-height:1.3;color:var(--parchment);text-decoration:none;display:inline-block;margin-top:32px;position:relative;padding-bottom:4px}
.band-close a.email::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ochre-300);transform-origin:left center;transition:transform 200ms var(--ease-out)}
@media (hover: hover) and (pointer: fine){.band-close a.email:hover::after{transform:scaleY(2)}}
.band-close a.email:focus-visible{outline:2px solid var(--ochre-300);outline-offset:6px}
.band-close .meta{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--claret-100);line-height:1.9}
.band-close .meta strong{color:var(--parchment);font-weight:600;display:block;margin-bottom:8px}
.band-close .meta-block{padding:32px 0;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}
.band-close .seal-mark{width:80px;height:80px;background:var(--parchment);position:relative;display:inline-block;margin-bottom:24px}
.band-close .seal-mark::after{content:"T";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--serif);color:var(--claret);font-size:48px;line-height:1;font-style:italic}

footer{background:var(--claret-900);padding:32px 0;color:var(--claret-100)}
footer .inner{max-width:1320px;margin:0 auto;padding:0 64px;display:flex;align-items:flex-start;gap:64px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.7}
footer .inner .meta-left{display:flex;align-items:flex-start;gap:20px;flex:0 0 auto}
footer .inner .meta-left .brand{color:var(--parchment)}
footer .inner .defn{flex:1 1 auto;max-width:560px;margin:0;font-family:var(--serif);font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;line-height:1.55;color:var(--parchment)}
footer .inner .defn em{font-style:italic;font-weight:400}

.rule-kicker{display:flex;align-items:center;gap:16px;margin:0 0 40px;font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.rule-kicker::before{content:"";flex:0 0 64px;height:1px;background:var(--ochre)}
.rule-kicker::after{content:"";flex:1 1 auto;height:1px;background:var(--hairline)}
.rule-kicker .num{color:var(--navy);font-feature-settings:"tnum" 1}
h2{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(36px, 5.5vw, 72px);line-height:1.04;letter-spacing:-.02em;margin:0 0 48px;max-width:980px;text-wrap:balance}
h2 .find{color:var(--claret);font-style:italic}
.lead{font-family:var(--serif);font-style:italic;font-size:clamp(22px, 2.4vw, 32px);line-height:1.3;color:var(--charcoal);margin:0 0 40px;max-width:680px}
p.body{font-family:var(--serif);font-size:19px;line-height:1.65;color:var(--charcoal);margin:0 0 24px;max-width:680px;text-wrap:pretty}
.plate{width:100%;aspect-ratio:21/9;background:var(--parchment-100);position:relative;overflow:hidden;margin:48px 0;border:1px solid var(--hairline)}
.plate.tall{aspect-ratio:16/9}
.plate .stripes{position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(15,34,68,.05) 0,rgba(15,34,68,.05) 1px,transparent 1px,transparent 8px)}
.plate .image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.plate .badge{position:absolute;left:24px;top:24px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);background:var(--parchment);padding:6px 10px;border:1px solid var(--hairline)}
.plate .legend{position:absolute;left:24px;right:24px;bottom:24px;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.leader{margin:80px 0 0;max-width:980px}
.leader .stmt{display:grid;grid-template-columns:48px 1fr;column-gap:24px;align-items:start;padding:40px 0;border-top:1px solid var(--hairline)}
.leader .stmt:last-child{border-bottom:1px solid var(--hairline)}
.leader .num{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);padding-top:12px}
.leader .stmt-head{font-family:var(--serif);font-weight:400;color:var(--navy);font-size:clamp(24px, 2.8vw, 36px);line-height:1.18;letter-spacing:-.01em;margin:0 0 16px;max-width:760px;white-space:nowrap;text-wrap:balance}
.leader .stmt-body{font-family:var(--serif);font-size:18px;line-height:1.65;color:var(--charcoal);margin:0;max-width:680px;text-wrap:pretty}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;max-width:1080px}
.b-sub{font-family:var(--serif);font-weight:600;font-size:clamp(22px, 2.2vw, 28px);color:var(--hairline-warm);line-height:1.2;letter-spacing:-.005em;margin:0 0 20px}
.beat p.body{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--ochre-200);margin:0;max-width:520px;text-wrap:pretty}
.inquiry-block{max-width:760px}

/* Motion — gated by .js-motion (set in <head> only when prefers-reduced-motion: no-preference)
   Initial hidden states only; GSAP (motion.js) controls all timing/easing. */

/* Hero entry — descriptor + hero-meta start hidden; wordmark stays visible while its chars hide */
.js-motion .band-hero .descriptor{opacity:0;transform:translateY(6px)}
.js-motion .band-hero .hero-meta{opacity:0}

/* Wordmark split-char init — chars enter individually with stagger + back ease.
   margin-right preserves the parent's -0.02em letter-spacing across inline-block chars. */
.js-motion .wordmark{will-change:transform}
.js-motion .wordmark .char{display:inline-block;margin-right:-0.02em;transform:translateY(14px) scale(1.04);will-change:transform}
.js-motion .wordmark .char:last-child{margin-right:0}

/* Practice H2 split-word init — words enter sequentially, .find arrives with the others */
.js-motion .band-practice h2 .word{display:inline-block;transform:translateY(14px);will-change:transform}

/* Plate clip-path init — image wipes left-to-right on viewport entry */
.js-motion .band-practice .plate{clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}

/* Leader stmts — stmt itself stays visible (border, padding); children animate sequentially */
.js-motion .leader .stmt .num{opacity:0;transform:scale(0.85);transform-origin:left center;will-change:transform,opacity}
.js-motion .leader .stmt .stmt-head,
.js-motion .leader .stmt .stmt-body{opacity:0;transform:translateY(12px);will-change:transform,opacity}

/* Email link — magnetic hover applies translate via GSAP */
.js-motion .band-close a.email{will-change:transform}

/* Email underline — CSS-driven scaleX draw-in on close-band entry (ScrollTrigger toggles .is-visible) */
.js-motion .band-close a.email::after{transform:scaleX(0);transition:transform 360ms var(--ease-out)}
.js-motion .band-close.is-visible a.email::after{transform:scaleX(1)}
@media (hover: hover) and (pointer: fine){
  .js-motion .band-close.is-visible a.email:hover::after{transform:scaleX(1) scaleY(2);transition-duration:200ms}
}

/* ─── Responsive: Tablet (≤1023px) ─────────────────────────────────────
   Tighten gutters and vertical rhythm; grids stay 2-column where they fit. */
@media (max-width: 1023px){
  .band{padding:96px 0}
  .band > .inner{padding:0 40px}
  .band-hero{padding:96px 0 80px}
  .band-practice{padding:80px 0 96px}
  .band-method{padding:80px 0}
  .band-inquiry{padding:96px 0 80px}
  .band-close{padding:112px 0 80px}
  .band-close .inner{column-gap:64px}
  footer .inner{padding:0 40px}
  .leader{margin:64px 0 0}
  .method-grid{gap:48px}
  .hero-meta{column-gap:32px;margin-top:48px}
  h2{margin:0 0 36px}
  .leader .stmt{padding:36px 0}
}

/* ─── Responsive: Mobile (≤767px) ──────────────────────────────────────
   Stack 2-column grids; reduce gutters; trim vertical rhythm. */
@media (max-width: 767px){
  .band{padding:72px 0}
  .band > .inner{padding:0 24px}
  .band-hero{padding:80px 0 56px}
  .band-practice{padding:56px 0 72px}
  .band-method{padding:56px 0}
  .band-inquiry{padding:72px 0 56px}
  .band-close{padding:88px 0 56px}

  /* Hero — meta stacks; col-r left-aligns */
  .hero-meta{grid-template-columns:1fr;column-gap:0;row-gap:20px;margin-top:40px;padding-top:24px}
  .hero-meta .col-r{text-align:left}
  .descriptor{margin:24px 0 0}

  /* Practice — plate gets a taller aspect on mobile so it doesn't dwindle */
  .band-practice .plate{aspect-ratio:16/9;margin:32px 0}
  .leader{margin:48px 0 0}
  .leader .stmt{grid-template-columns:32px 1fr;column-gap:16px;padding:28px 0}
  .leader .stmt-head{margin:0 0 12px;white-space:normal}

  /* Method — beats stack */
  .method-grid{grid-template-columns:1fr;gap:32px;max-width:100%}
  .beat p.body{max-width:100%}

  /* Close — two-column inner stacks; seal/meta row-flows below the headline column */
  .band-close .inner{grid-template-columns:1fr;column-gap:0;row-gap:48px;align-items:start}
  .band-close .lab{margin:0 0 20px}
  .band-close .lab::before{width:32px}
  .band-close a.email{margin-top:24px}
  .band-close .seal-mark{width:60px;height:60px;margin-bottom:18px}
  .band-close .seal-mark::after{font-size:36px}
  .band-close .meta-block{padding:24px 0}

  /* Rule kicker — tighten the leading hairline */
  .rule-kicker{gap:12px;margin:0 0 28px}
  .rule-kicker::before{flex:0 0 36px}

  /* Headlines — tighter bottom margin since they wrap to more lines */
  h2{margin:0 0 28px}

  /* Footer — meta stacks above defn block; tighter line-height for serif wrap */
  footer .inner{flex-direction:column;gap:14px;padding:0 24px;line-height:1.6}
  footer .inner .meta-left{gap:16px}
  footer .inner .defn{max-width:100%}
}

/* ─── Responsive: Small mobile (≤419px) ────────────────────────────────
   One more pull-back for very narrow viewports. */
@media (max-width: 419px){
  .band > .inner{padding:0 20px}
  footer .inner{padding:0 20px}
  .band-close .seal-mark{width:52px;height:52px}
  .band-close .seal-mark::after{font-size:32px}
  .leader .stmt{grid-template-columns:28px 1fr;column-gap:14px}
}

/* ─── Fluid vessel — replaces the practice-band illustration ──────────
   Full-bleed within the band: breaks out of .inner's max-width to span 100vw,
   80vh tall. SVG viewBox is recomputed in motion.js to match container px (1:1)
   so bubbles stay round. Layer paths are JS-driven; legend is static markup. */
.fluid-vessel{
  position:relative;
  margin:48px calc(50% - 50vw) 56px;
  width:100vw;
  height:80vh;
  overflow:hidden;
  background:var(--parchment-100);
  border-top:1px solid var(--hairline-warm);
  border-bottom:1px solid var(--hairline-warm);
  cursor:default;
  user-select:none;
}
.fluid-vessel-svg{display:block;width:100%;height:100%}

/* In-band labels — overlaid as the centerpiece typography of the vessel.
   The whole fluid is one navy body = "what you paid" (the full amount); the
   top slice is marked by a translucent diagonal hatch = "what you're owed
   back", a portion OF that same body — not a second colour.
   Vertical positions assume fillRatio 0.80 (top 20% air, fluid in bottom 80%)
   with the hatched owed slice occupying the top 25% of the fluid region:
     air     0% → 20%
     owed   20% → 40%   (center 30%, hatched slice = the owed portion)
     paid   centered at 70% over the body of the full amount */
.fv-label{
  position:absolute;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  pointer-events:none;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-shadow:0 1px 8px rgba(0,0,0,.25);
}
.fv-label-tag{
  font-family:var(--mono);
  font-size:11px;font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.85;
}
.fv-label-text{
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(32px, 5.2vw, 72px);
  line-height:1.0;
  letter-spacing:-.015em;
  text-wrap:balance;
}
.fv-label-owed{
  top:30%;
  color:var(--ochre-200);  /* legible against navy + hatch */
}
.fv-label-paid{
  top:70%;
  color:var(--ochre-200);  /* legible against navy */
}

@media (max-width:1023px){
  .fluid-vessel{height:70vh;margin:36px calc(50% - 50vw) 40px}
  .fv-label-text{font-size:clamp(28px, 5.4vw, 56px)}
}
@media (max-width:767px){
  .fluid-vessel{height:60vh;margin:28px calc(50% - 50vw) 32px}
  .fv-label-text{font-size:clamp(22px, 7vw, 40px)}
  .fv-label-tag{font-size:10px}
}

/* Reduced motion — vessel still renders (JS clamps amplitude + disables bubbles).
   No further CSS hooks needed; module honors the media query at runtime. */

/* ─── Inquiry block — two-column "What you bring / What you get" ──── */
.inquiry-grid{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline-warm);margin:40px 0 24px}
.inquiry-col{padding:32px}
.inquiry-col+.inquiry-col{border-left:1px solid var(--hairline-warm)}
.inquiry-col-head{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ochre);margin:0 0 16px}
.inquiry-col ul{font-family:var(--serif);font-size:17px;line-height:1.65;color:var(--charcoal);margin:0;padding-left:20px}
.inquiry-col li{margin-bottom:8px}
.inquiry-note{font-family:var(--serif);font-size:16px;line-height:1.6;color:var(--slate);font-style:italic;margin:20px 0 0}
.inquiry-footer{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin:0}

@media (max-width:767px){
  .inquiry-grid{grid-template-columns:1fr}
  .inquiry-col+.inquiry-col{border-left:none;border-top:1px solid var(--hairline-warm)}
}