/* ==========================================================================
   Ramesh Krishna Engineers Pvt Ltd — core stylesheet
   Visual language: graphite steel + molten amber, blueprint grid motifs.
   ========================================================================== */

:root{
  --ink:#0a1826;
  --ink-2:#0f2438;
  --ink-3:#16314a;
  --paper:#f1f2f0;
  --paper-2:#e4e6e3;
  --white:#fff;

  --accent:#cb212a;
  --accent-brand:#cb212a;
  --accent-lift:#ff5a63;
  --accent-lift-rgb:255,90,99;
  --accent-soft:#f08a90;
  --accent-deep:#98161e;
  --accent-rgb:203,33,42;

  --blue:#0f5488;
  --blue-deep:#094c7e;
  --blue-rgb:15,84,136;

  --steel:#7f92a8;
  --steel-rgb:127,146,168;
  --steel-dark:#526a83;

  --line-dark:rgba(255,255,255,.11);
  --line-light:rgba(10,24,38,.13);

  --txt:#0a1826;
  --txt-mute:#54657a;
  --txt-inv:#e8eef5;
  --txt-inv-mute:#95a6ba;

  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --wrap:1220px;
  --gap:clamp(1.25rem,3vw,2.25rem);
  --radius:2px;
  --radius-card:12px;
  --shadow:0 18px 50px -22px rgba(10,24,38,.45);
  --ease:cubic-bezier(.22,.7,.3,1);
}

/* accents need more lift on dark grounds than on white */
.dark,.hero,.topbar,.site-foot,.rdso-band,.jband,.jtoday,
.lightbox,.player-stage,.work,.frame,.org,.cert,.certs{
  --accent:var(--accent-lift);
  --accent-rgb:var(--accent-lift-rgb)
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--body);color:var(--txt);background:var(--white);
  font-size:16px;line-height:1.65;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit}
h1,h2,h3,h4,.foot-h{font-family:var(--display);font-weight:600;letter-spacing:.01em;line-height:1.05;margin:0}
p{margin:0 0 1em}
ul{margin:0;padding:0;list-style:none}

.wrap{width:min(100% - 2.5rem,var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:999;background:var(--accent);color:#fff;padding:.6rem 1rem}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ---------- type ---------- */
.h-xl{font-size:clamp(1.7rem,3.4vw,2.7rem)}
.h-lg{font-size:clamp(2.1rem,4.4vw,3.4rem)}
.h-md{font-size:clamp(1.55rem,2.6vw,2.2rem)}
.h-sm{font-size:clamp(1.2rem,1.8vw,1.45rem)}
.up{text-transform:uppercase}
.amber{color:var(--accent)}

.eyebrow{
  font-family:var(--body);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:.7rem;margin:0 0 1rem
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none}
.lede{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--txt-mute);max-width:64ch}
.dark .lede,.dark p{color:var(--txt-inv-mute)}
.small{font-size:.9rem}

/* ---------- buttons ---------- */
.btn{
  --bg:var(--accent);--fg:#fff;
  display:inline-flex;align-items:center;gap:.6rem;padding:.95rem 1.6rem;
  background:var(--bg);color:var(--fg);font-weight:600;font-size:.84rem;
  letter-spacing:.09em;text-transform:uppercase;border:1px solid var(--bg);
  border-radius:var(--radius);cursor:pointer;transition:.28s var(--ease)
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(var(--accent-rgb),.7)}
.btn .ar{transition:transform .28s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn--ghost{--bg:transparent;--fg:var(--txt);border-color:var(--line-light)}
.btn--ghost:hover{border-color:var(--txt);box-shadow:none}
/* hero slide: optional eyebrow chip and a light button on the photograph */
.hero-chip{display:inline-flex;align-items:center;padding:.5rem 1.15rem;margin-bottom:1rem;
  background:rgba(255,255,255,.92);border-radius:999px;color:var(--accent-deep);
  font-family:var(--display);font-size:.72rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.hero-cta{margin-top:1.6rem}
.btn--light{--bg:#fff;--fg:var(--accent-deep);border-color:#fff}
.btn--light:hover{--bg:var(--paper);--fg:var(--accent-deep);border-color:var(--paper)}
/* a document button with no file behind it yet: reads the same, does nothing */
.btn--inert{cursor:default;pointer-events:none}
.btn--inert .ar{opacity:.5}
.dark .btn--ghost,.hero .btn--ghost,.site-foot .btn--ghost{--fg:#fff;border-color:rgba(255,255,255,.3)}
.dark .btn--ghost:hover,.hero .btn--ghost:hover,.site-foot .btn--ghost:hover{background:rgba(255,255,255,.07);border-color:#fff}

/* ---------- topbar ---------- */
.topbar{background:#07182a;color:#7b8896;font-size:.75rem;letter-spacing:.03em;
  border-bottom:1px solid rgba(255,255,255,.06)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:38px;flex-wrap:wrap}
.topbar a{display:inline-flex;align-items:center;gap:.45rem;transition:color .2s}
.topbar a:hover{color:var(--accent)}
.topbar ul{display:flex;gap:0}
.topbar ul li + li{margin-left:1.1rem;padding-left:1.1rem;border-left:1px solid rgba(255,255,255,.12)}
.topbar .tag{color:#8fa0b4;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:.67rem}
.topbar .tag::before{content:"";display:inline-block;width:5px;height:5px;background:var(--accent);
  transform:rotate(45deg) translateY(-1px);margin-right:.6rem}
@media (max-width:700px){.topbar .hide-sm{display:none}}
@media (max-width:520px){.topbar .tag{display:none}.topbar .wrap{justify-content:center}}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:60;color:var(--txt);
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line-light);
  box-shadow:inset 0 -2px 0 -1px rgba(var(--accent-rgb),.85);
  transition:background .3s var(--ease),box-shadow .3s var(--ease)
}
.site-head.scrolled{background:rgba(255,255,255,.99);
  box-shadow:0 10px 30px -22px rgba(10,24,38,.45),inset 0 -2px 0 -1px rgba(var(--accent-rgb),.9)}
.nav{position:relative;display:flex;align-items:center;gap:1.75rem;
  min-height:98px;transition:min-height .3s var(--ease)}
.site-head.scrolled .nav{min-height:74px}
.brand{display:flex;align-items:center;flex:none;margin-right:auto}
.brand-logo{height:78px;width:auto;flex:none;transition:height .3s var(--ease),transform .3s var(--ease)}
.site-head.scrolled .brand-logo{height:58px}
.brand:hover .brand-logo{transform:scale(1.03)}
@media (max-width:600px){.brand-logo,.site-head.scrolled .brand-logo{height:56px}}

/* primary items */
.menu{display:flex;align-items:center;justify-content:flex-end;gap:0;margin-left:auto}
.menu > li{position:relative}
.menu > li.has-sub{position:static}
/* hairline separators: painted as a background so they work on statically
   positioned .has-sub items too, and stay 15px tall instead of full height */
.menu > li + li{
  background-image:linear-gradient(rgba(10,24,38,.16),rgba(10,24,38,.16));
  background-size:1px 15px;background-position:left center;background-repeat:no-repeat
}
.menu > li:last-of-type > a{padding-right:.5rem}
.menu > li > a{
  display:flex;align-items:center;padding:.8rem 1rem;font-size:.78rem;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--txt);white-space:nowrap;
  transition:color .22s var(--ease);position:relative
}
.menu > li > a::before{
  content:"";position:absolute;left:1rem;right:1rem;bottom:.55rem;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)
}
.menu > li > a:hover,.menu > li:focus-within > a{color:var(--accent)}
.menu > li > a:hover::before,.menu > li:focus-within > a::before{transform:scaleX(1)}
.menu > li.is-active > a{color:var(--accent)}
.menu > li.is-active > a::before{transform:scaleX(1)}
.menu .cv{width:9px;height:6px;margin-left:.45rem;opacity:.55;flex:none;
  transition:transform .25s var(--ease),opacity .25s var(--ease)}
.has-sub:hover .cv,.has-sub:focus-within .cv{transform:rotate(180deg);opacity:1}

/* dropdown panel */
.mega{
  position:absolute;top:100%;left:0;width:min(var(--w,560px),100%);
  background:#fff;border:1px solid var(--line-light);border-top:2px solid var(--accent);
  box-shadow:0 26px 54px -26px rgba(10,24,38,.45);padding:.35rem .45rem .45rem;
  opacity:0;visibility:hidden;transform:translateY(9px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s
}
.has-sub:hover .mega,.has-sub:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}

/* The panel hangs off .nav (min-height 98px), but the menu item is only as tall
   as its label and sits centred — so there is a band of empty header between
   the two. Moving the cursor down from the label crosses that dead space, drops
   :hover and closes the panel before it can be reached. Two invisible strips
   bridge the band: one under the label, one above the panel. Both are confined
   to the trigger's own width, so neighbouring items stay clickable. The strip
   above the panel is inert while the panel is hidden, since visibility:hidden
   is inherited. Desktop only — below 1160px the panel is a static accordion. */
@media (min-width:1161px){
  .menu > li.has-sub > a::after{content:"";position:absolute;left:0;right:0;top:100%;height:30px}
  .mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:10px}
}

.mega-head{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.7rem .8rem .75rem;border-bottom:1px solid var(--line-light)}
.mega-head span{font-size:.62rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dark)}
.mega-head a,.mega-foot a{display:inline-flex;align-items:center;gap:.4rem;font-size:.67rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap}
.mega-head a .rw,.mega-foot a .rw{width:13px;height:9px;transition:transform .25s var(--ease)}
.mega-head a:hover .rw,.mega-foot a:hover .rw{transform:translateX(3px)}

.mega-list{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:0;padding:.35rem 0}
/* an odd last item spans the row so no empty cell is left */
.mega-list li:last-child:nth-child(odd){grid-column:1 / -1}
/* grid rules: a spine between the two columns, hairlines between rows */
.mega-list li:nth-child(even){box-shadow:inset 1px 0 0 rgba(10,24,38,.09)}
.mega-list li:nth-child(n+3){box-shadow:inset 0 1px 0 rgba(10,24,38,.09)}
.mega-list li:nth-child(even):nth-child(n+3){
  box-shadow:inset 1px 0 0 rgba(10,24,38,.09),inset 0 1px 0 rgba(10,24,38,.09)}
.mega-list a{
  display:flex;align-items:center;justify-content:space-between;gap:.9rem;
  padding:.6rem .8rem;border-left:2px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease)
}
.mega-list b{display:block;font-size:.85rem;font-weight:600;color:var(--txt);transition:color .2s}
.mega-list em{display:block;font-style:normal;font-size:.69rem;color:var(--txt-mute);margin-top:.15rem}
.mega-list .rw{width:14px;height:10px;flex:none;color:var(--accent);opacity:0;transform:translateX(-4px);
  transition:opacity .22s var(--ease),transform .22s var(--ease)}
.mega-list a:hover,.mega-list a:focus-visible{background:rgba(var(--accent-rgb),.07);border-left-color:var(--accent)}
.mega-list a:hover b{color:var(--accent)}
.mega-list a:hover .rw{opacity:1;transform:translateX(0)}

.mega-foot{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:.75rem .8rem .55rem;border-top:1px solid var(--line-light)}
.mega-foot span{display:inline-flex;align-items:center;gap:.5rem;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dark)}
.mega-foot span::before{content:"";width:5px;height:5px;background:var(--accent);transform:rotate(45deg);flex:none}

/* right-hand actions */
.nav-cta{display:flex;align-items:center;gap:.7rem;flex:none;margin-left:.35rem}
.nav-cta .btn{padding:.78rem 1.25rem;font-size:.75rem;letter-spacing:.1em}
.menu-cta{display:none}
.burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--line-light);
  color:var(--txt);cursor:pointer;padding:0;transition:border-color .2s,background .2s}
.burger:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.08)}
.burger span{display:block;width:17px;height:1.5px;background:currentColor;margin:3.5px auto;
  transition:.25s var(--ease)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

/* ---------- header: tablet & mobile ---------- */
@media (max-width:1160px){
  .burger{display:block}
  .nav-cta > .btn{display:none}
  .menu{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:#fff;border-top:1px solid var(--line-light);
    box-shadow:0 26px 50px -24px rgba(0,0,0,.9);
    padding:0 1.25rem;max-height:0;overflow:hidden;
    transition:max-height .38s var(--ease)
  }
  .menu.open{max-height:calc(100vh - 120px);overflow-y:auto;padding-block:.35rem 1.4rem}
  .menu > li + li{background-image:none}
  .menu > li > a{padding:1rem .15rem;font-size:.86rem;color:var(--txt);
    border-bottom:1px solid rgba(255,255,255,.07);justify-content:space-between}
  .menu > li > a::before{display:none}
  .menu > li.is-active > a{color:var(--accent)}
  .menu .cv{width:11px;height:7px;opacity:.7}
  .has-sub.open > a .cv{transform:rotate(180deg)}
  .mega{position:static;display:none;width:auto;opacity:1;visibility:visible;transform:none;
    background:transparent;border:0;border-left:1px solid rgba(255,255,255,.14);
    box-shadow:none;padding:0;margin:.4rem 0 .6rem .3rem}
  .has-sub.open .mega{display:block}
  .mega-head{padding:.15rem .95rem .5rem}
  .mega-list{grid-template-columns:1fr;padding:.3rem 0}
  .mega-list li:nth-child(even),.mega-list li:nth-child(even):nth-child(n+3){
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .mega-list li:nth-child(n+2){box-shadow:inset 0 1px 0 rgba(255,255,255,.07)}
  .mega-list li:first-child{box-shadow:none}
  .mega-list a{padding:.62rem .95rem}
  .mega-list .rw{opacity:1;transform:none;color:var(--steel)}
  .mega-foot{padding:.6rem .95rem .2rem}
  .mega-foot span{display:none}
  .menu-cta{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:1.3rem}
  .menu-cta .btn{display:inline-flex}
  .menu-call{font-family:var(--display);font-size:1.15rem;letter-spacing:.05em;color:var(--txt)}
  .menu-call:hover{color:var(--accent)}
}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-2;
  /* the banner image is set per page from the admin (--hero-img) */
  background-image:var(--hero-img,url("../img/hero.jpg"));background-size:cover;background-position:center
}
/* page heroes keep a dark wash so their copy stays readable */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(102deg,rgba(10,24,38,.94) 0%,rgba(10,24,38,.82) 38%,rgba(10,24,38,.42) 72%,rgba(15,84,136,.3) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.04) 0 1px,transparent 1px 86px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 86px)
}
/* the slider keeps only a light scrim on the reading side - the photograph
   still shows through, the copy still holds contrast */
