@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

:root{
--navy:#0c2340;
--navy-deep:#081729;
--ivory:#f7f4ec;
--ivory-soft:#efe9db;
--gold:#b08d2e;
--gold-bright:#c9a648;
--ink:#1e2a38;
--muted:#5b6b7c;
--line:rgba(12,35,64,.14);
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
scroll-behavior:smooth;
}

body{
background:var(--ivory);
color:var(--ink);
overflow-x:hidden;
}

h1,h2,h3,h1 span,h2 span,h3 span{
font-family:'Playfair Display',serif;
}

/* NAVBAR */

.navbar{
position:sticky;
top:0;
z-index:1000;
display:flex;
justify-content:space-between;
align-items:center;
padding:18px 8%;
background:var(--navy);
border-bottom:3px solid var(--gold);
}

.logo{
display:flex;
align-items:center;
gap:12px;
font-size:26px;
font-weight:700;
font-family:'Playfair Display',serif;
color:var(--ivory);
letter-spacing:1px;
}

.logo img{
width:50px;
height:50px;
object-fit:cover;
border-radius:50%;
background:var(--ivory);
padding:3px;
border:2px solid var(--gold);
}

.navbar ul{
display:flex;
gap:32px;
list-style:none;
}

.navbar a{
text-decoration:none;
color:rgba(247,244,236,.85);
font-weight:500;
font-size:15px;
letter-spacing:.5px;
padding-bottom:4px;
border-bottom:2px solid transparent;
transition:.3s;
}

.navbar a:hover{
color:var(--gold-bright);
border-bottom-color:var(--gold-bright);
}

/* HERO */

.hero{
min-height:92vh;
display:flex;
align-items:center;
padding:0 8%;
background:
linear-gradient(rgba(12,35,64,.92),rgba(8,23,41,.96)),
radial-gradient(circle at top right,rgba(176,141,46,.35),transparent 55%),
var(--navy);
color:var(--ivory);
}

.hero-content{
max-width:850px;
}

.tagline{
color:var(--gold-bright);
letter-spacing:4px;
font-weight:600;
font-size:14px;
text-transform:uppercase;
margin-bottom:24px;
}

.hero h1{
font-size:96px;
line-height:1.02;
font-weight:700;
margin-bottom:30px;
color:var(--ivory);
}

.hero h1 span{
color:var(--gold-bright);
font-style:italic;
}

.description{
font-size:21px;
line-height:1.8;
color:rgba(247,244,236,.82);
max-width:720px;
margin-bottom:40px;
font-weight:300;
}

.hero-buttons{
display:flex;
gap:20px;
}

.btn{
padding:16px 38px;
border-radius:3px;
font-weight:600;
font-size:15px;
letter-spacing:1px;
text-transform:uppercase;
text-decoration:none;
transition:.3s;
}

.gold-btn{
background:var(--gold);
color:var(--navy-deep);
border:1px solid var(--gold);
}

.gold-btn:hover{
background:var(--gold-bright);
box-shadow:0 10px 30px rgba(176,141,46,.35);
transform:translateY(-3px);
}

.dark-btn{
border:1px solid rgba(247,244,236,.5);
color:var(--ivory);
}

.dark-btn:hover{
border-color:var(--gold-bright);
color:var(--gold-bright);
}

/* IMPACT */

.impact{
padding:110px 8%;
text-align:center;
background:var(--ivory);
}

.impact h2{
font-size:52px;
margin-bottom:16px;
color:var(--navy);
}

.impact h2::after{
content:"";
display:block;
width:70px;
height:3px;
background:var(--gold);
margin:22px auto 0;
}

.impact-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:24px;
margin-top:60px;
}

.card{
background:#fff;
padding:44px 36px;
border-radius:4px;
border:1px solid var(--line);
border-top:4px solid var(--gold);
box-shadow:0 2px 10px rgba(12,35,64,.05);
transition:.3s;
}

.card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(12,35,64,.12);
}

.card h3{
font-size:54px;
color:var(--navy);
margin-bottom:10px;
}

.card p{
color:var(--muted);
letter-spacing:.5px;
}

/* RESEARCH */

.research{
padding:110px 8%;
background:var(--navy);
color:var(--ivory);
text-align:center;
}

.research h2{
font-size:52px;
color:var(--ivory);
margin-bottom:16px;
}

.research h2::after{
content:"";
display:block;
width:70px;
height:3px;
background:var(--gold-bright);
margin:22px auto 0;
}

.research p{
color:rgba(247,244,236,.85);
}

.method-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:18px;
margin-top:60px;
}

