/* ═══════════════════════════════════════════════════════════════════════
   ABOUT.CSS — shared styles for about-agarwood.html & who-we-are.html
   Gold = informative zone throughout. Importiert shared.css.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── PAGE HERO ───────────────────────────────────────────────────────── */
.page-hero {
  position: relative; height: 100vh; min-height: 680px;
  display: flex; align-items: flex-end; overflow: hidden;
  padding-top: var(--nav-total);
}
.page-hero-bg { position: absolute; inset: -10%; will-change: transform; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-hero-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,  rgba(11,26,20,.96) 0%, rgba(11,26,20,.48) 55%, rgba(11,26,20,.12) 100%),
    linear-gradient(to right, rgba(11,26,20,.62) 0%, transparent 65%);
}
/* gold radial glow */
.page-hero-veil::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 45% at 0% 100%, rgba(184,146,74,.07), transparent 72%);
}
.page-hero-cnt {
  position: relative; z-index: 2;
  padding: 0 var(--pad-x) 88px; width: 100%;
}
.page-hero-eyebrow {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 14px; margin-bottom: 26px;
  opacity: 0; animation: fadeUp .8s .3s var(--ease) forwards;
}
.page-hero-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--gold-mid); }
.page-hero-h1 {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(52px, 7.5vw, 110px); line-height: .92;
  letter-spacing: -.025em; color: var(--cream);
  margin-bottom: 28px; overflow: hidden;
}
.page-hero-h1 .wl        { display: block; overflow: hidden; }
.page-hero-h1 .wl span   { display: block; opacity: 0; transform: translateY(110%); animation: slideUp .95s var(--ease) forwards; }
.page-hero-h1 .wl:nth-child(1) span { animation-delay: .4s; }
.page-hero-h1 .wl:nth-child(2) span { animation-delay: .56s; }
.page-hero-h1 .wl:nth-child(3) span { animation-delay: .72s; color: var(--gold-light); }
.page-hero-sub {
  font-family: var(--f-serif); font-size: clamp(15px,1.8vw,22px);
  font-style: italic; color: var(--cream-40); max-width: 560px; line-height: 1.72;
  opacity: 0; animation: fadeUp .8s 1s var(--ease) forwards;
}
.page-hero-scroll {
  position: absolute; bottom: 88px; right: var(--pad-x); z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; animation: fadeUp .6s 1.5s forwards;
}
.scrl-line { width: 1px; height: 52px; background: linear-gradient(to bottom, var(--gold), transparent); animation: drip 2.3s 2s infinite; }
.scrl-txt  { font-family: var(--f-mono); font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--cream-18); writing-mode: vertical-rl; }

/* ── SECTION BASE ────────────────────────────────────────────────────── */
.sec { padding: 112px var(--pad-x); position: relative; z-index: 2; }
.sec-bg-mid  { background: var(--bg-mid); }
.sec-bg-surf { background: var(--bg-surface); }
.sec-bg-dark { background: var(--bg); }

.sec-lbl {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
  display: flex; align-items: center; gap: 12px; margin-bottom: 48px;
}
.sec-lbl::before { content: ''; width: 20px; height: 1px; background: var(--gold); }

.sec-h2 {
  font-family: var(--f-serif); font-weight: 300;
  font-size: clamp(34px, 4vw, 58px); line-height: 1.05;
  letter-spacing: -.015em; color: var(--cream); margin-bottom: 20px;
}
.sec-h2 em { font-style: italic; color: var(--gold-light); }

