/* ============ TOKENS ============ */
:root{
  /* Palette taken from the previous sumanmetals.com: white ground, #0077FF blue.
     Single committed light theme - no dark variant. */
  --ink:#003C9E; --navy:#002E7A; --blue:#0077FF; --blue-lt:#4DA3FF;
  --accent:#0077FF; --accent-dp:#0055DD;
  --ground:#F5F8FC; --surface:#FFFFFF; --surface-2:#EDF3FB;
  --line:#DDE6F2; --line-soft:#EBF1F9;
  --text:#151F2B; --muted:#55616F; --faint:#66727F;
  --hero-ink:#FFFFFF; --hero-accent:#BFD9FF;
  --btn-bg:#0055DD; --btn-fg:#FFFFFF;
  --shadow:0 1px 2px rgba(0,60,158,.05), 0 12px 32px -12px rgba(0,60,158,.20);
  --d-fast:.18s; --d:.4s; --ease:cubic-bezier(.22,.61,.36,1);
  --maxw:1240px; --gut:clamp(20px,4.5vw,64px);
  --f-disp:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--text);
  font-family:var(--f-body); font-size:16.5px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--f-disp); font-weight:700; line-height:1.06;
  letter-spacing:-.022em; text-wrap:balance; margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut)}
.sec{padding-block:clamp(72px,9vw,132px); position:relative}

/* eyebrow — carries real data, not decoration */
.eyebrow{font-family:var(--f-mono); font-size:11.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-dp);
  display:flex; align-items:center; gap:12px; margin-bottom:20px}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--line); max-width:180px}

.h-sec{font-size:clamp(31px,4.6vw,54px)}
.lede{font-size:clamp(16.5px,1.6vw,19px); color:var(--muted); max-width:64ch; margin-top:18px}

/* ============ DIAGONAL MOTIF (from brochure) ============ */
.diag{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.diag i{position:absolute; display:block; transform-origin:center;
  transform:rotate(-38deg); will-change:transform}

/* ============ NAV ============ */
#progress{position:fixed; top:0; left:0; height:3px; width:0%; z-index:120;
  background:linear-gradient(90deg,var(--accent),var(--navy)); transition:width .1s linear}
header{position:fixed; top:0; left:0; right:0; z-index:110;
  --nav-fg:#F4F7FC; --nav-sub:#5AA2F5;
  transition:background var(--d) var(--ease), box-shadow var(--d) var(--ease),
             backdrop-filter var(--d) var(--ease), border-color var(--d) var(--ease);
  border-bottom:1px solid transparent}
header.solid{--nav-fg:var(--text); --nav-sub:var(--accent-dp);
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.5); border-bottom-color:var(--line);
  box-shadow:0 6px 24px -18px rgba(8,20,46,.5)}
.navbar{display:flex; align-items:center; gap:22px;
  height:74px; transition:height var(--d) var(--ease)}
header.solid .navbar{height:64px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex:none}
.brand svg{width:32px; height:32px; flex:none; transition:transform .5s var(--ease)}
.brand:hover svg{transform:rotate(90deg)}
.brand-tx{display:flex; flex-direction:column; line-height:1}
.brand-tx b{font-family:var(--f-disp); font-weight:800; font-size:18px;
  letter-spacing:.01em; color:var(--nav-fg,var(--text))}
.brand-tx span{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.19em;
  text-transform:uppercase; color:var(--nav-sub,var(--hero-accent)); margin-top:3px}
nav{margin-left:auto; display:flex; align-items:center; gap:2px}
nav a{font-size:13.6px; font-weight:500; text-decoration:none; padding:9px 11px;
  border-radius:6px; color:var(--nav-fg,var(--text)); opacity:.82; position:relative; white-space:nowrap;
  transition:opacity var(--d-fast), background var(--d-fast)}