.method-grid div{
padding:32px 20px;
background:rgba(247,244,236,.05);
border-radius:4px;
border:1px solid rgba(201,166,72,.3);
font-size:19px;
font-weight:600;
letter-spacing:1px;
color:var(--gold-bright);
font-family:'Playfair Display',serif;
transition:.3s;
}

.method-grid div:hover{
background:rgba(201,166,72,.12);
border-color:var(--gold-bright);
}

/* CASE STUDIES */

.cases{
padding:110px 8%;
background:var(--ivory-soft);
}

.cases h2{
text-align:center;
font-size:52px;
color:var(--navy);
margin-bottom:16px;
}

.cases h2::after{
content:"";
display:block;
width:70px;
height:3px;
background:var(--gold);
margin:22px auto 60px;
}

.case-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.case-card{
background:#fff;
padding:48px;
border-radius:4px;
border:1px solid var(--line);
border-left:5px solid var(--gold);
box-shadow:0 2px 10px rgba(12,35,64,.05);
transition:.3s;
}

.case-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 40px rgba(12,35,64,.12);
}

.case-card h3{
font-size:32px;
margin-bottom:15px;
color:var(--navy);
}

.case-card p{
color:var(--muted);
line-height:1.7;
}

.case-card .gold-btn{
display:inline-block;
}

/* FOOTER */

footer{
padding:80px 8%;
text-align:center;
background:var(--navy-deep);
border-top:3px solid var(--gold);
color:rgba(247,244,236,.75);
}

footer h3{
font-size:30px;
color:var(--ivory);
margin-bottom:15px;
}

footer p{
margin:10px 0;
}

/* REVEAL ANIMATION — content is never hidden; hero gets a one-time fade */

@keyframes fadeUp{
from{opacity:0;transform:translateY(24px);}
to{opacity:1;transform:none;}
}

.hero-content.reveal{
animation:fadeUp .9s ease both;
}

@media (prefers-reduced-motion:reduce){
.hero-content.reveal{animation:none;}
}

/* QUOTE BAND */

.quote-band{
background:var(--ivory-soft);
border-bottom:1px solid var(--line);
padding:70px 8%;
text-align:center;
}

.quote-band blockquote{
font-family:'Playfair Display',serif;
font-size:32px;
font-style:italic;
color:var(--navy);
max-width:900px;
margin:auto;
line-height:1.5;
}

.quote-attrib{
margin-top:18px;
color:var(--gold);
letter-spacing:2px;
font-size:13px;
text-transform:uppercase;
font-weight:600;
}

/* SECTION LEDE */

.section-lede{
max-width:640px;
margin:24px auto 0;
color:var(--muted);
font-size:18px;
line-height:1.7;
}

.section-lede.light{
color:rgba(247,244,236,.75);
}

.card-note{
display:block;
margin-top:10px;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--gold);
font-weight:600;
}

/* STORY / TRILOGY */

.story{
padding:110px 8%;
background:#fff;
border-top:1px solid var(--line);
}

.story-inner{
max-width:1100px;
margin:auto;
}

.story h2{
font-size:52px;
color:var(--navy);
margin-bottom:24px;
}

.story-text{
font-size:20px;
line-height:1.8;
color:var(--muted);
max-width:820px;
margin-bottom:60px;
}

.timeline{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;
}

.timeline-item{
border-top:3px solid var(--gold);
background:var(--ivory);
padding:34px 30px;
border-radius:4px;
border-left:1px solid var(--line);
border-right:1px solid var(--line);
border-bottom:1px solid var(--line);
}

.timeline-marker{
display:block;
font-size:12px;
letter-spacing:2px;
color:var(--gold);
font-weight:700;
margin-bottom:14px;
}

.timeline-item h3{
font-size:24px;
color:var(--navy);
margin-bottom:12px;
}

.timeline-item p{
color:var(--muted);
line-height:1.7;
font-size:15px;
margin-bottom:16px;
}

.text-link{
color:var(--navy);
font-weight:600;
text-decoration:none;
border-bottom:2px solid var(--gold);
padding-bottom:2px;
font-size:15px;
transition:.3s;
}

.text-link:hover{
color:var(--gold);
}

.field-stats{
margin-top:60px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1px;
background:var(--line);
border:1px solid var(--line);
}

.field-stats div{
background:var(--navy);
color:var(--ivory);
padding:34px 24px;
text-align:center;
}

.field-stats strong{
display:block;
font-family:'Playfair Display',serif;
font-size:42px;
color:var(--gold-bright);
margin-bottom:8px;
}

