/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
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 */

.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)}
/* TEMPORARY logo (PNG placeholder pending the final SVG). Its mark and
   wordmark are rendered in a fixed dark grey with no light/dark variants of
   their own, so on the always-dark footer and 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. Remove this override when the real SVG (with light/dark
   variants) replaces it. */
.brand__logo{height:44px;width:auto;display:block}
.foot .brand__logo,
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}
.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)}

/* ---------- Feature grid (corporate page — shared functions) ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.75rem;
  margin:2.5rem 0 0}
.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)}

/* ---------- 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;
}

/* ---------- 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 with no page
   of their own to link to). Reuses .brandcard styling from the homepage
   brand grid; .brandcard--static drops the hover-lift and "Read more" row
   since these aren't links. 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)}
.brandcard--static:hover{transform:none;border-color:var(--card-rule)}

/* ---------- 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}

/* ---------- 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)}

/* ---------- 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;
  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))}

/* ---------- 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(--ixs-gray)}
.applyrow:nth-of-type(2) .applyrow__bar{background:var(--accent-blue-1)}
.applyrow:nth-of-type(3) .applyrow__bar{background:var(--accent-blue-2)}
.applyrow:nth-of-type(4) .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}
/* 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 .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 ---------- */
.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}

/* ---------- 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,.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}
}
@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}
}