/* ─────────────────────────────────────────────────────────────────
   POWERUS · v2 PAGES, editorial layouts for company / media / contact
   Company, Leadership, Careers, Press, Insights, Contact.
   Pairs with site.css tokens + v2.css. Inline-token colors only.
   ───────────────────────────────────────────────────────────────── */

/* Statement hero + meta bar (About) */
.hero-x { padding-top: clamp(40px,6vh,88px); padding-bottom: 0; }
.hero-x .lbl { display: flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--fg-3); margin-bottom: clamp(28px,4vh,48px); }
.hero-x .lbl b { color: var(--char); font-weight: 500; }
.hero-x .lbl .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }
.hero-x .stmt { font-weight: 400; font-size: clamp(46px,7.6vw,128px); line-height: 0.9; letter-spacing: -0.05em; margin: 0; color: var(--char); max-width: 15ch; }
.hero-x .sub { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-top: clamp(32px,4.5vh,60px); }
.hero-x .sub .lede { max-width: 46ch; }
.metabar { display: flex; flex-wrap: wrap; gap: clamp(22px,4vw,68px); margin-top: clamp(34px,5vh,60px); padding-top: 22px; border-top: 1px solid var(--border); }
.metabar .m { display: flex; flex-direction: column; gap: 7px; }
.metabar .mk { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); }
.metabar .mv { font-size: 16px; color: var(--char); font-weight: 500; }

/* Full-bleed figure band (drop zone, intentional framing) */
.figband { width: 96%; max-width: 1900px; margin: clamp(22px,3.4vh,44px) auto 0; }
.figband image-slot { display: block; width: 100%; height: clamp(320px,46vh,520px); }

/* Stat strip (credibility) */
.statstrip { border-top: 1px solid var(--char); border-bottom: 1px solid var(--border); }
.statstrip .row { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(24px,3vw,56px); padding: clamp(30px,4vh,56px) 0; }
.statstrip .s { display: flex; flex-direction: column; gap: 12px; }
.statstrip .s .v { font-family: var(--sans); font-weight: 300; font-size: clamp(44px,6vw,88px); line-height: 0.9; letter-spacing: -0.04em; color: var(--char); }
.statstrip .s .v .u { font-family: var(--mono); font-weight: 500; font-size: 0.24em; letter-spacing: 0.14em; color: var(--fg-3); margin-left: 8px; vertical-align: middle; text-transform: uppercase; }
.statstrip .s .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
@media (max-width: 860px) { .statstrip .row { grid-template-columns: 1fr 1fr; gap: 36px 28px; } }
@media (max-width: 460px) { .statstrip .row { grid-template-columns: 1fr 1fr; } }

/* Full-width mission statement + two-column body */
.mission-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px,5vw,80px); margin-top: clamp(30px,4vh,56px); }
.mission-cols .pg-note { max-width: 48ch; }
@media (max-width: 780px) { .mission-cols { grid-template-columns: 1fr; gap: 20px; } }

/* Section intro heading (reused across editorial pages) */
.pg-lead { max-width: 30ch; }
.pg-note { font-size: clamp(17px,1.3vw,21px); line-height: 1.5; color: var(--fg-2); max-width: 60ch; margin: 0; }
.pg-note a { color: var(--ember); border-bottom: 1px solid var(--ember); }

/* Principle / value grid (borrows cap-grid feel, own spacing) */
.prin { display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--char); }
.prin.c3 { grid-template-columns: repeat(3, 1fr); }
.prin .cell { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
  padding: clamp(26px,2.4vw,40px) clamp(24px,2vw,34px) clamp(34px,4vh,52px) 0; display: flex; flex-direction: column; gap: 14px; }
.prin .cell:last-child { border-right: 0; }
.prin .cn { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ember); text-transform: uppercase; }
.prin .ct { font-family: var(--sans); font-weight: 400; font-size: clamp(22px,2vw,30px); letter-spacing: -0.028em; line-height: 1.04; margin: 0; color: var(--char); }
.prin .cd { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0; max-width: 32ch; }
.prin .cmeta { margin-top: auto; padding-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); display: flex; flex-direction: column; gap: 5px; }
/* Interior cells need left padding so content clears the divider rule.
   One block per breakpoint, all selectors at the SAME specificity, so the
   narrowest matching rule wins by source order. (Two overlapping 900px blocks
   used to leave a higher-specificity `nth-child(2n)` rule live at phone width,
   which is what produced alternating indents on a single-column grid.) */
.prin > .cell { padding-left: clamp(22px,1.9vw,32px); }
.prin:not(.c3) > .cell:nth-child(4n+1) { padding-left: 0; }
.prin.c3 > .cell:nth-child(3n+1) { padding-left: 0; }
@media (max-width: 900px) {
  .prin, .prin.c3 { grid-template-columns: 1fr 1fr; }
  .prin .cell:nth-child(2n) { border-right: 0; }
  .prin .cell { padding-right: 20px; }
  .prin > .cell:nth-child(2n) { padding-left: 22px; }
  .prin > .cell:nth-child(2n+1) { padding-left: 0; }
  .prin.c3 > .cell:nth-child(2n) { padding-left: 22px; }
  .prin.c3 > .cell:nth-child(2n+1) { padding-left: 0; }
}
@media (max-width: 560px) {
  .prin, .prin.c3 { grid-template-columns: 1fr; }
  /* Single column: every cell is a first cell. Flush left, no dividers. */
  .prin > .cell:nth-child(2n),
  .prin > .cell:nth-child(2n+1),
  .prin.c3 > .cell:nth-child(2n),
  .prin.c3 > .cell:nth-child(2n+1) {
    border-right: 0; padding-right: 0; padding-left: 0;
  }
}

/* Line iconography */
.licon { display: block; width: 28px; height: 28px; color: var(--char); opacity: 0.85; }
.licon svg { width: 100%; height: 100%; display: block; }
.cap-cell .licon, .prin .cell .licon { margin-bottom: 2px; }

/* Operating-companies / division rows */
.opco { border-top: 1px solid var(--char); }
.opco .row { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(20px,3vw,56px); align-items: baseline;
  padding: clamp(28px,3.4vh,46px) 0; border-bottom: 1px solid var(--border); }
.opco .dom { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--ember); padding-top: 8px; text-transform: uppercase; }
.opco .body { max-width: 62ch; }
.opco .t { font-family: var(--sans); font-weight: 400; font-size: clamp(26px,3vw,44px); letter-spacing: -0.03em; line-height: 1.0; margin: 0 0 12px; color: var(--char); }
.opco .d { font-size: clamp(15px,1.1vw,17px); line-height: 1.5; color: var(--fg-2); margin: 0; }
.opco .stat { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--char); white-space: nowrap; text-align: right; text-transform: uppercase; }
@media (max-width: 780px) { .opco .row { grid-template-columns: 1fr; gap: 12px; } .opco .stat { text-align: left; } }

/* Leadership grid */
.team-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(26px,2.6vw,40px) clamp(18px,1.8vw,28px); }
/* Square box, not 4:5: the taller frame left ~40% of its height empty above
   each figure. Transparent plate so the cut-out portraits sit directly on the
   page surface in both color schemes. */
.person .photo { aspect-ratio: 1 / 1; background: transparent; overflow: hidden; margin-bottom: 16px; }
.person .photo image-slot { display: block; width: 100%; height: 100%; }
.person .photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.person .pn { font-family: var(--sans); font-weight: 500; font-size: clamp(16px,1.15vw,19px); letter-spacing: -0.02em; line-height: 1.15; margin: 0; color: var(--char); text-wrap: balance; }
.person .pr { font-family: var(--mono); font-size: 10px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); margin: 7px 0 0; }
.person .pb { font-size: 12px; line-height: 1.5; color: var(--fg-2); margin: 0; text-wrap: pretty; }
@media (max-width: 1280px) { .team-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .team-grid { grid-template-columns: 1fr 1fr; } }
/* Portraits are square sources, bottom-anchored — a wider box crops the top,
   which cut the heads off. Keep 1:1 at every width. */
