/* ==========================================================
   SCHONBACHLER
   Monochrome: ink over paper. #B3D7FF is a HIGHLIGHT BLOCK
   behind capitals, never a type colour.
   Type: seven modular steps, --f1..--f7. Nothing off-scale.
   Modules: filled = assembled, outlined = still arriving.
   ========================================================== */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

:root{
    --ink:#2B2B2B;
    --ink-deep:#1a1a1a;
    --hl:#B3D7FF;
    --paper:#ffffff;
    --tint:#f6f7f8;
    --rule:#e4e7ea;
    --rule-dark:rgba(255,255,255,.16);
    --prose:#5b6067;
    --prose-mute:#6a7078;

    /* seven steps, ~1.26 */
    --f1:0.75rem;
    --f2:0.9375rem;
    --f3:1.0625rem;
    --f4:1.3125rem;
    --f5:1.75rem;
    --f6:clamp(2rem,3.6vw,2.75rem);
    --f7:clamp(2.75rem,6.6vw,5.25rem);

    /* rhythm */
    --sp-tight:5.5rem;
    --sp:7.5rem;
    --sp-loose:10rem;
    --gutter:clamp(1.5rem,4vw,3rem);
    --max:1400px;
    --ease:cubic-bezier(.4,0,.2,1);
}

body{
    font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
    font-size:var(--f3);
    line-height:1.65;
    color:var(--ink-deep);
    background:var(--paper);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
    text-wrap:pretty;
}