nav a::after{content:""; position:absolute; left:11px; right:11px; bottom:4px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .28s var(--ease)}
nav a:hover{opacity:1}
nav a:hover::after{transform:scaleX(1)}
.nav-dl{display:inline-flex; align-items:center; gap:7px}
.nav-dl svg{width:15px; height:15px; flex:none}
.btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--f-body);
  font-size:14.5px; font-weight:600; text-decoration:none; cursor:pointer;
  padding:12px 20px; border-radius:2px; border:1px solid transparent; white-space:nowrap;
  position:relative; overflow:hidden; transition:all var(--d-fast) var(--ease)}
.btn span{position:relative; z-index:1}
.btn-pri{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg)}
.btn-pri::before{content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateX(-101%) skewX(-12deg); transition:transform .38s var(--ease)}
.btn-pri:hover::before{transform:translateX(0) skewX(-12deg)}
.btn-pri:hover{color:#fff; border-color:var(--ink)}
.btn-gho{background:transparent; color:var(--nav-fg,var(--text));
  border-color:color-mix(in srgb, currentColor 32%, transparent)}
.btn-gho:hover{border-color:var(--accent); color:var(--accent)}
.navtoggle{display:none; margin-left:auto; background:none; border:1px solid var(--line);
  border-radius:4px; width:42px; height:38px; cursor:pointer; color:var(--nav-fg,var(--text));
  align-items:center; justify-content:center}
.navtoggle svg{width:20px;height:20px}
@media(max-width:1180px){
  nav{position:fixed; inset:0 0 auto 0; top:0; flex-direction:column; gap:0;
    background:var(--surface); padding:88px 24px 28px; align-items:stretch;
    transform:translateY(-100%); transition:transform .42s var(--ease);
    border-bottom:1px solid var(--line); max-height:100dvh; overflow:auto}
  nav.open{transform:translateY(0)}
  nav a{--nav-fg:var(--text); padding:14px 4px; font-size:16px; border-bottom:1px solid var(--line-soft)}
  nav a::after{display:none}
  nav .btn{margin-top:18px; justify-content:center}
  .navtoggle{display:flex}
}


/* ============ HERO ============ */
#hero{position:relative; background:var(--ink); color:var(--hero-ink);
  --nav-fg:#F4F7FC; overflow:hidden; isolation:isolate}
#hero .photo{position:absolute; inset:0; z-index:0}
#hero .photo img{width:100%; height:100%; object-fit:cover; opacity:.38;
  filter:saturate(.55) contrast(1.06)}
#hero .photo::after{content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, var(--ink) 24%, rgba(0,68,170,.90) 52%, rgba(0,119,255,.42) 100%)}
#lattice{position:absolute; inset:0; z-index:1; opacity:.5; pointer-events:none}
/* corner wedge — the brochure's diagonal motif, kept clear of the headline */
.hero-wedge{position:absolute; top:78px; right:0; z-index:2; pointer-events:none;
  width:min(880px,56%); height:min(620px,74%); overflow:hidden}
.hero-wedge b{position:absolute; inset:0; display:block; will-change:transform}
.hw-blue{background:var(--blue); opacity:.92;
  clip-path:polygon(38% 0, 58% 0, 100% 54.6%, 100% 80.6%)}
.hw-accent{background:var(--blue-lt);
  clip-path:polygon(24% 0, 32% 0, 100% 88.4%, 100% 98.8%)}
.hw-hair{background:rgba(244,247,252,.30);
  clip-path:polygon(64% 0, 64.9% 0, 100% 45.6%, 100% 46.8%)}
.hw-hair2{background:rgba(244,247,252,.16);
  clip-path:polygon(70% 0, 70.7% 0, 100% 37.6%, 100% 38.5%)}
@media(max-width:760px){.hero-wedge{width:74%; height:44%; opacity:.85}}
.hero-in{position:relative; z-index:3; padding-top:clamp(126px,15vw,180px);
  padding-bottom:clamp(56px,7vw,86px)}
