:root{
  --blue:#0051A5;
  --blue-deep:#001B37;
  --blue-mid:#00305F;
  --blue-pale:#9EC4EA;
  --ink:#15202B;
  --slate:#5A6672;
  --paper:#FFFFFF;
  --sheet:#F4F6F9;
  --rule:#D2D8DF;
  --rule-blue:#A9C2DE;

  --display:"IBM Plex Sans Condensed",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  --gutter:clamp(20px,5vw,72px);
  --nav-h:72px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* visible to screen readers only */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:#fff; color:var(--blue); padding:12px 18px;
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
}
.skip:focus{left:0;}

/* ---------- nav ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:60; height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 var(--gutter);
  background:transparent; border-bottom:1px solid rgba(255,255,255,.2);
  transition:background .35s ease, border-color .35s ease;
}
.topbar.over-light{border-bottom-color:rgba(21,32,43,.13);}
.brand{display:block; position:relative; line-height:0; will-change:opacity;}
.js .brand{opacity:0;}
.brand img{height:34px; width:auto; display:block; transition:opacity .35s ease;}
.brand .logo-dark{position:absolute; inset:0; opacity:0;}
.topbar.over-light .logo-light{opacity:0;}
.topbar.over-light .logo-dark{opacity:1;}
@media (max-width:520px){.brand img{height:26px;}}

.nav{display:flex; gap:24px; align-items:center;}
.nav a{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:rgba(255,255,255,.9); text-shadow:0 1px 12px rgba(0,12,26,.55);
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  white-space:nowrap; transition:color .25s;
}
.topbar.over-light .nav a{color:var(--slate); text-shadow:none;}
.bubble{
  width:22px; height:22px; border-radius:50%; border:1.5px solid currentColor;
  display:grid; place-items:center; font-size:10px; font-weight:600; letter-spacing:0;
  transition:background .2s,color .2s,border-color .2s;
}
.nav a:hover,.nav a.active{color:#fff;}
.topbar.over-light .nav a:hover,.topbar.over-light .nav a.active{color:var(--blue);}
.nav a:hover .bubble,.nav a.active .bubble{background:var(--blue); border-color:var(--blue); color:#fff;}
.nav a:focus-visible{outline:2px solid currentColor; outline-offset:4px;}
@media (max-width:760px){
  .nav{gap:16px;}
  .nav .bubble{display:none;}
  .nav a{font-size:10px; letter-spacing:.08em;}
}
@media (max-width:520px){
  .nav{gap:12px;}
  .nav a{font-size:9px; letter-spacing:.04em;}
  .brand img{height:22px;}
}
/* the smallest handsets can't take four word-labels beside the mark */
@media (max-width:359px){
  .nav{gap:14px;}
  .nav .bubble{display:grid; width:20px; height:20px;}
  .nav .label{display:none;}
}

/* ---------- shared ---------- */
.band{position:relative; padding:clamp(64px,9vw,124px) var(--gutter); scroll-margin-top:var(--nav-h);}
.inner{position:relative; z-index:3;}

.eyebrow{
  font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--blue); margin:0 0 24px; display:flex; align-items:center; gap:14px;
}
.eyebrow::after{content:""; flex:1; max-width:160px; height:1px; background:currentColor; opacity:.5;}
.on-dark .eyebrow{color:var(--blue-pale);}

h2{
  font-family:var(--display); font-weight:700; font-size:clamp(30px,4.6vw,58px);
  line-height:1.02; letter-spacing:-.01em; text-transform:uppercase; margin:0 0 34px; max-width:20ch;
}
h3{font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:.02em; text-transform:uppercase; margin:0 0 10px;}
.on-dark,.on-dark h2,.on-dark h3{color:#fff;}

.photo-bg{position:absolute; inset:0; z-index:0; overflow:hidden;}
.photo-bg img{width:100%; height:100%; object-fit:cover; display:block;}
.veil{position:absolute; inset:0; z-index:1;}

.grid-overlay{position:absolute; inset:0; z-index:2; display:flex; justify-content:space-between; padding:0 var(--gutter); pointer-events:none;}
.grid-overlay span{width:0; height:100%; border-left:1px dashed rgba(255,255,255,.26);}
.band-light .grid-overlay span{border-left-color:var(--rule-blue); opacity:.6;}
.band-tint .grid-overlay span{border-left-color:var(--rule-blue); opacity:.7;}
@media (max-width:760px){.grid-overlay span:nth-child(2),.grid-overlay span:nth-child(4){display:none;}}

/* ---------- hero ---------- */
/* pinned photograph — every section below scrolls over it at page speed */
.backdrop{position:fixed; inset:0; z-index:0; overflow:hidden;}
.backdrop img{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.06); filter:saturate(.8) contrast(1.05);}
.backdrop .veil{
  background:
    linear-gradient(180deg, rgba(0,17,36,.6) 0%, rgba(0,17,36,.28) 38%, rgba(0,20,42,.88) 100%),
    linear-gradient(90deg, rgba(0,27,55,.46) 0%, rgba(0,27,55,.04) 68%);
}

