/* ============================================================
   YCI DESIGN TOKENS — single source of truth.
   Ported verbatim from the locked artifact's :root block.
   Future YCI pages import tokens.css to inherit the system.
   ============================================================ */
:root {
  /* rich black — single consistent YCI primary black */
  --ink: #111111;
  --ink-2: #111111;
  /* true white — black and white as opposing primary surfaces */
  --gray: #ffffff;
  /* brand red — one red only */
  --red: #c81e1e;
  /* type */
  --tx-dark: #15171a;
  --tx-dark-mute: #4a5057;
  --tx-light: #e7e9eb;
  --tx-light-mute: #a9afb6;
  --rule-light: #e1e4e7;
  --rule-dark: rgba(231, 233, 235, 0.15);

  --pad: 56px;
  --max: 1440px;

  --hero-photo: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a4da53b33a135ba60e6d5_yci-home-hero-reclaimed-floor.webp');
}

/* ============ base / reset (ported verbatim) ============ */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--gray);
  color: var(--tx-dark);
  font-family: 'Archivo', -apple-system, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img {
  max-width: 100%;
  display: block;
  border: 0;
}
a {
  text-decoration: none;
  color: inherit;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: 'Oswald', Impact, 'Haettenschweiler', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}
p {
  margin: 0;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.dot {
  color: var(--red);
}
/* ============================================================
   YCI GLOBAL STYLES — ported faithfully from the locked artifact.
   Organized by section so each React component maps to a block here.
   The responsive breakpoints are kept grouped exactly as in the
   reference so media-query fidelity is preserved.
   ============================================================ */

/* ============ shared devices ============ */
.rule {
  width: 52px;
  height: 3px;
  background: var(--red);
  flex: none;
}
.inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 15px 26px;
  border: 1px solid transparent;
  transition: background-color 0.15s, color 0.15s;
}
.btn-red {
  background: var(--red);
  color: #fff;
}
.btn-red:hover {
  background: #a91717;
}
.btn-ghost-light {
  background: transparent;
  color: var(--tx-light);
  border-color: rgba(231, 233, 235, 0.55);
}
.btn-ghost-light:hover {
  background: var(--tx-light);
  color: var(--ink);
}

/* ============ header ============ */
.hdr {
  background: var(--ink);
  border-bottom: none;
}
.hdr-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 14px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo {
  height: 42px;
  width: auto;
}
.nav {
  display: flex;
  align-items: center;
  gap: 30px;
}
.nav a {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-light);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.nav a:hover {
  border-bottom-color: var(--red);
}
.nav a.is-current {
  border-bottom-color: var(--red);
}
.nav-row-2 a.is-current {
  color: var(--red);
}
.hdr .btn {
  padding: 13px 22px;
}
.burger {
  display: none;
  width: 26px;
  height: 16px;
  flex-direction: column;
  justify-content: space-between;
  flex: none;
  cursor: pointer;
}
.burger i {
  display: block;
  height: 2px;
  background: var(--tx-light);
  transition: transform 0.2s, opacity 0.2s;
}
.nav-row-2 {
  display: none;
}
.m-nav {
  display: none;
}

/* ============ hero ============ */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 470px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.hero-photo {
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: 50% 100%;
  background-repeat: no-repeat;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    96deg,
    rgba(16, 18, 21, 0.96) 0%,
    rgba(16, 18, 21, 0.88) 26%,
    rgba(16, 18, 21, 0.52) 54%,
    rgba(16, 18, 21, 0.1) 82%
  );
}
.hero-scrim-b {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(16, 18, 21, 0.45) 0%,
    rgba(16, 18, 21, 0) 38%,
    rgba(16, 18, 21, 0.28) 100%
  );
}
.hero-in {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 52px;
}
.hero h1 {
  color: #fff;
  font-size: 112px;
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.hero .sub {
  margin-top: 22px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 29px;
  line-height: 1.08;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--red);
}

/* ============ light chapter: statement + project band ============ */
.lite {
  background: var(--gray);
}
.statement {
  padding: 66px 0 46px;
}
.statement .rule {
  margin-bottom: 26px;
}
.statement p {
  max-width: 800px;
  font-size: 27px;
  line-height: 1.5;
  color: var(--tx-dark);
  text-wrap: pretty;
}

/* ---- project band ---- */
.gal {
  padding: 0 0 34px;
}
.gal-wrap {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.row::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}
.tile {
  position: relative;
  overflow: hidden;
  flex: 0 0 32%;
  flex-shrink: 0;
  height: 230px;
  background: var(--ink-2);
  scroll-snap-align: start;
}
.tile .img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.tile .vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 122% 104% at 50% 46%,
    rgba(11, 12, 14, 0) 52%,
    rgba(11, 12, 14, 0.13) 80%,
    rgba(11, 12, 14, 0.28) 100%
  );
}
.tile .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    0deg,
    rgba(11, 12, 14, 0.62) 0,
    rgba(11, 12, 14, 0.14) 46px,
    rgba(11, 12, 14, 0) 92px
  );
}
.tile .lbl {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 12px 14px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tx-light);
}
.chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 24px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  color: #8a9096;
  transition: color 0.15s;
}
.chev:hover {
  color: var(--tx-dark);
}
.chev[disabled] {
  color: #c2c7cc;
  cursor: default;
}
.chev-l {
  left: calc(var(--pad) - 32px);
}
.chev-r {
  right: calc(var(--pad) - 32px);
}
.t1 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52df8c022c361583ef2b_yci-gallery-outdoor-tiki-bar.webp');
}
.t2 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52dfffa80d7c624d4e52_yci-gallery-showroom-restaurant-tables.webp');
}
.t3 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52e01b22ae5bbf8e3d82_yci-gallery-reclaimed-staircase.webp');
}
.t4 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52e01b22ae5bbf8e3d51_yci-gallery-kitchen-island-flooring.webp');
}
.t5 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52e08e907b41c4b6413c_yci-gallery-arched-accent-wall.webp');
}
.t6 .img {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8a52e0ffa80d7c624d4e6a_yci-gallery-conference-table.webp');
}