.hero--slider::after{
  background:
    linear-gradient(100deg,rgba(10,24,38,.72) 0%,rgba(10,24,38,.52) 34%,
      rgba(10,24,38,.18) 66%,rgba(10,24,38,0) 90%),
    linear-gradient(0deg,rgba(10,24,38,.42) 0%,rgba(10,24,38,0) 34%)
}
.hero-inner{padding:clamp(3.2rem,7vw,5.6rem) 0 clamp(2.4rem,5vw,4rem)}
.badge{
  display:inline-flex;align-items:center;gap:.6rem;padding:.5rem .95rem;margin-bottom:1.5rem;
  border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.1);color:var(--accent-soft);
  font-size:.71rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase
}
.badge b{color:#fff}
.hero h1{max-width:22ch;line-height:1.12}
/* the slider has no overlay, so the copy carries its own contrast */
.hero--slider .badge,.hero--slider h1,.hero--slider .h-xl,.hero--slider .lede,
.hero--slider .hero-rule li,.hero--slider [data-slide-count]{
  text-shadow:0 2px 14px rgba(6,14,24,.9),0 1px 3px rgba(6,14,24,.7)}
.hero--slider .lede{color:#eef3f8}
.hero--slider .hero-rule li{color:#e2e9f1}
.hero h1 em,.hero .h-xl em{font-style:normal;color:var(--accent);display:block}
.hero .lede{margin-top:1.1rem;color:#c2cfdd;font-size:clamp(.95rem,1.1vw,1.05rem);max-width:56ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-rule{margin-top:clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line-dark);padding-top:1.5rem;
  display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem;align-items:center}
.hero-rule li{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-inv-mute);display:flex;align-items:center;gap:.6rem}
.hero-rule li::before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}

.page-hero{padding:clamp(3.2rem,7vw,5.5rem) 0 clamp(2.6rem,5vw,4rem)}
.page-hero h1{max-width:22ch}
.page-hero .lede{color:#c2cfdd;margin-top:1.1rem}
.crumbs{display:flex;gap:.5rem;font-size:.78rem;color:var(--txt-inv-mute);margin-bottom:1.1rem;flex-wrap:wrap}
.crumbs a:hover{color:var(--accent)}
.crumbs b{color:var(--accent);font-weight:500}

/* ---------- sections ---------- */
.section{padding:clamp(3.5rem,7vw,6.5rem) 0}
.section--tight{padding:clamp(2.6rem,4.5vw,4rem) 0}
/* Where two sections meet, each contributes its own full padding and the
   join reads as one oversized gap. Trim both sides at that seam. */
.section--flush-bottom{padding-bottom:clamp(1.6rem,2.6vw,2.6rem)}
.section--flush-top{padding-top:clamp(1rem,1.6vw,1.6rem)}
.dark{background:var(--ink);color:var(--txt-inv)}
.dark + .dark,.dark + .cta{border-top:1px solid rgba(255,255,255,.1)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.tint{background:var(--paper);border-block:1px solid rgba(10,24,38,.09)}
.sec-head{max-width:72ch;margin-bottom:clamp(2rem,4vw,3rem)}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;max-width:none;flex-wrap:wrap}
.grid{display:grid;gap:var(--gap)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-tight{gap:1px;background:var(--line-light)}
@media (max-width:980px){.g-3,.g-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

/* ---------- stat band ---------- */
/* Blue band, following the Arjit reference (#094c7e) - lighter than the hero
   above it, and a clean break before the white content below. */
.stats{
  border-block:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,var(--blue),#0b4470);
  color:#fff
}
.stats .grid{gap:0}
.stat{padding:clamp(1.7rem,3vw,2.5rem) clamp(1rem,2vw,2rem);
  border-right:1px solid rgba(255,255,255,.16);transition:background .25s var(--ease)}
.stat:last-child{border-right:0}
.stat:hover{background:rgba(255,255,255,.06)}
.stat b{display:flex;align-items:baseline;font-family:var(--display);
  font-size:clamp(1.5rem,2.7vw,2.2rem);color:#fff;line-height:1;letter-spacing:-.01em}
/* the counter's own span must not pick up the label styling below */
.stat b span{font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;display:inline;margin:0}
.stat b i{font-style:normal;color:#ffd166}
.stat > span{display:block;margin-top:.55rem;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82)}
@media (max-width:980px){.stat:nth-child(2n){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}}
@media (max-width:640px){.stat{border-right:0;border-bottom:1px solid rgba(255,255,255,.16)}
  .stat:last-child{border-bottom:0}}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--flip .split-media{order:-1}
@media (max-width:900px){.split{grid-template-columns:1fr}.split--flip .split-media{order:0}}
.split-media{position:relative}
.frame{
  position:relative;z-index:1;aspect-ratio:4/3;border:1px solid var(--line-light);
  border-radius:var(--radius-card);box-shadow:0 26px 58px -30px rgba(10,24,38,.62);
  background-color:#0f2438;background-size:cover;background-position:center;
  background-image:linear-gradient(140deg,#16314a,#0d2035);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)
}
.frame--tall{aspect-ratio:3/4}
.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,transparent 52%,rgba(10,24,38,.52)),
  repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 46px)}
/* a thin ring inside the edge, so the photograph reads as a framed object */
.frame::before{content:"";position:absolute;inset:9px;z-index:2;border-radius:calc(var(--radius-card) - 5px);
  border:1px solid rgba(255,255,255,.22);pointer-events:none}
/* an accent panel set back behind the photograph, on the corner it is free */
.split-media{isolation:isolate}
.split-media:has(.frame)::before{
  content:"";position:absolute;left:-18px;bottom:-18px;width:52%;height:56%;z-index:0;
  border:2px solid rgba(var(--accent-rgb),.5);border-radius:var(--radius-card);pointer-events:none
}
/* no second accent on the top-right: the year badge already lives there */
.split-media:hover .frame{transform:translateY(-5px);box-shadow:0 36px 72px -32px rgba(10,24,38,.7)}
@media (max-width:560px){.split-media::before{left:-8px;bottom:-8px}}
.frame-tag{position:absolute;left:0;bottom:0;z-index:3;background:var(--accent);color:#fff;
  border-radius:0 10px 0 var(--radius-card);
  padding:.8rem 1.3rem;font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}
/* the badge mirrors the caption chip in the opposite corner: same red block,
   same rounding, tucked into the photo's top-right corner */
.frame-badge{position:absolute;right:0;top:0;z-index:3;text-align:center;
  background:var(--accent);color:#fff;border:0;border-radius:0 var(--radius-card) 0 10px;
  padding:.8rem 1.3rem;font-family:var(--display);text-transform:uppercase;line-height:1.15}
/* one line, same type as the caption chip in the opposite corner */
.frame-badge b,.frame-badge span{display:inline;font-family:var(--display);font-size:1.05rem;
  letter-spacing:.06em;color:#fff;font-weight:inherit}
.frame-badge span::before{content:" "}
@media (max-width:560px){.frame-badge{padding:.6rem 1rem}
  .frame-badge b,.frame-badge span{font-size:.9rem}}

/* ---------- testing facilities strip ---------- */
.testing-strip{text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.testing-strip h2{margin:0}
.testing-strip .lede{margin:0;max-width:70ch}
.testing-strip .ticks{width:100%;text-align:left}
.testing-group{width:100%}
.testing-group h3{margin:0 0 .7rem;text-align:center}
.testing-group + .testing-group{margin-top:1.6rem}
.tick-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;
  gap:.6rem 1.8rem}
.tick-row li{position:relative;padding-left:1.6rem;font-size:.95rem;color:var(--txt-mute)}
.tick-row li::before{
  content:"";position:absolute;left:0;top:.18rem;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--accent) no-repeat center/.6rem .6rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 10.4l3.4 3.4 7.4-7.6' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
.testing-docs{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:.4rem}
.testing-strip .btn{margin-top:0}

/* sub-branches inside a single tick (e.g. Mechanical -> DT / NDT -> methods).
   .ticks li is a flex row, so the whole point has to sit in one flex child. */
.ticks .tbody{flex:1 1 auto;min-width:0}
.ticks .tsub{
  position:relative;display:block;margin-top:.28rem;padding-left:.95rem;
  font-size:.92em;line-height:1.5;color:var(--txt-mute)
}
.ticks .tsub::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:1px;
  background:currentColor;opacity:.5}
.ticks .tsub .tsub{font-size:1em}
.dark .ticks .tsub{color:var(--txt-inv-mute)}

/* ---------- ISO certification panel ---------- */
.iso-cert{
  --iso-bg:#0d3a68;
  display:grid;grid-template-columns:1fr auto;align-items:center;
  gap:clamp(1.5rem,4vw,3.2rem);
  padding:clamp(1.8rem,4vw,2.9rem) clamp(1.6rem,4vw,3.1rem);
  border-radius:14px;color:#fff;
  background:linear-gradient(118deg,#154a86,var(--iso-bg) 62%,#0a2e55)
}
.iso-cert h2{font-size:clamp(1.35rem,2.6vw,1.75rem);margin:0 0 1.1rem;color:#fff}
.iso-cert-list{list-style:none;margin:0;padding:0;display:grid;gap:.62rem}
.iso-cert-list li{
  position:relative;padding-left:1.85rem;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.94)
}
.iso-cert-list li::before{
  content:"";position:absolute;left:0;top:.28rem;width:1.15rem;height:1.15rem;border-radius:50%;
  background:#fff no-repeat center/.68rem .68rem;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.6 10.4l3.4 3.4 7.4-7.6' fill='none' stroke='%230d3a68' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
.iso-seal{width:clamp(150px,17vw,215px);height:auto;color:#fff;flex:none;justify-self:end}
.iso-seal-arc{font-family:var(--display);font-size:19px;font-weight:700;letter-spacing:5px;fill:currentColor}
.iso-seal-main{font-family:var(--display);font-size:46px;font-weight:800;letter-spacing:1px;fill:currentColor}
.iso-seal-sub{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:3px;fill:currentColor}
@media(max-width:760px){
  .iso-cert{grid-template-columns:1fr;justify-items:center;text-align:center}
  .iso-cert-copy{order:2;width:100%;min-width:0}
  .iso-cert-list li{text-align:left;overflow-wrap:anywhere}
  .iso-seal{justify-self:center;margin-bottom:.4rem}
}

/* ---------- brochure modal ---------- */
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}
.foot-brochure{--bg:var(--accent-brand);margin-top:.15rem;padding:.78rem 1.35rem;
  font-size:.78rem;letter-spacing:.1em}
.foot-brochure:hover{--bg:var(--accent-deep)}
.foot-brochure .ar{margin-left:.1rem}
/* the button is an atomic inline box; the social row needs its own gap */
.foot-brochure + .social{margin-top:1.3rem}
.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}
.modal-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2rem}
.modal[hidden]{display:none}
.modal-back{position:absolute;inset:0;background:rgba(10,24,38,.62);backdrop-filter:blur(2px)}
.modal-card{position:relative;width:min(100%,440px);max-height:calc(100vh - 2.4rem);overflow:auto;
  background:var(--white);box-shadow:0 40px 90px -30px rgba(10,24,38,.6);animation:modal-in .28s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.modal-card{animation:none}}
.modal-head{position:relative;padding:clamp(1.4rem,3vw,1.9rem);background:var(--paper);border-bottom:1px solid var(--line-light)}
.modal-ico{display:grid;place-items:center;width:44px;height:44px;background:var(--accent);color:#fff;margin-bottom:1rem}
.modal-head h2{font-size:1.3rem;margin:0 0 .35rem}
.modal-head p{font-size:.88rem;color:var(--txt-mute);margin:0;text-align:left}
.modal-x{position:absolute;right:1rem;top:1rem;width:34px;height:34px;display:grid;place-items:center;
  border:0;background:var(--ink);color:#fff;font-size:1.25rem;line-height:1;cursor:pointer;transition:.2s var(--ease)}
.modal-x:hover{background:var(--accent)}
.modal-body{padding:clamp(1.4rem,3vw,1.9rem);display:grid;gap:.75rem}
.modal-body input{width:100%;padding:.8rem .95rem;border:1px solid var(--line-light);background:var(--white);
  font:inherit;font-size:.94rem;color:var(--txt);transition:.2s var(--ease)}
.modal-body input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)}
.modal-submit{width:100%;justify-content:center;margin-top:.35rem}
.modal-submit[disabled]{opacity:.6;cursor:progress}
.modal-note{font-size:.76rem;color:var(--txt-mute);text-align:center;margin:0}
.modal-status{font-size:.82rem;text-align:center;margin:0;min-height:1.1em}
.modal-status.is-ok{color:#1b7f4b}
.modal-status.is-err{color:var(--accent)}

/* rounded corners across every card-shaped block */
.card,.work,.doc,.artisan,.unit,.csr,.mcard,.svc,.lead-panel,.gtile,.iso-cert,.frame{
  border-radius:var(--radius-card)
}
/* clipped so accent bars and inner photographs follow the curve. .frame is
   deliberately left out: its corner badge overhangs the edge by design */
.card,.work,.doc,.artisan,.unit,.csr,.mcard,.svc,.lead-panel,.gtile,.iso-cert{
  overflow:hidden
}

/* long-form body copy on a category page */
/* the photo fills the row rather than holding a fixed 4:3 box, so a short
   description does not leave a gap beside a much taller image */
.split--copy{align-items:stretch}
.split--copy .prose{max-width:none}
.split--copy .split-media{display:flex}
.split--copy .frame{aspect-ratio:auto;height:100%;width:100%;min-height:clamp(260px,30vw,400px)}
/* the offset accent panel belongs to the 4:3 hero frames; behind a full-height
   photo it just reads as a stray outline poking past the corner */
.split--copy .split-media:has(.frame)::before{content:none}
/* the "see the machine photographs" pointer above a machinery table */
.note-link{margin:1.1rem 0 0}
.note-link a{display:inline-flex;align-items:center;gap:.55rem;
  background:rgba(var(--accent-rgb),.08);border:1px solid rgba(var(--accent-rgb),.35);
  border-left:4px solid var(--accent);border-radius:10px;padding:.7rem 1.1rem;
  color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;
  transition:background .25s var(--ease),transform .25s var(--ease)}
.note-link a:hover{background:rgba(var(--accent-rgb),.16);transform:translateX(3px)}
.note-link .ar{transition:transform .25s var(--ease)}
.note-link a:hover .ar{transform:translateX(3px)}
/* the measuring instruments register on a unit page */
.spec--instruments{font-size:.88rem}
.spec--instruments th,.spec--instruments td{padding:.62rem .8rem;vertical-align:middle}
.spec--instruments thead th{font-size:.8rem;letter-spacing:.06em}
.spec--instruments td:first-child,.spec--instruments th:first-child{width:50px;text-align:center}
.spec--instruments td:last-child,.spec--instruments th:last-child{width:auto}
.spec--instruments td:nth-child(3),.spec--instruments td:nth-child(4),.spec--instruments td:nth-child(5),
.spec--instruments th:nth-child(3),.spec--instruments th:nth-child(4),.spec--instruments th:nth-child(5){text-align:center;white-space:nowrap}
.spec--instruments .agency{text-align:center;border-left:1px solid var(--line-light);min-width:22ch}
/* facility cards on a unit page: the description beside its photographs */
.fac-list{display:grid;gap:1.8rem}
.fac-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.4rem,3vw,3rem);align-items:center;
  background:#fff;border:1px solid rgba(10,24,38,.06);border-radius:28px;padding:clamp(1.3rem,3vw,2.6rem);
  box-shadow:0 22px 48px -34px rgba(10,24,38,.4)}
.fac-card--text{grid-template-columns:1fr}
.fac-copy h3{font-family:inherit;font-size:clamp(1.3rem,2.2vw,1.85rem);font-weight:600;line-height:1.2;
  letter-spacing:-.01em;text-transform:none;color:var(--txt);margin:0 0 1rem}
.fac-copy p{margin:0 0 .8rem;font-size:.95rem;line-height:1.75;color:var(--txt-mute)}
.fac-copy p:last-child{margin-bottom:0}
.fac-media{display:grid;gap:.8rem}
.fac-media--pair{grid-template-columns:1fr 1fr}
.fac-media a{display:block;border-radius:18px;overflow:hidden}
.fac-media img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover;transition:transform .45s var(--ease)}
.fac-media--pair img{aspect-ratio:4/3;height:100%}
.fac-media a:hover img{transform:scale(1.03)}
@media (max-width:860px){.fac-card{grid-template-columns:1fr}}
/* plant layout drawing beside the area-wise facilities */
.split--layout{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center}
@media (max-width:900px){.split--layout{grid-template-columns:1fr}}
.layout-plan{position:relative;display:block;background:#fff;border:1px solid var(--line-light);
  border-radius:var(--radius-card);padding:.9rem;box-shadow:var(--shadow)}
.layout-plan img{display:block;width:100%;height:auto}
.layout-zoom{position:absolute;right:1.2rem;bottom:1.2rem;background:var(--accent);color:#fff;font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;padding:.45rem .85rem;border-radius:999px}
.area-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-light)}
.area-list li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.85rem 0;
  border-bottom:1px solid var(--line-light)}
