/* ==========================================================================
   CSW Inc — shared stylesheet
   ========================================================================== */

:root {
  --hero-top: 24px;        /* gap between nav bar and every page hero */
  --navy: #002060;
  --blue: #0070c0;
  --blue-dark: #005a9c;
  --gold: #ffcc32;
  --pink: #f092ba;
  --cyan: #32bff2;
  --teal: #2db8d0;
  --green: #b8d362;
  --box-blue: #e2eef8;
  --text: #252525;
  --text-light: #4d4d4d;
  --border: #d9d9d9;
  --white: #ffffff;
  --light: #f5f6f7;
  --light-dark: #e6e9ec;
  --max: 1300px;
  --radius: 10px;
  --accent-green: #78be43;
  --accent-pink: #e8007d;
  --accent-orange: #f7941d;
  --accent-dark: #2d2d2d;
  --accent-mid: #555;
  --font-heading: "Poppins", "Segoe UI", Arial, Helvetica, sans-serif;
  --font-body: "Inter", "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 16px;
}

* { box-sizing: border-box; }

.section-divider {
  display: block;
  border: none;
  border-top: 1px solid #eef0f3;
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.page-watermark {
  position: fixed;
  right: -14%;
  bottom: -12%;
  width: 65vw;
  max-width: 1150px;
  min-width: 480px;
  opacity: 0.14;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 700px) {
  .page-watermark { width: 90vw; min-width: 0; right: -20%; bottom: -8%; }
}

/* flex/grid children default to min-width:auto, which stops long text or
   flex rows from shrinking below their content size and forces the page
   to overflow horizontally on narrow screens — reset it everywhere. */
.nav-row, .nav-row > *,
.hero, .hero-copy, .hero-img,
.about-hero-grid, .dna-hero-inner, .about-hero-img,
.problem-hero, .problem-hero-copy, .hero-photo-wrap,
.card-row, .info-card,
.solutions-grid, .solution-card,
.solutions-list, .solution-item,
.photo-pair, .testi-grid, .testi-box, .testi-photo-row {
  min-width: 0;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 40px;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--navy);
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

p { line-height: 1.55; margin: 0 0 16px; color: var(--text); }

.eyebrow {
  font-family: var(--font-heading);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 28px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 2px solid var(--blue);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .15s ease;
}
.btn-primary {
  background: var(--blue);
  color: var(--white);
}
.btn-primary:hover { background: var(--blue-dark); }
.btn-outline {
  background: transparent;
  color: var(--blue);
}
.btn-outline:hover { background: var(--box-blue); }
.btn-white {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}
.btn-white:hover { background: #eaf3fb; }

/* ---------- header / nav ---------- */
.site-header {
  background: var(--white);
  border-bottom: 1px solid #e8e8e8;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 40px;
  max-width: var(--max);
  margin: 0 auto;
  gap: 24px;
  flex-wrap: wrap;
}

.color-stripe {
  position: relative;
  width: 100%;
  height: 6px;
  overflow: hidden;
}
.color-stripe__bar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  animation: stripe-grow .225s linear forwards;
}
.color-stripe__bar--1 { background: #A3CE4B; --stripe-w: 100%; z-index: 1; animation-delay: 0s; }
.color-stripe__bar--2 { background: #FBB833; --stripe-w: 75%;  z-index: 2; animation-delay: .169s; }
.color-stripe__bar--3 { background: #EF7BAF; --stripe-w: 50%;  z-index: 3; animation-delay: .319s; }
.color-stripe__bar--4 { background: #3EC5F7; --stripe-w: 25%;  z-index: 4; animation-delay: .431s; }
@keyframes stripe-grow {
  from { width: 0; }
  to   { width: var(--stripe-w); }
}
.color-stripe--static .color-stripe__bar {
  animation: none;
  width: var(--stripe-w);
}
@media (prefers-reduced-motion: reduce) {
  .color-stripe__bar { animation: none; width: var(--stripe-w); }
}
.logo img { height: 38px; width: auto; }
.main-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex: 1;
  justify-content: center;
  font-weight: 500;
  font-size: .9rem;
  color: var(--text-light);
}
.main-nav a { white-space: nowrap; letter-spacing: .02em; transition: color .2s; }
.main-nav a:hover { color: var(--teal); }
.main-nav a.active { color: var(--teal); }
.has-caret { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.has-caret img { width: 10px; height: auto; opacity: .7; }
.nav-actions { display: flex; align-items: center; gap: 18px; }
.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.menu-toggle img { width: 26px; height: auto; }

.nav-dropdown { position: relative; }
.nav-dropdown > .has-caret img { transition: transform .15s ease; }
.nav-dropdown.open > .has-caret img { transform: rotate(180deg); }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  padding-top: 14px;
  left: 0;
  background: var(--white);
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0,0,0,.12);
  padding: 6px 0;
  min-width: 270px;
  flex-direction: column;
  z-index: 200;
}
.nav-dropdown.open .dropdown-menu,
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu { display: flex; }
.dropdown-menu a {
  display: block;
  padding: 10px 18px;
  border-radius: 0;
  font-size: .85rem;
  color: var(--text-light);
  white-space: nowrap;
}
.dropdown-menu a:hover { background: var(--light); color: var(--teal); }
.dropdown-menu a.active { color: var(--teal); font-weight: 700; }

.nav-actions .btn-primary {
  background: #152530;
  border-color: #152530;
  color: var(--white);
  padding: 8px 18px;
  font-size: .9rem;
  font-weight: 500;
}
.nav-actions .btn-primary:hover { background: #1e3848; border-color: #1e3848; }

/* ---------- hero (home) ---------- */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  padding: var(--hero-top) 0 40px;
}
.hero h1, .problem-hero h1, .page-hero-band h1 { font-size: 2.5rem; line-height: 1.18; }
.hero .lede { font-size: 1.02rem; color: var(--text-light); max-width: 480px; }
/* Heritage line: Lora italic echoes the legacy pull-quote on the about page,
   so the emphasis comes from the typeface rather than weight. */
.hero-badge {
  font-family: "Lora", Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 500;
  font-size: 1.18rem;
  line-height: 1.4;
  color: var(--navy);
  max-width: 480px;
  margin-top: 18px;
}
.hero-actions { display: flex; gap: 14px; margin-top: 22px; }
.hero-img img { border-radius: 4px; width: 100%; }

/* ---------- home hero: layered package composite ---------- */
/* Seven cutouts positioned on a 1535 x 1025 stage (same frame as the old
   hero photo). Each drops in on its own, staggered via --drop-delay. */
.hero-stack {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.hero-stack::before { content: ""; display: block; padding-top: 66.775%; }
.hero-stack .hero-item {
  position: absolute;
  display: block;
  margin: 0;
  opacity: 0;
  /* safety net: if the script never arms the stack, drop in anyway after 2.5s */
  animation: hero-drop-fallback .85s both;
  animation-delay: calc(var(--drop-delay, 0ms) + 2.5s);
  will-change: transform, opacity;
}
/* Different animation-name on purpose: changing only the delay would not
   restart a running animation, but a new name starts it fresh when armed. */
.hero-stack.is-ready .hero-item {
  animation-name: hero-drop;
  animation-delay: var(--drop-delay, 0ms);
}
.hero-stack .hero-item img { display: block; width: 100%; height: auto; border-radius: 0; }
/* Hover lift lives on the <img>, not the <picture>: the picture's drop-in
   keyframes own its transform (fill-mode: both), so a transform set there
   would be ignored. Nested transforms compose fine. Falls back slowly on
   mouse-out, rises a touch quicker on mouse-in. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-stack .hero-item img {
    transition: transform .42s cubic-bezier(.4, 0, .6, 1);
  }
  /* JS alpha hit-testing adds .is-lifted to the item whose visible pixels are
     under the cursor (the cutouts overlap as rectangles, so plain :hover
     would pick the wrong one). Without JS/canvas, fall back to :hover. */
  .hero-stack .hero-item.is-lifted img,
  .hero-stack:not(.has-hit-test) .hero-item:hover img {
    transform: translate3d(0, -12px, 0) scale(1.02);
    transition-duration: .28s;
    transition-timing-function: cubic-bezier(.2, .7, .2, 1);
  }
}
.hero-item--box { left: 6.541%; top: 8.741%; width: 43.846%; --drop-delay: 0ms; }
.hero-item--chips-bag { left: 41.045%; top: 21.639%; width: 26.354%; --drop-delay: 120ms; }
.hero-item--mango-pouch { left: 65.914%; top: 16.110%; width: 28.145%; --drop-delay: 240ms; }
.hero-item--tea-carton { left: 0.521%; top: 45.041%; width: 32.713%; --drop-delay: 360ms; }
.hero-item--oat-can { left: 44.928%; top: 48.139%; width: 18.726%; --drop-delay: 480ms; }
.hero-item--bottle { left: 28.094%; top: 36.978%; width: 21.188%; --drop-delay: 600ms; }
.hero-item--shrink-pack { left: 54.585%; top: 50.590%; width: 44.894%; --drop-delay: 720ms; }
@keyframes hero-drop {
  0%   { opacity: 0; transform: translate3d(0, -18%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  18%  { opacity: 1; }
  55%  { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  72%  { transform: translate3d(0, -3.5%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86%  { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  94%  { transform: translate3d(0, -1%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes hero-drop-fallback {
  0%   { opacity: 0; transform: translate3d(0, -18%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  18%  { opacity: 1; }
  55%  { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  72%  { transform: translate3d(0, -3.5%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  86%  { transform: translate3d(0, 0, 0); animation-timing-function: cubic-bezier(0, .55, .45, 1); }
  94%  { transform: translate3d(0, -1%, 0); animation-timing-function: cubic-bezier(.55, 0, 1, .45); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stack .hero-item { opacity: 1; animation: none; }
}

/* ---------- problem hero (page 2 / 3) ---------- */
.problem-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
  padding: var(--hero-top) 0 50px;
}
.problem-hero .lede { color: var(--text-light); max-width: 480px; }
.problem-hero-actions { display: flex; gap: 14px; margin: 22px 0 18px; }
.status-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 9px 16px; border-radius: 14px; background: var(--light); border: 1px solid var(--border); font-size: 0.9rem; font-weight: 500; color: var(--text); }
.status-badge .status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; background: var(--accent-green); }
.status-badge .status-lines { display: flex; flex-direction: column; line-height: 1.35; }
.status-badge .status-hours { font-size: 0.78rem; font-weight: 400; color: var(--text-light); }
.status-badge.is-open .status-dot { background: var(--accent-green); box-shadow: 0 0 0 rgba(120, 190, 67, 0.6); animation: status-pulse 1.8s infinite; }
.status-badge.is-closed .status-dot { background: var(--accent-mid); animation: none; }
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(120, 190, 67, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(120, 190, 67, 0); }
  100% { box-shadow: 0 0 0 0 rgba(120, 190, 67, 0); }
}
.checklist { display: flex; gap: 26px; flex-wrap: wrap; }
.checklist span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; color: #333; }
.checklist img { width: 20px; height: 20px; }

.hero-photo-wrap { position: relative; }
.hero-photo-wrap img.main-photo { border-radius: 6px; width: 100%; height: auto; }
.inset-box {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: -34px;
  background: var(--white);
  border: 2px solid var(--blue);
  border-radius: 6px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.inset-box img.badge-icon { width: 52px; height: 52px; flex-shrink: 0; }
.inset-box .title { font-family: var(--font-heading); color: var(--blue); font-weight: 700; font-size: 1.1rem; margin: 0 0 2px; }
.inset-box .sub { font-size: 0.92rem; color: #222; margin: 0; }
.inset-box img.esko { height: 26px; width: auto; margin-top: 4px; }

/* ---------- 4-up icon card row ---------- */
.section-title { text-align: center; font-size: 1.7rem; margin-bottom: 34px; }
.section-title.tight { margin-bottom: 20px; }
.why-start-bg {
  background: var(--navy);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 48px 0;
}
.why-start-bg .section-title { color: var(--white); }
.why-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}
.why-start-grid .section-sub { margin: 0; color: rgba(255,255,255,.85); }
.why-start-grid .card-row.cols-2 { gap: 12px; height: 100%; align-self: stretch; align-content: space-between; }
.why-start-grid .info-card { padding: 0; border: none; text-align: left; }
.why-start-grid .info-card p { color: rgba(255,255,255,.75); }
.why-start-grid .info-card:nth-child(1) h3 { color: var(--gold); }
.why-start-grid .info-card:nth-child(2) h3 { color: var(--pink); }
.why-start-grid .info-card:nth-child(3) h3 { color: var(--cyan); }
.why-start-grid .info-card:nth-child(4) h3 { color: var(--green); }
.why-start-grid .info-card-link { color: var(--cyan); }
.info-card-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--blue);
  font-weight: 600;
  font-size: 0.85rem;
}
.info-card-link:hover { text-decoration: underline; }
.why-start-grid .info-card h3 { font-size: 1rem; margin-bottom: 2px; }
.why-start-grid .info-card p { font-size: 0.9rem; }
.card-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  padding: 0 0 10px;
}
.info-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 20px;
  text-align: center;
}
.info-card img { width: 64px; height: 64px; margin: 0 auto 18px; }
.info-card h3 { font-size: 1rem; margin-bottom: 8px; color: var(--navy); }
.info-card p { font-size: 0.9rem; color: var(--text-light); margin: 0; }

/* dot-gain css icon (page 3, card 1) */
.dot-gain-icon {
  width: 64px; height: 64px; margin: 0 auto 18px;
  border-radius: 50%;
  background: #8598e0;
  display: flex; align-items: center; justify-content: center;
}
.dot-gain-icon span {
  width: 26px; height: 26px; border-radius: 50%; background: #1e40c9;
}

/* ---------- photo pair (home) ---------- */
.photo-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin: 40px 0;
}
.photo-pair img { border-radius: 6px; width: 100%; }

/* ---------- callout / why-matter box ---------- */
.callout {
  background: var(--box-blue);
  border-radius: var(--radius);
  padding: 30px 36px;
  margin: 34px 0;
}
.callout p {
  color: var(--navy);
  font-style: italic;
  font-weight: 500;
  font-size: 1.02rem;
  margin: 0;
}

/* ---------- solutions grid (home) ---------- */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 48px;
  row-gap: 30px;
  margin: 10px 0 46px;
}
.solution-card {
  color: var(--text);
}
.solution-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: none;
  color: var(--navy);
  margin: 0 0 14px;
  letter-spacing: normal;
}
.solution-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid #e3e6ec;
}
.solution-card li {
  margin: 0;
  border-bottom: 1px solid #e3e6ec;
}
.solution-card a {
  font-size: 0.95rem;
  color: #333c4d;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 0;
  text-decoration: none;
}
.solution-card a .arrow {
  color: #a7adb8;
  font-weight: 400;
  flex-shrink: 0;
}
.solution-card a:hover span:first-child { text-decoration: underline; }

.link-arrow { margin-top: 24px; text-align: left; }
.link-arrow a {
  color: var(--blue);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- CSW solutions (page 2 / 3) ---------- */
.solutions-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 10px 0 40px;
}
.solution-item {
  padding: 6px 26px;
  border-left: 1px solid var(--border);
  text-align: center;
}
.solution-item:first-child { border-left: none; }
.solution-item img { width: 56px; height: 56px; margin: 0 auto 14px; }
.solution-item h3 { font-size: 1rem; color: var(--navy); margin-bottom: 8px; }
.solution-item p { font-size: 0.88rem; color: var(--text-light); margin: 0; }
.stat { font-family: var(--font-heading); font-size: 1.7rem; font-weight: 700; color: var(--blue); }
.solution-item .learn { display: inline-flex; gap: 5px; margin-top: 10px; font-size: 0.88rem; font-weight: 600; color: var(--blue); }
.solution-item .learn:hover { text-decoration: underline; }
.solutions-list.row2 { margin-top: -6px; }

/* ---------- testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 40px 0;
}
.testi-box {
  background: var(--box-blue);
  border-radius: var(--radius);
  padding: 26px;
  position: relative;
}
.testi-box blockquote {
  margin: 0 0 10px;
  font-style: italic;
  color: var(--navy);
  font-size: 0.98rem;
}
.testi-box cite { font-style: normal; font-weight: 700; color: var(--navy); font-size: 0.92rem; }
.testi-photo-row { display: flex; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; }
.testi-photo-row img.testi-photo { width: 140px; border-radius: 4px; }
.badge-circle {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: var(--white); text-align: center; flex-shrink: 0;
}
.badge-circle.gold { background: #d8a72c; }
.badge-circle.blue { background: var(--blue); }
.badge-circle.green { background: #2ea84a; }
.badge-circle .num { font-family: var(--font-heading); font-size: 1.3rem; font-weight: 800; line-height: 1; }
.badge-circle .lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: .03em; margin-top: 4px; }
.badge-circle.small { width: 78px; height: 78px; padding: 6px; }
.badge-circle.small .lbl { font-size: 0.55rem; line-height: 1.2; }
.badge-circle.tiny-text { font-size: 0.52rem; line-height: 1.15; padding: 8px; }
.badge-inline { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pill-badges { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pill-badges img { width: 70px; height: 70px; }
.legend-lines { font-size: 0.85rem; color: var(--text-light); min-width: 0; }
.legend-lines div { margin-bottom: 2px; }

/* ---------- contact page ---------- */
.location-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.location-card {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px 26px;
  overflow: hidden;
}
.location-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
}
.location-card.accent-gold::before { background: var(--gold); }
.location-card.accent-pink::before { background: var(--pink); }
.location-card.accent-cyan::before { background: var(--cyan); }
.location-card.accent-green::before { background: var(--green); }
.location-state {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.location-card h3 { font-size: 1.1rem; margin-bottom: 10px; }
.location-addr { color: var(--text-light); font-size: 0.92rem; margin-bottom: 18px; }
.location-addr a { color: inherit; }
.location-addr a:hover { color: var(--blue); text-decoration: underline; }
.location-detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 8px;
}
.location-detail svg { width: 15px; height: 15px; flex-shrink: 0; }
.location-detail:hover { text-decoration: underline; }

/* ---------- resources page ---------- */
.resource-anchor { scroll-margin-top: 96px; }
.section-alt { background: rgba(245, 246, 247, 0.55); }
.section-alt .pdf-card,
.section-alt .info-card { background: var(--white); }
.page-hero-band { background: var(--box-blue); }
.section.page-hero-band { padding-top: var(--hero-top); }

.resources-page .page-hero-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, #eaf3fb 0%, rgba(234,243,251,.5) 55%, rgba(234,243,251,0) 100%);
}
.resources-page .page-hero-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,32,96,.10) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 100%);
}
.resources-page .page-hero-band::after {
  content: '';
  position: absolute;
  top: -25%;
  right: -8%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,184,208,.18) 0%, transparent 70%);
}
.resources-page .dna-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}
.resources-page .page-hero-band .lede { color: var(--text-light); max-width: 480px; }
.resources-page .page-hero-band .jump-links { justify-content: flex-start; }