/* ---- gallery dot indicators ---- */
.gal-dots {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin-top: 22px;
}
.gal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rule-light);
  transition: background 0.15s;
  padding: 0;
}
.gal-dot:hover {
  background: var(--tx-light-mute);
}
.gal-dot.is-active {
  background: var(--red);
}

/* ============ three columns ============ */
.cols-sec {
  background: var(--gray);
  padding: 44px 0 46px;
}
.cols {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
}
.col {
  padding: 0 42px;
}
.col:first-child {
  padding-left: 0;
}
.col:last-child {
  padding-right: 0;
}
.col + .col {
  border-left: 1px solid var(--rule-light);
}
.col h3 {
  font-size: 26px;
  line-height: 1.06;
  color: var(--tx-dark);
  max-width: 17ch;
  min-height: 2.12em;
}
.col .rule {
  width: 40px;
  margin: 16px 0 20px;
}
.col p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
  margin-bottom: 15px;
}
.col .bd > :last-child {
  margin-bottom: 0;
}
.cols {
  align-items: start;
}
.plist {
  margin: 0 0 18px;
}
.plist div {
  display: grid;
  grid-template-columns: 7px 1fr;
  gap: 12px;
  align-items: start;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--tx-dark-mute);
}
.plist div::before {
  content: '';
  width: 7px;
  height: 7px;
  background: var(--red);
  margin-top: 0.6em;
}
.h3-sub {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.24;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--tx-dark);
  margin-top: 5px;
}

/* ============ split sections ============ */
.split {
  display: grid;
  align-items: stretch;
  grid-template-columns: 50% 1fr;
  min-height: 450px;
}
.split-dark {
  background: var(--ink);
}
.split-light {
  background: var(--gray);
}
.ph {
  position: relative;
  overflow: hidden;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ph-dark {
  background: var(--ink);
}
.ph-light {
  background: var(--ink);
}
.m-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.m-why {
  /* background-image set inline (component) — asset is git-ignored local media */
  background-size: 101.3% auto;
  background-position: 100% 83.6%;
}
.m-vid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20% 39%;
  transform: scale(1.35);
  filter: brightness(0.9) contrast(1.15) saturate(0.88);
}
.m-warm-cool {
  position: absolute;
  inset: 0;
  background: rgba(52, 42, 30, 0.13);
}
.m-vig {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 122% 112% at 50% 45%,
    rgba(11, 12, 14, 0) 46%,
    rgba(11, 12, 14, 0.28) 82%,
    rgba(11, 12, 14, 0.54) 100%
  );
}
.m-edge {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(16, 18, 21, 0) 56%,
    rgba(16, 18, 21, 0.5) 84%,
    rgba(16, 18, 21, 0.9) 100%
  );
}
.m-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 12, 14, 0.36) 0%,
    rgba(11, 12, 14, 0.08) 26%,
    rgba(11, 12, 14, 0) 48%,
    rgba(11, 12, 14, 0.1) 78%,
    rgba(11, 12, 14, 0.28) 100%
  );
}
.split-copy {
  padding: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.split-copy .in > :last-child {
  margin-bottom: 0;
}
.split-copy .in {
  max-width: 600px;
  margin-right: auto;
}
.split h2 {
  font-size: 36px;
  line-height: 1.04;
}
.split-dark h2 {
  color: #fff;
}
.split-light h2 {
  color: var(--tx-dark);
}
.split .rule {
  width: 44px;
  margin: 16px 0 22px;
}
.split-dark p {
  font-size: 15.5px;
  line-height: 1.64;
  color: #c9ced3;
  margin-bottom: 14px;
}
.split-light p {
  font-size: 15.5px;
  line-height: 1.64;
  color: var(--tx-dark-mute);
  margin-bottom: 14px;
}

/* ============ CTA ============ */
.cta {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
.cta-photo {
  position: absolute;
  inset: 0;
  background-image: var(--hero-photo);
  background-size: cover;
  background-position: 50% 62%;
  opacity: 0.5;
}
.cta-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(11, 12, 14, 0.94) 0%,
    rgba(11, 12, 14, 0.86) 46%,
    rgba(11, 12, 14, 0.76) 100%
  );
}
.cta-in {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--pad);
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 64px;
  align-items: start;
}
.cta h2 {
  font-size: 44px;
  line-height: 0.98;
  color: #fff;
}
.cta .h2b {
  font-size: 44px;
  line-height: 0.98;
  color: var(--red);
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}
.cta .rule {
  margin-top: 20px;
}
.cta p {
  font-size: 16.5px;
  line-height: 1.66;
  color: #c9ced3;
  margin-bottom: 16px;
  max-width: 60ch;
}
.cta .btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}

/* ============ footer ============ */
.ftr {
  background: var(--ink);
}
.ftr-main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 26px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 22px;
}
.ftr-brand {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ftr-mark {
  height: 44px;
  width: auto;
}
.ftr-tag {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tx-light-mute);
  line-height: 1.7;
}
.ftr-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.ftr-nav a {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-light);
}
.ftr-nav a:hover {
  color: var(--red);
}
.ftr-credit {
  border-top: 1px solid var(--rule-dark);
  text-align: center;
  padding: 14px var(--pad) 16px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--tx-light-mute);
  opacity: 0.6;
}
.ftr-credit-link {
  color: inherit;
}

/* =========================================================
   TABLET — designed, not an intermediate desktop
   ========================================================= */