.hero-tag{font-family:var(--f-mono); font-size:12px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:#fff; display:inline-flex; align-items:center;
  gap:11px; border:1px solid rgba(255,255,255,.5); background:rgba(0,24,66,.46);
  backdrop-filter:blur(4px); padding:9px 18px; border-radius:100px;
  text-shadow:0 1px 2px rgba(0,20,60,.5)}
.hero-tag::before{content:""; width:7px; height:7px; border-radius:50%; flex:none;
  background:#fff; box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation:pulse 2.6s infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
  70%{box-shadow:0 0 0 11px rgba(255,255,255,0)}
  100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
h1{font-size:clamp(40px,7.4vw,90px); font-weight:800; letter-spacing:-.032em;
  margin:26px 0 0; max-width:17ch}
h1 .lite{font-weight:500; color:rgba(244,247,252,.72)}
h1 .hl{position:relative; display:inline-block; color:var(--hero-accent)}
.hero-sub{margin-top:26px; font-size:clamp(16.5px,1.75vw,20.5px);
  color:rgba(244,247,252,.76); max-width:56ch; line-height:1.6}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:40px}
.hero-strip{position:relative; z-index:3; border-top:1px solid rgba(244,247,252,.15);
  background:rgba(4,10,26,.42); backdrop-filter:blur(3px)}
.hero-strip .wrap{display:grid; grid-template-columns:repeat(4,1fr)}
.stat{padding:26px 0; border-left:1px solid rgba(244,247,252,.12); padding-left:24px}
.stat:first-child{border-left:0; padding-left:0}
.stat b{display:block; font-family:var(--f-disp); font-weight:800;
  font-size:clamp(30px,3.7vw,44px); letter-spacing:-.03em; color:#fff;
  font-variant-numeric:tabular-nums; line-height:1}
.stat b i{font-style:normal; color:var(--hero-accent)}
.stat span{display:block; margin-top:9px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.13em; text-transform:uppercase; color:rgba(244,247,252,.6)}
@media(max-width:860px){
  .hero-strip .wrap{grid-template-columns:1fr 1fr; gap:0}
  .stat{padding:20px 0 20px 20px}
  .stat:nth-child(odd){border-left:0; padding-left:0}
  .stat:nth-child(n+3){border-top:1px solid rgba(244,247,252,.12)}
}

/* ============ PILLARS ============ */
#pillars{background:var(--surface); border-block:1px solid var(--line); padding-block:0}
.pillars{display:grid; grid-template-columns:repeat(4,1fr)}
.pill{padding:clamp(28px,3.4vw,44px) clamp(20px,2.4vw,34px);
  border-left:1px solid var(--line); position:relative; overflow:hidden}
.pill:first-child{border-left:0}
.pill::before{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease)}
.pill:hover::before{transform:scaleX(1)}
.pill-ico{width:38px; height:38px; color:var(--blue); margin-bottom:18px}
.pill-ico svg{width:100%; height:100%; stroke:currentColor; fill:none; stroke-width:1.5}
.pill h3{font-family:var(--f-mono); font-size:11.5px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--accent-dp)}
.pill ul{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:9px}
.pill li{font-size:14.8px; color:var(--muted); padding-left:17px; position:relative; line-height:1.5}
.pill li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:1.5px;
  background:var(--accent)}
@media(max-width:1020px){.pillars{grid-template-columns:1fr 1fr}
  .pill:nth-child(odd){border-left:0}
  .pill:nth-child(n+3){border-top:1px solid var(--line)}}
@media(max-width:600px){.pillars{grid-template-columns:1fr}
  .pill{border-left:0!important; border-top:1px solid var(--line)}
  .pill:first-child{border-top:0}}

/* ============ ABOUT ============ */
.about-grid{display:grid; grid-template-columns:1.08fr .92fr;
  gap:clamp(36px,5.5vw,84px); align-items:start}