.area-list b{display:block;font-weight:600;color:var(--txt)}
.area-list small{display:block;font-size:.84rem;color:var(--txt-mute);margin-top:.15rem}
.area-list strong{white-space:nowrap;color:var(--accent);font-family:var(--display);font-size:1.15rem;letter-spacing:.02em}
.area-totals{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0 0}
.area-totals div{background:rgba(var(--accent-rgb),.07);border-left:4px solid var(--accent);border-radius:10px;padding:.8rem 1rem}
.area-totals dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute)}
.area-totals dd{margin:.2rem 0 0;font-family:var(--display);font-size:1.35rem;color:var(--txt)}
/* the plant layout sits on the dark band: light type, faint rules */
#plant-layout.dark h2{color:#fff}
#plant-layout.dark .layout-plan{border-color:transparent;box-shadow:0 34px 70px -34px rgba(0,0,0,.7)}
#plant-layout.dark .area-list{border-top-color:rgba(255,255,255,.14)}
#plant-layout.dark .area-list li{border-bottom-color:rgba(255,255,255,.14)}
#plant-layout.dark .area-list b{color:#fff}
#plant-layout.dark .area-list small{color:var(--txt-inv-mute)}
#plant-layout.dark .area-totals div{background:rgba(255,255,255,.06)}
#plant-layout.dark .area-totals dt{color:var(--txt-inv-mute)}
#plant-layout.dark .area-totals dd{color:#fff}
/* stacking yard photographs below the plant layout */
.stack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem}
.stack-grid a{display:block;border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow)}
.stack-grid img{display:block;width:100%;aspect-ratio:1204/620;object-fit:cover;transition:transform .45s var(--ease)}
.stack-grid a:hover img{transform:scale(1.03)}
@media (max-width:760px){.stack-grid{grid-template-columns:1fr}}
.prose{max-width:74ch}
.prose p{margin:0 0 1.05rem;font-size:1rem;line-height:1.8;color:var(--txt-mute)}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--txt);font-weight:600}
.dark .prose p{color:var(--txt-inv-mute)}
.dark .prose strong{color:#fff}

/* ---------- cards ---------- */
/* a light section may carry a photograph; the wash keeps dark text and the
   pale cards legible over it */
.section.has-bg{background-size:cover;background-position:center;background-repeat:no-repeat}
.section.is-subtle{--wash-1:rgba(255,255,255,.94);--wash-2:rgba(255,255,255,.97)}
.section.is-medium{--wash-1:rgba(255,255,255,.88);--wash-2:rgba(255,255,255,.93)}
.section.is-strong{--wash-1:rgba(255,255,255,.78);--wash-2:rgba(255,255,255,.86)}
/* a dark section needs the wash the other way round, or the photo washes out
   the pale text sitting on it */
.section.dark.is-subtle{--wash-1:rgba(10,24,38,.93);--wash-2:rgba(10,24,38,.97)}
.section.dark.is-medium{--wash-1:rgba(10,24,38,.86);--wash-2:rgba(10,24,38,.92)}
.section.dark.is-strong{--wash-1:rgba(10,24,38,.76);--wash-2:rgba(10,24,38,.86)}

/* cards that sit to their own content instead of stretching to the tallest in
   the row — for grids where the entries differ a lot in length */
.cards--fit{align-items:start}
.cards--flow{display:flex;flex-wrap:wrap}
.cards--flow .card{flex:1 1 300px}
.cards--fit .card{height:auto}

.card{background:var(--paper);border:1px solid var(--line-light);padding:clamp(1.4rem,2.4vw,1.9rem);
  position:relative;transition:.3s var(--ease);height:100%;display:flex;flex-direction:column}
.tint .card{background:var(--white)}
.dark .card{background:var(--ink-2);border-color:var(--line-dark)}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card:hover::before{transform:scaleX(1)}
/* an optional icon above the heading; cards without one are unchanged */
.card .icon{width:44px;height:44px;border-radius:10px;margin-bottom:1.05rem}
.card .icon svg{width:21px;height:21px}
.card .icon i{font-size:19px}
.card:hover .icon{background:rgba(var(--accent-rgb),.18);border-color:rgba(var(--accent-rgb),.45)}
/* on the dark band the tint needs lifting so the glyph still reads */
.dark .card .icon{background:rgba(var(--accent-rgb),.2);border-color:rgba(var(--accent-rgb),.4);
  color:var(--accent-lift)}
.dark .card:hover .icon{background:rgba(var(--accent-rgb),.3);border-color:rgba(var(--accent-rgb),.6)}
.card .icon{transition:background .3s var(--ease),border-color .3s var(--ease)}
.card h3{font-size:1.3rem;margin-bottom:.55rem;text-transform:uppercase}
.card p{font-size:.93rem;color:var(--txt-mute);margin-bottom:0}
.dark .card p{color:var(--txt-inv-mute)}
.card .more{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:1.1rem;
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.card:hover .more .ar{transform:translateX(4px)}
.card .more .ar{transition:transform .25s var(--ease)}
.icon{width:46px;height:46px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);
  color:var(--accent);margin-bottom:1rem;border:1px solid rgba(var(--accent-rgb),.28);flex:none}
.icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.icon i{font-size:20px;line-height:1}

/* ---------- work / project cards ---------- */
.work{position:relative;overflow:hidden;border:1px solid var(--line-light);background:var(--ink);color:#fff;
  min-height:330px;display:flex;flex-direction:column;justify-content:flex-end}
.work-img{position:absolute;inset:0;background-size:cover;background-position:center;
  background-image:linear-gradient(150deg,#1d3852,#0b1c2e);transition:transform .6s var(--ease);filter:grayscale(.25)}
/* the scrim has to carry body text over bright photographs, so it ramps up
   earlier and finishes darker than a purely decorative overlay would */
.work::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,24,38,.12) 18%,rgba(10,24,38,.62) 52%,rgba(10,24,38,.97))}
.work:hover .work-img{transform:scale(1.06)}
.work-body{position:relative;z-index:2;padding:1.5rem}
.work-body .kicker{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:.5rem}
.work-body h3{font-size:1.3rem;text-transform:uppercase;margin-bottom:.4rem}
.work-body p{font-size:.89rem;color:#c0ccdb;margin:0}
.work[hidden]{display:none}
.work-subs{list-style:none;margin:.95rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.work-subs a,.work-subs span{display:inline-block;padding:.3rem .62rem;font-size:.75rem;line-height:1.25;
  border:1px solid rgba(255,255,255,.22);color:#cfdae7;transition:.22s var(--ease)}
.work-subs a:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.2);color:#fff}
.work-subs--light{margin:0 0 1.6rem}
.work-subs--light a,.work-subs--light span{border-color:var(--line-light);color:var(--txt-mute)}
.work-subs--light a:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.08);color:var(--accent)}
a.work-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem}

/* ---------- filter chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.chip{padding:.6rem 1.1rem;border:1px solid var(--line-light);background:transparent;color:var(--txt-mute);
  font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:.25s var(--ease)}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.chip .n{opacity:.65;margin-left:.35rem;font-weight:500}

/* ---------- process flow ---------- */
.flow{
  --fl:rgba(var(--accent-rgb),.4);--fd:rgba(var(--accent-rgb),.14);
  --ft:var(--txt-mute);--fc:var(--white);
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(var(--cols,5),1fr)
}
.flow > li{position:relative;padding-right:1.8rem}
.flow > li:last-child{padding-right:0}

/* rail running from this node to the next, with an arrow head */
.flow > li::before{
  content:"";position:absolute;top:26px;left:66px;right:14px;height:2px;
  background:linear-gradient(90deg,var(--fl),var(--fd))
}
.flow > li::after{
  content:"";position:absolute;top:21px;right:2px;
  border:6px solid transparent;border-left-color:var(--fd)
}
.flow > li:last-child::before,.flow > li:last-child::after{display:none}

.flow-num{
  display:grid;place-items:center;width:54px;height:54px;border-radius:50%;
  background:var(--fc);border:2px solid var(--fl);
  font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--accent);
  transition:.3s var(--ease)
}
.flow h3{
  font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  margin:1.2rem 0 .5rem;transition:color .25s var(--ease)
}
.flow p{
  font-size:.85rem;line-height:1.7;color:var(--ft);margin:0;
  text-align:left;hyphens:manual;padding-right:1.2rem
}
.flow > li:hover .flow-num{
  background:var(--accent);border-color:var(--accent);color:#fff;
  transform:translateY(-3px);box-shadow:0 12px 26px -12px rgba(var(--accent-rgb),.75)
}
.flow > li:hover h3{color:var(--accent)}

.dark .flow{--fc:transparent;--ft:var(--txt-inv-mute);
  --fl:rgba(255,255,255,.32);--fd:rgba(255,255,255,.14)}
.dark .flow-num{color:#fff}

/* a sequence that runs onto a second row: the rail must stop at the row end,
   not point off the edge into nothing */
.flow > li:nth-child(5n)::before,.flow > li:nth-child(5n)::after{display:none}
.flow{row-gap:2.8rem}

/* steps that carry a glyph: the badge holds the icon, the number becomes a chip.
   The glyph inherits the badge's colour, so it stays legible when the badge
   fills with accent on hover. */
.flow--icon .flow-num svg{width:23px;height:23px;stroke:currentColor;fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.flow--icon .flow-num i{font-size:21px;line-height:1}
.flow--icon > li{padding-top:8px}
.flow-step{
  position:absolute;left:36px;top:-2px;z-index:2;display:grid;place-items:center;
  min-width:23px;height:21px;padding:0 .32rem;border-radius:999px;
  background:var(--accent);color:#fff;font-family:var(--display);font-style:normal;
  font-size:.7rem;letter-spacing:.04em;line-height:1;
  border:2px solid var(--ink);
  box-shadow:0 3px 10px -4px rgba(0,0,0,.8)
}
/* on a light section the chip is ringed by the page, not the dark band */
.flow--icon:not(.dark .flow--icon) .flow-step{border-color:var(--white)}
.dark .flow--icon .flow-step{border-color:var(--ink-2)}
.dark .flow-step{box-shadow:0 4px 14px -4px rgba(0,0,0,.7)}

@media (max-width:1000px){
  .flow{grid-template-columns:repeat(2,1fr);row-gap:2.6rem}
  .flow > li:nth-child(2n)::before,.flow > li:nth-child(2n)::after{display:none}
}
@media (max-width:560px){
  .flow{grid-template-columns:1fr;row-gap:0}
  .flow > li{padding:0 0 2.2rem 4.8rem}
  .flow > li:last-child{padding-bottom:0}
  .flow > li::before{display:block;top:62px;bottom:.4rem;left:26px;right:auto;
    width:2px;height:auto;background:linear-gradient(180deg,var(--fl),var(--fd))}
  .flow > li::after{display:none}
  .flow > li:last-child::before{display:none}
  .flow-num{position:absolute;left:0;top:0}
  .flow h3{margin-top:.4rem}
  .flow p{padding-right:0}
}

/* ---------- ticks / lists ---------- */
.ticks{
  --tl:var(--line-light);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
  border-top:1px solid var(--tl);border-left:1px solid var(--tl)
}
.dark .ticks{--tl:var(--line-dark)}
.ticks li{
  display:flex;align-items:flex-start;gap:.75rem;
  padding:.95rem 1.1rem;font-size:.92rem;line-height:1.5;
  border-right:1px solid var(--tl);border-bottom:1px solid var(--tl);
  text-align:left;hyphens:manual;transition:background .25s var(--ease)
}
.ticks li:hover{background:rgba(var(--accent-rgb),.05)}
.ticks li::before{
  content:"";width:15px;height:15px;flex:none;margin-top:.25rem;background:var(--accent);
  clip-path:polygon(14% 44%,0 58%,42% 100%,100% 22%,86% 8%,42% 72%)
}
.dark .ticks li{color:var(--txt-inv-mute)}
/* an odd final item fills the row rather than leaving a gap */
.ticks li:last-child:nth-child(odd){grid-column:1 / -1}
.ticks--2{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
/* trailing items grow to fill the last row, so a count that does not divide
   evenly by the column count leaves no empty cells */
.ticks--flow{display:flex;flex-wrap:wrap}
.ticks--flow li{flex:1 1 258px}


.pill-list{display:flex;flex-wrap:wrap;gap:.5rem}
.pill-list li{border:1px solid var(--line-light);padding:.5rem .9rem;font-size:.83rem;color:var(--txt-mute)}
.dark .pill-list li{border-color:var(--line-dark);color:var(--txt-inv-mute)}
.pill-list li:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- tables ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line-light);background:var(--white)}
.spec{width:100%;border-collapse:collapse;font-size:.92rem;min-width:620px}
.spec th,.spec td{text-align:left;padding:.85rem 1rem;border-bottom:1px solid var(--line-light)}
.spec thead th{font-family:var(--display);font-size:1rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--paper);white-space:nowrap}
.spec tbody tr:last-child td{border-bottom:0}
.spec tbody tr:hover{background:rgba(var(--accent-rgb),.05)}
.spec td:first-child{color:var(--accent);font-family:var(--display);font-size:1rem;width:60px}
.spec td:last-child,.spec th:last-child{text-align:center;width:70px}

.unit-address{font-size:.95rem;color:var(--txt-mute);margin:0 0 1.4rem;max-width:60ch;text-align:left}
.unit-facts{display:flex;flex-wrap:wrap;gap:1rem 3rem;margin:0 0 1.6rem}
.unit-facts div{max-width:60ch}
.unit-facts dt{font-size:.68rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.3rem}
.unit-facts dd{margin:0;font-size:.95rem;color:var(--txt-mute);text-align:left}
.dark .unit-address{color:var(--txt-inv-mute)}

/* ---------- units ---------- */
.unit{display:grid;grid-template-columns:1fr;padding:1.6rem;border:1px solid var(--line-light);
  background:var(--white);transition:.3s var(--ease)}
.unit:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.unit h3{font-size:1.25rem;text-transform:uppercase;margin-bottom:.3rem}
/* registered-address table: the unit column stays on one line, the address
   wraps, and the link column shrinks to its content */
