/* gss-codex.css — externalized Codex design stylesheet (Phase 1 of native rebuild).
   Generated from post 236394 _elementor_data on 2026-05-31T16:26:15+00:00.
   Scoped to .gs-codex-page; enqueued only on codex pages (mu-plugin gss-codex-assets.php). */

/* =========================================================================
   GreenSutra Dark — tokens
   Derived from the parchment GreenSutra system, re-grounded for dark mode.
   Brand greens preserved; surfaces shifted to near-black with a faint warm
   undertone so the parchment lineage is still legible.
   ========================================================================= */














































:root{
  /* surfaces */
  --gsd-bg:           #0A0D0B;     /* page — near-black, faint green warmth */
  --gsd-surface:      #10140F;     /* table cell */
  --gsd-surface-2:    #161A14;     /* raised */
  --gsd-surface-3:    #1C211A;
  --gsd-ink-wash:     rgba(232,230,223,0.04);

  /* foreground */
  --gsd-fg:           #E8E5D9;     /* warm off-white, parchment-tinted */
  --gsd-fg-soft:      #B5B3A8;
  --gsd-fg-muted:     #9A988C;   /* was #6E6E66 (3.8:1, failed WCAG AA) → 6.7:1 */
  --gsd-fg-faint:     #85847A;   /* was #4A4A44 (2.2:1, failed WCAG AA) → 5.2:1 */

  /* hairlines (0.5px feel via 1px @ low alpha) */
  --gsd-line:         rgba(232,230,223,0.08);
  --gsd-line-strong:  rgba(232,230,223,0.16);
  --gsd-line-faint:   rgba(232,230,223,0.04);

  /* brand greens, dark-mode tuned */
  --gsd-green:        #5DC97B;     /* primary, dark-mode legible — leaf brightened */
  --gsd-green-ink:    #0E6B2A;     /* original brand green, becomes deep wash */
  --gsd-green-deep:   #08431A;     /* original ink */
  --gsd-green-wash:   rgba(93,201,123,0.10);
  --gsd-green-wash-hi:rgba(93,201,123,0.18);

  /* vertical accents */
  --gsd-amber:        #E0A03A;
  --gsd-amber-wash:   rgba(224,160,58,0.10);
  --gsd-teal:         #4FB0BD;
  --gsd-teal-wash:    rgba(79,176,189,0.10);
  --gsd-saffron:      #E08A1F;

  /* type */
  --gsd-font-display: inherit;
  --gsd-font-body: inherit;
  --gsd-font-mono: inherit;

  /* motion */
  --gsd-ease:         cubic-bezier(0.22,0.61,0.36,1);
  --gsd-dur:          200ms;

  /* layout */
  --gsd-gutter:       32px;
  --gsd-radius:       2px;          /* squared, engineering feel */
}

/* =========================================================================
   Base
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}

.gs-codex-page{
  color:var(--gsd-fg);
  font-family:var(--gsd-font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  font-feature-settings:"ss01","ss02";
}
::selection{background:var(--gsd-green);color:#0A0D0B}

.mono{font-family:var(--gsd-font-mono);font-weight:500;letter-spacing:0.02em}

/* =========================================================================
   Codex frame
   ========================================================================= */
.codex{
  max-width:1400px;
  margin:0 auto;
  padding:48px var(--gsd-gutter) 24px;
  position:relative;
}

/* Crosshair index — top-left brand cell that anchors the page */
.codex-mast{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  border-top:1px solid var(--gsd-line-strong);
  border-bottom:1px solid var(--gsd-line);
  padding:18px 0 14px;
  margin-bottom:56px;
  gap:24px;
}
.codex-mast-l{display:flex;align-items:center;gap:14px}
.codex-mast img{width:28px;height:28px;display:block;opacity:0.95;filter:brightness(1.4) saturate(1.1)}
.codex-mast-mark{
  font-family:var(--gsd-font-display);
  font-weight:700;
  letter-spacing:0.02em;
  font-size:16px;
}
.codex-mast-mark sup{font-size:10px;vertical-align:super;margin-left:1px;color:var(--gsd-fg-soft)}
.codex-mast-deva{
  font-family:'Tiro Devanagari Hindi',serif;
  color:var(--gsd-green);
  font-size:18px;
  margin-left:4px;
}
.codex-mast-r{
  display:flex;gap:24px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  color:var(--gsd-fg-muted);
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.codex-mast-r span{display:inline-flex;align-items:center;gap:6px}
.codex-mast-r .dot{width:5px;height:5px;background:var(--gsd-green);border-radius:50%}

/* =========================================================================
   ZONE A — Headline block
   ========================================================================= */
.zone-a{
  position:relative;
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:end;
  margin-bottom:72px;
  padding:32px 0 8px;
  min-height:380px;
  isolation:isolate;
}

/* Cartographic backdrop */
.zone-a-map{
  position:absolute;
  inset:0 -40px 0 -40px;
  z-index:0;
  pointer-events:none;
  /* fade out toward the right where the meta-aside sits */
  -webkit-mask-image:linear-gradient(90deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.55) 18%,
    rgba(0,0,0,0.85) 50%,
    rgba(0,0,0,0.55) 82%,
    rgba(0,0,0,0.0) 100%);
          mask-image:linear-gradient(90deg,
    rgba(0,0,0,0.0) 0%,
    rgba(0,0,0,0.55) 18%,
    rgba(0,0,0,0.85) 50%,
    rgba(0,0,0,0.55) 82%,
    rgba(0,0,0,0.0) 100%);
}
.zone-a-map svg{width:100%;height:100%;display:block;overflow:visible}
.zone-a-map .map-graticule line{stroke:rgba(232,230,223,0.05);stroke-width:0.25;fill:none}
.zone-a-map .map-graticule .equator{stroke:rgba(232,230,223,0.10);stroke-dasharray:1.5 1.5}
.zone-a-map .map-graticule .prime{stroke:rgba(232,230,223,0.08);stroke-dasharray:1.5 1.5}
.zone-a-map .map-land circle{fill:var(--gsd-fg);fill-opacity:0.18}
.zone-a-map .map-land path{fill:var(--gsd-fg);fill-opacity:0.06;stroke:rgba(232,230,223,0.10);stroke-width:0.2}
/* Topographic continent contours — baked once at runtime, cached in localStorage */
.zone-a-map .map-contours path{
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  /* stroke + stroke-width are set per-path inline (color ramp coast→core) */
}
.zone-a-map .map-contours[data-state="pending"]{
  /* While the bake is running, hint that something will appear here. */
}
.zone-a-map .map-minutiae path{
  fill:none;
  stroke:rgba(93,201,123,0.80);
  stroke-width:0.55;
  stroke-linecap:round;
}
.zone-a-map .map-frame path{stroke:rgba(232,230,223,0.18);stroke-width:0.5;fill:none}
.zone-a-map .map-axis text{
  font-family:'JetBrains Mono',monospace;
  font-size:3px;
  letter-spacing:0.18em;
  fill:rgba(232,230,223,0.16);
  text-transform:uppercase;
}
.zone-a-map .map-pin line{stroke:var(--gsd-green);stroke-width:0.4}
.zone-a-map .map-pin .pin-ring{fill:none;stroke:var(--gsd-green);stroke-width:0.5}
.zone-a-map .map-pin .pin-dot{fill:var(--gsd-green)}
.zone-a-map .map-pin text{
  font-family:'JetBrains Mono',monospace;
  font-size:3.4px;
  letter-spacing:0.16em;
  fill:var(--gsd-green);
  font-weight:600;
  text-transform:uppercase;
}
.zone-a-map .map-pin .pin-sub{
  font-size:2.6px;
  fill:rgba(93,201,123,0.65);
  font-weight:400;
  letter-spacing:0.12em;
  text-transform:none;
}
/* Animated arcs from Mumbai HQ → global anchors */
.zone-a-map .map-arcs path{
  stroke:rgba(93,201,123,0.32);
  stroke-width:0.22;
  stroke-dasharray:1.2 1.8;
}
/* Slow meridian scan line (decorative — suggests a live datafeed) */
.zone-a-map .map-scan{
  mix-blend-mode:screen;
}
/* Content sits above the map */
.zone-a-body, .zone-a-meta{position:relative;z-index:1}
.kicker{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gsd-green);
  margin-bottom:28px;
  display:flex;
  align-items:center;
  gap:10px;
}
.kicker .sep{color:var(--gsd-fg-faint);font-weight:400}
.kicker .marker{color:var(--gsd-fg-soft)}

h1.hero{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:clamp(48px, 7vw, 96px);
  line-height:0.98;
  letter-spacing:-0.025em;
  color:var(--gsd-fg);
  margin:0 0 24px;
  text-wrap:balance;
}
h1.hero .punct{color:var(--gsd-green)}
.subhead{
  font-family:var(--gsd-font-display);
  font-size:clamp(18px, 1.6vw, 22px);
  line-height:1.4;
  color:var(--gsd-fg-soft);
  max-width:680px;
  margin:0;
  text-wrap:pretty;
}
.subhead .em{color:var(--gsd-fg)}
.subhead .sh-quiet{
  display:block;
  margin-top:14px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  font-weight:500;
}

.zone-a-meta{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  text-align:right;
  line-height:1.8;
  border-left:1px solid var(--gsd-line);
  padding-left:24px;
  min-width:200px;
}
.zone-a-meta .v{color:var(--gsd-fg);font-weight:600}
.zone-a-meta .row{display:flex;justify-content:space-between;gap:16px}

/* =========================================================================
   ZONE B — Diagnostic intake + paired schematic (FIG.)
   ========================================================================= */
