*{margin:0;padding:0;box-sizing:border-box}
:root{
  --navy:#1B2A4A;
  --navy-dark:#111D33;
  --navy-mid:#2A3F6A;
  --blue:#3D5A8A;
  --blue-light:#5B7DB1;
  --purple:#4A3570;
  --aqua:#e8f4f0;
  --offwhite:#F4F4F8;
  --white:#ffffff;
  --charcoal:#1A1A2E;
  --mid:#4A4A6A;
  --light:#8888AA;
  --border:#d0d8e4;
  --serif:'Playfair Display',Georgia,serif;
  --sans:'Inter',Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--charcoal);background:var(--white);font-size:16px;line-height:1.6}
a{color:inherit;text-decoration:none}

/* ── NAV ─────────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:#ffffff;
  border-bottom:1px solid #d0d8e4;
  display:flex;
  align-items:stretch;
  height:68px;
}
.nav-logo{
  display:flex;align-items:center;gap:10px;
  padding:0 24px;
  border-right:1px solid var(--border);
  flex-shrink:0;
  text-decoration:none;
}
.nav-logo-text{}
.nav-logo-wordmark{}
.nav-logo-wordmark .brod{
  font-family:"Inter",Arial,sans-serif;font-weight:700;font-size:20px;
  color:#1B2A4A;letter-spacing:0.01em;
}
.nav-logo-wordmark .view{
  font-family:"Inter",Arial,sans-serif;font-weight:700;font-size:20px;
  color:#ffffff;background:#1B2A4A;
  padding:1px 6px;
}
.nav-logo-sub{
  font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
  color:#3D5A8A;font-weight:500;margin-top:2px;
}
.nav-logo-mark{
  font-size:26px;color:var(--purple);opacity:0.65;
  flex-shrink:0;
}
.nav-links{
  display:flex;align-items:stretch;
  list-style:none;
  flex:1;
  padding:0 8px;
}
.nav-links li{display:flex;align-items:stretch}
.nav-links a{
  display:flex;align-items:center;
  font-family:'Inter',Arial,sans-serif;font-size:12px;
  letter-spacing:0.06em;text-transform:uppercase;font-weight:500;
  color:#4A4A6A;
  padding:0 14px;
  border-bottom:3px solid transparent;
  transition:color 0.15s,border-color 0.15s;
  white-space:nowrap;
  text-decoration:none;
}
.nav-links a:hover{color:#1B2A4A}
.nav-links a.active{color:#1B2A4A;font-weight:600;border-bottom-color:#3D5A8A}

/* ── BUTTONS ─────────────────────────────────────────────── */
.btn{
  display:inline-block;font-family:var(--sans);
  font-size:11px;letter-spacing:0.09em;text-transform:uppercase;
  font-weight:600;padding:11px 24px;transition:all 0.2s;cursor:pointer;border:none;
}
.btn-navy{background:var(--navy-mid);color:#fff}
.btn-navy:hover{background:var(--blue)}
.btn-ghost-dark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,0.65)}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,0.06)}
.btn-outline{background:transparent;color:var(--navy);border:1px solid var(--navy)}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--navy-mid)}