/* cutting dies hero: copy on the left, die cutout on the right */
.die-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.die-hero-grid, .die-hero-img { min-width: 0; }
/* Copy sits at the top of the band (24px below the nav, like the home hero)
   instead of being vertically centred against the taller photo. */
.die-hero-grid .dna-hero-inner { align-self: start; }
.die-hero-img img {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(0,32,96,.18));
}
@media (max-width: 980px) {
  .die-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .die-hero-img img { max-width: 420px; }
}
.jump-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.jump-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(0,32,96,.05);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.jump-links a::after {
  content: "\2192";
  font-size: 0.85rem;
  opacity: .55;
  transition: transform .15s ease, opacity .15s ease;
}
.jump-links a:hover {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(0,112,192,.25);
}
.jump-links a:hover::after { opacity: 1; transform: translateX(2px); }

.card-row.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card-row.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---------- plain bullet list ---------- */
.plain-bullets {
  list-style: disc;
  margin: 0;
  padding-left: 22px;
}
.plain-bullets li {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.98rem;
  break-inside: avoid;
}

/* ---------- pain point / solution comparison ---------- */
.pain-point-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 34px;
}
.pain-point {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.pain-point-problem,
.pain-point-solution {
  padding: 26px 30px;
}
.pain-point-problem {
  background: var(--light);
}
.pain-point-solution {
  background: var(--box-blue);
}
.pain-point-problem h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pain-point-problem p,
.pain-point-solution p { font-size: 0.92rem; color: var(--text-light); margin: 0; }
.pp-label {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
}
.pp-label--pain {
  background: #f7d9d9;
  color: #a13939;
}
.pp-label--solution {
  background: var(--blue);
  color: var(--white);
}
.pain-point-solution h3 { font-size: 1.05rem; margin-bottom: 8px; }
.pp-result-label {
  font-weight: 700;
  color: var(--navy);
  margin: 14px 0 6px;
}
.pain-point-solution .plain-bullets { margin-top: 4px; }
.pain-point-solution .plain-bullets li { color: var(--text-light); font-size: 0.92rem; margin-bottom: 6px; }

@media (max-width: 760px) {
  .pain-point { grid-template-columns: 1fr; }
  .card-row.cols-3 { grid-template-columns: 1fr; }
  .plain-bullets[style] { columns: 1 !important; }
}

/* ---------- partner card (resources / sustainability) ---------- */
.partner-card {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 36px;
  max-width: 860px;
  margin: 0 auto;
  text-align: left;
  box-shadow: 0 2px 12px rgba(0,32,96,.05);
}
.partner-logo-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.partner-logo-wrap img { width: 160px; object-fit: contain; }
.partner-content h3 { font-size: 1.15rem; margin-bottom: 6px; }
.partner-tagline { font-size: .85rem; font-style: italic; color: var(--blue); margin-bottom: 14px; }
.partner-content p { font-size: .95rem; color: var(--text-light); margin-bottom: 12px; }
.partner-content p:last-of-type { margin-bottom: 0; }
.product-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 16px; }
.product-pill {
  background: var(--box-blue);
  color: var(--blue-dark);
  border: 1px solid #c3ddf1;
  border-radius: 20px;
  padding: 4px 14px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.partner-cta {
  display: inline-block;
  margin-top: 16px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--blue);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
}
.partner-cta:hover { border-color: var(--blue); }
@media (max-width: 640px) {
  .partner-card { flex-direction: column; align-items: center; text-align: center; }
  .product-pills { justify-content: center; }
}

