/* GRAVITAS - Analytical Index shared page styles
   Reused across all inner pages (About, Services, Projects, Contact…).
   Builds on gravitas.css. Body must carry class="dark b-page". */

body.b-page{background:var(--off);color:var(--text-on-dark)}
/* Nav = solid white bar with the navy logo + navy links (inner pages) */
.b-page .nav{background:#fff}
.b-page .nav .nav-inner{border-bottom:1px solid var(--line-dark)}
.b-page .nav .brand,.b-page .nav .nav-links a{color:var(--text-on-dark)}
.b-page .nav .nav-burger{color:var(--text-on-dark)}
.b-page .nav .nav-links a:hover{color:var(--sage)}
.b-page .nav .brand-logo{filter:none}
/* inner pages: navy-on-white logo reads smaller than the white-on-hero homepage logo — bump it to match */
.b-page:not(.home) .nav .brand-logo{height:56px}
@media(max-width:560px){.b-page:not(.home) .nav .brand-logo{height:44px}}
/* signal-orange CTA pill keeps white text */
.b-page .nav .nav-links a.btn-solid,.b-page .nav .nav-links a.btn-solid:hover{color:#fff}
.b-page .nav.nav-stuck{background:#fff;backdrop-filter:blur(14px)}
.b-page .nav.nav-stuck .nav-inner{border-bottom-color:var(--line-dark)}
.b-page .foot{background:var(--navy)}

.b-wrap{max-width:1440px;margin:0 auto;padding-inline:var(--gutter)}

.b-eyebrow{font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-on-dark-dim);display:flex;align-items:center;gap:14px}
.b-eyebrow .sq{width:7px;height:7px;background:var(--sage);display:inline-block;flex:none}

.b-sec{padding-block:clamp(64px,8vw,128px)}
.b-sec-sm{padding-block:clamp(44px,5vw,84px)}

/* section header: label rail + headline */
.b-shead{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,4vw,64px);align-items:start;margin-bottom:clamp(40px,5vw,72px)}
@media(max-width:820px){.b-shead{grid-template-columns:1fr;gap:18px}}
.b-shead h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.4rem,2.4vw,2.1rem);line-height:1.28;letter-spacing:-.02em}
.b-shead h2 em{font-style:normal;color:inherit}
.b-shead .note{font-family:var(--mono);font-size:.92rem;font-weight:600;line-height:1.5;color:var(--text-on-dark);letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:baseline;gap:13px}
.b-shead .note::before{content:"";width:7px;height:7px;background:var(--sage);flex:none;align-self:flex-start;position:relative;top:.34em}

.b-page em{font-style:normal;color:inherit}

/* soft neutral section (rhythm break on the off-white page) */
.b-thesis{background:var(--paper-2);color:var(--text-on-paper)}
.b-thesis .b-shead h2{color:var(--text-on-paper)}
.b-thesis .b-shead .note{color:var(--text-on-paper)}
.b-thesis .muted{color:var(--text-on-paper-dim)}
.b-thesis em{color:inherit}

/* metrics ribbon */
.b-ribbon{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
@media(max-width:760px){.b-ribbon{grid-template-columns:1fr 1fr}}
.b-ribbon .cell{padding:clamp(26px,3vw,44px) clamp(16px,2vw,32px);border-right:1px solid var(--line-dark)}
.b-ribbon .cell:last-child{border-right:0}
@media(max-width:760px){.b-ribbon .cell:nth-child(2){border-right:0}}
.b-ribbon .num{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,4vw,3.8rem);line-height:1;letter-spacing:-.03em}
.b-ribbon .num .unit{font-size:.44em;color:var(--sage);vertical-align:super;margin-left:.05em}
.b-thesis .b-ribbon .num .unit{color:var(--sage-deep)}
.b-ribbon .lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark-dim);margin-top:14px}
.b-thesis .b-ribbon .lbl{color:var(--text-on-paper-dim)}

/* three-column "why" */
.b-why{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-dark)}
@media(max-width:780px){.b-why{grid-template-columns:1fr}}
.b-why .col{padding:clamp(26px,3vw,44px);border-right:1px solid var(--line-dark)}
.b-why .col:last-child{border-right:0}
.b-why .col .big{font-family:var(--serif);font-weight:300;font-size:clamp(2.4rem,3.4vw,3.4rem);color:var(--sage);line-height:1}
.b-why .col h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;margin:18px 0 10px}
.b-why .col p{color:var(--text-on-dark-dim);font-size:.95rem}

/* nav active state */
.b-page .nav-links a.is-active{opacity:1;color:var(--sage)}