/* ── CHAPTER BREAK ───────────────────────────────────────────────────── */
.chapter-break {
  position: relative; height: 62vh; min-height: 440px; overflow: hidden;
}
.cb-bg { position: absolute; inset: -15%; will-change: transform; }
.cb-bg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cb-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(11,26,20,.55) 0%, rgba(11,26,20,.18) 45%, rgba(11,26,20,.74) 100%);
}
.cb-txt  { position: absolute; bottom: 56px; left: var(--pad-x); right: var(--pad-x); z-index: 2; }
.cb-lbl  { font-family: var(--f-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.cb-lbl::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.cb-h    { font-family: var(--f-serif); font-weight: 300; font-size: clamp(28px,4.2vw,60px); line-height: 1.0; letter-spacing: -.02em; color: var(--cream); }
.cb-h em { font-style: italic; color: var(--gold-light); }

/* ── STAT ROW ────────────────────────────────────────────────────────── */
.stat-row { display: flex; border: 1px solid var(--border); }
.stat-box { flex: 1; padding: 28px 28px; border-right: 1px solid var(--border); }
.stat-box:last-child { border-right: none; }
.stat-box-n { font-family: var(--f-serif); font-size: clamp(32px,3.5vw,52px); font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.stat-box-l { font-family: var(--f-mono); font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--cream-18); line-height: 1.6; }

/* ── TWO-COL LAYOUT ──────────────────────────────────────────────────── */
.two-col    { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.two-col-r  { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.two-col-r .col-img { order: -1; }

.col-body   { font-size: 15px; font-weight: 300; color: var(--cream-70); line-height: 1.85; margin-bottom: 22px; }
.col-img    { position: relative; overflow: hidden; }
.col-img img { width: 100%; height: 100%; min-height: 440px; object-fit: cover; filter: brightness(.8) saturate(.9); transition: transform 8s var(--ease); }
.col-img:hover img { transform: scale(1.04); }
.col-img-cap { position: absolute; bottom: 14px; left: 16px; font-family: var(--f-mono); font-size: 8px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-40); }

/* ── FULL-WIDTH IMAGE ────────────────────────────────────────────────── */
.full-img { position: relative; height: 70vh; min-height: 480px; overflow: hidden; }
.full-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.full-img-cap { position: absolute; bottom: 20px; right: var(--pad-x); font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-40); }

/* ── STICKY IMAGE + TEXT ─────────────────────────────────────────────── */
.sticky-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.sticky-img-col { position: sticky; top: var(--nav-total); height: calc(100vh - var(--nav-total)); overflow: hidden; }
.sticky-img-col img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.sticky-text-col { padding: 80px 64px; }
.sticky-block { padding: 48px 0; border-bottom: 1px solid var(--border); }
.sticky-block:last-child { border-bottom: none; }
.sb-num   { font-family: var(--f-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.sb-title { font-family: var(--f-serif); font-size: 28px; font-weight: 400; color: var(--cream); margin-bottom: 14px; line-height: 1.15; }
.sb-body  { font-size: 14px; font-weight: 300; color: var(--cream-40); line-height: 1.85; }

/* ── PROCESS STEPS ───────────────────────────────────────────────────── */
.psteps { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.pstep  { background: var(--bg-mid); padding: 40px 28px; position: relative; transition: background .4s; }
.pstep:hover { background: var(--bg-surface); }
.pstep-num   { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; }
.pstep-icon  { width: 36px; height: 36px; margin-bottom: 16px; color: var(--cream-40); }
.pstep-title { font-family: var(--f-serif); font-size: 21px; font-weight: 400; color: var(--cream); margin-bottom: 10px; }
.pstep-body  { font-size: 13px; font-weight: 300; color: var(--cream-40); line-height: 1.78; }
.pstep-img   { height: 200px; overflow: hidden; margin-bottom: 20px; }
.pstep-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.7); }
.pstep-line  { position: absolute; top: 40px; right: -1px; width: 1px; height: 0; background: var(--gold); transition: height .8s var(--ease); }
.pstep:hover .pstep-line { height: 50%; }

/* ── GRID OF 3 ───────────────────────────────────────────────────────── */
.grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); }
.g3-item { background: var(--bg-mid); padding: 40px 32px; position: relative; overflow: hidden; transition: background .4s; }
.g3-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--gold); transition: width .55s var(--ease); }
.g3-item:hover  { background: var(--bg-surface); }
.g3-item:hover::after { width: 100%; }
.g3-num   { font-family: var(--f-serif); font-size: 48px; font-weight: 300; color: var(--cream-08); line-height: 1; margin-bottom: 18px; }
.g3-title { font-family: var(--f-serif); font-size: 23px; font-weight: 400; color: var(--cream); margin-bottom: 12px; }
.g3-body  { font-size: 14px; font-weight: 300; color: var(--cream-40); line-height: 1.78; }

