/* ==========================================================================
   Northbridge Navigation — site stylesheet
   Design system per 01_Northbridge_Website_AI_Build_Manual.docx §4
   Written by hand rather than pulled from a CSS framework CDN: §9 sets a
   Lighthouse performance target, and a runtime framework would cost far more
   than the few kilobytes below.
   ========================================================================== */

:root{
  --navy:      #0B2341;   /* §4.1 headings, links, key accents (provisional)  */
  --navy-deep: #071829;
  --navy-soft: #16355E;
  --ink:       #1A1A1A;   /* §4.1 body text                                   */
  --muted:     #5B6672;
  --grey:      #F4F6F8;   /* §4.1 secondary background                        */
  --line:      #E4E8EC;
  --line-soft: #EEF1F4;
  --white:     #FFFFFF;

  --wrap: 1280px;         /* §4.4 max content width 1200–1320px               */
  --gutter: clamp(20px, 5vw, 56px);

  --f-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--white); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.72;
  font-weight:400; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; border:0 }
a{ color:var(--navy); text-decoration:none }
button{ font:inherit }
h1,h2,h3,h4{ font-family:var(--f-display); color:var(--navy); margin:0; font-weight:600; letter-spacing:-.021em; line-height:1.14 }
p{ margin:0 }
ul{ margin:0; padding:0; list-style:none }

/* ---------- layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter) }
.section{ padding-block:clamp(72px, 9vw, 132px) }
.section--tight{ padding-block:clamp(56px, 6vw, 92px) }
.section--grey{ background:var(--grey) }
.section--rule{ border-top:1px solid var(--line) }

.lede{ font-size:clamp(18px, 1.35vw, 20px); line-height:1.68; color:var(--muted); max-width:64ch }
.measure{ max-width:66ch }
.measure-narrow{ max-width:54ch }

/* ---------- type scale ---------- */
.eyebrow{
  font-family:var(--f-body); font-size:12px; font-weight:600;
  letter-spacing:.19em; text-transform:uppercase; color:var(--muted); margin:0 0 22px;
}
.eyebrow--accent{ color:var(--navy-soft) }
.h-display{ font-size:clamp(32px, 4.2vw, 56px); line-height:1.04; letter-spacing:-.032em; font-weight:600 }
.h1{ font-size:clamp(34px, 4.2vw, 58px); letter-spacing:-.028em }
.h2{ font-size:clamp(27px, 2.7vw, 40px); letter-spacing:-.022em }
.h3{ font-size:clamp(20px, 1.5vw, 24px); letter-spacing:-.014em; line-height:1.3 }
.h4{ font-size:17px; letter-spacing:-.008em; line-height:1.4 }

/* ---------- buttons (§4.3) ---------- */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  height:54px; padding-inline:32px; border-radius:2px;
  font-family:var(--f-body); font-size:15px; font-weight:600; letter-spacing:.005em;
  border:1px solid var(--navy); background:var(--white); color:var(--navy);
  transition:background .32s var(--ease), color .32s var(--ease);
  cursor:pointer;
}
.btn:hover{ background:var(--navy); color:var(--white) }          /* §4.3 solid navy on hover */
.btn .arw{ transition:transform .32s var(--ease) }
.btn:hover .arw{ transform:translateX(4px) }
.btn--onDark{ border-color:rgba(255,255,255,.55); background:transparent; color:#fff }
.btn--onDark:hover{ background:#fff; color:var(--navy) }

/* secondary CTA: text link with a subtle arrow (§4.3) */
.link-arrow{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:600; color:var(--navy);
  padding-bottom:3px; border-bottom:1px solid rgba(11,35,65,.28);
  transition:border-color .3s var(--ease);
}
.link-arrow:hover{ border-bottom-color:var(--navy) }
.link-arrow .arw{ transition:transform .3s var(--ease) }
.link-arrow:hover .arw{ transform:translateX(4px) }

:where(a,button,input):focus-visible{ outline:2px solid var(--navy); outline-offset:3px }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:14px 22px; font-size:14px; font-weight:600;
}
.skip:focus{ left:0 }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .35s var(--ease);
}
.site-header.is-scrolled{ border-bottom-color:var(--line) }
.header-inner{ display:flex; align-items:center; gap:36px; height:80px; transition:height .35s var(--ease) }
.site-header.is-scrolled .header-inner{ height:66px }

.brand{ display:flex; align-items:baseline; gap:11px; flex-shrink:0 }
.brand__mark{
  font-family:var(--f-display); font-weight:700; font-size:23px; letter-spacing:-.015em;
  color:var(--navy);
  display:inline-block; line-height:1.05; padding-bottom:3px; border-bottom:2px solid #AA3C3F;
}
.brand__rule{ width:1px; height:17px; background:var(--line); align-self:center }
.brand__sub{
  font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}

