/* ============================================================
   IRON VALE — "Signal" design system
   Black ground carried by live generative imagery and one
   electric blue. Heavy condensed uppercase display type.
   ============================================================ */

:root{
  --black:#000000;
  --off:#0B0D10;
  --panel:#12161B;
  --panel-2:#181F26;
  --paper:#F7F9FB;
  --paper-2:#EDF2F6;

  --white:#FFFFFF;
  --dim:#9BA6B2;
  --ink:#0B0D10;
  --dim-ink:#5A6673;

  --blue:#1FA9E6;
  --blue-hi:#5FD0FF;
  --blue-dp:#0B6FA8;
  --blue-wash:rgba(31,169,230,.14);

  --line:rgba(255,255,255,.14);
  --line-2:rgba(255,255,255,.26);
  --line-ink:#DCE3EA;

  --dsp:'Archivo','Helvetica Neue',system-ui,sans-serif;
  --bdy:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;

  --max:1340px;
  --pad:clamp(1.25rem,4vw,3.5rem);
  --ease:cubic-bezier(.16,.84,.44,1);
  --hdr:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--black);color:var(--white);
  font:400 16.5px/1.68 var(--bdy);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit}

h1,h2,h3,h4{
  font-family:var(--dsp);font-variation-settings:'wdth' 78,'wght' 700;
  font-weight:700;text-transform:uppercase;line-height:.94;
  letter-spacing:-.005em;margin:0;text-wrap:balance;
}
h1{font-size:clamp(2.9rem,6vw,5.4rem)}
h2{font-size:clamp(2.2rem,4.4vw,3.7rem)}
h3{font-size:clamp(1.35rem,2vw,1.75rem);font-variation-settings:'wdth' 84,'wght' 700}
h4{font-size:1.15rem;font-variation-settings:'wdth' 88,'wght' 700}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}

.w{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.s{padding-block:clamp(4rem,7vw,6.5rem)}
.s-sm{padding-block:clamp(2.5rem,4.5vw,4rem)}
section[id]{scroll-margin-top:calc(var(--hdr) + 12px)}
.light{background:var(--paper);color:var(--ink)}
.light .lead{color:var(--dim-ink)}
.light .kick{color:var(--blue-dp)}
:focus-visible{outline:2px solid var(--blue-hi);outline-offset:3px}

.kick{font:500 11px/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--blue);display:inline-block;margin-bottom:1.5rem}
.lead{color:var(--dim);font-size:1.1rem;max-width:56ch}
.grid{display:grid;gap:clamp(1.25rem,2.5vw,2rem)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;
  font:500 .78rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  padding:1rem 1.7rem;transition:.22s var(--ease);border:1px solid transparent;cursor:pointer}
.btn-p{background:var(--blue);color:#00121D}
.btn-p:hover{background:var(--blue-hi)}
.btn-o{border-color:rgba(255,255,255,.32);color:#fff}
.btn-o:hover{border-color:var(--blue);color:var(--blue)}
.light .btn-o{border-color:var(--line-ink);color:var(--ink)}
.light .btn-o:hover{border-color:var(--blue-dp);color:var(--blue-dp)}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.go{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-dp);white-space:nowrap}

/* ---------- generated imagery ---------- */
.art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease)}
.figure{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0A3352}
.band{position:relative;aspect-ratio:24/8;overflow:hidden;background:#0A3352;min-height:220px}
.band .ov{position:absolute;inset:auto 0 0 0;padding:clamp(1.5rem,4vw,3rem) 0;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent)}
.band .ov h2{max-width:15ch}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{position:absolute;inset:0 0 auto 0;z-index:60}
.hdr.fixed{position:fixed;background:rgba(0,0,0,.9);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:2.5rem;height:var(--hdr)}
/* The lockup is sized off one number so the mark and the wordmark can never
   drift apart. It fills roughly two thirds of the header bar, which is the
   proportion that makes a logo read as an anchor instead of a label. */
.nav .brand,.ftr .brand{--lk:58px;
  display:flex;align-items:center;gap:.62em;text-decoration:none;color:#fff;flex:none;
  font-size:var(--lk);border-bottom:0;padding-block:0}
.brand-mk{width:1em;height:1em;flex:none;display:block}
.brand-wm{display:flex;flex-direction:column;justify-content:center;gap:.075em}
.brand-wm b{font-family:var(--dsp);font-variation-settings:'wdth' 84,'wght' 800;
  font-size:.53em;line-height:.86;letter-spacing:.012em;text-transform:uppercase}
