/* Shared production polish — approved 14/08/2026 */
:root{
  --stage-max:1800px;
  --reading-measure:68ch;
  --focus-ring:0 0 0 3px rgba(192,8,16,.22);
  /* Shared capability-ribbon sizing tokens (rev8) — used by the
     Home-page ribbon and Services-page discipline grid so every
     ribbon on the site scales from one source of truth, at every
     breakpoint (defined globally, not inside a media query). */
  --ribbon-icon-size:clamp(42px,3.2vw,58px);
  --ribbon-title-size:clamp(18px,1.15vw,22px);
  --ribbon-body-size:clamp(15px,0.9vw,17px);
  --ribbon-label-size:clamp(13px,0.75vw,15px);
  --ribbon-padding-x:clamp(22px,2vw,34px);
  --ribbon-padding-y:clamp(22px,2vw,30px);
}

body{
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}

/* Keep unfinished destinations out of the customer journey. */
.header-case-studies,
a[href="#"]{ display:none !important; }

/* Clear, consistent keyboard treatment across all pages. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--red) !important;
  outline-offset:3px;
  box-shadow:var(--focus-ring);
}

/* One predictable desktop composition at every browser zoom level.
   The outer .hero section is a full-bleed band (its background/edge
   treatment can span the whole browser width), but everything that
   actually needs to stay legible — text, diagonal split, images, the
   ribbon — lives inside .hero-stage, which stops growing past 1800px
   and re-centres itself beyond that. Without this inner cap, hero
   content on ultrawide monitors (or a zoomed-out browser) kept
   stretching past its intended proportions, which is what caused the
   services-page headline to run under the photo. */
.hero{
  width:100%;
  isolation:isolate;
}
.hero-stage{
  width:min(100%,var(--stage-max));
  height:100%;
  margin-inline:auto;
  position:relative;
  overflow:hidden;
}
.hero-copy{ max-width:min(620px,48vw); }
.hero p.lead{ max-width:var(--reading-measure); }

/* Secondary pages remain related but intentionally quieter than Home. */
body:not(.home-page) .hero-image img{
  transform:scale(1.015);
  transition:transform 8s cubic-bezier(.2,.65,.25,1);
}
body:not(.home-page) .hero:hover .hero-image img{ transform:scale(1.035); }

/* Standards -> software reads as one compact engineering workflow. */
@media (min-width:981px){
  .techshow .eng-stage{
    max-width:min(var(--stage-max),1360px) !important;
    padding:46px var(--pad-x) 54px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    column-gap:34px !important;
    row-gap:0 !important;
  }
  .techshow .eng-head{
    max-width:none !important;
    margin-bottom:28px !important;
    display:grid;
    grid-template-columns:auto 1fr;
    align-items:end;
    gap:8px 24px;
  }
  .techshow .eng-head .eyebrow{ grid-column:1; margin:0 !important; }
  .techshow .eng-head h2{ grid-column:1/-1; font-size:clamp(30px,2.4vw,36px) !important; }
  .techshow .eng-head::after{
    content:"CODES  \2192  ANALYSIS  \2192  COORDINATION";
    grid-column:2;
    grid-row:1;
    justify-self:end;
    font:600 11px/1.2 var(--mono);
    letter-spacing:.13em;
    color:var(--grey-600);
  }
  .techshow .eng-block,
  .techshow .eng-block-software{
    display:block !important;
    margin:0 !important;
  }
  .techshow .eng-photo{
    aspect-ratio:16/9 !important;
    box-shadow:0 14px 32px rgba(0,24,64,.12) !important;
  }
  .techshow .eng-panel{
    width:92% !important;
    min-height:226px !important;
    margin:-42px 0 0 !important;
    padding:24px 26px !important;
    box-shadow:0 14px 34px rgba(0,24,64,.10) !important;
  }
  .techshow .eng-block-standards .eng-panel{ margin-left:auto !important; }
  .techshow .eng-block-software .eng-panel{ margin-right:auto !important; }
  .techshow .eng-list{ margin-top:13px !important; }
  .techshow .eng-list li{ padding:5px 0 !important; }
  .techshow .techshow-heading{ font-size:23px !important; }
  .techshow .techshow-sub{ margin-top:7px !important; }
}

/* Prevent ornate motion from competing with the content. */
.techshow-img img{ transform:scale(1.035) !important; transition:transform .6s ease !important; }
.techshow-img[data-parallax]{ translate:none !important; }

/* Editorial copy stays readable without allowing very long lines. */
.section p,
.detail-copy p,
.software-copy p,
.about-copy p,
.footer-brand p{ max-width:var(--reading-measure); }