@media (max-width: 991px) {
  :root {
    --pad: 32px;
  }

  .hdr-in {
    flex-wrap: wrap;
    gap: 14px;
    padding: 14px 32px 0;
  }
  .nav {
    display: none;
  }
  .nav-row-2 {
    display: flex;
    width: 100%;
    gap: 26px;
    padding: 12px 0 11px;
    margin-top: 12px;
    border-top: 1px solid var(--rule-dark);
  }
  .nav-row-2 a {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 12.5px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--tx-light);
  }

  .hero {
    min-height: 365px;
  }
  .hero-scrim {
    background: linear-gradient(
      100deg,
      rgba(16, 18, 21, 0.96) 0%,
      rgba(16, 18, 21, 0.86) 34%,
      rgba(16, 18, 21, 0.44) 68%,
      rgba(16, 18, 21, 0.12) 100%
    );
  }
  .hero-in {
    padding: 0 32px 42px;
  }
  .hero h1 {
    font-size: 76px;
  }
  .hero .sub {
    font-size: 21px;
    margin-top: 16px;
  }

  .statement {
    padding: 50px 0 34px;
  }
  .statement p {
    font-size: 22px;
    max-width: 60ch;
  }

  .gal {
    padding: 0 0 30px;
  }
  .tile {
    flex: 0 0 48.4%;
    height: 230px;
  }

  .cols-sec {
    padding: 56px 0 40px;
  }
  .cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .col {
    display: grid;
    grid-template-columns: 236px 1fr;
    gap: 40px;
    padding: 28px 0 0;
    border-left: none;
  }
  .col + .col {
    border-left: none;
    border-top: 1px solid var(--rule-light);
    margin-top: 28px;
  }
  .col:first-child {
    padding-top: 0;
  }
  .col .hd {
    align-self: start;
  }
  .col h3 {
    font-size: 23px;
    max-width: none;
    min-height: 0;
  }
  .col .rule {
    margin: 14px 0 0;
  }
  .h3-sub {
    font-size: 16px;
  }

  .split-dark,
  .split-light {
    grid-template-columns: 1fr 1fr;
  }
  .split {
    padding: 0;
    min-height: 0;
  }
  .ph {
    min-height: 0;
    height: 100%;
  }
  .m-why {
    background-size: 151.9% auto;
    background-position: 14.7% 50%;
  }
  .m-vid {
    object-position: 42% 40%;
    transform: scale(1.1);
  }
  .split-copy {
    padding: 48px 32px;
  }
  .split-copy .in {
    max-width: none;
  }
  .split h2 {
    font-size: 29px;
  }
  .split-dark p,
  .split-light p {
    font-size: 15px;
  }

  .cta-in {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 44px 32px;
  }
  .cta h2,
  .cta .h2b {
    font-size: 36px;
  }

  .ftr-main {
    padding: 24px 32px;
    gap: 18px;
  }
  .ftr-credit {
    padding: 12px 32px 14px;
  }
}

/* =========================================================
   MOBILE — composition, not just reflow
   ========================================================= */
@media (max-width: 767px) {
  :root {
    --pad: 22px;
  }

  .hdr-in {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 12px 22px;
  }
  .logo {
    height: 31px;
  }
  .nav-row-2 {
    display: none;
  }
  .burger {
    display: flex;
  }
  .burger.is-active i:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .burger.is-active i:nth-child(2) {
    opacity: 0;
  }
  .burger.is-active i:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  .hdr .btn {
    padding: 11px 13px;
    font-size: 10.5px;
    letter-spacing: 0.07em;
  }
  .m-nav.is-open {
    display: flex;
    flex-direction: column;
    background: var(--ink);
    padding: 0 22px 18px;
  }
  .m-nav a {
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--tx-light);
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-dark);
  }
  .m-nav a:first-child {
    border-top: 1px solid var(--rule-dark);
  }
  .m-nav a.is-current {
    color: var(--red);
  }

  .hero {
    min-height: 258px;
    align-items: flex-end;
  }
  .hero-scrim {
    background: linear-gradient(
      0deg,
      rgba(16, 18, 21, 0.94) 0%,
      rgba(16, 18, 21, 0.86) 34%,
      rgba(16, 18, 21, 0.45) 66%,
      rgba(16, 18, 21, 0.18) 100%
    );
  }
  .hero-scrim-b {
    background: none;
  }
  .hero-in {
    padding: 0 22px 26px;
  }
  .hero h1 {
    font-size: 58px;
    line-height: 1.02;
  }
  .hero .sub {
    font-size: 16px;
    margin-top: 14px;
    line-height: 1.14;
  }

  .statement {
    padding: 36px 0 26px;
  }
  .statement .rule {
    width: 44px;
    margin-bottom: 20px;
  }
  .statement p {
    font-size: 18px;
    line-height: 1.58;
    max-width: none;
  }

  .gal {
    padding: 0 0 26px;
  }
  .row {
    scroll-snap-type: x mandatory;
  }
  .tile {
    flex: 0 0 78%;
    height: 230px;
  }
  .tile .lbl {
    font-size: 10.5px;
    padding: 11px 12px;
  }
  .chev {
    display: none;
  }

  .cols-sec {
    padding: 36px 0 32px;
  }
  .col {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 24px 0 0;
  }
  .col + .col {
    margin-top: 24px;
  }
  .col h3 {
    font-size: 21px;
  }
  .col .rule {
    margin: 12px 0 16px;
  }
  .col p {
    font-size: 15px;
    margin-bottom: 13px;
  }
  .h3-sub {
    font-size: 15px;
  }

  .split-dark,
  .split-light {
    grid-template-columns: 1fr;
  }
  .split {
    padding: 0;
  }
  .split-light .ph {
    grid-row: 1;
  }
  .split h2 {
    font-size: 26px;
  }
  .ph {
    min-height: 230px;
    height: 230px;
  }
  .m-why {
    background-size: 116.8% auto;
    background-position: 0% 84.4%;
  }
  .m-vid {
    object-position: 32% 38%;
    transform: scale(1.32);
  }
  .split-copy {
    padding: 34px 22px 40px;
  }

  .cta-in {
    padding: 36px 22px 40px;
    gap: 22px;
  }
  .cta h2,
  .cta .h2b {
    font-size: 31px;
  }
  .cta p {
    font-size: 15.5px;
  }
  .cta .btns {
    gap: 10px;
  }
  .cta .btn {
    flex: 1 1 100%;
  }

  .ftr-main {
    flex-direction: column;
    align-items: center;
    padding: 26px 22px;
    gap: 16px;
  }
  .ftr-brand {
    align-items: center;
    gap: 12px;
  }
  .ftr-mark {
    height: 38px;
  }
  .ftr-nav {
    gap: 18px;
    justify-content: center;
  }
  .ftr-credit {
    padding: 12px 22px 14px;
  }
}