@media (max-width: 460px) { .team-grid { grid-template-columns: 1fr; } }
/* Cut-outs on a dark plate must not be blend-mode composited. */
.person .photo img { mix-blend-mode: normal; }

/* Press / media grid */
.media-card .mc-img { display: block; aspect-ratio: 16 / 9; background: var(--bone-3); overflow: hidden; margin: calc(-1 * clamp(26px,2.2vw,36px)) calc(-1 * clamp(26px,2.2vw,36px)) 2px; }
.media-card .mc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card .mc-img image-slot { display: block; width: 100%; height: 100%; }
.ins-card .ic-img { display: block; aspect-ratio: 16 / 9; background: var(--bone-3); overflow: hidden; }
.ins-card .ic-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ins-card .ic-img image-slot { display: block; width: 100%; height: 100%; }
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--char); border-left: 1px solid var(--border); }
.media-card { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: clamp(26px,2.2vw,36px); display: flex; flex-direction: column; gap: 18px; min-height: 260px;
  color: var(--char); transition: background 160ms ease; }
.media-card:hover { background: var(--bone-2); }
.media-card .top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.media-card .outlet { color: var(--char); font-weight: 500; }
.media-card .date { color: var(--fg-3); white-space: nowrap; }
.media-card .hl { font-family: var(--sans); font-weight: 400; font-size: clamp(19px,1.5vw,23px); line-height: 1.16; letter-spacing: -0.02em; margin: 0; color: var(--char); }
.media-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.media-card .kind { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-3); }
.media-card .more { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--char); display: inline-flex; gap: 8px; }
.media-card:hover .more { color: var(--ember); }
.media-card .more .ar { transition: transform 200ms cubic-bezier(.16,1,.3,1); }
.media-card:hover .more .ar { transform: translateX(4px); }
@media (max-width: 900px) { .media-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .media-grid { grid-template-columns: 1fr; } .media-card { min-height: 0; } }

/* Insights cards */
.ins-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,2.6vw,40px); }
.ins-card { display: flex; flex-direction: column; gap: 16px; color: var(--char); }
.ins-card .tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.ins-card .tags .sep { color: var(--stone); opacity: 0.6; }
.ins-card .it { font-family: var(--sans); font-weight: 400; font-size: clamp(22px,1.8vw,28px); line-height: 1.08; letter-spacing: -0.026em; margin: 0; }
.ins-card .ix2 { font-size: 15px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.ins-card .meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.ins-card .meta .more { color: var(--char); display: inline-flex; gap: 7px; }
.ins-card:hover .meta .more { color: var(--ember); }
.ins-card.feature { grid-column: span 3; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px,4vw,64px); align-items: center; }
.ins-card.feature .media { aspect-ratio: 16/9; background: var(--bone-3); overflow: hidden; }
.ins-card.feature .media image-slot { display: block; width: 100%; height: 100%; }
.ins-card.feature .it { font-size: clamp(30px,3.4vw,50px); letter-spacing: -0.034em; line-height: 0.98; }
@media (max-width: 900px) { .ins-grid { grid-template-columns: 1fr 1fr; } .ins-card.feature { grid-column: span 2; grid-template-columns: 1fr; } }
@media (max-width: 600px) { .ins-grid { grid-template-columns: 1fr; } .ins-card.feature { grid-column: span 1; } }

/* Contact layout + form */
.contact-grid { display: grid; grid-template-columns: 1.35fr 0.65fr; gap: clamp(40px,6vw,110px); align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,2vw,28px); }
.form .f { display: flex; flex-direction: column; gap: 9px; }
.form .f.full { grid-column: 1 / -1; }
.form label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.form label .req { color: var(--ember); }
.form input, .form select, .form textarea { font-family: var(--sans); font-size: 16px; color: var(--char);
  background: transparent; border: 0; border-bottom: 1px solid var(--char); padding: 11px 0; border-radius: 0; }
.form textarea { min-height: 120px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--ember); }
.form input::placeholder, .form textarea::placeholder { color: var(--fg-3); }
.form .submit { grid-column: 1 / -1; margin-top: 8px; }
.form button { font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bone); background: var(--char); padding: 20px 34px; transition: background 160ms ease; }
.form button:hover { background: var(--ember); }
.form-done { grid-column: 1 / -1; font-family: var(--sans); font-size: clamp(20px,1.6vw,26px); letter-spacing: -0.02em; color: var(--char); padding: 12px 0; }
.contact-info { display: flex; flex-direction: column; gap: clamp(28px,4vh,42px); }
.contact-info .blk .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 12px; }
.contact-info .blk .v { font-size: 17px; line-height: 1.55; color: var(--char); margin: 0; font-style: normal; }
.contact-info .blk .v a { color: var(--char); border-bottom: 1px solid var(--border); }
.contact-info .blk .v a:hover { color: var(--ember); border-color: var(--ember); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; gap: clamp(44px,6vh,64px); } }
@media (max-width: 520px) { .form { grid-template-columns: 1fr; } }

/* Mission hero band, shares the nav gutter (40 / 24 / 18) */
.heroband-wrap { width: 100%; max-width: 1980px; margin: clamp(6px,1.4vw,20px) auto 0; padding: 0 40px; }
.herogutter { width: 100%; max-width: 1980px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; }
@media (max-width: 900px) { .heroband-wrap { padding: 0 24px; } .herogutter { padding-left: 24px; padding-right: 24px; } }
@media (max-width: 420px) { .heroband-wrap { padding: 0 18px; } .herogutter { padding-left: 18px; padding-right: 18px; } }

/* Opco rows with a product render */
.opco.figrow .row { grid-template-columns: clamp(96px,10vw,168px) 1fr auto; }
.opco.figrow .fig { display: grid; place-items: center; height: clamp(84px,8.5vw,132px); align-self: center; }
.opco.figrow .fig img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; }
@media (max-width: 780px) { .opco.figrow .row { grid-template-columns: 1fr; } .opco.figrow .fig { justify-items: start; height: 96px; } }

/* Fixed label column so .opco row titles align regardless of label length */
.opco .row { grid-template-columns: clamp(92px,9vw,150px) 1fr auto; }
.opco.figrow .row { grid-template-columns: clamp(96px,10vw,168px) 1fr auto; }
@media (max-width: 780px) { .opco .row, .opco.figrow .row { grid-template-columns: 1fr; } }

/* Product grid (solutions category pages) */
.pgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.pgrid .pcard { display: flex; flex-direction: column; text-decoration: none; color: var(--char);
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  padding: clamp(22px,2vw,32px); transition: background 200ms ease; }
.pgrid .pcard:hover { background: rgba(22,22,22,0.02); }
.pgrid .pmedia { display: flex; align-items: center; justify-content: center; height: clamp(150px,15vw,220px); margin-bottom: clamp(18px,2vh,26px); overflow: hidden; }
.pgrid .pmedia img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  mix-blend-mode: multiply; }
.pgrid .pmedia image-slot { display: block; width: 100%; height: 100%; }
.pgrid .pn { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ember); margin-bottom: 12px; }
.pgrid .pt { font-family: var(--sans); font-weight: 400; font-size: clamp(22px,2vw,30px); letter-spacing: -0.03em; line-height: 1.04; margin: 0 0 10px; }
.pgrid .pd { font-size: 14px; line-height: 1.5; color: var(--fg-2); margin: 0 0 18px; max-width: 34ch; }
.pgrid .pfoot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.pgrid .pcard:hover .pfoot { color: var(--ember); }
@media (max-width: 980px) { .pgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .pgrid { grid-template-columns: 1fr; } }