.b-page .nav.nav-stuck{background:#fff;backdrop-filter:blur(14px)}

/* ---- Connect / Partner toggle form (shared with home) ---- */
.b-contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
@media(max-width:900px){.b-contact{grid-template-columns:1fr;gap:48px}}
.b-contact-meta{list-style:none;margin-top:clamp(32px,4vw,52px);display:flex;flex-direction:column;gap:0}
.b-contact-meta li{display:flex;justify-content:space-between;gap:24px;padding-block:16px;border-top:1px solid var(--line-dark)}
.b-contact-meta li:last-child{border-bottom:1px solid var(--line-dark)}
.b-contact-meta .k{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-dim)}
.b-contact-meta .v{font-size:.98rem;text-align:right}
.b-contact-intro h2{font-family:var(--serif);font-weight:300;font-size:clamp(1.9rem,3.2vw,2.8rem);line-height:1.08;letter-spacing:-.025em;max-width:14ch}
.b-contact-intro h2 em{font-style:normal;color:inherit}

.b-form-wrap{border:1px solid var(--line-dark);background:#fff;padding:clamp(24px,3vw,40px)}
.b-toggle{position:relative;display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line-dark);padding:4px;gap:4px}
.b-toggle-pill{position:absolute;top:4px;left:4px;width:calc(50% - 4px);height:calc(100% - 8px);background:var(--sage);transition:transform .5s var(--ease)}
.b-toggle[data-mode="partner"] .b-toggle-pill{transform:translateX(calc(100% + 4px))}
.b-toggle-btn{position:relative;z-index:2;padding:.92em 1em;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-on-dark-dim);transition:color .4s var(--ease)}
.b-toggle-btn.active{color:#fff;font-weight:600}

.b-form{margin-top:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:18px}
.b-field{display:flex;flex-direction:column;gap:8px}
.b-field[hidden]{display:none}
.b-field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.b-field-row[hidden]{display:none}
@media(max-width:520px){.b-field-row{grid-template-columns:1fr}}
.b-field label{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-on-dark-dim)}
.b-field input,.b-field select,.b-field textarea{
  font-family:var(--sans);font-size:1rem;color:var(--text-on-dark);
  background:transparent;border:0;border-bottom:1px solid var(--line-dark);
  padding:11px 2px;transition:border-color .4s var(--ease);width:100%;border-radius:0;
}
.b-field textarea{resize:vertical;min-height:90px}
.b-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2398a2ab' stroke-width='1.4' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;cursor:pointer}
.b-field select option{background:var(--ink-800);color:var(--text-on-dark)}
.b-field input::placeholder,.b-field textarea::placeholder{color:var(--text-on-dark-dim);opacity:.55}
.b-field input:focus,.b-field select:focus,.b-field textarea:focus{outline:0;border-bottom-color:var(--sage)}
.b-form-foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:8px}
.req{color:var(--sage);font-size:1.1em;line-height:0}
.b-phone{display:grid;grid-template-columns:128px 1fr;gap:12px}
.b-phone select{padding-right:18px}
.b-disclaimer{font-family:var(--sans);font-size:.78rem;line-height:1.55;color:var(--text-on-dark-dim);margin-top:14px}
.b-disclaimer a{color:var(--sage);text-decoration:underline;text-underline-offset:2px}
.b-disclaimer a:hover{color:var(--text-on-dark)}
.b-form-success{font-family:var(--sans);font-size:.96rem;color:var(--sage);border-left:2px solid var(--sage);padding-left:14px;margin-top:6px}

/* ===== Type system (enforced site-wide) ===== */
/* Page hero titles: one consistent size + weight across About/Services/Projects/Contact/Calculator */
.pj-hero h1,.sv-hero h1,.ab-hero h1,.ct-hero h1,.cc-hero h1{font-weight:600!important;font-size:clamp(2.4rem,5vw,4.2rem)!important;line-height:1.05!important;letter-spacing:-.02em!important}
/* Decorative mono labels/figures stay navy — orange is reserved for buttons, arrows and active/selected states. */
.fw-node .st,.sv-row .num,.cs-block .k,.matrix-row .code,.b-why .col .big,.b-thesis .annot,.ledger .cs-val,.b-ind .cell .code,.ct-office .lab,.cc-inputs .hd .t{color:var(--text-on-dark-dim)!important}
.fw-node .st .dot{border-color:var(--text-on-dark-dim)!important}
.b-thesis .annot{border-left-color:var(--text-on-paper-dim)!important}

/* ---- Production media: <img class="slot"> / <span class="slot ph"> replace design-tool <image-slot> ---- */
.slot{display:block;width:100%;object-fit:cover;background:var(--ink-800)}
.ph{display:flex;align-items:center;justify-content:center;color:var(--text-on-dark-dim);font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;text-align:center;padding:10px;box-shadow:inset 0 0 0 1px var(--line-dark-soft)}