@media (max-width: 479px) {
  .hero {
    min-height: 235px;
  }
  .hero h1 {
    font-size: 50px;
  }
  .hero .sub {
    font-size: 14.5px;
  }
  .tile {
    flex: 0 0 84%;
  }
}

/* =========================================================
   CONTACT PAGE — rebuilt to match approved visual reference.
   Two-column: intro/info left, inquiry form right.
   Reuses shared .inner, .rule, .btn, .btn-red from global.css.
   ========================================================= */
.contact {
  background: var(--gray);
  padding: 66px 0 80px;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ---- left column: intro + company info ---- */
.contact-intro-col h1 {
  font-size: 36px;
  line-height: 1.04;
  color: var(--tx-dark);
}
.contact-intro-col .rule {
  margin: 16px 0 22px;
}
.contact-body {
  font-size: 18px;
  line-height: 1.58;
  color: var(--tx-dark);
  margin-bottom: 10px;
  max-width: 42ch;
}
.contact-body-accent {
  font-size: 18px;
  line-height: 1.58;
  color: var(--tx-dark);
  margin-bottom: 44px;
  max-width: 42ch;
}
.contact-divider {
  border-top: 1px solid var(--rule-light);
  margin-bottom: 24px;
}
.contact-co {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tx-dark);
  margin-bottom: 10px;
}
.contact-phone {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 22px;
  color: var(--tx-dark);
}

/* ---- right column: inquiry form ---- */
.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.field-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--tx-dark);
}
.field-label .req {
  color: var(--red);
  text-transform: none;
  letter-spacing: 0;
  font-family: 'Archivo', sans-serif;
  font-size: 11px;
  margin-left: 4px;
}
.contact-form input,
.contact-form textarea,
.contact-form select {
  border: 1px solid var(--rule-light);
  background: #fff;
  padding: 12px 14px;
  font: 15px/1.5 'Archivo', sans-serif;
  color: var(--tx-dark);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
  outline: none;
  border-color: var(--red);
}

/* radio group */
.contact-radio-group {
  display: flex;
  gap: 28px;
  margin-top: 2px;
}
.contact-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 15px;
  color: var(--tx-dark);
}
.contact-radio input[type='radio'] {
  width: 16px;
  height: 16px;
  accent-color: var(--red);
  margin: 0;
}

/* full-width submit */
.contact-submit {
  display: flex;
  width: 100%;
  padding: 16px 26px;
  margin-top: 4px;
}
.contact-privacy {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tx-dark-mute);
}

/* success state */
.contact-success h2 {
  font-size: 30px;
  line-height: 1.04;
  color: var(--tx-dark);
}
.contact-success .rule {
  margin: 16px 0 20px;
}
.contact-success p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--tx-dark-mute);
}

/* form messages */
.form-msg {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
}
.form-ok {
  color: var(--tx-dark);
}
.form-err {
  color: var(--red);
}

@media (max-width: 991px) {
  .contact {
    padding: 50px 0 60px;
  }
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .contact-intro-col h1 {
    font-size: 29px;
  }
  .contact-body,
  .contact-body-accent {
    font-size: 17px;
  }
}

@media (max-width: 767px) {
  .contact {
    padding: 36px 0 48px;
  }
  .contact-intro-col h1 {
    font-size: 28px;
  }
  .contact-body,
  .contact-body-accent {
    font-size: 16px;
  }
  .contact-body-accent {
    margin-bottom: 36px;
  }
  .contact-form .field-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
}
/* ============================================================
   YCI CARGO PLANKS PAGE — ported faithfully from
   DESIGN - yci-cargo-planks.html (locked desktop artifact).
   cp- prefix isolates page classes from shared global styles.
   Reuses shared .inner, .rule, .btn, .btn-red from global.css.
   ============================================================ */

/* ============ shared button/rule variants ============ */
.btn-panel { display: flex; width: 100%; padding: 15px 26px; }
.btn-cta { font-size: 16px; letter-spacing: 0.1em; padding: 22px 52px; flex: none; }
.rule-col { width: 40px; }
.rule-center { margin-left: auto; margin-right: auto; }

/* ============ interior hero ============ */
/* Compact — deliberately NOT a repeat of the homepage hero. */
.cp-hero {
  position: relative;
  overflow: hidden;
  min-height: 392px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.cp-hero-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.cp-hero-scrim-a {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(16,18,21,.96) 0%, rgba(16,18,21,.90) 30%, rgba(16,18,21,.62) 62%, rgba(16,18,21,.30) 100%);
}
.cp-hero-scrim-b {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,18,21,.42) 0%, rgba(16,18,21,0) 40%, rgba(16,18,21,.30) 100%);
}
.cp-hero-body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
}
.cp-hero h1 {
  color: #fff;
  font-size: 74px;
  line-height: 1.02;
  letter-spacing: -0.012em;
}
.cp-hero-sub {
  margin-top: 20px;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 21px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--red);
}

/* ============ specifications ============ */
.cp-specs {
  background: var(--gray);
  padding: 72px 0 78px;
}
.cp-specs h2 {
  font-size: 36px;
  line-height: 1.04;
  color: var(--tx-dark);
  
}
.cp-specs .rule {
  margin: 20px 0 38px;
}
.cp-specs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 392px;
  gap: 44px;
  align-items: stretch;
}

/* 8-cell spec grid — 1px hairline gaps from background showing through */
.cp-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule-light);
  border: 1px solid var(--rule-light);
}
.cp-spec-cell {
  background: #fff;
  padding: 28px 32px 26px;
}
.cp-spec-cell-label {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--tx-dark-mute);
  margin-bottom: 12px;
}
.cp-spec-cell-value {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 33px;
  line-height: 1.06;
  text-transform: uppercase;
  color: var(--tx-dark);
}
.cp-spec-cell-unit {
  font-size: 15px;
  color: var(--tx-dark-mute);
  white-space: nowrap;
}
.cp-spec-cell-note {
  margin-top: 11px;
  font-size: 15px;
  line-height: 1.62;
  color: var(--tx-dark-mute);
}

