/* Elkoms Consulting — site styles
   Layout: white page, left-aligned text column, large light statements, full-width imagery with small captions.
   Colour: navy for headings and the wordmark, plum for the active item and links, charcoal body text. */
:root{
  --bg:#FFFFFF;
  --ink:#1F1F1F;
  --body:#333333;
  --muted:#6F6F6F;
  --rule:#E3E3E3;
  --rule-strong:#BDBDBD;
  --navy:#194570;
  --plum:#A02F6A;
  --plum-dark:#7E2253;
  --wash:#F5F6F8;
  --font:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
  --max:1240px;
  --gutter:24px;
}
*{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(--body);font-family:var(--font);font-size:17px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--plum);outline-offset:3px}
h1,h2,h3,h4{font-weight:400;color:var(--ink);margin:0;text-wrap:balance}
p{margin:0 0 1.2em}
ul{margin:0;padding:0;list-style:none}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}
@media (min-width:900px){:root{--gutter:40px}}

.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 14px;z-index:30}
.skip:focus{left:var(--gutter)}

/* Header */
.site-header{background:var(--bg);position:sticky;top:0;z-index:20}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.brand img{width:112px;height:auto}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);border-radius:2px;padding:8px 12px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer}
.nav ul{display:flex;gap:34px;align-items:center}
.nav a{font-size:17px;color:var(--ink);padding:6px 0;display:inline-block;border-bottom:1px solid transparent}
.nav a:hover{color:var(--plum)}
.nav a[aria-current="page"],.nav a.is-active{color:var(--plum)}
@media (max-width:760px){
  .site-header{position:static}
  .site-header .wrap{flex-wrap:wrap;padding-block:14px}
  .brand img{width:92px}
  .nav-toggle{display:inline-block}
  .nav{flex-basis:100%;display:none;border-top:1px solid var(--rule);margin-top:8px}
  .nav.open{display:block}
  .nav ul{flex-direction:column;gap:0;align-items:stretch}
  .nav li{border-bottom:1px solid var(--rule)}
  .nav a{display:block;padding:14px 0;font-size:18px}
}

/* Sub-navigation (section pages) */
.subnav{padding-block:22px 10px}
.subnav ul{display:flex;flex-wrap:wrap;gap:8px 28px}
.subnav a{font-size:17px;color:var(--ink)}
.subnav a:hover{color:var(--plum)}
.subnav a[aria-current="page"]{color:var(--plum)}

/* Page rhythm */
main{padding-bottom:40px}
.block{padding-block:40px}
.block + .block{padding-top:0}
.statement{font-size:clamp(30px,4.4vw,52px);line-height:1.18;font-weight:300;color:var(--ink);max-width:22em;margin:28px 0 36px;letter-spacing:-.005em}
.statement b{font-weight:400;color:var(--navy)}
.lede{font-size:clamp(20px,2.3vw,26px);line-height:1.45;font-weight:300;color:var(--ink);max-width:30em;margin-bottom:28px}
.copy{max-width:40em}
.copy h2,.copy h3{font-size:22px;line-height:1.3;margin:36px 0 10px;color:var(--ink)}
.copy h2:first-child,.copy h3:first-child{margin-top:0}
.copy p{margin-bottom:1.2em}
.copy a{color:var(--plum);border-bottom:1px solid currentColor}
.copy a:hover{color:var(--plum-dark)}
.copy ul{margin:0 0 1.4em;padding-left:1.1em;list-style:disc}
.copy li{margin:.25em 0}
.eyebrow{font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin:0 0 14px;font-weight:500}
.section-title{font-size:clamp(24px,3vw,34px);font-weight:300;line-height:1.2;margin:0 0 26px;color:var(--ink)}
.rule{border:0;border-top:1px solid var(--rule);margin:48px 0}

/* Figures */
figure{margin:0}
.figure{margin:36px 0 44px}
.figure img{width:100%;height:auto}
.figure figcaption,.caption{font-size:14px;color:var(--muted);margin-top:10px}
.figure.offset{max-width:72%;margin-left:auto}
.figure.narrow{max-width:62%}
@media (max-width:700px){.figure.offset,.figure.narrow{max-width:100%}}
.hero{margin:0 0 48px}
.hero img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.hero figcaption{font-size:14px;color:var(--muted);margin-top:10px}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin:36px 0 44px}
.pair img{width:100%;aspect-ratio:4/3;object-fit:cover}
.pair figcaption{font-size:14px;color:var(--muted);margin-top:10px}
@media (max-width:640px){.pair{grid-template-columns:minmax(0,1fr)}}