.zone-b{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:32px;
  border-top:1px solid var(--gsd-line-strong);
  border-bottom:1px solid var(--gsd-line);
  padding:22px 0 28px;
  margin-bottom:32px;
}
.zone-b-left,.zone-b-right{min-width:0}
.zone-b-right{
  border-left:1px solid var(--gsd-line);
  padding-left:32px;
  display:flex;
  flex-direction:column;
}
.zone-b-right .schem{position:relative;flex:1;display:flex;flex-direction:column}
.zone-b-right .schem-stage{flex:1;min-height:340px}
.zone-b-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:18px;
  gap:24px;
  flex-wrap:wrap;
}
.zone-b-q{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:clamp(21px,2.2vw,30px);
  line-height:1.08;
  letter-spacing:-0.02em;
  color:var(--gsd-fg);
  display:inline-flex;
  align-items:baseline;
  gap:10px;
}
.zone-b-q .arrow{color:var(--gsd-green);margin-right:0}
.zone-b-counter{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.zone-b-counter .active{color:var(--gsd-green)}
.zone-b-counter .sep{color:var(--gsd-fg-faint);margin:0 8px}

.chips{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.chip{
  appearance:none;
  background:var(--gsd-surface);
  color:var(--gsd-fg-soft);
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  padding:14px 16px;
  font-family:var(--gsd-font-body);
  font-size:14px;
  letter-spacing:0.01em;
  text-align:left;
  cursor:pointer;
  transition:background var(--gsd-dur) var(--gsd-ease),
             border-color var(--gsd-dur) var(--gsd-ease),
             color var(--gsd-dur) var(--gsd-ease);
  display:grid;
  grid-template-columns:auto auto 1fr auto;
  align-items:center;
  gap:14px;
  position:relative;
  min-height:62px;
}
.chip:hover,.chip:focus-visible{border-color:var(--gsd-green);color:var(--gsd-fg);background:var(--gsd-green-wash)}
.chip:hover .chip-icon{color:var(--gsd-fg)}
.chip:hover .chip-arrow{color:var(--gsd-green);transform:translateX(2px)}
.chip:focus-visible{outline:none;border-color:var(--gsd-green);box-shadow:0 0 0 1px var(--gsd-green)}
.chip-num{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  color:var(--gsd-fg-muted);
  font-weight:500;
  align-self:flex-start;
  padding-top:1px;
}
.chip-icon{
  width:22px;
  height:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gsd-fg-muted);
  transition:color var(--gsd-dur) var(--gsd-ease);
}
.chip-icon svg{width:22px;height:22px;stroke-width:1.4}
.chip-body{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}
.chip-label{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:14px;
  line-height:1.2;
  color:inherit;
  letter-spacing:-0.005em;
}
.chip-sub{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gsd-fg-faint);
  line-height:1.3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.chip-arrow{
  font-family:var(--gsd-font-mono);
  font-size:14px;
  color:var(--gsd-fg-faint);
  transition:color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
.chip.is-active{
  background:var(--gsd-green-wash);
  border-color:var(--gsd-green);
  color:var(--gsd-fg);
}
.chip.is-active .chip-num{color:var(--gsd-green)}
.chip.is-active .chip-icon{color:var(--gsd-green)}
.chip.is-active .chip-sub{color:rgba(93,201,123,0.7)}
.chip.is-active .chip-arrow{color:var(--gsd-green);transform:translateX(2px)}
.chip.is-active::before{
  content:"";
  position:absolute;
  left:-1px;top:-1px;width:8px;height:8px;
  border-top:1px solid var(--gsd-green);
  border-left:1px solid var(--gsd-green);
}
.chip.is-active::after{
  content:"";
  position:absolute;
  right:-1px;bottom:-1px;width:8px;height:8px;
  border-bottom:1px solid var(--gsd-green);
  border-right:1px solid var(--gsd-green);
}

/* journey: inviting hint + interaction cues (reduced-motion safe) */
.zone-b-hint{
  font-family:var(--gsd-font-mono);font-size:11px;letter-spacing:0.1em;text-transform:uppercase;
  color:var(--gsd-fg-muted);margin:0 0 16px;display:flex;align-items:center;gap:9px;
}
.zb-pulse{
  width:7px;height:7px;border-radius:50%;background:var(--gsd-green);flex:none;
  animation:zb-ping 1.9s var(--gsd-ease) infinite;
}
@keyframes zb-ping{
  0%{box-shadow:0 0 0 0 rgba(93,201,123,0.5)}
  70%{box-shadow:0 0 0 8px rgba(93,201,123,0)}
  100%{box-shadow:0 0 0 0 rgba(93,201,123,0)}
}
/* chips beckon: a soft green wave travels down the arrows (staggered) to signal "these are
   clickable — pick one". Brief flash per arrow, then quiet; not a constant motion. */
@keyframes zb-beckon{
  0%,72%,100%{color:var(--gsd-fg-faint);transform:translateX(0)}
  10%,22%{color:var(--gsd-green);transform:translateX(5px)}
}
.chips .chip:not(.is-active) .chip-arrow{animation:zb-beckon 4.8s var(--gsd-ease) infinite}
.chips .chip:nth-child(1) .chip-arrow{animation-delay:0s}
.chips .chip:nth-child(2) .chip-arrow{animation-delay:.16s}
.chips .chip:nth-child(3) .chip-arrow{animation-delay:.32s}
.chips .chip:nth-child(4) .chip-arrow{animation-delay:.48s}
.chips .chip:nth-child(5) .chip-arrow{animation-delay:.64s}
.chip:hover .chip-arrow{animation:none}
@media (prefers-reduced-motion:reduce){
  .zb-pulse,.chip .chip-arrow{animation:none!important}
  .chip:hover .chip-arrow,.cell:hover .cell-icon,.qa-row:hover .qa-arrow,.contact-card:hover .contact-arrow,.bull-fr:hover .bulletin-arrow,.bull-lead:hover .bl-arrow{transform:none!important}
}

/* =========================================================================
   ZONE C — Periodic table of services
   ========================================================================= */
.zone-c{
  margin-bottom:40px;
}
.zone-c-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  gap:24px;
}
.zone-c-title{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.zone-c-title .v{color:var(--gsd-fg-soft)}
.zone-c-legend{
  display:flex;gap:18px;
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.zone-c-legend span{display:inline-flex;align-items:center;gap:6px}
.zone-c-legend .lg-dot{width:7px;height:7px;display:inline-block}

.table-grid{
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  gap:6px;
  position:relative;
}

/* Column marker row — minimal numbers above used columns. The middle gap
   carries an axis label spanning the dead cols between the split groups. */
.col-row{
  display:contents;
}
.col-mark{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:var(--gsd-fg-faint);
  text-align:center;
  padding:2px 0 10px;
  border-bottom:1px solid var(--gsd-line);
  text-transform:uppercase;
}
.col-mark.col-gap{
  color:var(--gsd-fg-faint);
  font-size:9px;
  letter-spacing:0.18em;
  border-bottom:1px dashed var(--gsd-line);
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Family banner — spans full width above its period(s) */
.family-banner{
  grid-column:1 / -1;
  display:flex;
  align-items:baseline;
  gap:14px;
  padding:18px 4px 10px;
  margin-top:10px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  border-top:1px solid var(--gsd-line);
  position:relative;
}
.family-banner:first-of-type{margin-top:4px}
.family-banner .fb-bullet{
  width:8px;
  height:8px;
  display:inline-block;
  background:var(--gsd-fg-faint);
  flex:0 0 auto;
  transform:translateY(-1px);
}
.family-banner .fb-period{
  color:var(--gsd-fg-faint);
  font-weight:600;
  letter-spacing:0.14em;
  margin-right:2px;
}
.family-banner .fb-name{
  color:var(--gsd-fg);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.04em;
  font-family:var(--gsd-font-display);
  text-transform:none;
}
.family-banner .fb-sub{
  color:var(--gsd-fg-muted);
  font-size:10px;
  letter-spacing:0.06em;
  text-transform:none;
  font-family:var(--gsd-font-body);
}
.family-banner .fb-tag{
  color:var(--gsd-fg-faint);
  margin-left:auto;
  font-size:10px;
  letter-spacing:0.14em;
}
.family-banner.family-renew .fb-bullet{background:var(--gsd-amber)}
.family-banner.family-renew .fb-period{color:var(--gsd-amber)}
.family-banner.family-waste .fb-bullet{background:var(--gsd-teal)}
.family-banner.family-waste .fb-period{color:var(--gsd-teal)}
.family-banner.family-design .fb-bullet{background:var(--gsd-green)}
.family-banner.family-design .fb-period{color:var(--gsd-green)}
.family-banner.family-design-detached{
  border-top:1px dashed var(--gsd-line-strong);
  margin-top:0;
}

/* Connector — shows the lanthanide-style detachment between main table and the design block */
.pt-connector{
  grid-column:1 / -1;
  height:36px;
  margin-top:10px;
  position:relative;
}
.pt-connector svg{width:100%;height:100%;display:block}
.pt-connector svg path{
  stroke:var(--gsd-line-strong);
  stroke-width:0.5;
  stroke-dasharray:1.5 1.5;
  fill:none;
}
.pt-connector svg text{
  font-family:'JetBrains Mono',monospace;
  font-size:5px;
  letter-spacing:0.4em;
  fill:var(--gsd-fg-faint);
  text-transform:uppercase;
}

/* Period-edge markers — fill the cols left/right of the detached Design block.
   Subtle vertical labels that anchor the lanthanide-style row visually. */
.period-edge{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:108px;
  position:relative;
}
.period-edge .pe-rule{
  flex:1;
  width:1px;
  background:linear-gradient(transparent, var(--gsd-line-strong), transparent);
  min-height:14px;
}
.period-edge .pe-num{
  font-family:var(--gsd-font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.18em;
  color:var(--gsd-green);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding:6px 0;
}
.period-edge .pe-tag{
  font-family:var(--gsd-font-mono);
  font-size:9px;
  letter-spacing:0.12em;
  color:var(--gsd-fg-faint);
  text-transform:uppercase;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  padding:6px 0;
}

.cell{
  position:relative;
  background:var(--gsd-surface);
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  padding:10px 8px 8px;
  min-height:108px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  transition:background var(--gsd-dur) var(--gsd-ease),
             border-color var(--gsd-dur) var(--gsd-ease),
             opacity var(--gsd-dur) var(--gsd-ease);
  text-align:left;
}
.cell:hover,.cell:focus-visible{border-color:var(--gsd-green);background:var(--gsd-green-wash)}
.cell:hover .cell-sym,.cell:focus-visible .cell-sym{color:var(--gsd-fg)}
.cell:focus-visible{outline:none;border-color:var(--gsd-green);box-shadow:0 0 0 1px var(--gsd-green)}

/* CAD-style corner ticks */
.cell::before,
.cell::after{
  content:"";
  position:absolute;
  width:6px;height:6px;
  transition:border-color var(--gsd-dur) var(--gsd-ease);
}
.cell::before{
  top:3px;left:3px;
  border-top:1px solid var(--gsd-fg-faint);
  border-left:1px solid var(--gsd-fg-faint);
}
.cell::after{
  bottom:3px;right:3px;
  border-bottom:1px solid var(--gsd-fg-faint);
  border-right:1px solid var(--gsd-fg-faint);
}

.cell-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:2px;
  min-height:14px;
}
.cell-num{
  position:absolute;
  top:8px;left:8px;
  font-family:var(--gsd-font-mono);
  font-size:9px;
  font-weight:500;
  color:var(--gsd-fg-muted);
  letter-spacing:0.04em;
}
.cell-dot{
  width:6px;height:6px;
  border-radius:50%;
  background:var(--gsd-fg-faint);
}
/* Brand service icon (img) — top-right corner of the cell */
.cell-icon{
  position:absolute;
  top:9px;right:9px;
  width:34px;height:34px;
  object-fit:contain;
  opacity:1;
  transition:transform var(--gsd-dur) var(--gsd-ease);
}
.cell:hover .cell-icon{transform:scale(1.06)}
.cell-sym{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:26px;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--gsd-fg);
  margin:4px 0 2px;
}
.cell-name{
  font-family:var(--gsd-font-body);
  font-size:10px;
  font-weight:400;
  color:var(--gsd-fg-soft);
  line-height:1.25;
  letter-spacing:0.005em;
}

/* Vertical-colored dots + icons */
.cell[data-vert="renew"] .cell-dot{background:var(--gsd-amber)}
.cell[data-vert="waste"] .cell-dot{background:var(--gsd-teal)}
.cell[data-vert="design"] .cell-dot{background:var(--gsd-green)}
.cell[data-vert="renew"] .cell-icon{color:var(--gsd-amber)}
.cell[data-vert="waste"] .cell-icon{color:var(--gsd-teal)}
.cell[data-vert="design"] .cell-icon{color:var(--gsd-green)}
.cell:hover .cell-icon{opacity:1}

/* Active state */
.cell.is-active{
  background:var(--gsd-green-wash);
  border-color:var(--gsd-green);
}
.cell.is-active::before{border-color:var(--gsd-green)}
.cell.is-active::after{border-color:var(--gsd-green)}
.cell.is-active .cell-num{color:var(--gsd-green)}
.cell.is-active .cell-name{color:var(--gsd-fg)}

/* Vertical-specific active washes */
.cell[data-vert="renew"].is-active{background:var(--gsd-amber-wash);border-color:var(--gsd-amber)}
.cell[data-vert="renew"].is-active::before,
.cell[data-vert="renew"].is-active::after{border-color:var(--gsd-amber)}
.cell[data-vert="renew"].is-active .cell-num{color:var(--gsd-amber)}

.cell[data-vert="waste"].is-active{background:var(--gsd-teal-wash);border-color:var(--gsd-teal)}
.cell[data-vert="waste"].is-active::before,
.cell[data-vert="waste"].is-active::after{border-color:var(--gsd-teal)}
.cell[data-vert="waste"].is-active .cell-num{color:var(--gsd-teal)}

/* Dim state */
.cell.is-dim{opacity:0.28}
.cell.is-dim:hover{opacity:1}

/* Corner marker cells (EST 2016, INDIA'S 1ST) */
/* Corner marker cells (EST 2016, INDIA'S 1ST). Sized to match .cell so
   every row in the periodic table reads as a single consistent strip. */
.cell-marker{
  position:relative;
  padding:0;
  min-height:108px;
  border:none;
  border-radius:var(--gsd-radius);
  background:transparent;
  overflow:hidden;
}
.cell-marker::before,
.cell-marker::after{ content:none; }
.cell-marker .mk-eyebrow{
  position:absolute;
  top:7px;left:8px;
  z-index:2;
  font-family:var(--gsd-font-mono);
  font-size:8px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  opacity:0.65;
}
.cell-marker > div:last-child{
  display:flex;
  flex-direction:column;
  justify-content:center;
  flex:1;
  text-align:right;
}
.cell-marker .mk-big{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:32px;
  line-height:0.95;
  letter-spacing:-0.02em;
  color:var(--gsd-fg);
  margin:0 0 4px;
}
.cell-marker .mk-big br{display:none}
.cell-marker .mk-sub{
  font-family:var(--gsd-font-mono);
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.cell-marker.marker-renew{border-color:rgba(224,160,58,0.30)}
.cell-marker.marker-renew .mk-eyebrow{color:var(--gsd-amber)}
.cell-marker.marker-waste{border-color:rgba(79,176,189,0.30)}
.cell-marker.marker-waste .mk-eyebrow{color:var(--gsd-teal)}
/* full-bleed sustainability illustration filling the marker cell */
.cell-marker .mk-graphic{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  opacity:0.72;
  display:block;
}

/* =========================================================================
   ZONE D — CTA band (schematic now lives paired with chips in Zone B)
   ========================================================================= */
.zone-d{
  display:block;
  border-top:1px solid var(--gsd-line-strong);
  padding-top:24px;
  margin-top:8px;
}

/* schematic panel */
.schem{
  position:relative;
}
.schem-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:18px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.schem-head .fig{color:var(--gsd-fg-soft)}
.schem-head .fig .num{color:var(--gsd-green)}
.schem-head .meta{color:var(--gsd-fg-faint)}
.schem-stage{
  position:relative;
  background:linear-gradient(var(--gsd-line-faint),var(--gsd-line-faint)) 0 0/100% 1px no-repeat,
             linear-gradient(var(--gsd-line-faint),var(--gsd-line-faint)) 0 100%/100% 1px no-repeat;
  border-left:1px solid var(--gsd-line);
  border-right:1px solid var(--gsd-line);
  padding:32px 24px;
  min-height:380px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.schem-stage svg{width:100%;height:auto;max-width:100%;display:block}
.schem-stage svg .stroke{stroke:var(--gsd-fg-soft);stroke-width:1;fill:none}
.schem-stage svg .stroke-faint{stroke:var(--gsd-line-strong);stroke-width:1;fill:none}
.schem-stage svg .stroke-green{stroke:var(--gsd-green);stroke-width:1.2;fill:none}
.schem-stage svg .stroke-amber{stroke:var(--gsd-amber);stroke-width:1.2;fill:none}
.schem-stage svg .stroke-teal{stroke:var(--gsd-teal);stroke-width:1.2;fill:none}
.schem-stage svg .stroke-sky{stroke:var(--gsd-saffron);stroke-width:1;fill:none}
.schem-stage svg .lbl{font-family:'JetBrains Mono',monospace;font-size:9px;fill:var(--gsd-fg-muted);letter-spacing:0.08em;text-transform:uppercase}
.schem-stage svg .lbl-strong{fill:var(--gsd-fg)}
.schem-stage svg .lbl-green{fill:var(--gsd-green)}
.schem-stage svg .lbl-amber{fill:var(--gsd-amber)}
.schem-stage svg .lbl-teal{fill:var(--gsd-teal)}
.schem-stage svg .fill-green{fill:var(--gsd-green)}
.schem-stage svg .fill-soft{fill:var(--gsd-fg-soft)}
.schem-stage svg .fill-bg{fill:var(--gsd-bg)}
.schem-stage svg .dash{stroke-dasharray:2 3}
.schem-stage .schem-panel{display:none;width:100%}
.schem-stage .schem-panel.is-on{display:flex;align-items:center;justify-content:center;width:100%}

/* stats panel */
.stats{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding-left:24px;
  border-left:1px solid var(--gsd-line);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  border-bottom:1px solid var(--gsd-line);
}
.stat{
  padding:0 16px 24px 0;
  border-right:1px solid var(--gsd-line);
}
.stat:last-child{border-right:0;padding-right:0}
.stat-label{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  margin-bottom:10px;
}
.stat-value{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:48px;
  line-height:1;
  letter-spacing:-0.02em;
  color:var(--gsd-fg);
}
.stat-value .suffix{
  font-family:var(--gsd-font-mono);
  font-size:14px;
  color:var(--gsd-green);
  margin-left:2px;
  font-weight:500;
  vertical-align:top;
  line-height:1.2;
}
.stat-sub{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-faint);
  margin-top:6px;
}

.cta-wrap{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:center;
  margin-top:24px;
  padding-top:24px;
  border-top:1px solid var(--gsd-line);
}
.cta-status{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  display:flex;
  align-items:center;
  gap:8px;
}
.cta-status .pulse{
  width:6px;height:6px;border-radius:50%;background:var(--gsd-green);
  position:relative;
}
.cta-status .pulse::after{
  content:"";position:absolute;inset:-3px;border-radius:50%;
  border:1px solid var(--gsd-green);opacity:0.5;
  animation:pulse 2s var(--gsd-ease) infinite;
}
@keyframes pulse{0%{transform:scale(0.6);opacity:0.7}100%{transform:scale(1.6);opacity:0}}
.cta-status .val{color:var(--gsd-green)}

.cta{
  appearance:none;
  background:var(--gsd-green);
  color:#0A0D0B;
  border:1px solid var(--gsd-green);
  border-radius:var(--gsd-radius);
  font-family:var(--gsd-font-body);
  font-weight:700;
  font-size:13px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  padding:18px 22px;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:100%;
  gap:16px;
  transition:background var(--gsd-dur) var(--gsd-ease),
             transform var(--gsd-dur) var(--gsd-ease);
}
.cta:hover,.cta:focus-visible{background:#3FAA5E}
.cta:active{transform:translateY(1px)}
.cta-arrow{
  font-family:var(--gsd-font-mono);
  font-weight:500;
}
.cta-secondary{
  appearance:none;
  background:transparent;
  color:var(--gsd-fg-soft);
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  padding:14px 18px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  transition:color var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease);
}
.cta-secondary:hover,.cta-secondary:focus-visible{color:var(--gsd-fg);border-color:var(--gsd-line-strong)}

/* =========================================================================
   Drawer
   ========================================================================= */
.drawer-scrim{
  position:fixed;inset:0;
  background:rgba(10,13,11,0.6);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--gsd-dur) var(--gsd-ease);
  z-index:9998; /* above Ohio sticky #masthead (z:1000) so the scrim dims it too */
}
.drawer-scrim.is-on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(480px,92vw);
  background:var(--gsd-bg);
  border-left:1px solid var(--gsd-line-strong);
  transform:translateX(100%);
  transition:transform 280ms var(--gsd-ease);
  z-index:9999; /* sits above the sticky header so the panel opens over everything */
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.drawer.is-on{transform:translateX(0)}
.drawer-head{
  padding:24px 28px 20px;
  border-bottom:1px solid var(--gsd-line);
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
}
.drawer-eyebrow{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  margin-bottom:6px;
}
.drawer-eyebrow .num{color:var(--gsd-green)}
.drawer-sym{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:48px;
  line-height:0.9;
  letter-spacing:-0.02em;
  color:var(--gsd-fg);
  margin-bottom:8px;
}
.drawer-name{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:24px;
  line-height:1.2;
  color:var(--gsd-fg);
  letter-spacing:-0.01em;
}
.drawer-close{
  appearance:none;
  background:transparent;
  border:1px solid var(--gsd-line);
  color:var(--gsd-fg-soft);
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  width:36px;height:36px;
  border-radius:var(--gsd-radius);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease);
}
.drawer-close:hover{color:var(--gsd-fg);border-color:var(--gsd-line-strong)}
.drawer-body{
  padding:24px 28px;
  overflow-y:auto;
  flex:1;
}
.drawer-desc{
  font-family:var(--gsd-font-display);
  font-size:17px;
  line-height:1.5;
  color:var(--gsd-fg-soft);
  margin:0 0 28px;
  text-wrap:pretty;
}
.drawer-section{
  border-top:1px solid var(--gsd-line);
  padding:18px 0;
}
.drawer-section-title{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  margin-bottom:12px;
  display:flex;
  justify-content:space-between;
}
.drawer-section-title .count{color:var(--gsd-fg-faint)}
.drawer-list{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:6px;
}
.drawer-list li{
  font-family:var(--gsd-font-body);
  font-size:14px;
  color:var(--gsd-fg);
  display:flex;align-items:baseline;gap:10px;
  line-height:1.4;
}
.drawer-list li::before{
  content:"";flex:0 0 auto;
  width:6px;height:1px;background:var(--gsd-green);
  transform:translateY(-3px);
}
.drawer-frameworks{
  display:flex;flex-wrap:wrap;gap:6px;
}
.drawer-frameworks span{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:5px 9px;
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  color:var(--gsd-fg-soft);
}
.drawer-foot{
  padding:20px 28px;
  border-top:1px solid var(--gsd-line);
}
.drawer-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--gsd-green);
  font-family:var(--gsd-font-mono);
  font-size:12px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  font-weight:600;
  padding:8px 0;
}
.drawer-link:hover{color:var(--gsd-fg)}

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width:1100px){
  :root{--gsd-gutter:16px}
  /* clip the 20px full-bleed bleed of .chips / .table-scroll (negative-margin
     edge-to-edge scrollers) so it can't push page-level horizontal overflow */
  .codex{padding:32px var(--gsd-gutter) 28px;overflow-x:clip}
  .zone-a{grid-template-columns:1fr;gap:24px;min-height:0}
  .zone-a-map{inset:-20px -20px -20px -20px}
  .zone-a-meta{text-align:left;border-left:0;border-top:1px solid var(--gsd-line);padding-left:0;padding-top:14px}
  /* PERIODIC TABLE: keep the AUTHENTIC 2-D shape (period rails + column heads +
     true cell positions) and scroll it horizontally instead of flattening. The
     .table-scroll wrapper is the scroll viewport; a right-edge fade hints "more →". */
  .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin-inline:calc(-1 * var(--gsd-gutter));padding-inline:var(--gsd-gutter);
    scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);
            mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
  .table-grid{grid-template-columns:repeat(9, minmax(72px,1fr));gap:5px;width:max-content;min-width:100%}
  .cell{scroll-snap-align:start;min-height:96px}
  .family-banner{padding:14px 0 8px;margin-top:8px}
  .family-banner .fb-sub{display:none}
  .zone-b{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:20px;padding:18px 0 22px}
  .zone-b-right{padding-left:20px}
  .zone-b-right .schem-stage{min-height:300px}
  .zone-d{padding-top:24px}
  .stats{padding-left:0;border-left:0;border-top:1px solid var(--gsd-line);padding-top:24px}
  .cta-wrap{grid-template-columns:1fr;gap:14px}
  .cta-status{order:-1}
}
@media (max-width:767px){
  :root{--gsd-gutter:20px}
  .codex{padding:24px var(--gsd-gutter) 24px}
  .codex-mast{flex-wrap:wrap;gap:8px}
  .codex-mast-r{font-size:10px;gap:14px}
  h1.hero{font-size:44px}
  .zone-b{grid-template-columns:1fr;gap:18px;padding:18px 0 20px}
  /* drop the path-selection CTA strip (Active selection / Explore / Talk) above the Mission section on phones */
  .zone-d{display:none}
  /* remove the woven-emblem watermark graphic that reads as a standalone section
     between the periodic table and the Mission heading on phones */
  .principle-emblem{display:none}
  .zone-b-right{border-left:0;padding-left:0;border-top:1px solid var(--gsd-line);padding-top:18px}
  .zone-b-right .schem-stage{min-height:240px}
  .zone-b-right .schem-stage svg{max-width:100%;height:auto}
  /* pick-a-path: 2-column grid — first 4 paths in a 2x2, the 5th spans both columns */
  .chips{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0;
    padding:0;
    overflow:visible;
  }
  .chip{min-width:0;min-height:62px;padding:12px;grid-template-columns:auto 1fr;gap:9px;align-items:center}
  .chip:nth-child(5){grid-column:1 / -1}
  .chip-num{display:none}
  .chip-arrow{display:none}
  .chip-sub{font-size:9px}
  /* PERIODIC TABLE (phone): shrink the real 9-col grid to FIT the width (no scroll);
     tiny tiles show symbol + atomic number, tap a tile → the detail drawer */
  .table-scroll{overflow:visible;margin-inline:calc(-1 * var(--gsd-gutter));padding-inline:0;
    -webkit-mask-image:none;mask-image:none}
  .table-grid{grid-template-columns:repeat(9,1fr);width:auto;min-width:0;gap:3px}
  /* tile corners: atomic number top-left, brand icon top-right, symbol bottom-left (name hidden) */
  .cell{min-height:54px;padding:4px;justify-content:flex-end;align-items:flex-start}
  .cell-sym{font-size:13px;margin:0;line-height:1}
  .cell-num{font-size:7px;top:3px;left:4px}
  .cell-icon{display:block;width:18px;height:18px;top:4px;right:4px}
  .cell-name{display:none}
  .period-edge{min-height:46px}
  .period-edge .pe-num{font-size:9px;padding:2px 0}
  .period-edge .pe-tag{font-size:6px}
  .col-mark{font-size:6.5px}
  .cell-marker{min-height:46px}
  .cell-marker .mk-eyebrow{font-size:5px}
  .family-banner{padding:8px 0 4px;margin-top:4px}
  .family-banner .fb-name{font-size:12px}
  .family-banner .fb-tag{font-size:7px}
}
@media (max-width:479px){
  .cell-sym{font-size:20px}
  .cell-name{font-size:9.5px}
  .stat-value{font-size:36px}
}