.pgrid .pcard.photo .pmedia { margin: calc(-1 * clamp(22px,2vw,32px)) calc(-1 * clamp(22px,2vw,32px)) clamp(18px,2vh,26px); height: clamp(170px,16vw,240px); overflow: hidden; }
.pgrid .pcard.photo .pmedia img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }

/* Site-wide: no orphaned words on headline breaks */
h1, h2, h3, h4, .dh1, .dh2, .dh3, .pdp-name, .pdp-lede, .sec-head, .hero h1, .page-hero h1, blockquote, figcaption, .lede, .pg-note, .t, .k, .cta, .card h3, .pc-h { text-wrap: balance; }
p, li, .d, .body p { text-wrap: pretty; }

/* Mono type is always uppercase */
.spectable .k, .spectable .v, .pvar-specs .r .k, .procure-grid .pr .k, .combat-stats .cs .l, .pp-tag, .kick, .chip, .pvar-status, .pvar-price .per, .prod-cta .eyebrow, .prod-cta .meta, .pdp-fam-head .kick, .pdp-creds .cred, .ix, .stat, .dom { text-transform: uppercase; }

/* Line icons in principle / value cells */
.cell .cico { display:block; width:28px; height:28px; margin-bottom:16px; color:var(--fg-3); }
.cell .cico svg { width:100%; height:100%; display:block; }
.cell .cico svg * { vector-effect:non-scaling-stroke; }
.cell:hover .cico { color:var(--fg); }

/* Article page */
.art-head { max-width: 1080px; }
.art-tags { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); margin-bottom: clamp(20px,3vh,34px); }
.art-tags .sep { color: var(--fg-3); }
.art-title { font-family: var(--sans); font-weight: 400; font-size: clamp(38px,5.4vw,84px); line-height: 0.96; letter-spacing: -0.04em; margin: 0; color: var(--char); text-wrap: balance; }
.art-deck { font-size: clamp(17px,1.5vw,22px); line-height: 1.45; color: var(--fg-2); margin: clamp(22px,3vh,34px) 0 0; max-width: 62ch; text-wrap: pretty; }
.art-byline { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: baseline; margin-top: clamp(30px,4vh,48px); padding-top: 18px; border-top: 1px solid var(--char);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-2); }
.art-byline b { font-weight: 400; color: var(--char); }
.art-hero { margin-top: clamp(32px,5vh,64px); aspect-ratio: 16 / 7; background: var(--bone-3); overflow: hidden; }
.art-hero img, .art-hero image-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-body { max-width: 68ch; margin-top: clamp(40px,6vh,80px); }
.art-body p { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; color: var(--char); margin: 0 0 1.35em; text-wrap: pretty; }
.art-body p.lead { font-size: clamp(19px,1.6vw,24px); line-height: 1.45; color: var(--char); }
.art-body h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(24px,2.4vw,34px); line-height: 1.06; letter-spacing: -0.03em;
  margin: clamp(38px,5vh,64px) 0 0.6em; color: var(--char); text-wrap: balance; }
.art-body ul { margin: 0 0 1.35em; padding-left: 1.1em; }
.art-body li { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; margin-bottom: 0.5em; color: var(--char); }
.art-body a { color: var(--ember); }
.art-pull { margin: clamp(40px,6vh,72px) 0; padding: clamp(26px,3.5vh,40px) 0; border-top: 1px solid var(--char); border-bottom: 1px solid var(--char); }
.art-pull p { font-family: var(--sans); font-size: clamp(23px,2.4vw,34px); line-height: 1.14; letter-spacing: -0.028em; color: var(--char); margin: 0; text-wrap: balance; }
.art-figure { margin: clamp(40px,6vh,72px) 0; }
.art-figure .fm { aspect-ratio: 16 / 9; background: var(--bone-3); overflow: hidden; }
.art-figure .fm img, .art-figure .fm image-slot { display: block; width: 100%; height: 100%; object-fit: cover; }
.art-figure figcaption { margin-top: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); }
.art-next { border-top: 1px solid var(--char); padding-top: 22px; }
@media (max-width: 700px) { .art-hero { aspect-ratio: 4 / 3; } }

.ix.crumb { display: block; }
.ix.crumb a { color: var(--fg-2); text-decoration: none; }
.ix.crumb a:hover { color: var(--ember); }

a.ins-card { text-decoration: none; }
a.ins-card .it, a.ins-card .ix2 { color: inherit; }

.art-body .stand { font-weight: 500; color: var(--char); }
.art-body .src { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 1.9em; }
.art-body h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(19px,1.7vw,24px); line-height: 1.14; letter-spacing: -0.022em; margin: clamp(28px,3.6vh,44px) 0 0.6em; color: var(--char); }

/* Partner logo row */
.partner-row { display: grid; grid-template-columns: repeat(7, 1fr); align-items: center; gap: clamp(20px,3vw,52px);
  border-top: 1px solid var(--char); padding-top: clamp(28px,3.5vh,48px); }
.partner-row .pl { display: grid; place-items: center; }
.partner-row .pl img { max-width: 100%; max-height: 52px; width: auto; height: auto; display: block;
  filter: grayscale(1); opacity: 0.62; transition: opacity 200ms ease; }
/* The logo files are dark artwork on transparent PNGs, so on the dark plate they
   are near-invisible. Inverting after grayscale renders them light — exact for
   one-color marks, and it avoids shipping a second set of files. */
:root[data-theme="dark"] .partner-row .pl img {
  filter: grayscale(1) invert(1) brightness(0.96); opacity: 0.7; }
.partner-row .pl:hover img { opacity: 1; }
@media (max-width: 900px) { .partner-row { grid-template-columns: repeat(4, 1fr); gap: clamp(20px,4vw,36px); row-gap: clamp(28px,4vh,44px); } }
@media (max-width: 560px) { .partner-row { grid-template-columns: repeat(2, 1fr); } .partner-row .pl img { max-height: 44px; } }

/* Numerals removed from icon tiles */
.cell .cn, .cap-cell .cn { display: none; }


/* ─── Mission stack (Guardian lead + layer grid) ─── */
.stack .stk-lead { border: 1px solid var(--border); padding: clamp(24px,2.8vw,42px);
  margin-bottom: clamp(16px,1.6vw,24px); }
.stk-lead-top { display: grid; grid-template-columns: minmax(0,1fr) clamp(180px,22%,300px);
  gap: clamp(24px,3vw,56px); align-items: start; }
.stk-lead-fig { display: grid; place-items: center; }
.stk-lead-fig img { width: 100%; height: auto; display: block; }
.stk-name { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.stk-h { font-family: var(--sans); font-weight: 400; font-size: clamp(24px,2.2vw,34px);
  letter-spacing: -0.03em; line-height: 1.05; margin: 0; color: var(--char); }
.stk-h a { color: inherit; text-decoration: none; transition: color 140ms; }
.stk-h a:hover { color: var(--ember); }
.stk-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); padding: 5px 9px; white-space: nowrap; }
.stk-tag.testing { color: var(--fg-2); border-color: var(--border); }
.stk-sub { font-size: clamp(15px,1.15vw,17px); font-weight: 500; color: var(--char);
  margin: 12px 0 0; }
.stk-d { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 12px 0 0;
  max-width: 68ch; text-wrap: pretty; }