/* ---------- pdf-style card grid (case studies / product innovations) ---------- */
.pdf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 22px;
}
.pdf-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 20px 24px;
  box-shadow: 0 2px 10px rgba(0,32,96,.05);
  transition: box-shadow .2s ease, transform .2s ease;
}
.pdf-card:hover { box-shadow: 0 10px 26px rgba(0,32,96,.12); transform: translateY(-3px); }
.pdf-card-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 16px;
  background: var(--light);
}
.pdf-card h3 { font-size: 1rem; margin-bottom: 8px; }
.pdf-card p { font-size: .9rem; color: var(--text-light); margin: 0 0 4px; }

.offer-with-card {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  max-width: 1040px;
  margin: 0 auto;
}
.offer-with-card .plain-bullets { flex: 1; }
.offer-with-card .pdf-card { width: 300px; flex-shrink: 0; margin: 0; }
@media (max-width: 760px) {
  .offer-with-card { flex-direction: column; }
  .offer-with-card .pdf-card { width: 100%; }
}

/* cutting dies: frosted panel around "Cutting Dies We Offer" (same treatment as the Legacy box on About Us, full width) */
.offer-box {
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
@media (max-width: 760px) {
  .offer-box { padding: 24px 20px; }
}

.dl-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--blue);
}
.dl-link:hover { text-decoration: underline; }
.dl-link svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--navy);
  text-align: center;
  font-size: 0.85rem;
  color: #9fb7d9;
}
.footer-top {
  padding: 32px 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
}
.footer-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.footer-logo img { height: 40px; width: auto; }
.footer-mission {
  margin: 8px 0 0;
  color: #9fb7d9;
  line-height: 1.55;
  max-width: 380px;
}
.footer-band-text {
  color: var(--white);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.4rem;
  margin: 0;
}
.footer-band-sub {
  margin: 0 0 6px;
  color: #9fb7d9;
}
.footer-band-contact {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.footer-band-contact a {
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.footer-band-contact a:hover { border-color: var(--white); }
.footer-locations {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
  color: #9fb7d9;
}
.footer-locations a {
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.4);
}
.footer-locations a:hover { border-color: var(--white); }
.footer-loc-sep { color: rgba(255,255,255,0.35); }
.footer-bottom { padding: 20px 40px; }

@media (max-width: 700px) {
  .footer-top { flex-direction: column; gap: 28px; }
}

/* ---------- utility ---------- */
.section { padding: 44px 0; }
.section.tight { padding: 20px 0 44px; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero, .problem-hero { grid-template-columns: 1fr; }
  .why-start-grid { grid-template-columns: 1fr; gap: 24px; }
  .card-row, .solutions-grid, .solutions-list { grid-template-columns: repeat(2, 1fr); }
  .solution-item { border-left: none; border-top: 1px solid var(--border); padding: 22px 10px; }
  .solution-item:first-child { border-top: none; }
  .photo-pair, .testi-grid { grid-template-columns: 1fr; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  /* relative (not static) so the box paints above the photo it overlaps */
  .inset-box { position: relative; left: auto; right: auto; bottom: auto; margin-top: -30px; margin-left: 20px; margin-right: 20px; }
  .hero-photo-wrap { margin-bottom: 40px; }
}
@media (max-width: 600px) {
  .wrap, .nav-row { padding-left: 20px; padding-right: 20px; }
  .card-row, .solutions-grid, .solutions-list { grid-template-columns: 1fr; }
  .hero h1, .problem-hero h1, .page-hero-band h1 { font-size: 1.9rem; }
}
@media (max-width: 980px) {
  .location-grid { grid-template-columns: 1fr; }
}

/* mobile nav open state */
.main-nav.open {
  display: flex;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--white);
  flex-direction: column;
  align-items: flex-start;
  padding: 20px 40px;
  border-bottom: 1px solid #eef0f3;
  gap: 16px;
}
.main-nav.open .dropdown-menu {
  position: static;
  transform: none;
  box-shadow: none;
  border: none;
  padding: 4px 0 0 14px;
  min-width: 0;
}

/* ── WHAT WE DO ── */
.wwd-section {
  --wwd-green: var(--accent-green);
  --wwd-teal: var(--teal);
  --wwd-pink: var(--accent-pink);
  --wwd-orange: var(--accent-orange);
  --wwd-dark: var(--accent-dark);
  --wwd-mid: var(--accent-mid);
  padding: 72px 0;
}
.wwd-section .section-inner {
  margin: 0 auto;
}
.wwd-section .wwd-header {
  text-align: center;
}
.wwd-section .wwd-services-title {
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 700;
  margin-bottom: 12px;
  letter-spacing: -.02em;
  color: var(--navy);
}
.wwd-section .section-sub {
  color: var(--wwd-mid);
  max-width: 580px;
  margin-bottom: 48px;
}
.wwd-section .services-top-left .section-sub { margin-bottom: 0; }
.wwd-section .services-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  margin-bottom: 56px;
}
.wwd-section .services-top-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.wwd-section .services-highlight {
  display: flex;
  gap: 16px;
  align-items: stretch;
}
.wwd-section .sh-bar {
  width: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}