/* =========================================================================
   LANDING PAGE — sections II–IX, nav, footer
   Built on the same GreenSutra Dark tokens. All chrome (eyebrows, hairlines,
   CAD ticks, monospace meta) matches the Codex hero so the page reads as
   one continuous instrument.
   ========================================================================= */

/* ---- Sticky top nav ---- */
.site-nav{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(10,13,11,0.55);
  backdrop-filter:blur(14px) saturate(1.1);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);
  border-bottom:1px solid transparent;
  transition:background var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease);
}
.site-nav.is-scrolled{
  background:rgba(10,13,11,0.88);
  border-bottom-color:var(--gsd-line);
}
.site-nav-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px var(--gsd-gutter);
  display:flex;
  align-items:center;
  gap:32px;
}
.site-nav-brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--gsd-fg);
}
.site-nav-brand img{width:22px;height:22px;filter:brightness(1.4) saturate(1.1)}
.site-nav-brand-text{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:14px;
  letter-spacing:0.02em;
}
.site-nav-brand-text sup{font-size:9px;vertical-align:super;color:var(--gsd-fg-soft);margin-left:1px}
.site-nav-links{
  display:flex;
  align-items:center;
  gap:28px;
  margin-left:auto;
}
.site-nav-link{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-soft);
  text-decoration:none;
  padding:8px 0;
  transition:color var(--gsd-dur) var(--gsd-ease);
}
.site-nav-link:hover,.site-nav-link:focus-visible{color:var(--gsd-fg)}
.site-nav-cta{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#0A0D0B;
  background:var(--gsd-green);
  text-decoration:none;
  padding:10px 16px;
  border-radius:var(--gsd-radius);
  font-weight:700;
  transition:background var(--gsd-dur) var(--gsd-ease);
}
.site-nav-cta:hover{background:#3FAA5E}
.site-nav-meta{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  display:flex;align-items:center;gap:6px;
}
.site-nav-meta .dot{width:5px;height:5px;background:var(--gsd-green);border-radius:50%}

/* ---- Section frame ---- */
.land-section{
  max-width:1400px;
  margin:0 auto;
  padding:96px var(--gsd-gutter);
  position:relative;
}
.land-section + .land-section{padding-top:0}
/* #principle is the first land-section after the hero console (not preceded by a
   land-section), so it keeps full 96px top padding — trim it so the CTA→Why-We-Exist
   gap is comfortable (was ~176px of dead space). Pairs with .codex padding-bottom. */
#principle{padding-top:48px}
.land-section[data-band="dark"]{background:var(--gsd-bg)}
.land-section[data-band="surface"]{
  background:linear-gradient(var(--gsd-line) 0 1px,transparent 1px) 0 0/100% 100% no-repeat,
             var(--gsd-bg);
}

.land-head{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:end;
  border-top:1px solid var(--gsd-line-strong);
  padding-top:12px;
  margin-bottom:26px;
}
.land-eyebrow{
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gsd-green);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  gap:10px;
}
.land-eyebrow .sep{color:var(--gsd-fg-faint)}
.land-eyebrow .quiet{color:var(--gsd-fg-muted)}
.land-title{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:clamp(40px, 5.2vw, 68px);
  line-height:1.0;
  letter-spacing:-0.025em;
  color:var(--gsd-fg);
  margin:0;
  text-wrap:balance;
}
.land-title .punct{color:var(--gsd-green)}
.land-deck{
  font-family:var(--gsd-font-display);
  font-size:18px;
  line-height:1.5;
  color:var(--gsd-fg-soft);
  margin:0;
  max-width:520px;
  text-wrap:pretty;
}
/* Right-anchor the deck to the page gutter (block-level: the 520px box aligns to the
   column's end; text stays left-aligned for readability). Scoped to .land-head so
   #principle's own .pb-deck grid is untouched (it already fills its rail). */
.land-head .land-deck{justify-self:end}
/* ALL section decks use TRUE right-aligned text (ragged left), marked with .is-right on
   each deck. NOT scoped to .land-head so #principle's .pb-deck (which also carries
   .land-deck) is covered too. (Block right-anchoring still lives on .land-head above.) */
.land-deck.is-right{text-align:right}

/* ---- SECTION II — Principle ---- */
.principle{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:64px;
  align-items:flex-start;
}
.principle-statement{
  font-family:var(--gsd-font-display);
  font-size:clamp(20px, 1.9vw, 26px);
  line-height:1.45;
  color:var(--gsd-fg);
  text-wrap:pretty;
}
.principle-statement .em{color:var(--gsd-green)}
.principle-statement p{margin:0 0 24px}
.principle-statement p:last-child{margin-bottom:0}

.ledger{
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  padding:6px 22px;
}
.ledger-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:14px 0;
  border-bottom:1px dashed var(--gsd-line);
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.ledger-row:last-child{border-bottom:0}
.ledger-key{color:var(--gsd-fg-muted)}
.ledger-val{
  color:var(--gsd-fg);
  font-weight:600;
  text-align:right;
  font-family:var(--gsd-font-display);
  font-size:14px;
  letter-spacing:0.01em;
  text-transform:none;
}
.ledger-val .accent{color:var(--gsd-green)}
.ledger-val.mono{font-family:var(--gsd-font-mono);font-size:13px;letter-spacing:0.04em}
.ledger-head{
  padding:14px 0 12px;
  border-bottom:1px solid var(--gsd-line);
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-faint);
  display:flex;
  justify-content:space-between;
}
.ledger-head .ledger-num{color:var(--gsd-green)}