.stk-note { font-size: 14.5px; line-height: 1.55; color: var(--fg-2);
  margin: clamp(24px,3vh,36px) 0 0; padding-top: clamp(20px,2.4vh,28px);
  border-top: 1px solid var(--border); max-width: 96ch; text-wrap: pretty; }
.stk-note b { color: var(--char); font-weight: 500; }
.stk-gens { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.4vw,20px);
  margin-top: clamp(20px,2.4vh,30px); }
.stk-gens .gen { border: 1px solid var(--border); padding: clamp(18px,1.8vw,26px); }
.gen-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.gen-h { font-family: var(--sans); font-weight: 500; font-size: clamp(17px,1.3vw,20px);
  letter-spacing: -0.02em; margin: 0; color: var(--char); }
.gen-tag { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember); border: 1px solid var(--ember); padding: 4px 7px; white-space: nowrap; }
.gen-tag.testing { color: var(--fg-3); border-color: var(--border); }
.gen-fig { font-family: var(--mono); font-size: clamp(19px,1.7vw,25px); letter-spacing: 0.01em;
  text-transform: uppercase; color: var(--ember); margin: clamp(16px,2vh,22px) 0 0; }
.gen-figl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-3); margin: 6px 0 0; }
.gen-mode { font-size: 14px; font-weight: 500; color: var(--char); line-height: 1.4;
  margin: clamp(16px,2vh,20px) 0 0; padding-top: clamp(14px,1.6vh,18px);
  border-top: 1px solid var(--border); }
.gen-d { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin: 10px 0 0; text-wrap: pretty; }
.stk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px,1.4vw,20px); }
.stk-grid .stk-cell { border: 1px solid var(--border); padding: clamp(22px,2.2vw,32px); }
.stk-grid .stk-cell .stk-h { font-size: clamp(20px,1.7vw,25px); }
@media (max-width: 980px) {
  .stk-lead-top { grid-template-columns: 1fr; }
  .stk-lead-fig { max-width: 240px; }
  .stk-gens, .stk-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .stk-gens, .stk-grid { grid-template-columns: 1fr; }
}


/* ─── Load more (live media) ─── */
.load-more { display: block; margin: clamp(28px,4vh,52px) auto 0; appearance: none; cursor: pointer;
  background: none; border: 1px solid var(--char); color: var(--char);
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 16px 30px; transition: background 180ms, color 180ms; }
.load-more:hover { background: var(--char); color: var(--bone); }
.load-more[disabled] { opacity: 0.5; cursor: default; }
.load-more[disabled]:hover { background: none; color: var(--char); }


/* Advisor cards carry a bio; executives don't */
.person:has(.pb) .pr { margin-bottom: 10px; }


/* ═══ Mobile pass (Aug 7) ═══════════════════════════════════════════ */

/* Mission hero band: the bottom scrim exists to seat caption text, but the
   mission bands carry no caption — the headline sits above the image. On a
   phone the dark wash just muddies the bottom third of the photo. */
@media (max-width: 760px) {
  .band .scrim {
    background: linear-gradient(180deg, rgba(8,6,4,0.26) 0%, rgba(8,6,4,0.04) 38%, rgba(8,6,4,0) 100%);
  }
}

/* Mission page headline: scale like a PDP product name — near the full
   measure, so short names ("Defense.") fill the line and long ones wrap. */
@media (max-width: 900px) {
  .phead .dh1 { font-size: clamp(58px, 19vw, 170px); line-height: 0.88;
    letter-spacing: -0.055em; }
}
@media (max-width: 420px) {
  .phead .dh1 { font-size: clamp(52px, 18vw, 120px); }
}

/* Article hero matches the 16/9 of the cards on the /insights index, so a
   post's image is not re-cropped between the listing and the article. */
@media (max-width: 700px) {
  .art-hero { aspect-ratio: 16 / 9; }
}



/* ─── Mission product tiles ───────────────────────────────────────────
   Replaces the old figrow layout on mission pages. That put the product render
   in a fixed left column with mix-blend-mode: multiply, which erased it on the
   dark page and, once the column collapsed on a phone, left the ghost sitting
   behind the copy. A bordered tile with the render in its own box cannot
   overlap, and no blend mode means nothing disappears. */
.prodgrid .prodcell { display: flex; flex-direction: column; text-decoration: none;
  color: var(--char); transition: border-color 160ms ease; }
.prodgrid .prodcell:hover { border-color: var(--char); }
/* These are PDP hero photographs, not transparent renders: they fill the top of
   the tile as a cropped band. The old centred-render box left the artwork
   floating, and on a phone it overlapped the copy. Negative margins pull the
   band out to the tile's border. */
.prodcell-fig { display: block; overflow: hidden; aspect-ratio: 16 / 10;
  margin: calc(-1 * clamp(22px,2.2vw,32px)) calc(-1 * clamp(22px,2.2vw,32px)) clamp(20px,2.4vh,28px); }
.prodcell-fig img { width: 100%; height: 100%; object-fit: cover; display: block;
  mix-blend-mode: normal; transform: scale(1.001);
  transition: transform 620ms cubic-bezier(.16,1,.3,1); }
.prodgrid .prodcell:hover .prodcell-fig img { transform: scale(1.04); }
.prodgrid .prodcell .stk-sub { color: var(--ember); font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.prodgrid .prodcell .stk-d { margin-top: 10px; }

/* Line icons for stack cells with no render (Radar, Cradle, xNav, Training…),
   so a text-only tile still carries a mark. Same 24-grid, square-cap language
   as the PDP capability icons. */
.stk-ic { display: block; color: var(--fg-3); margin-bottom: clamp(16px,1.8vh,22px);
  transition: color 160ms ease; }
.stk-ic svg { width: 30px; height: 30px; display: block; }
.stk-cell:hover .stk-ic { color: var(--ember); }

@media (max-width: 620px) {
  .prodcell-fig { aspect-ratio: 16 / 9; }
}


/* ─── Legal pages (Terms, Privacy) ────────────────────────────────────
   Numbered sections in the site's spec-table register rather than a wall of
   prose: the number sits in its own column, hairline-separated, so a reader can
   scan to a clause. Measure is capped at 74ch — legal text is the one place on
   the site where line length matters more than filling the grid. */
.legal-date { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-3); margin: 14px 0 0; }
.legal-date b { color: var(--char); font-weight: 500; }

.legal { border-top: 1px solid var(--border); }
.legal-s { display: grid; grid-template-columns: 64px minmax(0,1fr);
  gap: clamp(18px,3vw,44px); align-items: start;
  padding: clamp(26px,3.4vh,40px) 0; border-bottom: 1px solid var(--border); }
.legal-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  color: var(--fg-3); padding-top: 5px; }
.legal-b { max-width: 74ch; }
.legal-b h2 { font-family: var(--mono); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--char);
  margin: 0 0 14px; }
.legal-b p { font-size: 15px; line-height: 1.6; color: var(--fg-2);
  margin: 0 0 12px; text-wrap: pretty; }
.legal-b p:last-child { margin-bottom: 0; }
/* The source sets these clauses in full caps. Full caps at length is genuinely
   hard to read, so the emphasis is carried by a rule and a tighter colour
   instead, and the text stays sentence case. */
.legal-b .legal-caps { border-left: 2px solid var(--border); padding-left: 16px;
  color: var(--fg-2); font-size: 14px; }

.legal-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.legal-list li { position: relative; padding-left: 18px; font-size: 15px;
  line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.legal-list li::before { content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 1px; background: var(--fg-3); }
/* Definition-style items lead with a mono term on its own line. */
.legal-list.defs li b { display: block; font-family: var(--mono); font-size: 11px;
  font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--char); margin-bottom: 5px; }