.wwd-section .sh-bar--teal   { background: var(--wwd-teal); }
.wwd-section .sh-bar--green  { background: var(--wwd-green); }
.wwd-section .sh-bar--orange { background: var(--wwd-orange); }
.wwd-section .sh-bar--pink   { background: var(--wwd-pink); }
.wwd-section .services-highlight p {
  color: var(--wwd-mid);
  font-size: .9375rem;
  line-height: 1.65;
  margin: 0;
}
.wwd-section .services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.wwd-section .service-card {
  background: var(--light);
  border-radius: 10px;
  padding: 32px 28px;
  border-top: 4px solid var(--wwd-teal);
  transition: box-shadow .2s, transform .2s;
}
.wwd-section .service-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.1); transform: translateY(-3px); }
.wwd-section .service-card:nth-child(1) { border-color: var(--wwd-teal); }
.wwd-section .service-card:nth-child(2) { border-color: var(--wwd-pink); }
.wwd-section .service-card:nth-child(3) { border-color: var(--wwd-orange); }
.wwd-section .service-card:nth-child(4) { border-color: var(--wwd-green); }
.wwd-section .service-card h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--navy);
}
.wwd-section .service-card p { font-size: .875rem; color: var(--wwd-mid); line-height: 1.6; }
.wwd-section .service-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.wwd-section .service-card li { font-size: .875rem; color: var(--wwd-mid); line-height: 1.6; padding-left: 14px; position: relative; }
.wwd-section .service-card li::before { content: ''; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .45; }
.wwd-section .service-card ul ul { margin-top: 8px; gap: 6px; }
.wwd-section .service-card ul ul li { padding-left: 14px; }
@media (max-width: 900px) {
  .wwd-section .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .wwd-section .services-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .wwd-section .services-top { grid-template-columns: 1fr; gap: 36px; }
}