/* Small screens use a separate, unclipped reading-first hero. */
@media (max-width:900px){
  .hero{
    height:auto !important;
    min-height:0 !important;
    display:grid;
  }
  .hero-image{
    position:relative !important;
    inset:auto !important;
    clip-path:none !important;
    min-height:260px;
    order:2;
  }
  .hero-edge-svg{ display:none !important; }
  .hero-inner{
    position:relative !important;
    height:auto !important;
    order:1;
  }
  .hero-inner .wrap{ min-height:420px; padding-block:56px; }
  .hero-copy{ max-width:680px; }
  .hero h1{ font-size:clamp(38px,10vw,58px) !important; }
  .techshow .eng-stage{ background-size:24px 24px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Client review 14/08/2026 — one coordinated first-viewport system.
   Hero height is derived from viewport height (not monitor width), while the
   capability ribbon has a fixed compact footprint. This prevents the former
   ribbon jump/overflow at 1366×768 and keeps the same information visible at
   1440×900, 1536×864 and 1920×1080. */
@media (min-width:901px){
  .hero{
    height:clamp(380px,calc(100svh - 306px),540px) !important;
  }
  .home-page .hero-copy{ max-width:min(560px,42vw); }
  .home-page .hero-headline.tier-1{ font-size:clamp(26px,2.6vw,40px); }
  .home-page .hero-headline.tier-2{ font-size:clamp(23px,2.3vw,34px); }
  .home-page .hero-headline.tier-3{ font-size:clamp(20px,2vw,29px); }
  .home-page .hero-eyebrow{ margin-bottom:9px; }
  .home-page .hero-rule{ margin-top:9px; }
  .home-page .hero p.lead{ margin-top:10px; line-height:1.48; }
  .home-page .hero-terms{ margin-top:9px; }
  .home-page .hero-actions{ margin-top:13px; }
  .home-page .hero-controls{ margin-top:12px; }

  /* Every slide shows the same two clear conversion routes: Get a Quote
     (primary) and Explore Services (secondary, styled as a solid pill so
     it reads with equal weight on every slide, not just the first). */
  .home-page .hero-link-secondary{
    display:inline-flex;
    min-height:46px;
    align-items:center;
    padding:0 22px;
    color:#fff;
    background:var(--navy);
    border:0;
    font-weight:700;
    text-transform:uppercase;
  }
  .home-page .hero-link-secondary:hover{ background:var(--red); color:#fff; }
  .home-page .hero-link-secondary::after{ display:none; }

  /* Reduce blank bands without creating an over-packed page. */
  .home-page .section{ padding-top:clamp(38px,3.6vw,58px); padding-bottom:clamp(38px,3.6vw,58px); }
  .home-page .section-head{ margin-bottom:26px; }
  .home-page .exp-section{ padding-top:clamp(38px,3.6vw,58px); padding-bottom:clamp(38px,3.6vw,58px); }
  .services-page .section,
  .software-page .section{
    padding-top:clamp(40px,3.6vw,60px) !important;
    padding-bottom:clamp(40px,3.6vw,60px) !important;
  }
  .services-page .section-head,
  .software-page .section-head{ margin-bottom:26px !important; }
  .quote-page .section,
  body:not(.home-page):not(.services-page):not(.software-page) .section{
    padding-top:clamp(40px,3.6vw,60px);
    padding-bottom:clamp(40px,3.6vw,60px);
  }
}

@media (min-width:901px) and (max-height:800px){
  /* Short-viewport laptops (1366x768 etc.) — ribbon still gets the same
     minimum icon/title/body sizes (never shrink text below the shared
     tokens), so the space savings here come entirely from a tighter
     viewport/row height and reduced padding, not smaller type. */
  .hero{ height:clamp(360px,calc(100svh - 300px),500px) !important; }
}

/* Services landing introduction from the client content brief.
   The hero's diagonal edge narrows sharply toward the bottom of the
   panel (SVG x runs from 780px at the top to 560px at the bottom), so a
   wide text column that looks fine on line one runs under the photo by
   line three. Capping the column well inside the diagonal's narrowest
   point keeps every line — including the paragraph and buttons — clear
   of the image at every breakpoint. */
.services-page .hero-copy{
  width:min(37vw,620px);
  max-width:calc(50% - 70px) !important;
  padding-right:clamp(32px,4vw,72px);
  position:relative;
  z-index:2;
}
.services-page .hero h1{
  max-width:11ch;
  font-size:clamp(24px,2.4vw,40px) !important;
  line-height:1.16;
  letter-spacing:-0.02em;
  overflow-wrap:normal;
}
.services-page .hero h1 div,
.services-page .hero h1 span{ display:block; margin-bottom:6px; }
.services-page .hero h1 div:last-child,
.services-page .hero h1 span:last-child{ margin-bottom:0; }
@media (min-width:1024px) and (max-width:1500px){
  .services-page .hero h1{
    font-size:clamp(22px,2.4vw,32px) !important;
    max-width:10.5ch;
  }
}
.services-page .hero p.lead{ max-width:min(90%,440px); }

.software-page .hero h1{
  max-width:480px;
  font-size:clamp(23px,2.1vw,33px) !important;
  line-height:1.08;
}
.software-page .hero p.lead{ max-width:440px; }
.software-page .hero-copy{ max-width:min(480px,40vw) !important; }
.services-overview{
  padding:clamp(34px,3.4vw,52px) 0;
  background:linear-gradient(180deg,#fff,#f6f8fb);
}
.services-overview-head{
  display:grid;
  grid-template-columns:minmax(240px,.8fr) minmax(300px,1.2fr);
  gap:10px 56px;
  align-items:end;
  margin-bottom:30px;
}
.services-overview-head .eyebrow{ grid-column:1/-1; margin-bottom:4px; }
.services-overview-head h2{
  font-family:var(--display);
  color:var(--navy);
  font-size:clamp(27px,2.6vw,38px);
  line-height:1.08;
}
.services-overview-head p{ color:var(--grey-600); line-height:1.6; }
.services-overview-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:2px solid var(--red);
  border-bottom:1px solid var(--border);
  box-shadow:0 18px 36px rgba(0,24,64,.08);
}
.services-overview-grid a{
  min-height:270px;
  display:flex;
  flex-direction:column;
  padding:var(--ribbon-padding-y) var(--ribbon-padding-x);
  color:var(--navy);
  background:#fff;
  border-left:1px solid var(--border);
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.services-overview-grid a:first-child{ border-left:0; }
.services-overview-grid a:hover{ background:#001840; color:#fff; }
.services-overview-grid span{
  color:var(--red);
  font:600 var(--ribbon-label-size)/1 var(--mono);
  letter-spacing:.12em;
  margin-bottom:22px;
}
.services-overview-grid h3{
  font-family:var(--display);
  font-size:var(--ribbon-title-size);
  line-height:1.2;
  margin-bottom:12px;
}
.services-overview-grid p{
  color:var(--grey-600);
  font-size:var(--ribbon-body-size);
  line-height:1.5;
  transition:color .2s ease;
}
.services-overview-grid a:hover p{ color:rgba(255,255,255,.72); }
.services-overview-grid b{
  margin-top:auto;
  padding-top:18px;
  color:var(--red);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

@media (max-width:1100px) and (min-width:901px){
  .services-overview-grid{ grid-template-columns:repeat(3,1fr); }
  .services-overview-grid a:nth-child(4){ border-left:0; }
}

@media (max-width:900px){
  .services-overview-head{ display:block; }
  .services-overview-head h2{ margin-bottom:14px; }
  .services-overview-grid{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
  }
  .services-overview-grid a{
    flex:0 0:min(84vw,330px);
    min-height:230px;
    scroll-snap-align:start;
  }
}

/* ==========================================================================
   LEGAL PAGES — shared layout for Privacy Policy, Terms & Conditions and
   Cookie Policy. Same header/footer as the rest of the site; this block
   only styles the content area between them. Times New Roman body copy
   (matching the client's sitewide body-text rule), bold sans headings,
   navy/red accents, no hero photography, single reading column with a
   sticky desktop table of contents. */
.legal-page main{ background:var(--white); }
.legal-hero{
  position:relative;
  background:var(--navy);
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:28px 28px;
  padding:clamp(48px,6vw,84px) var(--pad-x) clamp(40px,5vw,64px);
  overflow:hidden;
}
.legal-hero .wrap{ max-width:1000px; }
.legal-hero .eyebrow{
  font-family:var(--mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--red);
}
.legal-hero h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(32px,4.5vw,52px);
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#fff;
  margin-top:12px;
}
.legal-hero .legal-updated{
  margin-top:14px;
  font-family:var(--sans);
  font-size:14px;
  color:rgba(255,255,255,.68);
}
.legal-body{
  padding:clamp(48px,6vw,80px) var(--pad-x) clamp(72px,7vw,110px);
}
.legal-body .wrap{
  max-width:1000px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:56px;
  align-items:start;
}
.legal-toc{
  position:sticky;
  top:96px;
  border-left:2px solid var(--border);
  padding-left:20px;
}
.legal-toc h2{
  font-family:var(--display);
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--grey-600);
  margin-bottom:14px;
}
.legal-toc ol{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:legaltoc;
}
.legal-toc li{ margin-bottom:10px; }
.legal-toc a{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.4;
  color:var(--navy);
  text-decoration:none;
  transition:color .15s ease;
}
.legal-toc a:hover,
.legal-toc a:focus-visible{ color:var(--red); }
.legal-content{ max-width:74ch; }
.legal-content h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(20px,2vw,25px);
  color:var(--navy);
  letter-spacing:-0.01em;
  margin-top:44px;
  margin-bottom:14px;
  scroll-margin-top:96px;
}
.legal-content h2:first-of-type{ margin-top:0; }
.legal-content h3{
  font-family:var(--display);
  font-weight:700;
  font-size:16px;
  color:var(--navy);
  margin-top:26px;
  margin-bottom:8px;
}
.legal-content p{
  font-family:var(--copy-font);
  font-size:clamp(16px,1vw,18px);
  line-height:1.7;
  color:var(--ink);
  margin-bottom:16px;
}
.legal-content ul,
.legal-content ol.legal-list{
  margin:0 0 20px;
  padding-left:22px;
}
.legal-content ul{ list-style:disc; }
.legal-content ol.legal-list{ list-style:decimal; }
.legal-content li{
  font-family:var(--copy-font);
  font-size:clamp(16px,1vw,18px);
  line-height:1.7;
  color:var(--ink);
  margin-bottom:8px;
}
.legal-content a{
  color:var(--red);
  text-decoration:underline;
  text-underline-offset:2px;
}
.legal-content strong{ color:var(--navy); }
.legal-config-flag{
  display:inline-block;
  margin-top:2px;
  padding:2px 8px;
  background:#fff2f2;
  border:1px solid rgba(192,8,16,.3);
  color:var(--red);
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:.02em;
}
.legal-content section{ scroll-margin-top:96px; }
@media (max-width:900px){
  .legal-body .wrap{ grid-template-columns:1fr; gap:32px; }
  .legal-toc{ position:relative; top:0; }
}

/* ---------- Catalog pages (Industries, Case Studies) ----------
   Reuses the .legal-hero navy blueprint band for a consistent identity;
   .catalog-body overrides the two-column legal grid with a single-column
   card grid since there's no table-of-contents concept here. */
.catalog-body .wrap{ display:block; max-width:var(--reading-measure, 68ch); }
.catalog-intro{
  font-family:var(--copy-font,serif); font-size:16px; line-height:1.7;
  color:var(--grey-600,#5B6472); max-width:68ch; margin-bottom:32px;
}
.catalog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:24px; max-width:none; }
.catalog-card{
  border:1px solid var(--border,#E2E5EA); border-radius:6px; padding:22px 20px; background:#fff;
}
.catalog-card h2{ font-size:16px; color:var(--navy); margin:0 0 8px; }
.catalog-card p{ font-family:var(--copy-font,serif); font-size:14.5px; line-height:1.65; color:var(--ink,#10151F); margin:0; }
.catalog-card--placeholder{ border-style:dashed; border-color:var(--grey-300,#D7DBE1); background:var(--grey-50,#F6F7F9); }
.catalog-flag{
  display:inline-block; margin-bottom:10px; padding:2px 8px; background:#fff2f2;
  border:1px solid rgba(192,8,16,.3); color:var(--red); font-family:var(--mono);
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
}
@media (max-width:900px){ .catalog-body .wrap{ max-width:none; } }

/* ---------- Inquiry-form privacy consent ---------- */
.form-consent{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:22px 0;
  padding:16px 18px;
  background:var(--grey-50);
  border:1px solid var(--border);
}
.form-consent input[type="checkbox"]{
  flex-shrink:0;
  width:20px;
  height:20px;
  margin-top:2px;
  accent-color:var(--red);
  cursor:pointer;
}
.form-consent label{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.55;
  color:var(--ink);
  cursor:pointer;
}
.form-consent label a{ color:var(--red); text-decoration:underline; }
.form-consent-error{
  display:none;
  margin:-14px 0 22px;
  font-family:var(--sans);
  font-size:13px;
  font-weight:600;
  color:var(--red);
}
.form-consent-error.is-visible{ display:block; }
.form-consent.has-error{ border-color:var(--red); box-shadow:0 0 0 1px var(--red); }
.form-privacy-note{
  margin:14px 0 26px;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.6;
  color:var(--grey-600);
}
.form-privacy-note a{ color:var(--red); text-decoration:underline; }

/* ===== FINAL HOMEPAGE RIBBON POSITION ===== */
@media (min-width: 901px) {
  .home-page .wwd-panel {
    width: min(92vw, 1480px) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* CMS-driven footer social links */
.footer-social-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  margin-top:16px;
}

.footer-social-links a{
  font-size:13px;
  font-weight:600;
  text-decoration:none;
}

.footer-social-links a:hover,
.footer-social-links a:focus-visible{
  text-decoration:underline;
}

/* Registered-company identity */
.footer-company-legal{
  padding-top:18px;
  padding-bottom:4px;
}

.footer-company-legal p{
  margin:0;
  font-size:12px;
  line-height:1.6;
  opacity:.82;
}

/* Disabled Case Studies action */
.header-case-studies[hidden]{
  display:none !important;
}