/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Hard clip at the root: a flex/grid item's full unclipped content width can
   still inflate an overflow:visible ancestor's scrollWidth even when a
   nested overflow-x:auto container (e.g. the charity carousel) renders and
   scrolls correctly on its own — this is the belt-and-braces fix per the
   "page body must never scroll horizontally" rule, not a replacement for
   fixing the layout that causes it. */
html,body{overflow-x:hidden}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--f-display);
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-.015em;
  line-height:1.02;
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);font-weight:800;letter-spacing:0}
p{margin:0 0 1.1em;max-width:66ch}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--ixs-blue);outline-offset:3px;border-radius:1px}

html{scroll-behavior:smooth}
.shell{width:min(100% - 2.5rem, var(--shell));margin-inline:auto}
.section{padding-block:var(--pad-y);position:relative;scroll-margin-top:90px}  /* clears the 82px sticky header when a section is an anchor target */
.section--alt{background:var(--bg-alt)}
.section--dark{background:var(--ink);color:var(--text-invert)}
.section--dark h2,.section--dark h3{color:#fff}
.section--dark p{color:var(--accent-gray-2)}  /* 11.04:1 on #2E2E2F — PASS AAA */
/* Independent of the site's light/dark theme toggle, so needs its own link
   colour: the default --link (Accent Blue #1) is tuned for white backgrounds
   and only reaches 2.54:1 on --ink — fails AA. blue-tint is the same colour
   already used for links under the dark theme toggle. */
.section--dark a:not(.btn){color:var(--blue-tint)}  /* 6.28:1 on #2E2E2F — PASS AA */

.skip{
  position:absolute;left:.75rem;top:-4rem;z-index:200;
  background:var(--accent-blue-1);color:#fff;   /* 5.33:1 white on #416AB3 reversed = 3.94:1; enlarged text used */
  font:700 1.05rem/1 var(--f-ui);padding:.9rem 1.2rem;
  transition:top .2s;
}
.skip:focus{top:.75rem}

/* ---------- Signature: the slant-stripe ----------
   Three parallelogram bars at 15deg, taken directly from the angled
   striped stroke in the IXS mark. Used as the section marker, the header
   rule, and the hero sweep. This is the one repeated device on the site. */
.stripe{
  --h:8px;
  height:var(--h);
  background:repeating-linear-gradient(
    105deg,
    var(--accent-blue-1) 0 10px,
    var(--accent-blue-2) 10px 20px,
    var(--ixs-blue)      20px 30px
  );
}
.marker{
  display:flex;gap:6px;margin-bottom:1.5rem;
}
.marker span{
  display:block;width:26px;height:10px;
  transform:skewX(calc(var(--slant) * -1));
}
.marker span:nth-child(1){background:var(--accent-blue-1)}
.marker span:nth-child(2){background:var(--accent-blue-2)}
.marker span:nth-child(3){background:var(--ixs-blue)}

/* ---------- Header ---------- */
.masthead{
  position:sticky;top:0;z-index:100;
  background:var(--bg);
  border-bottom:1px solid var(--rule);
}
.masthead__inner{
  display:flex;align-items:center;gap:1.5rem;
  min-height:78px;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text)}
/* Header logo (ixs-coatings-header.svg) is fixed dark grey with no light/dark
   variant of its own, so on the dark theme's header it would nearly
   disappear — same class of problem as the brand logos on the "Our Brands"
   cards. A light backing chip fixes it without altering the supplied file.
   The footer logo (ixs-coatings-footer.svg) is a separate, light-on-dark
   rendering supplied for that surface and needs no backing chip. */
.brand__logo{height:44px;width:auto;display:block}
html[data-theme="dark"] .masthead .brand__logo{
  background:#F4F6F7;padding:.5rem .7rem;
}

.nav{margin-left:auto}
.nav > ul{display:flex;gap:.35rem;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav > ul > li > a{
  display:block;padding:.6rem .85rem;
  font:600 .9rem/1 var(--f-ui);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text);text-decoration:none;position:relative;
}
.nav > ul > li > a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.15rem;height:3px;
  background:var(--ixs-blue);transform:scaleX(0) skewX(calc(var(--slant) * -1));
  transform-origin:left;transition:transform .25s ease;
}
.nav > ul > li > a:hover::after,.nav > ul > li > a[aria-current="page"]::after{transform:scaleX(1) skewX(calc(var(--slant) * -1))}

