/* Proud Bridge / Contemporary Authority 2026 — branded art direction.
   Palette: warm paper + near-black mineral green. Identity red appears only in the supplied logo.
   Editorial hierarchy: legibility first, no ornamental arches or gratuitous graphics. */
:root{
 --forest:#192D28; --forest2:#152622; --deep:#111F1B;
 --ivory:#F7F6F1; --cream:#F0F0EA; --pale:#FBFAF7;
 --sage:#B8C7BB; --sage-dk:#546A5E; --sand:#DDDFD8;
 --ink:#1A2924; --line:#D4D9D1; --line-dark:#52645B;
 --brand-red:#D51F2B; --paper:#F7F6F1; --stone:#E9EDE7;
}
html{scroll-padding-top:98px}
body{background:var(--paper);color:var(--ink);font-size:16px}
::selection{background:#C8D2C8;color:#152622}
/* Content-led first impression: remove the unsolicited marketing strip; let the official brand own the opening. */
.announcement{display:none!important}
.site-header{height:88px;background:rgba(250,249,246,.97);border-bottom:1px solid #E1E2DA;padding:0 clamp(24px,5.3vw,100px);gap:clamp(18px,2.5vw,40px);box-shadow:0 2px 10px rgba(20,35,30,.025)}
.brand-logo{width:clamp(195px,18vw,235px);max-width:29vw;flex-shrink:0}
.official-logo{width:100%;height:auto;display:block;object-fit:contain}
.site-nav{gap:clamp(15px,1.8vw,29px)}
.site-nav a{font-size:12px;color:#4C5D55;font-weight:600;letter-spacing:-.008em}
.site-nav a:hover,.site-nav a.active{color:#172A25}
.site-nav a.active{border-bottom:1px solid #172A25;padding-bottom:8px}
.header-book{padding:15px 23px;background:#192D28;color:#fff;letter-spacing:.01em;font-weight:650;font-size:12px;min-height:46px;display:inline-flex;align-items:center;gap:15px}
.header-book:hover{background:#2E4C40}
.header-book span{font-size:16px;line-height:1}
:where(a,button,input,textarea):focus-visible{outline:3px solid #4D7C68!important;outline-offset:4px}
/* Primary color roles: neutral hero, contrast panels reserved for the brand point of view. */
.home-hero{background:#F7F6F1;color:#1A2D28;padding:35px clamp(24px,5.3vw,100px) 0;min-height:0}
.home-hero-tick{color:#68796E;border-color:#C6CEC4;letter-spacing:.19em;font-weight:600}
.home-hero-grid{grid-template-columns:minmax(0,1fr);min-height:0}
.home-hero-copy{max-width:1260px;width:100%;padding:clamp(78px,9vw,145px) 0 clamp(65px,7vw,100px)}
.home-hero h1{font-family:var(--sans);font-weight:500;font-size:clamp(52px,5.15vw,87px);line-height:1.06;letter-spacing:-.062em;max-width:1190px;color:#192C27;margin:34px 0 36px;text-wrap:balance}
.home-hero h1 br{display:block}
.home-hero .overline,.home-hero .hero-description{color:#496055}
.home-hero .overline{font-size:11px;letter-spacing:.155em;font-weight:700}
.home-hero .hero-description{font-size:clamp(16px,1.25vw,19px);max-width:645px;line-height:1.77}
.home-hero .action{background:#192D28;color:#F9F9F4;margin:20px 0 0}
.home-hero .action:hover{background:#365747;color:#fff}
.home-hero .hero-index{color:#77877C;margin-top:44px}
.hero-index span{background:#C2CEC2}
.home-hero-lower{color:#667A6F;border-top:1px solid #C8D2C8;height:70px;font-weight:600}
/* Bespoke typographic mechanism: repeats the existing brand framework, not an invented second symbol. */
.hero-positioning{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:45px 0 0;max-width:880px;border-top:1px solid #BFCAC0;border-bottom:1px solid #BFCAC0;color:#264338}
.hero-positioning span{padding:19px 13px 20px 0;font:500 clamp(20px,2.3vw,34px)/1.05 var(--serif);letter-spacing:-.025em}
.hero-positioning span+span{border-left:1px solid #D3DCD1;padding-left:18px}
.hero-positioning span:last-child{color:#647A6C}
/* Legible quiet editorial system */
.display-heading,.section-title{letter-spacing:-.047em;line-height:1.01}
.display-heading{font-size:clamp(52px,6.4vw,99px);text-wrap:balance}
.section-title{font-size:clamp(49px,5.1vw,79px)}
.section-rail{font-size:10px;letter-spacing:.135em;font-weight:700;opacity:.83}
.rich{line-height:1.8}
.rich p{margin-bottom:21px}
.eyebrow,.overline,.tiny-index{font-weight:650}
.home-problem,.editorial-section,.service-stack,.about-story,.insight-collection,.contact-story,.compare-section{background:#F7F6F1}
.home-problem{padding-top:118px;padding-bottom:130px}
.problems-grid{border-top-color:#C5CFC5}
.problem{border-right-color:#D2D9D0}
.problem h3{font-size:clamp(26px,2.45vw,37px);line-height:1.14}
.problem .tiny-index{color:#53695B}
.card-arrow{color:#7A9180}
/* Dark narrative sections: near-black green reads as neutral ink, not Christmas green. */
.manifesto{background:#192D28;color:#F7F6F1;padding-top:125px;padding-bottom:136px}
.manifesto .manifesto-copy{color:#D4DFD5}
.manifesto .manifesto-sign{color:#B8C9B8}
.hero-dark,.story-block.story-dark,.method-section{background:#192D28;color:#F7F6F1}
.hero-dark .hero-description{color:#D1DFD4}
.hero-dark .aside-frame{background:#263F35;color:#F5F7F0;border-color:#526A59}
.hero-dark .aside-frame li{color:#F5F7F0}
.hero-light{background:#F7F6F1;color:#192C27}
.hero-light .hero-description{color:#4D6558}
.inner-hero{padding:31px clamp(24px,5.3vw,100px) 0}
.inner-hero h1{font-family:var(--sans);font-weight:500;letter-spacing:-.05em;font-size:clamp(46px,4.65vw,74px);line-height:1.13;max-width:1000px;text-wrap:balance}
.inner-layout{padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(72px,8vw,110px);gap:7%}
.page-kicker{opacity:.72;letter-spacing:.145em}
.aside-frame{background:#E7EBE3;color:#213B30;box-shadow:none;border:1px solid #D0DBD0;padding:31px 31px}
.aside-head{font-weight:650}
/* Replace multiple green tints with a coherent family of warm neutral surfaces. */
.touchpoint-section,.diagnostic-panel,.outcomes,.review-panel{background:#E9EEE8}
.touchpoint-grid{border-color:#D0D8CF;background:#D0D8CF}
.touchpoint-grid>div,.outcome-card{background:#F6F7F2}
.outcome-grid{background:#CCD6CC;border-color:#CCD6CC}
.compare-panel.minus{background:#F1F0E8}
.compare-panel.plus{background:#E5ECE5}
.monthly-card,.monthly-card:nth-child(2),.monthly-card:nth-child(3){background:#E6EBE5;border:1px solid #D0D9CF}
.monthly-card:nth-child(2){background:#F2F2EB}
.monthly-card:nth-child(3){background:#DBE4DA}
.diagnostic-list{background:#F9F9F4}
.insight-card,.insight-card:nth-child(2),.insight-card:nth-child(3){background:#E8ECE6;border:1px solid #D6DED4}
.insight-card:nth-child(2){background:#F1F1EA}
.insight-card:nth-child(3){background:#E3EAE1}
.service-row{border-bottom-color:#D0D7CD}
.service-rows{border-top-color:#D0D7CD}
.service-row:hover{background:#ECF0EA}
/* Decorative symbols that compete with the brand are never used. */
.wordmark-stripe,.about-visual .ring,.about-visual-word,.about-visual-note,.bridge-stage,.closing-arc,.about-arch{display:none!important}
.about-visual{background:#182D27;min-height:540px;display:flex;align-items:center;justify-content:center;padding:clamp(25px,5vw,70px);border:1px solid #344D41}
.about-visual .about-quote{font:500 clamp(43px,4.4vw,74px)/1.08 var(--serif);letter-spacing:-.04em;color:#F5F4EC;text-align:left;max-width:550px;margin:0}
.about-visual .about-quote:before{content:'“';display:block;font-size:84px;line-height:.75;color:#9EB4A5;margin-bottom:22px}
.about-visual .about-quote-caption{font:700 10px/1.4 var(--sans);letter-spacing:.12em;color:#B6C6BB;text-transform:uppercase;margin-top:40px;display:block}
/* CTA is deliberately calm. Authority is signaled by clarity, not an alarm-red button. */
.action,.header-book{transition:background-color .2s ease,transform .2s ease,border-color .2s ease}
.action{min-height:55px;padding:17px 24px;font-size:13px;font-weight:650;gap:30px}
.action-dark{background:#1B3029;color:#F9F9F6}
.action-dark:hover{background:#385A47;color:#fff;transform:translateY(-1px)}
.text-link{text-underline-offset:5px}
.closing{background:#E1E9E0;color:#192C27;padding:clamp(90px,8vw,145px) clamp(24px,5.3vw,100px) clamp(90px,9vw,152px)}
.closing .section-rail{opacity:.75}
.closing h2{line-height:1.01;font-size:clamp(54px,6.1vw,94px);text-wrap:balance}
.closing .rich{color:#4F6257}
.footer{background:#131F1C;color:#F5F5EE;padding:105px clamp(24px,5.3vw,100px) 30px}
.footer-desc{color:#CBD5CC}
.footer-nav a:hover,.footer-base a:hover{color:#fff}
/* Form must match the editorial brand and remain usable. */
.review-panel{border-top:1px solid #D4DDD1;padding:100px clamp(24px,5.3vw,100px) 120px}
.review-form{background:#FBFAF6;border:1px solid #D3DAD1;box-shadow:0 26px 80px rgba(16,44,35,.045)}
.form-line label{color:#223B30}
.form-line input,.form-line textarea{background:#fff;border:1px solid #C7D1C6;border-radius:2px;color:#192C27}
.form-line input:focus,.form-line textarea:focus{border-color:#426C57}
/* Layout rhythm and readable maximum line lengths at desktop. */
.home-problem,.manifesto,.editorial-section,.service-stack,.about-story,.insight-collection,.contact-story,.compare-section,.method-section,.touchpoint-section,.diagnostic-panel,.outcomes,.story-block,.monthly-section{padding-left:clamp(24px,5.3vw,100px);padding-right:clamp(24px,5.3vw,100px)}
/* Responsive constraints: no trapped navigation, oversized hero or horizontally scrollable content. */
@media(max-width:1120px){
 .site-nav{display:none}.menu-toggle{display:flex}
 .site-nav.open{display:flex;position:absolute;left:0;right:0;top:88px;background:#FAF9F6;flex-direction:column;align-items:stretch;padding:25px 5vw 30px;box-shadow:0 24px 30px rgba(22,40,29,.09)}
 .site-nav.open a{color:#21332B;border-bottom:1px solid #DAE0D7;padding:15px 0;font-size:16px}
 .site-nav.open a.active{border-bottom-color:#768E7B}
 .brand-logo{width:210px;max-width:44vw}
 .home-hero h1{font-size:clamp(50px,6.5vw,75px)}
}
@media(max-width:800px){
 .home-hero-copy{padding:73px 0 76px}
 .home-hero h1{font-size:clamp(44px,7vw,64px);letter-spacing:-.054em}
 .inner-hero h1{font-size:clamp(42px,6.5vw,60px)}
 .manifesto{padding-top:90px;padding-bottom:95px}
 .hero-positioning{margin-top:35px}
 .about-visual{min-height:380px}
 .closing-main,.footer-upper{grid-template-columns:1fr;gap:38px}
}
@media(max-width:650px){
 .site-header{height:76px;padding:0 22px}
 .brand-logo{width:190px;max-width:60vw}
 .site-nav.open{top:76px}
 .header-book{display:none}
 .home-hero{padding:25px 22px 0}
 .home-hero-tick{font-size:9px}
 .home-hero-tick span:last-child{display:none}
 .home-hero-copy{padding:59px 0 62px}
 .home-hero h1{font-size:clamp(40px,10vw,55px);line-height:1.1;letter-spacing:-.053em;margin:27px 0 27px}
 .home-hero .hero-description{font-size:16px;line-height:1.7}
 .hero-positioning{grid-template-columns:1fr;margin-top:36px}
 .hero-positioning span{font-size:28px;padding:10px 0}
 .hero-positioning span+span{border-left:0;border-top:1px solid #D3DCD1;padding-left:0}
 .home-hero-lower{font-size:8px;letter-spacing:.08em;height:57px}
 .home-hero-lower span:last-child{display:none}
 .inner-hero{padding:26px 22px 0}
 .inner-hero h1{font-size:clamp(38px,9vw,51px);line-height:1.11;letter-spacing:-.045em}
 .inner-layout{padding-top:64px;padding-bottom:74px}
 .closing{padding:78px 22px 89px}
 .closing h2{font-size:clamp(44px,10vw,61px)}
 .footer{padding:75px 22px 29px}
 .home-problem,.manifesto,.editorial-section,.service-stack,.about-story,.insight-collection,.contact-story,.compare-section,.method-section,.touchpoint-section,.diagnostic-panel,.outcomes,.story-block,.monthly-section,.review-panel{padding-left:22px;padding-right:22px}
 .display-heading{font-size:clamp(44px,10.5vw,64px)}
 .about-visual .about-quote{font-size:clamp(42px,10vw,61px)}
}
@media(prefers-reduced-motion:reduce){.action:hover{transform:none}}