/* ---- Principle: ONE shared grid so the deck (top-right) and ledger (bottom-right)
   share a single rail — fixes the old 1fr/1fr vs 1.4fr/1fr edge drift. ---- */
.principle-block{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:
    "head  deck"
    "stats deck"
    "stmt  ledger";
  column-gap:48px;
  row-gap:48px;
  align-items:start;
  border-top:1px solid var(--gsd-line-strong);
  padding-top:18px;
}
.principle-block > *{position:relative;z-index:1}
.pb-head{grid-area:head}
.pb-deck{grid-area:deck;max-width:none}
.pb-statement{grid-area:stmt}
.pb-ledger{grid-area:ledger}
/* stat-strip: lift Founded / Services / Verticals into hero scale (reuses .stat tokens) */
.pb-stats{
  grid-area:stats;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--gsd-line);
  padding-top:20px;
}
.pb-stats .stat{padding:0 16px 0 0;border-right:1px solid var(--gsd-line)}
.pb-stats .stat:last-child{border-right:0;padding-right:0}
/* ledger refinements (scoped — does not touch the shared .ledger-row rule):
   numeric right-align + tabular figures + safe wrap for the long registered name */
.pb-ledger .ledger-row{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  column-gap:16px;
  align-items:baseline;
}
.pb-ledger .ledger-key{white-space:nowrap}
.pb-ledger .ledger-val{justify-self:end;text-align:right;min-width:0;overflow-wrap:anywhere}
.pb-ledger .ledger-val.mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
/* faint woven-emblem watermark behind the right rail; contained by the block's overflow:hidden */
.principle-emblem{
  position:absolute;
  top:-6px;
  right:-40px;
  width:min(420px,40%);
  height:auto;
  aspect-ratio:1 / 1;
  opacity:0.10;
  z-index:0;
  pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);
}

/* ---- SECTION III — "One cadence. Three procedures." · STAGE × TYPE MATRIX ---- */
.pm{
  --pm-dim:0.34;
  display:grid;
  grid-template-columns:minmax(132px,0.82fr) repeat(3,1fr);
  border-top:1px solid var(--gsd-line-strong);
  border-left:1px solid var(--gsd-line);
}
/* per-type accent (inherited by each column head + its 4 cells) */
.pm [data-type="design"]{--pm-accent:var(--gsd-green)}
.pm [data-type="renew"]{--pm-accent:var(--gsd-amber)}
.pm [data-type="waste"]{--pm-accent:var(--gsd-teal)}
.pm-corner,.pm-col-head,.pm-rail,.pm-cell{
  border-right:1px solid var(--gsd-line);
  border-bottom:1px solid var(--gsd-line);
  padding:16px 16px 18px;
  min-width:0;
}
/* header row */
.pm-corner{
  display:flex;flex-direction:column;gap:4px;justify-content:flex-end;
  background:var(--gsd-surface);
  font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gsd-fg-muted);
}
.pm-corner-sub{color:var(--gsd-fg-faint);letter-spacing:0.05em}
.pm-col-head{
  display:flex;flex-direction:column;gap:6px;
  background:var(--gsd-surface);
  border-top:2px solid var(--pm-accent);
}
.pm-col-name{font-family:var(--gsd-font-display);font-weight:700;font-size:16px;letter-spacing:-0.01em;color:var(--gsd-fg)}
.pm-col-scope{font-family:var(--gsd-font-mono);font-size:9.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--gsd-fg-muted)}
.pm-dot{width:7px;height:7px;border-radius:50%;background:var(--pm-accent);display:inline-block;flex:none}
/* left cadence rail */
.pm-rail{
  display:flex;flex-direction:column;gap:3px;justify-content:flex-start;
  background:var(--gsd-surface);
  font-family:var(--gsd-font-mono);text-transform:uppercase;
}
.pm-rail-num{font-size:11px;letter-spacing:0.16em;color:var(--gsd-green)}
.pm-rail-name{font-family:var(--gsd-font-display);font-weight:700;font-size:18px;letter-spacing:-0.01em;color:var(--gsd-fg);text-transform:none}
.pm-rail-sub{font-size:9.5px;letter-spacing:0.07em;color:var(--gsd-fg-faint)}
/* cells */
.pm-cell{
  display:flex;flex-direction:column;gap:10px;
  transition:opacity var(--gsd-dur) var(--gsd-ease);
}
.pm-cell-head{
  display:flex;align-items:center;gap:8px;
  font-family:var(--gsd-font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--pm-accent);
}
.pm-cell-head .arrow{color:var(--gsd-fg-faint)}
.pm-stage-name{font-family:var(--gsd-font-display);font-weight:700;font-size:17px;letter-spacing:-0.01em;color:var(--gsd-fg);text-transform:none}
.pm-ico{margin-left:auto;width:18px;height:18px;color:var(--pm-accent);flex:none}
.pm-ico svg{width:18px;height:18px}
.pm-body{font-family:var(--gsd-font-display);font-size:13.5px;line-height:1.5;color:var(--gsd-fg-soft);margin:0;text-wrap:pretty}
.pm-deliv{
  margin-top:auto;padding-top:12px;border-top:1px dashed var(--gsd-line);
  font-family:var(--gsd-font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gsd-fg-muted);
  display:flex;flex-direction:column;gap:3px;
}
.pm-deliv .v{color:var(--gsd-fg)}
.pm-cell-type{display:none}
/* focus strip — click/tap to pin one column */
.pm-focus{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px;
  font-family:var(--gsd-font-mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;
}
.pm-focus-label{color:var(--gsd-fg-faint);margin-right:2px}
.pm-focus-btn{
  appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  background:var(--gsd-surface);color:var(--gsd-fg-soft);
  border:1px solid var(--gsd-line);border-radius:var(--gsd-radius);
  padding:7px 12px;font:inherit;letter-spacing:0.1em;
  transition:color var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease);
}
.pm-focus-btn[data-focus="design"]{--pm-accent:var(--gsd-green)}
.pm-focus-btn[data-focus="renew"]{--pm-accent:var(--gsd-amber)}
.pm-focus-btn[data-focus="waste"]{--pm-accent:var(--gsd-teal)}
.pm-focus-btn:hover{color:var(--gsd-fg);border-color:var(--gsd-line-strong)}
.pm-focus-btn.is-active{color:var(--gsd-fg);border-color:var(--pm-accent,var(--gsd-green))}
.pm-focus-btn .pm-dot{width:7px;height:7px}
/* focus dimming — driven by data-focus on .pm (set by the focus strip) */
.pm[data-focus="design"] [data-type="renew"],
.pm[data-focus="design"] [data-type="waste"],
.pm[data-focus="renew"] [data-type="design"],
.pm[data-focus="renew"] [data-type="waste"],
.pm[data-focus="waste"] [data-type="design"],
.pm[data-focus="waste"] [data-type="renew"]{opacity:var(--pm-dim)}
/* hover a column head to preview-focus (pointer devices only) */
@media (hover:hover){
  .pm:has(.pm-col-head[data-type="design"]:hover) [data-type="renew"],
  .pm:has(.pm-col-head[data-type="design"]:hover) [data-type="waste"],
  .pm:has(.pm-col-head[data-type="renew"]:hover) [data-type="design"],
  .pm:has(.pm-col-head[data-type="renew"]:hover) [data-type="waste"],
  .pm:has(.pm-col-head[data-type="waste"]:hover) [data-type="design"],
  .pm:has(.pm-col-head[data-type="waste"]:hover) [data-type="renew"]{opacity:var(--pm-dim)}
}
@media (prefers-reduced-motion:reduce){
  .pm-cell,.pm-focus-btn{transition:none}
  /* Journal / AYNTK / Q&A: keep colour & filter resolve, drop lifts/zooms/slides */
  .article-card,.article-thumb .art-img,.art-more,
  .bull-lead,.bl-media img,.bl-arrow,.bull-fr,.bull-thumb img,.bulletin-arrow,
  .qa-row,.qa-arrow,.qa-a,.qa-fchip{transition:none}
  .article-card:hover,.article-card:focus-visible,
  .bull-lead:hover,.bull-lead:focus-visible{transform:none}
  .article-card:hover .art-img,.article-card:focus-visible .art-img,
  .bull-lead:hover .bl-media img,.bull-lead:focus-visible .bl-media img{transform:none}
  .bull-fr:hover .bulletin-arrow,.bull-fr:focus-visible .bulletin-arrow{transform:none}
}

/* ---- SECTION IV — Field log ---- */
.field-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
.field-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:24px;
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  background:var(--gsd-surface);
  position:relative;
  min-height:220px;
}
.field-card::before,
.field-card::after{
  content:"";
  position:absolute;width:8px;height:8px;
}
.field-card::before{top:4px;left:4px;border-top:1px solid var(--gsd-fg-faint);border-left:1px solid var(--gsd-fg-faint)}
.field-card::after{bottom:4px;right:4px;border-bottom:1px solid var(--gsd-fg-faint);border-right:1px solid var(--gsd-fg-faint)}
.field-card .fc-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  padding-bottom:14px;
  border-bottom:1px dashed var(--gsd-line);
}
.field-card .fc-head .fc-tag{color:var(--gsd-green)}
.field-card .fc-head .fc-loc{color:var(--gsd-fg-soft)}
.field-card .fc-title{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:22px;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:var(--gsd-fg);
  margin:0;
}
.field-card .fc-body{
  font-family:var(--gsd-font-body);
  font-size:14px;
  line-height:1.5;
  color:var(--gsd-fg-soft);
  margin:0;
}
.field-card .fc-metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--gsd-line);
}
.field-card .fc-metric .k{
  font-family:var(--gsd-font-mono);
  font-size:9px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  display:block;
  margin-bottom:6px;
}
.field-card .fc-metric .v{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  color:var(--gsd-fg);
}
.field-card .fc-metric .v .unit{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  color:var(--gsd-green);
  font-weight:500;
  margin-left:2px;
}

/* ---- SECTION V — Journal / article cards (dynamic: gss-codex-journal, real featured images) ---- */
.journal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.article-card{
  display:flex;
  flex-direction:column;
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  background:var(--gsd-surface);
  text-decoration:none;
  color:inherit;
  transition:border-color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
  overflow:hidden;
}
.article-card:hover,.article-card:focus-visible{border-color:var(--gsd-green);transform:translateY(-2px);outline:none}
.article-thumb{
  position:relative;
  aspect-ratio:16 / 10;
  background:var(--gsd-surface-2);
  border-bottom:1px solid var(--gsd-line);
  overflow:hidden;
}
.article-thumb .art-img{
  width:100%;height:100%;
  object-fit:cover;object-position:center;
  display:block;
  filter:saturate(0.85) brightness(0.9) contrast(1.02);
  transform:scale(1);
  transition:filter var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
.article-thumb svg{width:100%;height:100%;display:block}
.article-thumb::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,13,11,0.55),transparent 55%);
  transition:opacity var(--gsd-dur) var(--gsd-ease);
}
.article-card:hover .art-img,.article-card:focus-visible .art-img{filter:saturate(1) brightness(1);transform:scale(1.04)}
.article-card:hover .article-thumb::after,.article-card:focus-visible .article-thumb::after{opacity:0.45}
.article-thumb .art-tag{
  position:absolute;
  top:12px;left:12px;z-index:1;
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-green);
  background:rgba(10,13,11,0.7);
  padding:4px 8px;
  border:1px solid rgba(93,201,123,0.3);
  border-radius:var(--gsd-radius);
}
.article-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:12px;flex:1}
.article-meta{
  display:flex;
  gap:14px;
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.article-meta .dot{color:var(--gsd-fg-faint)}
.article-card h3{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-0.01em;
  color:var(--gsd-fg);
  margin:0;
  text-wrap:balance;
}
.article-author{
  margin-top:auto;
  padding-top:14px;
  border-top:1px dashed var(--gsd-line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.art-more{color:var(--gsd-fg-muted);white-space:nowrap;transition:color var(--gsd-dur) var(--gsd-ease)}
.article-card:hover .art-more,.article-card:focus-visible .art-more{color:var(--gsd-green)}

/* ---- SECTION VI — "All you need to Know" · Featured LEAD + thumbnail FEED ---- */
.bull-layout{display:grid;grid-template-columns:1.15fr 0.85fr;gap:24px;align-items:start}
/* LEAD */
.bull-lead{
  display:flex;flex-direction:column;
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  background:var(--gsd-surface);
  text-decoration:none;color:inherit;overflow:hidden;
  transition:border-color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
.bull-lead:hover,.bull-lead:focus-visible{border-color:var(--gsd-green);transform:translateY(-2px);outline:none}
.bl-media{position:relative;aspect-ratio:16 / 10;overflow:hidden;border-bottom:1px solid var(--gsd-line);background:var(--gsd-surface-2)}
.bl-media img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(0.85) brightness(0.82);
  transition:filter var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
.bl-media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(10,13,11,0.92),rgba(10,13,11,0.45) 28%,transparent 60%)}
.bull-lead:hover .bl-media img,.bull-lead:focus-visible .bl-media img{filter:none;transform:scale(1.04)}
.bl-cat{
  position:absolute;top:12px;left:12px;z-index:1;
  font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--gsd-green);background:rgba(10,13,11,0.7);
  padding:4px 8px;border:1px solid rgba(93,201,123,0.3);border-radius:var(--gsd-radius);
}
.bl-body{padding:18px 22px 24px;display:flex;flex-direction:column;gap:12px}
.bl-meta{display:flex;gap:12px;font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gsd-fg-muted)}
.bl-meta .dot{color:var(--gsd-fg-faint)}
.bl-title{font-family:var(--gsd-font-display);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-0.01em;color:var(--gsd-fg);margin:0;text-wrap:balance}
.bl-deck{font-size:14px;line-height:1.55;color:var(--gsd-fg-soft);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bl-cue{font-family:var(--gsd-font-mono);font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--gsd-green);margin-top:4px}
.bl-arrow{display:inline-block;transition:transform var(--gsd-dur) var(--gsd-ease)}
.bull-lead:hover .bl-arrow,.bull-lead:focus-visible .bl-arrow{transform:translateX(3px)}
/* FEED */
.bull-feed{display:flex;flex-direction:column;border-top:1px solid var(--gsd-line)}
.bull-fr{
  display:grid;grid-template-columns:auto 56px 1fr auto;align-items:center;gap:14px;
  padding:14px 4px;border-bottom:1px solid var(--gsd-line);
  text-decoration:none;color:inherit;
  transition:background var(--gsd-dur) var(--gsd-ease);position:relative;
}
.bull-fr:hover,.bull-fr:focus-visible{background:var(--gsd-green-wash);outline:none}
.bull-fr::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--gsd-green);transform:scaleX(0);transform-origin:left;transition:transform var(--gsd-dur) var(--gsd-ease)}
.bull-fr:hover::before,.bull-fr:focus-visible::before{transform:scaleX(1)}
.bull-num{font-family:var(--gsd-font-mono);font-size:11px;letter-spacing:0.12em;color:var(--gsd-fg-muted)}
.bull-thumb{width:56px;height:56px;border:1px solid var(--gsd-line);border-radius:var(--gsd-radius);overflow:hidden;background:var(--gsd-surface-2)}
.bull-thumb img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(0.85) brightness(0.9);transition:filter var(--gsd-dur) var(--gsd-ease)}
.bull-fr:hover .bull-thumb img,.bull-fr:focus-visible .bull-thumb img{filter:none}
.bull-fr-body{min-width:0}
.bull-fr-title{font-family:var(--gsd-font-display);font-weight:700;font-size:15px;line-height:1.3;color:var(--gsd-fg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bull-fr-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;font-family:var(--gsd-font-mono);font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--gsd-fg-muted)}
.bull-fr-cat{color:var(--gsd-green)}
.bulletin-arrow{font-family:var(--gsd-font-mono);color:var(--gsd-fg-faint);transition:color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease)}
.bull-fr:hover .bulletin-arrow,.bull-fr:focus-visible .bulletin-arrow{color:var(--gsd-green);transform:translateX(2px)}