.field-stats em{
font-size:22px;
font-style:normal;
}

.field-stats span{
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
color:rgba(247,244,236,.7);
}

/* METHOD STEPS */

.method-grid div p{
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:400;
color:rgba(247,244,236,.7);
letter-spacing:0;
margin-top:12px;
line-height:1.6;
}

.step-num{
display:block;
font-family:'Inter',sans-serif;
font-size:13px;
letter-spacing:3px;
color:rgba(247,244,236,.5);
margin-bottom:10px;
}

/* CIF BAND */

.cif-band{
display:grid;
grid-template-columns:1.2fr 1fr;
gap:50px;
background:#fff;
border:1px solid var(--line);
border-left:5px solid var(--gold);
padding:60px;
border-radius:4px;
box-shadow:0 2px 10px rgba(12,35,64,.05);
text-align:left;
max-width:1150px;
margin:60px auto 0;
}

.cif-text h3{
font-size:34px;
color:var(--navy);
margin:14px 0 18px;
}

.cif-text p{
color:var(--muted);
line-height:1.8;
margin-bottom:22px;
}

.status-line{
color:var(--navy) !important;
font-weight:600;
font-size:15px;
background:var(--ivory-soft);
border-left:3px solid var(--gold);
padding:14px 18px;
}

.cif-text .btn{
display:inline-block;
}

.cif-pillars{
display:flex;
flex-direction:column;
gap:18px;
}

.cif-pillars div{
border:1px solid var(--line);
border-top:3px solid var(--gold);
padding:22px 24px;
border-radius:4px;
background:var(--ivory);
}

.cif-pillars h4{
font-family:'Playfair Display',serif;
color:var(--navy);
font-size:19px;
margin-bottom:8px;
}

.cif-pillars p{
color:var(--muted);
font-size:14px;
line-height:1.6;
margin:0;
}

/* CTA BAND */

.cta-band{
background:
linear-gradient(rgba(12,35,64,.94),rgba(8,23,41,.97)),
radial-gradient(circle at bottom left,rgba(176,141,46,.4),transparent 55%),
var(--navy);
color:var(--ivory);
text-align:center;
padding:110px 8%;
}

.cta-band h2{
font-size:56px;
color:var(--ivory);
margin-bottom:18px;
}

.cta-band p{
color:rgba(247,244,236,.8);
font-size:19px;
max-width:640px;
margin:0 auto 40px;
}

.hero-buttons.center{
justify-content:center;
}

/* MOBILE */

@media(max-width:1000px){

.hero h1{
font-size:56px;
}

.impact-grid,
.method-grid,
.case-grid,
.timeline,
.cif-band{
grid-template-columns:1fr;
}

.field-stats{
grid-template-columns:repeat(2,1fr);
}

.cif-band{
padding:36px 26px;
}

.quote-band blockquote{
font-size:24px;
}

.story h2,
.cta-band h2{
font-size:40px;
}

.navbar{
flex-direction:column;
gap:18px;
}

.navbar ul{
flex-wrap:wrap;
justify-content:center;
gap:18px;
}

.hero-buttons{
flex-direction:column;
}

}

/* ============================================================
   MAKE IT MOVE 2026 — campaign banner + homepage spotlight
   (Seasonal: safe to remove/simplify after October 2026)
   ============================================================ */

.mim-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:13px 20px;
  background:linear-gradient(90deg,#0c2340,#3d1f5c 45%,#7a1f4e 80%,#c9552c);
  color:#f7f4ec;
  text-decoration:none;
  font-family:'Inter',sans-serif;
}
.mim-banner:hover{filter:brightness(1.08);}
.mim-banner img{
  height:22px;width:22px;border-radius:50%;object-fit:cover;
  flex-shrink:0;
}
.mim-banner .mim-banner-text{
  font-size:13.5px;
  letter-spacing:.02em;
  text-align:center;
}
.mim-banner .mim-banner-text strong{
  font-weight:700;
  letter-spacing:.04em;
}
.mim-banner .mim-banner-cta{
  font-weight:700;
  font-size:12.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:6px 16px;
  border-radius:999px;
  background:rgba(247,244,236,.14);
  border:1px solid rgba(247,244,236,.35);
  white-space:nowrap;
  transition:background .2s ease;
}
.mim-banner:hover .mim-banner-cta{background:rgba(247,244,236,.26);}