/* ---------- Nav dropdown (desktop: hover/focus, mobile: always expanded) ---------- */
.nav__dropdown{
  position:absolute;top:100%;left:0;min-width:220px;
  background:var(--card);border:1px solid var(--card-rule);
  list-style:none;margin:0;padding:.5rem 0;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:110;
}
.nav__item:hover .nav__dropdown,
.nav__item:focus-within .nav__dropdown{
  opacity:1;visibility:visible;transform:none;
}
.nav__dropdown a{
  display:block;padding:.65rem 1.1rem;
  font:600 .85rem/1.3 var(--f-ui);letter-spacing:.02em;text-transform:none;
  color:var(--text);text-decoration:none;
}
.nav__dropdown a:hover,.nav__dropdown a:focus-visible{color:var(--link);background:var(--bg-alt)}

.tools{display:flex;align-items:center;gap:.4rem;padding-left:1rem;border-left:1px solid var(--rule)}
.tool{
  border:1px solid var(--rule);background:transparent;color:var(--text);
  font:700 .78rem/1 var(--f-ui);letter-spacing:.04em;
  padding:.5rem .55rem;cursor:pointer;min-width:34px;
}
.tool:hover{border-color:var(--accent-blue-1);color:var(--link)}
.burger{display:none}

/* ---------- Buttons ---------- */
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem}
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font:700 .88rem/1 var(--f-ui);letter-spacing:.09em;text-transform:uppercase;
  padding:1rem 1.6rem;text-decoration:none;border:2px solid transparent;
  position:relative;transition:background .2s,color .2s,border-color .2s;white-space:nowrap;
  /* <button> keeps the UA buttonface background unless cleared, which left
     .btn--ghost as white text on light grey (~1.6:1). Cleared here. */
  background:none;cursor:pointer;-webkit-appearance:none;appearance:none;
}
.btn::before{
  content:"";width:9px;height:1.05em;flex:none;
  transform:skewX(calc(var(--slant) * -1));
  background:currentColor;opacity:.85;
}
.btn--primary{background:var(--accent-blue-1);color:#fff}
.btn--primary:hover{background:var(--ink)}
.btn--ghost{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}  /* #FFFFFF on #2E2E2F — 13.57:1 PASS AAA */
.btn--ghost:hover{background:#fff;color:var(--ink)}
.btn--line{border-color:var(--accent-blue-1);color:var(--link)}
.btn--line:hover{background:var(--accent-blue-1);color:#fff}

/* ---------- Hero (homepage only) ----------
   Load sequence reads as a spray pass: three slanted striped bars sweep
   left to right across the frame, then clear, revealing the image and
   headline beneath. Background images cross-fade on a 5s cycle. */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:#fff;
  min-height:clamp(520px,72vh,760px);
  display:grid;align-items:center;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slant-cut)));
}
.hero__media{position:absolute;inset:0}
.hero__slide{
  position:absolute;inset:0;opacity:0;transition:opacity 1.4s ease;
  width:100%;height:100%;object-fit:cover;display:block;
}
.hero__slide.is-on{opacity:1}
/* :only-of-type -- matches the img exactly while it's the only hero slide
   (its one sibling, .hero__scrim, is a different element type). With a
   single slide the crossfade transition has nothing to fade between, so it's
   pure LCP-delay overhead; this removes it only for that case and stops
   applying automatically the moment a second slide is added. */