@media(max-width:940px){.about-grid{grid-template-columns:1fr}}
.about-body p+p{margin-top:18px}
.about-body strong{color:var(--text); font-weight:600}
.figure{position:relative; border:1px solid var(--line); background:var(--surface);
  padding:10px; box-shadow:var(--shadow)}
.figure img{width:100%; aspect-ratio:4/3; object-fit:cover}
.figure figcaption{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); padding:12px 4px 4px;
  display:flex; justify-content:space-between; gap:12px}
.figure::before{content:""; position:absolute; top:-1px; left:-1px; width:52px; height:52px;
  border-top:3px solid var(--accent); border-left:3px solid var(--accent)}
.figure::after{content:""; position:absolute; bottom:-1px; right:-1px; width:52px; height:52px;
  border-bottom:3px solid var(--blue); border-right:3px solid var(--blue)}
.mission{margin-top:30px; border-left:3px solid var(--accent); background:var(--surface-2);
  padding:22px 26px}
.mission p{font-size:17px; line-height:1.6}
.mission .who{margin-top:12px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}

.figstack{display:grid; gap:14px}



/* ============ MATERIALS ============ */
#materials{background:var(--ground)}
.matcard{position:relative; background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow); overflow:hidden; margin-top:clamp(28px,4vw,48px)}
.mat-head{position:relative; min-height:clamp(180px,24vw,286px); overflow:hidden;
  display:flex; align-items:flex-end; background:var(--ink)}
.mat-head img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.62; transition:transform 1.1s var(--ease)}
.matcard:hover .mat-head img{transform:scale(1.045)}
.mat-head::after{content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, var(--ink) 14%, rgba(0,60,158,.66) 48%, rgba(0,60,158,.14) 100%)}
.mat-head .diag i{width:250%; left:-70%}
.mat-head .d1{height:clamp(16px,2vw,26px); background:var(--blue-lt); top:-12%}
.mat-head .d2{height:clamp(30px,3.8vw,52px); background:var(--blue); top:-3%}
.mat-title{position:relative; z-index:3; padding:clamp(22px,3vw,38px);
  width:100%; display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap}
.mat-title h3{font-size:clamp(28px,4.4vw,50px); color:#F4F7FC; font-weight:800;
  letter-spacing:-.03em}
.mat-title h3 em{font-style:normal; font-weight:500; color:rgba(244,247,252,.7)}
.mat-count{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--hero-accent); border:1px solid rgba(78,154,240,.42);
  padding:6px 12px; white-space:nowrap; background:rgba(0,40,110,.58); backdrop-filter:blur(3px)}
.mat-body{display:grid; grid-template-columns:1.25fr .95fr; gap:0}
@media(max-width:900px){.mat-body{grid-template-columns:1fr}}
.mat-copy{padding:clamp(24px,3.2vw,42px); border-right:1px solid var(--line)}
@media(max-width:900px){.mat-copy{border-right:0; border-bottom:1px solid var(--line)}}
.mat-copy>p{font-size:16.5px; color:var(--muted)}
.mat-copy>p strong{color:var(--text); font-weight:600}
.dl{margin-top:30px}
.dl h4{font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent-dp); margin-bottom:14px;
  padding-bottom:9px; border-bottom:1px solid var(--line-soft)}