/* ---- SECTION VII — Expert's Corner Q&A · editorial index (chip + answer preview + answered-by) ---- */
.qa-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  border-top:1px solid var(--gsd-line);
  border-left:1px solid var(--gsd-line);
}
.qa-row{
  padding:22px 24px;
  border-right:1px solid var(--gsd-line);
  border-bottom:1px solid var(--gsd-line);
  display:flex;
  flex-direction:column;
  gap:12px;
  text-decoration:none;
  color:inherit;
  transition:background var(--gsd-dur) var(--gsd-ease);
  position:relative;
}
.qa-row:hover,.qa-row:focus-visible{background:var(--gsd-surface);outline:none}
.qa-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.qa-row .qa-num{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gsd-green);
}
.qa-cat{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-teal);
  border:1px solid var(--gsd-line-strong);
  border-radius:var(--gsd-radius);
  padding:3px 8px;
  white-space:nowrap;
}
.qa-row .qa-q{
  font-family:var(--gsd-font-display);
  font-size:19px;
  line-height:1.3;
  font-weight:600;
  color:var(--gsd-fg);
  margin:0;
  text-wrap:pretty;
}
.qa-row .qa-q::before{content:"Q. ";color:var(--gsd-fg-muted);font-weight:700}
.qa-a{
  font-family:var(--gsd-font-display);
  font-size:14px;
  line-height:1.55;
  color:var(--gsd-fg-soft);
  margin:0;
  padding-left:12px;
  border-left:1px solid var(--gsd-line);
  max-width:64ch;
  text-wrap:pretty;
  transition:border-color var(--gsd-dur) var(--gsd-ease);
}
.qa-a::before{content:"A. ";color:var(--gsd-green);font-weight:700}
.qa-row:hover .qa-a,.qa-row:focus-visible .qa-a{border-left-color:var(--gsd-green)}
.qa-byline{
  margin-top:auto;
  padding-top:10px;
  padding-right:28px;
  border-top:1px dashed var(--gsd-line);
  display:flex;
  flex-direction:column;
  gap:4px;
}
.qa-asker,.qa-by-answer{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.qa-asker .by,.qa-by-answer .by{color:var(--gsd-fg-faint)}
.qa-by-answer .name{color:var(--gsd-green)}
.qa-arrow{
  position:absolute;
  bottom:22px;right:24px;
  font-family:var(--gsd-font-mono);
  color:var(--gsd-fg-faint);
  transition:color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
.qa-row:hover .qa-arrow,.qa-row:focus-visible .qa-arrow{color:var(--gsd-green);transform:translateX(2px)}

/* ---- Q&A topic-filter rail (pure-CSS radio filter; per-slug :checked/:focus rules are
   generated into the bridge <style> from the live taxonomy by build-codex-data.php) ---- */
.qa-filter-input{                       /* visually hidden but keyboard-focusable (clip pattern) */
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
.qa-filter{margin:0 0 24px;padding-bottom:20px;border-bottom:1px solid var(--gsd-line)}
.qa-filter-eyebrow{
  display:flex;justify-content:space-between;gap:12px;margin-bottom:14px;
  font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--gsd-fg-faint);
}
.qa-fchips{display:flex;flex-wrap:wrap;gap:8px}
.qa-fchip{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;white-space:nowrap;
  font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:0.12em;
  text-transform:uppercase;color:var(--gsd-fg-soft);
  border:1px solid var(--gsd-line);border-radius:var(--gsd-radius);padding:6px 12px;
  transition:background var(--gsd-dur) var(--gsd-ease),border-color var(--gsd-dur) var(--gsd-ease),color var(--gsd-dur) var(--gsd-ease);
}
.qa-fchip:hover{border-color:var(--gsd-line-strong);color:var(--gsd-fg)}
.qa-fchip b{font-weight:600;color:var(--gsd-teal)}

/* ---- SECTION VIII — Inquiry / Contact ---- */
.contact-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--gsd-line);
  border-bottom:1px solid var(--gsd-line);
}
.contact-card{
  padding:32px 28px;
  border-right:1px solid var(--gsd-line);
  display:flex;
  flex-direction:column;
  gap:14px;
  text-decoration:none;
  color:inherit;
  transition:background var(--gsd-dur) var(--gsd-ease);
  position:relative;
  min-height:200px;
}
.contact-card:last-child{border-right:0}
.contact-card:hover{background:var(--gsd-green-wash)}
.contact-card:hover .contact-arrow{color:var(--gsd-green);transform:translateX(4px)}
.contact-card .contact-icon{
  width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;
  color:var(--gsd-green);
}
.contact-card .contact-icon svg{width:24px;height:24px;stroke-width:1.4}
.contact-card .contact-kind{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.contact-card .contact-val{
  font-family:var(--gsd-font-display);
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.01em;
  color:var(--gsd-fg);
  line-height:1.15;
}
.contact-card .contact-sub{
  font-family:var(--gsd-font-body);
  font-size:13px;
  line-height:1.4;
  color:var(--gsd-fg-soft);
  margin-top:auto;
}
.contact-card .contact-arrow{
  position:absolute;
  bottom:24px;right:24px;
  font-family:var(--gsd-font-mono);
  color:var(--gsd-fg-faint);
  transition:color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}

.address-block{
  display:grid;
  grid-template-columns:1fr auto;
  gap:48px;
  align-items:center;
  margin-top:40px;
  padding:32px;
  border:1px solid var(--gsd-line);
  border-radius:var(--gsd-radius);
  background:var(--gsd-surface);
  position:relative;
}
.address-block::before,
.address-block::after{
  content:"";position:absolute;width:10px;height:10px;
}
.address-block::before{top:6px;left:6px;border-top:1px solid var(--gsd-green);border-left:1px solid var(--gsd-green)}
.address-block::after{bottom:6px;right:6px;border-bottom:1px solid var(--gsd-green);border-right:1px solid var(--gsd-green)}
.address-text{
  font-family:var(--gsd-font-mono);
  font-size:13px;
  line-height:1.7;
  color:var(--gsd-fg-soft);
  letter-spacing:0.02em;
}
.address-text .a-name{
  font-family:var(--gsd-font-display);
  font-size:18px;
  font-weight:700;
  color:var(--gsd-fg);
  letter-spacing:-0.01em;
  display:block;
  margin-bottom:6px;
}
.address-text .a-name sup{font-size:11px;color:var(--gsd-fg-soft)}
.address-coord{
  display:flex;
  flex-direction:column;
  gap:14px;
  font-family:var(--gsd-font-mono);
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  text-align:right;
}
.address-coord .v{color:var(--gsd-green);font-weight:600}
.address-coord .pin{
  display:flex;align-items:center;gap:6px;justify-content:flex-end;
}
.address-coord .pin-dot{
  width:8px;height:8px;border-radius:50%;background:var(--gsd-green);
  box-shadow:0 0 0 4px var(--gsd-green-wash);
}

/* ---- Footer (redesigned) ---- */
.site-foot{
  position:relative;
  border-top:1px solid var(--gsd-line-strong);
  margin-top:48px;
  padding:0 0 28px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(93,201,123,0.04), transparent 70%),
    var(--gsd-bg);
  overflow:hidden;
}
.site-foot-inner{
  max-width:1400px;
  margin:0 auto;
  padding:0 var(--gsd-gutter);
  position:relative;
  z-index:1;
}

/* Mantra band — large display headline echoing the codex */
.foot-mantra{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:32px;
  align-items:end;
  padding:64px 0 40px;
  border-bottom:1px solid var(--gsd-line);
}
.foot-mantra-eyebrow{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-bottom:14px;
  min-width:90px;
}
.foot-mantra-eyebrow .v{color:var(--gsd-green)}
.foot-mantra h2{
  font-family:var(--gsd-font-display);
  font-weight:300;
  font-size:clamp(36px,5.6vw,80px);
  line-height:0.98;
  letter-spacing:-0.025em;
  color:var(--gsd-fg);
  margin:0;
  text-wrap:balance;
}
.foot-mantra h2 .em{color:var(--gsd-green);font-style:normal}
.foot-mantra h2 .punct{color:var(--gsd-green);font-weight:400}
.foot-mantra h2 .deva{
  font-family:'Tiro Devanagari Hindi',serif;
  font-weight:400;
  font-size:0.48em;
  color:var(--gsd-green);
  margin-left:0.2em;
  vertical-align:0.16em;
  letter-spacing:0;
}
.foot-mantra-pin{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gsd-fg-soft);
  text-align:right;
  padding-bottom:14px;
  line-height:1.7;
}
.foot-mantra-pin .dot{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:var(--gsd-green);
  margin-right:8px;
  animation:foot-pulse 2.4s ease-in-out infinite;
  vertical-align:1px;
}
@keyframes foot-pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.foot-mantra-pin .v{color:var(--gsd-fg)}

/* Grid of columns */
.foot-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:0;
  padding:44px 0 36px;
}
.foot-col{
  padding:0 28px;
  border-left:1px solid var(--gsd-line);
  min-width:0;
}
.foot-col:first-child{padding-left:0;border-left:0;padding-right:36px}
.foot-col:last-child{padding-right:0}
.foot-col-eyebrow{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:8px;
}
.foot-col-eyebrow .sep{color:var(--gsd-line-strong)}
.foot-col-eyebrow .v{color:var(--gsd-green)}

/* Brand column */
.foot-brand{display:flex;flex-direction:column;gap:18px}
.foot-brand-row{display:flex;align-items:center;gap:12px}
.foot-brand img{width:38px;height:38px;filter:brightness(1.4) saturate(1.1)}
.foot-brand-mark{
  font-family:var(--gsd-font-display);
  font-weight:600;
  font-size:24px;
  color:var(--gsd-fg);
  letter-spacing:-0.01em;
}
.foot-brand-mark sup{font-size:11px;color:var(--gsd-fg-soft);vertical-align:super}
.foot-brand-mark .deva{
  font-family:'Tiro Devanagari Hindi',serif;
  color:var(--gsd-green);
  font-weight:400;
  font-size:20px;
  margin-left:6px;
}
.foot-brand-line{
  font-family:var(--gsd-font-body);
  font-size:13.5px;
  color:var(--gsd-fg-soft);
  margin:0;
  line-height:1.55;
  max-width:380px;
}
.foot-brand-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:4px;
  padding-top:18px;
  border-top:1px dashed var(--gsd-line);
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.foot-brand-meta .row{display:flex;justify-content:space-between;gap:18px}
.foot-brand-meta .row .v{color:var(--gsd-fg-soft)}

/* Link lists */
.foot-col ul{
  list-style:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:12px;
}
.foot-col ul li{position:relative}
.foot-col a{
  font-family:var(--gsd-font-body);
  font-size:13.5px;
  color:var(--gsd-fg-soft);
  text-decoration:none;
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  white-space:nowrap;
  transition:color var(--gsd-dur) var(--gsd-ease);
}
.foot-col ul li > a::before{
  content:'';
  display:none;
}
.foot-col a:hover,.foot-col a:focus-visible{color:var(--gsd-fg)}