/* ── WHO WE SERVE ── */
.wwd-section .wwd-who-we-serve { margin-top: 64px; }
.wwd-section .wwd-who-we-serve .section-sub { text-align: center; margin: 0 auto 40px; }
.wwd-section .tracks {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 24px;
  align-items: stretch;
}
.wwd-section .track {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 18px rgba(0,0,0,0.09);
}
.wwd-section .track-bo .track-items { flex: 1; }
.wwd-section .track-header { padding: 16px 24px; color: var(--white); }
.wwd-section .track-bo .track-header { background: var(--wwd-teal); }
.wwd-section .track-printer .track-header { background: var(--wwd-dark); }
.wwd-section .track-header h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--white); }
.wwd-section .track-header h3 a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.wwd-section .track-items { list-style: none; background: var(--white); margin: 0; padding: 0; }
.wwd-section .track-items li { display: flex; flex-direction: column; padding: 16px 24px; border-bottom: 1px solid #f0f0f0; }
.wwd-section .track-items li:last-child { border-bottom: none; }
.wwd-section .track-items li strong { font-size: .93rem; font-weight: 700; color: var(--wwd-dark); margin-bottom: 3px; }
.wwd-section .track-items li strong a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wwd-section .track-items li strong a:hover { color: var(--wwd-orange); }
.wwd-section .track-items li span { font-size: .83rem; color: var(--wwd-mid); line-height: 1.55; }
.wwd-section .printer-splits { display: grid; grid-template-columns: 1fr 1fr; }
.wwd-section .printer-sub { overflow: hidden; }
.wwd-section .printer-sub + .printer-sub { border-left: 1px solid #eee; }
.wwd-section .printer-sub-header {
  padding: 10px 24px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--white);
}
.wwd-section .printer-sub-header a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.wwd-section .printer-flex .printer-sub-header { background: var(--wwd-pink); }
.wwd-section .printer-corr .printer-sub-header { background: var(--wwd-orange); }
.wwd-section .printer-sub .track-items li { padding: 14px 20px; }
.wwd-section .printer-shared {
  border-top: 1px solid #eee;
  background: #fafafa;
  padding: 14px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3px;
}
.wwd-section .printer-shared strong { font-size: .9rem; font-weight: 700; color: var(--wwd-dark); }
.wwd-section .printer-shared span { font-size: .82rem; color: var(--wwd-mid); line-height: 1.5; }
@media (max-width: 900px) {
  .wwd-section .tracks { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .wwd-section .printer-splits { grid-template-columns: 1fr; }
  .wwd-section .printer-sub + .printer-sub { border-left: none; border-top: 1px solid #eee; }
}

/* ---------- about-us page (DNA sections) ---------- */
.about-page {
  --green:  var(--accent-green);
  --pink:   var(--accent-pink);
  --orange: var(--accent-orange);
  --dark:   var(--accent-dark);
  --mid:    var(--accent-mid);
}
body.about-page {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: var(--dark);
  line-height: 1.6;
}
.about-page .site-header, .about-page .site-header * { font-family: var(--font-body); line-height: normal; }

/* ── PAGE HERO ── */
.about-page .page-hero-band {
  background: transparent;
}
.about-page .about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.about-page .about-hero-img img {
  width: 100%;
}
.about-page .page-hero-band .lede {
  font-size: 1.02rem;
  color: var(--text-light);
}
.about-page .page-hero-band .jump-links { justify-content: flex-start; }
@media (max-width: 980px) {
  .about-page .about-hero-grid { grid-template-columns: 1fr; }
  .about-page .about-hero-img { order: -1; }
}

/* ── SECTIONS ── */
.about-page .section {
  padding: 80px 24px;
}
.about-page .section.page-hero-band { padding-top: var(--hero-top); }
.about-page .section-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.about-page .section-label {
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--teal);
  margin-bottom: 10px;
}
.about-page .section h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.about-page .section-body {
  color: var(--mid);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 20px;
}
.about-page .placeholder-block {
  background: var(--light);
  border-left: 4px solid var(--teal);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  color: var(--mid);
  font-size: .95rem;
}

/* ── DNA SECTION LAYOUT ── */
.about-page .dna-row {
  display: flex;
  align-items: center;
  gap: 64px;
}
.about-page .dna-row.flip {
  flex-direction: row-reverse;
}
.about-page .dna-text {
  flex: 1;
  min-width: 0;
}
.about-page .dna-visual {
  flex: 0 0 320px;
  height: 300px;
  border-radius: 20px;
  background: var(--v-accent, var(--teal));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 12px 40px rgba(0,0,0,0.14);
}
.about-page .dna-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 28% 28%, rgba(255,255,255,0.22) 0%, transparent 65%);
}
.about-page .dna-visual-bg {
  position: absolute;
  font-size: 6.5rem;
  font-weight: 900;
  color: rgba(255,255,255,0.1);
  text-transform: uppercase;
  letter-spacing: -0.04em;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}