.hero__slide:only-of-type{transition:none}
.hero__scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(31,31,32,.94) 0%,rgba(31,31,32,.82) 45%,rgba(31,31,32,.35) 100%);
}
.hero__inner{position:relative;z-index:3;padding-block:clamp(3rem,8vh,6rem)}
.hero h1{max-width:16ch;color:#fff}
.hero__lead{
  font-size:var(--step-1);color:var(--accent-gray-2);max-width:52ch;   /* 11.04:1 — PASS AAA */
  margin-bottom:2rem;
}
.hero__sweep{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.hero__bar{
  position:absolute;top:-15%;height:130%;width:34%;
  transform:skewX(calc(var(--slant) * -1)) translateX(-260%);
}
.hero__bar:nth-child(1){left:-40%;background:var(--accent-blue-1)}
.hero__bar:nth-child(2){left:-40%;background:var(--accent-blue-2)}
.hero__bar:nth-child(3){left:-40%;background:var(--ixs-blue)}

@keyframes pass{
  0%   {transform:skewX(calc(var(--slant) * -1)) translateX(-260%)}
  100% {transform:skewX(calc(var(--slant) * -1)) translateX(430%)}
}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.hero__bar{animation:pass 1.5s cubic-bezier(.5,0,.2,1) forwards}
.hero__bar:nth-child(2){animation-delay:.12s}
.hero__bar:nth-child(3){animation-delay:.24s}
.hero h1,.hero__lead,.hero .btn-row{opacity:0;animation:rise .7s ease .55s forwards}
.hero__lead{animation-delay:.68s}
.hero .btn-row{animation-delay:.8s}

/* ---------- Page hero (interior pages) ----------
   Restrained variant. The full sweep animation is reserved for the
   homepage; interior pages get the static slant cut only. */
.pagehero{
  background:var(--ink);color:#fff;position:relative;overflow:hidden;
  padding-block:clamp(3rem,7vw,5.5rem) clamp(4rem,9vw,7rem);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - var(--slant-cut)));
}
.pagehero::after{
  content:"";position:absolute;right:-6%;top:-20%;width:32%;height:150%;z-index:1;
  transform:skewX(calc(var(--slant) * -1));opacity:.16;
  background:repeating-linear-gradient(105deg,var(--ixs-blue) 0 14px,transparent 14px 34px);
}
/* Optional photography placeholder behind the scrim — same dark-theme stripe
   pattern used by .brandcard__img, so "no photo yet" reads consistently
   everywhere on the site. .hero__scrim is reused verbatim from the homepage
   hero since the treatment is identical. */
.pagehero__media{
  position:absolute;inset:0;
  background:repeating-linear-gradient(105deg,#333335 0 16px,#3B3B3D 16px 32px);
  display:grid;place-items:center;
  font:600 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--accent-gray-1);
}
img.pagehero__media{width:100%;height:100%;object-fit:cover;display:block}
.pagehero h1{color:#fff;max-width:14ch;position:relative;z-index:2}
.pagehero p{color:var(--accent-gray-2);font-size:var(--step-1);max-width:56ch;
  position:relative;z-index:2;margin-bottom:0}
.crumb{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem;
  font:600 .76rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-gray-1);position:relative;z-index:2}