/* Connect column — contact card */
.foot-connect{display:flex;flex-direction:column;gap:16px}
.foot-connect-block{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding-bottom:14px;
  border-bottom:1px dashed var(--gsd-line);
}
.foot-connect-block:last-of-type{border-bottom:0;padding-bottom:0}
.foot-connect-label{
  font-family:var(--gsd-font-mono);
  font-size:9px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.foot-connect-val{
  font-family:var(--gsd-font-display);
  font-size:18px;
  color:var(--gsd-fg);
  text-decoration:none;
  letter-spacing:-0.005em;
  transition:color var(--gsd-dur) var(--gsd-ease);
}
a.foot-connect-val:hover{color:var(--gsd-green)}
.foot-connect-sub{
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.08em;
  color:var(--gsd-fg-soft);
  text-transform:none;
}

/* Socials */
.foot-socials{display:flex;gap:0;margin-top:4px;border:1px solid var(--gsd-line);border-radius:var(--gsd-radius);overflow:hidden;align-self:flex-start}
.foot-socials a{
  color:var(--gsd-fg-soft);
  text-decoration:none;
  font-family:var(--gsd-font-mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.12em;
  padding:9px 13px;
  border-right:1px solid var(--gsd-line);
  transition:color var(--gsd-dur) var(--gsd-ease),background var(--gsd-dur) var(--gsd-ease);
}
.foot-socials a:last-child{border-right:0}
.foot-socials a:hover{color:var(--gsd-green);background:rgba(93,201,123,0.06)}

/* Marquee — tightly spaced display run, decorative */
.foot-marquee{
  margin:0;
  padding:18px 0;
  border-top:1px solid var(--gsd-line);
  border-bottom:1px solid var(--gsd-line);
  overflow:hidden;
  position:relative;
  white-space:nowrap;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);
}
.foot-marquee-track{
  display:inline-flex;
  gap:48px;
  align-items:center;
  animation:foot-marq 90s linear infinite;
  font-family:var(--gsd-font-display);
  font-weight:300;
  font-size:clamp(20px,2.4vw,32px);
  letter-spacing:-0.012em;
  color:var(--gsd-fg-soft);
}
.foot-marquee-track > span{display:inline-flex;align-items:center;gap:48px;padding-right:48px}
.foot-marquee-track .em{color:var(--gsd-green)}
.foot-marquee-track .dot{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--gsd-fg-muted);
}
@keyframes foot-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bottom bar */
.foot-bottom{
  margin-top:24px;
  padding-top:22px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:24px;
  align-items:center;
  font-family:var(--gsd-font-mono);
  font-size:10px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--gsd-fg-muted);
}
.foot-bottom .copyright sup{font-size:8px;vertical-align:super}
.foot-bottom .rev{
  text-align:center;
  color:var(--gsd-fg-muted);
  letter-spacing:0.18em;
}
.foot-bottom .rev .v{color:var(--gsd-green)}
.foot-bottom .legal{display:flex;gap:0;justify-content:flex-end}
.foot-bottom .legal a{
  color:var(--gsd-fg-muted);
  text-decoration:none;
  padding:0 14px;
  border-right:1px solid var(--gsd-line);
  transition:color var(--gsd-dur) var(--gsd-ease);
}
.foot-bottom .legal a:last-child{border-right:0;padding-right:0}
.foot-bottom .legal a:hover{color:var(--gsd-green)}

/* ---- Responsive ---- */
@media (max-width:1100px){
  .site-nav-inner{padding:14px var(--gsd-gutter);gap:24px}
  .site-nav-links{gap:18px}
  .site-nav-meta{display:none}
  .land-section{padding:64px var(--gsd-gutter)}
  #principle{padding-top:40px}
  .land-head{grid-template-columns:1fr;gap:24px;align-items:flex-start}
  .land-deck{max-width:none}
  .land-head .land-deck{justify-self:stretch}  /* single-column: deck fills width under its title (not hugging the right edge) */
  .land-deck.is-right{text-align:left}  /* single-column: all decks back to left-aligned on mobile */
  .principle{grid-template-columns:1fr;gap:40px}
  /* Why-We-Exist: collapse the shared grid to one column; DOM order = head→stats→deck→stmt→ledger */
  .principle-block{grid-template-columns:1fr;grid-template-areas:none;row-gap:36px;column-gap:0}
  .principle-block > *{grid-area:auto !important}
  .principle-emblem{position:static;width:200px;margin:4px auto 0;opacity:0.08}
  /* HOW WE WORK matrix → keep the TRUE 4×3 grid, condensed: short labels only
     (stage name + icon); column heads + stage rail stay so it reads as a matrix.
     Tapping a cell opens #pm-sheet with the full text (wired in the in-page JS). */
  .pm{grid-template-columns:minmax(36px,0.5fr) repeat(3,1fr)}
  .pm-focus{display:none}
  .pm[data-focus] [data-type]{opacity:1 !important}
  .pm-corner{padding:6px 5px}
  .pm-corner-sub{display:none}
  .pm-corner > span:first-child{font-size:9px}
  .pm-col-head{padding:8px 6px}
  .pm-col-scope{display:none}
  .pm-col-name{font-size:10px;letter-spacing:0;line-height:1.1}
  .pm-rail{padding:8px 5px}
  .pm-rail-sub{display:none}
  .pm-rail-num{font-size:11px}
  .pm-rail-name{font-size:10px;line-height:1.1}
  .pm-cell{padding:8px 7px;min-height:58px;cursor:pointer;gap:0}
  .pm-cell .pm-stage,.pm-cell .pm-cell-head .arrow,.pm-cell .pm-body,.pm-cell .pm-deliv{display:none}
  .pm-cell-head{gap:4px;flex-wrap:wrap}
  .pm-stage-name{font-size:10.5px;line-height:1.15}
  .pm-cell .pm-ico{width:13px;height:13px;flex:none}
  .field-grid{grid-template-columns:1fr}
  .journal-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .bull-layout{grid-template-columns:1fr}
  .qa-list{grid-template-columns:1fr}
  .qa-fchips{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .qa-fchip{flex:0 0 auto;scroll-snap-align:start}
  .contact-grid{grid-template-columns:repeat(2,1fr)}
  .contact-card:nth-child(2){border-right:0}
  .contact-card:nth-child(-n+2){border-bottom:1px solid var(--gsd-line)}
  .address-block{grid-template-columns:1fr;gap:24px}
  .address-coord{text-align:left}
  .address-coord .pin{justify-content:flex-start}
  .foot-top{grid-template-columns:1fr 1fr 1fr;gap:0}
  .foot-brand{padding-right:0}
  .foot-col:first-child{grid-column:1 / -1;padding-right:0;border-bottom:1px solid var(--gsd-line);padding-bottom:32px;margin-bottom:8px}
  .foot-col:nth-child(2){border-left:0;padding-left:0}
  .foot-connect{grid-column:1 / -1;border-left:0;padding-left:0;padding-right:0;margin-top:8px;padding-top:28px;border-top:1px solid var(--gsd-line)}
  .foot-mantra{grid-template-columns:1fr;gap:18px;align-items:start;padding:48px 0 32px}
  .foot-mantra-pin{text-align:left}
}
@media (max-width:767px){
  .site-nav-links{display:none}
  .site-nav-cta{margin-left:auto}
  .land-section{padding:48px var(--gsd-gutter)}
  #principle{padding-top:32px}
  .pb-stats{grid-template-columns:repeat(3,1fr)}
  /* matrix uses the condensed grid + tap-sheet set at <=1100; nothing extra at <=767 */
  .journal-grid{grid-template-columns:1fr}
  .bull-fr{grid-template-columns:auto 48px 1fr;gap:12px}
  .bull-fr .bulletin-arrow{display:none}
  .contact-grid{grid-template-columns:1fr}
  .contact-card{border-right:0;border-bottom:1px solid var(--gsd-line)}
  .contact-card:last-child{border-bottom:0}
  .foot-top{grid-template-columns:1fr}
  .foot-col{border-left:0;padding-left:0;padding-right:0;padding-top:28px;border-top:1px solid var(--gsd-line)}
  .foot-col:first-child{border-top:0;padding-top:0;border-bottom:0;padding-bottom:0;margin-bottom:0}
  .foot-bottom{grid-template-columns:1fr;gap:14px;text-align:left}
  .foot-bottom .rev,.foot-bottom .legal{justify-content:flex-start}
  .foot-bottom .rev{text-align:left}
  .foot-bottom .legal{flex-wrap:wrap}
  .foot-bottom .legal a:first-child{padding-left:0}
}

/* ── How-we-work cell detail sheet (mobile tap-to-expand) ───────────── */
.pm-sheet{display:none}
.pm-sheet-scrim{position:fixed;inset:0;background:rgba(8,8,10,0.62);z-index:9998;opacity:0;transition:opacity .2s ease}
.pm-sheet-panel{position:fixed;left:0;right:0;bottom:0;z-index:9999;
  background:var(--gsd-surface);border-top:2px solid var(--pm-accent,var(--gsd-green));
  border-radius:16px 16px 0 0;padding:22px var(--gsd-gutter) 30px;
  transform:translateY(100%);transition:transform .26s var(--gsd-ease);
  max-height:82vh;overflow-y:auto;box-shadow:0 -16px 40px rgba(0,0,0,.45)}
.pm-sheet.is-on{display:block}
.pm-sheet.is-on .pm-sheet-scrim{opacity:1}
.pm-sheet.is-on .pm-sheet-panel{transform:translateY(0)}
.pm-sheet-close{position:absolute;top:12px;right:14px;width:32px;height:32px;
  background:none;border:0;color:var(--gsd-fg-muted);font-size:24px;line-height:1;cursor:pointer}
.pm-sheet-kicker{display:flex;gap:8px;align-items:center;margin-bottom:10px;
  font-family:var(--gsd-font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--pm-accent,var(--gsd-green))}
.pm-sheet-kicker .pm-sheet-sep{color:var(--gsd-fg-faint)}
.pm-sheet-name{font-family:var(--gsd-font-display);font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--gsd-fg);margin-bottom:10px}
.pm-sheet-body{font-family:var(--gsd-font-body);font-size:14px;line-height:1.5;color:var(--gsd-fg-soft);margin:0 0 16px}
.pm-sheet-deliv-wrap{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--gsd-line);padding-top:12px}
.pm-sheet-deliv-label{font-family:var(--gsd-font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--gsd-fg-muted)}
.pm-sheet-deliv{font-family:var(--gsd-font-mono);font-size:12px;letter-spacing:.06em;color:var(--gsd-fg)}
body.pm-sheet-open{overflow:hidden}

/* === NATIVE-WIDGET BRIDGE v2 ===
   _css_classes render ONLY on widgets here, not sections/columns, so
   anchor on _element_id (#inquiry,#site-foot) + structural classes
   + the widget classes that DO render (.contact-icon/.contact-kind/...). */

/* ---------- INQUIRY: native Icon+Heading cards ---------- */
#inquiry .elementor-inner-section > .elementor-container{
  max-width:none; border-top:1px solid var(--gsd-line); border-bottom:1px solid var(--gsd-line);
}
#inquiry .elementor-inner-section > .elementor-container > .elementor-column{
  min-height:200px; position:relative; display:flex;
}
#inquiry .elementor-inner-section > .elementor-container > .elementor-column:not(:last-child){
  border-right:1px solid var(--gsd-line);
}
#inquiry .elementor-inner-section .elementor-widget-wrap{
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:14px;
  padding:32px 28px; width:100%; transition:background var(--gsd-dur) var(--gsd-ease);
}
#inquiry .elementor-inner-section > .elementor-container > .elementor-column:hover .elementor-widget-wrap{
  background:var(--gsd-green-wash);
}
#inquiry .elementor-inner-section .elementor-widget{ width:100%; margin:0; }
#inquiry .contact-icon .elementor-icon-wrapper{ text-align:left; }
#inquiry .contact-icon .elementor-icon{
  width:32px; height:32px; padding:0; background:none; border:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1; color:var(--gsd-green) !important;
}
#inquiry .contact-icon .elementor-icon i,
#inquiry .contact-icon .elementor-icon svg{ width:24px; height:24px; color:var(--gsd-green); fill:currentColor; }
#inquiry .contact-kind{ font-family:var(--gsd-font-mono); font-size:10px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gsd-fg-muted); line-height:1.3; }
#inquiry .contact-val{ font-family:var(--gsd-font-display); font-weight:700; font-size:22px;
  letter-spacing:-.01em; color:var(--gsd-fg); line-height:1.15; }
#inquiry .contact-sub{ font-family:var(--gsd-font-body); font-size:13px; line-height:1.4;
  color:var(--gsd-fg-soft); margin-top:auto; }
#inquiry .contact-kind .elementor-heading-title,
#inquiry .contact-val  .elementor-heading-title,
#inquiry .contact-sub  .elementor-heading-title{
  font:inherit; color:inherit; letter-spacing:inherit; line-height:inherit; text-transform:inherit; margin:0;
}
#inquiry .elementor-inner-section > .elementor-container > .elementor-column::after{
  content:"\2192"; position:absolute; bottom:24px; right:24px;
  font-family:var(--gsd-font-mono); color:var(--gsd-fg-faint); z-index:1; pointer-events:none;
  transition:color var(--gsd-dur) var(--gsd-ease),transform var(--gsd-dur) var(--gsd-ease);
}
#inquiry .elementor-inner-section > .elementor-container > .elementor-column:hover::after{
  color:var(--gsd-green); transform:translateX(4px);
}
#inquiry .card-cover{ position:absolute; inset:0; z-index:5; }
@media(min-width:768px) and (max-width:1100px){
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column{ width:50% !important; }
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column:nth-child(2n){ border-right:0; }
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column:nth-child(-n+2){ border-bottom:1px solid var(--gsd-line); }
}
@media(max-width:767px){
  /* 2x2 grid on phones */
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column{ width:50% !important; }
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column:nth-child(2n){ border-right:0; }
  #inquiry .elementor-inner-section > .elementor-container > .elementor-column:nth-child(-n+2){ border-bottom:1px solid var(--gsd-line); }
}

/* ---------- FOOTER: link columns B & C are Elementor icon-lists ---------- */
#site-foot .elementor-inner-section > .elementor-container{ max-width:none; padding:44px 0 36px; }
#site-foot .elementor-inner-section > .elementor-container > .elementor-column{
  padding:0 28px; border-left:1px solid var(--gsd-line); min-width:0;
}
#site-foot .elementor-inner-section > .elementor-container > .elementor-column:first-child{
  padding-left:0; border-left:0; padding-right:36px;
}
#site-foot .elementor-inner-section > .elementor-container > .elementor-column:last-child{ padding-right:0; }
#site-foot .foot-links .elementor-icon-list-items{ padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
#site-foot .foot-links .elementor-icon-list-item{ margin:0; padding:0; }
#site-foot .foot-links .elementor-icon-list-item:after{ display:none; }
#site-foot .foot-links .elementor-icon-list-icon{ display:none !important; }
#site-foot .foot-links .elementor-icon-list-text{ padding:0; font-family:var(--gsd-font-body);
  font-size:13.5px; color:var(--gsd-fg-soft); transition:color var(--gsd-dur) var(--gsd-ease); }