/* ── MARKET SEGMENTS (horizontal scroll) ────────────────────────────── */
.mkt-scroll { overflow-x: auto; cursor: grab; padding-bottom: 16px; }
.mkt-scroll:active { cursor: grabbing; }
.mkt-track  { display: flex; gap: 1px; width: max-content; }
.mkt-seg    { width: 260px; flex-shrink: 0; background: var(--bg-surface); padding: 28px 24px; border-top: 2px solid transparent; transition: border-color .3s, background .3s; }
.mkt-seg:hover { border-top-color: var(--gold); background: var(--bg-raised); }
.mkt-seg-n  { font-family: var(--f-serif); font-size: 32px; font-weight: 300; color: var(--gold); line-height: 1; margin-bottom: 8px; }
.mkt-seg-l  { font-family: var(--f-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--cream-18); margin-bottom: 14px; }
.mkt-seg-b  { font-size: 13px; font-weight: 300; color: var(--cream-40); line-height: 1.7; }

/* ── INOC ACCORDION ──────────────────────────────────────────────────── */
.inoc-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.inoc-img-col { position: sticky; top: var(--nav-total); height: 520px; overflow: hidden; }
.inoc-img-col img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75); }
.inoc-steps { display: flex; flex-direction: column; gap: 0; }
.ist { border-bottom: 1px solid var(--border); cursor: none; }
.ist-q { display: flex; align-items: flex-start; gap: 18px; padding: 22px 0; }
.ist-q-num { font-family: var(--f-mono); font-size: 9px; letter-spacing: .18em; color: var(--gold); padding-top: 3px; flex-shrink: 0; }
.ist-q-txt { font-family: var(--f-serif); font-size: 20px; font-weight: 400; color: var(--cream); flex: 1; line-height: 1.25; }
.ist-q-ic  { font-size: 18px; color: var(--gold); transition: transform .35s var(--ease); flex-shrink: 0; margin-top: 2px; }
.ist.open .ist-q-ic { transform: rotate(45deg); }
.ist-a  { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.ist.open .ist-a { max-height: 400px; }
.ist-a-inner { padding: 0 0 24px 38px; font-size: 14px; font-weight: 300; color: var(--cream-40); line-height: 1.8; }

/* ── FAQ ─────────────────────────────────────────────────────────────── */
.faq-block  { max-width: 800px; margin: 0 auto; }
.fq { border-bottom: 1px solid var(--border); cursor: none; }
.fq-q  { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 0; }
.fq-qt { font-family: var(--f-serif); font-size: 19px; font-weight: 400; color: var(--cream); line-height: 1.25; }
.fq-ic { font-size: 20px; color: var(--gold); transition: transform .35s var(--ease); flex-shrink: 0; }
.fq.open .fq-ic { transform: rotate(45deg); }
.fq-a  { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease); }
.fq.open .fq-a { max-height: 500px; }
.fq-at { padding: 0 0 22px; font-size: 14px; font-weight: 300; color: var(--cream-40); line-height: 1.8; }

/* ── WHO WE ARE — TEAM FRAGMENTS ─────────────────────────────────────── */
.frag-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--border); }
.frag { background: var(--bg-mid); overflow: hidden; cursor: none; transition: background .3s; }
.frag:hover { background: var(--bg-surface); }
.frag-img { height: 300px; overflow: hidden; }
.frag-img img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.75) saturate(.9); transition: transform .7s var(--ease), filter .4s; }
.frag:hover .frag-img img { transform: scale(1.04); filter: brightness(.88) saturate(1); }
.frag-body { padding: 28px 24px; }
.frag-role { font-family: var(--f-mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.frag-name { font-family: var(--f-serif); font-size: 22px; font-weight: 400; color: var(--cream); margin-bottom: 10px; }
.frag-bio  { font-size: 13px; font-weight: 300; color: var(--cream-40); line-height: 1.75; }

/* ── DASOS PROFILE ───────────────────────────────────────────────────── */
.dasos-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.dasos-img-wrap { display: grid; grid-template-rows: 1fr auto; gap: 8px; }
.dasos-img-main { height: 420px; overflow: hidden; }
.dasos-img-main img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.78); }
.dasos-img-sub  { height: 180px; overflow: hidden; }
.dasos-img-sub img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.72); }
.dasos-facts { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--border); margin-bottom: 28px; }
.df { padding: 18px 20px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); transition: background .3s; }
.df:nth-child(even) { border-right: none; }
.df:nth-last-child(-n+2) { border-bottom: none; }
.df:hover { background: var(--cream-08); }
.df-n { font-family: var(--f-serif); font-size: 26px; font-weight: 400; color: var(--cream); line-height: 1; margin-bottom: 4px; }
.df-l { font-size: 12px; font-weight: 300; color: var(--cream-40); line-height: 1.5; }