.crumb a{color:var(--accent-gray-1);text-decoration:none}
.crumb a:hover{color:#fff;text-decoration:underline}
.crumb li+li::before{content:"/";margin-right:.5rem;color:var(--ixs-blue)}

/* ---------- Social list (brand pages — not linked until real URLs are
   supplied; icons are generic pictograms, not the platforms' own artwork) ---------- */
.social-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.social-list li{display:flex;align-items:center;gap:.6rem}
.social-icon{width:18px;height:18px;flex:none}

/* ---------- Stat grid (brand pages) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1.75rem;
  margin:2.5rem 0 0}
.stats__item{border-top:3px solid var(--ixs-blue);padding-top:.9rem}
.stats__item dt{font:700 .78rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:.4rem}
.stats__item dd{margin:0;font:800 var(--step-1)/1.25 var(--f-display);color:var(--text)}
/* Fixed 3-up variant (GFX Solutions — 6 stats in 2 clean rows) rather than
   auto-fit, which would spread 6 narrow 180px items across as many as 6
   columns on a wide desktop instead of the requested 3x2 block. */
.stats--3col{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.stats--3col{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.stats--3col{grid-template-columns:1fr}}

/* ---------- Process steps (Coatings & Blending intro) ---------- */
.process{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.75rem;
  margin:2.5rem 0 0;padding:2.25rem 0;
  border-top:2px solid var(--ixs-blue);border-bottom:2px solid var(--ixs-blue);
}
.process__num{display:block;font:900 var(--step-2)/1 var(--f-display);color:var(--ixs-blue);margin-bottom:.5rem}
  /* #498ECC 3.49:1 on white — large display numeral (≥24px), passes AA large text */
.process__step h3{margin-bottom:.4rem}
.process__step p{margin:0;font-size:var(--step--1);color:var(--text-muted)}

/* ---------- Charity carousel (GFX Solutions — community contributions) ----------
   Native horizontal scroll-snap rather than a JS slider library: touch and
   trackpad scrolling already work with zero script, and the prev/next
   buttons just nudge scrollLeft. */
.charity-column,.charity-carousel-wrap{min-width:0}  /* without this, the grid item (and its child, if nested further) grows to fit all 79 logos instead of clipping to the column */
.charity-photo{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;margin-bottom:1.5rem}
.charity-carousel__lead{font-weight:700;color:var(--text);margin-bottom:1rem}
.charity-carousel__all{margin-top:1.5rem}
.charity-carousel{
  display:flex;gap:1.25rem;overflow-x:auto;padding:.25rem .25rem .75rem;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
}
.charity-carousel__item{
  flex:0 0 150px;scroll-snap-align:start;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:.6rem;
  text-decoration:none;color:inherit;
}
.charity-carousel__logo{
  width:100%;aspect-ratio:3/2;background:#F4F6F7;border:1px solid var(--card-rule);
  display:grid;place-items:center;padding:.75rem;transition:border-color .2s ease;
}
.charity-carousel__logo img{max-width:100%;max-height:100%;object-fit:contain}
.charity-carousel__item:hover .charity-carousel__logo{border-color:var(--accent-blue-1)}
.charity-carousel__name{font-size:var(--step--1);line-height:1.3;color:var(--text-muted)}
.charity-carousel__item:hover .charity-carousel__name{color:var(--link)}
.charity-carousel__controls{display:flex;gap:.6rem;margin-top:.5rem}
.charity-carousel__btn{
  width:2.25rem;height:2.25rem;display:grid;place-items:center;
  border:1px solid var(--card-rule);background:var(--card);color:var(--text);
  cursor:pointer;font-size:1rem;line-height:1;
}
.charity-carousel__btn:hover{border-color:var(--accent-blue-1);color:var(--link)}

/* ---------- Site map page ---------- */
.sitemap-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2.5rem;margin-top:2.5rem}
.sitemap-grid h3{margin-bottom:1rem}
.sitemap-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.sitemap-grid li{font-size:var(--step--1)}

/* ---------- Feature grid ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;
  margin:2.5rem 0 2.75rem}
.features__item{border-top:3px solid var(--ixs-blue);padding-top:.9rem}
.features__item h3{margin-bottom:.4rem}
.features__item p{margin:0;font-size:var(--step--1);color:var(--text-muted)}
/* Fixed 3-up variant (About IXS — 6 shared functions in 2 clean rows) rather
   than auto-fit, which would spread 6 narrow 220px items across 4-5 columns
   on a wide desktop instead of the requested 3x2 block. */
.features--3col{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.features--3col{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.features--3col{grid-template-columns:1fr}}

/* ---------- Org diagram (corporate page) ----------
   Plain boxes and a arrow — not the 15deg signature device, which is
   reserved for its five specific uses elsewhere on the site. */
.orgdiagram{margin:2.5rem auto 0;max-width:760px;text-align:center}
.orgdiagram__parent{background:var(--ink);color:#fff;padding:1.5rem 1.75rem}
.orgdiagram__parent strong{
  display:block;font-family:var(--f-display);font-weight:900;text-transform:uppercase;
  font-size:var(--step-1);letter-spacing:-.01em;margin-bottom:.6rem;
}
.orgdiagram__functions{
  display:block;font:600 .82rem/1.6 var(--f-ui);color:var(--accent-gray-2);
}
.orgdiagram__arrow{font-size:1.6rem;line-height:1;color:var(--ixs-blue);margin:.7rem 0}
.orgdiagram__children{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.orgdiagram__children span{
  display:block;background:var(--card);border:1px solid var(--card-rule);
  padding:1rem .75rem;font:700 .8rem/1.3 var(--f-ui);text-transform:uppercase;letter-spacing:.03em;
}

/* ---------- Timeline (About IXS — company history) ----------
   A single connected rail rather than repeating marker+h2+paragraphs per
   era: year column left, a line + dot mark each entry, content to the
   right. Grid (not absolute positioning) so item height is content-driven —
   two 2026 entries with different paragraph counts still line up cleanly. */
.timeline{list-style:none;margin:2.5rem 0 0;padding:0}
.timeline__item{
  position:relative;display:grid;grid-template-columns:var(--tl-col,100px) 1fr;
  column-gap:2rem;padding-bottom:2.75rem;
}
.timeline__item:last-child{padding-bottom:0}
.timeline__item::before{  /* connecting line to the next entry */
  content:"";position:absolute;top:.4em;bottom:-2.75rem;
  left:calc(var(--tl-col,100px) + 1rem - 1px);width:2px;background:var(--card-rule);
}
.timeline__item:last-child::before{content:none}
.timeline__item::after{  /* dot on the line */
  content:"";position:absolute;top:.32em;
  left:calc(var(--tl-col,100px) + 1rem - 5px);width:10px;height:10px;
  border-radius:50%;background:var(--ixs-blue);
}
.timeline__year{
  font:900 var(--step-0)/1.2 var(--f-display);color:var(--ixs-blue);padding-top:.1em;
}
.timeline__body h3{margin:0 0 .5rem}
@media (max-width:680px){
  .timeline{--tl-col:64px}
  .timeline__year{font-size:var(--step--1);letter-spacing:0}
}

/* ---------- Policy document (Code of Conduct) ----------
   A single flowing document rather than the marketing-page pattern of one
   marker+h2+alternating-background section per topic — with 24 sections
   that pattern would be repetitive and the content is reference material,
   not a story. h3 (already uppercase/display-font/step-1 via the base h1-h3
   rule) stands in for each policy heading; scroll-margin-top clears the
   sticky header when jumped to from the table of contents. */
.doclayout{display:grid;grid-template-columns:240px 1fr;gap:var(--gap);align-items:start}
.doctoc{position:sticky;top:100px}
.doctoc ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.doctoc li{font-size:var(--step--1);line-height:1.3}
.doctoc a{color:var(--text-muted);text-decoration-thickness:1px}
.doctoc a:hover{color:var(--link)}
.docbody{max-width:66ch}
.docbody h3{margin-top:2.75rem;scroll-margin-top:100px}
.docbody h3:first-of-type{margin-top:0}
.docbody h4{
  font:800 var(--step-0)/1.3 var(--f-display);text-transform:uppercase;
  letter-spacing:-.01em;margin:1.75rem 0 .5em;color:var(--text);
}
.docbody ul{margin:0 0 1.1em;padding-left:1.25em;max-width:66ch}
.docbody li{margin-bottom:.35em}
.doc-meta{color:var(--text-muted);font-size:var(--step--1);margin-bottom:2rem}

/* ---------- Capability list (brand pages) ---------- */
.caplist{list-style:none;margin:1.5rem 0 2rem;padding:0;columns:2;column-gap:2rem}
.caplist--single{columns:1}
.caplist li{break-inside:avoid;margin-bottom:.7rem;padding-left:1.15em;position:relative;
  font-size:var(--step--1)}
.caplist li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:50%;background:var(--ixs-blue)}

/* ---------- Sub-brand cards (brand pages — associated brands, some with no
   page of their own to link to, some now linking straight to a real domain).
   Reuses .brandcard styling from the homepage brand grid; .brandcard--static
   drops the "Read more" row either way, and drops the hover-lift too when
   it's a plain <div> (nothing to click). A single top-bar colour is used
   rather than the three brand blues, since that triplet specifically marks
   the three IXS sister companies elsewhere and these are a different kind
   of brand. */
.subbrands{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;
  margin-top:2.5rem}
/* Specificity here deliberately beats .brandcard:nth-child(n) .brandcard__top
   (used for the homepage's three sister-brand colours) since a static card
   in a 4-up grid still matches those nth-child positions by coincidence. */
.subbrands .brandcard.brandcard--static .brandcard__top{background:var(--ixs-blue)}
div.brandcard--static:hover{transform:none;border-color:var(--card-rule)}
/* No logo supplied yet — same "not supplied" treatment as .imgslot's
   placeholder <div>, sized to the fixed logo tile instead of a photo. */
.brandcard__img-placeholder{
  font:600 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-muted);text-align:center;
}

/* ---------- Image gallery (brand pages) ---------- */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
.gallery__item{
  width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 1.5rem),calc(100% - 2rem) 100%,0 100%);
}