.about-page .dna-visual-label {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,0.92);
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* alternate accent colours per section */
.about-page .dna-legacy  .section-label { color: var(--teal); }
.about-page .dna-legacy  .placeholder-block { border-color: var(--teal); }
.about-page .dna-legacy  .dna-row { align-items: flex-start; }
.about-page .dna-legacy {
  padding-top: 32px;
  position: relative;
}
.about-page .dna-legacy > .section-inner { position: relative; z-index: 1; }

/* ── LEGACY PULL-QUOTE ── */
.about-page .legacy-quote {
  margin: 0 0 28px;
  padding: 0;
  font-family: 'Lora', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  line-height: 1.4;
  color: var(--accent-dark);
  max-width: 480px;
}

/* ── LEGACY MOSAIC (right column, equal width to the text column) ──
   .legacy-mosaic-col is the flex column; it holds the board (.legacy-mosaic-side) and, under
   it, the collapsed extension strip (.legacy-mosaic-ext-wrap, further down).
   A literal 15-column x 30-row grid of flat-coloured SQUARE tiles, gapped by white grout lines,
   revealing one continuous gradient through the grid. No per-cell markup: two repeating-linear-gradient
   layers paint the white grout (one per axis, each sized to 1/15 or 1/30 of the panel — since
   aspect-ratio locks the panel's height to exactly 2x its width (30 rows / 15 cols), those two
   fractions always land on the same physical size, keeping every tile a true square at any
   column width), stacked over a single big gradient layer that the tiles are just windows onto. */
.about-page .legacy-mosaic-col {
  flex: 1 1 0;
  min-width: 0;
}
.about-page .legacy-mosaic-side {
  aspect-ratio: 15 / 30;
  position: relative;
  perspective: 1100px;
  background-color: #fff;
  background-image:
    repeating-linear-gradient(to right,  #fff 0 3px, rgba(255,255,255,0) 3px 100%),
    repeating-linear-gradient(to bottom, #fff 0 3px, rgba(255,255,255,0) 3px 100%),
    linear-gradient(160deg, var(--teal) 0%, var(--green) 33%, var(--orange) 66%, var(--pink) 100%);
  background-size: calc(100% / 15) 100%, 100% calc(100% / 30), 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
}

/* JS-populated split-flap tiles: one flap per cell, hinged at the top edge.
   The parent gradient/grout above stays as the no-JS fallback and is painted
   over once real tiles land, so nothing shows through before JS runs. */
.about-page .legacy-mosaic-side.has-tiles {
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(30, 1fr);
  background-image: none;
}
.about-page .mosaic-tile {
  position: relative;
  transform-style: preserve-3d;
}
.about-page .mosaic-tile-flap {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1.5px #fff;
  transform-origin: 50% 0%;
  transform: rotateX(-105deg);
  opacity: 0;
  backface-visibility: hidden;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1), opacity .12s linear;
  transition-delay: var(--tile-delay, 0ms);
}
.about-page .dna-legacy.is-visible .mosaic-tile-flap {
  transform: rotateX(0deg);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .about-page .mosaic-tile-flap {
    transition: none;
    transform: rotateX(0deg);
    opacity: 1;
  }
}

/* ── LEGACY MOSAIC PHOTO SLIDESHOW ──
   A second 15 x 30 grid floats over the tiles. JS (about-us.html) drops photos onto it at
   random tile-aligned spots, each spanning several tiles and always at least one tile clear
   of its neighbours, then swaps the whole set out slide by slide. Each slide is one era
   (Long ago / Yesterday / Today, in rotation); the three sets never share a slide. */
.about-page .legacy-mosaic-photos {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  grid-template-rows: repeat(30, 1fr);
  perspective: 1100px;
  pointer-events: none;
}
.about-page .mosaic-photo {
  position: relative;
  padding: 1.5px;                 /* same white grout as the tiles underneath */
  background: #fff;
  transform-origin: 50% 0%;       /* hinged at the top edge, like the split-flap tiles */
  transform: rotateX(-100deg);
  opacity: 0;
  backface-visibility: hidden;
  /* flip OUT: swing up, fade at the very end */
  transition:
    transform .45s cubic-bezier(.55, .06, .68, .19) var(--photo-delay, 0ms),
    opacity .15s linear calc(var(--photo-delay, 0ms) + .3s);
}
.about-page .mosaic-photo.is-in {
  transform: rotateX(0deg);
  opacity: 1;
  /* flip IN: drop down, fade in as it starts */
  transition:
    transform .5s cubic-bezier(.22, .61, .36, 1) var(--photo-delay, 0ms),
    opacity .15s linear var(--photo-delay, 0ms);
}
.about-page .mosaic-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* era caption, drawn as one white tile in the bottom-left corner */
.about-page .mosaic-photo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .about-page .mosaic-photo,
  .about-page .mosaic-photo.is-in {
    transform: none;
    transition: opacity .4s ease var(--photo-delay, 0ms);
  }
}