/* ── HERO (unified across all pages) ─────────────────────── */
.hero{
  position:relative;
  height:400px;
  margin-top:68px;
  padding:0;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
.hero.hero-home{background-image:linear-gradient(115deg,#1B2A4A 0%,#2A3F6A 35%,#3D5A8A 65%,#4A3570 100%)}
.hero.hero-about{background-image:linear-gradient(115deg,#1B2A4A 0%,#2A3F6A 40%,#3D5A8A 70%,#4A3570 100%)}
.hero.hero-method{background-image:linear-gradient(115deg,#111D33 0%,#2A3F6A 40%,#3D5A8A 75%,#4A3570 100%)}
.hero.hero-portfolio{background-image:linear-gradient(115deg,#1B2A4A 0%,#3D5A8A 45%,#2A3F6A 75%,#4A3570 100%)}
.hero.hero-focus{background-image:linear-gradient(115deg,#111D33 0%,#2A3F6A 45%,#4A3570 100%)}
.hero.hero-contact{background-image:linear-gradient(115deg,#1B2A4A 0%,#2A3F6A 50%,#3D5A8A 100%)}

.hero-panel{
  position:absolute;
  top:0;bottom:0;left:0;
  width:46%;
  background:rgba(17,29,51,0.80);
  display:flex;flex-direction:column;justify-content:center;
  padding:48px 46px;
}
.hero-caption{
  position:absolute;
  right:40px;bottom:24px;
  font-family:'Inter',Arial,sans-serif;font-size:11px;
  letter-spacing:0.1em;text-transform:uppercase;
  color:rgba(255,255,255,0.35);
}
.hero-eyebrow{
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(255,255,255,0.55);margin-bottom:14px;font-weight:500;
}
.hero-title{
  font-family:var(--serif);font-size:clamp(22px,2.6vw,34px);
  color:#fff;font-weight:400;line-height:1.2;margin-bottom:14px;
}
.hero-title-italic{
  font-family:var(--serif);font-size:clamp(19px,2.2vw,27px);
  color:#fff;font-style:italic;line-height:1.4;margin-bottom:14px;
}
.hero-sub{
  font-size:14px;color:rgba(255,255,255,0.65);
  line-height:1.75;font-weight:300;margin-bottom:0;
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ── SECTIONS ────────────────────────────────────────────── */
section{padding:80px 48px}
.section-inner{max-width:1060px;margin:0 auto}
.section-white{background:#fff}
.section-aqua{background:var(--aqua)}
.section-offwhite{background:var(--offwhite)}
.section-navy{background:var(--navy)}
.section-dark{background:var(--navy-dark)}

.eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue);font-weight:700;font-family:var(--sans);margin-bottom:14px;display:block}
.eyebrow-light{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--blue-light);font-weight:700;font-family:var(--sans);margin-bottom:14px;display:block}
.section-label{font-size:13px;font-weight:700;color:var(--navy);font-family:var(--sans);margin-bottom:6px}
.section-label span{color:var(--blue)}
.h2{font-family:var(--serif);font-size:clamp(24px,3vw,38px);color:var(--charcoal);line-height:1.2;margin-bottom:20px;font-weight:400}
.h2-light{font-family:var(--serif);font-size:clamp(24px,3vw,38px);color:#fff;line-height:1.2;margin-bottom:20px;font-weight:400}
.body{font-size:15px;color:var(--mid);line-height:1.85;font-weight:300;margin-bottom:16px}
.body-light{font-size:15px;color:rgba(255,255,255,0.62);line-height:1.85;font-weight:300;margin-bottom:16px}
.pull{font-family:var(--serif);font-size:18px;color:var(--blue);font-style:italic;line-height:1.5;padding-left:20px;border-left:3px solid var(--blue);margin:28px 0}

/* ── TWO COL ─────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:1fr 1.5fr;gap:64px;align-items:start}
.two-col-equal{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}

/* ── PHASES ──────────────────────────────────────────────── */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:rgba(255,255,255,0.07)}
.phase{background:var(--navy);padding:28px 22px;transition:background 0.2s}
.phase:hover{background:var(--navy-mid)}
.phase-n{font-size:10px;color:var(--blue-light);font-weight:700;letter-spacing:0.14em;margin-bottom:10px;font-family:var(--sans)}
.phase-t{font-family:var(--serif);font-size:17px;color:#fff;margin-bottom:8px;font-weight:400}
.phase-d{font-size:12px;color:rgba(255,255,255,0.45);line-height:1.68;font-weight:300}

/* ── CARDS ───────────────────────────────────────────────── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.card{background:#fff;padding:28px 22px;border-top:3px solid var(--blue)}
.card-t{font-size:11px;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;color:var(--navy);margin-bottom:10px;font-family:var(--sans)}
.card-d{font-size:14px;color:var(--mid);line-height:1.75;font-weight:300}

/* ── PORTFOLIO GRID ──────────────────────────────────────── */
.proj-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--border);margin-top:40px}
.proj{background:#fff;padding:28px 24px}
.proj.wide{grid-column:span 2}
.proj-tag{font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--blue);font-weight:700;margin-bottom:8px;font-family:var(--sans)}
.proj-name{font-family:var(--serif);font-size:19px;color:var(--navy);margin-bottom:4px;font-weight:400}
.proj-loc{font-size:12px;color:var(--light);margin-bottom:12px;font-family:var(--sans)}
.proj-desc{font-size:13px;color:var(--mid);line-height:1.72;font-weight:300}
.proj-insight{font-family:var(--serif);font-size:13px;color:var(--blue);font-style:italic;margin-top:12px;padding-top:12px;border-top:1px solid var(--border);line-height:1.5}

/* ── STATS ───────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid rgba(255,255,255,0.1);margin-top:40px}
.stat{padding:28px 24px;border-right:1px solid rgba(255,255,255,0.1)}
.stat:last-child{border-right:none}
.stat-n{font-family:var(--serif);font-size:36px;color:var(--blue-light);font-weight:400;line-height:1;margin-bottom:6px}
.stat-l{font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.08em;text-transform:uppercase;font-family:var(--sans);font-weight:500}

/* ── INSIGHT BOX ─────────────────────────────────────────── */
.insight-box{background:var(--aqua);padding:28px;margin-top:8px}
.insight-label{font-size:10px;letter-spacing:0.16em;text-transform:uppercase;font-weight:700;color:var(--blue);font-family:var(--sans);margin-bottom:12px;display:block}

/* ── PRINCIPLE ───────────────────────────────────────────── */
.principle{background:var(--purple);padding:56px 48px;text-align:center}
.principle-inner{max-width:780px;margin:0 auto}
.principle p{font-family:var(--serif);font-size:clamp(18px,2.2vw,26px);color:#fff;font-style:italic;line-height:1.5}
.principle span{display:block;font-size:10px;color:rgba(255,255,255,0.45);letter-spacing:0.14em;text-transform:uppercase;margin-top:14px;font-family:var(--sans);font-weight:500}

/* ── CTA STRIP ───────────────────────────────────────────── */
.cta-strip{background:var(--aqua);padding:48px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}
.cta-strip h3{font-family:var(--serif);font-size:24px;color:var(--navy);font-weight:400;margin-bottom:6px}
.cta-strip p{font-size:14px;color:var(--mid);font-weight:300}

/* ── FOOTER ──────────────────────────────────────────────── */
footer{background:var(--navy-dark);padding:56px 48px 32px;border-top:1px solid rgba(255,255,255,0.06)}
.footer-inner{max-width:1060px;margin:0 auto}
.footer-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:40px;gap:40px}
.footer-logo-brod{font-family:var(--sans);font-weight:700;font-size:22px;color:#fff}
.footer-logo-view{font-family:var(--sans);font-weight:700;font-size:22px;background:var(--navy-mid);color:#fff;padding:0 6px;border:1px solid rgba(255,255,255,0.12)}
.footer-tagline{font-family:var(--serif);font-size:13px;color:rgba(255,255,255,0.32);font-style:italic;margin-top:8px}
.footer-contact p{font-size:13px;color:rgba(255,255,255,0.48);margin-bottom:3px;font-family:var(--sans);font-weight:300;text-align:right}
.footer-contact a{color:rgba(255,255,255,0.48)}
.footer-contact a:hover{color:#fff}
.footer-bottom{border-top:1px solid rgba(255,255,255,0.07);padding-top:20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-bottom p{font-size:11px;color:rgba(255,255,255,0.22);font-family:var(--sans)}
.footer-nav{display:flex;gap:20px}
.footer-nav a{font-size:11px;color:rgba(255,255,255,0.22);letter-spacing:0.08em;text-transform:uppercase;font-family:var(--sans)}
.footer-nav a:hover{color:rgba(255,255,255,0.6)}

/* ── FORM ────────────────────────────────────────────────── */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;font-weight:600;font-family:var(--sans);color:var(--mid);margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:11px 14px;border:1px solid var(--border);font-family:var(--sans);font-size:14px;color:var(--charcoal);background:#fff;outline:none;transition:border-color 0.2s;font-weight:300}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--blue)}
.form-group textarea{height:110px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form-submit{width:100%;padding:14px;background:var(--navy-mid);color:#fff;border:none;font-family:var(--sans);font-size:12px;letter-spacing:0.1em;text-transform:uppercase;font-weight:700;cursor:pointer;margin-top:8px;transition:background 0.2s}
.form-submit:hover{background:var(--blue)}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:960px){
  .nav-links a{padding:0 10px;font-size:11px}
}
@media(max-width:768px){
  nav{height:auto;flex-wrap:wrap}
  .nav-logo{border-right:none;border-bottom:1px solid var(--border);width:100%;padding:12px 16px}
  .nav-links{padding:0;flex-wrap:wrap;height:auto}
  .nav-links a{padding:12px 14px;font-size:11px;border-bottom:none;border-right:1px solid var(--border)}
  .hero{height:auto;min-height:340px}
  .hero-panel{position:relative;width:100%;padding:36px 24px}
  .hero-caption{display:none}
  section{padding:56px 24px}
  .two-col,.two-col-equal,.form-row{grid-template-columns:1fr}
  .phases{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .proj-grid{grid-template-columns:1fr}
  .proj.wide{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  footer{padding:40px 24px 24px}
  .footer-top{flex-direction:column}
  .footer-contact p{text-align:left}
  .cta-strip{padding:36px 24px;flex-direction:column;align-items:flex-start}
  .principle{padding:40px 24px}
}

/* ── DETAILED PHASES (methodology page) ──────────────────── */
.phase-rows{margin-top:48px}
.phase-row{
  display:grid;grid-template-columns:110px 1fr;gap:40px;
  padding:40px 0;
  border-bottom:1px solid rgba(255,255,255,0.09);
}
.phase-row:first-child{border-top:1px solid rgba(255,255,255,0.09)}
.phase-row-num{
  font-family:var(--serif);font-size:46px;
  color:rgba(255,255,255,0.16);font-weight:400;line-height:1;
}
.phase-row-label{
  font-size:10px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue-light);font-weight:700;margin-bottom:8px;
}
.phase-row-title{
  font-family:var(--serif);font-size:26px;color:#fff;
  font-weight:400;margin-bottom:14px;
}
.phase-row-purpose{
  font-size:15px;color:rgba(255,255,255,0.62);
  line-height:1.8;font-weight:300;margin-bottom:22px;
}
.phase-key-label{
  font-size:10px;letter-spacing:0.16em;text-transform:uppercase;
  color:rgba(255,255,255,0.42);font-weight:700;margin-bottom:10px;
}
.phase-key-list{
  list-style:none;
  display:grid;grid-template-columns:1fr 1fr;gap:5px 28px;
}
.phase-key-list li{
  font-size:13px;color:rgba(255,255,255,0.5);
  font-weight:300;padding-left:14px;position:relative;
}
.phase-key-list li::before{
  content:"\2022";position:absolute;left:0;
  color:var(--blue-light);
}
.outcome-block{
  background:var(--aqua);padding:56px 48px;
}
.outcome-inner{max-width:860px;margin:0 auto}
.outcome-label{
  font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--blue);font-weight:700;margin-bottom:16px;display:block;
}
.outcome-text{
  font-family:var(--serif);font-size:clamp(18px,2vw,24px);
  color:var(--navy);line-height:1.55;font-weight:400;margin-bottom:16px;
}
.outcome-body{
  font-size:16px;color:var(--mid);line-height:1.85;font-weight:300;
}
@media(max-width:768px){
  .phase-row{grid-template-columns:1fr;gap:12px}
  .phase-row-num{font-size:32px}
  .phase-key-list{grid-template-columns:1fr}
  .outcome-block{padding:40px 24px}
}