/* the Sl. No column only ever holds two digits */
.spec--units td:first-child,.spec--units th:first-child{width:40px;padding-left:.7rem;padding-right:.4rem;text-align:center}
.spec--units td:nth-child(2){white-space:nowrap}
.spec--units td:nth-child(3),.spec--units td:nth-child(4){min-width:16ch}
/* nine columns, so the type and padding tighten to keep the last one on screen */
.spec--units{font-size:.85rem}
.spec--units th,.spec--units td{padding:.62rem .55rem}
.spec--units thead th{font-size:.78rem;letter-spacing:.06em}
/* area, power and ownership hug their text; the two link columns sit right */
.spec--units td:nth-child(5),.spec--units td:nth-child(6),.spec--units td:nth-child(7),
.spec--units th:nth-child(5),.spec--units th:nth-child(6),.spec--units th:nth-child(7){white-space:nowrap;width:1%}
.spec--units td:nth-child(8),.spec--units td:nth-child(9),
.spec--units th:nth-child(8),.spec--units th:nth-child(9){width:1%;white-space:nowrap;text-align:right;vertical-align:middle}
.spec--units .more{display:inline-flex;align-items:center;gap:.45rem;font-size:.72rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.spec--units tr:hover .more .ar{transform:translateX(4px)}
.spec--units .more .ar{transition:transform .25s var(--ease)}

.unit .more{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;font-size:.75rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.unit .more .ar{transition:transform .25s var(--ease)}
.unit:hover .more .ar{transform:translateX(4px)}
.unit .place{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:.6rem}
.unit p{font-size:.9rem;color:var(--txt-mute);margin:0}

/* ---------- certification section ---------- */
.cert-split{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:940px){.cert-split{grid-template-columns:1fr}}
.cert-intro h2{line-height:1.05}
.cert-rule{display:block;width:64px;height:3px;background:var(--accent);margin:1.2rem 0 1.4rem}
.approvals{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.6rem;margin-top:1.8rem}
.approvals li{
  display:flex;align-items:center;gap:.55rem;padding:.65rem .85rem;
  border:1px solid var(--line-dark);color:#ccd7e3;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  transition:.25s var(--ease)
}
.approvals li:hover{border-color:var(--accent);color:#fff;background:rgba(var(--accent-rgb),.07)}
.approvals svg{width:15px;height:15px;flex:none;color:var(--accent)}

.cert-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
@media (max-width:560px){.cert-cards{grid-template-columns:1fr}}
.cert-card{margin:0;background:var(--white);border:1px solid var(--line-light);padding:1rem;
  transition:.3s var(--ease)}
.cert-card:hover{transform:translateY(-4px);box-shadow:0 22px 44px -24px rgba(0,0,0,.85)}
.cert-plate{display:grid;place-items:center;width:100%;padding:.9rem;border:0;background:#f1f4f8;cursor:zoom-in}
.cert-plate img{width:100%;height:262px;object-fit:contain}
.cert-card figcaption{padding:.95rem .25rem .2rem}
.cert-card b{display:block;font-family:var(--display);font-size:1.12rem;letter-spacing:.02em;color:var(--txt)}
.cert-card span{display:block;font-size:.84rem;color:var(--txt-mute);margin-top:.25rem}
@media (max-width:700px){.cert-plate img{height:210px}}

/* ---------- gallery ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.55rem}
.gallery figure{margin:0;position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line-light);
  background:linear-gradient(150deg,#1d3852,#0b1c2e);background-size:cover;background-position:center}
.gallery figure::after{content:"";position:absolute;inset:0;background:rgba(var(--accent-rgb),0);transition:.3s}
.gallery figure:hover::after{background:rgba(var(--accent-rgb),.2)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.7rem .8rem;
  background:linear-gradient(transparent,rgba(10,24,38,.9));color:#fff;font-size:.78rem;letter-spacing:.06em}
.gallery .wide{grid-column:span 2;aspect-ratio:2/1}
@media (max-width:800px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* ---------- cta ---------- */
.cta{
  position:relative;overflow:hidden;background:var(--white);color:var(--txt);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light)
}
.cta::before{
  content:"";position:absolute;inset:0;opacity:.6;
  background:
    repeating-linear-gradient(90deg,rgba(10,24,38,.032) 0 1px,transparent 1px 76px),
    repeating-linear-gradient(0deg,rgba(10,24,38,.032) 0 1px,transparent 1px 76px)
}
.cta::after{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--accent)}
.cta .wrap{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:clamp(1.2rem,3vw,2.5rem);flex-wrap:wrap;
  padding:clamp(1.7rem,3.2vw,2.4rem) 0
}
.cta .eyebrow{margin-bottom:.5rem}
.cta h2{color:var(--txt);max-width:26ch;line-height:1.08}
.cta-flow{margin:.6rem 0 0;font-size:.83rem;color:var(--txt-mute);text-align:left;hyphens:manual}
.cta-flow i{font-style:normal;margin:0 .45rem;color:var(--accent);opacity:.75}
.cta-actions{display:flex;gap:.7rem;flex-wrap:wrap;flex:none}
.cta .btn--line{background:transparent;border-color:var(--line-light);color:var(--txt)}
.cta .btn--line:hover{background:var(--paper);border-color:var(--txt);box-shadow:none}
@media (max-width:820px){
  .cta .wrap{flex-direction:column;align-items:flex-start}
  .cta h2{max-width:none}
}

/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4rem);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.info{border:1px solid var(--line-light);padding:1.3rem;display:flex;gap:1rem;align-items:flex-start;background:var(--white)}
.info .icon{margin:0}
.info b{display:block;font-family:var(--display);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.info p,.info a{font-size:.92rem;color:var(--txt-mute);margin:0;display:block}
.info a:hover{color:var(--accent)}
form{background:var(--white);border:1px solid var(--line-light);padding:clamp(1.4rem,3vw,2.2rem)}
.field{margin-bottom:1.05rem}
.field label{display:block;font-size:.73rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute);margin-bottom:.4rem}
.field input,.field select,.field textarea{width:100%;padding:.82rem .9rem;border:1px solid var(--line-light);
  background:#f3f6f9;font:inherit;font-size:.94rem;color:var(--txt);border-radius:var(--radius);transition:.2s}
.field textarea{min-height:128px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12)}
.field.err input,.field.err textarea,.field.err select{border-color:#d33;background:#fdf3f4}
.field .msg{display:none;font-size:.78rem;color:#d33;margin-top:.35rem}
.field.err .msg{display:block}
.form-status.err{color:#cb212a}
.form-note{font-size:.8rem;color:var(--txt-mute);margin:.9rem 0 0}
.form-status{margin-top:1rem;padding:.85rem 1rem;border-left:3px solid var(--accent);background:rgba(var(--accent-rgb),.09);font-size:.9rem;display:none}
.form-status.show{display:block}
.map{aspect-ratio:16/7;width:100%;border:1px solid var(--line-light);filter:grayscale(.3);display:block}
.map:hover{filter:none}
/* a unit card carrying its own map: flush to the card edges, so it follows the
   card's rounded corners (.unit is overflow:hidden). 1fr auto keeps the maps in
   a row level with each other however long the addresses run. */
.unit--map{grid-template-rows:1fr auto}
.unit-map{margin:1.5rem -1.6rem -1.6rem;border-top:1px solid var(--line-light)}
.unit-map .map{aspect-ratio:16/9;border:0;display:block}
@media (max-width:560px){.unit-map .map{aspect-ratio:4/3}}

/* a map with its own caption; --wide is the single full-width variant */
.map-fig{margin:0}
.map-fig .map{aspect-ratio:4/3}
.map-fig--wide{margin:1.8rem 0 0}
.map-fig--wide .map{aspect-ratio:16/7}
.map-fig figcaption{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;padding:.7rem .1rem 0}
.map-fig figcaption b{font-family:var(--display);font-size:.78rem;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--steel-dark)}
.map-fig figcaption span{font-size:.82rem;color:var(--txt-mute);line-height:1.45}
@media (max-width:560px){
  .map-fig .map,.map-fig--wide .map{aspect-ratio:4/3}
}

/* ---------- footer ---------- */
.site-foot{background:#061220;color:var(--txt-inv-mute);font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.1)}
.foot-top{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.35fr;gap:clamp(1.6rem,3vw,3rem);
  padding:clamp(2.8rem,6vw,4.2rem) 0;align-items:start}
@media (max-width:960px){.foot-top{grid-template-columns:1fr 1fr;row-gap:2.6rem}
  .foot-brand{grid-column:1 / -1}}
@media (max-width:560px){.foot-top{grid-template-columns:1fr}}

.foot-top h4,.foot-top .foot-h{font-size:1rem;letter-spacing:.14em;text-transform:uppercase;color:#fff;
  margin-bottom:1.1rem;padding-bottom:.7rem;border-bottom:1px solid var(--line-dark);position:relative}
.foot-top h4::after,.foot-top .foot-h::after{content:"";position:absolute;left:0;bottom:-1px;width:38px;height:1px;background:var(--accent)}

/* optional footer photograph. The image and its tint are written inline by the
   renderer (see chrome.js); these only control how it is laid out. */
.site-foot.has-bg{background-size:cover,cover;background-position:center,center;
  background-repeat:no-repeat,no-repeat}

.foot-brand .brand{margin-bottom:1.1rem}
.foot-brand p{font-size:.88rem;line-height:1.7;max-width:38ch;text-align:left;hyphens:manual;margin-bottom:1.2rem}
.foot-brand strong{color:#d9e2ec;font-weight:600}

.foot-col li{margin-bottom:.65rem}
.foot-col a{display:inline-flex;align-items:center;gap:.5rem;transition:color .2s var(--ease),transform .2s var(--ease)}
.foot-col a::before{content:"";width:5px;height:5px;background:var(--steel-dark);transform:rotate(45deg);
  flex:none;transition:background .2s var(--ease)}
.foot-col a:hover{color:#fff;transform:translateX(3px)}
.foot-col a:hover::before{background:var(--accent)}

.foot-contact .fc-item{margin-bottom:1.1rem}
.foot-contact .fc-item:last-child{margin-bottom:0}
.fc-label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.35rem}
.foot-contact a{display:block;transition:color .2s}
.foot-contact a:hover{color:#fff}
.foot-contact p{font-size:.86rem;line-height:1.65;margin:0;text-align:left;hyphens:manual}

.social{display:flex;gap:.55rem}
.social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-dark);transition:.25s}
.social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.social svg{width:16px;height:16px;fill:currentColor}

.foot-bot{border-top:1px solid var(--line-dark);padding:1.15rem 0;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-size:.81rem;color:#71839a}

/* ---------- reveal + misc ---------- */
.reveal{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
.to-top{position:fixed;right:1.1rem;bottom:1.1rem;z-index:50;width:44px;height:44px;display:grid;place-items:center;
  background:var(--accent);color:#fff;border:0;cursor:pointer;opacity:0;pointer-events:none;transition:.3s var(--ease)}
.to-top.show{opacity:1;pointer-events:auto}
.to-top:hover{transform:translateY(-3px)}
.wa{position:fixed;right:1.1rem;bottom:4.3rem;z-index:50;width:44px;height:44px;display:grid;place-items:center;
  background:#25d366;color:#fff;transition:.25s var(--ease)}
.wa:hover{transform:translateY(-3px)}
.wa svg{width:22px;height:22px;fill:currentColor}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  html{scroll-behavior:auto}
}
@media print{
  .site-head,.topbar,.to-top,.wa,.cta,.hero-actions{display:none}
  body{color:#000}
  .dark,.hero{background:#fff!important;color:#000!important}
}

/* ---------- certificate scans ---------- */
.certs-img{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.certs-img figure{margin:0;border:1px solid var(--line-light);background:var(--white);padding:1rem}
.certs-img img{width:100%;height:340px;object-fit:contain;background:var(--paper)}
.certs-img figcaption{margin-top:.8rem;font-size:.82rem;color:var(--txt-mute);letter-spacing:.04em}
@media (max-width:640px){.certs-img{grid-template-columns:1fr}.certs-img img{height:260px}}

/* ---------- hero slide rotation ---------- */
[data-slide] p.h-xl{margin:0;font-family:var(--display);font-weight:600;line-height:1.12;
  max-width:22ch;text-align:left;hyphens:manual;text-wrap:balance}
[data-slide].in{animation:slideUp .6s var(--ease) both}
/* Every slide sits in the same grid cell, so the block is always as tall as
   its tallest slide and the hero no longer jumps when a slide with a chip
   and button comes round. Only the first shows before the script runs. */
.hero-slides{display:grid}
.hero-slides > [data-slide]{grid-area:1 / 1}
.hero-slides > [data-slide]:not(:first-child){visibility:hidden}
/* manual prev / next arrows on the hero slider */
.hero-nav{position:absolute;top:50%;z-index:3;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;border:0;padding:0;display:grid;place-items:center;
  background:rgba(255,255,255,.92);color:var(--ink);cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.55);transition:background .2s,transform .2s}
.hero-nav:hover{background:#fff;transform:translateY(-50%) scale(1.07)}
.hero-nav:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hero-nav svg{width:10px;height:16px}
.hero-nav--prev{left:clamp(.6rem,1.6vw,1.4rem)}
.hero-nav--next{right:clamp(.6rem,1.6vw,1.4rem)}
/* The content column only keeps a 1.25rem margin once the screen narrows, so the
   arrows would sit on the headline. Pad the column just enough to clear them:
   zero while there is room either side, growing as the margin shrinks. */
.hero--slider .hero-inner{box-sizing:border-box;
  padding-inline:max(0px, calc(4.4rem - (100vw - min(100vw - 2.5rem, var(--wrap))) / 2))}
/* on phones there is no spare margin at all: move the pair to the top right */
@media (max-width:600px){
  .hero--slider .hero-inner{padding-inline:0}
  .hero-nav{top:1rem;transform:none;width:38px;height:38px}
  .hero-nav:hover{transform:scale(1.07)}
  .hero-nav--next{right:1rem}
  .hero-nav--prev{left:auto;right:calc(1rem + 46px)}
}
/* A shorter home slider: the headline, text and button keep their size; the
   air around them is tightened. Scoped to the slider so inner-page banners
   are unchanged. */
.hero--slider .hero-inner{padding-top:clamp(4.4rem,9vw,8rem);padding-bottom:clamp(3.6rem,7vw,6rem)}
.hero--slider .badge{margin-bottom:1rem}
.hero--slider .hero-chip{margin-bottom:.7rem}
.hero--slider .lede{margin-top:.8rem}
.hero--slider .hero-cta{margin-top:1.1rem}
.hero--slider .hero-actions{margin-top:1.2rem}
.hero--slider .hero-rule{margin-top:clamp(1.4rem,3vw,2.2rem);padding-top:1rem}
/* the call to action sits inside each slide, right under its text: the
   slide's own button where it has one, otherwise the shared pair */
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem}
@keyframes slideUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* footer logo sits larger, with the wordmark under it */
.foot-brand .brand{align-items:flex-start}
.foot-brand .brand-logo{height:74px}

/* ---------- firm's registration ---------- */
.spec--kv{min-width:0}
/* works register: seven columns, so let it scroll rather than squash, and
   give the category rows the weight of a sub-heading */
.spec--works{min-width:1180px;font-size:.86rem}
.spec--works th,.spec--works td{padding:.6rem .8rem;line-height:1.35;vertical-align:top}
.spec--works td:first-child,.spec--works th:first-child{width:60px}
.spec--works td:last-child,.spec--works th:last-child{width:auto;text-align:left;white-space:nowrap}
.works-cat td{background:var(--paper);font-family:var(--display);font-weight:600;
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-deep)}
/* .spec pins its last column to 70px centred (a count column); the
   classification table's last column is a date, so give it room */
.spec--class{min-width:400px;font-size:.86rem}
.spec--class th,.spec--class td{padding:.5rem .8rem;line-height:1.3}
.spec--class td:first-child,.spec--class th:first-child{width:70px}
.spec--class td:last-child,.spec--class th:last-child{width:auto;text-align:left}
.spec--kv td:first-child{color:var(--txt-mute);font-family:var(--body);font-size:.84rem;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;width:46%;white-space:normal}
.spec--kv td:last-child{text-align:left;width:auto;font-weight:600;color:var(--txt)}

/* document cards */
.doc{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;padding:1.5rem;height:100%;
  background:var(--ink-2);border:1px solid var(--line-dark);transition:.3s var(--ease)}
.doc:hover{border-color:rgba(var(--accent-rgb),.45);transform:translateY(-3px);box-shadow:var(--shadow)}
.doc-ico{width:46px;height:56px;flex:none;display:grid;place-items:center;position:relative;
  border:1px solid rgba(var(--accent-rgb),.4);background:rgba(var(--accent-rgb),.09);color:var(--accent);
  font-family:var(--display);font-size:.8rem;letter-spacing:.1em;
  clip-path:polygon(0 0,72% 0,100% 22%,100% 100%,0 100%)}
.doc-body h3{font-size:1.12rem;color:#fff;margin-bottom:.35rem;line-height:1.2}
.doc-meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.6rem}
.doc-body p{font-size:.88rem;color:var(--txt-inv-mute);margin-bottom:0}
.doc-body .more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;font-size:.75rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.doc-body .more .ar{transition:transform .25s var(--ease)}
.doc:hover .more .ar{transform:translateX(4px)}
@media (max-width:480px){.doc{grid-template-columns:1fr}}



.unit p:last-child{margin-bottom:0}

/* ---------- corporate giving ---------- */
.csr{display:flex;flex-direction:column;height:100%;background:var(--white);
  border:1px solid var(--line-light);transition:.3s var(--ease)}
.csr:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--accent)}
.csr-media{aspect-ratio:16/9;background-size:cover;background-position:center;
  background-image:linear-gradient(150deg,#1d3852,#0b1c2e);filter:grayscale(.15)}
.csr-body{padding:1.5rem;position:relative}
.csr-date{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:.5rem}
.csr-body h3{font-size:1.25rem;text-transform:uppercase;margin-bottom:.5rem}
.csr-body p{font-size:.92rem;color:var(--txt-mute);margin:0}

/* ---------- artisans ---------- */
.artisan-set + .artisan-set{margin-top:2.8rem}
.artisan-set > h3{margin-bottom:1.2rem}
.artisan{position:relative;height:100%;padding:1.7rem 1.5rem;background:var(--paper);
  border:1px solid var(--line-light);transition:.3s var(--ease)}
.tint .artisan{background:var(--white)}
.artisan::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.artisan:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.artisan:hover::before{transform:scaleX(1)}
.artisan h3{font-size:1.35rem;text-transform:uppercase;margin-bottom:1rem}
.artisan dl{margin:0 0 1.2rem;display:grid;gap:.75rem}
.artisan dt{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark);margin-bottom:.15rem}
.artisan dd{margin:0;font-size:.9rem;color:var(--txt)}
.artisan .more{display:inline-flex;align-items:center;gap:.45rem;font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.artisan .more .ar{transition:transform .25s var(--ease)}
.artisan:hover .more .ar{transform:translateX(4px)}
/* ---------- organisation chart ----------
   Management as a small tree, then one colour-coded panel per department: the
   head on top and the team straight down, so reporting reads top to bottom. */
/* the heading stays on the page margin; only the chart itself widens */
.orgt-scroll{
  --chart-w:min(1560px,100vw - 2.5rem);
  width:var(--chart-w);margin-inline:calc((var(--chart-w) - 100%) / -2);
  padding:.4rem 0 .6rem
}
.org2{
  --org-1:#1f7a52;--org-2:#14559e;--org-3:#7b3fa0;--org-4:#b4601a;--org-5:#0f6f74;--org-6:#3d4b8f;
  --l:#b3c2d1;--lw:2px;--drop:26px
}
.org2-top{display:flex;justify-content:center;position:relative}
.org2-top.has-dirs{padding-bottom:var(--drop)}
.org2-top.has-dirs::after{content:"";position:absolute;left:50%;bottom:0;height:var(--drop);border-left:var(--lw) solid var(--l)}

/* initials in a circle stand in for a photograph */
.org2-av{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;
  font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.04em;position:relative;z-index:1;
  background:color-mix(in srgb,var(--c,var(--ink)) 14%,#fff);color:var(--c,var(--ink));
  box-shadow:0 0 0 3px #fff}
.org2-lt{min-width:0}
.org2-role{display:block;font-family:var(--display);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--c,var(--accent));margin-bottom:.12rem;line-height:1.25}
.org2-email{display:block;font-size:.72rem;color:var(--txt-mute);margin-top:.18rem;overflow-wrap:anywhere}
.org2-email:hover{color:var(--accent)}
.org2-meta{display:block;font-size:.72rem;color:var(--txt-mute);line-height:1.35}

/* management cards */
.org2-lead{display:flex;align-items:center;gap:.8rem;text-align:left;background:#fff;border-radius:14px;
  padding:.85rem 1.15rem .85rem .85rem;border:1px solid rgba(10,24,38,.08);max-width:100%;
  box-shadow:0 18px 40px -26px rgba(10,24,38,.45)}
.org2-lead strong{display:block;font-size:1rem;color:var(--txt);line-height:1.2}
.org2-lead--md{background:linear-gradient(135deg,var(--ink),var(--ink-3));border-color:transparent;padding:1rem 1.5rem 1rem 1rem}
.org2-lead--md .org2-av{width:56px;height:56px;font-size:1.15rem;background:var(--accent);color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
.org2-lead--md .org2-role{color:#ff9a9a}
.org2-lead--md strong{color:#fff;font-size:1.25rem}
.org2-lead--md .org2-email{color:var(--txt-inv-mute)}
.org2-lead--dir{border-top:3px solid var(--ink)}
.org2-lead--dir .org2-av{width:46px;height:46px;font-size:1rem;background:var(--ink);color:#fff}
.org2-lead--dir .org2-role{color:var(--ink-3)}

/* directors over their departments; every column draws its own half of the
   joining line, so the lines meet the cards whatever the column widths */
.org2-groups{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));align-items:start}
.org2-group{grid-column:span var(--span);position:relative;padding-top:var(--drop)}
.org2-depts{display:grid;grid-template-columns:repeat(var(--span),minmax(0,1fr));align-items:start}
.org2-dept{grid-column:span var(--w);position:relative;padding:var(--drop) .45rem 0}
.org2-group::before,.org2-group::after,.org2-dept::before,.org2-dept::after{
  content:"";position:absolute;top:0;right:50%;width:50%;height:var(--drop);border-top:var(--lw) solid var(--l)}
.org2-group::after,.org2-dept::after{right:auto;left:50%;margin-left:calc(var(--lw) / -2);border-left:var(--lw) solid var(--l)}
.org2-group:first-child::before,.org2-dept:first-child::before,
.org2-group:last-child::after,.org2-dept:last-child::after{border-top:0 none}
.org2-group:last-child::before,.org2-dept:last-child::before{border-right:var(--lw) solid var(--l)}
.org2-group:only-child::before,.org2-dept:only-child::before{border:0 none}
.org2-dircard{display:flex;justify-content:center;position:relative;padding-inline:.45rem}
.org2-dircard.has-depts{padding-bottom:var(--drop)}
.org2-dircard.has-depts::after{content:"";position:absolute;left:50%;bottom:0;height:var(--drop);border-left:var(--lw) solid var(--l)}

/* department panels */
.org2-panel{background:#fff;border-radius:14px;border:1px solid rgba(10,24,38,.08);border-top:4px solid var(--c);
  box-shadow:0 18px 40px -30px rgba(10,24,38,.5);overflow:hidden;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.org2-panel:hover{box-shadow:0 26px 50px -30px rgba(10,24,38,.55);transform:translateY(-2px)}
.org2-dh{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;padding:.65rem .95rem;
  background:color-mix(in srgb,var(--c) 9%,#fff);border-bottom:1px solid color-mix(in srgb,var(--c) 18%,#fff)}
.org2-dh span{font-family:var(--display);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;color:var(--c)}
.org2-dh small{font-size:.7rem;color:var(--txt-mute);white-space:nowrap}
.org2-head{display:flex;align-items:center;gap:.7rem;padding:.85rem .95rem;border-bottom:1px dashed color-mix(in srgb,var(--c) 28%,#fff)}
.org2-head .org2-av{width:42px;height:42px;font-size:.92rem;background:var(--c);color:#fff}
.org2-head strong{display:block;font-size:.95rem;color:var(--txt);line-height:1.2}
.org2-body{padding:.35rem .95rem .85rem}

/* a team: one line through the initials carries the chain downwards */
.org2-team{list-style:none;margin:0;padding:0;position:relative}
.org2-team::before{content:"";position:absolute;left:16px;top:22px;bottom:22px;border-left:2px solid color-mix(in srgb,var(--c) 32%,#fff)}
.org2-p{display:flex;align-items:center;gap:.65rem;padding:.4rem 0}
.org2-pt{flex:1;min-width:0;line-height:1.25}
.org2-pt em{display:block;font-style:normal;font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--c)}
.org2-pt b{display:block;font-size:.86rem;font-weight:600;color:var(--txt)}
.org2-mail{flex:none;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;
  color:var(--txt-mute);font-size:.72rem;transition:.2s var(--ease)}
.org2-mail:hover{background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--c)}

/* two teams under one person sit side by side */
.org2-split{display:grid;grid-template-columns:repeat(var(--k),minmax(0,1fr));gap:.8rem;margin-top:.35rem}
.org2-sub{background:color-mix(in srgb,var(--c) 5%,#fff);border-radius:10px;padding:.5rem .65rem .55rem}
.org2-sub .org2-av{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 5%,#fff)}
.org2-sublabel{margin:0 0 .1rem;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute);text-align:left}

/* narrower screens: the tree lines drop away and the panels stack */
@media (max-width:1100px){
  .org2-groups{display:block}
  .org2-group,.org2-dept{padding:0}
  .org2-group::before,.org2-group::after,.org2-dept::before,.org2-dept::after,
  .org2-top.has-dirs::after,.org2-dircard.has-depts::after{content:none}
  .org2-top.has-dirs{padding-bottom:0}
  .org2-group{margin-top:2rem}
  .org2-dircard{justify-content:flex-start;padding:0 0 1rem}
  .org2-dircard.has-depts{padding-bottom:1rem}
  .org2-depts{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
  .org2-dept{grid-column:auto}
  .org2-dept:has(.org2-split){grid-column:1 / -1}
}
@media (max-width:560px){
  .org2-split{grid-template-columns:1fr}
  .org2-lead{width:100%}
}

/* ---------- justified body copy (site-wide) ---------- */
p,.lede,.card p,.work-body p,.doc-body p,.csr-body p,.info p,.unit p{
  text-align:justify;
  hyphens:auto;-webkit-hyphens:auto;
  text-wrap:pretty
}
/* short, labelled or centred lines stay flush - justification would only add gaps */
.crumbs,.doc-body .doc-meta,.csr-date,.unit .place,.form-note,.form-status,
.foot-bot,.topbar,.stat > span,.cert span,.orgt p,.onode p,
.eyebrow,.badge,.hero-rule li{text-align:left;hyphens:manual}
.orgt,.onode,.org-col-label{text-align:center}

/* ---------- client logo marquee ---------- */
.marquee{
  position:relative;overflow:hidden;padding:0;
  border-block:1px solid var(--line-light);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)
}
.dark .marquee{border-color:var(--line-dark)}
.marquee-track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-row{display:flex;align-items:center;flex:none}
.marquee-row li{
  flex:none;display:grid;place-items:center;width:178px;height:82px;padding:.7rem 1.2rem;
  border-right:1px solid var(--line-light)
}
.dark .marquee-row li{border-color:var(--line-dark)}
.marquee-row img{
  max-width:100%;max-height:46px;width:auto;height:auto;object-fit:contain;
  opacity:1;transition:transform .3s var(--ease)
}
.marquee-row li:hover img{transform:scale(1.07)}
/* on dark bands, give logos a light plate so their own colours still read */
.dark .marquee-row li{background:#fff;border-radius:2px}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}
@media (max-width:600px){.marquee-row li{width:142px;height:74px;padding:.6rem .9rem}
  .marquee-row img{max-height:40px}}

/* ---------- services ---------- */
.svc{background:var(--white);border:1px solid var(--line-light);padding:clamp(1.4rem,2.4vw,1.9rem);
  height:100%;display:flex;flex-direction:column;position:relative;transition:.3s var(--ease)}
.svc::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc:hover::before{transform:scaleX(1)}
.svc-head{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}
.svc-head .icon{margin:0}
.svc-head h3{font-size:1.45rem;text-transform:uppercase;line-height:1.1}
.svc > p{font-size:.94rem;color:var(--txt-mute);margin-bottom:1.2rem}
.svc .ticks{margin-bottom:1.2rem}
.svc .ticks li{font-size:.86rem;padding:.7rem .9rem}
.svc .more{display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;font-size:.76rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.svc .more .ar{transition:transform .25s var(--ease)}
.svc:hover .more .ar{transform:translateX(4px)}

/* ---------- licensed software ---------- */
.sw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1rem}
.sw{
  position:relative;padding:1.4rem 1.4rem 1.3rem;background:var(--white);
  border:1px solid var(--line-light);border-left:3px solid var(--accent);transition:.28s var(--ease)
}
.sw:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.sw-badge{
  display:inline-flex;align-items:center;gap:.4rem;margin-bottom:.7rem;padding:.28rem .6rem;
  background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.32);color:var(--accent);
  font-size:.58rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase
}
.sw-badge::before{content:"";width:11px;height:11px;background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 62%,50% 100%,0 62%,0 25%)}
.sw b{display:block;font-family:var(--display);font-size:1.5rem;font-weight:600;letter-spacing:.02em;
  color:var(--txt);line-height:1.1}
.sw-use{display:block;margin-top:.4rem;font-size:.88rem;color:var(--txt-mute);text-align:left;hyphens:manual}

/* compact home strip */
.sw-strip{background:var(--paper);border-block:1px solid rgba(10,24,38,.09)}
.sw-strip .wrap{display:grid;grid-template-columns:minmax(220px,.8fr) 2fr;gap:clamp(1.2rem,3vw,2.5rem);
  align-items:center}
.sw-strip-label .eyebrow{margin-bottom:.5rem}
/* the eyebrow is also a <p> here, so exclude it or it loses its accent colour */
.sw-strip-label p:not(.eyebrow){font-size:.9rem;color:var(--txt-mute);margin:0;text-align:left;hyphens:manual}
.sw-grid--strip{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:560px){.sw-grid--strip{grid-template-columns:1fr}}
.sw-grid--strip .sw{padding:1rem 1.1rem;border-left-width:3px}
.sw-grid--strip .sw-badge{margin-bottom:.5rem}
.sw-grid--strip .sw b{font-size:1.24rem}
.sw-grid--strip .sw-use{font-size:.82rem}
@media (max-width:820px){.sw-strip .wrap{grid-template-columns:1fr}}
/* authorized technicians: a second row of the software strip, each with the certificate that backs them */
.sw-strip-label--tech{padding-top:.4rem}
.tech-grid{list-style:none;margin:0;padding:.4rem 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
@media (max-width:560px){.tech-grid{grid-template-columns:1fr}}
.tech-card{display:flex;gap:1rem;align-items:center;background:#fff;border:1px solid var(--line-light);border-left:3px solid var(--accent);padding:.9rem 1rem;margin-top:.6rem}
.tech-cert{flex:none;display:block;width:74px;border:1px solid var(--line-light);box-shadow:0 8px 18px -12px rgba(10,24,38,.5);background:#fff;transition:transform .25s var(--ease)}
.tech-cert img{display:block;width:100%;height:auto}
.tech-cert:hover{transform:translateY(-2px) rotate(-1deg)}
.tech-body{min-width:0}
.tech-body b{display:block;font-family:var(--display);font-size:1.24rem;letter-spacing:.01em;color:var(--txt);line-height:1.15}
.tech-body .tech-q{display:block;font-size:.82rem;color:var(--txt-mute);margin-top:.2rem}
.tech-body .tech-c{display:block;font-size:.76rem;color:var(--txt-mute);margin-top:.35rem}
.tech-view{display:inline-flex;align-items:center;gap:.4rem;margin-top:.45rem;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.tech-view .ar{transition:transform .25s var(--ease)}
.tech-view:hover .ar{transform:translateX(3px)}
@media (max-width:820px){.sw-strip-label--tech,.tech-grid{padding-top:0}}

/* ---------- RDSO dedicated unit ---------- */
.unit--rdso{
  border-color:rgba(var(--accent-rgb),.5);
  box-shadow:inset 4px 0 0 var(--accent);
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.05),transparent 60%),var(--white)
}
.unit--rdso:hover{box-shadow:inset 4px 0 0 var(--accent),var(--shadow)}
.unit--rdso .n{color:var(--accent)}
.rdso-tag{
  display:inline-flex;align-items:center;gap:.45rem;margin-bottom:.6rem;padding:.32rem .7rem;
  background:var(--accent);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)
}
.rdso-tag::before{content:"";width:10px;height:10px;background:#fff;
  clip-path:polygon(50% 0,100% 25%,100% 62%,50% 100%,0 62%,0 25%)}

/* ---------- RDSO band ---------- */
.rdso-band{
  position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(105deg,#0a1826 0%,#12293f 58%,#17334c 100%);
  border-block:1px solid rgba(255,255,255,.09)
}
.rdso-band::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(560px 260px at 12% 50%,rgba(var(--accent-rgb),.22),transparent 70%),
    radial-gradient(520px 280px at 88% 50%,rgba(var(--blue-rgb),.3),transparent 72%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 64px)
}
.rdso-band::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.rdso-band .wrap{
  position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(1.4rem,3.2vw,2.8rem);padding:clamp(1.9rem,3.6vw,2.8rem) 0
}
.rdso-mark{
  width:104px;height:118px;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--accent),var(--accent-deep));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
}
.rdso-mark span{font-family:var(--display);font-size:1.5rem;font-weight:700;letter-spacing:.1em;color:#fff}
.rdso-body h2{line-height:1.08;margin-bottom:.6rem}
.rdso-body > p{font-size:.95rem;color:#b3c1d1;margin:0;max-width:62ch;text-align:left;hyphens:manual}
.rdso-points{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;margin-top:1rem}
.rdso-points li{display:flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:#95a6ba}
.rdso-points li::before{content:"";width:7px;height:7px;background:var(--accent);transform:rotate(45deg);flex:none}
.rdso-cta{display:flex;flex-direction:column;gap:.6rem;flex:none}
/* the first two buttons sit side by side, the document button below them */
.rdso-cta-row{display:flex;flex-wrap:wrap;gap:.6rem}
.rdso-cta-row .btn{flex:1 1 auto}
.rdso-doc{justify-content:center;text-align:center}
.rdso-cta .btn{justify-content:center}
.rdso-cta .btn--ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.rdso-cta .btn--ghost:hover{background:rgba(255,255,255,.07);border-color:#fff}
@media (max-width:980px){
  .rdso-band .wrap{grid-template-columns:auto 1fr;row-gap:1.4rem}
  .rdso-cta{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
}
@media (max-width:560px){
  .rdso-band .wrap{grid-template-columns:1fr}
  .rdso-mark{width:84px;height:96px}
}

/* ---------- RDSO in the menu ---------- */
.nav-chip{
  display:inline-flex;align-items:center;margin-left:.45rem;padding:.15rem .38rem;
  border:1px solid rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.14);color:var(--accent);
  font-style:normal;font-size:.56rem;font-weight:700;letter-spacing:.12em;line-height:1.4;
  transition:.22s var(--ease)
}
.menu > li > a:hover .nav-chip,.menu > li.is-active > a .nav-chip{
  background:var(--accent);border-color:var(--accent);color:#fff
}
/* the RDSO row inside the Facilities panel */
.mega-list li.is-rdso > a{background:rgba(var(--accent-rgb),.07);border-left-color:var(--accent)}
.mega-list li.is-rdso b{color:var(--accent-deep)}
.mega-list li.is-rdso em{
  color:var(--accent);font-weight:700;padding:.15rem .4rem;
  border:1px solid rgba(var(--accent-rgb),.45);background:rgba(var(--accent-rgb),.12)
}
.mega-list li.is-rdso .rw{opacity:1;transform:none}
.mega-list li.is-rdso > a:hover{background:rgba(var(--accent-rgb),.13)}
@media (max-width:1160px){
  .nav-chip{font-size:.58rem;padding:.16rem .42rem}
}

/* ---------- leadership credential card ---------- */
/* the credential card matches the height of the bio column beside it, and the
   board spans the full width below both */
#leadership .split{align-items:stretch}
#leadership .split-media,#leadership .lead-panel{height:100%}
#leadership .board{margin-top:clamp(2.4rem,5vw,3.4rem)}
.lead-panel{
  position:relative;display:grid;grid-template-columns:206px 1fr;align-items:stretch;
  border:1px solid var(--line-light);background:var(--white);box-shadow:var(--shadow);overflow:hidden
}
.lead-panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);z-index:3}
.lead-photo{margin:0;position:relative;overflow:hidden;background:#0d2035}
.lead-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 15%;
  display:block;transition:transform .6s var(--ease)}
.lead-panel:hover .lead-photo img{transform:scale(1.04)}
.lead-content{position:relative;padding:clamp(1.5rem,2.8vw,2.1rem);display:flex;flex-direction:column;
  justify-content:center;overflow:hidden;min-height:300px}
.lead-initials{position:absolute;right:-.5rem;top:-1.4rem;font-family:var(--display);font-size:7.5rem;
  line-height:1;color:rgba(10,24,38,.055);letter-spacing:-.04em;pointer-events:none}
.lead-panel blockquote{position:relative;margin:0 0 1.5rem;font-family:var(--display);
  font-size:clamp(1.25rem,2vw,1.65rem);line-height:1.22;color:var(--txt)}
.lead-facts{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:0}
.lead-facts dt{font-size:.66rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin-bottom:.22rem}
.lead-facts dd{margin:0;font-size:.92rem;color:var(--txt-mute)}
@media (max-width:760px){
  .lead-panel{grid-template-columns:1fr}
  .lead-photo{aspect-ratio:16/10}
}
@media (max-width:420px){.lead-facts{grid-template-columns:1fr}}

/* ---------- board of directors row ---------- */
.board{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--line-light)}
.board-label{display:block;font-size:.62rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:1.2rem}
.board ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.4rem}
@media (max-width:600px){.board ul{grid-template-columns:repeat(3,1fr);gap:.9rem}}
@media (max-width:400px){.board ul{grid-template-columns:1fr}}
.board li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.7rem}
.board img{
  width:104px;height:104px;flex:none;object-fit:cover;object-position:50% 10%;
  background:var(--white);border:3px solid var(--white);border-radius:50%;
  box-shadow:0 0 0 1px var(--line-light),0 10px 22px -14px rgba(10,24,38,.6);
  transition:.28s var(--ease)
}
.board li:hover img{box-shadow:0 0 0 2px var(--accent),0 14px 26px -14px rgba(10,24,38,.6);
  transform:translateY(-3px)}
.board b{display:block;font-family:var(--display);font-size:1.06rem;font-weight:600;letter-spacing:.02em;
  color:var(--txt);line-height:1.2}
.board em{display:block;font-style:normal;font-size:.63rem;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;color:var(--steel-dark);margin-top:.25rem}
.board-mail{display:inline-block;margin-top:.35rem;font-size:.72rem;color:var(--accent);word-break:break-all}
.board-mail:hover{text-decoration:underline}
.board-bio{margin:.5rem 0 0;font-size:.8rem;line-height:1.6;color:var(--txt-mute);text-align:center;hyphens:manual}
@media (max-width:600px){.board-bio{font-size:.78rem}}
@media (max-width:600px){.board img{width:78px;height:78px}.board b{font-size:.92rem}}

/* ---------- growth journey ---------- */
/* growth chart: pin markers stepping up a staggered track */
.gko{
  list-style:none;margin:0 0 clamp(2.4rem,4vw,3.4rem);padding:.5rem 0 0;
  display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(.7rem,1.6vw,1.5rem);
  align-items:stretch
}
.gko > li{
  position:relative;display:flex;flex-direction:column;
  padding-top:calc((var(--n,4) - var(--i,0)) * 52px);
  padding-bottom:calc(var(--i,0) * 32px)
}

/* the pin: a ringed circle with a pointed tail */
.gko-pin{
  position:relative;width:98px;height:98px;flex:none;margin:0 0 2rem;
  display:grid;place-items:center;border-radius:50%;
  background:var(--white);border:3px solid var(--c);
  box-shadow:0 16px 30px -20px rgba(10,24,38,.6);
  transition:.3s var(--ease)
}
.gko-pin::after{
  /* sits flush on the outer edge of the ring, never over it:
     top:100% is the padding box, + the 3px border reaches the circle's edge */
  content:"";position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);
  width:0;height:0;border:10px solid transparent;border-bottom:0;border-top-color:var(--c)
}
.gko-pin span{
  font-family:var(--display);font-size:1.55rem;line-height:1;letter-spacing:.02em;color:var(--c)
}
.gko > li.is-now .gko-pin{background:var(--c)}
.gko > li.is-now .gko-pin span{color:#fff}
.gko > li:hover .gko-pin{transform:translateY(-4px);box-shadow:0 20px 34px -18px rgba(10,24,38,.7)}

/* copy under the pin */
.gko-body b{display:block;font-family:var(--display);font-size:1.22rem;line-height:1.2;color:var(--c)}
.gko-body em{
  display:block;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--txt);margin:.55rem 0 .7rem
}
.gko-body ol{list-style:none;margin:0;padding:0;counter-reset:gko}
.gko-body ol li{
  counter-increment:gko;position:relative;padding-left:1.2rem;margin-bottom:.35rem;
  font-size:.755rem;line-height:1.6;color:var(--txt-mute);text-align:left;hyphens:manual
}
.gko-body ol li::before{content:counter(gko) ".";position:absolute;left:0;color:var(--c);font-weight:700}

/* the stem down to its marker on the track */
.gko-stem{
  flex:1;min-height:52px;width:2px;margin:1.2rem 0 0 48px;position:relative;
  background:linear-gradient(180deg,var(--c),rgba(10,24,38,.06))
}
.gko-stem::after{
  content:"";position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
  width:26px;height:11px;border-radius:50%;background:var(--c);
  box-shadow:0 0 0 5px rgba(var(--c-rgb),.16)
}

@media (max-width:1100px){
  .gko{grid-template-columns:repeat(3,1fr);row-gap:2.4rem}
  .gko > li{padding-top:0;padding-bottom:0}
  .gko-stem{display:none}
  .gko-pin{width:84px;height:84px;margin-bottom:1.5rem}
  .gko-pin span{font-size:1.3rem}
}
@media (max-width:640px){
  .gko{grid-template-columns:1fr;row-gap:1.8rem}
  .gko > li{flex-direction:row;gap:1.1rem;align-items:flex-start}
  .gko-pin{width:72px;height:72px;margin:0}
  .gko-pin::after{display:none}
  .gko-pin span{font-size:1.15rem}
}

/* detailed steps down a rail */
.jsteps{list-style:none;margin:0;padding:0;position:relative}
.jstep{display:grid;grid-template-columns:auto 1fr;gap:clamp(1rem,2.5vw,1.8rem);padding-bottom:1.4rem}
.jstep:last-child{padding-bottom:0}
.jstep-rail{position:relative;width:2px;background:var(--line-light);justify-self:center}
.jstep:first-child .jstep-rail{margin-top:1.6rem}
.jstep:last-child .jstep-rail{background:linear-gradient(var(--line-light),transparent)}
.jstep-dot{
  position:absolute;left:50%;top:1.5rem;transform:translate(-50%,-50%);
  width:15px;height:15px;background:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)
}
.jstep-card{
  background:var(--white);border:1px solid var(--line-light);border-left:3px solid var(--accent);
  padding:clamp(1.2rem,2.4vw,1.7rem);transition:.28s var(--ease)
}
.jstep-card:hover{transform:translateX(3px);box-shadow:var(--shadow)}
.jstep-head{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;margin-bottom:.5rem}
.jstep-year{font-family:var(--display);font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;color:var(--accent)}
.jstep-stage{
  padding:.28rem .7rem;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent);font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase
}
.jstep-card h3{font-size:clamp(1.15rem,2vw,1.4rem);text-transform:uppercase;margin-bottom:.5rem}
.jstep-card > p{font-size:.94rem;color:var(--txt-mute);margin-bottom:1rem;max-width:78ch}
.jstep-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.35rem .9rem;margin:0}
.jstep-list li{display:flex;gap:.6rem;align-items:flex-start;font-size:.88rem;color:var(--txt);
  text-align:left;hyphens:manual}
.jstep-list li::before{content:"";width:6px;height:6px;flex:none;margin-top:.5rem;background:var(--accent);
  transform:rotate(45deg)}
.jstep-note{display:inline-flex;align-items:center;gap:.5rem;margin-top:1rem;padding-top:.8rem;
  border-top:1px dashed var(--line-light);width:100%;
  font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--steel-dark)}
.jstep-note::before{content:"";width:16px;height:2px;background:var(--accent)}

/* closing panel */
.jtoday{
  position:relative;margin-top:clamp(1.6rem,3vw,2.2rem);padding:clamp(1.5rem,3vw,2.2rem);
  background:var(--ink);color:var(--txt-inv-mute);border-left:3px solid var(--accent);overflow:hidden
}
.jtoday::before{content:"";position:absolute;right:-80px;top:-80px;width:300px;height:300px;
  background:radial-gradient(circle,rgba(var(--accent-rgb),.22),transparent 65%)}
.jtoday-tag{position:relative;display:inline-flex;margin-bottom:.7rem;padding:.3rem .75rem;
  background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.jtoday h3{position:relative;color:#fff;margin-bottom:.7rem}
.jtoday p{position:relative;margin:0;font-size:.95rem;max-width:88ch}
@media (max-width:560px){
  .jstep{grid-template-columns:1fr}
  .jstep-rail{display:none}
}

/* ---------- 3rd generation highlight ---------- */
.gko-gen{
  display:inline-block;margin-top:.5rem;padding:.22rem .5rem;
  background:var(--ink);color:#fff;white-space:nowrap;
  font-size:.55rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)
}
.jstep--gen .jstep-dot{background:var(--ink);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.35)}
.jstep--gen .jstep-card{
  border-left-width:4px;
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.09),rgba(var(--accent-rgb),.02) 60%),var(--white)
}
.jstep--gen .jstep-stage{background:var(--accent);border-color:var(--accent);color:#fff}
.jstep--gen .jstep-note{color:var(--accent)}

/* ---------- generation ribbon ---------- */
.jgen{
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
  margin:0 0 .8rem;padding:.55rem .75rem;
  background:rgba(var(--accent-rgb),.07);border-left:2px solid var(--accent);
  font-size:.9rem;text-align:left;hyphens:manual
}
.jgen-chip{
  padding:.24rem .6rem;background:var(--accent);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap;
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)
}
.jgen b{font-family:var(--display);font-size:1.08rem;font-weight:600;color:var(--txt);letter-spacing:.02em}
.jgen em{font-style:normal;color:var(--txt-mute);font-size:.88rem}
.jstep--next .jstep-card{
  background:linear-gradient(120deg,rgba(var(--accent-rgb),.13),rgba(var(--accent-rgb),.03) 60%),var(--white)
}

/* ---------- tabbed capability panel ---------- */
.tabs{--tl:var(--line-light)}
.dark .tabs{--tl:var(--line-dark)}
.tablist{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--tl)}
@media (max-width:720px){.tablist{grid-template-columns:1fr}}
.tab{
  display:block;width:100%;text-align:left;padding:1.1rem 1.3rem;background:transparent;
  border:0;border-right:1px solid var(--tl);cursor:pointer;position:relative;
  transition:background .25s var(--ease)
}
.tab:last-child{border-right:0}
@media (max-width:720px){.tab{border-right:0;border-bottom:1px solid var(--tl)}}
.tab::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:3px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.tab:hover{background:rgba(var(--accent-rgb),.06)}
.tab[aria-selected="true"]{background:rgba(var(--accent-rgb),.08)}
.tab[aria-selected="true"]::after{transform:scaleX(1)}
.tab-name{display:block;font-family:var(--display);font-size:1.22rem;text-transform:uppercase;
  letter-spacing:.03em;color:var(--txt)}
.dark .tab-name{color:#fff}
.tab[aria-selected="true"] .tab-name{color:var(--accent)}
.tab-meta{display:flex;align-items:center;gap:.5rem;margin-top:.3rem;font-size:.66rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dark)}
.tab-meta i{font-style:normal;padding:.1rem .4rem;border:1px solid var(--tl);color:var(--accent)}

.tabpanels{border:1px solid var(--tl);border-top:0;padding:clamp(1.2rem,2.6vw,1.9rem)}
.taglist{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:0 clamp(1.5rem,3vw,3rem)}
.taglist li{
  position:relative;display:flex;align-items:baseline;gap:.85rem;
  padding:.85rem .3rem;border-bottom:1px solid var(--tl);
  font-size:.95rem;color:var(--txt);text-align:left;hyphens:manual;
  transition:padding-left .28s var(--ease)
}
.dark .taglist li{color:#c6d2de}
.taglist li::before{
  content:"";position:absolute;left:0;bottom:-1px;width:100%;height:1px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)
}
.taglist li:hover{padding-left:.9rem}
.taglist li:hover::before{transform:scaleX(1)}
.taglist i{
  font-family:var(--display);font-style:normal;font-size:.78rem;letter-spacing:.1em;
  color:var(--accent);opacity:.7;min-width:1.7em;flex:none;transition:opacity .25s var(--ease)
}
.taglist li:hover i{opacity:1}
.taglist span{transition:color .25s var(--ease)}
.dark .taglist li:hover span{color:#fff}
.taglist li:hover span{color:var(--txt)}
.dark .taglist li:hover span{color:#fff}

.tabpanel[hidden]{display:none}
.tabpanel{animation:tabIn .35s var(--ease) both}
@keyframes tabIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- service photo strip ---------- */
.svc-shots{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:0 0 1.3rem}
.svc-shot{
  position:relative;padding:0;border:1px solid var(--line-light);background:#0d2035;
  cursor:pointer;overflow:hidden;aspect-ratio:1;display:block;transition:.28s var(--ease)
}
.svc-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .45s var(--ease),opacity .3s var(--ease)}
.svc-shot:hover{border-color:var(--accent);transform:translateY(-2px)}
.svc-shot:hover img{transform:scale(1.08)}
.svc-more{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(10,24,38,.72);color:#fff;font-family:var(--display);font-size:1.35rem;
  letter-spacing:.04em;transition:background .28s var(--ease)
}
.svc-shot:hover .svc-more{background:rgba(var(--accent-rgb),.82)}

/* ---------- lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:clamp(.8rem,3vw,2rem)}
.lightbox[hidden]{display:none}
.lb-backdrop{position:absolute;inset:0;background:rgba(6,9,13,.93);backdrop-filter:blur(4px);
  animation:lbFade .25s var(--ease)}
.lb-inner{position:relative;width:min(1120px,100%);max-width:100%;min-width:0;max-height:100%;
  display:flex;flex-direction:column;gap:.7rem;animation:lbRise .3s var(--ease)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.lb-bar{display:flex;align-items:center;gap:1rem;color:#fff;min-width:0}
.lb-title{font-family:var(--display);font-size:1.15rem;letter-spacing:.04em;text-transform:uppercase;
  flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-count{font-size:.8rem;letter-spacing:.16em;color:var(--accent)}
.lb-close{width:38px;height:38px;flex:none;background:transparent;border:1px solid rgba(255,255,255,.25);
  color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;transition:.24s var(--ease)}
.lb-close:hover{background:var(--accent);border-color:var(--accent)}
.lb-stage{position:relative;margin:0;background:transparent;border:0;
  display:grid;place-items:center;min-height:0;min-width:0;width:100%;overflow:hidden}
/* the photo takes whatever height the bar and thumbnail strip leave */
.lb-img{max-width:100%;max-height:calc(100vh - 11rem);max-height:calc(100dvh - 11rem);width:auto;height:auto;display:block}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:60px;
  background:rgba(10,24,38,.6);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:1.9rem;
  line-height:1;cursor:pointer;transition:.24s var(--ease)}
.lb-nav:hover{background:var(--accent);border-color:var(--accent)}
.lb-prev{left:.6rem}
.lb-next{right:.6rem}
.lb-strip{display:flex;gap:.45rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.2rem;
  min-width:0;width:100%;max-width:100%;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.3) transparent}
.lb-strip button{flex:none;width:82px;height:58px;padding:0;border:1px solid rgba(255,255,255,.18);
  background:transparent;cursor:pointer;opacity:.55;transition:.24s var(--ease)}
.lb-strip button img{width:100%;height:100%;object-fit:cover;display:block}
.lb-strip button:hover{opacity:.85}
.lb-strip button[aria-current="true"]{opacity:1;border-color:var(--accent)}
body.lb-open{overflow:hidden}
@media (max-width:600px){
  .svc-shots{grid-template-columns:repeat(4,1fr);gap:.35rem}
  .lb-nav{width:36px;height:48px;font-size:1.5rem}
  .lb-strip button{width:64px;height:46px}
}

/* ---------- gallery page ---------- */
.svc-gallink{display:inline-flex;align-items:center;gap:.5rem;margin:-.4rem 0 1.2rem;
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.svc-gallink .ar{transition:transform .25s var(--ease)}
.svc-gallink:hover .ar{transform:translateX(4px)}
a.svc-shot{display:block}

.gtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
@media (max-width:900px){.gtiles{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.gtiles{grid-template-columns:repeat(2,1fr)}}
.gtile{
  position:relative;padding:0;border:1px solid var(--line-light);background:#0d2035;
  aspect-ratio:4/3;overflow:hidden;cursor:pointer;transition:.3s var(--ease)
}
.gtile img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.gtile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.gtile:hover img{transform:scale(1.07)}
.gtile-zoom{
  position:absolute;right:.55rem;bottom:.55rem;width:30px;height:30px;display:grid;place-items:center;
  background:rgba(10,24,38,.65);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-family:var(--display);font-size:1.15rem;line-height:1;
  opacity:0;transform:translateY(6px);transition:.28s var(--ease)
}
.gtile:hover .gtile-zoom{opacity:1;transform:none;background:var(--accent);border-color:var(--accent)}

/* ---------- site video ---------- */
.site-video{margin:clamp(1.4rem,3vw,2rem) 0 0;position:relative;border:1px solid var(--line-light);
  background:#0a1826}
.site-video video{width:100%;max-height:min(66vh,620px);display:block;background:#0a1826}
.site-video figcaption{padding:.75rem 1rem;font-size:.74rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--steel-dark);background:var(--white);
  border-top:1px solid var(--line-light)}

/* ---------- gallery categories ---------- */
.cat-nav{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(1.6rem,3vw,2.4rem)}
.cat-nav a{
  display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1rem;
  border:1px solid var(--line-light);background:var(--white);
  font-size:.76rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--txt-mute);
  transition:.25s var(--ease)
}
.cat-nav a i{font-style:normal;font-family:var(--display);color:var(--accent);font-size:.9rem}
.cat-nav a:hover{border-color:var(--accent);color:var(--txt);transform:translateY(-2px)}

.cat{scroll-margin-top:120px}
.cat + .cat{margin-top:clamp(2.4rem,5vw,3.6rem)}
.cat-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.1rem;
  padding-bottom:1rem;margin-bottom:1.2rem;border-bottom:2px solid var(--line-light)}
.cat-head h3{font-size:clamp(1.3rem,2.4vw,1.8rem);text-transform:uppercase;line-height:1.1}
.cat-head p{margin:.35rem 0 0;font-size:.92rem;color:var(--txt-mute);text-align:left;hyphens:manual}
.cat-num{
  display:grid;place-items:center;width:46px;height:46px;flex:none;
  background:var(--accent);color:#fff;font-family:var(--display);font-size:1.3rem;
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%)
}
.cat-count{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel-dark);white-space:nowrap}
.cat--sub{margin-top:clamp(1.8rem,3.5vw,2.6rem);padding-left:clamp(0rem,2vw,1.6rem);
  border-left:2px solid rgba(var(--accent-rgb),.28)}
.cat-head--sub{border-bottom-width:1px}
.cat-head--sub h3{font-size:clamp(1.1rem,1.9vw,1.35rem)}
.cat-head--sub .cat-num{width:34px;height:34px;font-size:1rem;background:var(--ink)}
@media (max-width:640px){
  .cat-head{grid-template-columns:auto 1fr}
  .cat-count{grid-column:1 / -1;padding-left:57px}
}

/* ---------- before / after groups ---------- */
.cat-num--before{background:var(--steel-dark)}
.cat-num--after{background:var(--accent)}
.cat--before{border-left-color:rgba(92,107,124,.45)}
.cat--after{border-left-color:rgba(var(--accent-rgb),.45)}
/* a worded badge has to size to its text; `.cat-head--sub .cat-num` is more
   specific than a lone class, so it was squashing "Before" to a 34px box */
.cat-num--before,.cat-num--after,
.cat-head--sub .cat-num--before,.cat-head--sub .cat-num--after{
  font-family:var(--body);font-size:.58rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  width:auto;height:auto;min-width:0;padding:.42rem .75rem;white-space:nowrap;
  clip-path:polygon(5px 0,100% 0,calc(100% - 5px) 100%,0 100%)
}
.cat-head--sub .cat-num--before{background:var(--steel-dark)}
.cat-head--sub .cat-num--after{background:var(--accent)}

/* ---------- documents on record ---------- */
.docs-set + .docs-set{margin-top:clamp(2rem,3.6vw,3rem)}
/* `.dark h3` is more specific than a lone class, so the colour is set on both
   or the heading comes out white on the dark band */
.docs-head,.dark .docs-head{
  display:flex;align-items:center;gap:.9rem;margin:0 0 .2rem;
  font-family:var(--display);font-size:.86rem;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--accent-lift)
}
.docs-head::after{content:"";flex:1;height:1px;background:var(--line-dark)}
.docs-head span{
  order:3;min-width:22px;height:22px;display:grid;place-items:center;padding:0 .4rem;
  border-radius:999px;background:rgba(255,255,255,.08);
  font-family:var(--body);font-size:.68rem;letter-spacing:.06em;color:var(--txt-inv-mute)
}
.docs{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-dark)}
.docs li{border-bottom:1px solid var(--line-dark)}
.docs a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem;
  padding:1.05rem .9rem;color:inherit;text-decoration:none;
  transition:background .25s var(--ease),padding-left .25s var(--ease)
}
.docs a:hover,.docs a:focus-visible{background:rgba(255,255,255,.045);padding-left:1.4rem}
.docs-n{
  font-family:var(--display);font-size:.82rem;letter-spacing:.08em;color:var(--steel);
  min-width:2ch;transition:color .25s var(--ease)
}
.docs a:hover .docs-n{color:var(--accent-lift)}
.docs-main{min-width:0}
.docs-main b{display:block;font-family:var(--display);font-size:1.02rem;font-weight:600;
  letter-spacing:.01em;color:#fff;line-height:1.3}
.docs-main span{display:block;margin-top:.2rem;font-size:.82rem;line-height:1.5;
  color:var(--txt-inv-mute)}
.docs-go{
  display:inline-flex;align-items:center;gap:.55rem;white-space:nowrap;
  font-size:.7rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--steel);transition:color .25s var(--ease)
}
.docs-go .fa-file-pdf{font-size:1rem}
.docs-go .fa-arrow-up-right-from-square{font-size:.72rem;transition:transform .25s var(--ease)}
.docs a:hover .docs-go{color:var(--accent-lift)}
.docs a:hover .fa-arrow-up-right-from-square{transform:translate(2px,-2px)}
@media (max-width:640px){
  .docs a{grid-template-columns:auto 1fr;gap:.9rem;padding:.95rem .3rem}
  .docs-go em{display:none}
  .docs-go{grid-column:2;justify-content:flex-start;margin-top:.45rem}
}

/* ---------- linked project cards ---------- */
a.work.work--link{display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none}
.work-more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)
}
.work-more .ar{transition:transform .25s var(--ease)}
.work--link:hover .work-more .ar{transform:translateX(4px)}
.work--link::before{
  content:"";position:absolute;inset:0;z-index:3;border:2px solid transparent;
  transition:border-color .3s var(--ease)
}
.work--link:hover::before{border-color:var(--accent)}

/* ---------- video grid ---------- */
.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1rem;
  margin-top:clamp(1.2rem,2.5vw,1.8rem)}
