/* ============================================================
   Northbridge — bespoke management-consulting site.
   Trust-forward and editorial: Spectral serif over Inter, warm
   paper, deep navy with a brass accent. Standalone.
   ============================================================ */
:root{
  --accent:#2f5fd0; --accent-2:#b0803a;            /* fx3d bar-chart reads these */
  --paper:#f6f4ee; --paper-2:#ece7dc; --navy:#16233a; --ink:#16233a; --ink-2:#39445a;
  --muted:#5c6675; --muted-2:#8a92a1; --brass:#a87d38; --blue:#2f5fd0; --line:rgba(22,35,58,.14); --line-2:rgba(22,35,58,.07);
  --disp:'Spectral', Georgia, serif; --sans:'Inter', system-ui, sans-serif;
  --wrap:1180px; --ease:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:clamp(15px,.4vw+13px,16px); line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; display:block} a{color:inherit; text-decoration:none}
.wrap{width:min(var(--wrap),92vw); margin-inline:auto}
h1,h2,h3{font-family:var(--disp); font-weight:500; margin:0; line-height:1.08; letter-spacing:-.01em}
.eyebrow{font-family:var(--sans); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass)}
.brass{color:var(--brass)}

.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600; font-size:.92rem;
  padding:13px 24px; border-radius:6px; cursor:pointer; border:1px solid transparent; transition:transform .2s var(--ease), background .25s, box-shadow .25s, border-color .25s, color .25s}
.btn-fill{background:var(--navy); color:var(--paper)} .btn-fill:hover{transform:translateY(-2px); box-shadow:0 14px 30px -14px rgba(22,35,58,.6)}
.btn-line{background:transparent; color:var(--navy); border-color:var(--line)} .btn-line:hover{border-color:var(--navy); background:rgba(22,35,58,.04)}

/* nav */
.nav{position:fixed; inset:0 0 auto 0; z-index:40; padding:20px 0; transition:padding .3s var(--ease), background .3s, border-color .3s; border-bottom:1px solid transparent}
.nav.stuck{padding:11px 0; background:rgba(246,244,238,.92); backdrop-filter:blur(12px); border-color:var(--line)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:12px; font-family:var(--disp); font-size:1.3rem; font-weight:600}
.brand .mk{width:32px; height:32px; border-radius:6px; background:var(--navy); color:var(--paper); display:grid; place-items:center; font-family:var(--disp); font-weight:600}
.nav-links{display:flex; gap:28px; font-size:.9rem; color:var(--ink-2); font-weight:500}
.nav-links a:hover{color:var(--navy)}
.nav-cta{display:flex; align-items:center; gap:12px}
.burger{display:none; background:none; border:0; color:var(--navy); cursor:pointer} .burger svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8}

