/* filename: styles.css */

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

:root{
  --ink:#0f2544; --ink-mid:#2c3e5c; --ink-soft:#3e5070; --ink-muted:#5f6d87;
  --rule:#cfd6df; --rule-light:#e6eaf0; --bg:#F8FAFC; --white:#ffffff;
  --band:#002037; --band-line:#123a55;
}

html{ scroll-behavior:smooth; }
body{ background:var(--white); color:var(--ink); font-family:"EB Garamond",serif;
  font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; }
a{ color:inherit; }

main{ animation:fade .35s ease; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Nav ---------- */
nav{ position:fixed; inset:0 0 auto 0; z-index:200; height:64px; padding:0 72px;
  display:flex; align-items:center; justify-content:space-between;
  background:var(--white); border-bottom:1px solid var(--rule-light); }
.nav-logo{ display:flex; align-items:center; gap:12px; color:#000;
  font-family:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:19px; font-weight:500; line-height:1.65; text-decoration:none; }
.logo-mark{ width:34px; height:34px; object-fit:contain; display:block; }
.nav-logo em,.f-brand em{ color:inherit; font-style:normal; font-weight:inherit; }
.nav-links{ display:flex; align-items:center; gap:34px; list-style:none; }
.nav-links a,.nav-cta{ color:var(--ink-mid); font-size:13px; letter-spacing:.12em;
  text-decoration:none; text-transform:uppercase; transition:color .2s,opacity .2s; }
.nav-links a:hover,.nav-links a.active{ color:var(--ink); }
.nav-cta{ border-bottom:1px solid var(--ink); color:var(--ink); padding-bottom:2px; }
.nav-cta:hover{ opacity:.6; }
.menu-toggle{ display:none; border:0; background:transparent; color:var(--ink);
  cursor:pointer; font-family:inherit; font-size:13px; letter-spacing:.1em; text-transform:uppercase; }

/* ---------- Hero (defined ONCE, matches your HTML) ---------- */
.hero{ position:relative; min-height:100vh; display:flex; align-items:center;
  justify-content:center; padding:64px 24px; overflow:hidden; text-align:center; }
.hero-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.hero-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.28); z-index:1; }
.hero-content{ position:relative; z-index:2; max-width:900px; color:var(--white); }
.hero-eyebrow{ margin-bottom:24px; color:rgba(255,255,255,.85);
  font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.hero-h{ margin:0; color:var(--white); font-size:clamp(58px,7.4vw,92px);
  font-weight:400; letter-spacing:-.02em; line-height:1; }

/* ---------- Buttons ---------- */
.btn-dark,.btn-white{ display:inline-block; padding:14px 32px; font-size:13px;
  letter-spacing:.14em; text-decoration:none; text-transform:uppercase; transition:opacity .2s; }
.btn-dark{ background:var(--ink); color:var(--white); }
.btn-white{ background:var(--white); color:var(--ink); }
.btn-dark:hover,.btn-white:hover{ opacity:.75; }

/* ---------- Generic sections ---------- */
.sec{ padding:80px 72px; }
.sec-h{ margin-bottom:16px; font-size:clamp(38px,4vw,54px); font-weight:400; letter-spacing:-.01em; line-height:1.05; }
.sec-label{ display:flex; align-items:center; gap:16px; margin-bottom:24px;
  color:var(--ink-muted); font-size:13px; letter-spacing:.2em; text-transform:uppercase; }
.sec-label::before{ content:""; display:block; width:32px; height:1px; background:var(--rule); }

/* ---------- Intro statement ---------- */
.intro{ text-align:center; }
.intro-statement{ max-width:820px; margin:0 auto;
  font-size:clamp(24px,2.8vw,34px); line-height:1.5; color:var(--ink); }
.intro-statement em{ color:var(--ink-soft); font-style:italic; }

/* ---------- What we do cards ---------- */
.what-we-do{ text-align:center; }
.what-we-do .sec-label{ flex-direction:column; align-items:center; gap:12px; margin-bottom:24px; }
.what-we-do .sec-label::before{ order:-1; }   /* puts the dash line ABOVE the words */
.what-we-do .sec-h{ margin-bottom:40px; }
.wwd-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.wwd-card{ display:flex; flex-direction:column; padding:36px; background:var(--white);
  border:1px solid var(--rule-light); transition:border-color .2s, transform .2s; }
.wwd-card:hover{ border-color:var(--rule); transform:translateY(-2px); }
.wwd-title{ margin-bottom:14px; font-size:26px; font-weight:400; line-height:1.15; }
.wwd-tagline{ flex-grow:1; margin-bottom:24px; color:var(--ink-soft); font-size:17px; line-height:1.7; }
.wwd-link{ color:var(--ink); font-family:"IBM Plex Sans",Helvetica,Arial,sans-serif;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; }
.wwd-link span{ display:inline-block; margin-left:6px; transition:margin-left .2s; }
.wwd-link:hover span{ margin-left:12px; }

/* ---------- Service / approach pages (cfo, fpa, etc.) ---------- */
.page-hero{ padding:112px 72px 56px; background:var(--bg); border-bottom:1px solid var(--rule); }
.page-hero-h{ margin:16px 0; font-size:clamp(42px,5vw,70px); font-weight:400; letter-spacing:-.02em; line-height:1.02; }
.page-hero-h em{ color:var(--ink-soft); font-style:italic; }
.page-hero-p{ max-width:680px; color:var(--ink-soft); font-size:20px; line-height:1.75; }
.scope-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 48px; margin-top:44px; }
.scope-item{ display:flex; gap:12px; padding:16px 0; border-bottom:1px solid var(--rule-light);
  color:var(--ink-soft); font-size:18px; }