/* Price panel — $10 is the dominant numeral on the page */
.cp-price-panel {
  background: var(--ink);
  padding: 40px 40px 38px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.cp-price-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--tx-light-mute);
}
.cp-price-figure {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 118px;
  line-height: 0.86;
  letter-spacing: -0.02em;
  color: #fff;
  margin-top: 18px;
}
.cp-price-panel .rule {
  margin-top: 26px;
}
.cp-price-unit {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.18;
}
.cp-price-condition {
  font-family: 'Oswald', sans-serif;
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-light-mute);
  margin-top: 8px;
}
.cp-price-note {
  margin-top: 20px;
  font-size: 15.5px;
  line-height: 1.64;
  color: #c9ced3;
}
.cp-price-foot {
  padding-top: 26px;
  border-top: 1px solid rgba(231,233,235,.15);
}
.cp-price-foot-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}
.cp-price-foot-key {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tx-light-mute);
}
.cp-price-foot-val {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tx-light);
}

/* ============ centered section intro ============ */
/* Pattern: centered heading, red rule UNDERNEATH, centered intro paragraph. */
.cp-intro {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
  text-align: center;
}
.cp-intro h2 {
  font-size: 36px;
  line-height: 1.04;
}
.cp-intro .rule {
  margin: 20px auto 22px;
}
.cp-intro p {
  font-size: 18px;
  line-height: 1.62;
  margin: 0 auto;
  text-wrap: pretty;
}

/* ============ full-bleed 50/50 image bands ============ */
/* Both bands are full-bleed, meet exactly on the centre line,
   and share the same 470px minimum height. */
