/* Elmat Group: palette taken from the EG logo (navy #013279, signal red #ED1820) */
:root{
  --navy:#013279;
  --navy-deep:#0E2240;
  --red:#C8101A;
  --red-logo:#ED1820;
  --steel:#55667B;
  --line:#CBD3DD;
  --concrete:#EEF1F4;
  --white:#FFFFFF;
  --ink:#0E2240;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --wrap:1200px;
  --gut:clamp(16px,4vw,40px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--serif);font-size:18px;line-height:1.65;font-optical-sizing:auto}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* type */
h1,h2,h3,h4{font-family:var(--sans);font-variation-settings:"wdth" 112;font-weight:650;line-height:1.08;letter-spacing:-.012em;color:var(--navy-deep);margin:0 0 .5em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem)}
h2{font-size:clamp(1.75rem,3.4vw,2.6rem)}
h3{font-size:clamp(1.2rem,1.8vw,1.45rem);font-variation-settings:"wdth" 105;line-height:1.2}
p{margin:0 0 1.1em;max-width:68ch}
.lede{font-size:clamp(1.12rem,1.6vw,1.3rem);line-height:1.55;color:#24364F}
.small{font-size:.9rem}
.meta{font-family:var(--sans);font-size:.92rem;color:var(--steel)}

/* the logo's red rule, used once per major heading */
.rule{display:flex;align-items:flex-end;gap:20px}
.rule::after{content:"";flex:1;height:3px;background:var(--red-logo);margin-bottom:.32em;min-width:40px}
.rule.light{color:#fff}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.brand img{height:46px;width:auto}
.nav{display:flex;align-items:center;gap:clamp(14px,2vw,30px);font-family:var(--sans);font-size:.98rem;font-weight:500}
.nav a{color:var(--navy-deep);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--red-logo);color:var(--navy-deep)}
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-weight:600;font-size:1rem;text-decoration:none;padding:13px 22px;border:2px solid var(--navy);background:var(--navy);color:#fff;border-radius:2px;cursor:pointer;line-height:1.2}
.btn:hover{background:var(--navy-deep);border-color:var(--navy-deep);color:#fff}
.btn.ghost{background:transparent;color:var(--navy)}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.red{background:var(--red);border-color:var(--red)}
.btn.red:hover{background:#A00D15;border-color:#A00D15}
.nav a.btn{padding:10px 18px;border-bottom:2px solid var(--navy);color:#fff}
.nav .btn:hover{color:#fff}
.menu-toggle{display:none;background:none;border:1px solid var(--line);border-radius:2px;padding:9px 12px;font-family:var(--sans);font-weight:600;color:var(--navy-deep);cursor:pointer}
@media (max-width:980px){
  .menu-toggle{display:block}
  .nav{display:none;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;padding:12px var(--gut) 24px;border-bottom:1px solid var(--line);gap:4px}
  .nav.open{display:flex}
  .nav a{font-size:1.1rem;padding:10px 0;width:100%}
  .nav .btn{margin-top:10px;width:auto}
}

/* sections */
section{padding:clamp(56px,8vw,104px) 0}
.tight{padding:clamp(40px,6vw,72px) 0}
.concrete{background:var(--concrete)}
.navy{background:var(--navy-deep);color:#DCE4EE}
.navy h2,.navy h3{color:#fff}
.navy a{color:#fff}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px)}
.grid-12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.grid-2{grid-template-columns:1fr}}

/* hero */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(48px,7vw,96px)}
.hero .grid-12{align-items:center}
.hero-copy{grid-column:1/span 6}
.hero-plan{grid-column:7/span 6;margin:0}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem)}
.hero .lede{margin-bottom:1.6em}
.actions{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:980px){.hero-copy,.hero-plan{grid-column:1/-1}}
.plan{background:var(--navy-deep);border-radius:2px;padding:clamp(14px,2vw,22px);position:relative}
.plan svg{width:100%;height:auto;display:block}
.plan figcaption{font-family:var(--sans);font-size:.82rem;color:#9FB0C6;margin-top:10px}
.plan .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.4,.1,.2,1) forwards}
.plan .draw.d2{animation-delay:.5s}.plan .draw.d3{animation-delay:1s}.plan .draw.d4{animation-delay:1.5s}
.plan .fade{opacity:0;animation:fade .8s ease forwards 2.2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}

/* page hero (inner pages) */
.page-hero{padding:clamp(40px,6vw,72px) 0 0}
.page-hero .lede{max-width:60ch}
.crumbs{font-family:var(--sans);font-size:.88rem;color:var(--steel);margin-bottom:18px}
.crumbs a{color:var(--steel)}
.banner{margin-top:clamp(32px,5vw,56px);aspect-ratio:21/8;overflow:hidden;background:var(--concrete)}
.banner img{width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.banner{aspect-ratio:4/3}}

/* doors */
.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line)}
.door{padding:clamp(28px,4vw,48px);display:flex;flex-direction:column}
.door+.door{border-left:1px solid var(--line)}
.door .who{font-family:var(--sans);font-weight:600;color:var(--red);font-size:1rem;margin-bottom:10px}
.door ul{padding:0;margin:0 0 28px;list-style:none;font-size:1.02rem}
.door li{padding:10px 0 10px 22px;border-top:1px solid var(--line);position:relative}
.door li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:2px;background:var(--navy)}
.door .btn{margin-top:auto;align-self:flex-start}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door+.door{border-left:0;border-top:1px solid var(--line)}}