.scope-item::before{ content:"—"; color:var(--ink-muted); }
.back-link{ color:var(--ink-muted); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; }
.back-link:hover{ color:var(--ink); }

/* ---------- Principles (approach page) ---------- */
.principles-grid{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:56px; border-top:1px solid var(--rule); }
.principle{ padding:40px 40px 40px 0; border-right:1px solid var(--rule-light); }
.principle:nth-child(3n){ border-right:0; padding-right:0; }
.principle:nth-child(n+4){ border-top:1px solid var(--rule-light); }
.p-num{ margin-bottom:22px; color:var(--ink-muted); font-size:15px; font-style:italic; }
.p-title{ margin-bottom:14px; font-size:27px; font-weight:400; line-height:1.15; }
.p-body{ color:var(--ink-soft); font-size:18px; line-height:1.75; }

/* ---------- Blue CTA band ---------- */
.band{ position:relative; overflow:hidden; padding:80px 72px; background:var(--band); }
.band-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.band-lines path{ fill:none; stroke:var(--band-line); stroke-width:1.5; opacity:.5; }
.band-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.band-h{ color:var(--white); font-size:clamp(42px,5vw,64px); font-weight:400; letter-spacing:-.01em; line-height:1.02; }
.band-h em{ color:rgba(255,255,255,.6); }
.band-right p{ margin-bottom:32px; color:rgba(255,255,255,.78); font-size:19px; line-height:1.8; }

/* ---------- Footer ---------- */
footer{ padding:72px 72px 36px; background:var(--ink); border-top:1px solid rgba(255,255,255,.08); }
.footer-top{ display:grid; grid-template-columns:2.2fr 1fr 1fr 1fr; gap:56px; padding-bottom:48px;
  border-bottom:1px solid rgba(255,255,255,.08); }
.f-brand{ margin-bottom:6px; color:var(--white);
  font-family:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:19px; font-weight:500; line-height:1.65; }
.f-tagline,.f-col-h{ color:rgba(255,255,255,.5); font-size:12px; letter-spacing:.16em; text-transform:uppercase; }
.f-tagline{ margin-bottom:20px; }
.f-about{ max-width:320px; color:rgba(255,255,255,.68); font-size:17px; line-height:1.75; }
.f-col-h{ margin-bottom:18px; }
.f-col ul{ list-style:none; }
.f-col li{ margin-bottom:10px; }
.f-col a,.f-row span:last-child{ color:rgba(255,255,255,.72); font-size:16px; text-decoration:none; cursor:pointer; }
.f-col a:hover{ color:var(--white); }
.f-row{ display:flex; gap:14px; margin-bottom:10px; }
.f-row span:first-child{ min-width:48px; padding-top:2px; color:rgba(255,255,255,.45);
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; padding-top:28px; }
.footer-bottom p,#clock{ color:rgba(255,255,255,.45); font-size:13px; letter-spacing:.06em; }
.legal-disclaimer{ max-width:1000px; margin:32px auto 0; padding:24px 20px 0;
  border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.52);
  font-size:.85rem; line-height:1.55; text-align:center; }

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  nav,.sec,.band,.page-hero,footer{ padding-left:40px; padding-right:40px; }
  .band-inner,.footer-top{ grid-template-columns:1fr 1fr; }
}
@media(max-width:768px){
  nav{ padding:0 20px; }
  .menu-toggle{ display:block; }
  .nav-links{ position:absolute; top:64px; left:0; right:0; display:none; flex-direction:column;
    align-items:flex-start; gap:20px; padding:24px 20px; background:var(--white);
    border-bottom:1px solid var(--rule-light); }
  .nav-links.is-open{ display:flex; }
  .hero,.page-hero{ padding:56px 20px; }
  .page-hero{ padding-top:100px; }
  .hero-h{ font-size:clamp(50px,14vw,72px); }
  .sec,.band,footer{ padding-left:20px; padding-right:20px; }
  .principles-grid,.band-inner,.footer-top,.scope-grid,.wwd-grid{ grid-template-columns:1fr; }
  .principle,.principle:nth-child(n+4){ border-top:0; border-right:0; border-bottom:1px solid var(--rule-light); padding:36px 0; }
  .principle:last-child{ border-bottom:0; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }
}
/* Photo banner behind a page-hero (used on service pages) */
.page-hero.has-photo{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),   /* darkens photo so text reads */
    var(--hero-img) center / cover no-repeat;          /* the photo itself */
  border-bottom:0;
}
.page-hero.has-photo .page-hero-h,
.page-hero.has-photo .page-hero-p{ color:var(--white); }
.page-hero.has-photo .sec-label{ color:rgba(255,255,255,.85); }
.page-hero.has-photo .sec-label::before{ background:rgba(255,255,255,.6); }
.page-hero.has-photo .back-link{ color:rgba(255,255,255,.75); }
.page-hero.has-photo .back-link:hover,
.page-hero.has-photo .page-hero-h em{ color:var(--white); }