.cp-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cp-band-cell {
  position: relative;
  min-height: 470px;
  overflow: hidden;
  background: var(--ink-2);
}
.cp-band-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* ============ the physical plank ============ */
.cp-physical {
  background: var(--ink);
  padding: 78px 0 0;
}
.cp-physical .cp-intro h2 { color: #fff; }
.cp-physical .cp-intro p { color: #c9ced3; max-width: 840px; }
.cp-physical .cp-band-cell { background: var(--ink); }
.cp-physical .cp-band-cell:first-child { border-right: 1px solid var(--ink); }

/* ============ same plank. two very different faces. ============ */
.cp-two-sides {
  background: var(--gray);
  padding: 78px 0 0;
}
.cp-two-sides .cp-intro h2 { color: var(--tx-dark); }
.cp-two-sides .cp-intro p { color: var(--tx-dark-mute); max-width: 800px; }
.cp-two-sides .cp-band-cell:first-child { border-right: 1px solid #fff; }

/* Face labels — HTML overlays, NOT baked into images */
.cp-face-tag {
  position: absolute;
  left: 0;
  top: 0;
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #fff;
  background: var(--red);
  padding: 11px 16px;
}

/* Text row beneath the comparison */
.cp-faces-text {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.cp-faces-text > div {
  padding: 48px var(--pad) 50px;
}
.cp-faces-text > div + div {
  border-left: 1px solid var(--rule-light);
}
.cp-faces-text h3 {
  font-size: 26px;
  line-height: 1.06;
  color: var(--tx-dark);
}
.cp-faces-text .rule {
  width: 40px;
  margin: 16px 0 20px;
}
.cp-faces-text p {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
  max-width: 580px;
}

/* ============ before you start ============ */
/* Red-outline box = "important information, read this before working." */
.cp-before {
  background: var(--ink);
  padding: 62px 0 65px;
}
.cp-before-box {
  border: 2px solid var(--red);
  padding: 47px 72px 49px;
}
.cp-before-head {
  text-align: center;
}
.cp-before-head h2 {
  font-size: 36px;
  line-height: 1.04;
  color: #fff;
}
.cp-before-head .rule {
  margin: 20px auto 0;
}
.cp-before-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 44px;
  align-items: start;
}
.cp-before-cols > div:first-child { padding: 0 56px 0 0; }
.cp-before-cols > div:last-child {
  padding: 0 0 0 56px;
  border-left: 1px solid rgba(231,233,235,.18);
}
.cp-before-cols h3 {
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: 0.03em;
  color: #fff;
  margin-bottom: 18px;
}
.cp-before-cols p {
  font-size: 16.5px;
  line-height: 1.68;
  color: #c9ced3;
}

/* ============ the story can follow the material ============ */
/* Homepage 50% structural logic. Photograph runs full height, edge to edge,
   with NO white margin above or below it. */
.cp-provenance {
  background: var(--gray);
  display: grid;
  grid-template-columns: 50% 1fr;
  align-items: stretch;
  min-height: 520px;
}
.cp-provenance-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px var(--pad);
}
.cp-provenance-text > div { max-width: 600px; }
.cp-provenance-text h2 {
  font-size: 36px;
  line-height: 1.06;
  color: var(--tx-dark);
  max-width: 22ch;
}
.cp-provenance-text .rule { margin: 22px 0 24px; }
.cp-provenance-text p {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
}
.cp-provenance-media {
  position: relative;
  overflow: hidden;
  background: var(--ink-2);
}
/* CONCEPTUAL ASSET — any manufacturer/serial/model/date visible is generated
   and must never be published as factual YCI provenance. */
.cp-plate-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ============ closing CTA ============ */
/* Oswald at normal proportions — never stretched, squashed or widened. */
.cp-cta { background: var(--ink); }
.cp-cta .inner {
  padding: 50px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 64px;
  flex-wrap: wrap;
}
.cp-cta h2 {
  font-size: 36px;
  line-height: 1.04;
  color: #fff;
}

/* =========================================================
   TABLET ≤991 — faithful translation (not approved, flagged)
   Homepage breakpoint behaviour: --pad steps 56 → 32.
   ========================================================= */
@media (max-width: 991px) {
  .cp-hero { min-height: 340px; }
  .cp-hero h1 { font-size: 48px; }
  .cp-hero-sub { font-size: 18px; margin-top: 16px; }
  .cp-hero-body { padding: 0 var(--pad) 40px; }

  .cp-specs { padding: 56px 0 60px; }
  .cp-specs h2 { font-size: 29px; }
  .cp-specs-layout { grid-template-columns: 1fr; gap: 32px; }
  .cp-spec-grid { grid-template-columns: 1fr 1fr; }
  .cp-price-figure { font-size: 96px; }

  .cp-intro { padding: 0 var(--pad) 40px; }
  .cp-intro h2 { font-size: 29px; }
  .cp-intro p { font-size: 16px; }
  .cp-physical, .cp-two-sides { padding-top: 56px; }

  .cp-band-cell { min-height: 340px; }

  .cp-faces-text > div { padding: 40px var(--pad) 42px; }
  .cp-faces-text h3 { font-size: 23px; }
  .cp-faces-text p { font-size: 15px; }

  .cp-before { padding: 48px 0 52px; }
  .cp-before-box { padding: 36px 48px 38px; }
  .cp-before-head h2 { font-size: 29px; }
  .cp-before-cols { grid-template-columns: 1fr; margin-top: 32px; }
  .cp-before-cols > div:first-child { padding: 0 0 28px; }
  .cp-before-cols > div:last-child {
    padding: 0;
    border-left: none;
    border-top: 1px solid rgba(231,233,235,.18);
    padding-top: 28px;
  }
  .cp-before-cols h3 { font-size: 20px; }

  .cp-provenance { min-height: 400px; }
  .cp-provenance-text { padding: 56px var(--pad); }

  .cp-cta .inner { padding: 40px var(--pad); gap: 32px; }
  .cp-cta h2 { font-size: 29px; }
}

/* =========================================================
   MOBILE ≤767 — faithful translation (not approved, flagged)
   Homepage breakpoint behaviour: --pad steps 32 → 22.
   Full-bleed 50/50 bands and Provenance split stack vertically.
   These stacking decisions are UNAPPROVED — flagged for owner review.
   ========================================================= */
@media (max-width: 767px) {
  .cp-hero { min-height: 260px; }
  .cp-hero h1 { font-size: 38px; }
  .cp-hero-sub { font-size: 15px; margin-top: 14px; }
  .cp-hero-body { padding: 0 var(--pad) 26px; }

  .cp-specs { padding: 40px 0 44px; }
  .cp-specs h2 { font-size: 26px; }
  .cp-specs-layout { gap: 24px; }
  .cp-spec-grid { grid-template-columns: 1fr; }
  .cp-spec-cell { padding: 22px 24px 20px; }
  .cp-spec-cell-value { font-size: 28px; }
  .cp-price-panel { padding: 32px 28px 30px; }
  .cp-price-figure { font-size: 80px; }

  .cp-intro { padding: 0 var(--pad) 32px; }
  .cp-intro h2 { font-size: 26px; }
  .cp-intro p { font-size: 16px; }
  .cp-physical, .cp-two-sides { padding-top: 44px; }

  /* Full-bleed 50/50 bands stack vertically at mobile. */
  .cp-band { grid-template-columns: 1fr; }
  .cp-band-cell { min-height: 280px; }
  .cp-physical .cp-band-cell:first-child,
  .cp-two-sides .cp-band-cell:first-child {
    border-right: none;
    border-bottom: 1px solid var(--ink);
  }
  .cp-two-sides .cp-band-cell:first-child { border-bottom-color: var(--rule-light); }

  .cp-faces-text { grid-template-columns: 1fr; }
  .cp-faces-text > div { padding: 32px var(--pad) 36px; }
  .cp-faces-text > div + div {
    border-left: none;
    border-top: 1px solid var(--rule-light);
  }
  .cp-faces-text h3 { font-size: 21px; }
  .cp-faces-text p { font-size: 15px; }

  .cp-before { padding: 36px 0 40px; }
  .cp-before-box { padding: 28px 24px 30px; }
  .cp-before-head h2 { font-size: 26px; }
  .cp-before-cols { margin-top: 24px; }
  .cp-before-cols > div:first-child { padding-bottom: 20px; }
  .cp-before-cols > div:last-child { padding-top: 20px; }
  .cp-before-cols h3 { font-size: 19px; }

  /* Provenance stacks: text first, image below. */
  .cp-provenance { grid-template-columns: 1fr; min-height: 0; }
  .cp-provenance-text { padding: 44px var(--pad) 36px; }
  .cp-provenance-media { min-height: 280px; }

  .cp-cta .inner {
    padding: 36px var(--pad) 40px;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .cp-cta h2 { font-size: 26px; }
  .cp-cta .btn { width: 100%; }
}

@media (max-width: 479px) {
  .cp-hero { min-height: 230px; }
  .cp-hero h1 { font-size: 32px; }
  .cp-hero-sub { font-size: 13px; }
}
/* ============================================================
   YCI ABOUT PAGE — rebuilt to match approved reference.
   Simple, editorial, informational. No CTA, no process steps,
   no cards, no dark content blocks.
   Rhythm: hero → statement → full-bleed photo → story →
           full-bleed photo → story → footer.
   ab- prefix isolates page classes from shared global styles.
   ============================================================ */

/* ============ interior hero — same system as Cargo Planks ============ */
.ab-hero {
  position: relative;
  overflow: hidden;
  min-height: 392px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.ab-hero-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.ab-hero-scrim-a {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(16,18,21,.96) 0%, rgba(16,18,21,.90) 30%, rgba(16,18,21,.62) 62%, rgba(16,18,21,.30) 100%);
}
.ab-hero-scrim-b {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,18,21,.42) 0%, rgba(16,18,21,0) 40%, rgba(16,18,21,.30) 100%);
}
.ab-hero-body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
}
.ab-hero h1 {
  color: #fff;
  font-size: 74px;
  line-height: 1.02;
  letter-spacing: -0.012em;
}