.legal-contact { margin-top: 4px; }
.legal-contact .lc-name { color: var(--char); font-weight: 500; margin-bottom: 6px; }
.legal-contact .lc-links { font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.06em; margin-top: 10px; }
.legal-contact .lc-links a { color: var(--char); text-decoration: none;
  border-bottom: 1px solid var(--border); transition: color 140ms, border-color 140ms; }
.legal-contact .lc-links a:hover { color: var(--ember); border-color: var(--ember); }
.legal-contact .lc-links .sep { color: var(--fg-3); margin: 0 10px; }

@media (max-width: 640px) {
  .legal-s { grid-template-columns: 1fr; gap: 10px; }
  .legal-n { padding-top: 0; }
}


/* ═══ PROTECT: critical-infrastructure landing pages ═══════════════════
   A conversion surface rather than an editorial page, so it adds a sticky
   section nav, a sector index, a two-column cost comparison, and an FAQ.
   Everything else reuses the existing page vocabulary (statstrip, prin,
   stk-grid, closer-dark) so these read as the same site. */

/* Sticky in-page nav. Sits under the main bar; --nav-h is set by v2-chrome. */
.pnav { position: sticky; top: var(--nav-h, 72px); z-index: 40;
  background: var(--bone); border-bottom: 1px solid var(--border); }
.pnav .in { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 13px; padding-bottom: 13px; }
.pnav .links { display: flex; gap: clamp(16px,2.2vw,34px); }
.pnav .links a { font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3);
  text-decoration: none; transition: color 140ms ease; white-space: nowrap; }
.pnav .links a:hover { color: var(--char); }
.pnav .cta { font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  color: var(--char); border: 1px solid var(--char); padding: 9px 16px;
  white-space: nowrap; transition: background-color 160ms, color 160ms; }
.pnav .cta:hover { background: var(--ember); border-color: var(--ember); color: var(--bone); }
@media (max-width: 760px) {
  .pnav .links { display: none; }
  .pnav .in { justify-content: flex-end; }
}

/* Hero action row */
.pacts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(26px,3.4vh,40px); }
.pacts a { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 15px 24px; transition: background-color 160ms, color 160ms, border-color 160ms; }
.pacts .primary { background: var(--char); color: var(--bone); border: 1px solid var(--char); }
.pacts .primary:hover { background: var(--ember); border-color: var(--ember); }
.pacts .ghost { color: var(--char); border: 1px solid var(--border); }
.pacts .ghost:hover { border-color: var(--char); }
.pdisc { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); margin: 16px 0 0; }

/* Sector index. Photo tiles, same treatment as the homepage product grid. */
.secgrid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr));
  gap: clamp(8px,0.9vw,14px); margin-top: clamp(30px,4vh,52px); }
.seccard { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden;
  text-decoration: none; color: var(--on-media); background: var(--basalt); }
.seccard img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; transform: scale(1.001);
  transition: transform 620ms cubic-bezier(.16,1,.3,1); }
.seccard:hover img { transform: scale(1.05); }
.seccard::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,6,4,0.84) 0%, rgba(8,6,4,0.40) 42%,
    rgba(8,6,4,0.28) 100%); }
.seccard .b { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 2; }
.seccard .n { display: block; font-family: var(--sans); font-weight: 400;
  font-size: clamp(16px,1.25vw,20px); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--on-media); }
.seccard .d { display: block; margin-top: 6px; font-family: var(--mono);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--on-media-2); line-height: 1.4; }
@media (max-width: 1100px) { .secgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 680px) { .secgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Pull quote beside the threat image */
.pullq { border-left: 3px solid var(--ember); padding-left: clamp(16px,2vw,24px);
  margin: clamp(24px,3vh,36px) 0 0; }
.pullq .f { display: block; font-family: var(--sans); font-weight: 300;
  font-size: clamp(30px,3.4vw,52px); line-height: 0.95; letter-spacing: -0.04em;
  color: var(--char); }
.pullq .t { display: block; margin-top: 12px; font-size: 14.5px; line-height: 1.5;
  color: var(--fg-2); max-width: 46ch; text-wrap: pretty; }

/* Cost comparison. Two columns, the second on an inverted plate. */
.costcols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px,1.6vw,24px);
  margin-top: clamp(30px,4vh,52px); }
.costcol { border: 1px solid var(--border); padding: clamp(24px,2.4vw,36px); }
.costcol.win { background: var(--char); border-color: var(--char); }
.costcol h3 { font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); margin: 0 0 18px; }
.costcol.win h3 { color: var(--on-inv-2); }
.costcol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.costcol li { position: relative; padding-left: 20px; font-size: 15.5px;
  line-height: 1.5; color: var(--fg-2); text-wrap: pretty; }
.costcol.win li { color: var(--on-inv); }
.costcol li::before { content: ""; position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 1px; background: var(--fg-3); }
.costcol.win li::before { background: var(--ember); }
.costnote { font-size: clamp(16px,1.2vw,19px); line-height: 1.5; color: var(--fg-2);
  max-width: 66ch; margin: clamp(24px,3vh,36px) 0 0; text-wrap: pretty; }
@media (max-width: 760px) { .costcols { grid-template-columns: 1fr; } }

/* Mid-page CTA band */
.midcta { background: var(--char); color: var(--on-inv-hi);
  padding: clamp(34px,4.5vh,60px) clamp(24px,3vw,52px);
  margin-top: clamp(40px,6vh,80px);
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: clamp(20px,3vw,44px);
  align-items: center; }
.midcta h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(24px,2.4vw,38px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0; color: var(--on-inv-hi); }
.midcta p { font-size: 15px; line-height: 1.5; color: var(--on-inv-2);
  margin: 12px 0 0; max-width: 58ch; text-wrap: pretty; }
.midcta a { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  background: var(--bone); color: var(--char); padding: 15px 24px; white-space: nowrap;
  transition: background-color 160ms, color 160ms; }
.midcta a:hover { background: var(--ember); color: var(--bone); }
@media (max-width: 760px) { .midcta { grid-template-columns: 1fr; } }

/* FAQ. Native details/summary so it works with no JS. */
.faq { border-top: 1px solid var(--char); margin-top: clamp(30px,4vh,52px); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary { display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; padding: clamp(20px,2.6vh,30px) 0; cursor: pointer; list-style: none;
  font-family: var(--sans); font-weight: 400; font-size: clamp(18px,1.6vw,25px);
  letter-spacing: -0.025em; line-height: 1.2; color: var(--char); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); font-size: 18px;
  color: var(--fg-3); flex: none; transition: transform 240ms ease, color 160ms; }
.faq details[open] summary::after { content: "\2212"; color: var(--ember); }
.faq summary:hover { color: var(--ember); }
.faq .a { padding: 0 0 clamp(22px,2.8vh,32px); max-width: 76ch; }
.faq .a p { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 10px;
  text-wrap: pretty; }
.faq .a p:last-child { margin-bottom: 0; }

/* Cross-links to the other sectors */
.xsec { border-top: 1px solid var(--border); padding-top: clamp(30px,4vh,52px);
  margin-top: clamp(40px,6vh,80px); }
.xsec .row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(20px,2.6vh,30px); }
.xsec .row a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; text-decoration: none; color: var(--char);
  border: 1px solid var(--border); padding: 10px 14px;
  transition: border-color 160ms, color 160ms; }
.xsec .row a:hover { border-color: var(--ember); color: var(--ember); }
.xsec .all { display: inline-block; margin-top: clamp(20px,2.6vh,30px);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--char); text-decoration: none;
  border-bottom: 1px solid var(--border); }
.xsec .all:hover { color: var(--ember); border-color: var(--ember); }

/* Assessment form */
.aform { display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
  gap: clamp(18px,2vw,28px); margin-top: clamp(30px,4vh,52px); }
