@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;1,8..60,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
	--ink:#16273F;
	--ink-deep:#0F1C2E;
	--ink-line:#B9CBD9;
	--ink-line-bright:#E7EEF3;
	--paper:#EFEAE0;
	--paper-alt:#E6E0D2;
	--paper-line:#D6CEBB;
	--text-dark:#1B2A3D;
	--text-mute:#5B6B7D;
	--gold:#C99A3C;
	--coral:#C6512B;
	--white:#FAF8F4;
	--display:'Space Grotesk', sans-serif;
	--body:'Source Serif 4', Georgia, serif;
	--mono:'IBM Plex Mono', monospace;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
	background:var(--paper);
	color:var(--text-dark);
	font-family:var(--body);
	font-size:17px;
	line-height:1.6;
	overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}
img,svg{display:block; max-width:100%;}
:focus-visible{outline:2px solid var(--coral); outline-offset:3px;}

.eyebrow{
	font-family:var(--mono);
	font-size:12px;
	letter-spacing:.16em;
	text-transform:uppercase;
}
.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

/* ---------- NAV ---------- */
header.nav{
	position:fixed; top:0; left:0; right:0; z-index:50;
	background:rgba(22,39,63,0.92);
	backdrop-filter:blur(6px);
	border-bottom:1px solid rgba(185,203,217,0.25);
}
.nav-inner{
	max-width:1180px; margin:0 auto; padding:18px 32px;
	display:flex; align-items:center; justify-content:space-between;
	flex-wrap:wrap; gap:14px;
}
.logo{
	font-family:var(--display); font-weight:700; font-size:19px;
	color:var(--white); letter-spacing:.01em;
	display:flex; align-items:center; gap:10px;
}
.logo-mark{
	width:45px; height:45px; border:1.6px solid var(--gold);
	position:relative; flex:none;
}
.logo-mark::before{
	content:""; position:absolute; left:50%; top:4px; bottom:4px;
	width:1px; background:var(--gold); transform:translateX(-50%);
}
.nav-links{
 	display:flex; gap:30px; list-style:none; flex-wrap:wrap;
}
.nav-links a{
	font-family:var(--mono); font-size:12.5px; letter-spacing:.08em;
	text-transform:uppercase; color:var(--ink-line);
	transition:color .2s;
}
.nav-links a:hover{color:var(--gold);}
.nav-cta{
	font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink); background:var(--gold); padding:9px 16px;
	border:1px solid var(--gold); white-space:nowrap;
	transition:background .2s, color .2s;
}
.nav-cta:hover{background:transparent; color:var(--gold);}

/* ---------- HERO ---------- */
.hero{
	background:linear-gradient(rgba(15,28,46,.86),rgba(15,28,46,.94)), repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(185,203,217,0.09) 40px), repeating-linear-gradient(90deg, transparent, transparent 39px, rgba(185,203,217,0.09) 40px), var(--ink);
	color:var(--white);
	padding:150px 0 90px;
	position:relative;
	overflow:hidden;
}
.hero-grid{
	display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center;
}
.hero-tag{
	color:var(--gold); margin-bottom:22px; display:flex; align-items:center; gap:10px;
}
.hero-tag::before{content:"§"; font-size:13px;}
h1.hero-title{
	font-family:var(--display); font-weight:600;
	font-size:clamp(34px,5vw,58px);
	line-height:1.08; letter-spacing:-.01em;
	max-width:600px;
}
h1.hero-title em{
  font-style:normal; color:var(--gold);
}
.hero-sub{
  font-family:var(--body); font-size:18px; color:var(--ink-line-bright);
  max-width:480px; margin:24px 0 34px; line-height:1.65;
}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
.btn{
  font-family:var(--mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  padding:14px 24px; display:inline-block; border:1px solid var(--gold);
  transition:all .2s;
}
.btn-solid{background:var(--gold); color:var(--ink-deep);}
.btn-solid:hover{background:transparent; color:var(--gold);}
.btn-outline{color:var(--white); border-color:rgba(250,248,244,.4);}
.btn-outline:hover{border-color:var(--gold); color:var(--gold);}

.hero-note{
  margin-top:44px; font-family:var(--mono); font-size:12.5px; color:var(--ink-line);
  display:flex; gap:26px; flex-wrap:wrap;
}
.hero-note strong{color:var(--gold); font-weight:500;}

/* Blueprint diagram */
.diagram-wrap{position:relative;}
.stamp{
  position:absolute; right:2%; bottom:-6px; width:96px; height:96px;
  border:1.6px solid var(--coral); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-14deg);
  font-family:var(--mono); font-size:9.5px; color:var(--coral);
  text-align:center; letter-spacing:.06em; line-height:1.4;
  text-transform:uppercase;
}
.floor-group{opacity:0; transform:translateY(14px); animation:rise .7s ease forwards;}
.floor-group:nth-of-type(1){animation-delay:.15s;}
.floor-group:nth-of-type(2){animation-delay:.35s;}
.floor-group:nth-of-type(3){animation-delay:.55s;}
.floor-group:nth-of-type(4){animation-delay:.75s;}
@keyframes rise{to{opacity:1; transform:translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .floor-group{animation:none; opacity:1; transform:none;}
}

/* ---------- SECTION HEADERS ---------- */
.section{padding:100px 0;}
.section-head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:30px;
  margin-bottom:56px; flex-wrap:wrap; border-bottom:1px solid var(--paper-line); padding-bottom:26px;
}
.section-head .eyebrow{color:var(--coral); margin-bottom:12px; display:block;}
.section-head h2{
  font-family:var(--display); font-weight:600; font-size:clamp(26px,3.4vw,38px);
  color:var(--text-dark); max-width:560px; letter-spacing:-.01em;
}
.section-head p{
  font-family:var(--body); color:var(--text-mute); max-width:340px; font-size:15.5px; padding-bottom:2px;
}
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:translateY(0);}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none;}}

