/* Client directory and its navigation. Kept separate from the existing design. */
.clients-page .header .nav-clients{border-bottom:1px solid currentColor;padding-bottom:4px}
.clients-hero{padding-top:42px;padding-bottom:60px}
.clients-hero .section-label{align-items:center}
.clients-hero .section-label a{font-size:9px;letter-spacing:1px}
.clients-hero-grid{display:grid;grid-template-columns:1.4fr 1fr;align-items:end;gap:60px;margin-top:50px}
.clients-hero h1{font-size:clamp(90px,12vw,190px);line-height:.93;letter-spacing:-.065em;margin:0}
.clients-hero h1 em{display:block}
.clients-hero-copy{padding-bottom:10px;max-width:380px}
.clients-hero-copy .eyebrow{color:#a4472d;font-size:9px;margin-bottom:23px}
.clients-hero-copy p{font-size:19px;line-height:1.6;letter-spacing:-.02em}
.clients-image{position:relative;height:clamp(180px,23vw,330px);overflow:hidden;background:var(--ink);margin:55px 0 0}
.clients-image img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:grayscale(1);display:block}
.clients-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.45),rgba(0,0,0,.1))}
.clients-image figcaption{left:30px;right:30px;bottom:24px;z-index:1;font-size:9px}
.clients-directory{padding-top:25px;padding-bottom:90px}
.clients-directory-heading{display:flex;justify-content:space-between;align-items:end;gap:35px;border-bottom:1px solid var(--line);padding-bottom:25px}
.clients-directory-heading h2{font-size:clamp(34px,3.3vw,54px)}
.clients-directory-heading>p{font-size:12px;line-height:1.8;max-width:300px}
.clients-next{background:var(--ink);color:var(--paper);padding-top:65px;padding-bottom:65px}
.clients-next .section-label{border-color:#51524b}
.clients-next-row{display:flex;justify-content:space-between;align-items:end;gap:35px;margin-top:40px}
.clients-next h2{font-size:clamp(36px,4.7vw,70px)}
.clients-next .text-link{flex-shrink:0}
.clients-teaser{margin-top:25px}
@supports (-webkit-touch-callout: none){.clients-next .text-link>span{filter:invert(94%) sepia(6%) saturate(295%) hue-rotate(4deg) brightness(104%) contrast(88%)}}
@media(max-width:1000px){.clients-hero-grid{gap:35px}.clients-hero-copy p{font-size:16px}.clients-next-row{align-items:start;flex-direction:column}}
@media(max-width:640px){
  /* Keep Clients reachable without crowding the small-screen header. */
  .header nav .nav-approach,.header nav .nav-experience{display:none}
  .header nav{gap:10px;font-size:9px}
  .clients-hero{padding-top:28px;padding-bottom:35px}
  .clients-hero .section-label{font-size:8px;gap:10px}.clients-hero .section-label a{font-size:8px}
  .clients-hero-grid{grid-template-columns:1fr;gap:30px;margin-top:35px}
  .clients-hero h1{font-size:100px}.clients-hero-copy{max-width:none;padding:0}
  .clients-hero-copy .eyebrow{margin-bottom:15px;font-size:8px}.clients-hero-copy p{font-size:16px}
  .clients-image{height:190px;margin-top:30px}.clients-image figcaption{left:20px;right:20px;bottom:18px;font-size:7px;line-height:1.7}
  .clients-directory{padding-top:15px;padding-bottom:50px}
  .clients-directory-heading{display:block}.clients-directory-heading h2{font-size:34px}.clients-directory-heading>p{margin-top:20px}
  .clients-next{padding-top:45px;padding-bottom:45px}.clients-next-row{margin-top:30px;gap:25px}.clients-next h2{font-size:38px}
}

/* Shared table columns keep every name, province and year aligned. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.client-table-wrap{margin-top:35px}
.client-table{width:100%;table-layout:fixed;border-collapse:collapse;border:0}
.client-status-col{width:30px}.client-province-col{width:125px}.client-year-col{width:100px}
.client-table th,.client-table td{border:0;text-align:left;vertical-align:top;padding:9px 0}
.client-table thead th{font-size:9px;font-weight:500;letter-spacing:1.2px;text-transform:uppercase;padding:0 0 25px;color:#62665b}
.client-table .client-name{font-size:clamp(13.5px,1.4vw,20px);font-weight:500;letter-spacing:-.025em;line-height:1.45;padding-right:28px;overflow-wrap:anywhere}
.client-table .client-province,.client-table .client-year{font-size:13px;line-height:1.8;padding-top:11px;font-variant-numeric:tabular-nums}
.client-table .client-province{white-space:nowrap}
.client-table .client-year{white-space:nowrap}
.client-table .client-status{padding-top:14px}
.client-active-star{display:block;width:14px;height:14px}
.clients-legend{display:flex;align-items:center;gap:12px;margin-top:38px;font-size:12px;line-height:1.7}
.clients-legend img{display:block;flex-shrink:0;width:14px;height:14px}
/* Desktop: let the longest name determine the table width, then centre it. */
@media(min-width:641px){
 .client-table-wrap{width:fit-content;max-width:100%;margin-left:auto;margin-right:auto}
 .client-table{width:auto;max-width:100%;table-layout:auto}
 .client-status-col{width:30px}.client-province-col{width:80px}.client-year-col{width:78px}
 .client-table .client-name{padding-right:32px}
 .client-table .client-province{padding-right:24px}
 .clients-legend{justify-content:center}
}
@media(min-width:1001px){.client-table .client-name{white-space:nowrap}}
@media(max-width:1000px){.client-province-col{width:100px}.client-year-col{width:80px}.client-table .client-name{font-size:15.5px;padding-right:20px}.client-table .client-province,.client-table .client-year{font-size:12px;padding-top:10px}.client-table .client-status{padding-top:14px}}
@media(max-width:640px){
 .client-table-wrap{margin-top:30px}.client-status-col{width:22px}.client-province-col{width:70px}.client-year-col{width:62px}
 .client-table th,.client-table td{padding:12px 0}.client-table thead th{font-size:8px;letter-spacing:.6px;padding-bottom:20px}
 .client-table .client-name{font-size:12px;line-height:1.7;padding-right:12px;letter-spacing:-.02em}
 .client-table .client-province,.client-table .client-year{font-size:10px;padding-top:13px;line-height:1.9}
 .client-table .client-status{padding-top:16px}.client-active-star{width:12px;height:12px}
 .clients-legend{font-size:11px;margin-top:30px}.clients-legend img{width:12px;height:12px}
}