.intro{
  min-height:100vh; min-height:100svh; position:relative; z-index:2; background:transparent;
  display:grid; place-items:center; padding-top:var(--nav-h);
}
.intro-scrim{position:absolute; inset:0; z-index:1; background:radial-gradient(58% 46% at 50% 46%, rgba(0,14,30,.6) 0%, rgba(0,14,30,0) 72%);}
.intro-mark{position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; text-align:center; will-change:opacity,transform;}
.intro-logo{
  width:min(46vw,520px); height:auto; display:block;
  opacity:0; transform:translateY(18px) scale(.985);
  animation:markIn 1.3s cubic-bezier(.2,.75,.2,1) .35s forwards;
}
.intro-rule{
  display:block; height:1px; width:0; background:var(--blue-pale); margin-top:26px; opacity:.85;
  animation:ruleOut 1.1s cubic-bezier(.3,.7,.2,1) 1s forwards;
}
.intro-tag{
  margin-top:22px; font-family:var(--mono); font-size:clamp(9.5px,1.2vw,11px);
  letter-spacing:.24em; text-transform:uppercase; color:rgba(255,255,255,.75);
  opacity:0; transform:translateY(10px); animation:markIn .95s ease 1.2s forwards;
}
@keyframes markIn{to{opacity:1; transform:none;}}
@keyframes ruleOut{to{width:min(40vw,440px);}}

.hero{
  min-height:100vh; min-height:100svh; position:relative; z-index:2; background:transparent;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--nav-h) + 40px); padding-bottom:clamp(56px,7vw,90px);
}
.hero h1{
  font-family:var(--display); font-weight:700;
  font-size:clamp(42px,9vw,124px); line-height:.94; letter-spacing:-.015em;
  text-transform:uppercase; margin:0; max-width:15ch; color:#fff;
  text-shadow:0 2px 30px rgba(0,10,25,.5);
}
.hero h1 em{font-style:normal; color:var(--blue-pale);}
.hero-lede{margin:28px 0 0; max-width:52ch; font-size:clamp(16px,1.5vw,19px); color:rgba(255,255,255,.9);}
.scroll-cue{
  position:absolute; right:var(--gutter); bottom:clamp(44px,6vw,76px); z-index:3;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.6); writing-mode:vertical-rl; display:flex; align-items:center; gap:12px;
}
.scroll-cue::after{content:""; width:1px; height:52px; background:rgba(255,255,255,.4);}
@media (max-width:880px){.scroll-cue{display:none;}}

/* ---------- about ---------- */
.band-light{background:var(--paper);}
/* a blurred copy fills the band so the sharp copy can sit uncropped above the card */
.band-light .photo-bg .fill{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transform:scale(1.2); filter:blur(36px) brightness(1.02) saturate(1.05);
}
.band-light .photo-bg .fit{
  position:relative; width:100%; height:100%; object-fit:contain; object-position:center top;
  filter:contrast(1.04) brightness(.88);
}
.band-light .veil{
  background:
    linear-gradient(90deg, rgba(255,255,255,.86) 0%, rgba(255,255,255,.62) 42%, rgba(255,255,255,.2) 100%),
    linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.06) 40%, rgba(255,255,255,.34) 100%);
}
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:center;}
.about-copy p{margin:0; font-size:clamp(17px,1.55vw,21px); line-height:1.55; max-width:42ch;}
.about-visual{position:relative;}
.values{
  position:relative; z-index:3; margin:0 0 0 clamp(0px,3vw,40px);
  background:rgba(255,255,255,.44); -webkit-backdrop-filter:blur(2px) saturate(1.05); backdrop-filter:blur(2px) saturate(1.05);
  border:1px solid rgba(255,255,255,.55); border-top:3px solid var(--blue);
  padding:26px 26px 30px;
  box-shadow:0 26px 52px -28px rgba(0,27,55,.5);
}
.values dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-top:17px;}
.values dt:first-of-type{margin-top:0;}
.values dd{margin:3px 0 0; font-size:15.5px; color:var(--ink);}
@media (max-width:880px){
  .about-grid{grid-template-columns:1fr;}
  .values{margin:0;}
}