.video-grid .site-video{margin:0}
.video-grid video{max-height:340px}

/* current page inside a dropdown */
.mega-list li.is-here > a{background:rgba(var(--accent-rgb),.1);border-left-color:var(--accent)}
.mega-list li.is-here b{color:var(--accent)}
.mega-list li.is-here .rw{opacity:1;transform:none}

/* ---------- client logo grid ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:0;
  border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.logo-grid li{
  background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.85rem;padding:1.5rem 1rem 1.2rem;
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  transition:.28s var(--ease)
}
.logo-grid li:hover{background:var(--paper);transform:translateY(-2px);box-shadow:var(--shadow)}
.lg-plate{display:grid;place-items:center;width:100%;height:70px}
.lg-plate img{max-width:100%;max-height:70px;width:auto;height:auto;object-fit:contain;
  transition:transform .3s var(--ease)}
.logo-grid li:hover .lg-plate img{transform:scale(1.06)}
.lg-name{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-dark);text-align:center;line-height:1.35}
.logo-grid li:hover .lg-name{color:var(--accent)}
@media (max-width:520px){
  .logo-grid{grid-template-columns:repeat(auto-fit,minmax(45%,1fr))}
  .lg-plate,.lg-plate img{height:54px;max-height:54px}
}

/* ---------- client sector cards ---------- */
.sector{
  position:relative;display:flex;flex-direction:column;height:100%;
  background:var(--white);border:1px solid var(--line-light);
  padding:1.2rem 1.3rem 1.35rem;transition:.3s var(--ease)
}
.sector::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.sector:hover{box-shadow:var(--shadow);border-color:rgba(var(--accent-rgb),.3)}
.sector:hover::before{transform:scaleX(1)}
.sector h3{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.04em;line-height:1.2;
  padding-bottom:.6rem;margin-bottom:.5rem;border-bottom:1px solid var(--line-light)
}
.sector h3 i{
  flex:none;font-style:normal;font-family:var(--body);font-size:.62rem;font-weight:700;letter-spacing:.1em;
  padding:.16rem .42rem;background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.3);
  color:var(--accent)
}
.sector li{
  display:flex;align-items:flex-start;gap:.55rem;padding:.3rem 0;
  font-size:.88rem;line-height:1.45;color:var(--txt-mute);
  text-align:left;hyphens:manual;transition:color .2s var(--ease)
}
.sector li::before{content:"";width:4px;height:4px;flex:none;margin-top:.55rem;background:var(--steel);
  transform:rotate(45deg);transition:background .2s var(--ease)}