/* ── STRUCTURE DIAGRAM ───────────────────────────────────────────────── */
.struct-diag  { display: flex; flex-direction: column; align-items: center; gap: 0; max-width: 700px; margin: 0 auto; }
.sd-node { width: 100%; padding: 24px 28px; background: var(--bg-surface); border: 1px solid var(--border); cursor: none; transition: background .3s; }
.sd-node:hover { background: var(--bg-raised); }
.sd-node.hi { border-color: var(--border-gold); }
.sd-node.hi:hover { background: rgba(184,146,74,.06); }
.sd-node-lbl { font-family: var(--f-mono); font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.sd-node-t   { font-family: var(--f-serif); font-size: 20px; font-weight: 400; color: var(--cream); margin-bottom: 8px; }
.sd-node-d   { font-size: 12px; font-weight: 300; color: var(--cream-40); line-height: 1.7; }
.sd-arr      { display: flex; flex-direction: column; align-items: center; padding: 10px 0; }
.sd-arr .sd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-mid); margin: 3px 0; }
.sd-cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-18); margin-top: 24px; text-align: center; }

/* ── LOCATIONS ───────────────────────────────────────────────────────── */
.loc-hero { position: relative; height: 50vh; min-height: 360px; overflow: hidden; }
.loc-hero-bg  { position: absolute; inset: -15%; will-change: transform; }
.loc-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.loc-hero-veil { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(11,26,20,.4) 0%, rgba(11,26,20,.72) 100%); }
.loc-hero-txt { position: absolute; bottom: 48px; left: var(--pad-x); z-index: 2; }
.loc-grid { display: grid; grid-template-columns: repeat(5,1fr); border-top: 1px solid var(--border); }
.loc { padding: 36px 28px; border-right: 1px solid var(--border); transition: background .3s; cursor: none; }
.loc:last-child { border-right: none; }
.loc:hover { background: var(--cream-08); }
.loc-flag { font-size: 28px; margin-bottom: 12px; }
.loc-name { font-family: var(--f-serif); font-size: 17px; font-weight: 400; color: var(--cream); margin-bottom: 6px; }
.loc-role { font-family: var(--f-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--cream-18); line-height: 1.6; }