a{color:var(--ink-deep);text-decoration:none;transition:color .3s var(--ease)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.values :focus-visible,.mandate :focus-visible,.mandate-strip :focus-visible,footer :focus-visible{outline-color:#fff}
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000}
.skip-link:focus{left:0;background:var(--ink);color:#fff;padding:.75rem 1.25rem;font-size:var(--f1);letter-spacing:.16em;text-transform:uppercase}
a:hover{color:#000}

h1,h2,.mandate-lead{text-transform:uppercase;font-weight:300;line-height:1.04;letter-spacing:-.022em}
h1{font-size:var(--f7)}
h2{font-size:var(--f6)}
h1 strong,h2 strong{font-weight:500}
.ct{text-transform:uppercase;font-weight:500;line-height:1.28;letter-spacing:.055em;text-align:left}

/* ---- the highlight mechanic ----
   The block sits BEHIND the capitals and the glyphs always keep
   their own ink. text-fill-color is pinned here so that no
   ancestor background-clip:text can hollow the letters out. */
.hl-t{
    display:inline;
    color:var(--ink);
    -webkit-text-fill-color:var(--ink);
    background-image:linear-gradient(var(--hl),var(--hl));
    /* tuned to Jost's cap box: caps sit .335em-1.105em below the
       top of the inline content area, so the block spans that
       with a .06em bleed either side. Re-measure if the face changes. */
    background-size:100% .89em;
    background-position:0 .275em;
    background-repeat:no-repeat;
    padding:0 .14em;
    box-decoration-break:clone;
    -webkit-box-decoration-break:clone;
}
.hl-dark{color:var(--ink);-webkit-text-fill-color:var(--ink)}
.svc-icon .hl,.cap-icon .hl{fill:var(--hl)}

/* ============ HEADER ============ */
header{
    position:sticky;top:0;z-index:1000;
    background:rgba(255,255,255,.93);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
    padding:1.15rem var(--gutter);
}
.header-container{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.logo{display:flex;align-items:center;line-height:0}
.logo img{height:30px;width:auto;display:block}
nav{display:flex;gap:clamp(1.25rem,2.6vw,2.75rem)}
nav a{
    font-size:var(--f1);text-transform:uppercase;letter-spacing:.16em;font-weight:500;
    color:var(--prose-mute);position:relative;padding-bottom:.25rem;
}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--ink);transition:width .3s var(--ease)}
nav a:hover{color:var(--ink)}
nav a:hover::after{width:100%}

/* ============ HERO ============ */
.hero{
    position:relative;min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    padding:9rem var(--gutter) 6rem;
    background-color:var(--tint);
    background-image:
        linear-gradient(135deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.82) 45%,rgba(255,255,255,.6) 100%),
        url('img/mountains-in-the-fog.jpg');
    background-size:cover,cover;
    background-position:center,center bottom;
    overflow:hidden;
}
/* the 8-module grid the icons are drawn on, made faint */
.hero::before{
    content:'';position:absolute;inset:0;pointer-events:none;
    background-image:
        linear-gradient(to right,rgba(43,43,43,.06) 1px,transparent 1px),
        linear-gradient(to bottom,rgba(43,43,43,.06) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,transparent 70%);
    mask-image:radial-gradient(ellipse at 50% 45%,#000 0%,transparent 70%);
}
.hero-content{position:relative;z-index:2;max-width:940px;text-align:center}
.hero h1{margin-bottom:1.75rem;animation:rise .9s var(--ease) both}
.hero-subtitle{
    font-size:var(--f4);color:var(--prose);font-weight:300;line-height:1.55;
    max-width:66ch;margin:0 auto 2.75rem;animation:rise .9s var(--ease) .1s both;
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.cta-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;animation:rise .9s var(--ease) .2s both}
.cta-button{
    display:inline-flex;align-items:center;gap:.75rem;
    background:var(--ink);color:#fff;border:1px solid var(--ink);
    padding:1.05rem 2.4rem;font-size:var(--f1);letter-spacing:.16em;
    text-transform:uppercase;font-weight:500;
    transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease);
}
.cta-button:hover{background:#000;color:#fff;transform:translateY(-2px)}
.cta-secondary{background:transparent;color:var(--ink);border-color:var(--ink)}
.cta-secondary:hover{background:var(--ink);color:#fff}

/* ============ MANDATE CLARITY ============ */
.mandate{background:var(--ink-deep);color:#fff;padding:8rem var(--gutter)}
.mandate-container{max-width:1100px;margin:0 auto}
.mandate-lead{font-size:var(--f6);color:#fff;margin-bottom:2rem}
.mandate-body{
    font-size:var(--f4);font-weight:300;line-height:1.7;color:rgba(255,255,255,.74);
    max-width:74ch;padding-bottom:3rem;border-bottom:1px solid var(--rule-dark);
}
.mandate-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.75rem 3.5rem;margin-top:3rem}
.mandate-item{display:flex;gap:1.1rem;align-items:flex-start}
.mandate-mark{font-size:var(--f3);line-height:1.5;color:rgba(255,255,255,.42);flex-shrink:0;width:1rem}
.mandate-item .ct{font-size:var(--f3);letter-spacing:.05em;margin-bottom:.5rem;color:#fff}
.mandate-item p{font-size:var(--f2);font-weight:300;line-height:1.65;color:rgba(255,255,255,.66)}

/* ============ ABOUT ============ */
.about{
    display:grid;grid-template-columns:.85fr 1fr;gap:clamp(2.5rem,6vw,6rem);
    align-items:center;padding:var(--sp-loose) var(--gutter);
    max-width:var(--max);margin:0 auto;
}
.about-image{position:relative;aspect-ratio:3/4;background:var(--tint);overflow:hidden}
.about-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.about-content>h2,.about-content>h1{font-size:var(--f6);margin-bottom:1.75rem}
.about-content p{font-size:var(--f3);color:var(--prose);margin-bottom:1.25rem;line-height:1.75;max-width:58ch}
.credentials{
    display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);
    margin-top:3rem;border:1px solid var(--rule);
}
.credential-item{background:var(--paper);padding:1.75rem}
.credential-item .ct{font-size:var(--f1);letter-spacing:.18em;color:var(--prose-mute);margin-bottom:.7rem}
.credential-item p{font-size:var(--f2);color:var(--ink-deep);line-height:1.55}

/* ============ SERVICES ============ */
.services{background:var(--tint);padding:var(--sp) var(--gutter)}
.services-container{max-width:var(--max);margin:0 auto}
.section-header{text-align:center;margin-bottom:4.5rem}
.section-header h2{margin-bottom:1.25rem}
.section-header p{font-size:var(--f4);color:var(--prose);max-width:66ch;margin:0 auto;font-weight:300;line-height:1.6}
.service-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.category{background:var(--paper);padding:3rem 2.5rem;transition:background .35s var(--ease)}
.category:hover{background:#fbfcfd}
.category-icon{width:72px;height:72px;color:var(--ink);margin-bottom:2.25rem}
.category-icon .svc-icon{width:100%;height:100%;display:block}
.category .ct{font-size:var(--f4);margin-bottom:1.4rem}
.category-list{list-style:none}
.category-list li{padding:.65rem 0;color:var(--prose);font-size:var(--f2);border-top:1px solid var(--rule)}
.category-list li:first-child{border-top:0}

/* ============ CAPABILITIES ============ */
.capabilities{background:var(--paper);padding:var(--sp-tight) var(--gutter) var(--sp)}
.cap-container{max-width:var(--max);margin:0 auto}
.cap-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule)}
.cap-tile{background:var(--paper);padding:2.5rem 2rem;transition:background .35s var(--ease)}
.cap-tile:hover{background:var(--tint)}
.cap-icon{width:44px;height:44px;color:var(--ink);margin-bottom:1.5rem}
.cap-icon svg{width:100%;height:100%;display:block}
.cap-tile .ct{font-size:var(--f3);letter-spacing:.05em;margin-bottom:.6rem}
.cap-tile p{font-size:var(--f2);color:var(--prose);line-height:1.6}

/* ============ EXPERTISE ============ */
.expertise{background:var(--paper);padding:var(--sp) var(--gutter)}
.expertise-container{max-width:var(--max);margin:0 auto}
.expertise-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:3.5rem 4rem}
.expertise-card{padding-top:1.75rem;border-top:2px solid var(--ink)}
.expertise-card .ct{font-size:var(--f4);margin-bottom:1rem}
.expertise-card p{font-size:var(--f3);color:var(--prose);line-height:1.7;max-width:58ch}

/* ============ QUOTE ============ */
.quote-section{background:var(--tint);padding:var(--sp-loose) var(--gutter);text-align:center}
.quote-section blockquote{
    max-width:30ch;margin:0 auto 2.25rem;
    font-size:var(--f5);font-weight:300;line-height:1.3;
    text-transform:uppercase;letter-spacing:-.012em;color:var(--ink-deep);
}
.quote-attribution{font-size:var(--f1);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--prose-mute)}

/* ============ NETWORK ============ */
.network{background:var(--paper);padding:var(--sp) var(--gutter)}
.network-container{max-width:var(--max);margin:0 auto}
.reach-map{margin:0 0 4rem}
.reach-map svg{width:100%;height:auto;display:block}
.reach-map .mk{fill:var(--ink);font-family:'Jost',sans-serif;font-size:15px;font-weight:500;letter-spacing:1.6px;text-anchor:middle}
.network-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.region{padding-top:1.75rem;border-top:2px solid var(--ink)}
.region-label{
    display:inline-block;font-size:var(--f1);text-transform:uppercase;letter-spacing:.16em;
    font-weight:500;color:var(--ink);background:var(--hl);padding:.18rem .5rem;margin-bottom:.85rem;
}
.region .ct{font-size:var(--f4);margin-bottom:.85rem}
.region p{font-size:var(--f2);color:var(--prose);line-height:1.65}
.network-note{
    margin-top:4rem;padding-top:1.75rem;border-top:1px solid var(--rule);
    font-size:var(--f2);color:var(--prose-mute);max-width:72ch;
}

/* ---- brandmark block on the homepage ---- */
.brandmark{background:var(--tint);padding:5rem var(--gutter) 4.5rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.brandmark-inner{max-width:var(--max);margin:0 auto;text-align:center}
.brandmark .wordmark{padding:0}
.brandmark-line{margin-top:2.2rem;font-size:var(--f3);font-weight:300;color:var(--prose);max-width:52ch;margin-left:auto;margin-right:auto}

/* ---- sub-heading inside a merged page ---- */
.sub-head{margin-top:5.5rem;padding-top:4rem;border-top:1px solid var(--rule)}
.sub-head h2{font-size:var(--f5)}
.sub-head-dark{border-top-color:rgba(255,255,255,.16)}
.sub-head-dark h2{color:#fff}

/* ---- the wordmark deconstructing, per the brand book ----
   SCHONBACHLER -> SCHONB/ACHLER -> CHONB/CHLER -> whole again.
   Dropped letters go from filled to outlined: the same
   assembled / still-arriving distinction the icons carry. */
.wordmark{text-align:center;padding:.5rem 0 4.5rem}
.wm-line{
    display:flex;justify-content:center;align-items:baseline;
    font-size:clamp(1.6rem,5.2vw,3.75rem);
    font-weight:400;text-transform:uppercase;letter-spacing:.06em;
    color:var(--ink);-webkit-text-stroke:0 var(--ink);
}
.wm-c{transition:-webkit-text-fill-color .7s var(--ease),-webkit-text-stroke-width .7s var(--ease)}
.wm-gap{display:inline-block;width:0;transition:width .8s var(--ease)}
.wordmark.is-split .wm-gap{width:.62em}
.wordmark.is-out .wm-drop{-webkit-text-fill-color:transparent;-webkit-text-stroke-width:1.4px}
.wm-note{margin-top:1.6rem;font-size:var(--f1);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--prose-mute)}

/* ============ VALUES ============ */
.values{background:var(--ink-deep);color:#fff;padding:var(--sp-tight) var(--gutter)}
.values-container{max-width:var(--max);margin:0 auto}
.values-container>h2,.values-container>h1{font-size:var(--f6);text-align:center;margin-bottom:4rem;color:#fff}
.values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5rem}
.value-item{padding-top:1.75rem;border-top:2px solid rgba(255,255,255,.3)}
.value-item .ct{font-size:var(--f4);margin-bottom:.85rem;color:#fff}
.value-item p{font-size:var(--f2);color:rgba(255,255,255,.68);line-height:1.65}

/* ============ CONTACT ============ */
.contact{background:var(--paper);padding:var(--sp-loose) var(--gutter)}
.contact-container{max-width:70ch;margin:0 auto}
.contact-content h2,.contact-content h1{font-size:var(--f6);margin-bottom:1.5rem}
.contact-content p{font-size:var(--f3);color:var(--prose);margin-bottom:1.25rem;line-height:1.75}
.book-cta{margin-top:2.25rem}
.book-note{font-size:var(--f2)!important;color:var(--prose-mute)!important;margin-top:.9rem!important}
.contact-info{
    margin-top:2.5rem;padding-top:1.75rem;border-top:2px solid var(--ink);
    display:flex;flex-wrap:wrap;gap:2.5rem;
}
.contact-info p{margin:0;font-size:var(--f2);color:var(--ink-deep);line-height:1.6}
.contact-info strong{
    display:block;font-size:var(--f1);letter-spacing:.18em;text-transform:uppercase;
    font-weight:500;color:var(--prose-mute);margin-bottom:.6rem;
}
.contact-info a{border-bottom:1px solid var(--hl);padding-bottom:1px}
.contact-info a:hover{border-bottom-color:var(--ink)}

/* ============ FOOTER ============ */
footer{
    background:var(--ink-deep);color:rgba(255,255,255,.55);
    padding:4.5rem var(--gutter);text-align:center;font-size:var(--f2);
    border-top:1px solid var(--rule-dark);
}
footer img{height:26px;width:auto;display:block;margin:0 auto 2.25rem}
footer p{max-width:78ch;margin-left:auto;margin-right:auto;line-height:1.7}
footer strong{color:rgba(255,255,255,.9);font-weight:500}

/* ============ MODULES ASSEMBLING ============ */
.js-motion .svc-icon rect,.js-motion .cap-svg rect{
    transform-box:fill-box;transform-origin:50% 50%;
    transform:scale(.35);opacity:0;
    transition:transform .55s var(--ease),opacity .45s var(--ease);
}
.is-built .svc-icon rect,.is-built .cap-svg rect{transform:none;opacity:1}
.is-built .svc-icon rect[stroke],.is-built .cap-svg rect[stroke]{opacity:.42}

/* ============ RESPONSIVE ============ */
@media (max-width:1100px){
    .about{grid-template-columns:1fr}
    .about-image{max-width:420px;aspect-ratio:4/5}
    .service-categories{grid-template-columns:1fr}
    .cap-grid{grid-template-columns:repeat(2,1fr)}
    .expertise-grid{grid-template-columns:1fr;gap:2.5rem}
    .values-grid,.network-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
    :root{--sp-tight:4rem;--sp:5rem;--sp-loose:6rem}
    .header-container{flex-direction:column;gap:.9rem}
    nav{gap:1rem;flex-wrap:wrap;justify-content:center}
    nav a{letter-spacing:.1em}
    .mandate{padding:5rem var(--gutter)}
    .cap-grid,.values-grid,.network-grid,.mandate-grid,.credentials{grid-template-columns:1fr}
    .contact-info{grid-template-columns:1fr;gap:1.5rem}
    .cta-buttons{flex-direction:column}
    .cta-button{width:100%;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ==========================================================
   MULTI-PAGE
   Interior pages lead with a page head instead of the hero.
   The advisory statement rides every page: as the strip above
   the footer, and in the footer disclaimer itself.
   ========================================================== */

.page-head h1{font-size:var(--f6);margin-bottom:1.25rem}

nav a[aria-current="page"]{color:var(--ink)}
nav a[aria-current="page"]::after{width:100%}

.mandate-strip{background:var(--ink-deep);color:#fff;padding:4rem var(--gutter);text-align:center}
.mandate-strip p{
    font-size:var(--f5);text-transform:uppercase;font-weight:300;
    letter-spacing:-.015em;line-height:1.2;margin:0 auto;max-width:26ch;color:#fff;
}
.mandate-strip a{
    display:inline-block;margin-top:1.75rem;color:rgba(255,255,255,.6);
    font-size:var(--f1);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
    border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:.3rem;
}
.mandate-strip a:hover{color:#fff;border-bottom-color:#fff}

.signposts{padding:var(--sp) var(--gutter);background:var(--paper)}
.signpost-grid{
    max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
    gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.signpost{
    background:var(--paper);padding:2.5rem 2rem;display:flex;
    align-items:baseline;justify-content:space-between;gap:1rem;
    font-size:var(--f3);text-transform:uppercase;letter-spacing:.055em;
    font-weight:500;color:var(--ink-deep);transition:background .35s var(--ease);
}
.signpost:hover{background:var(--tint)}
.signpost span{color:var(--prose-mute);transition:transform .3s var(--ease)}
.signpost:hover span{transform:translateX(4px)}

.footer-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem 2rem;margin:0 auto 2.75rem;max-width:72ch}
.footer-nav a{font-size:var(--f1);text-transform:uppercase;letter-spacing:.16em;font-weight:500;color:rgba(255,255,255,.5)}
.footer-nav a:hover{color:#fff}

@media (max-width:1100px){.signpost-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:720px){.signpost-grid{grid-template-columns:1fr}}