/* ==========================================================================
   Astor Infrastructure — landing v1
   Near-monochrome editorial. Hierarchy still comes from scale, weight and
   whitespace; red is a mark, not a level of the hierarchy.
   ========================================================================== */

:root{
  --bg:      #0A0A0A;
  --bg-alt:  #F5F5F3;
  --fg:      #F5F5F3;
  --fg-alt:  #0A0A0A;
  --muted:   #8A8A87;
  --rule:    #262625;
  --dim:     #52524E;   /* decorative only — never for text that must be read */

  /* The crimson from astor.png, lifted in luminance until it clears WCAG AA
     on --bg (5.2:1) at any size. Same hue (~352deg), legible as 11px mono. */
  --red:     #FF1F3D;

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad:  clamp(20px, 5vw, 72px);
  --gap:  clamp(28px, 4vw, 56px);
  --rule-w: 1px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--text);
  font-weight:300;
  font-size:clamp(15px, 0.55vw + 13px, 17px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

::selection{ background:var(--red); color:var(--fg-alt); text-shadow:none; }

img{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

a{ color:inherit; text-decoration:none; }
a:focus-visible,
.skip:focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--fg); color:var(--fg-alt);
  padding:12px 18px; font-family:var(--mono); font-size:12px;
}
.skip:focus{ left:12px; top:12px; }

/* ── Shared type roles ───────────────────────────────────── */

/* Red is reserved for MARKS: punctuation, separators, index cues, section
   ticks, and the drawn subject of a plate. It never colours a word. Copy
   stays white, so the accent can be removed without meaning going with it. */
.mk{ color:var(--red); }
.slash{ color:var(--red); }

.mono{
  font-family:var(--mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  line-height:1.5;
}

.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:10px;
  margin-bottom:clamp(28px, 4vw, 52px);
}
.tick{
  width:6px; height:6px; background:var(--red); flex:none;
  display:inline-block;
}

/* Big stacked statement lines, one per row, ending in periods. */
.statement{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.6rem, 7.4vw, 6.4rem);
  line-height:.98;
  letter-spacing:-.035em;
  display:flex; flex-direction:column;
  margin-bottom:clamp(44px, 6vw, 88px);
}
.statement > span{ display:block; }
.statement--tight{ margin-bottom:clamp(36px, 4vw, 64px); }

.section{
  padding:clamp(80px, 11vh, 168px) var(--pad);
  border-top:var(--rule-w) solid var(--rule);
  position:relative;
}
/* A short red lead-in riding on each section rule — the boundary marker. */
.section::before,
.hero__foot::before{
  content:''; position:absolute; top:calc(var(--rule-w) * -1); left:0;
  width:clamp(40px, 5vw, 84px); height:var(--rule-w);
  background:var(--red);
}
.section::before{ left:var(--pad); }

/* ── Nav ─────────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  background:transparent;
  border-bottom:var(--rule-w) solid transparent;
  transition:background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
}
.nav.is-stuck{
  background:rgba(10,10,10,.86);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--rule);
}
.nav__in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:18px var(--pad);
}
.nav__mark{ display:flex; align-items:baseline; gap:10px; }
.nav__mark-name{
  font-family:var(--display); font-weight:800;
  font-size:17px; letter-spacing:-.02em;
}
.nav__mark-sub{
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; color:var(--muted);
}
.nav__links{ display:flex; gap:clamp(14px, 2.2vw, 34px); }
.nav__links a{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted);
  transition:color .25s ease;
}
.nav__links a .slash{ color:var(--dim); margin-right:2px; transition:color .25s ease; }
.nav__links a:hover{ color:var(--fg); }
.nav__links a:hover .slash{ color:var(--red); }
@media (max-width:620px){
  .nav__mark-sub{ display:none; }
  .nav__links a:nth-child(2),
  .nav__links a:nth-child(3){ display:none; }
}

/* ── Hero ────────────────────────────────────────────────── */

.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:flex-end;
  padding:clamp(96px,14vh,150px) var(--pad) clamp(36px,6vh,64px);
  overflow:hidden;
}
.hero__plate{
  position:absolute; inset:0;
  background:url('../assets/img/hero-plan.svg') center/cover no-repeat;
  opacity:.75;
}
.hero__plate::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(125% 90% at 70% 28%, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 60%, rgba(10,10,10,.88) 100%),
    linear-gradient(to top, var(--bg) 2%, rgba(10,10,10,.15) 46%);
}
.hero__grain{
  position:absolute; inset:0; pointer-events:none;
  opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__in{ position:relative; width:100%; container-type:inline-size; }
.hero__eyebrow{ margin-bottom:clamp(16px,2.4vw,28px); }

/* The wordmark is set to fill the content column exactly — never to overrun it.
   ASTOR in Archivo 900 at letter-spacing -.055em measures 3.5706em of ink from
   the origin; the .035em optical pull brings the right edge to 3.5356em, so
   3.58 divides the column with a hair to spare. A crop here is not a crop, it
   is a misspelling: cutting the R at its bowl leaves stem + two bars, and the
   word reads ASTOF. The first declaration is the no-container-query fallback
   and runs a wider divisor to absorb a classic scrollbar. */
.hero__word{
  font-family:var(--display);
  font-weight:900;
  font-size:min(27rem, calc((100vw - 2 * var(--pad)) / 3.66));
  font-size:min(27rem, 100cqw / 3.58);
  line-height:.82;
  letter-spacing:-.055em;
  white-space:nowrap;
  margin:0 0 clamp(28px,4vw,56px);
  transform:translateX(-.035em);
}

.hero__foot{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--gap);
  border-top:var(--rule-w) solid var(--rule);
  padding-top:clamp(20px,2.6vw,32px);
}
.hero__lede{
  max-width:48ch;
  font-size:clamp(15px,.5vw + 14px,18px);
  color:#D8D8D4;
}
.hero__scroll{ flex:none; white-space:nowrap; }
@media (max-width:760px){
  .hero__foot{ flex-direction:column; align-items:flex-start; gap:22px; }
}