/* ============ opening statement ============ */
/* Large black Oswald, uppercase, max two lines. Red rule beneath. */
.ab-statement {
  background: var(--gray);
  padding: 80px 0 72px;
}
.ab-statement p {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--tx-dark);
  max-width: 900px;
}
.ab-statement .rule {
  margin-top: 24px;
}

/* ============ documentary photo bands ============ */
/* Full-viewport-width, fixed height, cover crop. Both bands share the
   same height at every breakpoint. No overlay, no text, no border. */
.ab-doc {
  width: 100%;
  height: 240px;
  overflow: hidden;
  position: relative;
  background: var(--ink-2);
}
.ab-doc-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

/* ============ editorial story sections ============ */
/* Two-column: heading + rule on left, body on right. White bg. */
.ab-story {
  background: var(--gray);
  padding: 48px 0;
}
.ab-story--last {
  padding: 48px 0;
}
.ab-story-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.ab-story-head h2 {
  font-size: 36px;
  line-height: 1.06;
  color: var(--tx-dark);
}
.ab-story-head .rule {
  width: 44px;
  margin: 20px 0 0;
}
.ab-story-body p {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
  margin-bottom: 16px;
}
.ab-story-body p:last-child {
  margin-bottom: 0;
}
/* Short punchy standalone lines — full-color, slightly larger */
.ab-punch {
  font-size: 19px;
  line-height: 1.5;
  color: var(--tx-dark);
}

/* =========================================================
   TABLET ≤991 — faithful translation
   --pad steps 56 → 32. Story grid stays 2-col with less gap.
   ========================================================= */
@media (max-width: 991px) {
  .ab-hero { min-height: 340px; }
  .ab-hero h1 { font-size: 48px; }
  .ab-hero-body { padding: 0 var(--pad) 40px; }

  .ab-statement { padding: 56px 0 52px; }
  .ab-statement p { font-size: 30px; }

  .ab-doc { height: 220px; }

  .ab-story { padding: 56px 0; }
  .ab-story-grid { gap: 40px; }
  .ab-story-head h2 { font-size: 30px; }
}

/* =========================================================
   MOBILE ≤767 — composition, not just reflow
   --pad steps 32 → 22. Story grid stacks vertically.
   ========================================================= */
@media (max-width: 767px) {
  .ab-hero { min-height: 260px; }
  .ab-hero h1 { font-size: 38px; }
  .ab-hero-body { padding: 0 var(--pad) 26px; }

  .ab-statement { padding: 40px 0 40px; }
  .ab-statement p { font-size: 24px; }

  .ab-doc { height: 190px; }

  .ab-story { padding: 44px 0; }
  .ab-story-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ab-story-head { margin-bottom: 28px; }
  .ab-story-head h2 { font-size: 28px; }
  .ab-story-head .rule { margin: 16px 0 0; }
  .ab-story-body p { font-size: 15.5px; }
  .ab-punch { font-size: 17px; }
}

@media (max-width: 479px) {
  .ab-hero { min-height: 230px; }
  .ab-hero h1 { font-size: 32px; }

  .ab-statement p { font-size: 21px; }

  .ab-doc { height: 190px; }
}
/* ============================================================
   YCI INDUSTRIES PAGE — built within the established YCI system.
   Approved rhythm: hero → white Who We Supply → black Commercial
   Volume → white gallery → footer.
   in- prefix isolates page classes from shared global styles.
   Reuses shared .inner, .rule, .btn, .btn-red, .btn-ghost-light,
   .gal, .gal-wrap, .row, .tile, .chev from global.css.
   ============================================================ */

/* ============ interior hero — same system as About/Cargo Planks ===== */
.in-hero {
  position: relative;
  overflow: hidden;
  min-height: 392px;
  display: flex;
  align-items: flex-end;
  background: var(--ink);
}
.in-hero-img {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}
.in-hero-scrim-a {
  position: absolute;
  inset: 0;
  background: linear-gradient(96deg, rgba(16,18,21,.96) 0%, rgba(16,18,21,.90) 30%, rgba(16,18,21,.62) 62%, rgba(16,18,21,.30) 100%);
}
.in-hero-scrim-b {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(16,18,21,.42) 0%, rgba(16,18,21,0) 40%, rgba(16,18,21,.30) 100%);
}
.in-hero-body {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad) 48px;
}
.in-hero h1 {
  color: #fff;
  font-size: 74px;
  line-height: 1.02;
  letter-spacing: -0.012em;
}

/* ============ who we supply ============ */
.in-supply {
  background: var(--gray);
  padding: 72px 0 78px;
}
.in-supply h2 {
  font-size: 36px;
  line-height: 1.04;
  color: var(--tx-dark);
}
.in-supply > .inner > .rule {
  margin: 20px 0 26px;
}
.in-supply-intro {
  font-size: 18px;
  line-height: 1.62;
  color: var(--tx-dark-mute);
  max-width: 860px;
  margin-bottom: 48px;
}
.in-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  align-items: start;
}
.in-col {
  padding: 0 28px;
}
.in-col:first-child {
  padding-left: 0;
}
.in-col:last-child {
  padding-right: 0;
}
.in-col + .in-col {
  border-left: 1px solid var(--rule-light);
}
.in-col h3 {
  font-size: 17px;
  line-height: 1.16;
  color: var(--tx-dark);
}
.in-col .rule {
  width: 36px;
  margin: 14px 0 16px;
}
.in-col p {
  font-size: 14.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
}

/* ============ commercial volume (dark section) ============ */
.in-volume {
  background: var(--ink);
  padding: 72px 0 76px;
}
.in-volume-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}
.in-volume-head h2 {
  font-size: 36px;
  line-height: 1.06;
  color: #fff;
}
.in-volume-head .rule {
  margin: 22px 0 0;
}
.in-volume-body p {
  font-size: 16.5px;
  line-height: 1.68;
  color: #c9ced3;
  margin-bottom: 28px;
}
.in-volume-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* ============ gallery ============ */
.in-gallery {
  background: var(--gray);
  padding: 72px 0 0;
}
.in-gallery-head {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 44px;
}
.in-gallery-head h2 {
  font-size: 36px;
  line-height: 1.04;
  color: var(--tx-dark);
}
.in-gallery-head .rule {
  margin: 20px 0 0;
}
.in-gallery-head > p {
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
  max-width: 520px;
}