/* ---------- Brand logo link (brand page "Overview" sections) ----------
   No horizontal padding — the logo's left edge must line up flush with the
   marker and body text below it, not sit indented behind a tile. Transparent
   in light theme, since the section background is already white there.
   Dark theme still gets a light backing band: some supplied logos (e.g.
   Ultimate Linings) are bare black wordmarks with no backing shape of their
   own, which disappear against the dark theme's near-black section
   background. */
.overview-logo{display:inline-block;margin-bottom:1.75rem;padding:.75rem 0}
.overview-logo img{max-width:200px;max-height:80px;width:auto;height:auto;display:block}
html[data-theme="dark"] .overview-logo{background:#F4F6F7}
/* Ultimate Linings' wordmark reads small at the shared cap above, so it gets a larger one here. */
.overview-logo--lg img{max-width:280px;max-height:112px}

/* ---------- Statement (homepage "Who we are") ---------- */
.statement{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--gap);align-items:start}
.statement__big{font-size:var(--step-2);font-family:var(--f-display);font-weight:600;
  text-transform:none;letter-spacing:-.01em;line-height:1.22;color:var(--text)}
/* Reused as a large closing statement on dark sections (e.g. About IXS) —
   inherit the section's own white text colour instead of the light-theme
   ink colour baked into the rule above. */