/* hero */
.hero{padding:132px 0 60px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center}
.hero h1{font-size:clamp(2.6rem,5.6vw,4.4rem); font-weight:500}
.hero .lede{color:var(--ink-2); font-size:clamp(1.05rem,1.4vw,1.2rem); margin:24px 0 30px; max-width:46ch}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.hero-note{margin-top:34px; padding-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; display:flex; gap:26px; flex-wrap:wrap}
.hero-note b{color:var(--navy); font-family:var(--disp); font-size:1.05rem}
.dhero-art{position:relative; aspect-ratio:1/1; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 45%, #22355c, #0e1930 72%); border:1px solid var(--line); display:grid; place-items:center; box-shadow:0 40px 80px -44px rgba(22,35,58,.6)}
.dhero-art .art-emoji{font-size:clamp(4rem,10vw,7rem); transition:opacity .6s}
.dhero-art .gl-canvas{position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.dhero-art.gl-fallback .art-emoji{animation:floaty 5s ease-in-out infinite}

/* results band */
.band{background:var(--navy); color:var(--paper)}
.band-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; padding:52px 0; text-align:center}
.band .n{font-family:var(--disp); font-weight:600; font-size:clamp(2rem,4vw,3rem); font-variant-numeric:tabular-nums}
.band .n .brass{color:#e0b567}
.band .l{color:#a9b2c2; font-size:.86rem; margin-top:4px}

/* sections */
.sec{padding:clamp(64px,8vw,120px) 0}
.sec-head{max-width:60ch; margin-bottom:48px}
.sec-head h2{font-size:clamp(2rem,4vw,3rem); margin-top:12px}
.sec-head p{color:var(--muted); margin-top:14px; font-size:1.05rem}

/* services accordion */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; padding:26px 4px; cursor:pointer; width:100%; background:none; border:0; text-align:left; font:inherit; color:var(--ink)}
.acc-head .no{font-family:var(--disp); color:var(--brass); font-size:1.1rem}
.acc-head h3{font-size:clamp(1.4rem,2.6vw,2rem); font-weight:500}
.acc-head .pl{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; position:relative; transition:background .25s, border-color .25s}
.acc-head .pl::before,.acc-head .pl::after{content:""; position:absolute; background:var(--navy); transition:transform .3s var(--ease), background .25s}
.acc-head .pl::before{width:13px; height:1.5px} .acc-head .pl::after{width:1.5px; height:13px}
.acc-item.open .acc-head .pl{background:var(--navy); border-color:var(--navy)}
.acc-item.open .acc-head .pl::before,.acc-item.open .acc-head .pl::after{background:var(--paper)}
.acc-item.open .acc-head .pl::after{transform:scaleY(0)}
.acc-body{max-height:0; overflow:hidden; transition:max-height .4s var(--ease)}
.acc-body-in{padding:0 0 28px 54px; color:var(--muted); max-width:70ch}
.acc-body-in .tags{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.acc-body-in .tags span{font-size:.74rem; letter-spacing:.04em; border:1px solid var(--line); border-radius:999px; padding:5px 13px; color:var(--ink-2)}
@media (prefers-reduced-motion:reduce){.acc-body{transition:none}}

/* industries grid */
.ind{background:var(--paper-2)}
.ind-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.ind-cell{background:var(--paper); padding:28px 22px; transition:background .25s}
.ind-cell:hover{background:var(--paper-2)}
.ind-cell .ic{font-size:1.5rem; margin-bottom:12px}
.ind-cell h4{font-family:var(--disp); font-size:1.2rem; font-weight:500; margin:0}
.ind-cell p{color:var(--muted); font-size:.88rem; margin:6px 0 0}

/* about split */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.about-art{aspect-ratio:5/4; border-radius:12px; overflow:hidden; box-shadow:0 40px 80px -44px rgba(22,35,58,.5)}
.about-art img{width:100%; height:100%; object-fit:cover}
.about ul{list-style:none; padding:0; margin:24px 0 0; display:grid; gap:16px}
.about li{display:flex; gap:14px; color:var(--muted)} .about li b{color:var(--navy)}
.about .chk{flex:0 0 auto; width:26px; height:26px; border-radius:6px; background:rgba(168,125,56,.16); color:var(--brass); display:grid; place-items:center; font-size:.8rem}

/* consultation form */
.book{background:var(--navy); color:var(--paper)}
.book-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.book h2{color:var(--paper); font-size:clamp(2rem,3.6vw,2.8rem)}
.book p{color:#a9b2c2; margin-top:14px; max-width:44ch}
.book .assure{margin-top:24px; display:grid; gap:12px}
.book .assure div{display:flex; gap:12px; color:#c7cede; font-size:.94rem} .book .assure b{color:var(--paper)}
.book-form{background:var(--paper); color:var(--ink); border-radius:14px; padding:clamp(24px,3vw,36px)}
.book-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fld{display:flex; flex-direction:column; gap:7px; margin-bottom:14px}
.fld label{font-size:.72rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.fld input,.fld select,.fld textarea{font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:12px 13px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass)}
.fld textarea{resize:vertical; min-height:76px}
.book-form .btn{width:100%; justify-content:center}
.book-ok{display:none; text-align:center; padding:26px}
.book-ok.show{display:block; animation:fade .5s var(--ease)}
.book-ok .tick{width:60px; height:60px; margin:0 auto 14px; border-radius:50%; background:var(--navy); color:var(--paper); display:grid; place-items:center; font-size:1.6rem}
.book-ok h3{font-family:var(--disp); font-size:1.5rem} .book-ok p{color:var(--muted); margin-top:8px}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* footer */
.foot{padding:56px 0 34px; border-top:1px solid var(--line)}
.foot-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:36px; margin-bottom:40px}
.foot h4{font-family:var(--disp); font-size:1.5rem; margin:0} .foot p{color:var(--muted); max-width:32ch; margin-top:10px}
.foot h5{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin:0 0 14px}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:.9rem;color:var(--muted)} .foot a:hover{color:var(--navy)}
.foot-base{border-top:1px solid var(--line-2); padding-top:20px; color:var(--muted-2); font-size:.84rem}

.rv{opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1; transform:none; transition:none}}

@media (max-width:900px){
  .hero-grid,.about-grid,.book-grid{grid-template-columns:1fr; gap:36px} .dhero-art{max-width:420px; margin-inline:auto}
  .band-grid{grid-template-columns:1fr 1fr; gap:30px 16px} .ind-grid{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr 1fr}
  .nav-links{display:none} .burger{display:block}
  .nav-links.open{display:flex; position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:16px; padding:22px 6vw; background:var(--paper); border-block:1px solid var(--line)}
  .about-art{max-width:460px; margin-inline:auto}
}
@media (max-width:520px){ .band-grid,.ind-grid,.book-form .row{grid-template-columns:1fr} .acc-body-in{padding-left:0} }

/* ============================================================
   Ultra-luxury accent — brushed sheen on the hero highlight
   (light → base → deep, in this template's own accent colour)
   ============================================================ */
h1 .brass{
  background-image:linear-gradient(176deg,
    color-mix(in srgb, var(--brass) 60%, #ffffff) 0%,
    var(--brass) 48%,
    color-mix(in srgb, var(--brass) 72%, #000000) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.20));
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  h1 .brass{ -webkit-text-fill-color:currentColor; background-image:none; }
}