/* ── LEGACY MOSAIC EXTENSION ──
   A few more tile rows tucked under the board, revealed (and flapped in) when the CEO letter
   is expanded so the mosaic grows a little with it. The rows fade to transparent toward the
   bottom through a mask. The wrap animates 0fr -> 1fr to open; the strip keeps its own
   aspect-ratio height (align-self: start) so its tiles stay square and are simply uncovered
   top-down as the wrap grows. Row count and aspect-ratio are set inline by the tile script
   in about-us.html (extRows). */
.about-page .legacy-mosaic-ext-wrap {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows .7s cubic-bezier(.4, 0, .2, 1);
}
.about-page .legacy-mosaic-ext-wrap.is-open {
  grid-template-rows: 1fr;
}
.about-page .legacy-mosaic-ext {
  min-height: 0;
  align-self: start;
  display: grid;
  grid-template-columns: repeat(15, 1fr);
  perspective: 1100px;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0) 100%);
}
/* Extension flaps ignore the section's scroll-in reveal and only drop once opened. */
.about-page .dna-legacy .legacy-mosaic-ext-wrap:not(.is-open) .mosaic-tile-flap {
  transform: rotateX(-105deg);
  opacity: 0;
}
.about-page .dna-legacy .legacy-mosaic-ext-wrap.is-open .mosaic-tile-flap {
  transform: rotateX(0deg);
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .about-page .legacy-mosaic-ext-wrap { transition: none; }
}

@media (max-width: 768px) {
  .about-page .legacy-mosaic-col { display: none; }
}

.about-page .about-hero-stack {
  position: relative;
}
.about-page .dna-legacy .dna-text {
  flex: 1 1 0;
  max-width: none;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 16px;
  padding: 32px 36px;
  box-shadow: 0 8px 30px rgba(0,0,0,.06);
}
.about-page .legacy-message-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  margin-top: 28px;
  margin-bottom: 14px;
}
.about-page .legacy-message p {
  color: var(--mid);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 16px;
}
.about-page .legacy-message-signoff {
  margin-top: 8px;
}
.about-page .legacy-message-signoff p {
  margin-bottom: 0.2rem;
}
.about-page .legacy-message-signature {
  font-family: 'Caveat', cursive;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--teal);
  margin: 0.4rem 0 0.15rem;
}
.about-page .legacy-message-title {
  font-size: 0.85rem;
  color: var(--mid);
  letter-spacing: 0.03em;
}

/* ── LEGACY MESSAGE COLLAPSE ──
   The max-height below is only the no-JS fallback. On load, JS in about-us.html sets the
   collapsed height inline so the whole text card ends up exactly as tall as the mosaic
   beside it (viewport-based on mobile, where the mosaic is hidden). */
.about-page .legacy-message {
  position: relative;
}
.about-page .legacy-message.is-collapsed {
  overflow: hidden;
  max-height: min(640px, 68vh);
  transition: max-height .6s cubic-bezier(.4,0,.2,1);
}
.about-page .legacy-message.is-collapsed::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 60%, rgba(255,255,255,.96) 100%);
  pointer-events: none;
}
.about-page .legacy-expand-toggle {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0 auto;
  background: none;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--teal);
}
.about-page .legacy-message.is-collapsed .legacy-expand-toggle {
  display: flex;
}
.about-page .legacy-expand-toggle:hover {
  color: var(--accent-dark);
}
.about-page .legacy-expand-arrow {
  animation: legacy-arrow-bounce 1.8s ease-in-out infinite;
}
@keyframes legacy-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
.about-page .dna-mission .section-label { color: var(--blue); }
.about-page .dna-mission .placeholder-block { border-color: var(--blue); }
.about-page .dna-mission { position: relative; z-index: 1; }

/* ── MISSION STAGGERED COMMITMENTS ── */
.about-page .mission-header { max-width: 640px; margin-bottom: 3.5rem; }