.aform .f { display: flex; flex-direction: column; gap: 9px; }
.aform .f.full { grid-column: 1 / -1; }
.aform label { font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-3); }
.aform input, .aform select, .aform textarea {
  font-family: var(--sans); font-size: 15px; color: var(--char);
  background: transparent; border: 0; border-bottom: 1px solid var(--border);
  padding: 11px 0; border-radius: 0; appearance: none;
  transition: border-color 160ms ease; }
.aform select { background-image: none; }
.aform textarea { min-height: 110px; resize: vertical; line-height: 1.5; }
.aform input:focus, .aform select:focus, .aform textarea:focus {
  outline: none; border-bottom-color: var(--ember); }
.aform input::placeholder, .aform textarea::placeholder { color: var(--fg-3); }
.aform .sub { grid-column: 1 / -1; display: flex; flex-wrap: wrap;
  align-items: center; gap: 18px; margin-top: clamp(10px,1.4vh,18px); }
.aform button { font-family: var(--mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
  background: var(--char); color: var(--bone); border: 1px solid var(--char);
  padding: 15px 28px; transition: background-color 160ms, border-color 160ms; }
.aform button:hover { background: var(--ember); border-color: var(--ember); }
@media (max-width: 680px) { .aform { grid-template-columns: 1fr; } }


/* ═══ PROTECT: conversion layer ════════════════════════════════════════
   These are unlinked paid-campaign landing pages, so they are built to a
   different brief than the rest of the site: the offer sits above the fold,
   lead capture is inline rather than a page away, there is one primary action
   per screen, and the site nav is replaced with a minimal header so traffic
   does not leak out of the funnel. */

/* Minimal landing header. No mega nav: on a campaign page every nav item is a
   way to leave without converting. */
.lnav { border-bottom: 1px solid var(--hairline); }
.lnav .in { display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding-top: 16px; padding-bottom: 16px; }
.lnav .brand img { height: 26px; width: auto; display: block;
  filter: invert(1) sepia(0.16) saturate(0.55) brightness(1.02); }
.lnav .r { display: flex; align-items: center; gap: clamp(14px,2vw,26px); }
.lnav .ph { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--fg-2); text-decoration: none; white-space: nowrap; }
.lnav .ph:hover { color: var(--char); }
@media (max-width: 620px) { .lnav .ph { display: none; } }

/* ── Hero: photo as ground, offer on top, form in the fold ── */
.phero { position: relative; overflow: hidden; min-height: clamp(560px,86vh,860px);
  display: flex; align-items: flex-end; background: var(--basalt); }
.phero > picture { position: absolute; inset: 0; display: block; }
.phero > picture > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* Heavy scrim: this carries display type, a paragraph, and form labels, so it
   needs far more coverage than an editorial band. */
.phero::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, rgba(8,6,4,0.94) 0%, rgba(8,6,4,0.82) 46%,
    rgba(8,6,4,0.46) 78%, rgba(8,6,4,0.36) 100%); }
.phero-in { position: relative; z-index: 2; width: 100%;
  padding-top: clamp(48px,9vh,110px); padding-bottom: clamp(34px,5vh,60px); }
.phero-grid { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr);
  gap: clamp(28px,4vw,72px); align-items: end; }
.phero .eyebrow { display: flex; align-items: center; gap: 11px;
  font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--on-media-2); margin-bottom: clamp(18px,2.4vh,28px); }
.phero .eyebrow .dot { width: 6px; height: 6px; background: var(--ember); flex: none; }
.phero h1 { font-family: var(--sans); font-weight: 300;
  font-size: clamp(38px,5.2vw,82px); line-height: 0.94; letter-spacing: -0.045em;
  margin: 0; color: var(--on-media); text-wrap: balance; }
.phero .sub { font-size: clamp(16px,1.3vw,20px); line-height: 1.5;
  color: var(--on-media-2); margin: clamp(20px,2.6vh,30px) 0 0; max-width: 54ch;
  text-wrap: pretty; }

/* Inline capture. Two fields: on paid traffic every extra field costs
   completions, and the long-form version lives on the assessment page. */
.pform { background: rgba(10,9,8,0.72); border: 1px solid rgba(253,250,243,0.18);
  padding: clamp(22px,2.4vw,30px); backdrop-filter: blur(6px); }
.pform h2 { font-family: var(--sans); font-weight: 400; font-size: clamp(19px,1.6vw,24px);
  line-height: 1.15; letter-spacing: -0.025em; margin: 0; color: var(--on-media); }
.pform .note { font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--on-media-2); margin: 10px 0 0; }
.pform .fields { display: grid; gap: 12px; margin-top: clamp(18px,2.2vh,24px); }
.pform input, .pform select { width: 100%; font-family: var(--sans); font-size: 15px;
  color: var(--on-media); background: rgba(253,250,243,0.06);
  border: 1px solid rgba(253,250,243,0.22); padding: 13px 14px;
  border-radius: 0; appearance: none; transition: border-color 160ms ease; }
.pform input::placeholder { color: rgba(253,250,243,0.5); }
.pform input:focus, .pform select:focus { outline: none; border-color: var(--ember); }
.pform select option { background: #121211; color: #FDFAF3; }
.pform button { width: 100%; margin-top: 14px; cursor: pointer;
  font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; background: var(--ember); color: var(--bone);
  border: 1px solid var(--ember); padding: 16px 20px;
  transition: background-color 160ms, border-color 160ms; }
.pform button:hover { background: var(--bone); border-color: var(--bone); color: var(--char); }
.pform .alt { display: block; margin-top: 14px; text-align: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--on-media-2); text-decoration: none; }
.pform .alt:hover { color: var(--on-media); }
@media (max-width: 900px) {
  .phero-grid { grid-template-columns: 1fr; gap: clamp(28px,4vh,44px); }
  .phero { min-height: 0; }
}

/* Trust bar. Directly under the fold, because proof that arrives after 4000px
   of scroll does no work on cold traffic. */
.tbar { border-bottom: 1px solid var(--border); background: var(--bone-2); }
.tbar .in { display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(14px,2.4vw,40px);
  padding-top: clamp(14px,2vh,20px); padding-bottom: clamp(14px,2vh,20px); }
.tbar .t { display: flex; align-items: baseline; gap: 9px; font-family: var(--mono);
  font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.tbar .t b { font-family: var(--sans); font-weight: 500; font-size: 14px;
  letter-spacing: -0.01em; color: var(--char); }

/* What happens next. Reduces form anxiety by naming the steps. */
.next3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(14px,1.6vw,24px); margin-top: clamp(26px,3.4vh,44px); }
.next3 .n { border-top: 2px solid var(--ember); padding-top: clamp(16px,2vh,22px); }
.next3 .n .s { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); }
.next3 .n h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(16px,1.3vw,20px);
  letter-spacing: -0.02em; margin: 10px 0 0; color: var(--char); }
.next3 .n p { font-size: 14.5px; line-height: 1.5; color: var(--fg-2); margin: 8px 0 0;
  text-wrap: pretty; }
@media (max-width: 760px) { .next3 { grid-template-columns: 1fr; } }

/* Closing block: a form, not a link. The last section on a landing page is the
   second-best converting position after the hero. */
.pclose { background: var(--char); color: var(--on-inv-hi);
  padding: clamp(48px,8vh,110px) 0; margin-top: clamp(48px,7vh,96px); }
.pclose-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,0.8fr);
  gap: clamp(28px,4vw,72px); align-items: start; }
.pclose h2 { font-family: var(--sans); font-weight: 300; font-size: clamp(32px,4.4vw,64px);
  line-height: 0.95; letter-spacing: -0.045em; margin: 0; color: var(--on-inv-hi);
  text-wrap: balance; }
