/* Inter, self-hosted. One variable file covers weights 100-900, so the whole
site needs a single font request instead of four from a third party.
Subset to Latin and Latin Extended-A: 854 KB TTF becomes 69 KB WOFF2.
Licensed under the SIL Open Font License, see assets/fonts/OFL.txt */
@font-face{
font-family:Inter;
font-style:normal;
font-weight:100 900;
font-display:swap;
src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");
}
/* ==========================================================================
Strategic Vision home page prototype
UNOFFICIAL. Built 2026-09-03 from brand system v1.1 and blueprint ยง10.
The :root block below mirrors strategic-vision.css. Edit tokens here and
the whole page follows. When this goes to real build, swap this block for
a to the stylesheet itself.
========================================================================== */
:root{
--sv-navy:#172651; --sv-logo-gold:#BC862B; --sv-bronze:#9F7251;
--sv-gold:#DAA520; --sv-blue:#243C7E; --sv-tan:#CCB19C; --sv-ink:#13181B;
--cv-security:#243C7E; --cv-freedom:#006600; --cv-esteem:#C00000;
--cv-balance:#DAA520; --cv-love:#D3D6E0;
--n50:#F9FAFD; --n100:#F1F3F8; --n200:#E4E6EC; --n300:#D1D4DB;
--n400:#A1A5AC; --n500:#7D8088; --n600:#5F636C; --n700:#444851;
--n800:#292E38; --n900:#131927;
--bg:#FFFFFF; --bg-subtle:var(--n50); --surface:#FFFFFF;
--border:var(--n200); --text:var(--sv-ink); --text-2:var(--n600);
--link:var(--sv-blue); --focus:var(--sv-blue);
--font:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
--s7:48px; --s8:64px; --s9:96px; --s10:128px;
--r-sm:2px; --r-md:4px; --r-full:9999px;
--maxw:1200px; --gutter:16px;
--ease:cubic-bezier(.2,0,0,1);
color-scheme:light;
}
@media (min-width:768px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;text-wrap:balance;line-height:1.15}
p{margin:0;max-width:65ch}
a{color:var(--link);text-underline-offset:2px}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sv-bronze)}
.on-navy .eyebrow{color:var(--sv-gold)}
.tnum{font-variant-numeric:tabular-nums}
/* ---- buttons --------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;
padding:13px 26px;font:inherit;font-size:.9375rem;font-weight:600;
border:1px solid transparent;border-radius:var(--r-md);cursor:pointer;
text-decoration:none;transition:background .2s var(--ease),border-color .2s var(--ease)}
.btn-primary{background:var(--sv-gold);color:var(--sv-ink)}
.btn-primary:hover{background:#C4941C;color:var(--sv-ink)}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.btn-navy{background:var(--sv-navy);color:#fff}
.btn-navy:hover{background:var(--sv-blue);color:#fff}
/* ---- header ---------------------------------------------------------- */
.site-header{background:#fff;position:sticky;top:0;z-index:50;
border-bottom:1px solid var(--border)}
.site-header .inner{display:flex;align-items:center;justify-content:space-between;
gap:var(--s5);padding-block:var(--s4)}
.brand{display:block;width:206px;flex:none;line-height:0}
.brand svg{width:100%;height:auto;display:block}
.nav{display:flex;gap:var(--s5);align-items:center}
.nav a{color:var(--sv-navy);text-decoration:none;font-size:.9375rem;font-weight:500;
padding-block:4px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--sv-logo-gold);color:var(--sv-navy)}
.nav .cta{margin-left:var(--s2)}
.navtoggle{display:none;background:none;border:1px solid var(--n300);
color:var(--sv-navy);border-radius:var(--r-md);padding:8px 12px;font:inherit;
font-size:.875rem;font-weight:600;cursor:pointer}
@media (max-width:900px){
.nav{display:none}
.nav.open{display:flex;position:absolute;left:0;right:0;top:100%;background:#fff;
flex-direction:column;align-items:flex-start;gap:0;padding:var(--s3) var(--gutter) var(--s5);
border-top:1px solid var(--border);box-shadow:0 10px 24px rgba(19,25,39,.10)}
.nav.open a{padding-block:10px;width:100%}
.navtoggle{display:block}
.site-header .inner{position:relative}
}
/* ---- respondent verify band ------------------------------------------ */
/* Most of this site's traffic is people checking an invitation is genuine.
This band answers them in the first screen without hijacking the page. */
.verify{background:var(--bg-subtle);border-bottom:1px solid var(--border);
padding-block:0}
.verify .inner{display:flex;flex-wrap:wrap;align-items:baseline;
gap:var(--s2) var(--s5);padding-block:var(--s3)}
.verify p{margin:0;font-size:.9375rem;color:var(--text-2);max-width:none}
.verify b{color:var(--sv-navy);font-weight:700}
.verify .go{font-size:.9375rem;font-weight:600;color:var(--sv-blue);
text-decoration:none}
.verify .go:hover{text-decoration:underline}
/* One line each on desktop; below that the link wraps rather than running
off the right edge, so nowrap is deliberately not set at small widths. */
@media (min-width:700px){ .verify .go{white-space:nowrap} }
/* ---- hero ------------------------------------------------------------ */
.hero{background:var(--sv-navy);color:#fff;position:relative;overflow:hidden;
padding-block:var(--s9) var(--s8)}
.hero::before{content:"";position:absolute;right:-90px;top:50%;translate:0 -50%;
width:620px;height:620px;background-image:var(--mark-rev);background-size:contain;
background-repeat:no-repeat;opacity:.07;pointer-events:none}
.hero .inner{position:relative;max-width:820px}
.hero h1{font-size:clamp(2.25rem,5.2vw,3.5rem);font-weight:700;letter-spacing:-.02em;
line-height:1.03;margin-top:var(--s3)}
.hero .lede{color:var(--sv-tan);font-size:1.1875rem;line-height:1.55;margin-top:var(--s5);
max-width:56ch}
.hero .actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s7)}
.hero .rule{width:64px;height:4px;background:var(--sv-gold);margin-top:var(--s7)}
/* ---- stats ----------------------------------------------------------- */
.stats{border-bottom:1px solid var(--border);background:var(--bg-subtle)}
.stats .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
gap:var(--s6);padding-block:var(--s7)}
.stat .n{font-size:2.5rem;font-weight:700;letter-spacing:-.02em;color:var(--sv-navy);
line-height:1}
.stat .k{margin-top:var(--s2);color:var(--text-2);font-size:.9375rem;max-width:30ch}
/* ---- sections -------------------------------------------------------- */
section{padding-block:var(--s9);scroll-margin-top:86px}
.site-footer{scroll-margin-top:86px}
.sec-head{max-width:62ch}
.sec-head h2{font-size:clamp(1.75rem,3.4vw,2.25rem);font-weight:700;letter-spacing:-.015em;
margin-top:var(--s3);line-height:1.12}
.sec-head p{margin-top:var(--s4);color:var(--text-2);font-size:1.0625rem}
/* ---- feature cards --------------------------------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
gap:var(--s5);margin-top:var(--s7)}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s6) var(--s5) var(--s5);display:flex;flex-direction:column}
.card .ic{width:64px;height:64px;border-radius:var(--r-full);display:grid;place-items:center;
background:linear-gradient(140deg,#9E7118,var(--sv-gold) 52%,#9E7118);color:#fff;
margin-bottom:var(--s4)}
.card h3{font-size:1.125rem;font-weight:700;color:var(--sv-navy)}
.card .u{width:38px;height:2px;background:var(--sv-gold);margin:var(--s3) 0 var(--s4)}
.card p{font-size:.9375rem;color:var(--text-2);flex:1}
.card .more{margin-top:var(--s4);font-size:.875rem;font-weight:600;text-decoration:none;
display:inline-flex;align-items:center;gap:6px}
.card .more:hover{text-decoration:underline}
/* ---- method teaser --------------------------------------------------- */
.method{background:var(--bg-subtle);border-block:1px solid var(--border)}
.method .split{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8)}
@media (min-width:1100px){
.method .split{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--s10);
align-items:start}
}
.method-points{display:grid;gap:0}
.method-points > div{padding-block:var(--s5);border-top:1px solid var(--border)}
.method-points > div:first-child{padding-top:0;border-top:0}
.method-points > div:last-child{padding-bottom:0}
.method-points dt{font-weight:700;color:var(--sv-navy);font-size:1.0625rem}
.method-points dd{margin:var(--s2) 0 0;color:var(--text-2);font-size:.9375rem}
.cards.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.cards.three,.cards.two{grid-template-columns:minmax(0,1fr)}}
.grp{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s7);
font-size:.9375rem;font-weight:700;color:var(--sv-navy);letter-spacing:.01em}
.grp::after{content:"";flex:1;height:1px;background:var(--border)}
.grp span{font-weight:600;font-size:.75rem;letter-spacing:.08em;color:var(--sv-bronze);
border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 6px}
.grp + .cards{margin-top:var(--s5)}
.grp[id]{scroll-margin-top:110px}
.scales{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
@media (min-width:860px){.scales{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7)}}
.scales h3{font-size:1.25rem;font-weight:700;color:var(--sv-navy);
margin-top:var(--s3);letter-spacing:-.01em}
.scales p{margin-top:var(--s3);color:var(--text-2);font-size:.9375rem;max-width:52ch}
/* ---- CoreValues tree -------------------------------------------------- */
.cvfig{margin:var(--s7) 0 0;max-width:520px}
.cvphoto{position:relative;line-height:0;border-radius:var(--r-md);overflow:hidden;
box-shadow:0 1px 2px rgba(19,25,39,.10)}
.cvphoto img{display:block;width:100%;height:auto}
.cvbar{position:absolute;right:0;width:54%;
padding:5px 10px;font-size:clamp(.6875rem,1.35vw,.8125rem);font-weight:700;
letter-spacing:.02em;line-height:1.3;text-align:right}
.cvbar.sec {background:var(--cv-security);color:#fff}
.cvbar.free{background:var(--cv-freedom);color:#fff}
.cvbar.est {background:var(--cv-esteem);color:#fff}
.cvbar.bal {background:var(--cv-balance);color:var(--sv-ink)}
.cvbar.love{background:var(--cv-love);color:var(--sv-ink)}
/* Under 480px the 4:5 crop loads instead. It is tall enough to carry the bars,
but its composition sits differently, so the bars take their portrait
positions. Must come after the base rule to win. */
/* Label positions. Set per value in CSS, never inline: the site's
Content-Security-Policy blocks style="" attributes, so an inline position is
silently dropped on the live site (it only shows up when testing locally). */
.cvbar.love{top:3.5%}.cvbar.bal{top:21%}.cvbar.est{top:42%}.cvbar.free{top:63%}.cvbar.sec{top:83%}
.cvtree .cvbar.love{top:2%}.cvtree .cvbar.bal{top:24%}
@media (max-width:479px){
.cvbar.love,.cvtree .cvbar.love{top:2%}.cvbar.bal,.cvtree .cvbar.bal{top:20%}
.cvbar.est{top:40%}.cvbar.free{top:63%}.cvbar.sec{top:82%}
}
.cvfig figcaption{margin-top:var(--s3);font-size:.8125rem;color:var(--text-2);
line-height:1.5;max-width:46ch}
/* ---- sectors band ---------------------------------------------------- */
.sectors{background:var(--sv-navy);color:#fff}
.sectors h2{font-size:clamp(1.75rem,3.4vw,2.25rem);font-weight:700;letter-spacing:-.015em;
margin-top:var(--s3);line-height:1.12;color:#fff}
.sectors .lede{margin-top:var(--s4);color:var(--sv-tan);font-size:1.0625rem;max-width:62ch}
.sectors ul{list-style:none;margin:var(--s7) 0 0;padding:0;columns:3;
column-gap:var(--s7)}
@media (max-width:900px){.sectors ul{columns:2}}
@media (max-width:520px){.sectors ul{columns:1}}
.sectors li{break-inside:avoid;padding-block:var(--s3);
border-top:1px solid rgba(255,255,255,.20);font-size:.9375rem;font-weight:500}
/* ---- contact --------------------------------------------------------- */
.contact{background:var(--bg-subtle);border-top:1px solid var(--border)}
.contact .split{display:grid;gap:var(--s7);grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.contact .split{
grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--s8);align-items:start}}
.contact dl{margin:var(--s6) 0 0;display:grid;gap:0}
.contact dl > div{padding-block:var(--s3);border-top:1px solid var(--border)}
.contact dt{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sv-bronze)}
.contact dd{margin:4px 0 0;font-size:.9375rem;color:var(--text)}
.contact dd a{color:var(--sv-navy);text-decoration:none;font-weight:600}
.contact dd a:hover{text-decoration:underline}
.form{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s6)}
.form .row{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.form .row{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:.875rem;font-weight:600;color:var(--sv-navy);
margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:.9375rem;
color:var(--text);background:#fff;border:1px solid var(--n300);
border-radius:var(--r-md);padding:10px 12px}
.field textarea{min-height:132px;resize:vertical}
.field .hint{font-size:.8125rem;color:var(--text-2);margin-top:5px}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);
margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--border)}
.form .actions p{font-size:.8125rem;color:var(--text-2);max-width:34ch}
.scales-foot{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border)}
.scales-foot p{color:var(--text-2);font-size:.9375rem;max-width:72ch;margin:0}
/* Slot for the CoreValues graphic once a static version exists.
Drop it in here as a single ; the column is already sized for it. */
/* ---- awards ---------------------------------------------------------- */
.awards ul{list-style:none;margin:var(--s7) 0 0;padding:0;display:grid;
grid-template-columns:1fr;gap:1px;background:var(--border);
border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
/* 2 across on tablets, 4 on desktop. The last card stretches to finish its
row, so a short row never leaves a grey block, whatever the award count. */
@media (min-width:560px){.awards ul{grid-template-columns:repeat(2,1fr)}}
@media (min-width:560px) and (max-width:999px){
.awards li:last-child:nth-child(odd){grid-column:span 2}}
@media (min-width:1000px){.awards ul{grid-template-columns:repeat(4,1fr)}
.awards li:last-child:nth-child(4n+3){grid-column:span 2}
.awards li:last-child:nth-child(4n+2){grid-column:span 3}
.awards li:last-child:nth-child(4n+1){grid-column:span 4}}
.awards li{background:var(--surface);padding:var(--s5)}
.awards .ab{font-family:inherit;font-size:.6875rem;font-weight:700;letter-spacing:.1em;
text-transform:uppercase;color:var(--sv-bronze)}
.awards .an{font-weight:700;color:var(--sv-navy);margin-top:6px;font-size:1rem}
.awards .ad{color:var(--text-2);font-size:.875rem;margin-top:6px}
/* Footer styling now lives in assets/css/footer.css, which every page
loads, because the footer markup is shared from _partials/footer.html. */
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}
/* ---- office card on the home contact section --------------------------- */
/* The street address appears once on the site, here. Not repeated in the
footer: one authoritative place beats three that can drift apart. */
.officecard{background:var(--bg-subtle);border:1px solid var(--border);
border-radius:var(--r-md);padding:var(--s6)}
.officecard h3{margin:0 0 var(--s3);font-size:1.0625rem;color:var(--sv-navy)}
.officecard address{font-style:normal;font-size:1.0625rem;line-height:1.5;
color:var(--text);margin-bottom:var(--s5)}
.officecard dl{margin:0}
.officecard .respondent{margin-top:var(--s5);padding-top:var(--s4);
border-top:1px solid var(--border);font-size:.9375rem;color:var(--text-2)}
/* ---- satisfaction banner ---------------------------------------------- */
/* One bold headline, then the argument in plain weight beneath it. The copy
below the headline is Alex's, verbatim, and is deliberately not bold.
This is the only .banner on the site. It used to be declared twice, in two
places in this file, and the earlier copy set font-weight:700 on every
paragraph. Both are merged here so there is one place to change it. */
.banner{background:var(--sv-gold);color:var(--sv-ink)}
.banner .inner{padding-block:var(--s7);text-align:center}
.banner p{margin-inline:auto;max-width:54ch;font-weight:400}
.banner p.head{font-size:clamp(1.25rem,2.8vw,1.75rem);font-weight:700;
letter-spacing:-.015em;max-width:40ch;margin-bottom:var(--s5)}
.banner p.body{font-size:1.0625rem;font-weight:400;line-height:1.6;
margin-top:var(--s3)}
.banner p.body.ecs{margin-top:var(--s5)}
/* ---- inner-page heading band ------------------------------------------- */
/* The navy of the home hero, at a fraction of the height, for pages below the
home page. */
.pagehead{background:var(--sv-navy);color:#fff;padding-block:var(--s8) var(--s7)}
/* Left edge lines up with the logo and the content below; width is limited on
the text itself rather than on the container. */
.pagehead h1{max-width:22ch}
.pagehead .eyebrow{color:var(--sv-tan)}
.pagehead h1{font-size:clamp(1.875rem,4.2vw,2.75rem);font-weight:700;letter-spacing:-.02em;
line-height:1.1;margin-top:var(--s3)}
.pagehead .lede{color:var(--sv-tan);font-size:1.125rem;line-height:1.55;margin-top:var(--s4);
max-width:62ch}
/* ---- contact page ------------------------------------------------------ */
.contact-page{padding-block:var(--s8)}
.contact-page .split{align-items:start}
@media (min-width:900px){.contact-page .split{grid-template-columns:minmax(0,1.35fr) minmax(0,.8fr)}}
.formnote{max-width:none;background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--sv-logo-gold);
border-radius:var(--r-md);padding:var(--s4) var(--s5);margin:0 0 var(--s5);
font-size:.9375rem;color:var(--text-2)}
.formnote b{color:var(--text)}
.formnote a{color:var(--sv-navy);font-weight:600}
/* Heights measured from the live form: about 1,020px of content at 720px wide
and 1,270px at 360px. A little extra so it never shows an inner scrollbar. */
.formframe{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
overflow:hidden}
.formframe iframe{display:block;width:100%;height:1060px;border:0}
@media (max-width:560px){.formframe iframe{height:1310px}}
/* ==========================================================================
INNER PAGES: studies, method, services, awards, news.
Added 2026-09-22. Every inner page is the .pagehead band, then one
.page section holding either index cards or a .detail layout
(article on the left, key facts on the right), then .nextstep.
========================================================================== */
.crumbs{font-size:.8125rem;color:var(--sv-tan);margin:0 0 var(--s3)}
.crumbs a{color:#fff;text-decoration:none;font-weight:600}
.crumbs a:hover{text-decoration:underline}
.crumbs span[aria-hidden]{margin-inline:6px;opacity:.6}
.page{padding-block:var(--s8)}
.page .cards{margin-top:0}
.page .grp:first-child{margin-top:0}
.detail{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media (min-width:980px){.detail{grid-template-columns:minmax(0,1fr) 320px;gap:var(--s9);
align-items:start}}
/* Long-form text. Headings and spacing sized for reading, not scanning. */
.prose{max-width:68ch;font-size:1.0625rem;color:var(--text)}
.prose > * + *{margin-top:var(--s4)}
.prose h2{font-size:1.5rem;font-weight:700;color:var(--sv-navy);letter-spacing:-.01em;
margin-top:var(--s7)}
.prose h3{font-size:1.125rem;font-weight:700;color:var(--sv-navy);margin-top:var(--s6)}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h2 + *,.prose h3 + *{margin-top:var(--s3)}
.prose ul,.prose ol{padding-left:1.25em}
.prose li + li{margin-top:var(--s2)}
.prose li::marker{color:var(--sv-logo-gold)}
.prose .lead{font-size:1.1875rem;line-height:1.55;color:var(--sv-navy)}
.prose blockquote{margin:var(--s5) 0;padding:var(--s2) 0 var(--s2) var(--s5);
border-left:3px solid var(--sv-gold);color:var(--sv-navy);font-size:1.125rem}
.prose figure{margin:var(--s6) 0}
.prose figure img{display:block;width:100%;height:auto;border-radius:var(--r-md);
border:1px solid var(--border)}
.prose figcaption{margin-top:var(--s2);font-size:.8125rem;color:var(--text-2)}
/* Key facts beside the article. Sticks while the article scrolls past. */
.facts{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s5)}
@media (min-width:980px){.facts{position:sticky;top:104px}}
.facts .medal{display:block;width:220px;max-width:100%;height:auto;margin:0 auto var(--s5)}
.facts h2{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sv-bronze)}
.facts dl{margin:var(--s3) 0 0}
.facts dl > div{padding-block:var(--s3);border-top:1px solid var(--border)}
.facts dl > div:first-child{border-top:0;padding-top:0}
.facts dt{font-size:.8125rem;color:var(--text-2)}
.facts dd{margin:2px 0 0;font-weight:600;color:var(--sv-navy)}
.facts .btn{width:100%;margin-top:var(--s5)}
.facts .also{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--border);
font-size:.875rem}
.facts .also ul{list-style:none;margin:var(--s2) 0 0;padding:0}
.facts .also li + li{margin-top:6px}
.facts .also a{font-weight:600;text-decoration:none}
.facts .also a:hover{text-decoration:underline}
/* Plain two-column checklist for "what the study covers" lists. */
.checklist{list-style:none;padding:0 !important;display:grid;gap:0 var(--s6);
grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.checklist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.checklist li{padding:var(--s2) 0 var(--s2) 22px;position:relative;
border-top:1px solid var(--border);margin:0 !important;font-size:.9375rem}
.checklist li::before{content:"";position:absolute;left:2px;top:.95em;width:8px;height:8px;
background:var(--sv-gold);border-radius:1px}
/* ---- The Edwards Commitment Scale, drawn as seven steps --------------- */
.ecs-scale{list-style:none;padding:0 !important;margin:var(--s5) 0 0;display:grid;
grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.ecs-scale li{margin:0 !important;text-align:center;border-radius:var(--r-sm);
padding:var(--s3) 4px;background:var(--n100);font-size:.8125rem;line-height:1.3;
color:var(--text)}
.ecs-scale li b{display:block;font-size:1.25rem;color:var(--sv-navy);margin-bottom:4px}
.ecs-scale li.mid{background:var(--n200)}
.ecs-scale li.top{background:var(--sv-gold);color:var(--sv-ink)}
.ecs-scale li.top b{color:var(--sv-ink)}
@media (max-width:620px){
.ecs-scale{grid-template-columns:minmax(0,1fr)}
.ecs-scale li{display:flex;align-items:center;gap:var(--s3);text-align:left;padding:10px 12px}
.ecs-scale li b{margin:0;font-size:1rem;width:1.5em}
}
/* ---- Results tables (award winners, published data) -------------------- */
.tablewrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r-md)}
.datatable{width:100%;border-collapse:collapse;font-size:.9375rem}
.datatable th,.datatable td{padding:10px 14px;text-align:left;border-top:1px solid var(--border)}
.datatable thead th{border-top:0;background:var(--bg-subtle);font-size:.75rem;
letter-spacing:.08em;text-transform:uppercase;color:var(--sv-bronze)}
.datatable td.n,.datatable th.n{text-align:right;font-variant-numeric:tabular-nums}
.datatable tbody tr:nth-child(even){background:#FCFCFE}
/* ---- Closing call to action on every inner page ------------------------ */
.nextstep{background:var(--bg-subtle);border-top:1px solid var(--border);padding-block:var(--s8)}
.nextstep .inner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
gap:var(--s5)}
.nextstep h2{font-size:clamp(1.375rem,2.6vw,1.75rem);font-weight:700;color:var(--sv-navy);
letter-spacing:-.01em;max-width:30ch}
.nextstep p{margin-top:var(--s2);color:var(--text-2)}
/* Current section in the header nav (set by build.py). */
.nav a[aria-current]:not(.cta){border-bottom-color:var(--sv-logo-gold);font-weight:600}
.awards .an a{color:var(--sv-navy);text-decoration:none}
.awards .an a:hover{text-decoration:underline}
/* ---- News ------------------------------------------------------------ */
.newshead h1{max-width:30ch;font-size:clamp(1.625rem,3.4vw,2.375rem)}
.newshead .crumbs time{color:var(--sv-tan)}
.newspost{margin-inline:auto}
.newspost figure.portrait img{max-width:300px;margin-inline:auto}
.newspost .tablewrap{margin-top:var(--s5)}
.newspost hr{border:0;border-top:1px solid var(--border);margin:var(--s6) 0}
.videonote{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--r-md);
padding:var(--s3) var(--s4);font-size:.9375rem}
.backlink{max-width:68ch;margin:var(--s7) auto 0;font-weight:600}
.backlink a{text-decoration:none}
.backlink a:hover{text-decoration:underline}
.newsyear{font-size:1.25rem;font-weight:700;color:var(--sv-navy);margin-top:var(--s7)}
.newsyear:first-child{margin-top:0}
.newslist{list-style:none;margin:var(--s3) 0 0;padding:0;border-top:1px solid var(--border)}
.newslist li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:var(--s4);
padding-block:var(--s3);border-bottom:1px solid var(--border)}
.newslist time{font-size:.875rem;color:var(--text-2);padding-top:2px}
.newslist a{font-weight:600;color:var(--sv-navy);text-decoration:none;max-width:80ch}
.newslist a:hover{text-decoration:underline}
@media (max-width:560px){.newslist li{grid-template-columns:minmax(0,1fr);gap:2px}}
/* ==========================================================================
CoreValues diagram on /method. Follows the design canvas "CoreValues Tree:
Option A" (Sept 2026). Two layouts from one set of markup:
- Stacked (under 1100px): the tree, then one card per value, with a
"Start here" line running down a channel on the right to Security.
- Side by side (1100px and up): each definition sits level with its label
on the tree, joined by a short colored leader, and the "Start here" line
wraps around the list to point at Security.
The values are listed top of the tree to the roots, in the tree's order;
the line tells the reader to begin at the roots.
========================================================================== */
.cvsec{background:var(--bg-subtle);border-block:1px solid var(--border);padding-block:var(--s8)}
.cvdiagram{margin-top:var(--s7);display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s6)}
.cvtree{position:relative;line-height:0;border-radius:var(--r-md);overflow:hidden;max-width:640px}
.cvtree img{display:block;width:100%;height:auto}
.cvdefs li.love{--c:#8C93AD;--chip:var(--cv-love);--ink:var(--sv-ink)}
.cvdefs li.bal {--c:var(--cv-balance);--chip:var(--cv-balance);--ink:var(--sv-ink)}
.cvdefs li.est {--c:var(--cv-esteem);--chip:var(--cv-esteem);--ink:#fff}
.cvdefs li.free{--c:var(--cv-freedom);--chip:var(--cv-freedom);--ink:#fff}
.cvdefs li.sec {--c:var(--cv-security);--chip:var(--cv-security);--ink:#fff}
/* stacked layout */
.cvwrap{position:relative;max-width:640px}
.cvstart{display:flex;align-items:center;height:30px;margin:0;max-width:none;
font-size:.8125rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
color:var(--sv-bronze)}
.cvstart span:first-child{white-space:nowrap}
.cvstart .ln{flex:1;height:1.5px;margin-left:8px;background:var(--sv-bronze)}
.cvstart .cr{align-self:flex-end;width:10px;height:15px;margin-right:10px;
border-top:1.5px solid var(--sv-bronze);border-right:1.5px solid var(--sv-bronze);
border-radius:0 8px 0 0;box-sizing:border-box}
.cvdefs{list-style:none;margin:0;padding:0 26px 0 0}
.cvdefs li{position:relative;margin:0 0 10px;padding:14px 16px;background:var(--surface);
border:1px solid var(--border);border-radius:var(--r-md)}
.cvdefs li:last-child{margin-bottom:0}
.cvdefs .n{display:inline-block;padding:4px 10px;border-radius:var(--r-sm);font-size:.8125rem;
font-weight:700;background:var(--chip);color:var(--ink)}
.cvdefs .d{display:block;margin-top:6px;font-size:.9375rem;line-height:1.45;color:var(--n700)}
.cvdefs .cvc,.cvrail,.cvarrow{display:none}
/* the channel: one segment per card, the last one turning in to Security */
.cvdefs li::after{content:"";position:absolute;top:-1px;bottom:-11px;right:-15.75px;
width:1.5px;background:var(--sv-bronze)}
.cvdefs li:last-child::after{bottom:auto;height:28px;width:12px;background:none;
border-right:1.5px solid var(--sv-bronze);border-bottom:1.5px solid var(--sv-bronze);
border-radius:0 0 8px 0;box-sizing:border-box;right:-15.75px}
.cvdefs li:last-child::before{content:"";position:absolute;right:-4px;top:22.5px;width:7px;height:7px;
border-left:1.5px solid var(--sv-bronze);border-bottom:1.5px solid var(--sv-bronze);
transform:rotate(45deg)}
/* side-by-side layout */
@media (min-width:1100px){
.cvdiagram{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:88px}
.cvtree{max-width:none;border-radius:var(--r-md) 0 0 var(--r-md)}
.cvwrap{max-width:none}
.cvdefs{position:relative;height:100%;padding:0}
.cvdefs li{position:absolute;left:0;right:0;margin:0;padding:0 76px 0 64px;
background:none;border:0;border-radius:0}
.cvdefs li.love{top:1.6%}.cvdefs li.bal{top:23.4%}.cvdefs li.est{top:41.4%}
.cvdefs li.free{top:62.5%}.cvdefs li.sec{top:82.6%}
.cvdefs li::after,.cvdefs li:last-child::before{display:none}
.cvdefs .n{display:block;padding:0;background:none;color:var(--sv-navy);font-size:1.0625rem}
.cvdefs .n::after{content:":"}
.cvdefs .d{margin-top:0;color:var(--text-2)}
.cvdefs .cvc{display:block;position:absolute;left:0;top:12px;width:50px;height:2px;background:var(--c)}
.cvdefs .cvc::after{content:"";position:absolute;left:44px;top:-4px;width:10px;height:10px;
border-radius:50%;background:var(--c)}
.cvstart{position:absolute;z-index:1;top:-43px;height:36px;left:38%;right:39px;font-size:1.125rem}
.cvstart .cr{display:none}
.cvstart .ln{margin-left:10px}
.cvrail{display:block;position:absolute;right:23px;top:-25.75px;width:16px;
height:calc(82.6% + 38.5px);box-sizing:border-box;
border:1.5px solid var(--sv-bronze);border-left:0;border-radius:0 16px 16px 0}
.cvarrow{display:block;position:absolute;right:39px;top:calc(82.6% + 11.25px);width:17px;
height:1.5px;background:var(--sv-bronze)}
.cvarrow::before{content:"";position:absolute;left:1px;top:-3.25px;width:7px;height:7px;
border-left:1.5px solid var(--sv-bronze);border-bottom:1.5px solid var(--sv-bronze);
transform:rotate(45deg)}
}
/* ---- Spacing and heading helpers ---------------------------------------
These replace style="" attributes, which the Content-Security-Policy
(style-src 'self', no 'unsafe-inline') refuses to apply. build.py fails the
build if a style attribute or