/* ---- homepage spotlight ---- */
.mim-spotlight{
  position:relative;
  overflow:hidden;
  padding:90px 8% 100px;
  background:
    radial-gradient(60% 55% at 20% 15%, rgba(61,107,255,.30), transparent 60%),
    radial-gradient(55% 50% at 85% 85%, rgba(201,85,44,.28), transparent 60%),
    radial-gradient(50% 45% at 90% 10%, rgba(122,31,78,.30), transparent 60%),
    var(--navy-deep);
  color:var(--ivory);
  text-align:center;
}
.mim-spotlight-inner{
  position:relative;
  z-index:2;
  max-width:820px;
  margin:0 auto;
}
.mim-spotlight img.mim-spotlight-logo{
  width:88px;height:88px;border-radius:50%;object-fit:cover;
  margin:0 auto 26px;
  box-shadow:0 0 44px -6px rgba(201,85,44,.55);
}
.mim-spotlight .mim-eyebrow{
  font-family:'Inter',sans-serif;
  font-size:12.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#9fd6e6;
  margin-bottom:22px;
}
.mim-spotlight h2{
  font-family:'Playfair Display',serif;
  font-weight:700;
  font-style:italic;
  font-size:clamp(40px,6vw,72px);
  line-height:1.03;
  margin-bottom:20px;
  background:linear-gradient(100deg,#ffffff 0%,#f4c86b 40%,#e8783a 75%,#c9552c 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.mim-spotlight .mim-spotlight-sub{
  font-size:16px;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:600;
  color:#f7f4ec;
  margin-bottom:10px;
}
.mim-spotlight .mim-spotlight-date{
  font-family:'Inter',sans-serif;
  font-size:14px;
  letter-spacing:.08em;
  color:#9fd6e6;
  margin-bottom:26px;
}
.mim-spotlight .mim-spotlight-desc{
  font-size:17px;
  line-height:1.7;
  color:rgba(247,244,236,.8);
  max-width:600px;
  margin:0 auto 38px;
}
.mim-spotlight .hero-buttons{justify-content:center;}
.mim-btn{
  padding:16px 38px;
  border-radius:999px;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-decoration:none;
  transition:.3s;
  display:inline-block;
}
.mim-btn-primary{
  background:linear-gradient(120deg,#3d6bff,#c9552c 85%);
  color:#fff;
  box-shadow:0 10px 30px -8px rgba(201,85,44,.5);
}
.mim-btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 36px -6px rgba(201,85,44,.65);}
.mim-btn-ghost{
  border:1px solid rgba(247,244,236,.4);
  color:var(--ivory);
}
.mim-btn-ghost:hover{background:rgba(247,244,236,.08);}

.mim-spotlight-note{
  position:relative;z-index:2;
  margin-top:44px;
  font-family:'Inter',sans-serif;
  font-size:13.5px;
  color:rgba(247,244,236,.6);
}
.mim-spotlight-note a{color:#9fd6e6;text-decoration:underline;}

/* ---- reciprocal research-credibility band, used on make-it-move.html ---- */
.mim-research-band{
  border-radius:14px;
  padding:56px 44px;
  background:linear-gradient(160deg, rgba(61,107,255,.10), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.09);
}
.mim-research-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  margin-top:34px;
}
.mim-research-stat{
  border-left:2px solid rgba(255,255,255,.12);
  padding-left:18px;
}
.mim-research-stat strong{
  display:block;
  font-family:'Barlow Condensed',sans-serif;font-weight:800;font-style:italic;
  font-size:38px;
  margin-bottom:6px;
}
.mim-research-stat span{
  font-size:13.5px;color:#9aa0b4;line-height:1.5;display:block;
}

@media (max-width:640px){
  .mim-banner{flex-direction:column;text-align:center;padding:14px 16px;}
  .mim-spotlight{padding:70px 6% 70px;}
  .mim-research-grid{grid-template-columns:1fr;gap:22px;}
}

/* ============================================================
   TEAM ORG CHART — three-tier flowchart (Leadership / Heads / Assistants)
   ============================================================ */
.org-chart{
  padding:20px 6% 80px;
  overflow-x:auto;
}
.org-chart-inner{
  min-width:1180px;
  max-width:1400px;
  margin:0 auto;
}

.org-tier1{
  display:flex;justify-content:center;gap:28px;flex-wrap:wrap;
  margin-bottom:0;
}
.org-node{
  background:var(--navy);
  border:1px solid var(--gold);
  border-radius:6px;
  padding:20px 26px;
  text-align:center;
  min-width:190px;
}
.org-node h4{
  font-family:'Playfair Display',serif;
  font-size:18px;
  color:var(--ivory);
  margin-bottom:6px;
  font-weight:600;
}
.org-node p{
  font-size:11.5px;
  color:var(--gold-bright);
  text-transform:uppercase;
  letter-spacing:1.2px;
  font-weight:600;
}
.org-node.lead{box-shadow:0 8px 24px rgba(12,35,64,.18);}

.org-connector-v{
  width:1px;height:34px;
  background:var(--gold);
  margin:0 auto;
}
.org-connector-h{
  height:1px;
  background:var(--gold);
  margin:0 auto;
}

.org-tier2{
  display:flex;
  gap:18px;
  padding-top:0;
}
.org-dept{
  flex:1;
  min-width:150px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.org-dept-tick{
  width:1px;height:24px;
  background:var(--line);
}
.org-node.head{
  background:var(--ivory-soft);
  border:1px solid var(--navy);
  min-width:150px;
  width:100%;
}
.org-node.head h4{color:var(--navy);font-size:15px;}
.org-node.head p{color:var(--muted);font-weight:500;letter-spacing:.6px;}

.org-node.assistant{
  background:transparent;
  border:1px dashed var(--line);
  min-width:150px;
  width:100%;
  padding:14px 18px;
}
.org-node.assistant h4{color:var(--navy);font-size:13.5px;}
.org-node.assistant p{color:var(--muted);font-size:10.5px;}

.org-legend{
  display:flex;gap:26px;justify-content:center;flex-wrap:wrap;
  margin-top:36px;
  font-size:12px;color:var(--muted);
}
.org-legend span{display:inline-flex;align-items:center;gap:8px;}
.org-legend i{width:14px;height:14px;border-radius:3px;display:inline-block;}
.org-legend .sw-lead{background:var(--navy);border:1px solid var(--gold);}
.org-legend .sw-head{background:var(--ivory-soft);border:1px solid var(--navy);}
.org-legend .sw-assist{background:transparent;border:1px dashed var(--line);}

@media (max-width:900px){
  .org-chart-inner{min-width:1000px;}
}

/* STAFF PORTAL
   A sign-in gateway, so the heading should frame the Sign In button rather
   than push it below the fold. Scoped to .hero-staff so no other page's
   hero changes. */

.hero-staff{
min-height:auto;
padding:112px 8% 96px;
}

.hero-staff .tagline{
display:inline-flex;
align-items:center;
gap:10px;
padding:8px 16px;
border:1px solid rgba(212,175,55,.35);
border:1px solid color-mix(in srgb,var(--gold-bright) 40%,transparent);
border-radius:999px;
font-size:12px;
letter-spacing:3px;
margin-bottom:30px;
}

.hero-staff .lock-dot{
width:7px;
height:7px;
border-radius:50%;
background:var(--gold-bright);
box-shadow:0 0 0 4px color-mix(in srgb,var(--gold-bright) 20%,transparent);
}

.hero-staff h1{
font-size:clamp(46px,6.2vw,80px);
line-height:1.04;
letter-spacing:-.5px;
margin-bottom:28px;
}

/* the qualifier reads as a subline, not a second headline */
.hero-staff h1 span{
display:block;
margin-top:12px;
font-size:.44em;
font-weight:600;
letter-spacing:0;
line-height:1.2;
}

.hero-staff .description{
font-size:18px;
line-height:1.75;
max-width:640px;
margin-bottom:22px;
}

.hero-staff .hero-buttons{
margin-top:34px;
flex-wrap:wrap;
}

@media(max-width:1000px){
.hero-staff{padding:64px 7% 72px;}
.hero-staff h1{font-size:44px;}
.hero-staff h1 span{font-size:.5em;}
.hero-staff .description{font-size:16px;}
}

/* the restricted pill has to stay on one line on a phone */
@media(max-width:480px){
.hero-staff .tagline{
font-size:11px;
letter-spacing:1.5px;
padding:7px 13px;
gap:8px;
white-space:nowrap;
}
}

/* NAV
   At laptop widths the eight links wrapped inside themselves ("Make It Move
   / 2026", "Case / Studies") and crowded the ARF wordmark. Keep every label
   on one line, keep the wordmark from being squeezed, and let spacing and
   size tighten with the viewport instead of a fixed 32px gap. Below 1000px
   the existing stacked layout still takes over. */
.navbar a{white-space:nowrap;}
.navbar .logo{flex-shrink:0;}

@media(min-width:1001px){
.navbar{padding:18px clamp(24px,5vw,8%);gap:28px;}
.navbar ul{gap:clamp(14px,1.9vw,32px);}
.navbar a{font-size:clamp(13.5px,1.15vw,15px);}
}