:root {
    --ink: #351628;
    --paper: #fffaf1;
    --accent: #d7aa48;
    --accent-ink: #805b18;
    --wine: #4b0a31;
    --wine-deep: #2e061f;
    --muted: rgba(255,255,255,.78);
    --nav-h: 72px;
    --bar-h: 38px;
    --font: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  /* the off-canvas mobile menu sits past the right edge, so keep it from widening the page */
  html, body { overflow-x: hidden; max-width: 100%; }
  body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); }
  a { color: inherit; text-decoration: none; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  /* no blue flash box when a phone taps a link or button; :active carries the feedback */
  a, button { -webkit-tap-highlight-color: transparent; }
  /* safety net: an icon SVG never balloons if a size rule is missing; any class rule overrides this (zero specificity) */
  :where(svg:not([width])) { width: 1.25em; height: 1.25em; }

  /* ---------- ANNOUNCEMENT BAR ---------- */
  /* a thin strip above the nav: how to order on one side, how to reach us on the other */
  .topbar {
    position: fixed; inset: 0 0 auto 0; z-index: 51;
    height: var(--bar-h); display: flex; align-items: center;
    padding: 0 clamp(20px, 4vw, 56px);
    background: #0a141c; color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .topbar-inner { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .topbar a { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,.85); transition: color .25s ease; }
  .topbar a:hover { color: var(--accent); }
  .topbar svg { width: 15px; height: 15px; color: var(--accent); flex: 0 0 auto; }
  .topbar-reach { display: flex; align-items: center; gap: 16px; }
  .topbar-sep { width: 1px; height: 15px; background: rgba(255,255,255,.22); }

  /* ---------- NAV ---------- */
  .nav {
    position: fixed; inset: var(--bar-h) 0 auto 0; height: var(--nav-h); z-index: 50;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 56px); color: #fff;
    background: linear-gradient(to bottom, rgba(6,14,20,.55), rgba(6,14,20,0));
    transition: background .3s;
  }
  /* once you scroll past the hero the bar turns white with dark type */
  .nav.solid { background: #fff; box-shadow: 0 2px 16px rgba(14, 26, 36, .12); color: var(--ink); }
  .nav.solid .logo { color: #1c252d; }
  .nav.solid .menu > li > a,
  .nav.solid .menu button.trigger,
  .nav.solid .icon-btn { color: #1c252d; }
  .nav.solid .menu > li > a:hover,
  .nav.solid .menu button.trigger:hover,
  .nav.solid .icon-btn:hover { color: var(--accent); }
  .nav.solid .sub { background: #fff; box-shadow: 0 16px 40px rgba(14, 26, 36, .16); }
  .nav.solid .sub a { color: #1c252d; }
  .nav.solid .sub a:hover { color: var(--accent); }
  .nav.solid .search-field input { color: #1c252d; border-bottom-color: rgba(28, 37, 45, .3); }
  .nav.solid .search-field input::placeholder { color: rgba(28, 37, 45, .45); }
  .nav.solid .search-field input:focus { border-bottom-color: var(--accent); }
  .nav.solid .search-results { background: #fff; box-shadow: 0 18px 44px rgba(14, 26, 36, .18); }
  .nav.solid .search-results li > * { color: #1c252d; }
  .nav.solid .search-results li > *:hover, .nav.solid .search-results li > *:focus-visible { background: #f2f5f7; color: var(--accent); }
  .nav.solid .search-results .sr-where { color: #6b7780; }
  .nav.solid .search-results .sr-empty { color: #6b7780; }
  .nav.solid .search-results .sr-empty:hover { background: none; color: #6b7780; }
  .logo { font-weight: 700; font-size: clamp(22px, 2vw, 28px); letter-spacing: .04em; white-space: nowrap; }
  .logo span { color: var(--accent); }
  /* the menu is pushed over to the right, with the search sitting after it */
  .nav > nav { margin-left: auto; margin-right: clamp(20px, 3vw, 48px); }
  .menu { display: flex; align-items: center; gap: clamp(26px, 3.4vw, 56px); list-style: none; margin: 0; padding: 0; }
  .menu > li { position: relative; }
  .menu a, .menu button.trigger {
    font: inherit; font-size: clamp(14px, 1.15vw, 17px); font-weight: 400; color: #fff; background: none; border: 0;
    padding: 10px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  }
  .menu a:hover, .menu button.trigger:hover { color: var(--accent); }
  .caret { width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
  .has-sub[aria-expanded="true"] .caret,
  li.open > button .caret { transform: rotate(225deg) translateY(-2px); }
  .sub {
    position: absolute; top: 100%; left: -16px; min-width: 190px; padding: 10px 0; margin: 0; list-style: none;
    background: rgba(10,22,32,.96); border-radius: 6px; box-shadow: 0 16px 40px rgba(0,0,0,.35);
    opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s, transform .2s, visibility .2s;
  }
  li.open > .sub, li:hover > .sub { opacity: 1; visibility: visible; transform: none; }
  .sub a { display: block; padding: 10px 20px; width: 100%; font-size: 15px; }
  .nav-actions { display: flex; align-items: center; gap: 4px; }

  /* Search: an icon that slides open into a field */
  .search { position: relative; display: flex; align-items: center; }
  .search-field { width: 0; overflow: hidden; transition: width .38s cubic-bezier(.2,.7,.3,1); }
  .search.open .search-field { width: clamp(170px, 20vw, 260px); }
  .search-field input {
    width: 100%; padding: 8px 6px; font: inherit; font-size: 14px; font-weight: 300; color: #fff;
    background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0;
  }
  .search-field input::placeholder { color: rgba(255,255,255,.5); }
  .search-field input:focus { outline: none; border-bottom-color: var(--accent); }
  .search-field input::-webkit-search-cancel-button { display: none; }
  .search-toggle .ico-close { display: none; }
  .search.open .search-toggle .ico-find { display: none; }
  .search.open .search-toggle .ico-close { display: block; }
  .search-toggle:hover { color: var(--accent); }

  .search-results {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
    width: clamp(240px, 26vw, 320px); max-height: 340px; overflow-y: auto;
    margin: 0; padding: 6px 0; list-style: none;
    background: rgba(10,22,32,.97); border-radius: 6px; box-shadow: 0 18px 44px rgba(0,0,0,.4);
    display: none;
  }
  .search-results.show { display: block; }
  .search-results li > * {
    display: block; width: 100%; padding: 10px 16px; font: inherit; font-size: 13px; text-align: left;
    background: none; border: 0; color: #fff; cursor: pointer;
  }
  .search-results li > *:hover, .search-results li > *:focus-visible { background: rgba(255,255,255,.08); color: var(--accent); }
  .search-results .sr-where { display: block; margin-top: 3px; font-size: 11px; font-weight: 300; color: rgba(255,255,255,.55); }
  .search-results .sr-empty { color: rgba(255,255,255,.6); cursor: default; }
  .search-results .sr-empty:hover { background: none; color: rgba(255,255,255,.6); }
  .icon-btn { background: none; border: 0; color: #fff; cursor: pointer; padding: 8px; display: grid; place-items: center; }
  .burger { display: none; }

  /* ---------- HERO ---------- */
  .hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; color: #fff; background: #0a141c; }
  .slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
  .slide.active { opacity: 1; }
  .slide video, .slide .fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  /* Fallback art shows until you drop real videos in (see data-src on each slide) */
  .s1 .fallback { background: radial-gradient(120% 90% at 75% 20%, #6aa07a 0%, #35564a 45%, #16261f 100%); }
  .s2 .fallback { background: radial-gradient(110% 90% at 30% 30%, #7d93a8 0%, #3d5568 50%, #142230 100%); }
  .s3 .fallback { background: radial-gradient(110% 90% at 70% 60%, #4b67c9 0%, #26356e 50%, #0f1533 100%); }
  .s4 .fallback { background: radial-gradient(110% 90% at 30% 70%, #d9d6c8 0%, #8c9a7d 45%, #2e3d2c 100%); }

  /* Legibility layer: solid on the text side, lighter on the far side */
  .hero::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6,14,20,.78) 0%, rgba(6,14,20,.5) 42%, rgba(6,14,20,.12) 100%),
      linear-gradient(0deg, rgba(6,14,20,.6) 0%, rgba(6,14,20,0) 35%);
  }
  .hero-inner {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center;
    /* the foot keeps clear of the stage tracker parked along the bottom */
    padding: calc(var(--nav-h) + var(--bar-h)) clamp(20px, 4vw, 56px) clamp(96px, 13vh, 128px);
  }
  .hero h1 {
    margin: 0 0 22px; max-width: 24ch; font-weight: 600; line-height: 1.08;
    font-size: clamp(34px, 5.4vw, 72px); letter-spacing: -.02em;
  }
  .hero-title-nowrap { white-space: nowrap; font-size: min(1em, 7vw); }
  .hero p { margin: 0 0 32px; max-width: 46ch; font-size: clamp(15px, 1.35vw, 18px); line-height: 1.65; color: var(--muted); font-weight: 300; }

  /* short windows (a laptop with the browser bars showing): the headline scales
     back so the copy and button still fit above the tracker */
  @media (min-width: 641px) and (max-height: 860px) {
    .hero h1 { margin-bottom: 16px; font-size: clamp(32px, 4.4vw, 54px); }
    .hero p { margin-bottom: 24px; font-size: clamp(14px, 1.15vw, 16px); }
  }
  @media (min-width: 641px) and (max-height: 700px) {
    .hero h1 { font-size: clamp(28px, 3.6vw, 42px); }
    .hero p { margin-bottom: 18px; }
  }

  /* phones: the headline was eating most of the screen, so it steps down, and the
     hero stops short of full height so the next section shows and invites a scroll */
  @media (max-width: 640px) {
    .hero { height: 88svh; }
    .hero h1 { margin-bottom: 16px; max-width: 18ch; font-size: clamp(25px, 7.2vw, 34px); line-height: 1.16; }
    .hero p { margin-bottom: 26px; max-width: 34ch; font-size: 13.5px; line-height: 1.65; }
  }
  @media (max-width: 380px) {
    .hero h1 { font-size: 23px; }
  }
  .cta {
    align-self: flex-start; display: inline-block; padding: 14px 28px; border-radius: 999px;
    background: var(--accent); color: #04121b; font-weight: 600; font-size: 14px; transition: background .2s, transform .2s;
  }
  .cta:hover { background: #fff; }

  /* Step tracker: says which stage the footage shows, and is the slide control */
  .tracker {
    position: absolute; z-index: 3; left: clamp(20px, 4vw, 56px); right: clamp(20px, 4vw, 56px); bottom: 34px;
    display: flex; align-items: flex-end; gap: 14px;
  }
  .steps { display: flex; gap: 12px; flex: 1; max-width: 640px; }
  .step { flex: 1; background: none; border: 0; padding: 0; text-align: left; color: rgba(255,255,255,.65); cursor: pointer; font: inherit; }
  .step .label { display: block; font-size: 13px; margin-bottom: 9px; }
  .step .bar { display: block; height: 3px; background: rgba(255,255,255,.28); border-radius: 2px; overflow: hidden; }
  .step .bar i { display: block; height: 100%; width: 0; background: #fff; }
  .step.active { color: #fff; }
  .step.done .bar i { width: 100%; }
  .step.active .bar i { animation: fill var(--dur, 6s) linear forwards; }
  .paused .step.active .bar i { animation-play-state: paused; }
  @keyframes fill { to { width: 100%; } }
  .pause { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(6,14,20,.35); color: #fff; cursor: pointer; display: grid; place-items: center; }
  .pause:hover { background: rgba(255,255,255,.2); }
  .pause .play { display: none; }
  .paused .pause .play { display: block; }
  .paused .pause .pausei { display: none; }

  .scroll { position: absolute; z-index: 3; right: clamp(20px, 4vw, 56px); bottom: 38px; display: grid; justify-items: center; gap: 8px; font-size: 12px; color: #fff; }
  .scroll .mouse { width: 22px; height: 34px; border: 1.5px solid #fff; border-radius: 12px; position: relative; }
  .scroll .mouse::after { content: ""; position: absolute; left: 50%; top: 6px; width: 3px; height: 7px; margin-left: -1.5px; border-radius: 2px; background: #fff; animation: wheel 1.8s infinite; }
  @keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 80%, 100% { opacity: 0; transform: translateY(12px); } }

  .about {
    background: #f4f4f4;
    padding: clamp(56px, 7vw, 92px) clamp(20px, 4vw, 56px) clamp(32px, 4vw, 52px);
  }
  /* heading and its one-line summary on the left, the full story on the right */
  .about-grid {
    max-width: 1100px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(260px, 38%) 1fr;
    gap: clamp(28px, 5vw, 80px); align-items: start;
  }
  .about h2 {
    margin: 0 0 18px;
    font-weight: 600;
    font-size: clamp(28px, 3.4vw, 44px);
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.1;
  }
  .about .lead {
    margin: 0;
    max-width: 30ch;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.7;
    color: #4a5560;
  }
  .about .body {
    margin: 0;
    max-width: 60ch;
    text-align: justify;
    hyphens: auto; -webkit-hyphens: auto;
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.85;
    color: #5b6670;
    font-weight: 300;
  }
  .pillars {
    list-style: none;
    margin: clamp(28px, 3.4vw, 48px) auto 0;
    text-align: center;
    padding: 0;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }
  .pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
  }
  /* hover lifts the icon and the line under it — no card, no shadow behind them */
  .pillar svg {
    width: 68px; height: 68px;
    transition: transform .4s cubic-bezier(.2,.7,.3,1);
    animation: pillar-float 3.4s ease-in-out infinite;
  }
  /* each icon starts at a different point of the float, so they never move as one */
  .pillar:nth-child(2) svg { animation-delay: .5s; }
  .pillar:nth-child(3) svg { animation-delay: 1s; }
  .pillar h3 {
    margin: 0;
    max-width: 22ch;
    font-size: clamp(14px, 1.15vw, 16px);
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .04em;
    color: #1c252d;
    transition: transform .4s cubic-bezier(.2,.7,.3,1), color .3s ease;
  }
  .pillar:hover svg, .pillar:focus-within svg { animation: none; transform: translateY(-8px); }
  .pillar:hover h3, .pillar:focus-within h3 { transform: translateY(-6px); }

  @media (max-width: 900px) {
    /* the two columns stack before they get too narrow to read */
    .about-grid { grid-template-columns: 1fr; gap: 20px; }
    .about .lead { max-width: 60ch; }
    .pillars { max-width: 940px; gap: 24px; }
    .pillar { padding: 16px 6px; gap: 12px; }
    .pillar svg { width: 48px; height: 48px; }
    /* equal height under each icon, whether the title wraps or not */
    .pillar h3 { max-width: none; min-height: 2.8em; font-size: 13.5px; }
  }

  /* phones: the row stays three across, so the section tightens up to stay short */
  @media (max-width: 640px) {
    .about { padding: clamp(52px, 12vw, 72px) 20px; }
    .about h2 { margin-bottom: 18px; }
    .about .lead { font-size: 13.5px; }
    .about .body { font-size: 14px; line-height: 1.75; }
    /* three across even on a phone, so everything shrinks to fit the row */
    .pillars { margin-top: 30px; gap: 10px; }
    .pillar { gap: 10px; padding: 10px 2px; }
    .pillar svg { width: 38px; height: 38px; }
    .pillar h3 { max-width: none; font-size: 11.5px; line-height: 1.35; letter-spacing: .02em; }
  }

  @media (prefers-reduced-motion: reduce) {
    .pillar svg, .pillar h3 { transition: none; animation: none; }
    .pillar:hover svg, .pillar:hover h3 { transform: none; }
  }

  /* ---------- FULL FAMILY CLOTHING ---------- */
  .wrap { max-width: 1200px; margin: 0 auto; }

  /* ---------- PRODUCTION PROCESS ---------- */
  .process { background: #f4f4f4; padding: clamp(64px, 9vw, 120px) clamp(20px, 4vw, 56px); }
  .process h2 { margin: 0 0 14px; font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; text-transform: uppercase; }
  .process .intro { margin: 0 0 clamp(40px, 6vw, 76px); max-width: 60ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: #5b6670; font-weight: 300; }

  /* Stage gallery: the middle photo is big and sharp, its neighbours sit back */
  .gal { --slide: clamp(300px, 30%, 480px); --gap: 12px; --small: .75; }
  .gal-viewport {
    position: relative; overflow: hidden;
    margin: 0 calc(clamp(20px, 4vw, 56px) * -1);
    padding: 0;
  }
  .gal-track { display: flex; gap: var(--gap); will-change: transform; transition: transform .45s cubic-bezier(.3,.7,.25,1); }
  .gal-slide {
    position: relative; flex: 0 0 var(--slide); margin: 0; overflow: hidden; cursor: pointer;
    background: #0a141c;
    /* off-centre photos sit back and fade; the negative margin soaks up the
       space the scale-down leaves behind, so the row stays tight */
    transform: scale(var(--small)); opacity: .38;
    margin: 0 calc(var(--slide) * (var(--small) - 1) / 2);
    transition: transform .45s cubic-bezier(.3,.7,.25,1), margin .45s cubic-bezier(.3,.7,.25,1),
                opacity .45s ease, box-shadow .45s ease;
  }
  .gal-track.no-anim, .gal-track.no-anim .gal-slide { transition: none !important; }
  .gal-slide img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
  .gal-slide.is-on { transform: scale(1); opacity: 1; margin: 0; box-shadow: 0 26px 60px rgba(14, 26, 36, .28); }
  .gal-cap {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: clamp(60px, 9vw, 110px) clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 30px);
    color: #fff; text-align: left;
    background: linear-gradient(to top, rgba(6,14,20,.94), rgba(6,14,20,.62) 45%, rgba(6,14,20,0));
    opacity: 0; transition: opacity .5s ease;
  }
  .gal-slide.is-on .gal-cap { opacity: 1; }
  .gal-cap h3 {
    margin: 0 0 9px; font-size: clamp(16px, 1.7vw, 24px); font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
  }
  .gal-cap h3 span { margin-right: 12px; color: var(--accent); font-weight: 700; }
  .gal-cap p {
    margin: 0; max-width: 58ch; font-size: clamp(12.5px, 1.05vw, 15px); font-weight: 300;
    line-height: 1.6; color: rgba(255,255,255,.86);
  }



  @media (max-width: 1100px) {
    .gal { --slide: clamp(300px, 62%, 560px); }
  }
  @media (max-width: 640px) {
    .process { padding: clamp(48px, 11vw, 64px) 20px; }
    .process .intro { margin-bottom: 26px; font-size: 13.5px; line-height: 1.65; }
    .gal { --slide: 86%; --gap: 8px; }
    .gal-cap { padding: 44px 16px 16px; }
    .gal-cap h3 { margin-bottom: 6px; font-size: 15px; letter-spacing: .06em; }
    .gal-cap h3 span { margin-right: 8px; }
    .gal-cap p { font-size: 12.5px; line-height: 1.55; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gal-track, .gal-slide { transition: none; }
  }


  /* ---------- WHAT WE MAKE, second take: photo tiles ---------- */
  .tiles { background: #fff; padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(56px, 8vw, 100px); }
  .tiles h2 { margin: 0 0 14px; font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; text-transform: uppercase; }
  .tiles .intro { margin: 0 0 clamp(34px, 4.6vw, 58px); max-width: 60ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: #5b6670; font-weight: 300; }

  /* one tall tile on the left, the rest stacked beside it */
  .tile-grid {
    display: grid; gap: clamp(10px, 1vw, 16px);
    grid-template-columns: 1.12fr 1fr;
    grid-auto-rows: clamp(150px, 15vw, 220px);
  }
  /* four fixed places; clicking a tile swaps its place with the big one */
  .tile-grid > .slot-0 { grid-column: 1; grid-row: 1 / span 3; order: 0; }
  .tile-grid > .slot-1 { grid-column: 2; grid-row: 1; order: 1; }
  .tile-grid > .slot-2 { grid-column: 2; grid-row: 2; order: 2; }
  .tile-grid > .slot-3 { grid-column: 2; grid-row: 3; order: 3; }

  .tile { position: relative; overflow: hidden; background: var(--wine-deep); }
  .tile img, .tile-media {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    object-position: 50% 26%;
    filter: saturate(.9) contrast(1.04);   /* evens out photos shot in different light */
    transition: transform .9s cubic-bezier(.2,.7,.3,1);
  }
  .tile-lead img { object-position: 50% 34%; }
  .tile-school:not(.tile-lead) img { object-position: 50% 0%; transform: translateX(-3%) scale(1.08); }
  .tile-school:not(.tile-lead):hover img,
  .tile-school:not(.tile-lead):focus-within img { transform: translateX(-3%) scale(1.12); }
  .tile-school.tile-lead img { object-position: 50% 34%; }
  /* the denim photo has a lot of sky on top, so aim the crop at the jackets */
  .tile-denim img { object-position: 50% 50%; }
  .tile-denim.tile-lead img { object-position: 50% 45%; }
  /* in the short tile, aim at the shirt and the logo close-up */
  .tile-workwear:not(.tile-lead) img { object-position: 50% 15%; }
  .tile-workwear.tile-lead img { object-position: 50% 50%; }
  /* knitwear is a 2x2 grid: the short tile shows the top row, the tall one all four */
  .tile-knit:not(.tile-lead) img { object-position: 50% 12%; }
  .tile-knit.tile-lead img { object-position: 50% 50%; }
  /* uniforms: keep the faces and shirts in the short tile */
  .tile-uniform:not(.tile-lead) img { object-position: 50% 18%; }
  .tile-uniform.tile-lead img { object-position: 50% 40%; }
  .tile::after {
    content: ""; position: absolute; inset: 0;
    /* wine wash in the site colours, so the four photos read as one set */
    background: linear-gradient(to top, rgba(46,6,31,.94), rgba(46,6,31,.62) 34%, rgba(75,10,49,.14) 72%, rgba(75,10,49,.04));
    transition: opacity .5s ease;
  }
  /* short tiles carry their text on the left, so the wash comes from that side */
  .tile:not(.tile-lead)::after {
    background: linear-gradient(to right, rgba(46,6,31,.93), rgba(46,6,31,.7) 38%, rgba(75,10,49,.12) 72%, rgba(75,10,49,.04));
  }
  .tile:hover img, .tile:hover .tile-media, .tile:focus-within img, .tile:focus-within .tile-media { transform: scale(1.06); }
  .tile:hover::after, .tile:focus-within::after { opacity: .88; }

  .tile-pick {
    position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0;
    border: 0; background: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  }
  .tile-pick:focus-visible { outline: 2px solid var(--accent); outline-offset: -6px; }
  .tile-lead .tile-pick { cursor: default; }

  .tile-body {
    position: relative; z-index: 3; height: 100%; pointer-events: none;
    display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
    padding: clamp(20px, 2.4vw, 34px); color: #fff;
  }
  .tile-body h3 {
    margin: 0 0 8px; font-size: clamp(15px, 1.35vw, 19px); font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
  }
  .tile-lead .tile-body h3 { font-size: clamp(18px, 1.9vw, 26px); }
  .tile-body p {
    margin: 0; max-width: 42ch; font-size: clamp(12.5px, 1vw, 14.5px); font-weight: 300;
    line-height: 1.6; color: rgba(255,255,255,.86);
  }
  .tile-btn {
    pointer-events: auto;
    margin-top: clamp(14px, 1.6vw, 22px); padding: 11px 22px;
    border: 1px solid rgba(255,255,255,.7); font-size: 11.5px; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: #fff;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
  }
  .tile-btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }

  .tile-grid.is-morph .tile,
  .tile-grid.is-morph .tile img { transition: transform .62s cubic-bezier(.22,.72,.24,1); }
  .tile-grid.is-morph .tile:hover img { transform: none; }
  .tile-grid.is-set .tile,
  .tile-grid.is-set .tile img { transition: none; }
  .tile-grid.is-morph .tile-body { opacity: 0; transition: opacity .16s ease; }
  .tile-body { transition: opacity .35s ease .12s; }

  /* tablets: the tall-tile layout gives way to a plain two-across grid */
  @media (max-width: 860px) {
    .tile-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto; }
    .tile-grid > .tile { grid-column: auto; grid-row: auto; }
    .tile, .tile-lead { aspect-ratio: 3 / 2; }
    .tile-lead .tile-body h3 { font-size: clamp(15px, 1.35vw, 19px); }
    /* every card here carries its text at the foot, so the wash comes up from the bottom */
    .tile:not(.tile-lead)::after {
      background: linear-gradient(to top, rgba(46,6,31,.94), rgba(46,6,31,.62) 34%, rgba(75,10,49,.14) 72%, rgba(75,10,49,.04));
    }
  }

  /* the arrows belong to the phone row, so they stay out of the way elsewhere */
  .tile-stage { position: relative; }
  .tile-nav { display: none; }
  /* no chrome around them: just the mark, kept readable by a soft drop shadow */
  .tile-arrow {
    width: 44px; height: 44px; display: grid; place-items: center;
    border: none; background: none; padding: 0;
    color: #fff; cursor: pointer;
    filter: drop-shadow(0 2px 6px rgba(6, 14, 20, .75));
    transition: opacity .25s ease;
  }
  .tile-arrow svg { width: 26px; height: 26px; stroke-width: 2.4; }

  /* they drift in and out a little, so it reads as "there is more this way" */
  .tile-arrow[data-dir="-1"] { animation: arrow-nudge-back 1.9s ease-in-out infinite; }
  .tile-arrow[data-dir="1"] { animation: arrow-nudge-on 1.9s ease-in-out infinite; }
  .tile-arrow:active { animation: none; opacity: .6; }
  .tile-arrow[disabled] { opacity: .35; }

  @keyframes arrow-nudge-back {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-5px); }
  }
  @keyframes arrow-nudge-on {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(5px); }
  }

  /* phones: the four tiles become one swipeable row of equal cards */
  @media (max-width: 640px) {
    .tiles { padding: clamp(48px, 11vw, 64px) 20px; }
    .tiles h2 { margin-bottom: 10px; }
    .tiles .intro { margin-bottom: 16px; font-size: 13.5px; line-height: 1.65; }

    /* the desktop tile-swap has no meaning here, and its invisible button was
       stealing taps and resetting the row's scroll */
    .tile-pick { display: none; }

    /* one arrow on each edge of the card, sitting over the photo */
    .tile-nav {
      position: absolute; inset: 0; z-index: 4;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 10px; pointer-events: none;
    }
    .tile-arrow { pointer-events: auto; }

    .tile-grid {
      display: flex; gap: 0;
      grid-template-columns: none; grid-auto-rows: auto;
      overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory;
      padding-right: 0;
      scrollbar-width: none; -ms-overflow-style: none;
    }
    .tile-grid::-webkit-scrollbar { display: none; }

    /* every card the same size, whichever slot it happens to hold */
    .tile-grid > .tile,
    .tile-grid > .tile-lead {
      flex: 0 0 100%; width: 100%; aspect-ratio: 1 / 1;
      grid-column: auto; grid-row: auto; scroll-snap-align: start;
      /* the desktop slot order must not survive here, or the copies interleave
         with the originals and the last card gets pushed out of reach */
      order: 0;
    }

    .tile-body { padding: 18px 16px; }
    .tile-body h3, .tile-lead .tile-body h3 { margin: 0 0 6px; font-size: 14px; letter-spacing: .12em; line-height: 1.35; }
    .tile-body p { display: block; font-size: 12.5px; line-height: 1.55; }
    .tile-btn { margin-top: 12px; padding: 9px 16px; font-size: 10.5px; letter-spacing: .12em; }
  }
  @media (hover: none) {
    .tile img { transition: none; }
  }


  /* ---------- IMPACTS ---------- */
  .impact { background: #f4f4f4; padding: 0 0 clamp(56px, 8vw, 100px); }
  .impact-banner {
    position: relative; display: grid; place-items: center;
    min-height: clamp(260px, 32vw, 420px);
    padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px) clamp(90px, 10vw, 140px);
    background: #0a141c url("images/facility-exterior.jpg") center / cover no-repeat;
  }
  .impact-banner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(6,14,20,.55), rgba(6,14,20,.35) 45%, rgba(6,14,20,.6));
  }
  .impact-banner h2 {
    position: relative; z-index: 1; margin: 0; color: #fff; text-align: center;
    font-weight: 700; font-size: clamp(38px, 7vw, 86px); letter-spacing: .06em; text-transform: uppercase;
  }
  .impact-card {
    position: relative; z-index: 2; list-style: none;
    width: min(1240px, calc(100% - clamp(24px, 5vw, 56px)));
    margin: clamp(-140px, -10vw, -80px) auto 0;
    padding: clamp(60px, 7vw, 104px) clamp(32px, 4.5vw, 72px);
    background: #fff; box-shadow: 0 30px 80px rgba(14, 26, 36, .18);
    display: grid; grid-template-columns: repeat(3, 1fr);
    column-gap: clamp(32px, 5vw, 76px); row-gap: clamp(52px, 6.5vw, 88px);
  }
  .impact-card li { display: grid; grid-template-columns: 46px 1fr; gap: 20px; align-items: center; }
  .impact-card svg {
    width: 46px; height: 46px; color: var(--accent);
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
    animation: impact-float 3.2s ease-in-out infinite;
  }
  .impact-card li:nth-child(2) svg { animation-delay: .35s; }
  .impact-card li:nth-child(3) svg { animation-delay: .7s; }
  .impact-card li:nth-child(4) svg { animation-delay: 1.05s; }
  .impact-card li:nth-child(5) svg { animation-delay: 1.4s; }
  .impact-card li:nth-child(6) svg { animation-delay: 1.75s; }
  /* hover hands the icon over from the drift to the lift */
  .impact-card li:hover svg { animation: none; }
  .impact-card li:hover svg { transform: scale(1.14) rotate(-3deg); }

  /* scroll reveal: the class is added by script.js, so the card still shows without JS */
  .impact-card.js-reveal { opacity: 0; transform: translateY(32px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
  .impact-card.js-reveal.is-in { opacity: 1; transform: none; }
  .impact-card.js-reveal li { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1); transition-delay: calc(var(--i, 0) * 90ms + 180ms); }
  .impact-card.js-reveal.is-in li { opacity: 1; transform: none; }
  .impact-card strong { display: block; font-size: clamp(20px, 2.1vw, 30px); font-weight: 600; color: #1c252d; letter-spacing: .01em; line-height: 1.15; }
  .impact-card span { display: block; margin-top: 7px; font-size: clamp(13px, 1.05vw, 15px); font-weight: 300; line-height: 1.45; color: #5b6670; }

  @media (max-width: 860px) {
    .impact-card { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 520px) {
    .impact-card { grid-template-columns: repeat(2, 1fr); }
  }

  /* phones: the banner is shallower, the photo is pulled to its busier half, and
     the card below stops eating the screen */
  @media (max-width: 640px) {
    .impact { padding-bottom: clamp(40px, 9vw, 56px); }
    .impact-banner {
      min-height: 200px;
      padding: 40px 20px 78px;
      background-position: 60% 45%;
    }
    .impact-banner h2 { font-size: clamp(30px, 9vw, 40px); letter-spacing: .05em; }
    /* three across, two rows: the icon sits over its number so each one fits */
    .impact-card {
      width: calc(100% - 28px);
      margin-top: -54px;
      padding: 30px 16px;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 10px; row-gap: 26px;
    }
    .impact-card li {
      grid-template-columns: 1fr;
      /* fixed rows and a top alignment, so icons, numbers and labels each line up
         across the row no matter how many lines a label runs to */
      grid-template-rows: 28px auto;
      align-items: start; align-content: start;
      justify-items: center; text-align: center; gap: 9px;
    }
    .impact-card svg { width: 28px; height: 28px; }
    .impact-card strong { font-size: 15px; line-height: 1.2; }
    .impact-card span { margin-top: 3px; font-size: 9.5px; line-height: 1.3; letter-spacing: .01em; }
  }

  .family { background: #fff; padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 56px) clamp(56px, 8vw, 100px); }
  .family h2 { margin: 0 0 14px; font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; text-transform: uppercase; }
  .family .intro { margin: 0 0 clamp(28px, 4vw, 48px); max-width: 60ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.7; color: #5b6670; font-weight: 300; }

  /* Product showcase: big image on the left, list on the right */
  .showcase { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
  .showcase-stage { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #0a141c; }
  .sc-img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 5s ease;
  }
  .sc-img.is-on { opacity: 1; transform: scale(1); }

  .showcase-list { list-style: none; margin: 0; padding: 0; }
  .showcase-list li + li { border-top: 1px solid #e6e6e6; }
  .sc-item {
    width: 100%; display: grid; gap: 10px; padding: clamp(16px, 2.2vw, 26px) 0;
    font: inherit; text-align: left; background: none; border: 0; cursor: pointer;
    color: #9aa3ab; transition: color .25s ease;
  }
  .sc-item:hover { color: #1c252d; }
  .sc-item.is-on { color: #1c252d; }
  .sc-name { font-size: clamp(17px, 1.9vw, 25px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: currentColor; }
  .sc-note {
    max-width: 42ch; font-size: 14px; font-weight: 300; line-height: 1.65; color: #5b6670;
    max-height: 0; opacity: 0; overflow: hidden; transition: max-height .35s ease, opacity .3s ease;
  }
  .sc-item.is-on .sc-note { max-height: 80px; opacity: 1; }
  .sc-bar { display: block; height: 2px; background: #e6e6e6; overflow: hidden; opacity: 0; transition: opacity .25s; }
  .sc-item.is-on .sc-bar { opacity: 1; }
  .sc-bar i { display: block; height: 100%; width: 0; background: var(--accent); }
  .sc-item.is-on .sc-bar i { animation: scfill var(--sc-dur, 4500ms) linear forwards; }
  .showcase.is-paused .sc-item.is-on .sc-bar i { animation-play-state: paused; }
  @keyframes scfill { to { width: 100%; } }

  @media (max-width: 860px) {
    .showcase { grid-template-columns: 1fr; gap: 24px; }
    .showcase-stage { aspect-ratio: 3 / 4; }
    .sc-note { max-height: none; opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sc-img { transition: opacity .01s; transform: none; }
    .sc-item.is-on .sc-bar i { animation: none; width: 100%; }
  }

  /* Quality block, sits inside the "what we make" section */
  .esg-grid {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 90px); align-items: center;
    margin-top: clamp(48px, 7vw, 92px); padding-top: clamp(40px, 5vw, 66px);
    border-top: 1px solid #e6e6e6;
  }
  .esg-grid h2 { margin: 0; font-weight: 600; font-size: clamp(26px, 3vw, 40px); line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; }
  .esg-grid p { margin: 0 0 22px; max-width: 52ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
  .text-link { display: inline-block; font-size: 14px; font-weight: 600; padding-bottom: 4px; border-bottom: 1.5px solid var(--accent); }
  .text-link:hover { color: var(--accent); }

  @media (max-width: 720px) {
    .tiles { grid-template-columns: repeat(2, 1fr); }
    .esg-grid { grid-template-columns: 1fr; }
  }

  /* ---------- SERVICES ---------- */
  /* left column holds the copy; the rail of photos runs off the right edge */
  .svc { background: #f5f7f8; overflow: hidden; padding-bottom: clamp(48px, 7vw, 96px); }
  .svc-inner {
    display: grid; grid-template-columns: minmax(280px, 33%) 1fr;
    gap: clamp(24px, 4vw, 72px); align-items: center;
  }

  .svc-lead { max-width: 40ch; padding: clamp(48px, 7vw, 96px) 0 0 clamp(20px, 5vw, 80px); }
  .svc-lead h2 { margin: 0 0 22px; font-weight: 600; font-size: clamp(32px, 4.4vw, 58px); letter-spacing: .04em; text-transform: uppercase; color: #1c252d; }
  .svc-lead p { margin: 0; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300; }

  .svc-rail {
    display: flex; gap: clamp(10px, 0.9vw, 14px);
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .svc-rail::-webkit-scrollbar { display: none; }
  .svc-rail:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

  .svc-card {
    position: relative; flex: 0 0 auto;
    width: clamp(230px, 23vw, 360px); height: clamp(360px, 29vw, 470px);
    overflow: hidden; background: #0a141c; cursor: pointer;
    transition: width .65s cubic-bezier(.2,.7,.3,1);
  }
  .svc-card img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .9s cubic-bezier(.2,.7,.3,1), filter .5s ease;
  }
  /* just enough shade at the foot of the card to hold the title */
  .svc-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(6,14,20,.72) 6%, rgba(6,14,20,.16) 44%, rgba(6,14,20,0) 70%);
  }
  /* hovering drops a wash over the photo, so the copy underneath reads cleanly */
  .svc-card::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: rgba(6, 14, 20, .34); opacity: 0;
    transition: opacity .45s ease;
  }
  .svc-card:hover::before,
  .svc-card:focus-within::before,
  .svc-card.is-open::before { opacity: 1; }
  .svc-card:hover img { transform: scale(1.04); }

  /* clicked: the card opens out and the copy comes up under the title */
  .svc-card.is-open { width: clamp(300px, 36vw, 540px); }
  .svc-card.is-open img { transform: scale(1.08); }

  .svc-card-body { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; padding: clamp(24px, 2.6vw, 42px); color: #fff; }
  .svc-card-body h3 {
    margin: 0; font-size: clamp(19px, 1.9vw, 27px); font-weight: 700;
    letter-spacing: .05em; text-transform: uppercase; line-height: 1.2;
  }
  .svc-card-body p {
    margin: 0; max-width: 38ch;
    font-size: clamp(14.5px, 1.15vw, 17px); line-height: 1.6; font-weight: 300; color: #eef2f5;
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .55s cubic-bezier(.2,.7,.3,1), opacity .45s ease, margin-top .55s ease;
  }
  /* the copy comes up on hover, and stays up once the card is opened */
  .svc-card:hover .svc-card-body p,
  .svc-card:focus-within .svc-card-body p,
  .svc-card.is-open .svc-card-body p { max-height: 9em; opacity: 1; margin-top: 14px; }

  @media (max-width: 900px) {
    .svc-inner { grid-template-columns: 1fr; gap: 0; }
    .svc-lead { padding: clamp(48px, 9vw, 72px) clamp(20px, 5vw, 40px) clamp(28px, 5vw, 40px); }
    .svc-card { width: clamp(210px, 62vw, 290px); height: clamp(270px, 68vw, 330px); }
    .svc-card.is-open { width: clamp(270px, 80vw, 360px); }
  }

  /* phones: the card is smaller, so its type steps down with it */
  @media (max-width: 640px) {
    /* one card at a time, filling the screen: no gap, no sliver of the next one */
    .svc-rail { gap: 0; scroll-snap-type: x mandatory; }
    .svc-card,
    .svc-card.is-open {
      flex: 0 0 100%; width: 100%; height: clamp(270px, 68vw, 330px);
      scroll-snap-align: start;
    }
    /* a tap shows the copy; the card keeps its size so the row can carry on */
    .svc-card.is-open img { transform: scale(1.06); }
    .svc-lead h2 { margin-bottom: 14px; }
    .svc-lead p { font-size: 13.5px; line-height: 1.7; }
    .svc-card-body { padding: 20px 18px; }
    .svc-card-body h3 { font-size: 18px; letter-spacing: .05em; line-height: 1.25; }
    .svc-card-body p { font-size: 12.5px; line-height: 1.6; }
    .svc-card.is-open .svc-card-body p { max-height: 8em; margin-top: 10px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-card, .svc-card img, .svc-card-body p, .svc-card::before { transition: none; }
    .svc-card:hover img, .svc-card.is-open img { transform: none; }
  }

  /* ---------- CLIENTS ---------- */
  .cl-mark { font-weight: 700; letter-spacing: .06em; line-height: 1; }

  .cl-band {
    position: relative; color: #fff;
    padding: clamp(56px, 8vw, 100px) clamp(20px, 4vw, 56px);
    background: #0a141c url("images/stitching.jpg") center / cover no-repeat;
  }
  .cl-band::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(6,14,20,.92), rgba(6,14,20,.72) 60%, rgba(6,14,20,.55));
  }
  .cl-band-inner { position: relative; }
  .cl-band h2 { margin: 0 0 14px; font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; text-transform: uppercase; }
  .cl-band-intro { margin: 0 0 clamp(32px, 4.5vw, 52px); max-width: 56ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; color: var(--muted); font-weight: 300; }
  /* flex (not grid) so a growing tile physically pushes the next one along */
  .cl-band-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: clamp(20px, 3vw, 44px); }
  .cl-band-list li {
    flex: 0 1 auto; display: grid; gap: 8px; cursor: default;
    padding: 18px 22px;
    border-left: 2px solid var(--accent);
    background: rgba(255,255,255,0);
    transform-origin: left center;
    transition: transform .5s cubic-bezier(.2,.7,.3,1),
                padding-right .5s cubic-bezier(.2,.7,.3,1),
                background-color .5s ease, opacity .5s ease,
                border-left-width .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
  }
  /* hovering one tile dims the other, so the focus is obvious */
  .cl-band-list:hover li { opacity: .45; }
  .cl-band-list li:hover,
  .cl-band-list li:active,
  .cl-band-list li:focus-within {
    opacity: 1;
    transform: translateX(8px) scale(1.03);
    padding-right: clamp(64px, 9vw, 150px);   /* grows, and shoves the next tile forward */
    border-left-width: 4px;
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(7px);
    box-shadow: 0 30px 80px -12px rgba(0,0,0,.75), 0 10px 30px rgba(0,0,0,.35);
  }
  .cl-band-list .cl-mark { font-size: clamp(30px, 4vw, 48px); color: #fff; }
  .cl-band-list strong { font-size: clamp(14px, 1.3vw, 17px); font-weight: 600; }
  .cl-band-list span:last-child { font-size: 13px; font-weight: 300; color: var(--muted); }

  @media (max-width: 720px) {
    .cl-band-list { flex-direction: column; gap: 14px; }
    .cl-band-list li:hover, .cl-band-list li:active, .cl-band-list li:focus-within { padding-right: 22px; }
  }

  /* phones: the wash turns vertical, since a side-to-side one leaves the foot of
     a portrait screen too bright for white type */
  @media (max-width: 640px) {
    /* the stitching shot is landscape, so a portrait screen crops it to a sliver;
       this one is portrait to begin with */
    .cl-band {
      padding: clamp(48px, 11vw, 64px) 20px;
      background-image: url("images/products/industrial-workwear.jpg");
      background-position: 50% 30%;
    }
    .cl-band::before {
      background: linear-gradient(180deg, rgba(6,14,20,.9), rgba(6,14,20,.82) 55%, rgba(6,14,20,.9));
    }
    .cl-band-intro { margin-bottom: 26px; font-size: 13.5px; line-height: 1.7; }
    .cl-band-list li { padding: 14px 16px; }
    .cl-band-list .cl-mark { font-size: 26px; }
    .cl-band-list strong { font-size: 14px; }
    .cl-band-list span:last-child { font-size: 12.5px; }
  }
  @media (hover: none) {
    /* touch screens: no hover, so keep both tiles fully lit */
    .cl-band-list:hover li { opacity: 1; }
  }
  @media (prefers-reduced-motion: reduce) {
    .cl-band-list li { transition: background-color .2s ease, opacity .2s ease; }
    .cl-band-list li:hover, .cl-band-list li:active, .cl-band-list li:focus-within { transform: none; }
  }

  /* ---------- STANDARDS & COMPLIANCE ---------- */
  /* two plain columns: what is held today, and what is being worked towards.
     Keeping them apart is the whole point, so neither reads as the other. */
  .stds { background: #f5f7f8; padding: clamp(56px, 8vw, 104px) clamp(20px, 4vw, 56px); }
  .stds h2 { margin: 0 0 14px; font-weight: 600; font-size: clamp(26px, 3vw, 40px); letter-spacing: .04em; text-transform: uppercase; color: #1c252d; text-align: center; }
  .stds-intro { margin: 0 auto clamp(30px, 4vw, 48px); max-width: 62ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300; text-align: center; }

  .stds-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 2.6vw, 36px); align-items: stretch; }
  .stds-col { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); background: #fff; }

  /* the certifications panel carries the weight, so it goes dark */
  .stds-col.is-dark { background: #0a141c; }
  .stds-col.is-dark .stds-kicker { color: #fff; border-bottom-color: rgba(255,255,255,.16); }
  .stds-col.is-dark .stds-items strong { color: #fff; }
  .stds-col.is-dark .stds-items span { color: var(--muted); }
  .stds-col.is-dark .stds-items svg { color: #46c07f; }
  .stds-col.is-dark .dot.held { background: #46c07f; }

  .stds-kicker {
    display: flex; align-items: center; gap: 9px;
    margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #e6ebed;
    font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: #1c252d;
  }
  .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
  .dot.held { background: #1f9d55; }

  .stds-items { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 16px; align-content: space-between; }
  .stds-items li { display: grid; grid-template-columns: 20px 1fr; gap: 14px; align-items: start; }
  .stds-items svg { width: 18px; height: 18px; margin-top: 2px; color: #1f9d55; }
  .stds-items strong { display: block; font-size: 14.5px; font-weight: 600; color: #1c252d; letter-spacing: .01em; }
  .stds-items span { display: block; margin-top: 3px; font-size: 12.5px; font-weight: 300; line-height: 1.5; color: #5b6670; }

  /* desktop only: a row lifts under the pointer, the way the pillars do */
  @media (hover: hover) and (min-width: 861px) {
    .stds-items li,
    .stds-items svg { transition: transform .35s cubic-bezier(.2,.7,.3,1); }
    .stds-items li:hover, .stds-items li:focus-within { transform: translateY(-5px); }
    .stds-items li:hover svg { transform: scale(1.16); }

    .stds-facts li { transition: transform .35s cubic-bezier(.2,.7,.3,1), border-left-width .35s ease, box-shadow .35s ease; }
    .stds-facts li:hover {
      transform: translateY(-5px);
      border-left-width: 4px;
      box-shadow: 0 18px 40px -20px rgba(10, 20, 28, .4);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .stds-items li, .stds-items svg, .stds-facts li { transition: none; }
    .stds-items li:hover, .stds-items li:hover svg, .stds-facts li:hover { transform: none; }
  }

  .stds-note {
    margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #e6ebed;
    font-size: 12.5px; line-height: 1.7; color: #5b6670; font-weight: 300;
  }

  /* three plain facts under the two columns */
  .stds-facts {
    list-style: none; margin: clamp(20px, 2.6vw, 36px) 0 0; padding: 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px);
  }
  .stds-facts li { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px clamp(18px, 2vw, 26px); background: #fff; border-left: 2px solid var(--accent); }
  .stds-facts strong { font-size: clamp(22px, 2.4vw, 32px); font-weight: 700; line-height: 1; color: #1c252d; letter-spacing: .01em; }
  .stds-facts span { font-size: 12.5px; font-weight: 300; line-height: 1.55; color: #5b6670; }

  @media (max-width: 860px) {
    .stds-split { grid-template-columns: 1fr; }
    .stds-facts { grid-template-columns: 1fr; gap: 10px; }
  }
  @media (max-width: 640px) {
    .stds { padding: clamp(48px, 11vw, 64px) 20px; }
    .stds-intro { margin-bottom: 26px; font-size: 13.5px; line-height: 1.7; }
    .stds-split { gap: 12px; }
    .stds-col { padding: 20px 18px; }
    .stds-kicker { margin-bottom: 16px; padding-bottom: 13px; font-size: 10.5px; }
    .stds-items { gap: 14px; }
    .stds-items strong { font-size: 13.5px; }
    .stds-items span { font-size: 11.5px; }
    .stds-note { font-size: 11.5px; }
    .stds-facts li { padding: 16px; gap: 14px; }
    .stds-facts strong { font-size: 22px; }
    .stds-facts span { font-size: 12px; }
  }

  /* ---------- INNER PAGE HEAD ---------- */
  body.page main { padding-top: calc(var(--nav-h) + var(--bar-h)); }

  .page-head { position: relative; display: grid; place-items: center; min-height: clamp(190px, 26vw, 360px); overflow: hidden; background: #0a141c; }
  .page-head img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .page-head::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(6,14,20,.62), rgba(6,14,20,.72));
  }
  .page-head-inner { position: relative; z-index: 1; text-align: center; color: #fff; padding: 0 20px; }
  .page-head h1 { margin: 0 0 10px; font-weight: 600; font-size: clamp(28px, 4.4vw, 56px); letter-spacing: .04em; text-transform: uppercase; }
  .crumbs { display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 13px; font-weight: 300; color: var(--muted); }
  .crumbs a:hover { color: var(--accent); }
  .crumbs span[aria-hidden] { color: var(--accent); }

  /* ---------- BREADCRUMB BAR ---------- */
  .crumbs-bar { padding: 18px 0; background: #fff; border-bottom: 1px solid #ececec; }
  .crumbs-bar .wrap { display: flex; align-items: center; gap: 10px; padding: 0 clamp(20px, 4vw, 56px); font-size: 13px; font-weight: 300; color: #5b6670; }
  .crumbs-bar a { color: #5b6670; }
  .crumbs-bar a:hover { color: var(--accent); }
  .crumbs-bar span[aria-current] { color: var(--accent); }

  /* ---------- PAGE LEDE: photo one side, the story the other ---------- */
  .lede-split { background: #fff; padding: clamp(40px, 6vw, 80px) clamp(20px, 4vw, 56px); }
  .lede-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
  .lede-photo { margin: 0; overflow: hidden; background: #0a141c; }
  .lede-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .lede-copy h1 {
    margin: 0 0 22px; font-weight: 600; font-size: clamp(28px, 3.6vw, 48px);
    letter-spacing: .04em; text-transform: uppercase; line-height: 1.12; color: #1c252d;
  }
  .lede-copy p { margin: 0 0 18px; max-width: 54ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.85; color: #5b6670; font-weight: 300; }
  .lede-copy p:last-child { margin-bottom: 0; }

  /* ---------- RANGE CARDS ---------- */
  .range { background: #f4f4f4; padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px); }
  .range-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: clamp(18px, 2.4vw, 34px); }
  .range-card { display: grid; gap: 0; }
  .range-card img {
    display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
    background: #0a141c; transition: transform .6s cubic-bezier(.2,.7,.3,1), filter .4s ease;
  }
  .range-card:hover img { transform: scale(1.03); filter: brightness(1.04); }
  .range-card h2 { margin: 16px 0 6px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600; letter-spacing: .02em; color: #1c252d; }
  .range-card p { margin: 0; max-width: 32ch; font-size: 13px; line-height: 1.65; color: #5b6670; font-weight: 300; }

  /* ---------- CUSTOMERS STRIP ---------- */
  .buyers { background: #fff; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 56px); text-align: center; }
  .buyers h2 { margin: 0 0 clamp(28px, 4vw, 44px); font-weight: 600; font-size: clamp(24px, 3vw, 38px); letter-spacing: .06em; text-transform: uppercase; color: #1c252d; }
  .buyers-list { list-style: none; margin: 0 0 clamp(26px, 3.5vw, 40px); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(28px, 6vw, 96px); }
  .buyers-list li { display: grid; gap: 6px; }
  .buyers-list .cl-mark { font-size: clamp(26px, 3.4vw, 42px); color: #1c252d; }
  .buyers-list span:last-child { font-size: 13px; font-weight: 300; color: #5b6670; }

  @media (max-width: 860px) {
    .lede-grid { grid-template-columns: 1fr; gap: 26px; }
  }
  @media (max-width: 640px) {
    .crumbs-bar { padding: 14px 0; }
    .crumbs-bar .wrap { font-size: 12px; }
    .lede-split { padding: clamp(32px, 8vw, 48px) 20px; }
    .lede-copy h1 { margin-bottom: 16px; font-size: 21px; }
    .lede-copy p { font-size: 13.5px; line-height: 1.75; }
    .range { padding: clamp(40px, 10vw, 56px) 20px; }
    .range-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .range-card h2 { margin-top: 12px; font-size: 14px; }
    .range-card p { font-size: 12px; }
    .buyers { padding: clamp(40px, 10vw, 56px) 20px; }
    .buyers h2 { font-size: 21px; }
    .buyers-list { gap: 32px; }
  }

  /* ---------- MAP ---------- */
  .map { display: block; background: #e9ecee; }
  .map iframe { display: block; width: 100%; height: clamp(280px, 38vw, 520px); border: 0; filter: grayscale(.25); }

  /* ---------- CONTACT PAGE BODY ---------- */
  .reach { background: #fff; }
  /* the two halves sit out at the page edges with the gap between them, so the
     details read on the left and the form on the right */
  .reach { padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 64px); }
  .reach-grid {
    max-width: none;
    display: grid; grid-template-columns: 1fr minmax(360px, .82fr);
    gap: clamp(36px, 9vw, 180px); align-items: start;
  }
  .reach h2 { margin: 0 0 20px; font-weight: 700; font-size: clamp(26px, 3.2vw, 42px); letter-spacing: -.01em; color: #1c252d; }
  .reach-lede { margin: 0 0 32px; max-width: 52ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300; }

  .reach-lines { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 26px; }
  .reach-lines li { display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: start; }
  .reach-lines svg { width: 22px; height: 22px; margin-top: 2px; color: #1c252d; }
  .reach-lines h3 { margin: 0 0 8px; font-size: clamp(16px, 1.4vw, 19px); font-weight: 600; letter-spacing: 0; color: #1c252d; }
  .reach-lines p, .reach-lines address {
    margin: 0; max-width: 42ch; font-style: normal;
    font-size: clamp(13.5px, 1.15vw, 15.5px); line-height: 1.7; color: #5b6670; font-weight: 300;
  }
  .reach-lines a:hover { color: var(--accent); }
  .reach-actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .cta.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); }
  .cta.ghost:hover { background: rgba(255,255,255,.14); border-color: #fff; }
  .cta.ghost.dark { color: #1c252d; border-color: rgba(14, 26, 36, .3); }
  .cta.ghost.dark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

  /* the form sits on a panel, with the accent rule the rest of the site uses */
  .reach-form { padding: 0; }
  .reach-form h2 { margin-bottom: 26px; }
  .field { display: block; margin-bottom: 16px; }
  .field input, .field textarea {
    width: 100%; padding: 17px 18px;
    font-family: inherit; font-size: 14.5px; font-weight: 300; color: #1c252d;
    background: #f7f8f8; border: 1px solid #e4e8ea; border-radius: 0;
    transition: border-color .25s ease, box-shadow .25s ease;
  }
  .field textarea { resize: vertical; min-height: 190px; line-height: 1.7; }
  .field input::placeholder, .field textarea::placeholder { color: #93a0a9; }
  .field input:focus, .field textarea:focus {
    outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(31, 162, 216, .14);
  }
  .form-send {
    margin-top: 10px; width: 100%; border: none; cursor: pointer; font-family: inherit;
    padding: 18px 24px; border-radius: 0;
    font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  }
  /* it keeps its colour on hover; only the press gives feedback */
  .form-send:hover { background: var(--accent); color: #04121b; }
  .form-send:active { opacity: .88; }
  .form-note { margin: 14px 0 0; font-size: 13px; line-height: 1.6; color: #5b6670; font-weight: 300; min-height: 1.2em; }
  .form-note.bad { color: #b4372b; }
  .sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  @media (max-width: 860px) {
    .reach-grid { grid-template-columns: 1fr; gap: 36px; }
  }
  @media (max-width: 640px) {
    .page-head h1 { font-size: clamp(24px, 8vw, 32px); }
    .crumbs { font-size: 12px; }
    .reach { padding: clamp(40px, 10vw, 56px) 20px; }
    .reach h2 { font-size: 21px; }
    .reach-lede { margin-bottom: 26px; font-size: 13.5px; line-height: 1.75; }
    .reach-lines { gap: 18px; }
    .reach-lines h3 { font-size: 14px; }
    .reach-lines p, .reach-lines address { font-size: 13px; }
    .reach-actions .cta { flex: 1 1 auto; text-align: center; padding: 13px 18px; font-size: 13px; }
    .reach-form { padding: 22px 18px; }
  }

  /* ---------- CLOSING CALL TO ACTION ---------- */
  /* the last thing on the page tells the visitor what to do next */
  .closer {
    position: relative; overflow: hidden;
    padding: clamp(44px, 6vw, 78px) clamp(20px, 4vw, 56px);
    background: #0a141c url("images/stitching-line-2.jpg") center / cover no-repeat;
    color: #fff;
  }
  .closer::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(6,14,20,.94), rgba(6,14,20,.82) 55%, rgba(6,14,20,.66));
  }
  .closer-inner {
    position: relative; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: clamp(20px, 3vw, 48px);
  }
  .closer h2 { margin: 0 0 12px; font-weight: 600; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .03em; text-transform: uppercase; }
  .closer p { margin: 0; max-width: 52ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.75; color: var(--muted); font-weight: 300; }
  .closer-actions { display: flex; flex-wrap: wrap; gap: 12px; }

  @media (max-width: 640px) {
    .closer { padding: clamp(40px, 10vw, 56px) 20px; }
    .closer::before { background: linear-gradient(180deg, rgba(6,14,20,.9), rgba(6,14,20,.82) 55%, rgba(6,14,20,.92)); }
    .closer h2 { font-size: 21px; }
    .closer p { font-size: 13.5px; line-height: 1.7; }
    .closer-actions { width: 100%; gap: 10px; }
    .closer-actions .cta { flex: 1 1 auto; text-align: center; padding: 13px 18px; font-size: 13px; }
  }

  /* ---------- FOOTER ---------- */
  .foot { background: #071017; color: rgba(255,255,255,.72); font-weight: 300; }
  .foot-grid {
    display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: clamp(28px, 4vw, 56px);
    padding: clamp(44px, 6vw, 72px) clamp(20px, 4vw, 56px) clamp(36px, 5vw, 56px);
  }
  .foot-logo { display: inline-block; margin-bottom: 16px; font-size: 22px; font-weight: 700; letter-spacing: .04em; color: #fff; }
  .foot-logo span { color: var(--accent); }
  .foot-line { margin: 0 0 8px; max-width: 34ch; font-size: 14px; line-height: 1.7; }
  .foot h3 { margin: 0 0 16px; font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .foot a { transition: color .2s; }
  .foot-nav a:hover, .foot-reach a:hover { color: #fff; }
  .foot-nav li, .foot-reach p { font-size: 14px; line-height: 1.6; }
  .foot-reach p { margin: 0 0 11px; }
  .foot-base { border-top: 1px solid rgba(255,255,255,.1); padding: 18px clamp(20px, 4vw, 56px); }
  .foot-base-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; font-size: 13px; }

  @media (max-width: 960px) {
    .contact-grid { grid-template-columns: 1fr; }
    .foot-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 560px) {
    .foot-grid { grid-template-columns: 1fr; }
    .foot-base-inner { justify-content: flex-start; }
  }

  /* ---------- MOBILE ---------- */
  @media (max-width: 960px) {
    .burger { display: grid; }
    .menu {
      position: fixed; inset: calc(var(--nav-h) + var(--bar-h)) 0 0 0; background: rgba(10,22,32,.98); flex-direction: column; align-items: stretch;
      gap: 0; padding: 12px 24px 40px; overflow-y: auto; transform: translateX(100%); transition: transform .3s;
    }
    /* white bar after scrolling: the slide-out panel matches it */
    .nav.solid .menu { background: #fff; }
    .nav.solid .menu > li { border-bottom-color: rgba(14, 26, 36, .12); }
    .nav.solid .menu a, .nav.solid .menu button.trigger { color: #1c252d; }
    .search.open .search-field { width: clamp(140px, 42vw, 220px); }
    .menu.show { transform: none; }
    .menu > li { border-bottom: 1px solid rgba(255,255,255,.1); }
    .menu a, .menu button.trigger { width: 100%; padding: 18px 0; font-size: 16px; justify-content: space-between; }
    .sub { position: static; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; background: transparent; padding: 0 0 10px 12px; }
    li.open > .sub { display: block; }
    li:hover > .sub { display: none; }
    li.open:hover > .sub { display: block; }
    .scroll { display: none; }
    .steps { gap: 8px; }
    .step .label { font-size: 11px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .slide { transition: none; }
    .scroll .mouse::after { animation: none; }
    html { scroll-behavior: auto; }
  }

  /* ---------- HEADINGS: one size across the page ---------- */
  /* Every section title matches on a phone. The Impacts banner is the one
     display heading and keeps its own scale. */
  @media (max-width: 640px) {
    .about h2,
    .tiles h2,
    .family h2,
    .esg-grid h2,
    .svc-lead h2,
    .process h2,
    .cl-band h2,
    .stds h2,
    .contact h2 { font-size: 21px; letter-spacing: .04em; line-height: 1.3; }
  }

  /* ---------- PHONE SPACING ---------- */
  /* Nothing in here applies above 640px, so the laptop layout stays as it is. */
  @media (max-width: 640px) {

    .pillar h3 { min-height: 2.8em; }

    /* phones: nothing lifts on tap, the icons just keep floating */
    .pillar:hover h3, .pillar:focus-within h3 { transform: none; }
    .pillar:hover svg, .pillar:focus-within svg {
      transform: none;
      animation: pillar-float 3.4s ease-in-out infinite;
    }

    .hero p { font-size: 13.5px; line-height: 1.65; }
    .about-grid { grid-template-columns: 1fr; gap: 14px; }
    .about .lead, .about .body { max-width: none; }
  }

  /* short screens (a phone on its side): the hero must not outgrow the window */
  @media (max-height: 560px) {
    .hero { min-height: 0; }
  }

  /* the gentle rise and fall the phone icons run on */
  @media (prefers-reduced-motion: reduce) {
    .tile-arrow, .impact-card svg { animation: none; }
  }

  @keyframes pillar-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
  }

  @keyframes impact-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  /* ---------- ANNOUNCEMENT BAR ON PHONES ---------- */
  @media (max-width: 760px) {
    :root { --bar-h: 34px; }
    .topbar { padding: 0 16px; }
    .topbar-link { display: none; }           /* no room for it beside the numbers */
    .topbar-inner { justify-content: center; }
    .topbar-reach { gap: 12px; }
    .topbar a { gap: 6px; font-size: 11.5px; }
    .topbar svg { width: 13px; height: 13px; }
  }
  @media (max-width: 420px) {
    /* on small phones the announcement bar keeps only the email contact */
    .topbar-reach a[href^="tel"], .topbar-sep { display: none; }
    .topbar-reach a[href^="mailto"] { display: inline-flex; }
  }

  /* ---------- BRAND PALETTE ---------- */
  .topbar, .hero, .gal-slide, .tile, .impact-banner, .showcase-stage,
  .svc-card, .cl-band, .stds-col.is-dark, .page-head, .lede-photo,
  .range-card img, .closer { background-color: var(--wine-deep); }
  .nav:not(.solid) { background: linear-gradient(to bottom, rgba(46,6,31,.62), rgba(46,6,31,0)); }
  .nav.solid { background-color: var(--paper); }
  .sub, .search-results { background-color: rgba(46,6,31,.97); }
  .process, .impact, .range { background-color: #f8f2e7; }
  .svc, .stds { background-color: #fbf8f1; }
  .s1 .fallback { background: radial-gradient(120% 90% at 75% 20%, #9b6b2b 0%, #632343 45%, #2e061f 100%); }
  .s2 .fallback { background: radial-gradient(110% 90% at 30% 30%, #8b3a56 0%, #541630 50%, #2e061f 100%); }
  .s3 .fallback { background: radial-gradient(110% 90% at 70% 60%, #d7aa48 0%, #81502d 50%, #351027 100%); }
  .s4 .fallback { background: radial-gradient(110% 90% at 30% 70%, #d8bd79 0%, #8b6847 45%, #351628 100%); }
  .nav.solid .menu > li > a:hover, .nav.solid .menu button.trigger:hover,
  .nav.solid .icon-btn:hover, .nav.solid .sub a:hover,
  .nav.solid .search-results li > *:hover { color: var(--accent-ink); }
  .text-link:hover, .crumbs-bar a:hover, .crumbs-bar span[aria-current],
  .reach-lines a:hover { color: var(--accent-ink); }
  .cta, .form-send:hover, .cta.ghost.dark:hover { color: var(--wine-deep); }
  .hero::after { background: linear-gradient(90deg, rgba(35,5,24,.78) 0%, rgba(35,5,24,.48) 42%, rgba(35,5,24,.12) 100%), linear-gradient(0deg, rgba(35,5,24,.6) 0%, rgba(35,5,24,0) 35%); }
  @media (max-width: 760px) {
    .menu { background-color: rgba(46,6,31,.98); }
  }

  /* ---------- PRODUCT DETAIL PAGES ---------- */
  .product-detail { background: #fff; padding: clamp(44px, 6vw, 86px) clamp(20px, 4vw, 56px); }
  .product-hero {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(260px, .9fr);
    gap: clamp(28px, 5vw, 72px); align-items: center;
  }
  .eyebrow {
    margin: 0 0 14px; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink);
  }
  .eyebrow.light { color: rgba(255,255,255,.8); }
  .product-copy h1 {
    margin: 0 0 18px; font-size: clamp(30px, 4vw, 52px); line-height: 1.08; letter-spacing: -.02em; color: #1c252d;
  }
  .product-copy p {
    margin: 0 0 18px; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300;
  }
  .feature-list {
    list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 10px;
  }
  .feature-list li {
    position: relative; padding-left: 20px; font-size: 14px; line-height: 1.7; color: #1c252d;
  }
  .feature-list li::before {
    content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  }
  .product-actions {
    display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  }
  .product-visual img {
    display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #0a141c;
    box-shadow: 0 26px 60px rgba(0,0,0,.12);
  }
  .product-band {
    background: #f5f4f0; padding: 0 clamp(20px, 4vw, 56px) clamp(40px, 5vw, 74px);
  }
  .product-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px);
  }
  .detail-card {
    background: #fff; padding: clamp(20px, 2.2vw, 28px); border: 1px solid #ece8df;
  }
  .detail-card h2 {
    margin: 0 0 10px; font-size: clamp(18px, 1.8vw, 24px); color: #1c252d;
  }
  .detail-card p {
    margin: 0; font-size: 14px; line-height: 1.7; color: #5b6670; font-weight: 300;
  }
  .product-cta {
    background: #0b1720; color: #fff; padding: clamp(34px, 4vw, 58px) clamp(20px, 4vw, 56px) clamp(54px, 7vw, 88px);
  }
  .product-cta-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  }
  .product-cta h2 {
    margin: 0; font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; letter-spacing: -.01em; color: #fff;
  }
  @media (max-width: 860px) {
    .product-hero { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .product-detail { padding: 36px 20px; }
    .product-copy h1 { margin-bottom: 14px; }
    .feature-list { gap: 8px; }
    .feature-list li { font-size: 13px; }
    .product-actions { flex-direction: column; align-items: flex-start; }
    .product-cta-inner { align-items: flex-start; }
    .product-cta h2 { max-width: 12ch; }
  }

  /* ---------- INDUSTRIAL WORKWEAR PAGE ---------- */
  .industrial-page .product-detail {
    position: relative; overflow: hidden; background: #f8f2e7;
  }
  .industrial-page .product-detail::before {
    content: ""; position: absolute; top: 0; right: 0; width: 42%; height: 100%;
    background: linear-gradient(135deg, rgba(75,10,49,.1), rgba(215,170,72,.18));
    pointer-events: none;
  }
  .industrial-page .product-hero { position: relative; z-index: 1; }
  .industrial-page .product-copy { max-width: 620px; }
  .industrial-page .eyebrow {
    display: inline-flex; align-items: center; gap: 10px; color: var(--accent-ink);
  }
  .industrial-page .eyebrow::before {
    content: ""; width: 34px; height: 2px; background: var(--accent);
  }
  .industrial-page .product-copy h1 { max-width: 11ch; color: var(--wine-deep); }
  .industrial-page .product-copy > p:not(.eyebrow) { max-width: 48ch; color: #4f4a4b; }
  .industrial-page .feature-list {
    max-width: 520px; padding: 18px 20px; border-left: 3px solid var(--accent); background: rgba(255,255,255,.52);
  }
  .industrial-page .feature-list li { font-weight: 400; }
  .industrial-page .feature-list li::before { background: var(--wine); }
  .industrial-page .product-visual { position: relative; }
  .industrial-page .product-visual::after {
    content: "FIELD READY"; position: absolute; right: -14px; bottom: 22px; padding: 9px 14px;
    background: var(--accent); color: var(--wine-deep); font-size: 10px; font-weight: 700; letter-spacing: .16em;
  }
  .industrial-page .product-visual img {
    aspect-ratio: 5 / 6; border: 10px solid #fff; box-shadow: 0 24px 54px rgba(53,22,40,.2);
  }
  .industrial-page .product-band { background: #fff; padding-top: clamp(34px, 4vw, 54px); }
  .industrial-page .detail-card {
    position: relative; border: 0; border-top: 3px solid var(--accent); padding: 24px 22px 26px;
    box-shadow: 0 14px 34px rgba(53,22,40,.07); transition: transform .25s ease, box-shadow .25s ease;
  }
  .industrial-page .detail-card:hover { transform: translateY(-5px); box-shadow: 0 20px 38px rgba(53,22,40,.13); }
  .industrial-page .detail-card h2 { color: var(--wine-deep); }
  .industrial-page .product-cta { background: var(--wine-deep); }
  .industrial-page .product-cta .cta { background: var(--accent); }
  @media (max-width: 640px) {
    .industrial-page .product-detail::before { width: 100%; height: 42%; }
    .industrial-page .product-copy h1 { max-width: 14ch; }
    .industrial-page .product-visual::after { right: 8px; bottom: 14px; }
    .industrial-page .product-visual img { border-width: 6px; }
    .industrial-page .feature-list { padding: 14px 16px; }
  }

  /* ---------- INDUSTRIAL WORKWEAR REDESIGN ---------- */
  .industrial-hero {
    position: relative; height: 200px; min-height: 200px; display: flex; align-items: center;
    overflow: hidden; background: var(--wine-deep); color: #fff;
  }
  .industrial-hero > img, .industrial-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  .industrial-hero > img { top: 0; right: 0; bottom: auto; left: auto; width: 200px; height: 200px; object-fit: cover; object-position: center 28%; }
  .industrial-hero-shade { background: linear-gradient(90deg, rgba(36,4,24,.92), rgba(36,4,24,.55) 48%, rgba(36,4,24,.1)); }
  .industrial-hero-copy { position: relative; z-index: 1; padding: 24px clamp(20px, 4vw, 56px); }
  .industrial-hero-copy h1 { max-width: 14ch; margin: 0 0 8px; font-size: clamp(24px, 3.5vw, 46px); line-height: 1.02; letter-spacing: -.03em; }
  .industrial-hero-copy > p:not(.eyebrow), .industrial-hero-copy .cta { display: none; }
  .industrial-hero-tag { position: absolute; z-index: 1; right: clamp(20px, 4vw, 56px); bottom: 34px; color: rgba(255,255,255,.72); font-size: 10px; letter-spacing: .2em; writing-mode: vertical-rl; }
  .industrial-intro { padding: clamp(58px, 8vw, 110px) clamp(20px, 4vw, 56px) 0; background: #fff; }
  .industrial-intro-grid { display: grid; grid-template-columns: minmax(240px, .8fr) 1.2fr; gap: clamp(32px, 7vw, 110px); }
  .industrial-intro h2, .industrial-section-head h2, .industrial-specs h2 { margin: 0; color: var(--wine-deep); font-size: clamp(28px, 4vw, 54px); line-height: 1.08; letter-spacing: -.02em; }
  .industrial-intro-grid > div:last-child p, .industrial-section-head > p { margin: 0 0 18px; max-width: 56ch; color: #5b6670; font-size: 15px; line-height: 1.85; font-weight: 300; }
  .industrial-facts { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: clamp(44px, 6vw, 80px); border-top: 1px solid #e7e0d7; }
  .industrial-facts div { display: grid; gap: 8px; padding: 26px 18px 30px 0; border-right: 1px solid #e7e0d7; }
  .industrial-facts div + div { padding-left: clamp(16px, 3vw, 42px); }
  .industrial-facts div:last-child { border-right: 0; }
  .industrial-facts strong { color: var(--accent-ink); font-size: clamp(30px, 4vw, 54px); line-height: 1; }
  .industrial-facts span { color: #5b6670; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
  .industrial-process { padding: clamp(60px, 8vw, 110px) clamp(20px, 4vw, 56px); background: #f7f2e9; }
  .industrial-section-head { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: clamp(30px, 5vw, 58px); }
  .industrial-section-head > div { max-width: 560px; }
  .industrial-section-head > p { margin: 0; max-width: 34ch; }
  .industrial-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .industrial-process-grid article { position: relative; min-height: 400px; overflow: hidden; background: var(--wine-deep); color: #fff; }
  .industrial-process-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
  .industrial-process-grid article:hover img { transform: scale(1.06); }
  .industrial-process-grid article::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(35,5,24,.94), rgba(35,5,24,.05) 68%); }
  .industrial-process-grid article > div { position: absolute; z-index: 1; right: 22px; bottom: 22px; left: 22px; }
  .industrial-process-grid span { color: var(--accent); font-size: 12px; letter-spacing: .14em; }
  .industrial-process-grid h3 { margin: 8px 0 8px; font-size: 20px; }
  .industrial-process-grid p { margin: 0; color: rgba(255,255,255,.76); font-size: 12px; line-height: 1.6; }
  .industrial-specs { padding: clamp(60px, 8vw, 112px) clamp(20px, 4vw, 56px); background: #fff; }
  .industrial-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 7vw, 110px); align-items: center; }
  .industrial-specs-image img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .industrial-checks { list-style: none; margin: 30px 0; padding: 0; display: grid; gap: 14px; }
  .industrial-checks li { position: relative; padding-left: 28px; color: #5b6670; font-size: 14px; line-height: 1.65; }
  .industrial-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--accent-ink); font-weight: 700; }
  .industrial-cta { padding: clamp(52px, 7vw, 92px) clamp(20px, 4vw, 56px); background: var(--wine-deep); color: #fff; }
  .industrial-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
  .industrial-cta h2 { margin: 0; max-width: 14ch; font-size: clamp(28px, 4vw, 52px); line-height: 1.1; }
  @media (max-width: 900px) {
    .industrial-process-grid { grid-template-columns: repeat(2, 1fr); }
    .industrial-process-grid article { min-height: 330px; }
  }
  @media (max-width: 640px) {
    .industrial-hero { height: 200px; min-height: 200px; }
    .industrial-hero > img { object-position: 60% center; }
    .industrial-hero-copy { padding: 24px 20px; }
    .industrial-hero-copy h1 { font-size: clamp(24px, 8vw, 34px); }
    .industrial-hero-tag { display: none; }
    .industrial-intro { padding: 52px 20px 0; }
    .industrial-intro-grid, .industrial-specs-grid { grid-template-columns: 1fr; gap: 26px; }
    .industrial-facts { grid-template-columns: 1fr; margin-top: 38px; }
    .industrial-facts div, .industrial-facts div + div { padding: 20px 0; border-right: 0; border-bottom: 1px solid #e7e0d7; }
    .industrial-facts div:last-child { border-bottom: 0; }
    .industrial-section-head, .industrial-cta-inner { display: block; }
    .industrial-section-head > p { margin-top: 18px; }
    .industrial-process-grid { grid-template-columns: 1fr; }
    .industrial-process-grid article { min-height: 360px; }
    .industrial-cta .cta { margin-top: 26px; }
  }

  /* ---------- INDUSTRIAL WORKWEAR WIREFRAME PAGE ---------- */
  .industrial-wireframe-page { background: #fff; }
  .industrial-wireframe-page main { padding-top: 0; }
  .industrial-wireframe-nav { position: relative; inset: auto; }
  .wire-wrap { width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
  .wire-hero { position: relative; height: 200px; overflow: hidden; background: var(--wine-deep); color: #fff; }
  .wire-hero > img, .wire-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
  .wire-hero > img { object-fit: cover; object-position: center 42%; }
  .wire-hero-shade { background: rgba(54, 9, 36, .78); }
  .wire-hero-copy { position: relative; z-index: 1; display: grid; place-content: center; height: 100%; text-align: center; }
  .wire-hero h1 { margin: 0 0 10px; font-size: clamp(24px, 3.4vw, 42px); letter-spacing: .02em; }
  .wire-hero-copy div { display: flex; justify-content: center; gap: 10px; color: rgba(255,255,255,.78); font-size: 12px; }
  .wire-hero-copy a:hover { color: var(--accent); }
  .wire-feature { display: grid; grid-template-columns: 1fr 1fr; width: min(1120px, calc(100% - 64px)); margin: 26px auto 0; min-height: 282px; }
  .wire-feature-image { min-height: 282px; overflow: hidden; background: #3e4b60; }
  .wire-feature-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .wire-feature-copy { padding: 4px 20px 20px 28px; align-self: center; }
  .wire-kicker { margin: 0 0 4px; color: var(--accent-ink); font-size: 10px; font-weight: 700; letter-spacing: .2em; }
  .wire-feature-copy h2 { margin: 0 0 12px; max-width: 18ch; color: #252d37; font-size: clamp(22px, 3vw, 34px); line-height: 1.08; }
  .wire-feature-copy > p:not(.wire-kicker) { margin: 0 0 22px; max-width: 44ch; color: #75808c; font-size: 14px; line-height: 1.7; }
  .wire-feature-copy ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 7px; color: #303944; font-size: 12px; }
  .wire-feature-copy li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 8px 2px 0; border-radius: 50%; background: var(--accent); }
  .wire-button { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 18px; border-radius: 18px; background: var(--accent); color: var(--wine-deep); font-size: 11px; font-weight: 600; }
  .wire-button:hover { background: var(--wine-deep); color: #fff; }
  .wire-range { padding: 28px 0 38px; background: #f8f2e7; }
  .wire-range h2, .wire-gallery h2 { margin: 0 0 10px; color: #27313b; font-size: 18px; letter-spacing: .02em; }
  .wire-range-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; height: 260px; }
  .wire-range-lead { position: relative; min-height: 0; height: 260px; margin: 0; overflow: hidden; background: var(--wine); color: #fff; }
  .wire-range-lead img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }
  .wire-range-lead > div { position: absolute; right: 0; bottom: 0; left: 0; padding: 16px; background: rgba(49, 7, 32, .92); }
  .wire-range h3 { margin: 0 0 5px; font-size: 12px; letter-spacing: .14em; }
  .wire-range p { margin: 0; color: rgba(255,255,255,.72); font-size: 10px; }
  .wire-range-list { display: grid; grid-template-rows: repeat(3, 1fr); gap: 8px; }
  .wire-range-list article { display: flex; flex-direction: column; justify-content: center; padding: 12px; color: #fff; background: #6f4c2e; }
  .wire-range-list article:nth-child(2) { background: #493d53; }
  .wire-range-list article:nth-child(3) { background: #294b47; }
  .wire-gallery { padding: 28px 0 38px; background: #fff; }
  .wire-built { padding: 42px 0 46px; background: #fff; }
  .wire-built-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }
  .wire-built-head h2 { margin: 3px 0 0; max-width: 19ch; color: #27313b; font-size: clamp(22px, 3vw, 34px); line-height: 1.12; }
  .wire-built-head > p { max-width: 38ch; margin: 0; color: #78818b; font-size: 13px; line-height: 1.7; }
  .wire-built-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .wire-built-grid article { min-height: 150px; padding: 18px; background: #3e4b60; color: #fff; }
  .wire-built-grid article:nth-child(2) { background: #4d3655; }
  .wire-built-grid article:nth-child(3) { background: #294b47; }
  .wire-built-grid span { color: var(--accent); font-size: 11px; letter-spacing: .15em; }
  .wire-built-grid h3 { margin: 20px 0 8px; font-size: 13px; letter-spacing: .14em; }
  .wire-built-grid p { margin: 0; color: rgba(255,255,255,.75); font-size: 11px; line-height: 1.6; }
  .wire-gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 74px; gap: 6px; }
  .wire-gallery-item { min-width: 0; padding: 0; overflow: hidden; border: 0; cursor: zoom-in; background: #3e4b60; }
  .wire-gallery-item img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
  .wire-gallery-item:hover img { transform: scale(1.06); }
  .wire-gallery-large { grid-row: span 2; }
  .wire-gallery-note { margin: 10px 0 0; color: #8b939c; font-size: 10px; }
  .wire-lightbox { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: rgba(20, 5, 15, .9); }
  .wire-lightbox img { display: block; max-width: min(100%, 1000px); max-height: 90svh; object-fit: contain; }
  .wire-lightbox button { position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.6); border-radius: 50%; background: transparent; color: #fff; font-size: 24px; cursor: pointer; }
  .wire-cta { padding: 25px 0 30px; background: #f8f2e7; }
  .wire-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
  .wire-cta h2 { margin: 0 0 6px; color: #27313b; font-size: 16px; }
  .wire-cta p { margin: 0; color: #78818b; font-size: 11px; }
  .wire-footer { display: flex; justify-content: space-between; padding: 18px 32px; background: #071017; color: rgba(255,255,255,.72); font-size: 10px; }
  @media (max-width: 760px) {
    .wire-wrap, .wire-feature { width: min(100% - 32px, 560px); }
    .wire-feature { grid-template-columns: 1fr; margin-top: 16px; }
    .wire-feature-image { height: 220px; min-height: 220px; }
    .wire-feature-copy { padding: 22px 4px 28px; }
    .wire-range-grid { grid-template-columns: 1fr; }
    .wire-built { padding: 34px 0 38px; }
    .wire-built-head { display: block; }
    .wire-built-head > p { margin-top: 14px; }
    .wire-built-grid { grid-template-columns: 1fr; }
    .wire-built-grid article { min-height: 125px; }
    .wire-range-grid { height: auto; }
    .wire-range-lead { height: 230px; min-height: 230px; }
    .wire-gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 92px; }
    .wire-gallery-large { grid-row: span 2; }
    .wire-cta-inner { align-items: flex-start; flex-direction: column; }
    .wire-footer { padding: 16px; }
  }
  /* ---------- STATEMENT: the line the whole site stands on ---------- */
  .statement {
    background: var(--wine-deep); color: #fff;
    padding: clamp(56px, 8vw, 110px) clamp(20px, 4vw, 56px);
  }
  .statement blockquote { margin: 0 auto; max-width: 980px; text-align: center; }
  .statement blockquote::before {
    content: "\201C"; display: block; margin-bottom: 4px;
    font-size: clamp(56px, 7vw, 96px); line-height: .8; color: var(--accent);
  }
  .statement p {
    margin: 0; font-size: clamp(20px, 2.6vw, 36px); font-weight: 500; line-height: 1.45; letter-spacing: -.01em;
  }
  .statement em { font-style: normal; color: var(--accent); }

  @media (max-width: 640px) {
    .statement p { font-size: 18px; }
  }

  /* hero: the three key words in gold */
  .hero h1 em { font-style: normal; color: var(--accent); }

  /* ---------- STANDARDS: certificate logos on the left, one dark panel on the right ---------- */
  .stds h2, .stds-intro { text-align: left; }
  .stds-intro { margin-left: 0; max-width: 58ch; }
  .stds-board { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
  /* logos ride a belt that comes out from behind the panel and fades off on the left */
  .stds-board { position: relative; }
  .stds-panel { position: relative; z-index: 2; }
  .stds-logos { position: relative; z-index: 1; min-width: 0; margin-right: calc(clamp(28px, 5vw, 72px) * -1 - 60px); }
  .std-marquee {
    overflow: hidden; padding: 6px 0;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 18%);
            mask-image: linear-gradient(to right, transparent, #000 18%);
  }
  .std-track { list-style: none; margin: 0; padding: 0; display: flex; width: max-content; animation: std-belt 28s linear infinite; }
  .std-marquee:hover .std-track { animation-play-state: paused; }
  @keyframes std-belt { to { transform: translateX(-50%); } }
  .std-logo {
    flex: 0 0 auto; width: clamp(104px, 9.5vw, 136px); margin-right: clamp(14px, 1.6vw, 22px);
    aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    display: grid; place-items: center; padding: 16px; box-sizing: border-box;
    background: #fff; border: 2px solid var(--accent);
    text-align: center; font-size: clamp(11px, 1vw, 13.5px); font-weight: 600; line-height: 1.25; color: var(--wine-deep);
  }
  .std-logo img { width: 100%; height: 100%; object-fit: contain; }
  .stds-logos > p { margin: 18px 0 0; font-size: 14px; color: #5b6670; font-weight: 300; }
  .stds-panel { padding: clamp(24px, 3vw, 38px); background: var(--wine-deep); border-radius: 14px; color: #fff; }
  .stds-panel .stds-kicker { color: #fff; border-bottom-color: rgba(255,255,255,.18); }
  .stds-panel .stds-kicker:not(:first-child) { margin-top: 28px; }
  .stds-panel .dot.held { background: #46c07f; }
  .stds-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
  .stds-list li { display: grid; grid-template-columns: 22px 1fr; gap: 14px; align-items: start; }
  .stds-list svg { width: 20px; height: 20px; margin-top: 2px; color: #46c07f; }
  .stds-list strong { display: block; font-size: clamp(15px, 1.3vw, 18px); font-weight: 600; color: #fff; }
  .stds-list span { display: block; margin-top: 3px; font-size: 13.5px; font-weight: 300; color: var(--muted); }
  @media (max-width: 860px) {
    .stds-board { grid-template-columns: 1fr; }
    /* stacked: the belt runs the full width and fades at both ends */
    .stds-logos { margin-right: 0; }
    .std-marquee {
      -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
              mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .std-track { animation: none; flex-wrap: wrap; width: auto; }
    .std-track [aria-hidden="true"] { display: none; }
  }
  @media (max-width: 640px) {
    .std-logo { width: 86px; margin-right: 10px; font-size: 10px; border-width: 1.5px; }
    .stds-logos > p { font-size: 12.5px; margin-top: 12px; }
    .stds-panel { padding: 22px 18px; border-radius: 12px; }
    .stds-list strong { font-size: 14px; }
    .stds-list span { font-size: 12px; }
  }

  /* hero tracker: twelve stages from concept to shipment, every name on one line.
     Each step is as wide as its name, so the long ones get the room they need. */
  .steps { max-width: none; gap: 10px; }
  .step { flex: 1 1 auto; }
  .step .label { font-size: clamp(10px, .78vw, 13px); white-space: nowrap; }
  /* below a laptop width twelve names cannot share one row, so only the current stage is named */
  @media (max-width: 1024px) {
    .steps { gap: 4px; position: relative; padding-top: 20px; }
    .step { flex: 1 1 0; }
    .step .label { position: absolute; top: 0; left: 0; font-size: 12px; opacity: 0; transition: opacity .3s; }
    .step.active .label { opacity: 1; }
  }
  /* the stage row now reaches the right edge, where the scroll hint used to sit */
  .hero .scroll { display: none; }

  /* certificate pop-out */
  .std-logo { cursor: zoom-in; transition: transform .3s cubic-bezier(.2,.7,.3,1); }
  .std-logo:hover, .std-logo:focus-visible { transform: scale(1.08); }
  .cert-pop {
    position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
    background: rgba(30, 3, 20, .78); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
    cursor: zoom-out;
  }
  .cert-pop.is-open { opacity: 1; visibility: visible; }
  .cert-pop figure { margin: 0; display: grid; justify-items: center; gap: 18px; transform: scale(.6); transition: transform .45s cubic-bezier(.2,.9,.3,1.15); }
  .cert-pop.is-open figure { transform: scale(1); }
  .cert-pop-ring {
    width: min(70vw, 340px); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center;
    padding: 18%; background: #fff; border: 4px solid var(--accent); box-shadow: 0 30px 80px rgba(0,0,0,.45);
  }
  .cert-pop-ring img { width: 100%; height: 100%; object-fit: contain; }
  .cert-pop figcaption { color: #fff; font-size: clamp(15px, 1.6vw, 20px); font-weight: 600; letter-spacing: .04em; text-align: center; }
  .cert-pop button {
    position: absolute; top: 18px; right: 22px; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.6); background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer;
  }
  @media (prefers-reduced-motion: reduce) {
    .cert-pop, .cert-pop figure, .std-logo { transition: none; }
  }

  /* footer in the site's wine, a shade deeper than the sections above it */
  .foot { background: #1c0312; color: rgba(255,255,255,.74); }
  .foot-base { border-top-color: rgba(215,170,72,.18); }
  .foot-nav a:hover, .foot-reach a:hover { color: var(--accent); }

  /* hero intro: plain light text as before, lines justified so both edges run straight */
  .hero p.hero-lede { max-width: 54ch; text-align: justify; hyphens: auto; -webkit-hyphens: auto; }

  /* process gallery captions in the same wine wash as the product tiles */
  .gal-cap { background: linear-gradient(to top, rgba(46,6,31,.95), rgba(46,6,31,.66) 45%, rgba(75,10,49,0)); }


  /* services: the line under the heading */
  .svc-lead p.svc-sub {
    margin: -8px 0 16px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600;
    letter-spacing: .04em; color: var(--accent-ink);
  }

  /* services cards in the wine wash the rest of the site uses */
  .svc-card::after { background: linear-gradient(to top, rgba(46,6,31,.9) 6%, rgba(46,6,31,.35) 44%, rgba(75,10,49,.05) 72%); }
  .svc-card::before { background: rgba(46,6,31,.42); }

  /* ---------- FOOTER: four equal columns, explore links in two short rows ---------- */
  .foot { border-top: 3px solid var(--accent); }
  .foot-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(24px, 3.4vw, 56px); align-items: start; }
  .foot h3 { padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid rgba(215,170,72,.25); }
  .foot-line { max-width: none; }
  .foot-reach p { max-width: 34ch; }
  @media (max-width: 960px) {
    .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .foot-grid { grid-template-columns: 1fr; }
  }

  /* contact: the email button stays readable on hover */
  .reach .cta:hover { background: var(--wine-deep); color: #fff; }

  /* what we make: a soft frame on every tile */
  .tile { border-radius: 10px; border: 1px solid rgba(215,170,72,.45); }

  /* footer contact lines: gold icon beside each */
  .foot-reach p.foot-ico { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; }
  .foot-ico svg { width: 18px; height: 18px; margin-top: 3px; color: var(--accent); }

  /* ---------- DENIM PAGE ---------- */
  .dn-intro { background: #fff; padding: clamp(48px, 7vw, 96px) clamp(20px, 4vw, 56px); }
  .dn-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
  .dn-photo { margin: 0; overflow: hidden; border-radius: 12px; background: var(--wine-deep); border: 1px solid rgba(215,170,72,.45); }
  .dn-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 55%; }
  .dn-copy h2 { margin: 0 0 16px; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; color: var(--wine-deep); }
  .dn-copy > p:not(.eyebrow) { margin: 0 0 20px; max-width: 48ch; font-size: clamp(14px, 1.2vw, 16px); line-height: 1.8; color: #5b6670; font-weight: 300; }
  .dn-copy .feature-list li::before { background: var(--wine); }

  .dn-range, .dn-gallery { background: #f8f2e7; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 56px); }
  .dn-fabric { background: #fff; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 56px); }
  .dn-range h2, .dn-fabric h2, .dn-gallery h2 {
    margin: 0 0 clamp(22px, 3vw, 36px); font-weight: 600; font-size: clamp(24px, 2.8vw, 36px);
    letter-spacing: .04em; text-transform: uppercase; color: var(--wine-deep);
  }
  .dn-range-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); }
  .dn-range-card {
    padding: 16px 16px 20px; background: #fff; border-radius: 12px; border: 1px solid #ece4d6;
    transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  }
  .dn-range-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(46,6,31,.5); }
  .dn-range-ico { display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: 14px; border-radius: 8px; background: var(--wine-deep); color: var(--accent); }
  .dn-range-ico svg { width: 44px; height: 44px; }
  .dn-range-card h3 { margin: 0 0 4px; font-size: 17px; color: var(--wine-deep); }
  .dn-range-card p { margin: 0; font-size: 14px; color: #5b6670; font-weight: 300; }

  .dn-fabric-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
  .dn-fabric-grid li { padding: 22px 22px 24px; background: #f8f2e7; border-radius: 12px; border-top: 3px solid var(--accent); }
  .dn-fabric-grid span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--accent-ink); }
  .dn-fabric-grid h3 { margin: 8px 0 6px; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--wine-deep); }
  .dn-fabric-grid p { margin: 0; font-size: 14px; line-height: 1.6; color: #5b6670; font-weight: 300; }

  .dn-gallery-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: repeat(2, clamp(120px, 13vw, 180px)); gap: 12px; }
  .dn-shot { margin: 0; overflow: hidden; border-radius: 12px; background: var(--wine-deep); display: grid; place-items: center; }
  .dn-shot-lead { grid-row: span 2; }
  .dn-shot img { width: 100%; height: 100%; object-fit: cover; }
  .dn-shot span { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.45); }

  @media (max-width: 860px) {
    .dn-intro-grid { grid-template-columns: 1fr; }
    .dn-range-grid { grid-template-columns: repeat(2, 1fr); }
    .dn-fabric-grid { grid-template-columns: 1fr; }
  }
  @media (max-width: 640px) {
    .dn-gallery-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-rows: 120px; }
    .dn-shot-lead { grid-column: span 2; grid-row: auto; height: 200px; }
  }
  .dn-shot-lead img { object-position: 50% 100%; }
  .dn-shot img { display: block; }

  /* denim: order facts strip */
  .dn-facts { background: var(--wine-deep); padding: clamp(22px, 3vw, 34px) clamp(20px, 4vw, 56px); }
  .dn-facts-list { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .dn-facts-list li { display: grid; gap: 4px; padding-left: 16px; border-left: 2px solid var(--accent); }
  .dn-facts-list strong { font-size: clamp(18px, 1.8vw, 24px); color: #fff; }
  .dn-facts-list span { font-size: 13px; color: var(--muted); font-weight: 300; }

  /* denim: how to order */
  .dn-steps { background: #fff; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 56px); }
  .dn-steps h2 { margin: 0 0 clamp(22px, 3vw, 36px); font-weight: 600; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: .04em; text-transform: uppercase; color: var(--wine-deep); }
  .dn-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 22px); counter-reset: none; }
  .dn-steps-list li { position: relative; padding: 22px 22px 24px; background: var(--wine-deep); border-radius: 12px; color: #fff; }
  .dn-steps-list li:not(:last-child)::after {
    content: "\2192"; position: absolute; top: 20px; right: 18px; color: var(--accent); font-weight: 700;
  }
  .dn-steps-list span { display: block; font-size: 13px; font-weight: 700; letter-spacing: .14em; color: var(--accent); }
  .dn-steps-list h3 { margin: 8px 0 6px; font-size: 16px; letter-spacing: .04em; text-transform: uppercase; }
  .dn-steps-list p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--muted); font-weight: 300; }

  /* denim: closing band in wine */
  .dn-closer { background: var(--wine-deep); }
  .dn-closer::before { background: linear-gradient(90deg, rgba(46,6,31,.96), rgba(46,6,31,.86) 55%, rgba(75,10,49,.72)); }

  @media (max-width: 860px) {
    .dn-facts-list, .dn-steps-list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 480px) {
    .dn-steps-list { grid-template-columns: 1fr; }
  }
  /* the photo fills its frame exactly, so the crop position takes effect */
  .dn-shot { position: relative; }
  .dn-shot img { position: absolute; inset: 0; }
  .dn-shot-lead img { object-position: 50% 80%; }

  /* process: the five stages before production, as a compact row of numbered circles */
  .pre-steps {
    list-style: none; margin: 0 0 clamp(32px, 4vw, 52px); padding: 0;
    display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(10px, 1.6vw, 22px); position: relative;
  }
  .pre-steps::before {
    content: ""; position: absolute; top: 26px; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(to right, var(--accent), rgba(215,170,72,.3));
  }
  .pre-steps li { position: relative; display: grid; justify-items: center; text-align: center; gap: 6px; }
  .pre-dot {
    width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
    background: var(--wine-deep); color: var(--accent); border: 2px solid var(--accent);
    font-size: 14px; font-weight: 700; letter-spacing: .06em;
    transition: transform .3s cubic-bezier(.2,.7,.3,1);
  }
  .pre-steps li:hover .pre-dot { transform: scale(1.1); }
  .pre-steps h3 { margin: 8px 0 0; font-size: clamp(12.5px, 1.05vw, 14.5px); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--wine-deep); }
  .pre-steps p { margin: 0; max-width: 22ch; font-size: 12.5px; line-height: 1.5; color: #5b6670; font-weight: 300; }
  @media (max-width: 760px) {
    .pre-steps { grid-template-columns: 1fr; gap: 12px; }
    .pre-steps::before { top: 10px; bottom: 10px; left: 21px; right: auto; width: 2px; height: auto; background: rgba(215,170,72,.5); }
    .pre-steps li { grid-template-columns: 44px 1fr; justify-items: start; text-align: left; column-gap: 14px; row-gap: 2px; }
    .pre-dot { width: 44px; height: 44px; font-size: 12px; grid-row: span 2; }
    .pre-steps h3 { margin: 4px 0 0; }
  }

  /* product gallery with filter chips */
  .gf-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
  .gf-chip {
    padding: 8px 18px; border-radius: 999px; border: 1px solid #d9cdb8; background: #fff;
    font: inherit; font-size: 14px; color: var(--wine-deep); cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .gf-chip:hover { border-color: var(--accent); }
  .gf-chip.is-on { background: var(--wine-deep); border-color: var(--wine-deep); color: #fff; }
  .gf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.4vw, 18px); }
  .gf-item { margin: 0; }
  .gf-item[hidden] { display: none; }
  .gf-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid rgba(215,170,72,.45); }
  .gf-item figcaption { margin-top: 8px; font-size: 14px; color: #5b6670; }
  @media (max-width: 760px) { .gf-grid { grid-template-columns: repeat(2, 1fr); } }

  /* product pages: photo on the right when the copy leads */
  @media (min-width: 861px) {
    .dn-intro-flip .dn-photo { order: 2; }
  }
  /* product pages: branding options as pills */
  .dn-brand { background: #f8f2e7; padding: clamp(44px, 6vw, 80px) clamp(20px, 4vw, 56px); }
  .dn-brand h2 { margin: 0 0 clamp(18px, 2.4vw, 28px); font-weight: 600; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: .04em; text-transform: uppercase; color: var(--wine-deep); }
  .dn-brand-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
  .dn-brand-list li {
    display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px;
    background: #fff; border: 1px solid #e3d6c0; font-size: 15px; color: var(--wine-deep);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
  }
  .dn-brand-list svg { width: 20px; height: 20px; color: var(--accent-ink); }
  .dn-brand-list li:hover { background: var(--wine-deep); border-color: var(--wine-deep); color: #fff; }
  .dn-brand-list li:hover svg { color: var(--accent); }

  /* ---------- UNIFORMS: design your uniform ---------- */
  .ku { background: #fff; padding: clamp(44px, 6vw, 84px) clamp(20px, 4vw, 56px); }
  .ku h2, .uo-range h2, .uo-flow h2 { margin: 0 0 8px; font-weight: 600; font-size: clamp(24px, 2.8vw, 36px); letter-spacing: .04em; text-transform: uppercase; color: var(--wine-deep); }
  .ku-sub { margin: 0 0 24px; font-size: 15px; color: #5b6670; font-weight: 300; }
  .ku-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border-bottom: 1px solid #e8dfcf; }
  .ku-tab {
    padding: 14px 10px; border: 0; background: none; font: inherit; font-size: clamp(15px, 1.4vw, 19px); font-weight: 600;
    color: #b9ad9a; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px; transition: color .25s, border-color .25s;
  }
  .ku-tab:hover { color: var(--wine-deep); }
  .ku-tab.is-on { color: var(--wine-deep); border-bottom-color: var(--accent); }
  .ku-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
  .ku-stage { position: relative; aspect-ratio: 300 / 360; max-height: 600px; margin: 0 auto; width: 100%;
    background: #f8f2e7; border: 1px solid #e8dfcf; border-radius: 14px; }
  .ku-figure { position: absolute; inset: 6% 10%; width: 80%; height: 88%; }
  .ku-shirt { fill: var(--shirt); stroke: rgba(0,0,0,.25); stroke-width: 1.5; transition: fill .35s ease; }
  .ku-collar { fill: #fff; stroke: rgba(0,0,0,.25); stroke-width: 1.5; }
  .ku-seam { stroke: rgba(0,0,0,.25); stroke-width: 1.5; }
  .ku-bottom { fill: var(--wine-deep); }
  .ku-shorts { fill: #1f2a44; }
  .ku-stage[data-kit="school"] .ku-only-sports, .ku-stage[data-kit="sports"] .ku-only-school { display: none; }
  .ku-dot {
    position: absolute; transform: translate(-50%, -50%); width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--accent); background: #fff; color: var(--wine-deep); font: inherit; font-weight: 700; cursor: pointer;
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.4); transition: transform .25s ease, background-color .25s, color .25s;
  }
  .ku-dot:hover { transform: translate(-50%, -50%) scale(1.12); }
  .ku-dot.is-on { background: var(--wine-deep); color: var(--accent); }
  .ku-count { margin: 0 0 6px; font-size: 14px; color: #8a7f70; }
  .ku-panel h3 { margin: 0 0 10px; font-size: clamp(22px, 2.2vw, 30px); color: var(--wine-deep); }
  .ku-text { margin: 0 0 30px; min-height: 3.4em; font-size: 16px; line-height: 1.7; color: #5b6670; font-weight: 300; }
  .ku-label { margin: 0 0 10px; font-size: 14px; color: #8a7f70; }
  .ku-swatches { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
  .ku-sw { width: 44px; height: 44px; border-radius: 50%; background: var(--c); border: 2px solid #d9cdb8; cursor: pointer; transition: transform .2s; }
  .ku-sw:hover { transform: scale(1.08); }
  .ku-sw.is-on { outline: 3px solid var(--accent); outline-offset: 3px; }

  /* uniforms: range as pills, order flow as circles */
  .uo-range { background: #f8f2e7; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px); }
  .uo-range h2, .uo-flow h2 { margin-bottom: clamp(18px, 2.4vw, 28px); }
  .uo-range-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 18px); }
  .uo-range-list li { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: #fff; border: 1px solid #e3d6c0; border-radius: 12px; font-size: 16px; color: var(--wine-deep);
    transition: transform .25s ease, box-shadow .25s ease; }
  .uo-range-list li:hover { transform: translateY(-3px); box-shadow: 0 16px 30px -20px rgba(46,6,31,.5); }
  .uo-range-list svg { width: 26px; height: 26px; color: var(--accent-ink); flex: 0 0 auto; }
  .uo-flow { background: #fff; padding: clamp(40px, 5vw, 72px) clamp(20px, 4vw, 56px); }
  .uo-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .uo-step span {
    width: clamp(110px, 11vw, 150px); aspect-ratio: 1 / 1; border-radius: 50%; display: grid; place-items: center; padding: 14px; text-align: center;
    background: var(--wine-deep); border: 3px solid var(--accent); color: #fff; font-size: clamp(13px, 1.15vw, 16px); font-weight: 600; line-height: 1.3;
  }
  .uo-step.is-last span { background: var(--accent); color: var(--wine-deep); }
  .uo-arrow svg { width: 28px; height: 28px; color: var(--accent); }

  @media (max-width: 860px) {
    .ku-grid { grid-template-columns: 1fr; }
    .ku-stage { max-width: 420px; }
    .uo-range-list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 640px) {
    .uo-steps { flex-direction: column; }
    .uo-arrow svg { transform: rotate(90deg); }
    .uo-range-list { grid-template-columns: 1fr; }
  }
  .ku-stage[data-kit="sports"] .ku-dot[data-spot="3"] { top: 64% !important; }

  /* contact form: spam trap kept off screen, and a waiting state on the button */
  .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-send:disabled { opacity: .6; cursor: wait; }