.sector li:hover{color:var(--txt)}
.sector li:hover::before{background:var(--accent)}

/* a long list spans two columns instead of running down the page */
.sector--wide{grid-column:span 2}
.sector--wide ul{columns:2;column-gap:1.8rem}
.sector--wide li{break-inside:avoid}
@media (max-width:960px){.sector--wide{grid-column:span 2}}
@media (max-width:600px){.sector--wide{grid-column:span 1}.sector--wide ul{columns:1}}

.sector-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);align-items:start}
@media (max-width:960px){.sector-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sector-grid{grid-template-columns:1fr}}

/* ---------- featured machine cards ---------- */
.mcard{margin:0;background:var(--white);border:1px solid var(--line-light);overflow:hidden;
  transition:.3s var(--ease);height:100%;display:flex;flex-direction:column}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(var(--accent-rgb),.4)}
.mcard-img{position:relative;overflow:hidden;background:#0d2035;aspect-ratio:16/9}
.mcard-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.mcard:hover .mcard-img img{transform:scale(1.06)}
.mcard figcaption{padding:1.1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.mcard h3{font-size:1.18rem;text-transform:uppercase;line-height:1.2}
.mcard p{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:0;
  padding-top:.6rem;border-top:1px solid var(--line-light);margin-top:auto}
.mcard p span{font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel-dark)}
.mcard p b{font-family:var(--display);font-size:1.05rem;color:var(--accent);letter-spacing:.03em;white-space:nowrap}

/* ---------- sticky back bar ---------- */
.backbar{
  position:sticky;top:74px;z-index:40;
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);box-shadow:0 6px 18px -14px rgba(10,24,38,.5)
}
.backbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:52px}
.back-link{
  display:inline-flex;align-items:center;gap:.55rem;padding:.45rem .9rem .45rem .7rem;
  border:1px solid var(--line-light);background:var(--white);
  font-size:.74rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--txt);
  transition:.25s var(--ease)
}
.back-link .ar{color:var(--accent);transition:transform .25s var(--ease)}
.back-link:hover{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.back-link:hover .ar{transform:translateX(-4px)}
.backbar-title{
  font-family:var(--display);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;
  /* the page you are on, picked out against the back link beside it */
  color:var(--accent);background:rgba(var(--accent-rgb),.08);
  border:1px solid rgba(var(--accent-rgb),.28);padding:.34rem .8rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
@media (max-width:640px){
  .backbar{top:66px}
  .backbar-title{display:none}
}

/* ---------- update news cards ---------- */
.ngrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:clamp(1rem,2vw,1.5rem)}
.ncard{
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line-light);
  overflow:hidden;height:100%;transition:.3s var(--ease)
}
.ncard:hover{box-shadow:var(--shadow);border-color:rgba(var(--accent-rgb),.25)}
.ncard-img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:#0d2035}
.ncard-img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s var(--ease);filter:grayscale(.12)}
.ncard:hover .ncard-img img{filter:none}
.ncard-date{
  position:absolute;left:0;bottom:0;padding:.35rem .8rem;background:var(--accent);color:#fff;
  font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,calc(100% - 6px) 100%,0 100%)
}
.ncard-body{display:flex;flex-direction:column;gap:.55rem;padding:1.1rem 1.2rem 1.3rem;flex:1}
.ncard-body h3{font-size:1.12rem;text-transform:uppercase;line-height:1.22}
.ncard-body p{font-size:.9rem;color:var(--txt-mute);margin:0}
.ncard-body .more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:auto;padding-top:.9rem;
  font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)
}