.brand-wm em{font-style:normal;font-family:var(--mono);font-weight:500;
  font-size:.196em;line-height:1;letter-spacing:.44em;text-transform:uppercase;
  color:var(--blue);padding-left:.12em}
.brand:hover .brand-mk{opacity:.85}
.brand-mk{transition:opacity .2s var(--ease)}
/* Footer bar is shorter than the header, so the lockup steps down with it. */
.ftr .brand{--lk:50px;margin-bottom:1.25rem}
.nav .brand:hover,.ftr .brand:hover{color:#fff}
@media (max-width:900px){.nav .brand,.ftr .brand{--lk:46px}}
@media (max-width:480px){.nav .brand,.ftr .brand{--lk:40px}}
.nav ul{list-style:none;display:flex;gap:2.1rem;margin:0 0 0 auto;padding:0}
.nav a{font:500 .74rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:rgba(255,255,255,.72);transition:.2s;padding-block:.4rem;
  border-bottom:1px solid transparent}
.nav a:hover{color:var(--blue)}
.nav a.on{color:#fff;border-bottom-color:var(--blue)}

.burger{display:none;margin-left:auto;background:none;border:0;padding:.5rem;
  cursor:pointer;color:#fff}
.burger span{display:block;width:24px;height:2px;background:currentColor;margin:5px 0;
  transition:.3s var(--ease)}
.burger.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.on span:nth-child(2){opacity:0}
.burger.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:var(--hdr) 0 0 0;background:#000;z-index:55;
  transform:translateX(100%);transition:transform .35s var(--ease);
  padding:2rem var(--pad);display:none;overflow-y:auto}
.drawer.on{transform:none}
.drawer a{display:block;padding:1.15rem 0;border-bottom:1px solid var(--line);
  font-family:var(--dsp);font-variation-settings:'wdth' 84,'wght' 700;
  font-size:1.6rem;text-transform:uppercase}
.drawer a:hover{color:var(--blue)}

/* ============================================================
   HERO
   ============================================================ */
.stage{position:relative;min-height:min(74vh,700px);display:flex;align-items:center;
  background:var(--black);overflow:hidden;
  padding-left:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)))}
.stage .field{position:absolute;inset:0;z-index:1;min-height:0}
.stage-copy{position:relative;z-index:4;display:flex;flex-direction:column;
  justify-content:center;padding:7rem var(--pad) 5rem 0;
  max-width:min(56ch,52%);text-shadow:0 1px 24px rgba(0,0,0,.75)}
.stage-copy h1{max-width:13ch;margin-bottom:1.6rem}
.stage-copy p{color:rgba(255,255,255,.74);max-width:46ch;font-size:1.08rem}
.field{position:relative}
.field::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 26%,
    rgba(0,0,0,.3) 48%,transparent 68%)}

/* interior page header */
.phead{position:relative;min-height:clamp(340px,46vh,460px);display:flex;align-items:flex-end;
  overflow:hidden;background:var(--black)}
.phead .art{opacity:.85}
.phead::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,#000 12%,rgba(0,0,0,.72) 46%,rgba(0,0,0,.35) 100%)}
.phead .w{position:relative;z-index:3;padding-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,4vw,3.5rem);
  padding-top:calc(var(--hdr) + 2rem)}
/* Short, declarative headlines. The detail lives in the lead, where a
   list reads as prose instead of stacking into a wall of caps. */
.phead h1{max-width:13ch;margin-bottom:1.4rem}
.phead .lead{color:rgba(255,255,255,.82);max-width:62ch;font-size:1.14rem}
.crumb{font:500 11px/1 var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:var(--dim);margin-bottom:1.4rem}
.crumb a{color:var(--blue)}

/* ============================================================
   STANDARDS MARQUEE
   ============================================================ */