.dl ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.dl li{display:flex; gap:12px; font-size:15.2px; line-height:1.5; color:var(--muted)}
.dl li svg{width:15px; height:15px; flex:none; margin-top:5px; color:var(--blue)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
.chip{font-family:var(--f-mono); font-size:12px; letter-spacing:.03em;
  border:1px solid var(--line); background:var(--surface-2); color:var(--muted);
  padding:6px 11px; transition:all var(--d-fast)}
.chip:hover{border-color:var(--accent); color:var(--text)}
.mat-grades{padding:clamp(24px,3.2vw,42px); background:var(--surface-2)}
.gradelist{list-style:none; margin:14px 0 0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  border-top:1px solid var(--line); border-left:1px solid var(--line)}
@media(max-width:520px){.gradelist{grid-template-columns:1fr}}
.gradelist li{background:var(--surface); padding:11px 14px; font-family:var(--f-mono);
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  font-size:13.4px; font-weight:500; color:var(--text); display:flex;
  align-items:center; gap:9px; transition:background var(--d-fast), color var(--d-fast)}
.gradelist li::before{content:""; width:5px; height:5px; background:var(--accent); flex:none;
  transform:rotate(45deg); transition:transform .3s var(--ease)}
.gradelist li:hover{background:var(--ink); color:#fff}
.gradelist li:hover::before{transform:rotate(225deg) scale(1.3)}

/* ============ GRADE INDEX ============ */
#grades{background:var(--surface); border-block:1px solid var(--line)}
.gx-tools{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:30px}
.gx-search{position:relative; flex:1 1 260px; max-width:340px}
.gx-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:16px; height:16px; color:var(--faint); pointer-events:none}
.gx-search input{width:100%; font-family:var(--f-mono); font-size:13.5px;
  padding:11px 13px 11px 39px; background:var(--ground); color:var(--text);
  border:1px solid var(--line); border-radius:2px; transition:border-color var(--d-fast)}
.gx-search input:focus{border-color:var(--accent); outline:none}
.gx-search input::placeholder{color:var(--faint)}
.filt{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.11em;
  text-transform:uppercase; padding:10px 15px; cursor:pointer; background:transparent;
  color:var(--muted); border:1px solid var(--line); border-radius:2px;
  transition:all var(--d-fast)}
.filt:hover{color:var(--text); border-color:var(--faint)}
.filt[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink)}
.gx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:26px}
.gcell{background:var(--surface); padding:16px 17px; position:relative; overflow:hidden;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .3s var(--ease)}
.gcell::before{content:""; position:absolute; inset:0; background:var(--ink);
  transform:translateY(101%); transition:transform .34s var(--ease); z-index:0}
.gcell:hover::before{transform:translateY(0)}
.gcell>*{position:relative; z-index:1; transition:color .3s var(--ease)}
.gcell:hover .gname{color:#fff}
.gcell:hover .gfam{color:var(--hero-accent)}
.gname{font-family:var(--f-mono); font-size:14.5px; font-weight:600;
  color:var(--text); letter-spacing:-.01em}
.gfam{margin-top:6px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint)}
.gcell.hide{display:none}
.gx-empty{padding:44px 0; text-align:center; color:var(--muted);
  font-family:var(--f-mono); font-size:13px}
.gx-count{font-family:var(--f-mono); font-size:11.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); margin-top:16px;
  font-variant-numeric:tabular-nums}

/* ============ MILLS ============ */
#mills{background:var(--ground); overflow:hidden}
.marquee{margin-top:clamp(30px,4vw,46px); position:relative; overflow:hidden;
  border-block:1px solid var(--line); background:var(--surface); padding:22px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.mq-track{display:flex; gap:clamp(44px,6vw,86px); width:max-content; align-items:center;
  animation:mq 44s linear infinite}
.marquee:hover .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-track img{height:clamp(34px,4vw,46px); width:auto; object-fit:contain;
  filter:grayscale(1); opacity:.74; transition:filter .3s, opacity .3s}
.mq-track img:hover{filter:none; opacity:1}

.mills{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin-top:clamp(30px,4vw,46px)}
.mill{background:var(--surface); padding:24px; display:flex; flex-direction:column;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  gap:16px; position:relative; overflow:hidden; transition:background .3s}
.mill::after{content:""; position:absolute; top:0; right:0; width:0; height:3px;
  background:var(--accent); transition:width .4s var(--ease)}
.mill:hover::after{width:100%}
.mill:hover{background:var(--surface-2)}
.mill-top{display:flex; align-items:center; justify-content:space-between; gap:14px}
.mill-logo{height:44px; display:flex; align-items:center}
.mill-logo img{height:100%; width:auto; max-width:158px; object-fit:contain;
  filter:grayscale(1); opacity:.86; transition:filter .35s, opacity .35s}
.mill:hover .mill-logo img{filter:none; opacity:1}
.mill-since{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--faint); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.mill h3{font-family:var(--f-disp); font-size:19px; font-weight:700; letter-spacing:-.018em}
.mill-flag{font-family:var(--f-mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent-dp); margin-top:5px}
.mill dl{margin:0; display:grid; gap:11px}
.mill dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--faint); margin-bottom:4px}
.mill dd{margin:0; color:var(--muted); font-size:14px; line-height:1.5}
.mill dd.mono{font-family:var(--f-mono); font-size:12.8px; color:var(--text)}


