/* ISDept.com v1 static rebuild.
   Colours and fonts are variables so the house palette (HOUSE-LOOK-v0) can be switched in later.
   Current values match the live site as observed on 15 Oct 2026. */
@font-face{font-family:"Source Serif 4";src:url("../fonts/source-serif-4-latin.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
:root{
  --c-ground:#ffffff;
  --c-text:#000000;
  --c-ink-dark:#333333;      /* stats numbers */
  --c-muted:#999999;         /* stats labels */
  --c-brand:#015478;         /* teal-navy: service text, solution card, about panel */
  --c-act:#2365ed;           /* buttons */
  --c-act-hover:#1b54c9;
  --c-accent-gold:#c7a172;   /* present in the live CSS; reserved */
  --c-accent-red:#d9001b;    /* present in the live CSS; reserved */
  --c-section-alt:#f5f5f5;
  --c-footer:#000000;
  --c-footer-text:#ffffff;
  --c-overlay:rgba(0,0,0,.35);
  --font-serif:"Source Serif 4","Source Han Serif",Georgia,"Times New Roman",serif;
  --font-sans:Arial,"Helvetica Neue",Helvetica,sans-serif;
  --font-body:var(--font-serif);
  --font-head:var(--font-serif);
  --fs-body:14px;--fs-hero:56px;--fs-page-title:42px;--fs-h2:24px;--fs-card-title:36px;
  --radius-btn:20px;--wrap:1170px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--c-ground);color:var(--c-text);font-family:var(--font-body);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
img,video{max-width:100%;display:block}
a{color:inherit}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:8px 12px;z-index:100}.skip:focus{left:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}

/* Header: logo left, menu button upper right, overlaid on the first section.
   v2.9 (Captain 19 Oct 2026): the menu button is shown at ALL widths and there is no full-screen overlay.
   >=901px: closed by default; the button reveals the links inline in the header bar, level with the logo,
   just left of the button (short fade/slide). <=900px: the button opens a compact full-width dropdown under the header. */
.site-header{position:absolute;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:35px 50px 0}
.site-header .logo{flex:none}
.site-header .logo img{width:235px;height:auto}
.menu-toggle{display:block;order:2;flex:none;position:relative;width:44px;height:44px;margin-right:-10px;background:none;border:0;border-radius:6px;cursor:pointer;padding:0;color:#fff}
.menu-toggle span{position:absolute;left:12px;width:20px;height:2px;background:currentColor;transition:transform .2s ease,opacity .2s ease}
.menu-toggle span:nth-child(1){top:15px}.menu-toggle span:nth-child(2){top:21px}.menu-toggle span:nth-child(3){top:27px}
.site-header.nav-open .menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.nav-open .menu-toggle span:nth-child(2){opacity:0}
.site-header.nav-open .menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-toggle:focus-visible{outline:2px solid var(--c-act);outline-offset:2px}
.nav-panel{order:1;margin-left:auto}
.nav-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:0 4px}
.nav-panel a{display:block;color:#fff;text-decoration:none;font-size:16px;font-weight:500;letter-spacing:.02em;padding:8px 14px;text-shadow:0 1px 8px rgba(0,0,0,.45);transition:color .15s ease}
.nav-panel a:hover,.nav-panel a:focus-visible,.nav-panel a[aria-current=page]{color:var(--c-act)}
.nav-panel a:focus-visible{outline:2px solid var(--c-act);outline-offset:2px}
@media (min-width:901px){
  .site-header{gap:12px}
  .nav-panel{opacity:0;visibility:hidden;transform:translateX(12px);transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s}
  .site-header.nav-open .nav-panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s}
}
@media (min-width:901px) and (max-width:1100px){.site-header{padding-left:36px;padding-right:36px}.nav-panel ul{gap:0}.nav-panel a{font-size:15px;padding:8px 10px}}
@media (max-width:900px){
  .site-header{padding:20px 20px 14px;transition:background-color .15s ease}
  .site-header.nav-open{background:rgba(6,11,20,.96)}
  .nav-panel{display:none;position:absolute;top:100%;left:0;right:0;z-index:30;margin:0;background:rgba(6,11,20,.96);border-top:1px solid rgba(255,255,255,.12);box-shadow:0 12px 32px rgba(0,0,0,.45)}
  .site-header.nav-open .nav-panel{display:block}
  .nav-panel ul{display:block;padding:4px 0 8px}
  .nav-panel li+li{border-top:1px solid rgba(255,255,255,.08)}
  .nav-panel a{font-size:17px;padding:13px 20px;text-shadow:none}
  .nav-panel a:hover,.nav-panel a:focus-visible{background:rgba(255,255,255,.06)}
  .nav-panel a:focus-visible{outline-offset:-2px}
}
@media (prefers-reduced-motion:reduce){.menu-toggle span,.site-header,.nav-panel,.site-header.nav-open .nav-panel,.nav-panel a{transition:none}}

/* Full-bleed media sections */
.media-section{position:relative;overflow:hidden;color:#fff;background:#000}
.media-section>video,.media-section>.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.media-section .inner{position:relative;z-index:2}
.hero-video{height:100vh;min-height:520px;max-height:900px}
.page-banner{height:313px;display:flex;align-items:center;justify-content:center;background:#000 center/cover no-repeat}
.page-banner h1{position:relative;z-index:2;margin:0;font-size:var(--fs-page-title);font-weight:700;color:#fff;letter-spacing:1px}

/* Home: Our Services tiles */
.home-services{height:900px;background:#0a1a2e center/cover no-repeat;display:flex;flex-direction:column;justify-content:flex-end}
.home-services h2{font-size:var(--fs-hero);font-weight:400;text-align:center;margin:0 0 70px}
.tiles{display:grid;grid-template-columns:repeat(5,1fr);height:330px;background:rgba(0,0,0,.25)}
.tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:40px;text-decoration:none;color:#fff;overflow:hidden}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.tile:hover img,.tile:focus img{opacity:1}
.tile .abbr,.tile .name{position:relative;z-index:1;text-align:center}
.tile .abbr{font-size:21px;margin-bottom:40px}
.tile .name{font-size:16px;padding:0 10px}

.offices-video{height:777px}

/* Home: The Solution slider */
/* v2.4: slider centred between title and dots: equal visible gap (--sol-gap) from the title baseline to the slider and from the slider to the dots */
.solution{--sol-gap:36px;padding:80px 0 56px;background:#0d1c33 center/cover no-repeat;color:#fff;position:relative}
.solution h2{font-size:var(--fs-hero);font-weight:400;text-align:center;line-height:1.5;margin:0 0 calc(var(--sol-gap) - 0.41em)} /* 0.41em = space below the baseline inside the 1.5 line box (no descenders in "The Solution") */
.slider{position:relative;max-width:1100px;margin:0 auto}
.slides{position:relative;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{position:relative;flex:0 0 100%;scroll-snap-align:center;display:grid;grid-template-columns:1fr 1fr;}
/* v2.2: black padding cropped out of the source files; every frame is the same 11:7 box filled with cover (no stretching) */
.slide img{display:block;width:100%;height:auto;aspect-ratio:11/7;object-fit:cover;object-position:center;align-self:start;background:#111}
/* v2.3: card matches its picture: same 11:7 box on desktop (550x350), equal padding on all sides, content centred vertically so all five slides share one layout */
.slide .card{background:var(--c-brand);padding:32px;display:flex;flex-direction:column;justify-content:center;aspect-ratio:11/7;box-sizing:border-box;overflow:hidden}
.slide h3{font-size:var(--fs-card-title);font-weight:900;margin:0 0 20px;font-size:28px}
.slide p{font-size:15px;margin:0 0 24px}
.btn{display:inline-block;background:var(--c-act);color:#fff;border:0;border-radius:var(--radius-btn);padding:8px 26px;font:500 15px var(--font-body);text-decoration:none;cursor:pointer;align-self:flex-start}
.btn:hover{background:var(--c-act-hover)}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.85);cursor:pointer;font-size:18px;z-index:3}
.slider-nav.prev{left:-60px}.slider-nav.next{right:-60px}
.dots{display:flex;gap:6px;justify-content:center;margin-top:var(--sol-gap)}
.dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(255,255,255,.5);cursor:pointer}
.dots button[aria-current=true]{background:var(--c-act)}

.logo-band{height:315px;background:#000 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.logo-band img{width:366px;height:auto}

/* About */
.about-body{background:var(--c-section-alt);padding:90px 0 100px}
.about-panel{display:grid;grid-template-columns:5fr 7fr;background:#fff}
.about-panel .text{background:var(--c-brand);color:#fff;padding:40px;display:flex;align-items:center;font-size:16px}
.about-panel img{width:100%;height:100%;object-fit:cover}
.stats{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;padding:30px 0 50px;text-align:center}
.stats .num{font:400 46px var(--font-sans);color:var(--c-ink-dark);margin:0}
.stats .label{font-size:14px;color:var(--c-muted);text-transform:uppercase;margin:4px 0 0}

/* Services */
.services{padding:60px 0}
.service{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 0;color:var(--c-brand)}
.service:nth-child(even) .media{order:2}
.service h2{font-size:var(--fs-h2);font-weight:700;margin:0 0 20px}
.service p{margin:0 0 16px}
.service video{width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.service a{font-weight:700}

/* News */
.news-video{height:100vh;max-height:760px;min-height:480px}

/* Contact */
/* v2.5: picture anchored left (she sits left of centre), contact block on a dark panel in the open area to the right */
.contact-hero{position:relative;min-height:640px;background:#060b14;display:flex;align-items:center;justify-content:flex-end;overflow:hidden}
.contact-hero-img{position:absolute;inset:0 auto 0 0;width:68%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(to right,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%);mask-image:linear-gradient(to right,#000 55%,rgba(0,0,0,.6) 78%,transparent 100%)}
.contact-hero .inner{position:relative;z-index:1;width:min(440px,32%);margin-right:max(4vw,40px);padding:36px;text-align:left;color:#fff;background:rgba(6,11,20,.72);border-radius:6px}
.contact-hero .eyebrow{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#8ec4ff;margin:0 0 8px}
.contact-hero h1{font-size:32px;font-weight:700;margin:0 0 14px}
.contact-hero p{margin:0 0 14px;font-size:16px;line-height:1.5}
.contact-hero .mail{display:inline-block;font-size:20px;font-weight:600;color:#fff;margin:0 0 14px;text-decoration:underline;text-underline-offset:4px}
.contact-hero .phone a{color:#fff;white-space:nowrap}
.contact-hero .note{font-size:14px;opacity:.8;margin:0}

/* Footer */
.site-footer{background:var(--c-footer);color:var(--c-footer-text);padding:30px 0 40px}
.footer-nav ul{list-style:none;display:flex;justify-content:center;gap:0;margin:0 0 20px;padding:0;flex-wrap:wrap}
.footer-nav a{display:block;padding:10px 25px;text-decoration:none;font-size:15px;border-bottom:1px solid transparent}
.footer-nav a[aria-current=page]{border-bottom-color:#555}
.footer-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;font-size:14px}
.footer-row p{margin:0 0 4px}
.footer-row a{text-decoration:none}

/* 404 */
.notfound{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:200px 20px 80px;background:var(--c-brand);color:#fff}
.notfound h1{font-size:var(--fs-page-title);margin:0 0 12px}
.notfound a{color:#fff}

@media (max-width:900px){
  .solution{--sol-gap:24px;padding:56px 0 40px}
  .site-header .logo img{width:160px}
  :root{--fs-hero:36px;--fs-page-title:32px}
  .hero-video{height:56vw;min-height:240px}
  .home-services{height:auto;padding-top:180px}
  .tiles{grid-template-columns:1fr;height:auto}
  .tile{min-height:120px;padding:20px 0;justify-content:center}.tile .abbr{margin-bottom:6px}
  .offices-video{height:56vw}
  /* stacked: card is the same width and 11:7 height as its picture, 20px padding all round */
  .slide{grid-template-columns:1fr;grid-template-rows:auto 1fr}.slide img{height:auto;aspect-ratio:11/7}
  .slide .card{padding:20px}
  .slide h3{font-size:21px;margin:0 0 8px}.slide p{font-size:13.5px;line-height:1.45;margin:0 0 12px}.slide .btn{padding:6px 20px;font-size:14px}
  .slider-nav{display:none}
  .about-panel,.service{grid-template-columns:1fr}
  .service:nth-child(even) .media{order:0}
  .stats .num{font-size:34px}
  .news-video{height:56vw;min-height:220px}
  .contact-hero{display:block;min-height:0}
  .contact-hero-img{position:static;width:100%;height:auto;aspect-ratio:16/9;object-position:50% 30%;-webkit-mask-image:none;mask-image:none}
  .contact-hero .inner{width:auto;margin:0;padding:28px 20px 36px;border-radius:0;background:#060b14}
  .contact-hero h1{font-size:28px}
  .footer-row{flex-direction:column;align-items:flex-start}
  .logo-band{height:200px}.logo-band img{width:260px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.news-video{position:relative}
.division-note{font-weight:700;color:var(--c-brand);margin:10px 0 0}
.service-sub h3{font-size:calc(var(--fs-h2)*.85);font-weight:700;margin:0 0 20px}
.service-sub{padding-left:24px;border-left:3px solid var(--c-act)}
/* v2.3: on very narrow phones (<375px) the text cannot fit an 11:7 box, so the card is at least the picture height and grows to fit; all five stay the same height */
@media (max-width:374px){.slide .card{aspect-ratio:auto;min-height:calc(100vw * 7 / 11)}}
/* v2.6: news bar fixed to the bottom of the viewport (driven by NEWS_ITEMS in tools/build.py) */
:root{--news-bar-h:44px}
body.has-news-bar{padding-bottom:var(--news-bar-h);background:#000}
.news-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;min-height:var(--news-bar-h);display:flex;align-items:center;background:rgba(6,11,20,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;font-size:15px;line-height:1.35;border-top:1px solid rgba(255,255,255,.12)}
.news-static{margin:0;padding:10px 20px;width:100%;text-align:center}
.news-bar.is-ticker{overflow:hidden;white-space:nowrap}
.news-track{display:flex;width:max-content;animation:news-ticker var(--ticker-dur,30s) linear infinite}
.news-track ul{display:flex;list-style:none;margin:0;padding:0}
.news-track li{padding:0 2.5rem}
.news-track li::before{content:"\2022";margin-right:2.5rem;opacity:.6}
.news-bar.is-ticker:hover .news-track,.news-bar.is-ticker:focus-within .news-track{animation-play-state:paused}
@keyframes news-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .news-bar.is-ticker{white-space:normal}
  .news-track{animation:none;width:auto}
  .news-track ul+ul{display:none}
  .news-track ul{flex-wrap:wrap;justify-content:center;padding:8px 12px}
  .news-track li{padding:2px 12px}.news-track li::before{display:none}
}
@media (max-width:600px){:root{--news-bar-h:60px}.news-bar{font-size:13.5px}.news-static{padding:9px 14px}}