.bar{border-block:1px solid var(--line);background:var(--off);position:relative;z-index:5}
.ticker{overflow:hidden;padding-block:1.25rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.track{list-style:none;margin:0;padding:0;display:flex;width:max-content;
  animation:ivslide 46s linear infinite}
.track li{display:flex;align-items:center;gap:2.6rem;padding-right:2.6rem;white-space:nowrap;
  font:500 .78rem/1.7 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.track li::after{content:'';width:5px;height:5px;flex:none;
  background:rgba(255,255,255,.28);transform:rotate(45deg)}
.track li.key{color:var(--blue-hi)}
.track li.key::after{background:var(--blue)}
.ticker:hover .track{animation-play-state:paused}
@keyframes ivslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============================================================
   CAPABILITY ROWS
   ============================================================ */
.caps{border-top:1px solid var(--line-ink)}
.capr{display:grid;grid-template-columns:88px 1fr 1.25fr auto;gap:1rem 2.5rem;
  align-items:center;padding:2.2rem 0;border-bottom:1px solid var(--line-ink);
  transition:.24s var(--ease)}
.capr:hover{background:#fff;padding-inline:1.25rem}
.capr .n{font:500 .72rem/1 var(--mono);letter-spacing:.18em;color:#9AA7B4}
.capr p{margin:0;color:var(--dim-ink);font-size:.98rem}

/* ============================================================
   TILES + STACK
   ============================================================ */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-top:3rem}
.tile{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0A3352;
  display:block;transition:.3s var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile:hover .art{transform:scale(1.05)}
.tile .cap{position:absolute;inset:auto 0 0 0;padding:1.5rem 1.35rem;z-index:2;
  background:linear-gradient(to top,rgba(0,0,0,.9),transparent)}
.tile .cap h3{color:#fff;font-size:1.2rem;line-height:1.05}
.tile .cap small{display:block;margin-top:.5rem;font:500 .64rem/1.5 var(--mono);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}

.duo{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:start}
.stack{display:grid;gap:1.25rem}
.stack a{position:relative;aspect-ratio:21/9;overflow:hidden;background:#0A3352;
  display:block;transition:.3s var(--ease)}
.stack a:hover{transform:translateX(4px)}
.stack a:hover .art{transform:scale(1.05)}
.stack a::after{content:'';position:absolute;inset:auto 0 0 0;height:60%;
  background:linear-gradient(to top,rgba(0,0,0,.88),transparent);z-index:1}
.stack h3{position:absolute;left:1.5rem;bottom:1.35rem;z-index:2;color:#fff;font-size:1.3rem}

/* ============================================================
   SPLIT / LISTS / CARDS
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
ul.ticks{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:.9rem}
ul.ticks li{display:flex;gap:1rem;font-size:1rem;color:var(--dim)}
ul.ticks li::before{content:'';flex:none;width:18px;height:2px;margin-top:.72rem;background:var(--blue)}
.light ul.ticks li{color:var(--dim-ink)}
/* A bold lead-in sits on its own line. Inline, the labels wrap at
   different points and the descriptions start at ragged x positions. */
ul.ticks li strong{display:block;color:var(--white);margin-bottom:.1rem}
.light ul.ticks li strong{color:var(--ink)}

.card{border:1px solid var(--line);background:var(--panel);padding:1.9rem;
  display:flex;flex-direction:column;height:100%;transition:.28s var(--ease)}
.card:hover{border-color:var(--line-2);background:var(--panel-2);transform:translateY(-3px)}
.light .card{background:#fff;border-color:var(--line-ink)}
.light .card:hover{border-color:rgba(31,169,230,.5)}
.card .lbl{font:500 .66rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin-bottom:1.1rem}
.light .card .lbl{color:var(--blue-dp)}
.card h3{margin-bottom:.7rem}
.card p{font-size:.95rem;color:var(--dim);margin:0}
.light .card p{color:var(--dim-ink)}

/* statement band */
.stmt{padding-block:clamp(5rem,10vw,9rem);position:relative;overflow:hidden}
.stmt::before{content:'';position:absolute;inset:0;
  background:radial-gradient(70% 120% at 12% 50%,rgba(31,169,230,.16),transparent 62%)}
.stmt .w{position:relative}
.stmt .rule{width:64px;height:3px;background:var(--blue);margin-bottom:2.25rem}
.stmt h2{font-size:clamp(2.6rem,6.4vw,5.6rem);max-width:15ch;line-height:.95}
.stmt h2 em{font-style:normal;color:var(--blue)}

/* accordion */
.acc{border-top:1px solid var(--line-ink)}
.acc details{border-bottom:1px solid var(--line-ink)}
.acc summary{list-style:none;cursor:pointer;padding:1.75rem 3rem 1.75rem 0;position:relative;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.5rem}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:'';position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--blue-dp);border-bottom:2px solid var(--blue-dp);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.acc summary h3{flex:1;min-width:min(100%,280px)}
.acc .meta{font:500 .68rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:#8494A3}
.acc .body{padding:0 3rem 2.25rem 0;max-width:75ch}
.acc .body p{font-size:.97rem;color:var(--dim-ink)}

/* rows (jobs, codes) */
.rows{border-top:1px solid var(--line-ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.5rem;
  padding:1.6rem 0;border-bottom:1px solid var(--line-ink);transition:.24s var(--ease)}
.row:hover{padding-left:.9rem;background:#fff}
.row h3{flex:1;min-width:min(100%,300px);font-size:1.15rem}
.chip{font:500 .64rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line-ink);padding:.4rem .75rem;color:var(--dim-ink);border-radius:99px}
.chip.clr{border-color:rgba(31,169,230,.55);color:var(--blue-dp)}

/* people */
.person .ph{position:relative;aspect-ratio:1;overflow:hidden;background:#0A3352;margin-bottom:1.1rem}
.person h3{font-size:1.15rem;margin-bottom:.3rem}
.person .role{font:500 .66rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue);margin-bottom:.8rem}
.person p{font-size:.92rem;color:var(--dim)}

/* form */
.form{display:grid;gap:1.25rem}
.field-l{display:block;font:500 .66rem/1 var(--mono);letter-spacing:.18em;
  text-transform:uppercase;color:var(--dim);margin-bottom:.6rem}
.form input,.form select,.form textarea{width:100%;padding:.95rem 1rem;
  background:var(--panel);color:#fff;border:1px solid var(--line);
  font:inherit;font-size:.95rem;transition:.2s var(--ease)}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;
  border-color:var(--blue);background:var(--panel-2);box-shadow:0 0 0 3px var(--blue-wash)}
.note{font-size:.84rem;color:var(--dim)}

/* placeholder marker */
.ph-tag{color:var(--blue-hi);font-family:var(--mono);font-size:.85em;
  background:var(--blue-wash);padding:.1em .45em;
  border:1px dashed rgba(31,169,230,.5);white-space:nowrap}
.light .ph-tag{color:var(--blue-dp);background:rgba(31,169,230,.1)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:#000;border-top:1px solid var(--line);padding-block:clamp(3.5rem,6vw,5rem) 0}
.ftr-top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem);
  padding-bottom:3.5rem;border-bottom:1px solid var(--line)}
.ftr h5{font:500 .68rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue);margin:0 0 1.25rem}
/* Column headings are links, so they behave the way they look. */
.ftr h5 a{border-bottom:1px solid transparent;padding-bottom:2px;transition:.2s var(--ease)}
.ftr h5 a:hover{border-bottom-color:var(--blue)}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ftr ul a{font-size:.92rem;color:var(--dim)}
.ftr ul a:hover{color:#fff}
.ftr-brand p{font-size:.92rem;color:var(--dim);max-width:38ch;margin:1.4rem 0}
.ftr-ids{font:500 .75rem/2 var(--mono);color:var(--dim);
  border-left:2px solid var(--blue);padding-left:1rem}
.ftr-btm{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
  padding-block:1.75rem;font-size:.84rem;color:var(--dim)}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.ftr-btm a:hover{color:var(--blue)}
.badges{display:flex;flex-wrap:wrap;gap:.75rem;padding-block:2.25rem;
  border-bottom:1px solid var(--line)}
.badge{border:1px dashed var(--line-2);padding:.7rem 1.1rem;
  font:500 .66rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);display:flex;align-items:center;gap:.6rem}
.badge b{color:var(--blue);font-weight:500}

/* reveal */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}
  .track{animation:none;flex-wrap:wrap;width:auto}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .tiles{grid-template-columns:repeat(2,1fr)}
  .g4{grid-template-columns:repeat(2,1fr)}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media(max-width:920px){
  .nav ul{display:none}
  .burger{display:block}
  .drawer{display:block}
  body.locked{overflow:hidden}
  .stage{min-height:auto;padding-left:0;display:block}
  .stage .field{position:absolute;inset:0 0 auto 0;height:340px}
  .field::after{background:linear-gradient(to bottom,transparent 0%,transparent 52%,
    rgba(0,0,0,.72) 84%,#000 100%)}
  .stage-copy{max-width:none;padding:calc(340px + 1.5rem) var(--pad) 4.5rem;
    text-shadow:none}
    .capr{grid-template-columns:1fr;gap:.55rem}
  .split,.duo{grid-template-columns:1fr}
  .g2,.g3{grid-template-columns:1fr}
  .band{aspect-ratio:16/9}
}
@media(max-width:640px){
  body{font-size:16px}
  .tiles{grid-template-columns:1fr}
  .g4{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr}
  .acc summary{padding-right:2.25rem}
}