/* ============ INDUSTRIES ============ */
#industries{background:var(--surface-2); color:var(--text); position:relative; overflow:hidden}
#industries .diag i{width:240%; left:-60%}
#industries .i1{height:clamp(20px,2.4vw,34px); background:var(--blue); top:-8%; opacity:.10}
#industries .i2{height:clamp(10px,1.3vw,18px); background:var(--blue-lt); top:2%; opacity:.16}
#industries .i3{height:1px; background:rgba(0,60,158,.10); top:62%}
#industries .wrap{position:relative; z-index:2}
.inds{display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);
  margin-top:clamp(32px,4vw,50px)}
.ind{background:var(--surface); padding:26px 24px; position:relative; overflow:hidden;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  transition:background .38s var(--ease)}
.ind::before{content:""; position:absolute; left:0; bottom:0; width:100%; height:100%;
  background:linear-gradient(160deg,var(--blue),var(--navy));
  transform:translateY(100%); transition:transform .42s var(--ease)}
.ind:hover::before{transform:translateY(0)}
.ind>*{position:relative; z-index:1}
.ind svg{width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:1.5;
  margin-bottom:16px; transition:stroke .38s var(--ease)}
.ind h3{font-size:17.5px; font-weight:700; color:var(--text); letter-spacing:-.015em;
  transition:color .38s var(--ease)}
.ind p{margin-top:8px; font-size:14px; color:var(--muted); line-height:1.55;
  transition:color .38s var(--ease)}
.ind:hover svg{stroke:#fff}
.ind:hover h3{color:#fff}
.ind:hover p{color:rgba(255,255,255,.78)}
/* ============ CONTACT ============ */
#contact{background:var(--surface)}
.ct-grid{display:grid; grid-template-columns:.92fr 1.08fr;
  gap:clamp(34px,5vw,74px); align-items:start; margin-top:clamp(30px,4vw,46px)}
@media(max-width:940px){.ct-grid{grid-template-columns:1fr}}
.ct-list{display:grid; gap:1px; background:var(--line); border:1px solid var(--line)}
.ct-row{background:var(--surface); padding:20px 22px; display:flex; gap:16px;
  align-items:flex-start; transition:background .3s}
.ct-row:hover{background:var(--surface-2)}
.ct-ico{width:34px; height:34px; flex:none; display:grid; place-items:center;
  background:var(--ink); color:var(--hero-accent)}
.ct-ico svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.6}
.ct-row dt{font-family:var(--f-mono); font-size:10px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--faint); margin-bottom:6px}
.ct-row dd{margin:0; font-size:15.4px; line-height:1.55; color:var(--text)}
.ct-row dd a{text-decoration:none; border-bottom:1px solid transparent;
  transition:border-color var(--d-fast), color var(--d-fast)}
.ct-row dd a:hover{color:var(--accent-dp); border-bottom-color:var(--accent)}
.ct-row dd .tel{font-family:var(--f-mono); font-size:14.4px; display:block;
  font-variant-numeric:tabular-nums}