/* ---------- services ---------- */
.band-blue{background:var(--blue-deep);}
/* the photograph runs off both page edges and past the cards by an equal
   amount top and bottom — one --bleed, used for both edges */
.svc-wrap{
  --bleed:clamp(44px,7.5vw,124px);
  position:relative; margin:calc(var(--bleed) + clamp(12px,1.6vw,24px)) 0;
}
/* sized explicitly: an absolutely positioned <img> with width/height auto falls
   back to its intrinsic size and ignores the right/bottom offsets */
.svc-photo,.svc-veil{
  position:absolute; z-index:0;
  left:calc(-1 * var(--gutter)); top:calc(-1 * var(--bleed));
  width:calc(100% + 2 * var(--gutter));
  height:calc(100% + 2 * var(--bleed));
}
.svc-photo{
  display:block; object-fit:cover; object-position:center;
  filter:contrast(1.04) brightness(1.06) saturate(1.05);
}
.svc-veil{z-index:1; background:linear-gradient(160deg, rgba(0,17,36,.34) 0%, rgba(0,40,80,.22) 100%);}
.svc-grid{position:relative; z-index:2; display:grid; grid-template-columns:repeat(auto-fit,minmax(266px,1fr)); gap:14px;}
.svc{
  background:rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  border:1px solid rgba(255,255,255,.3); border-top:2px solid var(--blue-pale);
  padding:26px 24px 30px; transition:background .25s, transform .25s;
}
@media (hover:hover){
  .svc:hover{background:rgba(255,255,255,.12); transform:translateY(-3px);}
}
.svc .code{font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:var(--blue-pale); display:block; margin-bottom:18px;}
.svc h3{text-shadow:0 1px 10px rgba(0,12,26,.6);}
.svc p{margin:0; font-size:15.5px; color:rgba(255,255,255,.9); text-shadow:0 1px 10px rgba(0,12,26,.6);}

.spec{margin:0; padding-top:26px; border-top:1px solid rgba(255,255,255,.3); display:grid; gap:18px;}
.spec > div{display:flex; flex-wrap:wrap; gap:6px 22px; align-items:baseline;}
.spec dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-pale); flex:0 0 92px;}
.spec dd{margin:0; font-family:var(--display); font-weight:600; text-transform:uppercase; letter-spacing:.03em;
  font-size:clamp(14px,1.55vw,19px); color:rgba(255,255,255,.92);}
@media (max-width:600px){.spec dt{flex:0 0 100%;}}

/* ---------- difference ---------- */
.statement .photo-bg img{filter:saturate(1.05) contrast(1.02) brightness(1.1);}
.statement .veil{
  background:
    linear-gradient(90deg, rgba(0,17,36,.66) 0%, rgba(0,27,55,.4) 50%, rgba(0,27,55,.18) 100%),
    linear-gradient(180deg, rgba(0,17,36,.18) 0%, rgba(0,17,36,.03) 45%, rgba(0,17,36,.28) 100%);
}
.statement blockquote{
  margin:0; max-width:24ch; text-shadow:0 2px 22px rgba(0,12,26,.55);
  font-family:var(--display); font-weight:700; text-transform:uppercase;
  font-size:clamp(28px,4.4vw,56px); line-height:1.04; letter-spacing:-.01em; color:#fff;
}
.statement blockquote em{font-style:normal; color:var(--blue-pale);}
.statement .sub{margin:22px 0 0; max-width:40ch; color:rgba(255,255,255,.92); font-size:clamp(15px,1.4vw,17px); text-shadow:0 1px 14px rgba(0,12,26,.6);}
.diff-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(238px,1fr)); gap:clamp(26px,3.4vw,48px);
  margin-top:clamp(40px,5vw,66px); padding-top:30px; border-top:1px solid rgba(255,255,255,.32);
}
.diff .num{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--blue-pale); display:block; margin-bottom:16px;}
.diff h3{margin-bottom:12px; text-shadow:0 1px 14px rgba(0,12,26,.65);}
.diff p{
  margin:0; font-size:15px; line-height:1.6; max-width:30ch;
  color:rgba(255,255,255,.88); text-shadow:0 1px 14px rgba(0,12,26,.65);
}