.pclose .sub { font-size: clamp(15px,1.2vw,18px); line-height: 1.55;
  color: var(--on-inv-2); margin: clamp(18px,2.4vh,28px) 0 0; max-width: 52ch;
  text-wrap: pretty; }
.pclose .pform { background: rgba(253,250,243,0.05); }
@media (max-width: 900px) { .pclose-grid { grid-template-columns: 1fr; } }

/* Mobile sticky action. The page is long; the offer should never be more than a
   thumb away. */
.pstick { display: none; }
@media (max-width: 760px) {
  .pstick { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1003;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--bone); border-top: 1px solid var(--hairline); }
  .pstick a { display: flex; align-items: center; justify-content: center;
    min-height: 52px; background: var(--ember); color: var(--bone);
    font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
    text-transform: uppercase; text-decoration: none; }
  body.protect-lp { padding-bottom: 86px; }
}

/* Sticky section nav sits at the very top on these pages: the landing header
   scrolls away rather than being pinned, so there is no offset to clear. */
.pnav { top: 0; }


/* The ~89% figure carries a marker wherever it appears, so the trust bar needs
   its own footnote rather than relying on the one in the record section far
   below it. Full-basis flex item, so it drops to its own line under the row. */
.tbar .in .fn { flex: 0 0 100%; margin: 4px 0 0;
  font-family: var(--mono); font-size: 9.5px; line-height: 1.5;
  letter-spacing: 0.05em; color: var(--fg-3); max-width: 92ch; }


/* Threat figure. The number used to sit on its own line beneath the image,
   which spent ~150px of scroll on one statistic. It now overlays the photo as a
   data callout, so the image carries the proof instead of merely illustrating
   it, and the section is shorter. */
.tfig { position: relative; margin: clamp(34px,4.5vh,64px) 0 0;
  height: clamp(380px,54vh,580px); overflow: hidden; background: var(--basalt); }
.tfig > picture { position: absolute; inset: 0; display: block; }
.tfig > picture > img { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; }
/* Corner-weighted, so the card is legible without flattening the whole frame. */
.tfig::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top right, rgba(8,6,4,0.92) 0%,
    rgba(8,6,4,0.62) 34%, rgba(8,6,4,0.10) 66%, rgba(8,6,4,0) 100%); }
.tfig-card { position: absolute; left: clamp(20px,3vw,44px); bottom: clamp(20px,3vw,44px);
  right: clamp(20px,3vw,44px); max-width: 34ch; z-index: 2; }
.tfig-card .f { display: block; font-family: var(--sans); font-weight: 300;
  font-size: clamp(34px,4.4vw,68px); line-height: 0.92; letter-spacing: -0.045em;
  color: var(--on-media); }
.tfig-card .t { display: block; margin-top: 14px; padding-top: 14px;
  border-top: 2px solid var(--ember);
  font-size: clamp(14px,1.05vw,16px); line-height: 1.5; color: var(--on-media-2);
  text-wrap: pretty; }
@media (max-width: 760px) {
  .tfig { height: clamp(340px,60vh,460px); }
  .tfig-card { max-width: none; }
}


/* Failure-mode cells lead with an icon: four dense paragraphs in a row read as
   a wall, and the mark gives each one an entry point. Sits between the number
   and the heading, matching the mission-page cell rhythm. */
/* Size the CONTAINER, not the svg: .licon is a fixed 28px box, so setting the
   child to 30px overflowed it and clipped the mark. */
.protect-lp .prin .cell .licon { display: block; width: 32px; height: 32px;
  color: var(--fg-3); opacity: 1; margin: 2px 0 -2px; transition: color 160ms ease; }
.protect-lp .prin .cell .licon svg { width: 100%; height: 100%; display: block;
  overflow: visible; }
.protect-lp .prin .cell:hover .licon { color: var(--ember); }


/* ═══ PROTECT: density pass ════════════════════════════════════════════
   The brand display scale (.dh2 up to 104px) is right for the marketing site
   and wrong here: on a campaign page each oversized header pushes the next
   proof point below the fold and slows scanning. Scoped to .protect-lp so the
   rest of the site keeps the brand scale. The hero h1 is deliberately NOT
   reduced — that one is the value proposition. */
.protect-lp .dh2 { font-size: clamp(34px, 4.1vw, 62px); line-height: 0.97;
  letter-spacing: -0.038em; }
.protect-lp .sec { padding-top: clamp(40px,5.5vh,72px);
  padding-bottom: clamp(40px,5.5vh,72px); }
.protect-lp .sec-head { margin-bottom: clamp(12px,1.6vh,18px); }
.protect-lp .pg-note { font-size: clamp(15.5px,1.15vw,18px); }

/* Guardian lead panel. The mission-page version floats a small render in a
   22% column beside a full-measure paragraph, which leaves an awkward void on
   a wide screen. Here the render sits centred on its own plate, vertically
   aligned to the text, and the column is wide enough to read as a product
   shot rather than a stray thumbnail. */
.protect-lp .stk-lead-top { grid-template-columns: minmax(0,1fr) clamp(240px,30%,400px);
  gap: clamp(24px,3.4vw,64px); align-items: center; }
/* No plate behind the render: it sits directly on the page. */
.protect-lp .stk-lead-fig { background: none; border: 0; padding: 0; }
.protect-lp .stk-lead-fig img { width: 100%; height: auto; object-fit: contain; }
.protect-lp .stk-lead-tx .stk-d { max-width: 62ch; }
@media (max-width: 980px) {
  .protect-lp .stk-lead-top { grid-template-columns: 1fr; }
  /* Auto margins, or the capped render sits against the column's left edge. */
  .protect-lp .stk-lead-fig { max-width: 320px; margin-left: auto; margin-right: auto; }
}


/* The win column is the one light plate on the page, so it is pinned to brand
   bone rather than a token that could resolve toward white — and it keeps a
   charcoal rule so it still reads as a panel on a light page. Markers become
   check marks: the loss column uses dashes, and the visual difference is doing
   the comparison work here. */