.ct-row dd .tel small{color:var(--faint); font-size:11px; letter-spacing:.1em}
.ct-row dd a.person{display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:7px 0; border-bottom:1px solid var(--line-soft); text-decoration:none}
.ct-row dd a.person:last-child{border-bottom:0; padding-bottom:0}
.ct-row dd a.person b{font-weight:600; font-size:15.2px; color:var(--text);
  transition:color var(--d-fast)}
.ct-row dd a.person span{font-family:var(--f-mono); font-size:13.6px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap; transition:color var(--d-fast)}
.ct-row dd a.person:hover b,.ct-row dd a.person:hover span{color:var(--accent-dp)}
@media(max-width:420px){.ct-row dd a.person{flex-direction:column; gap:2px; align-items:flex-start}}

form{background:var(--ground); border:1px solid var(--line); padding:clamp(22px,3vw,34px)}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){.frow{grid-template-columns:1fr}}
.field{display:flex; flex-direction:column; gap:7px}
form>.field, form>.frow{margin-top:16px}
label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted)}
input,textarea,select{font-family:var(--f-body); font-size:15px; padding:11px 13px;
  background:var(--surface); color:var(--text); border:1px solid var(--line);
  border-radius:2px; width:100%; transition:border-color var(--d-fast)}
textarea{resize:vertical; min-height:104px; font-size:14.6px}
input:focus,textarea:focus,select:focus{border-color:var(--accent); outline:none}
select{cursor:pointer; appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px}
.fnote{margin-top:16px; font-size:13px; color:var(--faint); line-height:1.5}
form .btn{margin-top:18px; width:100%; justify-content:center}
.fmsg{margin-top:14px; font-family:var(--f-mono); font-size:12.5px; color:var(--blue);
  display:none}
.fmsg.on{display:block}

/* ============ FOOTER ============ */
footer{background:var(--ink); color:rgba(244,247,252,.66); padding-top:clamp(48px,6vw,72px)}
.f-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:clamp(28px,4vw,56px);
  padding-bottom:44px; border-bottom:1px solid rgba(244,247,252,.13)}
@media(max-width:820px){.f-grid{grid-template-columns:1fr 1fr}
  .f-brand{grid-column:1/-1}}
@media(max-width:520px){.f-grid{grid-template-columns:1fr}}
.f-brand p{margin-top:16px; font-size:14.6px; line-height:1.6; max-width:38ch}
.f-brand .brand-tx b{color:#fff}
.f-col h4{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--hero-accent); margin-bottom:16px}
.f-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.f-col a{font-size:14.4px; text-decoration:none; opacity:.8;
  transition:opacity var(--d-fast), color var(--d-fast)}
.f-col a:hover{opacity:1; color:var(--hero-accent)}
.f-bot{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  padding-block:24px; font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(244,247,252,.45)}

/* ============ MOTION ============ */
.rv{opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease), transform .7s var(--ease)}
.rv.in{opacity:1; transform:none}
.rv-d1{transition-delay:.08s} .rv-d2{transition-delay:.16s}
.rv-d3{transition-delay:.24s} .rv-d4{transition-delay:.32s}
.hero-anim{opacity:0; transform:translateY(22px);
  animation:heroUp .95s var(--ease) forwards}
.ha1{animation-delay:.1s} .ha2{animation-delay:.24s} .ha3{animation-delay:.38s}
.ha4{animation-delay:.52s} .ha5{animation-delay:.66s}
@keyframes heroUp{to{opacity:1; transform:none}}
.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}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important; scroll-behavior:auto!important}
  .rv{opacity:1; transform:none}
  .hero-anim{opacity:1; transform:none}
  #lattice{display:none}
}
html{scroll-behavior:smooth; scroll-padding-top:82px}