/* ---------- contact ---------- */
.band-tint{background:var(--sheet);}
.band-tint .photo-bg img{filter:contrast(1.02) brightness(1.12); opacity:1;}
.band-tint .veil{
  background:
    linear-gradient(90deg, rgba(244,246,249,.84) 0%, rgba(244,246,249,.56) 46%, rgba(244,246,249,.08) 100%),
    linear-gradient(180deg, rgba(244,246,249,.2) 0%, rgba(244,246,249,.04) 45%, rgba(244,246,249,.3) 100%);
}
.contact-lede{margin:-14px 0 clamp(34px,4.5vw,52px); max-width:46ch; font-size:clamp(16px,1.4vw,18px); color:var(--ink);}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,6vw,80px); align-items:start;}
.contact-list{
  margin:0; display:grid; gap:28px 44px; grid-template-columns:repeat(2,minmax(0,1fr));
  padding-top:26px; border-top:1px solid var(--rule-blue);
}
.contact-list dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue);}
.contact-list dd{margin:4px 0 0; font-family:var(--display); font-weight:600; font-size:clamp(18px,2vw,25px); letter-spacing:.01em;}
.contact-list a{color:var(--blue); text-decoration:none; border-bottom:2px solid var(--rule-blue);}
.contact-list a:hover{border-bottom-color:var(--blue);}
@media (max-width:880px){
  .contact-grid{grid-template-columns:1fr;}
}
@media (max-width:520px){
  .contact-list{grid-template-columns:1fr; gap:22px;}
}

/* ---------- footer ---------- */
footer{
  position:relative; z-index:3; background:var(--blue-deep); color:rgba(255,255,255,.65);
  padding:34px var(--gutter) 44px;
  display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
}
.logo-foot{height:28px; width:auto; display:block;}
footer a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.28);}
footer a.lower{text-transform:lowercase;}
footer a:hover{color:#fff; border-bottom-color:var(--blue-pale);}
.tagline{color:var(--blue-pale);}

/* ---------- project credits ---------- */
.credit{
  position:absolute; z-index:4; margin:0;
  /* same y as the band's eyebrow line, so the two rules read as one row */
  top:clamp(64px,9vw,124px); right:var(--gutter);
  height:calc(11px * 1.65); display:flex; align-items:center; gap:clamp(10px,1.2vw,16px);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--slate); pointer-events:none;
}
.credit::before{
  content:""; flex:0 0 auto; width:clamp(24px,5vw,70px); height:1px;
  background:currentColor; opacity:.45;
}
.credit b{
  font-family:var(--display); font-weight:600; letter-spacing:.05em;
  font-size:clamp(12.5px,1.3vw,15px); color:var(--ink); white-space:nowrap;
}
.on-dark .credit{color:rgba(255,255,255,.75);}
.on-dark .credit b{color:#fff; text-shadow:0 1px 12px rgba(0,12,26,.55);}
/* the hero credit rides the eyebrow row rather than the top of the frame */
.hero-head{display:flex; align-items:center; justify-content:space-between; gap:clamp(16px,3vw,44px);}
.hero-head .eyebrow{margin-bottom:0;}
.hero-head .eyebrow::after{max-width:clamp(30px,7vw,150px);}
.hero .credit{position:static; flex:0 0 auto;}
.js .hero .credit{opacity:0;}
@media (max-width:640px){
  .hero-head{display:block;}
  .hero-head .eyebrow{margin-bottom:12px;}
  .hero .credit{justify-content:flex-end;}
}
@media (max-width:620px){
  .credit::before{width:18px;}
  .credit b{font-size:11.5px;}
}

/* ---------- motion ---------- */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .reveal{opacity:1; transform:none; transition:none;}
  .topbar,.brand img,.svc{transition:none;}
  .intro-logo,.intro-tag{animation:none; opacity:1; transform:none;}
  .intro-rule{animation:none; width:min(40vw,440px);}
}