/* =========================================================
   TABLET ≤991 — faithful translation
   ========================================================= */
@media (max-width: 991px) {
  .in-hero { min-height: 340px; }
  .in-hero h1 { font-size: 48px; }
  .in-hero-body { padding: 0 var(--pad) 40px; }

  .in-supply { padding: 56px 0 60px; }
  .in-supply h2 { font-size: 29px; }
  .in-supply-intro { font-size: 16px; margin-bottom: 36px; }
  .in-cols {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }
  .in-col {
    padding: 24px 28px 0;
  }
  .in-col:first-child,
  .in-col:nth-child(3) {
    padding-left: 0;
  }
  .in-col:nth-child(odd) {
    border-left: none;
  }
  .in-col:nth-child(3),
  .in-col:nth-child(4) {
    border-top: 1px solid var(--rule-light);
    margin-top: 24px;
  }
  .in-col h3 { font-size: 16px; }
  .in-col p { font-size: 14px; }

  .in-volume { padding: 56px 0 60px; }
  .in-volume-grid { gap: 36px; }
  .in-volume-head h2 { font-size: 29px; }
  .in-volume-body p { font-size: 15px; }

  .in-gallery { padding: 56px 0 0; }
  .in-gallery-head { gap: 32px; margin-bottom: 36px; }
  .in-gallery-head h2 { font-size: 29px; }
  .in-gallery-head > p { font-size: 15px; }
}

/* =========================================================
   MOBILE ≤767 — composition, not just reflow
   ========================================================= */
@media (max-width: 767px) {
  .in-hero { min-height: 260px; }
  .in-hero h1 { font-size: 38px; }
  .in-hero-body { padding: 0 var(--pad) 26px; }

  .in-supply { padding: 40px 0 44px; }
  .in-supply h2 { font-size: 26px; }
  .in-supply-intro { font-size: 15.5px; margin-bottom: 28px; }
  .in-cols {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .in-col {
    padding: 20px 0 0;
    border-left: none;
  }
  .in-col:first-child { padding-top: 0; }
  .in-col + .in-col {
    border-left: none;
    border-top: 1px solid var(--rule-light);
    margin-top: 20px;
  }
  .in-col h3 { font-size: 16px; }
  .in-col p { font-size: 14px; }

  .in-volume { padding: 44px 0 48px; }
  .in-volume-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .in-volume-head { margin-bottom: 24px; }
  .in-volume-head h2 { font-size: 26px; }
  .in-volume-body p { font-size: 15px; margin-bottom: 24px; }
  .in-volume-btns .btn { flex: 1 1 100%; }

  .in-gallery { padding: 44px 0 0; }
  .in-gallery-head {
    grid-template-columns: 1fr;
    gap: 0;
    margin-bottom: 32px;
  }
  .in-gallery-head h2 { font-size: 26px; }
  .in-gallery-head .rule { margin: 16px 0 18px; }
  .in-gallery-head > p { font-size: 15px; max-width: none; }
}

@media (max-width: 479px) {
  .in-hero { min-height: 230px; }
  .in-hero h1 { font-size: 32px; }
}
/* ============================================================
   YCI FAQ PAGE — built within the established YCI system.
   White background, no hero. Simple accordion list.
   fq- prefix isolates page classes from shared global styles.
   Reuses shared .inner, .rule from global.css.
   ============================================================ */

.fq-page {
  background: var(--gray);
  padding: 66px 0 80px;
}
.fq-page h1 {
  font-size: 36px;
  line-height: 1.04;
  color: var(--tx-dark);
}
.fq-page > .inner > .rule {
  margin: 16px 0 22px;
}
.fq-intro {
  font-size: 19px;
  line-height: 1.58;
  color: var(--tx-dark-mute);
  max-width: 64ch;
  margin-bottom: 44px;
}

/* ---- accordion list ---- */
.fq-list {
  border-top: 1px solid var(--rule-light);
}
.fq-item {
  border-bottom: 1px solid var(--rule-light);
}
.fq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 0;
  text-align: left;
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--tx-dark);
}
.fq-q:hover {
  color: var(--red);
}
.fq-icon {
  color: var(--red);
  font-size: 22px;
  font-weight: 400;
  flex: none;
  margin-left: 24px;
  line-height: 1;
}
.fq-a {
  display: none;
  padding: 0 0 22px;
  max-width: 800px;
}
.fq-a.is-open {
  display: block;
}
.fq-a p {
  font-size: 15.5px;
  line-height: 1.68;
  color: var(--tx-dark-mute);
}

/* =========================================================
   TABLET ≤991
   ========================================================= */
@media (max-width: 991px) {
  .fq-page { padding: 50px 0 60px; }
  .fq-page h1 { font-size: 29px; }
  .fq-intro { font-size: 17px; margin-bottom: 36px; }
  .fq-q { font-size: 16px; }
}

/* =========================================================
   MOBILE ≤767
   ========================================================= */
@media (max-width: 767px) {
  .fq-page { padding: 36px 0 48px; }
  .fq-page h1 { font-size: 28px; }
  .fq-intro { font-size: 16px; margin-bottom: 28px; }
  .fq-q { font-size: 15px; padding: 18px 0; }
  .fq-icon { font-size: 20px; margin-left: 16px; }
  .fq-a p { font-size: 15px; }
}

/* ============================================================
   WEBFLOW DELIVERY ADDENDUM
   The reference set these two background images inline from local
   module imports. In Webflow they resolve to the production assets
   already hosted on the site CDN. Nothing else is changed.
   ============================================================ */
.m-why {
  background-image: url('https://cdn.prod.website-files.com/6a88ea1332f2e07fe9dd5c81/6a8b23c6aeab542ec28183fb_yci-why-plank-stack.webp');
}