/* Project grid */
.filters{display:flex;flex-wrap:wrap;gap:24px 64px;padding-block:28px 8px;align-items:flex-start}
.filters .count{font-size:15px;color:var(--muted);margin-top:30px}
.filters h2{font-size:17px;font-weight:400;color:var(--ink);margin:0 0 8px}
.filters ul{display:flex;flex-direction:column;gap:4px}
.filters button{background:none;border:0;padding:2px 0;font:inherit;font-size:17px;color:var(--ink);cursor:pointer;text-align:left;line-height:1.5}
.filters button:hover{color:var(--plum)}
.filters button[aria-pressed="true"]{color:var(--plum)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 32px;padding-block:36px 24px}
@media (max-width:1000px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:minmax(0,1fr);gap:36px}}
.card{min-width:0}
.card[hidden]{display:none}
.card .ph{position:relative;overflow:hidden;background:var(--wash)}
.card img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s ease}
.card.tall img{aspect-ratio:3/4}
@media (prefers-reduced-motion:no-preference){.card a:hover img{transform:scale(1.025)}}
.card h3{font-size:18px;font-weight:400;margin:14px 0 2px;color:var(--ink)}
.card .loc{font-size:16px;color:var(--muted);margin:0}
.card a:hover h3{color:var(--plum)}
.card .more{display:inline-block;margin-top:6px;font-size:15px;color:var(--plum)}
.home-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 32px}
@media (max-width:900px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.home-grid{grid-template-columns:minmax(0,1fr)}}

/* Further experience lists */
.experience{padding-block:24px 40px;border-top:1px solid var(--rule)}
.experience h2{font-size:22px;font-weight:400;margin:0 0 20px}
.exp-cols{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:28px 40px}
.exp-group[hidden]{display:none}
.exp-group h3{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);font-weight:500;margin:0 0 10px}
.exp-group li{font-size:16px;color:var(--body);padding:5px 0;border-bottom:1px solid var(--rule)}
.exp-group li span{color:var(--muted)}

/* Project pages */
.project-head{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 64px;align-items:start;margin:12px 0 36px}
@media (max-width:820px){.project-head{grid-template-columns:minmax(0,1fr)}}
.project-head h1{font-size:clamp(32px,4.5vw,50px);font-weight:300;line-height:1.1;margin-bottom:8px}
.project-head .loc{font-size:18px;color:var(--muted);margin-bottom:22px}
.facts{border-top:1px solid var(--rule-strong)}
.facts div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:12px;padding:10px 0;border-bottom:1px solid var(--rule);font-size:16px}
.facts dt{color:var(--muted);margin:0}
.facts dd{margin:0;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:24px 32px;margin:8px 0 40px;padding:24px 0;border-top:1px solid var(--rule-strong);border-bottom:1px solid var(--rule)}
.stats b{display:block;font-size:34px;font-weight:300;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.stats span{font-size:15px;color:var(--muted)}
.next{border-top:1px solid var(--rule);padding-top:28px;margin-top:40px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 32px;font-size:17px}
.sheet-copy:empty{display:none}
.sheet-copy{margin-top:-8px}
.next a{color:var(--plum)}
.next a:hover{color:var(--plum-dark)}

/* Services list */
.services{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:36px 48px;margin-top:8px}
.service h3{font-size:19px;font-weight:400;margin:0 0 8px;padding-top:14px;border-top:1px solid var(--rule-strong);color:var(--navy)}
.service p{font-size:16px;margin:0}

/* Team */
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:32px 28px;margin-top:8px}
.team-group{margin-bottom:52px}
.team-group h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);font-weight:500;margin:0 0 18px;padding-top:14px;border-top:1px solid var(--rule-strong)}
.person-blank{aspect-ratio:1;background:var(--wash);display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:300;color:var(--navy)}
.person img{width:100%;aspect-ratio:1;object-fit:cover}
.person h3{font-size:17px;font-weight:400;margin:12px 0 2px}
.person p{font-size:15px;color:var(--muted);margin:0}
.person small{display:block;font-size:14px;color:var(--muted)}

/* Contact */
.offices{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:36px 48px;margin-top:8px}
.office h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--plum);font-weight:500;margin:0 0 10px;padding-top:14px;border-top:1px solid var(--rule-strong)}
.office address{font-style:normal;font-size:17px;line-height:1.55;color:var(--ink)}
.office a{color:var(--plum)}
.office a:hover{color:var(--plum-dark)}

/* Home sectors strip */
.sectors{display:flex;flex-wrap:wrap;gap:8px 28px;font-size:17px;color:var(--ink)}
.sectors a:hover{color:var(--plum)}
.cta{font-size:17px;color:var(--plum);border-bottom:1px solid currentColor;display:inline-block}
.cta:hover{color:var(--plum-dark)}

/* Footer */
.site-footer{border-top:1px solid var(--rule);margin-top:40px}
.site-footer .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding-block:32px 40px;font-size:15px;color:var(--muted)}
.site-footer img{width:88px}
.site-footer ul{display:flex;flex-wrap:wrap;gap:8px 24px}
.site-footer a:hover{color:var(--plum)}
.site-footer .legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px 24px;padding-top:16px;border-top:1px solid var(--rule)}
@media (max-width:640px){.site-footer .wrap{grid-template-columns:minmax(0,1fr)}}