.nav{ display:flex; align-items:center; gap:34px; margin-left:auto }
.nav__link{
  position:relative; font-size:14.5px; font-weight:500; color:var(--ink); padding-block:6px;
  transition:color .28s var(--ease);
}
.nav__link:hover{ color:var(--navy) }
.nav__link::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--navy); transform:scaleX(0); transform-origin:left; transition:transform .34s var(--ease);
}
.nav__link:hover::after{ transform:scaleX(1) }
.nav__link[aria-current="page"]{ color:var(--navy); font-weight:600 }
.nav__link[aria-current="page"]::after{ transform:scaleX(1) }
.nav__cta{ margin-left:8px; height:44px; padding-inline:24px; font-size:14px }

.burger{
  display:none; width:44px; height:44px; margin-left:auto; border:1px solid var(--line);
  background:#fff; border-radius:2px; cursor:pointer; position:relative;
}
.burger span{
  position:absolute; left:13px; width:18px; height:1.5px; background:var(--navy);
  transition:transform .3s var(--ease), opacity .2s linear;
}
.burger span:nth-child(1){ top:17px } .burger span:nth-child(2){ top:22px } .burger span:nth-child(3){ top:27px }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0 }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg) }

.mobile-nav{ display:none; border-top:1px solid var(--line); background:#fff }
.mobile-nav.is-open{ display:block }
.mobile-nav a{
  display:block; padding:18px 0; font-size:16px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav a:last-child{ border-bottom:0 }

/* ---------- hero ---------- */
.hero{ padding-block:clamp(64px, 8vw, 104px) clamp(56px, 6vw, 88px) }
.hero__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px, 5vw, 80px); align-items:center }
.hero__title{ margin:0 0 30px }
.hero__title span{ display:block }
.hero__body{ display:grid; gap:20px; max-width:56ch }
.hero__cta{ margin-top:38px }

.page-head{ padding-block:clamp(60px, 7vw, 104px) clamp(34px, 4vw, 54px) }
.page-head .h1{ margin:0 0 26px }

/* ---------- media slots (§8 AI Image Plan) ---------------------------------
   Final artwork drops into /images/ using the filenames below. Until then the
   slot renders as an on-brand plate naming the intended shot, so nothing on
   the page is a stray stock photo that contradicts §7 Visual Language.       */
.media{
  position:relative; margin:0; overflow:hidden; background:var(--grey);
}
.media img{ width:100%; height:100%; object-fit:cover; display:block }
.media--hero{ aspect-ratio:4/3 }
.media--wide{ aspect-ratio:21/9 }
.media--half{ aspect-ratio:3/2 }
.media--tall{ aspect-ratio:4/5 }

.media--pending{
  background:
    linear-gradient(135deg, rgba(11,35,65,.045) 0%, rgba(11,35,65,.012) 46%, rgba(11,35,65,.055) 100%),
    var(--grey);
}
.media--pending::before{
  content:''; position:absolute; inset:14px; border:1px solid rgba(11,35,65,.10); pointer-events:none;
}
.media__note{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(24px, 3vw, 40px); gap:9px;
}
.media__slot{
  font-size:11px; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--navy-soft);
}
.media__concept{ font-size:14px; line-height:1.55; color:var(--muted); max-width:44ch }