/* ============ THE GROUP / SISTER CONCERNS ============ */
#group{background:var(--ink); color:#fff; position:relative; overflow:hidden}
#group .diag i{width:240%; left:-60%}
#group .g1{height:clamp(18px,2.2vw,30px); background:var(--blue); top:-14%; opacity:.26}
#group .g2{height:clamp(8px,1.1vw,15px); background:var(--blue-lt); top:-5%; opacity:.22}
#group .g3{height:1px; background:rgba(255,255,255,.14); top:58%}
#group .wrap{position:relative; z-index:2}
#group .eyebrow{color:var(--hero-accent)}
#group .eyebrow::after{background:rgba(255,255,255,.22)}
#group .h-sec{color:#fff}
#group .lede{color:rgba(255,255,255,.74)}

.grp{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;
  margin-top:clamp(32px,4vw,52px)}
@media(max-width:900px){.grp{grid-template-columns:1fr}}

.gcard{position:relative; display:flex; flex-direction:column; gap:18px;
  padding:clamp(22px,2.6vw,30px); text-decoration:none; color:inherit;
  background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.17);
  transition:background .38s var(--ease), border-color .38s var(--ease),
             transform .38s var(--ease)}
.gcard::after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--blue); transform:scaleX(0); transform-origin:left;
  transition:transform .42s var(--ease)}
a.gcard:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.38);
  transform:translateY(-4px)}
a.gcard:hover::after{transform:scaleX(1)}
a.gcard:focus-visible{outline:2.5px solid var(--hero-accent); outline-offset:3px}

.gc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:14px}
.gc-logo{background:#fff; height:92px; padding:10px 14px; flex:none; display:flex;
  align-items:center; justify-content:center; min-width:104px}
.gc-logo img{max-height:100%; max-width:150px; width:auto; object-fit:contain}
.gc-logo svg{height:62px; width:62px}
.gc-here{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ink); background:var(--hero-accent);
  padding:5px 9px; white-space:nowrap}
.gc-go{width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); color:#fff;
  transition:background .35s var(--ease), border-color .35s var(--ease),
             transform .35s var(--ease)}
.gc-go svg{width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8}
a.gcard:hover .gc-go{background:var(--blue); border-color:var(--blue);
  transform:translate(3px,-3px)}

.gc-name{font-family:var(--f-disp); font-weight:700; font-size:clamp(19px,1.9vw,22px);
  letter-spacing:-.02em; color:#fff; line-height:1.2}
.gc-role{margin-top:7px; font-family:var(--f-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--hero-accent)}
.gc-desc{font-size:14.6px; line-height:1.6; color:rgba(255,255,255,.72)}
.gc-foot{margin-top:auto; padding-top:16px; border-top:1px solid rgba(255,255,255,.15);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em;
  color:rgba(255,255,255,.74); display:flex; align-items:center; gap:8px;
  word-break:break-all; transition:color .35s var(--ease)}
a.gcard:hover .gc-foot{color:#fff}


/* ============ BROCHURE ============ */
#brochure{background:var(--surface); border-top:1px solid var(--line)}
.br-grid{display:grid; grid-template-columns:auto 1fr; gap:clamp(28px,5vw,64px);
  align-items:center}
@media(max-width:760px){.br-grid{grid-template-columns:1fr; gap:30px}}
.br-cover{position:relative; flex:none; width:clamp(190px,22vw,260px);
  transition:transform .5s var(--ease)}
.br-cover img{width:100%; border:1px solid var(--line); box-shadow:var(--shadow);
  background:#fff}
.br-cover::after{content:""; position:absolute; inset:0;
  border:1px solid rgba(30,123,224,.35); transform:translate(11px,11px); z-index:-1}
#brochure:hover .br-cover{transform:translateY(-5px)}
.br-meta{display:flex; flex-wrap:wrap; gap:9px; margin-top:20px}
.br-meta span{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); border:1px solid var(--line);
  padding:6px 11px}
.br-cta{display:flex; flex-wrap:wrap; gap:13px; margin-top:26px}
.br-cta .btn svg{width:17px; height:17px}