.section--dark .statement__big{color:inherit}

/* ---------- Brand cards (homepage) ---------- */
.brands{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.5rem}
.brandcard{
  background:var(--card);border:1px solid var(--card-rule);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .25s ease,border-color .25s ease;
}
.brandcard:hover{transform:translateY(-5px);border-color:var(--accent-blue-1)}
.brandcard__top{height:6px}
.brandcard:nth-child(1) .brandcard__top{background:var(--accent-blue-1)}
.brandcard:nth-child(2) .brandcard__top{background:var(--accent-blue-2)}
.brandcard:nth-child(3) .brandcard__top{background:var(--ixs-blue)}
/* Logo tile — fixed light background regardless of theme. Two of the three
   supplied brand logos (Ultimate Linings, GFX Solutions) are bare black
   wordmarks with no backing shape of their own, which would fail contrast
   against the dark theme's near-black card background. A constant light
   tile keeps every logo legible without altering the supplied artwork. */
.brandcard__img{
  aspect-ratio:16/9;
  min-height:0; /* flex item's automatic min size otherwise lets a tall logo's
    intrinsic height override aspect-ratio, so the three tiles went uneven */
  background:#F4F6F7;
  display:grid;place-items:center;
  padding:1.5rem;
}
.brandcard__img img{
  max-width:70%;max-height:60%;object-fit:contain;
}
.brandcard__body{padding:1.5rem 1.5rem 1.7rem;flex:1;display:flex;flex-direction:column}
.brandcard__body p{font-size:var(--step--1);color:var(--text-muted)}
.brandcard__body p:last-of-type{flex:1}
.brandcard__body .brandcard__tagline{font-weight:700;color:var(--text);margin-bottom:.5rem}
.brandcard__go{
  font:700 .8rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--link);
  display:inline-flex;align-items:center;gap:.5rem;
}
.brandcard__go::after{content:"";width:8px;height:.95em;background:currentColor;
  transform:skewX(calc(var(--slant) * -1))}
/* Brand cards on a dark section (About IXS closing) must stay a light card
   regardless of the site's own light/dark theme toggle. In dark theme,
   --card resolves to the same near-black value as .section--dark's fixed
   ink background — cards would vanish — and the section's blanket
   h2/h3{color:#fff} rule would whiten text meant to sit on a light card. */