/* ---------- statement band ---------- */
.statement{ background:var(--navy); color:#fff }
.statement h2,.statement .h2{ color:#fff }
.statement p{ color:rgba(255,255,255,.76) }
.statement .eyebrow{ color:rgba(255,255,255,.55) }
.statement .rule{ background:rgba(255,255,255,.16) }

/* ---------- grids ---------- */
.grid{ display:grid; gap:clamp(28px, 3vw, 52px) }
.grid--2{ grid-template-columns:repeat(2,1fr) }
.grid--3{ grid-template-columns:repeat(3,1fr) }
.grid--4{ grid-template-columns:repeat(4,1fr) }
.grid--split{ grid-template-columns:1fr 1fr; align-items:center }
.grid--aside{ grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(36px,5vw,88px) }

.rule{ height:1px; background:var(--line); border:0; margin:0 }

/* editorial numbered principles */
.principle{ padding-top:26px; border-top:1px solid var(--line) }
.principle__num{
  font-family:var(--f-display); font-size:12px; font-weight:600; letter-spacing:.13em;
  color:var(--navy-soft); opacity:.72; display:block; margin-bottom:16px;
}
.principle h3{ margin:0 0 12px }
.principle p{ color:var(--muted); font-size:15.5px; line-height:1.66 }

/* service list */
.service{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,3vw,56px); padding-block:34px; border-top:1px solid var(--line) }
.service:last-child{ border-bottom:1px solid var(--line) }
.service__idx{ font-family:var(--f-display); font-size:13px; font-weight:600; color:var(--navy-soft); opacity:.66; padding-top:5px }
.service h3{ margin:0 0 9px }
.service p{ color:var(--muted); font-size:16px; max-width:62ch }

/* foundation cards */
.card{ background:#fff; border:1px solid var(--line); padding:clamp(30px,3vw,46px); display:flex; flex-direction:column }
.card__logo{
  height:34px; display:flex; align-items:center;
  font-family:var(--f-display); font-size:21px; font-weight:700; letter-spacing:-.02em; color:var(--navy);
}
.card__attrs{ margin:26px 0 0; display:grid; gap:13px }
.card__attrs li{ font-size:15.5px; color:var(--muted); padding-left:19px; position:relative }
.card__attrs li::before{
  content:''; position:absolute; left:0; top:11px; width:7px; height:1px; background:var(--navy-soft); opacity:.62;
}
.card__foot{ margin-top:auto; padding-top:32px }

/* contact details */
.contact-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(28px,3vw,56px) }
.contact-block h3{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 18px; font-family:var(--f-body) }
.contact-block address{ font-style:normal; font-size:16.5px; line-height:1.78; color:var(--ink) }
.contact-block a{ border-bottom:1px solid rgba(11,35,65,.24); transition:border-color .3s var(--ease) }
.contact-block a:hover{ border-bottom-color:var(--navy) }

/* ---------- legal pages ---------- */
.legal{ max-width:74ch }
.legal h2{ font-size:clamp(21px,1.7vw,26px); margin:52px 0 16px }
.legal h2:first-of-type{ margin-top:38px }
.legal p{ margin:0 0 18px; color:var(--ink) }
.legal ul{ margin:0 0 18px; padding-left:0; display:grid; gap:11px }
.legal li{ position:relative; padding-left:20px; color:var(--ink) }
.legal li::before{ content:''; position:absolute; left:0; top:13px; width:8px; height:1px; background:var(--navy-soft); opacity:.6 }
.legal__meta{ font-size:14px; color:var(--muted); margin:0 0 8px }

/* ---------- footer ---------- */
.site-footer{ background:var(--grey); border-top:1px solid var(--line) }
.footer-top{ padding-block:clamp(56px,6vw,84px); display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:clamp(32px,4vw,64px) }
.footer-brand .brand__mark{ font-size:19px }
.footer-brand p{ margin-top:18px; font-size:14.5px; line-height:1.75; color:var(--muted); max-width:34ch }
.footer-col h4{ font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 20px }
.footer-col li{ margin-bottom:13px }
.footer-col a{ font-size:15px; color:var(--ink); transition:color .28s var(--ease) }
.footer-col a:hover{ color:var(--navy) }
.footer-bottom{
  border-top:1px solid var(--line); padding-block:26px;
  display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between;
  font-size:13.5px; color:var(--muted);
}
.footer-bottom a{ color:var(--muted) } .footer-bottom a:hover{ color:var(--navy) }

/* ---------- page transition (0.2s fade) ---------- */
body{ opacity:1; transition:opacity .2s ease }
body.is-loading, body.is-leaving{ opacity:0 }

/* ---------- motion (§4.5 subtle fade and soft slide only) ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .38s var(--ease), transform .38s var(--ease) }
.reveal.is-in{ opacity:1; transform:none }
.reveal[data-d="1"]{ transition-delay:.06s }
.reveal[data-d="2"]{ transition-delay:.12s }
.reveal[data-d="3"]{ transition-delay:.18s }

/* ---------- responsive (§4.4 single column, nothing removed) ---------- */
@media (max-width:1020px){
  .hero__grid,.grid--split,.grid--aside{ grid-template-columns:1fr }
  .grid--4{ grid-template-columns:repeat(2,1fr) }
  .grid--3{ grid-template-columns:1fr }
  .contact-grid{ grid-template-columns:1fr 1fr }
  .footer-top{ grid-template-columns:1fr 1fr }
}
@media (max-width:820px){
  .nav{ display:none }
  .burger{ display:block }
  body{ font-size:16.5px }
  .grid--2,.grid--4,.contact-grid,.footer-top{ grid-template-columns:1fr }
  .service{ grid-template-columns:1fr; gap:10px }
  .service__idx{ padding-top:0 }
  .hero{ padding-block:52px 44px }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important }
  html{ scroll-behavior:auto }
  .reveal{ opacity:1; transform:none }
}

@media print{
  .site-header,.site-footer,.media,.btn,.burger{ display:none !important }
  body{ font-size:12pt; color:#000 }
}