/* ── Approach ────────────────────────────────────────────── */

.cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--gap);
  border-top:var(--rule-w) solid var(--rule);
  padding-top:clamp(24px,3vw,40px);
}
.col__label{ margin-bottom:14px; }
.col p:last-child{ color:#C9C9C5; max-width:42ch; }
@media (max-width:900px){ .cols{ grid-template-columns:1fr; gap:36px; } }

/* ── Services ────────────────────────────────────────────── */

.services__head{
  display:flex; align-items:baseline; justify-content:space-between; gap:24px;
}
.services__note{ margin-bottom:clamp(28px,4vw,52px); }

.svc__row{
  display:grid;
  grid-template-columns:64px minmax(0,1.05fr) minmax(0,1fr);
  align-items:baseline;
  gap:clamp(16px,3vw,44px);
  padding:clamp(20px,2.4vw,30px) 0;
  border-top:var(--rule-w) solid var(--rule);
  transition:padding-left .4s cubic-bezier(.2,.7,.3,1);
}
.svc:last-child .svc__row{ border-bottom:var(--rule-w) solid var(--rule); }
.svc__row:last-child{ border-bottom:var(--rule-w) solid var(--rule); }
.svc__no{ color:var(--muted); transition:color .3s ease; }
.svc__name{
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(1.15rem,1.9vw,1.85rem);
  letter-spacing:-.02em;
  line-height:1.12;
}
.svc__desc{ color:var(--muted); font-size:14px; line-height:1.55; max-width:44ch; }

@media (hover:hover){
  .svc__row:hover{ padding-left:16px; }
  .svc__row:hover .svc__no{ color:var(--red); }
}
@media (max-width:780px){
  .svc__row{ grid-template-columns:44px 1fr; gap:8px 16px; }
  .svc__desc{ grid-column:2; margin-top:8px; }
}

/* ── Capabilities ────────────────────────────────────────── */

.cap{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:var(--rule-w) solid var(--rule);
}
.cap__item{
  padding:clamp(26px,3vw,40px) clamp(18px,2vw,32px) clamp(30px,4vw,52px) 0;
  border-right:var(--rule-w) solid var(--rule);
}
.cap__item:last-child{ border-right:0; padding-right:0; }
.cap__label{ margin-bottom:18px; }
.cap__value{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.05rem,1.5vw,1.4rem);
  letter-spacing:-.02em; line-height:1.2;
  margin-bottom:12px;
  text-wrap:balance;
}
.cap__note{ color:var(--muted); font-size:13.5px; line-height:1.55; }
@media (max-width:980px){
  .cap{ grid-template-columns:repeat(2,1fr); }
  .cap__item:nth-child(2n){ border-right:0; padding-right:0; }
  .cap__item:nth-child(-n+2){ border-bottom:var(--rule-w) solid var(--rule); }
}
@media (max-width:560px){
  .cap{ grid-template-columns:1fr; }
  .cap__item{ border-right:0; padding-right:0; border-bottom:var(--rule-w) solid var(--rule); }
  .cap__item:last-child{ border-bottom:0; }
}

/* ── Plates ──────────────────────────────────────────────── */

.plate-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,24px);
}
.plate{ margin:0; }
.plate img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:var(--rule-w) solid var(--rule);
  background:#0E0E0D;
}
.plate figcaption{ margin-top:14px; }
@media (max-width:820px){ .plate-grid{ grid-template-columns:1fr; gap:32px; } }

/* ── Contact ─────────────────────────────────────────────── */

.contact__grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
  border-top:var(--rule-w) solid var(--rule);
  padding-top:clamp(24px,3vw,40px);
}
.contact__line{
  font-family:var(--display); font-weight:600;
  font-size:clamp(1rem,1.4vw,1.3rem); letter-spacing:-.015em;
}
/* Placeholder, held visibly rather than invented. */
.tbd{
  color:var(--muted); font-family:var(--mono); font-weight:400;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  border-bottom:var(--rule-w) dashed var(--dim); padding-bottom:3px;
}
@media (max-width:820px){ .contact__grid{ grid-template-columns:1fr; gap:32px; } }

/* ── Footer ──────────────────────────────────────────────── */

.foot{
  border-top:var(--rule-w) solid var(--rule);
  padding:clamp(56px,7vw,104px) 0 0;
  overflow:hidden;
}
.foot__word{
  font-family:var(--display); font-weight:900;
  font-size:clamp(3.2rem,15.4vw,15rem);
  line-height:.8;
  letter-spacing:-.05em;
  white-space:nowrap;
  padding-left:var(--pad);
  color:var(--fg);
  transform:translateY(.1em);
}
.foot__bar{
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  border-top:var(--rule-w) solid var(--rule);
  margin-top:clamp(30px,4vw,52px);
  padding:22px var(--pad);
}

/* ── Motion ──────────────────────────────────────────────── */

/* Hidden only when JS is present to reveal it again — no-JS gets the full page. */
.js .reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .svc__row, .nav, .nav__links a{ transition:none; }
  .svc__row:hover{ padding-left:0; }
}