/* facts */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border-top:3px solid var(--red-logo)}
.fact{padding:26px 22px 8px 0}
.fact+.fact{padding-left:22px;border-left:1px solid rgba(255,255,255,.16)}
.fact strong{display:block;font-family:var(--sans);font-variation-settings:"wdth" 120;font-weight:700;font-size:clamp(1.9rem,3.2vw,2.6rem);color:#fff;line-height:1;margin-bottom:10px}
.fact span{font-family:var(--sans);font-size:.98rem;line-height:1.45;color:#C3CFDD;display:block}
@media (max-width:860px){.facts{grid-template-columns:1fr 1fr}.fact:nth-child(3){padding-left:0;border-left:0}}
@media (max-width:480px){.facts{grid-template-columns:1fr}.fact,.fact+.fact{padding-left:0;border-left:0;border-bottom:1px solid rgba(255,255,255,.16);padding-bottom:20px}}

/* photo band */
.band{height:clamp(240px,38vw,460px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover}

/* quote */
blockquote.rec{margin:0;padding:0;border:0}
blockquote.rec p{font-family:var(--serif);font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1.45;color:var(--navy-deep);max-width:42ch;font-style:italic}
blockquote.rec footer{font-family:var(--sans);font-size:.95rem;color:var(--steel)}
blockquote.rec footer strong{color:var(--navy-deep)}

/* article cards */
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px)}
.card{display:grid;grid-template-columns:200px 1fr;gap:22px;text-decoration:none;color:inherit;padding-top:22px;border-top:1px solid var(--line)}
.card img{aspect-ratio:4/3;object-fit:cover;width:100%}
.card h3{margin-bottom:.35em}
.card p{font-size:1rem;margin:0 0 .6em;color:#33455E}
.card:hover h3{color:var(--red)}
@media (max-width:860px){.cards{grid-template-columns:1fr}}
@media (max-width:520px){.card{grid-template-columns:1fr}}

/* service body */
.split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px)}
.split > h2{position:sticky;top:110px;align-self:start}
@media (max-width:860px){.split{grid-template-columns:1fr}.split > h2{position:static}}
.items{display:grid;gap:0}
.item{padding:22px 0;border-top:1px solid var(--line)}
.item:last-child{border-bottom:1px solid var(--line)}
.item h3{margin-bottom:.4em}
.item p{margin-bottom:0}
.navy .item{border-color:rgba(255,255,255,.18)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}
.steps li{counter-increment:s;padding:22px 0 22px 64px;border-top:1px solid var(--line);position:relative}
.steps li::before{content:counter(s);position:absolute;left:0;top:18px;font-family:var(--sans);font-variation-settings:"wdth" 120;font-weight:700;font-size:1.8rem;color:var(--red)}
.steps li strong{font-family:var(--sans);display:block;font-size:1.15rem;color:var(--navy-deep);margin-bottom:4px}
.note{border-left:3px solid var(--red-logo);padding:4px 0 4px 20px;margin:28px 0;max-width:62ch}
.note p:last-child{margin-bottom:0}

/* tech sections */
.tech{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,4vw,56px);padding:clamp(36px,5vw,60px) 0;border-top:1px solid var(--line)}
.tech:first-of-type{border-top:0}
.tech img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tech dl{margin:0}
.tech dt{font-family:var(--sans);font-weight:600;color:var(--navy);margin-top:14px}
.tech dd{margin:2px 0 0}
@media (max-width:860px){.tech{grid-template-columns:1fr}}
.toc{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;font-family:var(--sans);font-size:.95rem}
.toc a{border:1px solid var(--line);padding:8px 14px;text-decoration:none;border-radius:2px;color:var(--navy-deep)}
.toc a:hover{border-color:var(--navy);color:var(--navy)}