.about-page .commitment-stagger {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.about-page .commitment-item {
  display: flex;
  align-items: stretch;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 22px rgba(0,0,0,.08);
  max-width: 86%;
  border-left: 3px solid var(--blue);
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.about-page .commitment-item:nth-child(even) {
  margin-left: auto;
  border-left: none;
  border-right: 3px solid var(--blue);
  transition-delay: 0.15s;
}

.about-page .commitment-item:nth-child(3) { transition-delay: 0.3s; }

.about-page .dna-mission.is-visible .commitment-item {
  opacity: 1;
  transform: translateY(0);
}

.about-page .commitment-body { padding: 1.75rem 2.25rem; flex: 1; }

.about-page .commitment-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: 0.75rem;
}

.about-page .commitment-body p {
  color: var(--mid);
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0.6rem;
}

.about-page .commitment-body p:last-child { margin-bottom: 0; }
.about-page .dna-cert    .section-label { color: var(--orange); }
.about-page .dna-cert    .placeholder-block { border-color: var(--orange); }
.about-page .dna-social  .section-label { color: var(--green); }
.about-page .dna-social  .placeholder-block { border-color: var(--green); }
.about-page .dna-affil   .section-label { color: var(--teal); }
.about-page .dna-affil   .placeholder-block { border-color: var(--teal); }
.about-page .dna-gpn     .section-label { color: var(--pink); }
.about-page .dna-gpn     .placeholder-block { border-color: var(--pink); }

/* ── GPN REGION PARTNER CARDS ── */
.about-page .gpn-partner-grid-wrap {
  margin-top: 20px;
}
.about-page .gpn-partner-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.about-page .gpn-region-card {
  background: var(--region-color);
  border-radius: 8px;
  overflow: hidden;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.about-page .gpn-region-card--wide {
  grid-column: 1 / -1;
}
.about-page .gpn-region-header {
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 6px 12px 5px;
  border-bottom: 1px solid rgba(255,255,255,0.25);
  text-align: center;
}
.about-page .gpn-region-card ul {
  list-style: none;
  margin: 0;
  padding: 5px 12px 7px;
  text-align: center;
}
.about-page .gpn-region-card ul li {
  font-size: .75rem;
  line-height: 1.6;
}
.about-page .gpn-partner-link {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color .2s;
}
.about-page .gpn-partner-link:hover { border-color: #fff; }
.about-page .gpn-region-card--wide ul {
  display: flex;
  justify-content: center;
  gap: 2rem;
}
@media (max-width: 500px) {
  .about-page .gpn-partner-grid { grid-template-columns: 1fr; }
  .about-page .gpn-region-card--wide { grid-column: auto; }
}

/* ── SCROLL ANIMATIONS ── */
.about-page .dna-text,
.about-page .dna-visual {
  opacity: 0;
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.about-page .dna-visual {
  transition-delay: 0.12s;
}

.about-page .dna-row:not(.flip) .dna-text   { transform: translateX(-52px); }
.about-page .dna-row:not(.flip) .dna-visual { transform: translateX(52px); }
.about-page .dna-row.flip        .dna-text   { transform: translateX(52px); }
.about-page .dna-row.flip        .dna-visual { transform: translateX(-52px); }

/* higher specificity to override directional transforms */
.about-page .section.is-visible .dna-row .dna-text,
.about-page .section.is-visible .dna-row .dna-visual {
  opacity: 1;
  transform: translateX(0);
}

@media (max-width: 768px) {
  .about-page .dna-row,
  .about-page .dna-row.flip {
    flex-direction: column;
    gap: 32px;
  }
  .about-page .dna-visual {
    flex: none;
    width: 100%;
    height: 180px;
  }
  .about-page .dna-row:not(.flip) .dna-text,
  .about-page .dna-row.flip .dna-text   { transform: translateY(40px); }
  .about-page .dna-row:not(.flip) .dna-visual,
  .about-page .dna-row.flip .dna-visual { transform: translateY(40px); }

  .about-page .commitment-item,
  .about-page .commitment-item:nth-child(even) {
    max-width: 100%;
    margin-left: 0;
    border-left: 3px solid var(--blue);
    border-right: none;
  }

  .about-page .legacy-mission-stack {
    display: flex;
    flex-direction: column;
  }
  .about-page .legacy-mission-stack .dna-legacy { order: 1; }
  .about-page .legacy-mission-stack .dna-mission { order: 3; }

  .about-page .dna-legacy .dna-text {
    max-width: none;
    padding: 24px;
  }
}

/* ---------- brand owners page ---------- */
/* Hero inset: blue variant (white icon and white text on the site blue) */
.inset-box--blue { background: var(--blue); border-color: var(--blue); }
.inset-box--blue .title { color: var(--white); }
.inset-box--blue .sub { color: rgba(255,255,255,.88); }

/* "Brand Solutions We Provide": two icon-topped colour lists beside a packaging photo */
.brand-solutions {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  margin-top: 10px;
}
.brand-solutions > *, .brand-solution-cols, .brand-solution-col { min-width: 0; }
.brand-solution-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: start;
}
.brand-solution-col { text-align: center; }
.brand-solution-col img { width: 96px; height: 96px; margin: 0 auto 12px; }
.brand-solution-col h3 {
  font-size: .92rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 20px;
}
.brand-solution-list {
  list-style: none;
  margin: 0;
  padding: 16px 14px;
  border-radius: 6px;
}
.brand-solution-list.gold { background: var(--gold); }
.brand-solution-list.green { background: var(--green); }
.brand-solution-list li { margin: 0; }
.brand-solution-list a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 7px 4px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: .9rem;
  color: var(--navy);
}
.brand-solution-list a::after {
  content: "\2192";
  font-size: 1rem;
  transition: transform .15s ease;
}
.brand-solution-list a:hover span { text-decoration: underline; }
.brand-solution-list a:hover::after { transform: translateX(3px); }
.brand-solutions-img img {
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(0,32,96,.18));
}
@media (max-width: 980px) {
  .brand-solutions { grid-template-columns: 1fr; gap: 32px; }
  .brand-solutions-img img { max-width: 420px; }
}
@media (max-width: 600px) {
  .brand-solution-cols { grid-template-columns: 1fr; }
}

/* Closing call-to-action band */
.cta-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  background: var(--blue);
  border-radius: var(--radius);
  padding: 32px 40px;
  color: var(--white);
}
.cta-band > * { min-width: 0; }
.cta-band-icon { width: 72px; height: 72px; }
.cta-band h2 { color: var(--white); font-size: 1.45rem; margin: 0 0 6px; }
.cta-band-copy p { color: rgba(255,255,255,.9); margin: 0; }
.cta-band-actions { text-align: center; }
.cta-band-actions .btn { min-width: 220px; }
.cta-band .cta-band-note { font-size: .85rem; color: rgba(255,255,255,.85); margin: 10px 0 0; }
.cta-band-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.6);
}
.cta-band-link:hover { border-color: var(--white); }
@media (max-width: 760px) {
  .cta-band { grid-template-columns: 1fr; text-align: center; padding: 28px 24px; }
  .cta-band-icon { margin: 0 auto; }
}