.section--dark .brandcard{background:#FFFFFF;border-color:#DCDFE1}
.section--dark .brandcard h3,
.section--dark .brandcard__tagline{color:var(--ink)}  /* #2E2E2F on #FFF — 13.57:1 PASS AAA */
.section--dark .brandcard__body p{color:#565657}  /* IXS Gray on #FFF — 7.33:1 PASS AAA */
.section--dark .brandcard__go{color:var(--accent-blue-1)}  /* #416AB3 on #FFF — 5.33:1 PASS AA */

/* ---------- Apply directory (careers) ----------
   Four destinations, four separate UKG instances. The parent company
   is marked in IXS Gray; the three brands take the three brand blues
   in the same order used in the site footer. */
.applylist{border-top:1px solid var(--rule);margin-top:2.5rem}
.applyrow{
  --row-hover:#F4F6F7;
  display:grid;grid-template-columns:12px 1fr auto;gap:0 1.6rem;align-items:center;
  border-bottom:1px solid var(--rule);padding:1.8rem .8rem;
  transition:background .2s ease;
}
html[data-theme="dark"] .applyrow{--row-hover:#2A2A2C}
.applyrow:hover{background:var(--row-hover)}
.applyrow__bar{
  width:12px;height:56px;transform:skewX(calc(var(--slant) * -1));
  transition:height .25s ease;
}
.applyrow:hover .applyrow__bar{height:72px}
.applyrow:nth-of-type(1) .applyrow__bar{background:var(--accent-blue-1)}
.applyrow:nth-of-type(2) .applyrow__bar{background:var(--accent-blue-2)}
.applyrow:nth-of-type(3) .applyrow__bar{background:var(--ixs-blue)}
.applyrow h3{margin-bottom:.25rem}
.applyrow__actions{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:flex-end}
.applyrow p{margin:0;font-size:var(--step--1);color:var(--text-muted)}
.ext{
  display:inline-block;width:.62em;height:.62em;margin-left:.15em;
  border:2px solid currentColor;border-left-width:0;border-bottom-width:0;
  transform:rotate(45deg) translateY(.1em);
}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Split blocks ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:center}
.split--flip .split__text{order:2}
.split--top{align-items:start}
/* Used both as a placeholder <div> (photography not yet supplied) and as the
   <img> once it is — the aspect-ratio and clip-path are shared. width/height:100%
   is scoped to the img.imgslot tag selector only: on the plain <div>, an explicit
   height:100% fights aspect-ratio because the grid row's height is auto (sized to
   the tallest sibling), so the placeholder box stretched to match the text column
   instead of staying 4:3. A replaced <img> element needs the explicit box so
   object-fit:cover has something to fill. */
.imgslot{
  aspect-ratio:4/3;
  background:repeating-linear-gradient(105deg,rgba(73,142,204,.16) 0 18px,rgba(65,106,179,.10) 18px 36px),var(--bg-alt);
  display:grid;place-items:center;
  font:600 .72rem/1 var(--f-ui);letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 2.5rem),calc(100% - 3.5rem) 100%,0 100%);
}
img.imgslot{width:100%;height:100%;object-fit:cover;display:block}

/* ---------- Contact strip (homepage) ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.contact--3col{grid-template-columns:1fr 1fr 1fr}
.contact .addr{font-size:var(--step-1);line-height:1.5}
.contact .addr a{color:var(--blue-tint)}   /* 6.28:1 on #2E2E2F — PASS AA */
.deflist{margin:2rem 0 0;display:grid;gap:1.2rem}
.deflist dt{font:700 .78rem/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-gray-1);margin-bottom:.35rem}  /* 5.77:1 on #2E2E2F — PASS AA */
.deflist dd{margin:0}

/* ---------- Contact form ---------- */
.form-notice{max-width:52ch;margin-top:2rem;padding:1rem 1.2rem;border-left:4px solid var(--ixs-gray);
  font:700 .95rem/1.5 var(--f-body)}
.form-notice--success{border-left-color:var(--ixs-blue)}
.contact-form{display:grid;gap:1.4rem;max-width:52ch;margin-top:2rem}
.field{display:grid;gap:.4rem}
.field label{font:700 .78rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-muted)}
.field input,.field textarea{
  font:400 1rem/1.5 var(--f-body);color:var(--text);background:var(--bg);
  border:1px solid var(--rule);padding:.75rem .9rem;
}
.field textarea{resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ixs-blue);outline-offset:2px}

/* ---------- 404 page ---------- */
.notfound{text-align:center;padding-block:7rem}
.notfound .marker{justify-content:center}
.notfound p{margin-inline:auto}
.notfound__code{font:900 clamp(3.5rem,6vw,6rem)/1 var(--f-display);color:var(--ixs-blue);margin-bottom:.2em}
.notfound .btn-row{justify-content:center}

/* ---------- Pending / placeholder note ---------- */
.pending{
  border:1px dashed var(--accent-gray-1);padding:1.5rem 1.7rem;
  font-size:var(--step--1);color:var(--text-muted);max-width:66ch;
}