/* ---------- SERVICES ---------- */
.services-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--paper-line); border:1px solid var(--paper-line);
}
.service-card{
  background:var(--paper); padding:34px 26px; position:relative;
}
.service-card .num{
  font-family:var(--mono); font-size:12px; color:var(--coral); letter-spacing:.08em;
}
.service-card h3{
  font-family:var(--display); font-size:19px; font-weight:600; margin:16px 0 12px; letter-spacing:-.005em;
}
.service-card p{font-size:14.5px; color:var(--text-mute); line-height:1.6;}
.corner{position:absolute; width:9px; height:9px; border-color:var(--gold); opacity:.7;}
.corner.tl{top:8px; left:8px; border-top:1.4px solid; border-left:1.4px solid;}
.corner.br{bottom:8px; right:8px; border-bottom:1.4px solid; border-right:1.4px solid;}

/* ---------- APPROACH (navy band) ---------- */
.approach{
  background:var(--ink); color:var(--white);
  background-image:repeating-linear-gradient(0deg, transparent, transparent 39px, rgba(185,203,217,0.06) 40px);
}
.approach .section-head{border-bottom-color:rgba(185,203,217,.25);}
.approach .section-head h2{color:var(--white);}
.approach .section-head p{color:var(--ink-line);}
.approach .eyebrow{color:var(--gold) !important;}

.levels{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;
}
.levels::before{
  content:""; position:absolute; top:19px; left:0; right:0; height:1px;
  background:repeating-linear-gradient(90deg, var(--ink-line) 0 6px, transparent 6px 12px);
}
.level{padding-right:28px; position:relative;}
.level .lvl-num{
  font-family:var(--mono); font-size:13px; color:var(--gold);
  background:var(--ink); display:inline-block; padding-right:10px; position:relative; z-index:2;
}
.level h4{
  font-family:var(--display); font-size:18px; font-weight:600; margin:22px 0 10px;
}
.level p{font-size:14.5px; color:var(--ink-line-bright); line-height:1.6;}

/* ---------- IMPACT (spec table) ---------- */
.spec-sheet{
  border:1px solid var(--text-dark); background:var(--white);
}
.spec-row{
  display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--paper-line);
}
.spec-row:first-child{border-top:none;}
.spec-cell{padding:26px 30px; border-left:1px solid var(--paper-line);}
.spec-cell:first-child{border-left:none;}
.spec-num{
  font-family:var(--mono); font-size:clamp(30px,4vw,44px); color:var(--coral); letter-spacing:-.02em;
}
.spec-label{
  font-family:var(--mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-mute); margin-top:8px;
}

/* ---------- SECTORS ---------- */
.sectors-list{
  display:grid; grid-template-columns:repeat(4,1fr); gap:28px;
}
.sector{
  border-top:2px solid var(--text-dark); padding-top:18px;
}
.sector h4{font-family:var(--display); font-size:17px; font-weight:600; margin-bottom:8px;}
.sector p{font-size:14px; color:var(--text-mute); line-height:1.55;}

/* ---------- TESTIMONIAL ---------- */
.testimonial{
  border-left:3px solid var(--coral); padding:6px 0 6px 32px; max-width:760px;
}
.testimonial p{
  font-family:var(--body); font-style:italic; font-size:22px; line-height:1.55; color:var(--text-dark);
}
.testimonial cite{
  display:block; margin-top:20px; font-family:var(--mono); font-size:12.5px; font-style:normal;
  color:var(--text-mute); letter-spacing:.03em;
}

/* ---------- CLOSING / FOOTER ---------- */
.closing{
  background:var(--ink-deep); color:var(--white); padding:100px 0 0;
}
.closing-inner{text-align:center; padding-bottom:80px; border-bottom:1px solid rgba(185,203,217,.2);}
.closing h2{
  font-family:var(--display); font-weight:600; font-size:clamp(30px,5vw,52px);
  letter-spacing:-.01em; max-width:680px; margin:0 auto 26px;
}
.closing h2 em{font-style:normal; color:var(--gold);}
.closing p{color:var(--ink-line-bright); max-width:460px; margin:0 auto 36px; font-size:16.5px;}
.closing .hero-ctas{justify-content:center;}

.titleblock{
  padding:34px 0; display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.tb-cell{font-family:var(--mono); font-size:11.5px; color:var(--ink-line); letter-spacing:.04em;}
.tb-cell b{display:block; color:var(--white); font-size:12.5px; margin-bottom:6px; letter-spacing:.08em; text-transform:uppercase;}
.tb-cell a:hover{color:var(--gold);}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .hero-grid{grid-template-columns:1fr;}
  .diagram-wrap{max-width:340px; margin:40px auto 0;}
  .services-grid{grid-template-columns:repeat(2,1fr);}
  .levels{grid-template-columns:repeat(2,1fr); row-gap:36px;}
  .levels::before{display:none;}
  .sectors-list{grid-template-columns:repeat(2,1fr); row-gap:30px;}
  .spec-row{grid-template-columns:1fr;}
  .spec-cell{border-left:none; border-top:1px solid var(--paper-line);}
  .spec-row:first-child .spec-cell:first-child{border-top:none;}
  .titleblock{grid-template-columns:repeat(2,1fr); row-gap:26px;}
}
@media (max-width:600px){
  .services-grid{grid-template-columns:1fr;}
  .nav-links{display:none;}
  .hero{padding:130px 0 70px;}
  .testimonial p{font-size:19px;}
}