/* ── CLOSING FULL IMAGE ──────────────────────────────────────────────── */
.closing { position: relative; height: 85vh; min-height: 560px; overflow: hidden; display: flex; align-items: center; }
.cl-bg   { position: absolute; inset: -15%; will-change: transform; }
.cl-bg img { width: 100%; height: 100%; object-fit: cover; }
.cl-veil { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(11,26,20,.82) 0%, rgba(11,26,20,.54) 60%, rgba(11,26,20,.72) 100%); }
.cl-cnt  { position: relative; z-index: 2; padding: 0 var(--pad-x); max-width: 680px; }
.cl-lbl  { font-family: var(--f-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.cl-lbl::before { content: ''; width: 20px; height: 1px; background: var(--gold); }
.cl-h    { font-family: var(--f-serif); font-weight: 300; font-size: clamp(36px,4.5vw,68px); line-height: 1.0; letter-spacing: -.02em; color: var(--cream); margin-bottom: 22px; }
.cl-h em { font-style: italic; color: var(--gold-light); }
.cl-body { font-size: 15px; font-weight: 300; color: var(--cream-70); line-height: 1.82; margin-bottom: 28px; max-width: 560px; }
.cl-sig  { font-family: var(--f-serif); font-style: italic; font-size: 17px; color: var(--cream-40); margin-bottom: 32px; }
.cl-btns { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── INLINE CTA ──────────────────────────────────────────────────────── */
.inline-cta {
  margin-top: 64px; padding: 28px 32px;
  background: var(--bg-surface); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.ic-lbl  { font-family: var(--f-mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.ic-h    { font-family: var(--f-serif); font-size: 20px; font-weight: 400; color: var(--cream); line-height: 1.2; }
.ic-btn  {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--neon); background: transparent;
  border: 1px solid var(--border-neon); padding: 12px 24px;
  white-space: nowrap; transition: all .3s;
}
.ic-btn:hover { background: var(--neon-dim); border-color: var(--neon); }

/* ── CTA FINAL ───────────────────────────────────────────────────────── */
.cta-final { position: relative; overflow: hidden; }
.cf-bg   { position: absolute; inset: -15%; will-change: transform; }
.cf-bg img { width: 100%; height: 100%; object-fit: cover; }
.cf-veil { position: absolute; inset: 0; background: rgba(11,26,20,.85); }
.cf-cnt  { position: relative; z-index: 2; padding: 112px var(--pad-x); text-align: center; }
.cf-lbl  { font-family: var(--f-mono); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.cf-h    { font-family: var(--f-serif); font-weight: 300; font-size: clamp(36px,4.5vw,68px); line-height: 1.04; letter-spacing: -.015em; color: var(--cream); margin-bottom: 20px; }
.cf-h em { font-style: italic; color: var(--gold-light); }
.cf-body { font-size: 15px; font-weight: 300; color: var(--cream-40); max-width: 520px; margin: 0 auto 36px; line-height: 1.8; }
.cf-btns { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cf-note { font-family: var(--f-mono); font-size: 9px; letter-spacing: .08em; color: var(--cream-18); }

/* ── WORD CYCLE ──────────────────────────────────────────────────────── */
.wc-wrap { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; height: 1.1em; }
.wc-item { position: absolute; top: 0; left: 0; opacity: 0; transform: translateY(100%); transition: opacity .5s var(--ease), transform .5s var(--ease); color: var(--gold-light); font-style: italic; white-space: nowrap; }
.wc-item.act { opacity: 1; transform: translateY(0); }

/* ── KEYFRAMES ───────────────────────────────────────────────────────── */
@keyframes fadeUp  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(110%); } to { opacity:1; transform:translateY(0); } }
@keyframes drip { 0%{transform:scaleY(0);transform-origin:top} 50%{transform:scaleY(1);transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .psteps    { grid-template-columns: 1fr 1fr; }
  .loc-grid  { grid-template-columns: repeat(3,1fr); }
  .frag-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1024px) {
  .two-col, .two-col-r, .inoc-layout, .dasos-layout { grid-template-columns: 1fr; }
  .two-col-r .col-img { order: 0; }
  .sticky-layout { grid-template-columns: 1fr; }
  .sticky-img-col { position: static; height: 420px; }
  .grid3  { grid-template-columns: 1fr; }
  .psteps { grid-template-columns: 1fr; }
  .loc-grid { grid-template-columns: 1fr 1fr; }
  .sec { padding: 72px var(--pad-x); }
  .cb-txt { left: var(--pad-x); right: var(--pad-x); }
}
@media (max-width: 640px) {
  .stat-row  { flex-direction: column; }
  .stat-box  { border-right: none; border-bottom: 1px solid var(--border); }
  .frag-grid { grid-template-columns: 1fr; }
  .loc-grid  { grid-template-columns: 1fr; }
  .loc       { border-right: none; border-bottom: 1px solid var(--border); }
  .struct-diag { padding: 0 var(--pad-x); }
  .page-hero-h1 { font-size: clamp(40px,9vw,72px); }
  .cf-btns   { flex-direction: column; align-items: stretch; }
}