#site-foot .foot-links a{ display:inline-flex; }
#site-foot .foot-links a:hover .elementor-icon-list-text{ color:var(--gsd-fg); }
@media(min-width:768px) and (max-width:1100px){
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column{ width:33.333% !important; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:first-child{
    width:100% !important; padding-right:0; border-bottom:1px solid var(--gsd-line); padding-bottom:32px; margin-bottom:8px; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:nth-child(2){ border-left:0; padding-left:0; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:last-child{
    width:100% !important; border-left:0; padding-left:0; padding-right:0; margin-top:8px; padding-top:28px; border-top:1px solid var(--gsd-line); }
}
@media(max-width:767px){
  /* grid footer: brand full-width, the two link columns side-by-side, connect full-width */
  #site-foot .elementor-inner-section > .elementor-container{ flex-wrap:wrap; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column{ width:50% !important; border-left:0; padding:24px 0 0; border-top:1px solid var(--gsd-line); }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:first-child{ width:100% !important; border-top:0; padding-top:0; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:nth-child(3){ padding-left:16px; }
  #site-foot .elementor-inner-section > .elementor-container > .elementor-column:last-child{ width:100% !important; }
}

/* ============================================================
   ROUND 3 — full-width + de-bleed
   (header clearance is handled by the head section's top padding)
   ============================================================ */
/* De-bleed: Ohio gives the .elementor wrapper a ~16px negative horizontal margin
   (escaping a content padding the Full-Width template removed) -> 16px horizontal
   overflow / scrollbar. Reset it so sections span exactly the viewport. */
body.elementor-page #content .elementor{
  margin-left:0 !important; margin-right:0 !important; width:auto !important; max-width:100% !important;
}
/* Keep the remaining .codex content (zone-b etc.) full-width. */
.gs-codex-page .codex{ max-width:none; }
/* Static land-sections (Principle / SOP / Journal live in the HEAD html widget and keep the
   design .land-section max-width:1400 cap) — uncap so they match the full-width rest of the page. */
.gs-codex-page .land-section{ max-width:none; }
/* Footer: the .site-foot-inner column class doesn't render (only widget classes + _element_id),
   so the footer never received the design gutter — apply it to the rendered single column. */
#site-foot > .elementor-container > .elementor-column{
  padding-left:var(--gsd-gutter); padding-right:var(--gsd-gutter);
}

/* Native land-sections (Bulletin / Q&A / Inquiry): horizontal gutter via --gsd-gutter.
   The .land-section class doesn't render on Elementor sections; anchor on the _element_id
   land_section() sets. Elementor's L/R padding control is zeroed in PHP (and WP Rocket may
   strip it on desktop anyway), so the live gutter lives here. Full-width to match the rest. */
#journal  > .elementor-container,
#bulletin > .elementor-container,
#archive  > .elementor-container,
#inquiry  > .elementor-container{
  padding-left:var(--gsd-gutter); padding-right:var(--gsd-gutter);
}

/* ============================================================
   HERO — its own section: full topo-map backdrop + native content
   ============================================================ */
#codex-hero{ position:relative; overflow:hidden; color:var(--gsd-fg); }
#codex-hero > .elementor-container > .elementor-column{ position:relative; }
#codex-hero > .elementor-container > .elementor-column > .elementor-widget-wrap{
  position:relative; min-height:50vw; display:flex; flex-direction:column; justify-content:flex-end; }
/* map backdrop — fills the section, full map (meet = never cropped), behind content.
   Scoped to the backdrop widget (:has(.zone-a-map)) so the in-content marquee widget stays in flow. */
#codex-hero .elementor-widget-html:has(.zone-a-map){ position:absolute; inset:0; z-index:0; margin:0; width:auto; }
#codex-hero .zone-a-map{ position:absolute; inset:92px 1.5% 0 1.5%; z-index:0; pointer-events:none;
  /* Fade the left/right edges so the map dissolves into the page instead of ending on a hard
     rectangular cut (the "cropped on the side" look). Outer ~8% fades to transparent; the icons
     (viewBox x38-322 ~ 11-89%) stay in the fully-opaque band. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%); }
#codex-hero .zone-a-map svg{ width:100%; height:100%; display:block; }
/* contour lines -> #eee (override the per-path inline coast→core ramp) */
#codex-hero .map-contours path{ stroke:rgba(238,238,238,0.40)!important; }
/* subtle bottom scrim so the overlaid content stays legible over the #eee contours
   (top ~60% of the map stays fully clear) */
#codex-hero > .elementor-container > .elementor-column::after{ content:""; position:absolute; inset:0;
  z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(17,16,19,.94) 0%, rgba(17,16,19,.6) 32%, rgba(17,16,19,0) 60%); }
/* content overlay (the inner section), bottom-anchored, cleared from Ohio's ~130px header */
#codex-hero .elementor-inner-section{ position:relative; z-index:2; width:100%; }
#codex-hero .elementor-inner-section > .elementor-container{
  max-width:none; align-items:flex-end; gap:48px; padding:130px var(--gsd-gutter) 64px; }
#codex-hero .elementor-widget{ margin:0; }
/* kicker */
#codex-hero .hero-kicker, #codex-hero .hero-kicker p{ font-family:var(--gsd-font-mono); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--gsd-green); margin:0 0 28px; }
#codex-hero .hero-kicker .hk-sep{ color:var(--gsd-fg-faint); }
#codex-hero .hero-kicker .hk-m{ color:var(--gsd-fg-soft); }
/* headline */
#codex-hero .hero-title .elementor-heading-title{ font-family:var(--gsd-font-display); font-weight:700;
  font-size:clamp(48px,7vw,96px); line-height:.98; letter-spacing:-.025em; color:var(--gsd-fg);
  margin:0 0 24px; text-wrap:balance; }
#codex-hero .hero-title .punct{ color:var(--gsd-green); }
/* body */
#codex-hero .hero-body, #codex-hero .hero-body p{ font-family:var(--gsd-font-display);
  font-size:clamp(18px,1.6vw,22px); line-height:1.4; color:var(--gsd-fg-soft); max-width:680px; margin:0; }
#codex-hero .hero-body .em{ color:var(--gsd-fg); }
#codex-hero .hero-body .sh-quiet{ display:block; margin-top:14px; font-family:var(--gsd-font-mono);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gsd-fg-muted); }
/* meta */
#codex-hero .hero-meta{ font-family:var(--gsd-font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gsd-fg-muted); line-height:1.8; text-align:right;
  border-left:1px solid var(--gsd-line); padding-left:24px; min-width:200px; }
#codex-hero .hero-meta .hm-v{ color:var(--gsd-fg); font-weight:600; }
#codex-hero .hero-meta .hm-row{ display:flex; justify-content:space-between; gap:16px; }
/* India globe (phone-only backdrop) — topographic CONTOURS matching the flat map's aesthetic */
#codex-hero .zone-a-globe{ display:none; }
#codex-hero .zone-a-globe svg{ width:100%; height:100%; display:block; overflow:visible; }
#codex-hero .globe-sphere{ fill:none; stroke:rgba(238,238,238,0.08); stroke-width:0.4; }
#codex-hero .globe-contours path{ fill:none; stroke:rgba(238,238,238,0.40); }
#codex-hero .globe-pin-label{ font-family:var(--gsd-font-mono); font-size:6px; letter-spacing:0.1em; fill:var(--gsd-fg-soft); }
/* HERO MARQUEE — a quiet scrolling line directly UNDER the display headline (it now lives in the
   content column, not over the map). Reuses .foot-marquee markup + @keyframes foot-marq + scroll. */
#codex-hero .foot-marquee{ position:relative; width:100%; margin:8px 0 2px; padding:0; background:none; border:0;
  pointer-events:none; max-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%);
          mask-image:linear-gradient(90deg,#000 0,#000 78%,transparent 100%); }
#codex-hero .foot-marquee-track{ gap:18px; font-weight:600;
  font-size:clamp(12px,1.25vw,15px); letter-spacing:.14em; text-transform:uppercase; line-height:1.2;
  color:var(--gsd-fg-muted); opacity:.9; }
#codex-hero .foot-marquee-track > span{ gap:18px; padding-right:18px; }
#codex-hero .foot-marquee-track .em{ color:var(--gsd-green); }
#codex-hero .foot-marquee-track .dot{ background:var(--gsd-green); opacity:.5; }
@media (prefers-reduced-motion:reduce){ #codex-hero .foot-marquee-track{ animation:none; } }

/* ============================================================
   ALIVE MAP — breathing contours + cursor spotlight + tap ripple
   + one-time draw-in (JS #hero-map-life) + "stations" checking in.
   ============================================================ */
/* breathing: each contour iso-level shimmers in depth phase (--t set per-path by the JS module) */
@keyframes gs-breathe{ 0%,100%{ stroke-opacity:.32 } 50%{ stroke-opacity:1 } }
@media (prefers-reduced-motion:no-preference){
  body:not(.elementor-editor-active) #codex-hero .map-contours path,
  body:not(.elementor-editor-active) #codex-hero .globe-contours path{
    animation:gs-breathe 9s ease-in-out infinite; animation-delay:calc(var(--t,0) * -9s); }
}
/* cursor LINE-GLOW (desktop) — a bright-green clone of the contour lines, revealed only inside a
   soft disc that follows the pointer, so the map's OWN lines light up under the cursor */
#codex-hero .map-hi{ position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .3s ease; z-index:1;
  -webkit-mask-image:radial-gradient(circle 135px at var(--mx,-400px) var(--my,-400px), #000 0%, #000 26%, transparent 72%);
          mask-image:radial-gradient(circle 135px at var(--mx,-400px) var(--my,-400px), #000 0%, #000 26%, transparent 72%); }
#codex-hero .map-hi.on{ opacity:1; }
#codex-hero .map-hi svg{ width:100%; height:100%; display:block; }
#codex-hero .map-hi .map-contours path{ stroke:var(--gsd-green)!important; stroke-opacity:.9!important; animation:none!important; }
/* tap/click ripple — a single ring expanding outward through the terrain */
#codex-hero .map-ripple{ position:absolute; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%;
  pointer-events:none; z-index:5; border:2px solid rgba(93,201,123,0.95);
  background:radial-gradient(circle, rgba(93,201,123,0.28), transparent 62%);
  box-shadow:0 0 20px rgba(93,201,123,0.5);
  animation:gs-ripple 1.0s cubic-bezier(.2,.6,.3,1) forwards; }
@keyframes gs-ripple{ 0%{ transform:scale(.22); opacity:1 } 100%{ transform:scale(9); opacity:0 } }
/* stations checking in — a few city nodes blink awake in a staggered cascade (--i set per node) */
#codex-hero .map-stations .mst-dot, #codex-hero .globe-stations .mst-dot{ fill:var(--gsd-green); }
@keyframes gs-station{ 0%,78%,100%{ opacity:.16 } 84%,90%{ opacity:1 } }
@media (prefers-reduced-motion:no-preference){
  body:not(.elementor-editor-active) #codex-hero .map-stations .mstation,
  body:not(.elementor-editor-active) #codex-hero .globe-stations .mstation{
    animation:gs-station 7s ease-in-out infinite; animation-delay:calc(var(--i,0) * 1.05s); }
}
@media(max-width:1100px){
  #codex-hero > .elementor-container > .elementor-column > .elementor-widget-wrap{ min-height:62vw; }
  #codex-hero .elementor-inner-section > .elementor-container{ padding:120px var(--gsd-gutter) 40px; gap:32px; }
}
@media(max-width:767px){
  /* phone hero: contour globe anchored RIGHT (bleeds off the edge); content bottom-left over a left+bottom scrim */
  #codex-hero > .elementor-container > .elementor-column > .elementor-widget-wrap{ min-height:clamp(480px,82vh,680px); }
  #codex-hero .elementor-widget-html:has(.zone-a-map){ position:absolute; inset:0; height:auto; }
  #codex-hero .zone-a-map{ display:none !important; }
  #codex-hero .zone-a-globe{ display:block; position:absolute; right:-24%; top:46%;
    width:min(119vw,517px); height:min(119vw,517px); transform:translateY(-50%); z-index:0; pointer-events:none;
    -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 60%, transparent 100%);
            mask-image:radial-gradient(circle at 50% 50%, #000 60%, transparent 100%); }
  #codex-hero > .elementor-container > .elementor-column::after{
    background:linear-gradient(to right, rgba(17,16,19,.94) 0%, rgba(17,16,19,.74) 42%, rgba(17,16,19,0) 80%),
               linear-gradient(to top, rgba(17,16,19,.92) 0%, rgba(17,16,19,0) 46%); }
  #codex-hero .elementor-inner-section > .elementor-container{ flex-direction:column; align-items:flex-start;
    padding:24px var(--gsd-gutter) 40px; gap:16px; }
  #codex-hero .hero-title .elementor-heading-title{ font-size:clamp(38px,11.5vw,58px); }
  #codex-hero .hero-body{ max-width:320px; }
  /* marquee: same in-content line under the headline, a touch tighter on phones */
  #codex-hero .foot-marquee-track{ font-size:11px; letter-spacing:.1em; gap:14px; }
  #codex-hero .foot-marquee-track > span{ gap:14px; padding-right:14px; }
}

/* ============================================================
   EDITOR-ONLY — editor.js adds `elementor-editor-active` to the preview-iframe
   <body>. In that canvas, neutralize the front-end full-bleed/absolute hero
   layout so every widget renders in plain document flow and stays visible &
   selectable. The live front-end has no such body class, so it is unaffected.
   ============================================================ */
body.elementor-editor-active #content .elementor{ width:auto !important; margin:0 !important; max-width:none !important; }
body.elementor-editor-active #codex-hero,
body.elementor-editor-active #codex-hero > .elementor-container > .elementor-column,
body.elementor-editor-active #codex-hero > .elementor-container > .elementor-column > .elementor-widget-wrap{
  position:static !important; display:block !important; min-height:0 !important; overflow:visible !important; }
body.elementor-editor-active #codex-hero .elementor-widget-html,
body.elementor-editor-active #codex-hero .zone-a-map{
  position:relative !important; inset:auto !important; width:100% !important; height:auto !important;
  margin:0 !important; -webkit-mask-image:none !important; mask-image:none !important; }
body.elementor-editor-active #codex-hero .zone-a-map svg{ height:auto !important; }
body.elementor-editor-active #codex-hero > .elementor-container > .elementor-column::after{ display:none !important; }
body.elementor-editor-active #codex-hero .elementor-inner-section{ position:static !important; z-index:auto !important; }
body.elementor-editor-active #codex-hero .elementor-inner-section > .elementor-container{ align-items:flex-start !important; padding:24px !important; }
body.elementor-editor-active #codex-hero .zone-a-globe{ display:none !important; }
body.elementor-editor-active #codex-hero .foot-marquee{ position:static !important; top:auto !important; }