.protect-lp .costcol.win { background: #F5F1E8; border-color: #161616; }
.protect-lp .costcol.win h3 { color: #6E6759; }
.protect-lp .costcol.win li { color: #2A2823; padding-left: 26px; }
.protect-lp .costcol.win li::before {
  content: ""; position: absolute; left: 0; top: 0.34em;
  width: 12px; height: 6px; background: none;
  border-left: 2px solid var(--ember); border-bottom: 2px solid var(--ember);
  transform: rotate(-45deg); }


/* The marker in the trust bar links down to the single footnote in the record
   section, rather than repeating the whole disclosure inside the fold. */
.tbar .fnref { color: var(--ember); text-decoration: none; margin-left: 1px;
  font-size: 1.1em; line-height: 1; }
.tbar .fnref:hover { color: var(--char); }

/* ── Closing block on a bone plate ────────────────────────────────────
   Pinned to brand bone rather than a token that could resolve toward white.
   The nested form was styled for a DARK ground (light text on a light tint,
   light borders), which on this plate was near-invisible — so everything
   inside it is restated for a light surface. */
.protect-lp .pclose { background: #F5F1E8; }
.protect-lp .pclose h2 { color: #161616; }
.protect-lp .pclose .sub { color: #4C473F; }
.protect-lp .pclose .next3 .n { border-top-color: var(--ember); }
.protect-lp .pclose .next3 .n .s { color: #6E6759; }
.protect-lp .pclose .next3 .n h3 { color: #161616; }
.protect-lp .pclose .next3 .n p { color: #4C473F; }

.protect-lp .pclose .pform { background: rgba(22,22,22,0.03);
  border-color: rgba(22,22,22,0.18); backdrop-filter: none; }
.protect-lp .pclose .pform h2 { color: #161616; font-size: clamp(19px,1.6vw,24px); }
.protect-lp .pclose .pform .note { color: #6E6759; }
.protect-lp .pclose .pform input,
.protect-lp .pclose .pform select { color: #161616; background: #FFFFFF00;
  border-color: rgba(22,22,22,0.28); }
.protect-lp .pclose .pform input::placeholder { color: #8D8779; }
.protect-lp .pclose .pform input:focus,
.protect-lp .pclose .pform select:focus { border-color: var(--ember); }
.protect-lp .pclose .pform select option { background: #F5F1E8; color: #161616; }
.protect-lp .pclose .pform button { background: var(--ember); border-color: var(--ember);
  color: #FDFAF3; }
.protect-lp .pclose .pform button:hover { background: #161616; border-color: #161616;
  color: #FDFAF3; }
.protect-lp .pclose .pform .alt { color: #6E6759; }
.protect-lp .pclose .pform .alt:hover { color: #161616; }


/* Guardian is the lead of the stack and the one product name on the page that
   should carry weight, so it steps up from the shared stack-header size. */
.protect-lp .stk-lead .stk-name .stk-h { font-size: clamp(34px,3.6vw,56px);
  letter-spacing: -0.038em; line-height: 0.98; }


/* Guardian is now ~56px against a ~9px pill. Baseline alignment is right when
   two items are close in size and wrong when they are not — on that ratio it
   dropped the pill to the bottom of the cap height. Centre it against the
   headline instead, and let it sit on its own line if the row wraps. */
.protect-lp .stk-lead .stk-name { align-items: center; gap: clamp(12px,1.4vw,20px); }
.protect-lp .stk-lead .stk-name .stk-tag { position: relative; top: 0.1em; }


/* ── How it works: a connected sequence ───────────────────────────────
   This was a fourth identical 4-up grid. It is a sequence, so the layout now
   says so: a rule runs through the step markers and the cards sit under it,
   which also carries "in seconds" without spending a sentence on it. */
.flow { list-style: none; margin: clamp(30px,4vh,52px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: clamp(14px,1.8vw,28px); position: relative; }
/* The connector sits behind the markers, on their centre line. */
.flow::before { content: ""; position: absolute; left: 0; right: 0; top: 13px;
  height: 1px; background: var(--border); }
.fstep { position: relative; padding-top: 40px; }
.fnum { position: absolute; top: 0; left: 0; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; background: var(--bone);
  border: 1px solid var(--char); font-family: var(--mono); font-size: 10px;
  font-weight: 500; letter-spacing: 0.06em; color: var(--char); }
.fstep .licon { color: var(--fg-3); margin-bottom: 12px; }
.fstep h3 { font-family: var(--sans); font-weight: 400; font-size: clamp(20px,1.8vw,27px);
  line-height: 1.05; letter-spacing: -0.028em; margin: 0; color: var(--char); }
.fstep p { font-size: 14.5px; line-height: 1.5; color: var(--fg-2);
  margin: 10px 0 0; text-wrap: pretty; }
.fstep:hover .licon { color: var(--ember); }
@media (max-width: 900px) {
  .flow { grid-template-columns: 1fr 1fr; row-gap: clamp(26px,3.4vh,40px); }
  .flow::before { display: none; }
}
@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr 1fr; gap: 20px 16px; }
  .fstep { padding-top: 34px; }
  .fnum { width: 23px; height: 23px; font-size: 9px; }
  .fstep .licon { width: 26px; height: 26px; margin-bottom: 9px; }
  .fstep h3 { font-size: 18px; }
  .fstep p { font-size: 13.5px; line-height: 1.45; }
}

/* ── Record: a credentials sheet ──────────────────────────────────────
   The one assessed figure takes a panel of its own and the supporting claims
   stack beside it, so this no longer mirrors the grid above. */
.recgrid { display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr);
  gap: clamp(16px,2vw,32px); margin-top: clamp(30px,4vh,52px); align-items: start; }
.recfig { border: 1px solid var(--char); padding: clamp(24px,2.6vw,40px); }
.recfig .n { display: block; font-family: var(--sans); font-weight: 300;
  font-size: clamp(56px,7vw,116px); line-height: 0.86; letter-spacing: -0.05em;
  color: var(--char); }
.recfig .l { display: block; margin-top: 14px; padding-bottom: clamp(18px,2.4vh,26px);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fg-3); }
.recfig .l a, .recfig .l { color: var(--fg-3); }
.recfig .d { font-size: clamp(15px,1.15vw,17px); line-height: 1.55; color: var(--fg-2);
  margin: clamp(18px,2.4vh,26px) 0 0; text-wrap: pretty; }
.recfig .fnote { font-family: var(--mono); font-size: 9.5px; line-height: 1.55;
  letter-spacing: 0.04em; color: var(--fg-3); margin: clamp(14px,1.8vh,20px) 0 0; }
.reclist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.reclist li { padding: clamp(20px,2.6vh,30px) 0; border-bottom: 1px solid var(--border); }
.reclist li:first-child { padding-top: clamp(20px,2.6vh,30px); }
.reclist h3 { font-family: var(--sans); font-weight: 500; font-size: clamp(17px,1.4vw,21px);
  letter-spacing: -0.022em; margin: 0; color: var(--char); }
.reclist p { font-size: 14.5px; line-height: 1.55; color: var(--fg-2); margin: 9px 0 0;
  text-wrap: pretty; }
.reclist .m { display: block; margin-top: 12px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-3); }
.reclist .m .sep { margin: 0 8px; opacity: 0.6; }
@media (max-width: 860px) { .recgrid { grid-template-columns: 1fr; } }




/* Mobile header weight. The display weights (300–400) are tuned for large
   sizes; at phone scale the same strokes render thin and lose authority, so
   every header steps up one weight under 760px. Scoped to .protect-lp. */
@media (max-width: 760px) {
  .protect-lp .phero h1 { font-weight: 400; }
  .protect-lp .dh2 { font-weight: 500; }
  .protect-lp .pclose h2 { font-weight: 400; }
  .protect-lp .tfig-card .f { font-weight: 400; }
  .protect-lp .recfig .n { font-weight: 400; }
  .protect-lp .fstep h3 { font-weight: 500; }
  .protect-lp .stk-lead .stk-name .stk-h { font-weight: 500; }
  .protect-lp .stk-grid .stk-h { font-weight: 500; }
  .protect-lp .prin .cell .ct { font-weight: 500; }
  .protect-lp .pform h2 { font-weight: 500; }
  .protect-lp .faq summary { font-weight: 500; }
}


/* Macro figures: three across on desktop, stacked on a phone. These carry long
   sentence-length labels, so two or three columns at phone width crushes them
   into a few words per line. */
.statstrip.macro3 .row { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 860px) {
  .statstrip.macro3 .row { grid-template-columns: 1fr; gap: clamp(26px,3.4vh,40px); }
  .statstrip.macro3 .s { display: grid; grid-template-columns: auto minmax(0,1fr);
    gap: 4px 18px; align-items: baseline; }
  .statstrip.macro3 .s .v { font-size: clamp(38px,10vw,52px); }
  .statstrip.macro3 .s .k { max-width: 46ch; }
}
@media (max-width: 520px) {
  .statstrip.macro3 .s { grid-template-columns: 1fr; gap: 8px; }
}


/* The section nav pins to the very top on the campaign landing pages, which
   have no sticky header. The hub now lives at the mission URL WITH the site
   nav, so there it has to offset below it. */
.protect-lp.has-nav .pnav { top: var(--nav-h, 72px); }