/* faq */
.faq details{border-top:1px solid var(--line);padding:18px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{font-family:var(--sans);font-weight:600;font-size:1.1rem;color:var(--navy-deep);cursor:pointer;list-style:none;padding-right:34px;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:-4px;font-size:1.5rem;color:var(--red);font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:12px 0 0}

/* about */
.portrait{background:var(--concrete)}
.portrait img{width:100%;aspect-ratio:1/1;object-fit:cover}
.timeline{list-style:none;padding:0;margin:0}
.timeline li{display:grid;grid-template-columns:150px 1fr;gap:20px;padding:20px 0;border-top:1px solid var(--line)}
.timeline .yrs{font-family:var(--sans);font-weight:600;color:var(--red);font-size:.98rem}
.timeline h3{margin-bottom:.25em}
.timeline p{margin:0;font-size:1rem}
@media (max-width:600px){.timeline li{grid-template-columns:1fr;gap:4px}}

/* article */
.article{max-width:720px;margin:0 auto}
.article h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.article h2{font-size:clamp(1.35rem,2.3vw,1.7rem);margin-top:1.8em;font-variation-settings:"wdth" 105}
.article p,.article li{font-size:1.1rem;line-height:1.72;max-width:none}
.article ul{padding-left:1.2em}
.article li{margin-bottom:.5em}
.article .hero-img{margin:28px 0 36px}
.article .hero-img img{aspect-ratio:16/9;object-fit:cover;width:100%}
.byline{display:flex;align-items:center;gap:14px;margin:18px 0 0}
.byline img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.sources{font-size:.95rem;border-top:1px solid var(--line);margin-top:40px;padding-top:18px}
.sources li{font-size:.95rem!important}
.disclaimer{font-size:.92rem!important;color:var(--steel)}

/* forms */
form.contact{display:grid;gap:18px;max-width:640px}
form.contact .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){form.contact .row{grid-template-columns:1fr}}
label{font-family:var(--sans);font-weight:600;font-size:.95rem;display:block;margin-bottom:6px;color:var(--navy-deep)}
input,select,textarea{width:100%;font:inherit;font-size:1rem;font-family:var(--sans);padding:12px 14px;border:1px solid #9AA8B8;border-radius:2px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
textarea{min-height:150px;resize:vertical}
.hp{position:absolute;left:-9999px}

/* cta + footer */
.cta{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,4vw,48px);align-items:center}
.cta img{width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid #fff}
.cta h2{margin-bottom:.25em}
.cta p{margin:0}
@media (max-width:760px){.cta{grid-template-columns:1fr}}
.site-foot{background:#081733;color:#AFC0D4;font-family:var(--sans);font-size:.95rem;padding:56px 0 32px}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{text-decoration:underline;color:#fff}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.foot-grid h4{color:#fff;font-size:1rem;margin-bottom:12px;font-variation-settings:"wdth" 100}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:8px}
.foot-logo{background:#fff;display:inline-block;padding:10px 14px;border-radius:2px;margin-bottom:16px}
.foot-logo img{height:32px;width:auto}
.foot-base{border-top:1px solid rgba(255,255,255,.14);margin-top:40px;padding-top:20px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.88rem}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-grid{grid-template-columns:1fr}}
[id]{scroll-margin-top:96px}
/* homepage portrait hero */
.hero-portrait{grid-column:8/span 5;margin:0;position:relative}
.hero-portrait img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:50% 20%;background:var(--concrete)}
.hero-portrait figcaption{background:var(--navy-deep);color:#C3CFDD;font-family:var(--sans);font-size:.95rem;line-height:1.45;padding:18px 20px;border-top:3px solid var(--red-logo)}
.hero-portrait figcaption strong{display:block;color:#fff;font-size:1.05rem;margin-bottom:4px}
.hero-note{font-family:var(--sans);font-size:1rem;color:var(--steel);margin-top:-.6em}
@media (max-width:980px){.hero-portrait{grid-column:1/-1;max-width:460px}}
.doors.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.doors.four .door{border-top:1px solid var(--line)}
.doors.four .door:nth-child(-n+2){border-top:0}
.doors.four .door:nth-child(odd){border-left:0}
.doors.four .door:nth-child(even){border-left:1px solid var(--line)}
.door p{font-size:1.02rem}
@media (max-width:860px){.doors.four{grid-template-columns:1fr}.doors.four .door{border-left:0!important;border-top:1px solid var(--line)}.doors.four .door:first-child{border-top:0}}
.banner-plan{margin:clamp(32px,5vw,56px) 0 0;max-width:900px}
.leader{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px);align-items:start}
.leader-photo{margin:0;background:var(--concrete)}
.leader-photo img{width:100%;aspect-ratio:1/1;object-fit:cover}
.leader h3{margin-top:.2em}
.small-rec{margin:26px 0 22px;padding-left:20px;border-left:3px solid var(--red-logo)}
.small-rec p{font-size:1.2rem;max-width:56ch}
@media (max-width:860px){.leader{grid-template-columns:1fr}.leader-photo{max-width:380px}}
.cta{grid-template-columns:1fr auto}
@media (max-width:760px){.cta{grid-template-columns:1fr}}
.grid-2 > .note{align-self:start}
.h1-stack span{display:block}
.hero h1.h1-stack{font-size:clamp(2.2rem,4vw,3.15rem)}
.hero .lede strong{color:var(--navy-deep);font-weight:600}