/* ---------- Footer ---------- */
.foot{background:var(--ink-deep);color:var(--accent-gray-2);padding-block:4rem 0}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:var(--gap)}
.foot h2{font-size:.8rem;font-family:var(--f-ui);font-weight:700;letter-spacing:.18em;
  color:#fff;margin-bottom:1.1rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot a{color:var(--accent-gray-2);text-decoration:none;font-size:var(--step--1)}
.foot a:hover{color:var(--blue-tint);text-decoration:underline}
.addr{font-style:normal}
.foot__legal{
  margin-top:3rem;border-top:1px solid #38383A;padding-block:1.5rem;
  display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;
  font-size:var(--step--1);color:var(--accent-gray-1);
}
.foot__legal nav ul{display:flex;flex-wrap:wrap;gap:1rem 1.6rem}
.foot__copy{margin:0 0 0 auto}  /* #A7A9AC on #1F1F20 — 7.00:1 PASS AA */

/* ---------- Cookie notice — blocks before acceptance ---------- */
.cookie{
  position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:150;
  background:var(--ink);color:var(--accent-gray-2);
  border-top:6px solid transparent;
  border-image:repeating-linear-gradient(105deg,var(--accent-blue-1) 0 10px,var(--ixs-blue) 10px 20px) 6;
  padding:1.4rem 1.6rem;max-width:640px;
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}
.cookie[hidden]{display:none}
.cookie h2{font-size:var(--step-1);color:#fff}
.cookie p{font-size:var(--step--1);margin-bottom:1.1rem}
.cookie__actions{display:flex;flex-wrap:wrap;gap:.6rem}
.cookie .btn{padding:.75rem 1.1rem;font-size:.78rem}
.cookie__prefs{margin:0 0 1.1rem;display:grid;gap:.55rem}
.cookie__prefs label{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1)}
.cookie__prefs [hidden]{display:none}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .statement,.split,.contact,.contact--3col,.brands{grid-template-columns:1fr}
  .split--flip .split__text{order:0}
  .foot__grid{grid-template-columns:1fr 1fr}
  .caplist{columns:1}
  .gallery{grid-template-columns:1fr}
  .orgdiagram__children{grid-template-columns:1fr}
  .doclayout{grid-template-columns:1fr}
  .doctoc{position:static;margin-bottom:2rem}
  .doctoc ul{display:block;columns:2;column-gap:2rem}
  .doctoc li{break-inside:avoid;margin-bottom:.55rem}
}
@media (max-width:820px){
  .burger{display:inline-flex}
  .nav{
    position:fixed;inset:78px 0 auto;background:var(--bg);
    border-bottom:1px solid var(--rule);padding:1rem 1.25rem 1.5rem;
    margin:0;display:none;
  }
  .nav[data-open="true"]{display:block}
  .nav > ul{flex-direction:column;gap:0}
  .nav > ul > li > a{padding:.9rem .2rem;border-bottom:1px solid var(--rule);font-size:1rem}
  /* No hover on touch — the dropdown is always expanded inline instead. */
  .nav__dropdown{
    position:static;opacity:1;visibility:visible;transform:none;
    border:0;background:none;padding:0 0 .5rem 1rem;
  }
  .nav__dropdown a{padding:.6rem .2rem;border-bottom:0;font-size:.92rem;color:var(--text-muted)}
  .tools{margin-left:auto}
}
@media (max-width:680px){
  .applyrow{grid-template-columns:12px 1fr;row-gap:1.1rem}
  .applyrow__actions{grid-column:2;justify-content:flex-start}
  .applyrow__bar{align-self:start;margin-top:.4rem}
  /* Sub-brand cards become a swipeable carousel rather than a stacked list —
     four short cards read better as a horizontal set on a narrow screen. */
  .subbrands{
    display:flex;grid-template-columns:none;overflow-x:auto;gap:1rem;
    margin-top:2rem;padding-bottom:.5rem;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  }
  .subbrands .brandcard{flex:0 0 78%;scroll-snap-align:start}
}
@media (max-width:560px){
  .foot__grid{grid-template-columns:1fr}
  .cookie{left:0;right:0;bottom:0;max-width:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .hero__bar{display:none}
  .hero h1,.hero__lead,.hero .btn-row{opacity:1;transform:none}
  .reveal{opacity:1;transform:none}
  .hero__slide{transition:none}
}