/* ---------- media player + playlist ---------- */
.player{display:grid;grid-template-columns:1.62fr 1fr;gap:clamp(1rem,2vw,1.6rem);align-items:start}
@media (max-width:900px){.player{grid-template-columns:1fr}}

.player-stage{
  position:relative;display:block;width:100%;padding:0;border:1px solid var(--line-light);
  background:#0a1826;aspect-ratio:16/9;overflow:hidden;cursor:pointer
}
.player-stage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.player-stage:hover img{transform:scale(1.03)}
.player-stage .vplay{background:rgba(10,24,38,.7);border-color:#fff}
.player-stage:hover .vplay{background:var(--accent);border-color:var(--accent)}
.player-hint{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  font-size:.62rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#fff;
  text-shadow:0 2px 8px rgba(0,0,0,.7)
}
.player-stage iframe{width:100%;height:100%;border:0;display:block}
.player-info{padding:1.1rem .1rem 0}
.player-channel{display:block;margin-bottom:.4rem}
.player-title{font-size:clamp(1.15rem,2vw,1.55rem);text-transform:uppercase;line-height:1.2;margin-bottom:.6rem}
.player-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.75rem;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.player-link .ar{transition:transform .25s var(--ease)}
.player-link:hover .ar{transform:translateX(4px)}

.player-side{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.player-count{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dark)}
.playlist{
  display:flex;flex-direction:column;gap:.5rem;overflow-y:auto;padding-right:.35rem;
  max-height:min(58vh,430px);scrollbar-width:thin
}
.pl-item{
  display:grid;grid-template-columns:112px 1fr;gap:.75rem;align-items:start;text-align:left;
  padding:.5rem;background:var(--white);border:1px solid var(--line-light);cursor:pointer;
  transition:.24s var(--ease)
}
.pl-item:hover{border-color:var(--accent);transform:translateX(2px)}
.pl-item.is-active{border-color:var(--accent);background:rgba(var(--accent-rgb),.07)}
.pl-thumb{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0d2035}
.pl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pl-item.is-active .pl-thumb::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;
  filter:drop-shadow(0 1px 4px rgba(0,0,0,.8))
}
.pl-meta{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.pl-channel{font-size:.56rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dark)}
.pl-item.is-active .pl-channel{color:var(--accent)}
.pl-title{font-size:.82rem;line-height:1.4;color:var(--txt);text-align:left;hyphens:manual}
.pl-item.is-active .pl-title{color:var(--accent-deep);font-weight:600}
@media (max-width:900px){.playlist{max-height:340px}}
@media (max-width:480px){.pl-item{grid-template-columns:92px 1fr}}