/* ============================================================
   SIDE-BY-SIDE ONE-SCREEN FIT — journey (.zone-b) | periodic table (.zone-c).
   The .zone-bc wrapper is baked into codex-widget-content.html. Appended after
   the design rules so these !important overrides win the cascade (WP-Rocket-safe:
   it lives in the bridge <style>, not strippable section CSS). This block mirrors
   the OVERRIDE in /root/build/sbs.py — keep the two in sync.
   ROOT-CAUSE note: table rows were stuck at 108px because .cell-marker and
   .period-edge hard-code min-height:108px and (as the tallest grid children)
   govern the auto-row height; shrinking only .cell did nothing. All three are
   compressed together below. ~96px lands zone-c near zone-b (~685px) -> the
   combined block fits one 1440x900 screen with margin.
   DESKTOP-ONLY: wrapped in min-width:1101px so phones/tablets keep the original
   stacked sections — no mobile regression, no min-content overflow.
   ============================================================ */
@media (min-width:1101px){
.zone-bc{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.35fr);
  gap:28px;align-items:start;margin:6px 0 0}
.zone-bc>.zone-b,.zone-bc>.zone-c{margin:0!important}
.zone-bc>.zone-b{display:flex!important;flex-direction:column;gap:12px!important;
  padding:14px 0 16px!important;border-bottom:none!important}
.zone-bc .zone-b-head{margin-bottom:18px!important}
.zone-bc .chips{gap:6px!important}
.zone-bc .chip{min-height:44px!important;padding:8px 14px!important;font-size:13px!important}
.zone-bc .chip-sub{font-size:11px!important}
.zone-bc .zone-b-right{border-left:none!important;padding-left:0!important;
  border-top:1px solid var(--gsd-line);padding-top:12px!important}
.zone-bc .zone-b-right .schem{flex:0 0 auto!important}
.zone-bc .zone-b-right .schem-stage{min-height:0!important;flex:0 0 auto!important}
.zone-bc .schem-stage{padding:18px 16px!important}
.zone-bc .schem-stage svg{max-width:none!important;max-height:205px!important;height:auto!important}
.zone-bc .zone-c-head{margin-bottom:6px!important}
.zone-bc .table-grid{gap:5px!important}
.zone-bc .table-grid .cell{min-height:96px!important;padding:7px 7px 8px!important}
.zone-bc .cell-marker{min-height:96px!important}
.zone-bc .period-edge{min-height:96px!important}
.zone-bc .cell-top{min-height:10px!important;margin-bottom:1px!important}
.zone-bc .cell-sym{font-size:21px!important;margin:3px 0 2px!important}
.zone-bc .cell-name{font-size:9.5px!important;line-height:1.18!important}
.zone-bc .cell-icon{width:30px!important;height:30px!important;top:7px!important;right:7px!important}
.zone-bc .cell-num{top:6px!important;left:6px!important}
.zone-bc .col-mark{padding:2px 0 6px!important}
.zone-bc .family-banner{padding:6px 4px 4px!important;margin-top:4px!important}
/* journey title sized so the bigger headline + hint keep the side-by-side block within one screen */
.zone-bc .zone-b-q{font-size:20px!important;line-height:1.05!important}
.zone-bc .zone-b-hint{margin-bottom:10px!important;font-size:10px!important}
}

/* ============================================================
   SOP "How we work" — compress to fit one laptop screen (desktop only).
   #sop measured ~1081px (overflowed 900 & 768 viewports); tighten the
   land-head + the procedure matrix so the whole section sits within
   ~one viewport, matching the zone-bc one-screen treatment.
   DESKTOP-ONLY (min-width:1101px) so phones/tablets keep the original
   stacked matrix — no mobile regression.
   ============================================================ */
@media (min-width:1101px){
#sop{padding-bottom:22px!important}
#sop .land-head{margin-bottom:22px!important;padding-top:14px!important;gap:32px!important}
#sop .land-title{font-size:40px!important;line-height:1.0!important}
#sop .land-deck{font-size:14px!important;line-height:1.45!important}
#sop .pm-focus{margin:0 0 12px!important}
#sop .pm-corner,#sop .pm-col-head,#sop .pm-rail,#sop .pm-cell{padding:10px 12px 11px!important}
#sop .pm-cell{gap:7px!important}
#sop .pm-col-name{font-size:14px!important}
#sop .pm-col-scope{font-size:9px!important}
#sop .pm-rail-name{font-size:15px!important}
#sop .pm-stage-name{font-size:14px!important}
#sop .pm-body{font-size:12px!important;line-height:1.4!important}
#sop .pm-deliv{padding-top:8px!important;font-size:9px!important}
}

/* ============================================================
   VERTICAL SPACING STANDARD — one 8px-based scale, applied by role.
   Centralized HERE (inline bridge, !important) so it overrides BOTH the
   design .land-section CSS and Elementor's per-section padding — the latter
   is stripped by WP Rocket's Remove-Unused-CSS, which is exactly why the
   old spacing ranged 0..164px. Model: each section's TOP padding = the gap
   above it, bottom = 0, so inter-section gaps are uniform and never double.
   (--sp-head is 32, not the 48 first proposed: 48 read as "blank" earlier,
    so the header->content gap is kept on the tighter step of the same scale.)
   ============================================================ */
:root{
  --sp-section:96px; --sp-section-dense:64px;
  --sp-head:32px; --sp-block:24px; --sp-item:16px; --sp-micro:8px;
}
@media (max-width:1100px){ :root{ --sp-section:64px; --sp-section-dense:48px; --sp-head:28px } }
@media (max-width:767px){  :root{ --sp-section:48px; --sp-section-dense:40px; --sp-head:24px } }

/* zero the old container/section paddings that fought the rhythm */
.gs-codex-page .codex{ padding-top:0!important; padding-bottom:0!important; }
.gs-codex-page .land-section{ padding-top:0!important; padding-bottom:0!important; }

/* inter-section rhythm: TOP padding = the gap above the section; bottom = 0 */
#principle,#journal,#bulletin,#archive,#inquiry{ padding-top:var(--sp-section)!important; padding-bottom:0!important; }
/* dense / one-screen sections step down one notch on the same scale */
#sop{ padding-top:var(--sp-section-dense)!important; padding-bottom:0!important; }
.zone-bc{ padding-top:var(--sp-section-dense)!important; padding-bottom:0!important; margin:0!important; }

/* header -> content: uniform across every section */
#sop .land-head,#journal .land-head,#bulletin .land-head,#archive .land-head,#inquiry .land-head,
#principle .pb-head,.zone-bc .zone-b-head{ margin-bottom:var(--sp-head)!important; }
/* QA topic filter — generated from dwqa-question_category */
#qaf-all:checked ~ .qa-filter label[for="qaf-all"],
#qaf-brsr:checked ~ .qa-filter label[for="qaf-brsr"],
#qaf-carbon-footprint:checked ~ .qa-filter label[for="qaf-carbon-footprint"],
#qaf-cbam:checked ~ .qa-filter label[for="qaf-cbam"],
#qaf-composting:checked ~ .qa-filter label[for="qaf-composting"],
#qaf-ecological-footprint:checked ~ .qa-filter label[for="qaf-ecological-footprint"],
#qaf-energy-and-power:checked ~ .qa-filter label[for="qaf-energy-and-power"],
#qaf-environment:checked ~ .qa-filter label[for="qaf-environment"],
#qaf-epr:checked ~ .qa-filter label[for="qaf-epr"],
#qaf-esg:checked ~ .qa-filter label[for="qaf-esg"],
#qaf-eudr:checked ~ .qa-filter label[for="qaf-eudr"],
#qaf-ghg-inventory:checked ~ .qa-filter label[for="qaf-ghg-inventory"],
#qaf-global-warming:checked ~ .qa-filter label[for="qaf-global-warming"],
#qaf-green-building:checked ~ .qa-filter label[for="qaf-green-building"],
#qaf-green-technology:checked ~ .qa-filter label[for="qaf-green-technology"],
#qaf-life-cycle-assessment:checked ~ .qa-filter label[for="qaf-life-cycle-assessment"],
#qaf-pollution:checked ~ .qa-filter label[for="qaf-pollution"],
#qaf-rainwater:checked ~ .qa-filter label[for="qaf-rainwater"],
#qaf-recycling:checked ~ .qa-filter label[for="qaf-recycling"],
#qaf-renewable-energy:checked ~ .qa-filter label[for="qaf-renewable-energy"],
#qaf-solar:checked ~ .qa-filter label[for="qaf-solar"],
#qaf-sustainability:checked ~ .qa-filter label[for="qaf-sustainability"],
#qaf-waste:checked ~ .qa-filter label[for="qaf-waste"],
#qaf-water:checked ~ .qa-filter label[for="qaf-water"],
#qaf-water-footprint:checked ~ .qa-filter label[for="qaf-water-footprint"]{background:var(--gsd-green-wash) !important;color:var(--gsd-green) !important;border-color:var(--gsd-green-wash-hi) !important;box-shadow:inset 2px 0 0 var(--gsd-green) !important}
#qaf-all:focus-visible ~ .qa-filter label[for="qaf-all"],
#qaf-brsr:focus-visible ~ .qa-filter label[for="qaf-brsr"],
#qaf-carbon-footprint:focus-visible ~ .qa-filter label[for="qaf-carbon-footprint"],
#qaf-cbam:focus-visible ~ .qa-filter label[for="qaf-cbam"],
#qaf-composting:focus-visible ~ .qa-filter label[for="qaf-composting"],
#qaf-ecological-footprint:focus-visible ~ .qa-filter label[for="qaf-ecological-footprint"],
#qaf-energy-and-power:focus-visible ~ .qa-filter label[for="qaf-energy-and-power"],
#qaf-environment:focus-visible ~ .qa-filter label[for="qaf-environment"],
#qaf-epr:focus-visible ~ .qa-filter label[for="qaf-epr"],
#qaf-esg:focus-visible ~ .qa-filter label[for="qaf-esg"],
#qaf-eudr:focus-visible ~ .qa-filter label[for="qaf-eudr"],
#qaf-ghg-inventory:focus-visible ~ .qa-filter label[for="qaf-ghg-inventory"],
#qaf-global-warming:focus-visible ~ .qa-filter label[for="qaf-global-warming"],
#qaf-green-building:focus-visible ~ .qa-filter label[for="qaf-green-building"],
#qaf-green-technology:focus-visible ~ .qa-filter label[for="qaf-green-technology"],
#qaf-life-cycle-assessment:focus-visible ~ .qa-filter label[for="qaf-life-cycle-assessment"],
#qaf-pollution:focus-visible ~ .qa-filter label[for="qaf-pollution"],
#qaf-rainwater:focus-visible ~ .qa-filter label[for="qaf-rainwater"],
#qaf-recycling:focus-visible ~ .qa-filter label[for="qaf-recycling"],
#qaf-renewable-energy:focus-visible ~ .qa-filter label[for="qaf-renewable-energy"],
#qaf-solar:focus-visible ~ .qa-filter label[for="qaf-solar"],
#qaf-sustainability:focus-visible ~ .qa-filter label[for="qaf-sustainability"],
#qaf-waste:focus-visible ~ .qa-filter label[for="qaf-waste"],
#qaf-water:focus-visible ~ .qa-filter label[for="qaf-water"],
#qaf-water-footprint:focus-visible ~ .qa-filter label[for="qaf-water-footprint"]{outline:2px solid var(--gsd-green) !important;outline-offset:2px}
#qaf-brsr:checked ~ .qa-list .qa-row:not(.qa-c-brsr){display:none !important}
#qaf-carbon-footprint:checked ~ .qa-list .qa-row:not(.qa-c-carbon-footprint){display:none !important}
#qaf-cbam:checked ~ .qa-list .qa-row:not(.qa-c-cbam){display:none !important}
#qaf-composting:checked ~ .qa-list .qa-row:not(.qa-c-composting){display:none !important}
#qaf-ecological-footprint:checked ~ .qa-list .qa-row:not(.qa-c-ecological-footprint){display:none !important}
#qaf-energy-and-power:checked ~ .qa-list .qa-row:not(.qa-c-energy-and-power){display:none !important}
#qaf-environment:checked ~ .qa-list .qa-row:not(.qa-c-environment){display:none !important}
#qaf-epr:checked ~ .qa-list .qa-row:not(.qa-c-epr){display:none !important}
#qaf-esg:checked ~ .qa-list .qa-row:not(.qa-c-esg){display:none !important}
#qaf-eudr:checked ~ .qa-list .qa-row:not(.qa-c-eudr){display:none !important}
#qaf-ghg-inventory:checked ~ .qa-list .qa-row:not(.qa-c-ghg-inventory){display:none !important}
#qaf-global-warming:checked ~ .qa-list .qa-row:not(.qa-c-global-warming){display:none !important}
#qaf-green-building:checked ~ .qa-list .qa-row:not(.qa-c-green-building){display:none !important}
#qaf-green-technology:checked ~ .qa-list .qa-row:not(.qa-c-green-technology){display:none !important}
#qaf-life-cycle-assessment:checked ~ .qa-list .qa-row:not(.qa-c-life-cycle-assessment){display:none !important}
#qaf-pollution:checked ~ .qa-list .qa-row:not(.qa-c-pollution){display:none !important}
#qaf-rainwater:checked ~ .qa-list .qa-row:not(.qa-c-rainwater){display:none !important}
#qaf-recycling:checked ~ .qa-list .qa-row:not(.qa-c-recycling){display:none !important}
#qaf-renewable-energy:checked ~ .qa-list .qa-row:not(.qa-c-renewable-energy){display:none !important}
#qaf-solar:checked ~ .qa-list .qa-row:not(.qa-c-solar){display:none !important}
#qaf-sustainability:checked ~ .qa-list .qa-row:not(.qa-c-sustainability){display:none !important}
#qaf-waste:checked ~ .qa-list .qa-row:not(.qa-c-waste){display:none !important}
#qaf-water:checked ~ .qa-list .qa-row:not(.qa-c-water){display:none !important}
#qaf-water-footprint:checked ~ .qa-list .qa-row:not(.qa-c-water-footprint){display:none !important}