/* fallback link shown under an embed that a browser refuses to play */
.player-stage .stage-fallback{
  position:absolute;right:.6rem;bottom:.6rem;z-index:3;padding:.4rem .75rem;
  background:rgba(10,24,38,.78);border:1px solid rgba(255,255,255,.25);color:#fff;
  font-size:.62rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase
}
.player-stage .stage-fallback:hover{background:var(--accent);border-color:var(--accent)}

/* ---------- company name inside unit cards ---------- */
.unit .unit-company,.unit-company{
  display:flex;align-items:center;gap:.55rem;margin:.15rem 0 .5rem;
  font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:.04em;
  color:var(--accent-deep);text-align:left;hyphens:manual
}
.unit .unit-company::before,.unit-company::before{content:"";width:14px;height:2px;background:var(--accent);flex:none}

/* ---------- hero slide backgrounds ---------- */
.hero-bgs{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg{
  position:absolute;inset:0;opacity:0;
  background-size:cover;background-position:center;
  transform:scale(1.04);
  transition:opacity 1.1s var(--ease),transform 7s linear
}
.hero-bg.is-on{opacity:1;transform:scale(1)}
@media (prefers-reduced-motion:reduce){.hero-bg{transition:opacity .3s;transform:none}}

/* ---------- careers ---------- */
.jobs{display:grid;gap:.9rem}
.jobs-empty{max-width:70ch}
.job{border:1px solid var(--line-light);border-radius:var(--radius-card);background:var(--white);
  overflow:hidden;transition:border-color .25s var(--ease),box-shadow .25s var(--ease)}
.tint .job{background:var(--white)}
.job:hover{border-color:rgba(var(--accent-rgb),.45);box-shadow:var(--shadow)}
.job summary{display:flex;align-items:center;gap:1rem;justify-content:space-between;
  padding:1.15rem 1.4rem;cursor:pointer;list-style:none}
.job summary::-webkit-details-marker{display:none}
.job summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.job-head h3{font-size:1.15rem;margin:0}
.job-facts{margin:.4rem 0 0;display:flex;flex-wrap:wrap;gap:.4rem .9rem;
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--txt-mute)}
.job-facts span+span::before{content:"\00b7";margin-right:.9rem;color:var(--line-light)}
.job-toggle{flex:none;position:relative;width:26px;height:26px;border-radius:50%;
  border:1px solid var(--line-light);transition:.25s var(--ease)}
.job-toggle::before,.job-toggle::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--accent);transform:translate(-50%,-50%);transition:.25s var(--ease)}
.job-toggle::before{width:11px;height:1.5px}
.job-toggle::after{width:1.5px;height:11px}
.job[open] .job-toggle,.job details[open] .job-toggle{background:var(--accent);border-color:var(--accent)}
details[open] .job-toggle::before,details[open] .job-toggle::after{background:#fff}
details[open] .job-toggle::after{height:0}
.job-body{padding:0 1.4rem 1.5rem;border-top:1px solid var(--line-light);margin-top:-1px}
.job-body>p{margin:1.1rem 0 0;max-width:75ch}
.job-meta{display:flex;flex-wrap:wrap;gap:.9rem 2.2rem;margin:1.2rem 0 0}
.job-meta dt{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--txt-mute)}
.job-meta dd{margin:.15rem 0 0;font-weight:600}
.job-list{margin-top:1.4rem}
.job-list h4{font-family:var(--display);font-size:.95rem;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 .7rem}
.job-body .btn{margin-top:1.5rem}
.careers-apply{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,4vw,3.5rem);
  align-items:start}
.careers-apply form{background:var(--white);border:1px solid var(--line-light);
  border-radius:var(--radius-card);padding:clamp(1.4rem,3vw,2.2rem)}
.info--hr{margin-top:1.8rem}
.field .hint{display:block;margin-top:.35rem;font-size:.78rem;color:var(--txt-mute)}
.field input[type=file]{width:100%;padding:.7rem .8rem;border:1px dashed var(--line-light);
  border-radius:8px;background:var(--paper);font:inherit;font-size:.88rem;cursor:pointer}
.field input[type=file]::file-selector-button{margin-right:.9rem;padding:.45rem .9rem;border:0;
  border-radius:6px;background:var(--ink,#0a1826);color:#fff;font:inherit;font-size:.8rem;cursor:pointer}
@media (max-width:860px){.careers-apply{grid-template-columns:1fr}}

/* ---------- turnover chart ---------- */
.growth{margin:0}
.growth-card{background:var(--white);border:1px solid var(--line-light);
  border-radius:var(--radius-card);padding:clamp(1.1rem,2.4vw,1.9rem)}
.tint .growth-card{background:var(--white)}
.growth-unit{margin:0 0 .4rem;font-size:.7rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--txt-mute)}
.gc{display:block;width:100%;height:auto;overflow:visible}
.gc-stop-a{stop-color:rgba(var(--accent-rgb),.28)}
.gc-stop-b{stop-color:rgba(var(--accent-rgb),.03)}
.gc-grid{stroke:var(--line-light);stroke-width:1}
.gc-axis{stroke:rgba(10,24,38,.28);stroke-width:1}
.gc-line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.gc-dot{fill:var(--white);stroke:var(--accent);stroke-width:2.5}
.gc-val{font-family:var(--display);font-size:16px;font-weight:600;fill:var(--txt)}
.gc-ytick{font-family:var(--body);font-size:13px;fill:var(--txt-mute);text-anchor:end}
.gc-xtick{font-family:var(--body);font-size:13px;fill:var(--txt-mute)}
.growth-note{margin:.9rem 0 0;font-size:.85rem;color:var(--txt-mute)}
@media (max-width:560px){
  .gc-val{font-size:19px}
  .gc-ytick,.gc-xtick{font-size:15px}
}

/* ---------- projects: segment -> client -> project ---------- */
/* Separators are drawn on the tiles, not as a coloured sheet behind a 1px gap —
   a part-filled last row would otherwise leave its empty columns as a solid
   block of the line colour. */
.cl-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;
  border-top:1px solid var(--line-light);border-left:1px solid var(--line-light)}
.cl-tile{
  background:var(--white);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:.8rem;padding:1.6rem 1rem 1.2rem;text-decoration:none;color:inherit;
  border-right:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
  transition:.28s var(--ease)
}
.cl-tile:hover{background:var(--paper);transform:translateY(-2px);box-shadow:var(--shadow)}
.cl-plate{display:grid;place-items:center;width:100%;height:70px}
.cl-plate img{max-width:100%;max-height:70px;width:auto;height:auto;object-fit:contain;
  transition:transform .3s var(--ease)}
.cl-tile:hover .cl-plate img{transform:scale(1.06)}
/* no logo yet - the company name carries the tile instead of an empty box */
.cl-plate--text{padding:.4rem .5rem;border:1px solid var(--line-light);background:var(--paper)}
.cl-plate--text b{font-family:var(--display);font-size:.9rem;font-weight:600;line-height:1.25;
  text-align:center;color:var(--steel-dark);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden}
.cl-tile:hover .cl-plate--text{border-color:var(--accent)}
.cl-name{font-size:.68rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--steel-dark);text-align:center;line-height:1.35}
.cl-tile:hover .cl-name{color:var(--accent)}
.cl-meta{margin-top:auto;font-size:.72rem;color:var(--txt-mute);display:flex;align-items:center;gap:.35rem}
.cl-tile:hover .cl-meta{color:var(--accent)}
.cl-meta .ar{transition:transform .28s var(--ease)}
.cl-tile:hover .cl-meta .ar{transform:translateX(3px)}
@media (max-width:520px){
  .cl-grid{grid-template-columns:repeat(auto-fit,minmax(45%,1fr))}
  .cl-plate,.cl-plate img{height:54px;max-height:54px}
}

/* client detail head */
.cd-head{display:flex;align-items:center;gap:1.4rem;margin-bottom:1.8rem;flex-wrap:wrap}
.cd-logo{flex:0 0 auto;display:grid;place-items:center;width:132px;height:82px;padding:.7rem;
  background:var(--white);border:1px solid var(--line-light)}
.cd-logo img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.cd-head .sec-head,.cd-head h2{margin:0}

/* project list */
.pj-list{border:1px solid var(--line-light);background:var(--white)}
.pj-row{display:flex;align-items:flex-start;gap:1.1rem;padding:1.15rem 1.3rem;
  text-decoration:none;color:inherit;border-bottom:1px solid var(--line-light);
  transition:.24s var(--ease)}
.pj-row:last-child{border-bottom:0}
.pj-row:hover{background:var(--paper)}
.pj-num{flex:0 0 auto;font-family:var(--display);font-size:.82rem;font-weight:600;
  color:var(--accent);padding-top:.15rem}
.pj-main{flex:1 1 auto;display:flex;flex-direction:column;gap:.28rem;min-width:0}
.pj-main b{font-family:var(--display);font-size:1.02rem;font-weight:600;line-height:1.3}
.pj-main span{font-size:.9rem;color:var(--txt-mute);line-height:1.5}
.pj-main i{font-style:normal;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-mute)}
.pj-row:hover .pj-main b{color:var(--accent)}
.pj-go{flex:0 0 auto;align-self:center;font-size:.74rem;letter-spacing:.06em;
  color:var(--txt-mute);display:flex;align-items:center;gap:.35rem;white-space:nowrap}
.pj-row:hover .pj-go{color:var(--accent)}
.pj-go .ar{transition:transform .24s var(--ease)}
.pj-row:hover .pj-go .ar{transform:translateX(3px)}
@media (max-width:560px){
  .pj-row{flex-wrap:wrap;gap:.5rem 1rem;padding:1rem}
  .pj-go{align-self:flex-start;margin-left:calc(.82rem + 1.1rem)}
  .cd-logo{width:104px;height:66px}
}

/* Machine lists in the detailed RDSO layout (Unit 4): the sheet's own two-row
   header, eleven columns and a photo per machine. Headers wrap so the table
   fits the page width on desktop; below 1100px it scrolls sideways. */
.spec--mp{min-width:0;font-size:.82rem}
.spec--mp th,.spec--mp td{padding:.55rem .5rem;line-height:1.3;vertical-align:middle;border:1px solid var(--line-light)}
.spec--mp thead th{font-size:.74rem;letter-spacing:.04em;line-height:1.25;text-align:center;
  vertical-align:middle;white-space:normal}
.spec--mp td:first-child{width:44px;text-align:center}
.spec--mp td:last-child,.spec--mp th:last-child{width:84px}
.spec--mp .mp-photo{display:block;width:72px;height:54px;object-fit:contain;margin:0 auto}
@media (max-width:1100px){.spec--mp{min-width:960px}}
/* lightbox showing one photo on its own (machine photos): nothing to page through */
.lightbox.lb--single .lb-nav,.lightbox.lb--single .lb-strip,.lightbox.lb--single .lb-count{display:none}
/* ...and no dark frame: the photo scales to the popup width (up to 78% of the screen height) */
.lightbox.lb--single .lb-inner{width:min(860px,100%)}
.lightbox.lb--single .lb-img{width:100%;height:auto;max-height:78vh;object-fit:contain}


/* "View photos" button on a corporate-giving card: reads as a link, not a button */
.csr-more{display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;padding:0;
  background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.csr-more .ar{transition:transform .25s var(--ease)}
.csr-more:hover .ar{transform:translateX(4px)}

/* slide counter on the home slider: which slide is showing, out of how many */
.hero-count{margin-top:1.4rem;font-family:var(--display);font-size:.82rem;letter-spacing:.18em;
  color:rgba(255,255,255,.75)}
.hero-count b{color:#fff;font-size:1.05rem}
@media (max-width:600px){.hero-count{margin-top:1rem;font-size:.74rem}}
/* ...and it sits in the slider's top-right corner, except on phones where the
   arrows are already up there - then it stays under the text. */
@media (min-width:601px){
  .hero--slider .hero-count{position:absolute;z-index:4;margin:0;
    top:clamp(.9rem,2.2vw,1.8rem);right:clamp(1rem,2.6vw,2.4rem)}
}
/* machine cards: the photo opens in the viewer, so show it is clickable */
.mcard-img a{display:block;height:100%;cursor:zoom-in}
.mcard-img a img{display:block;width:100%;height:100%;object-fit:cover}