/* Silverscreen Decoration & Fulfillment — site styles
   Mobile first. Breakpoints match the Duda site: tablet 768px, desktop 1025px. */

/* ---------- Fonts ---------- */

/* Myriad Pro (`myriad-pro`: 300, 400, 400 italic, 700, 900) comes from the Adobe Fonts kit in <head>.
   The site uses 400, 700 and 900 only (never Light 300). */

/* XSCALE: WOFF2 (converted from the TTF, a third of the size), with the TTF as a fallback. */
@font-face {
  font-family: "XSCALE";
  src: url("/fonts/X-SCALE_.woff2") format("woff2"),
       url("/fonts/X-SCALE_.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* PT Sans: fallback for Myriad Pro. 700 also covers bold text. */
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/pt-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/pt-sans-latin-400-italic.woff2") format("woff2");
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PT Sans";
  src: url("/fonts/pt-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */

:root {
  --navy: #002554;
  --blue: #326295;
  --dark-navy: #003a70;
  --steel: #7d9bc1;
  --white: #ffffff;
  --light-gray: #f4f4f4;
  --text: #000000;
  --rule: rgba(0, 0, 0, 0.4);

  --font-body: myriad-pro, "PT Sans", sans-serif;

  --content-width: 1200px;

  /* One corner radius for the whole site: every photo and every shape (a solid or translucent box
     holding content over or next to a photo), plus buttons and cards. Full-bleed photos and shapes, the ones that run edge
     to edge across the screen, stay square. The rules are in the Rounded corners section below. */
  --radius: 10px;

  /* Type system (the roles are in the Type system section at the end of this file).
     Sizes scale smoothly from a 390px screen to a 1440px screen: clamp(min, rem + vw, max). */
  --font-display: "XSCALE", "Arial Black", sans-serif; /* stat numbers only */

  --fs-h1: clamp(2.25rem, 1.6rem + 2.6667vw, 4rem);         /* 36 → 64px */
  --fs-h2: clamp(1.75rem, 1.3786rem + 1.5238vw, 2.75rem);      /* 28 → 44px */
  --fs-h3: clamp(1.25rem, 1.1107rem + 0.5714vw, 1.625rem);     /* 20 → 26px */
  --fs-h4: clamp(1.0625rem, 0.9929rem + 0.2857vw, 1.25rem);    /* 17 → 20px */
  --fs-h5: clamp(0.875rem, 0.8518rem + 0.0952vw, 0.9375rem);   /* 14 → 15px, also .eyebrow */
  --fs-h6: clamp(0.8125rem, 0.7893rem + 0.0952vw, 0.875rem);   /* 13 → 14px */
  --fs-faq-q: clamp(0.9375rem, 0.9143rem + 0.0952vw, 1rem);    /* 15 → 16px */
  --fs-lead: clamp(1.0625rem, 1.0393rem + 0.0952vw, 1.125rem); /* 17 → 18px */
  --fs-body: clamp(1rem, 0.9768rem + 0.0952vw, 1.0625rem);     /* 16 → 17px */
  --fs-small: 0.875rem;                                        /* 14px */
  --fs-nav: 0.9375rem;                                         /* 15px */
  --fs-button: 0.9375rem;                                      /* 15px */
  --fs-stat: clamp(3rem, 2.4429rem + 2.2857vw, 4.5rem);        /* 48 → 72px */
  --fs-stat-label: 0.875rem;                                   /* 14px */

  --lh-h1: 1;
  --lh-h2: 1.05;
  --lh-h3: 1.15;
  --lh-h4: 1.2;
  --lh-h5: 1.4;
  --lh-h6: 1.4;
  --lh-faq-q: 1.3;
  --lh-lead: 1.55;
  --lh-body: 1.6;

  --ls-heading: 0.01em;
  --ls-h4: 0.03em;
  --ls-label: 0.08em; /* H5, eyebrow, H6, stat label */

  --muted: #555555;       /* H5 and eyebrow on light backgrounds (7.5:1 on white, 6.9:1 on light gray) */
  --muted-on-dark: rgba(255, 255, 255, 0.8);
  --answer: #4d4d4d;      /* FAQ answers (8.4:1 on light gray) */
  --hairline: #d6d6d6;    /* FAQ row dividers */

  --measure: 60ch; /* about 70 characters per line: Myriad Pro averages ~0.85ch per character */
}

/* ---------- Base ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
}

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

img {
  height: auto;
}

a {
  color: inherit;
}

strong,
b {
  font-weight: 700;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two-color focus ring (WCAG technique C40): the blue outline, plus a white ring filling the gap
   between it and the element. On white the white ring is invisible and focus looks as before; on blue,
   navy and photos the white ring shows. An element with its own box-shadow must repeat the white ring
   in its :focus-visible rule (see .reach__chip and .reach__menu-button). */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--white);
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2000;
  padding: 8px 16px;
  background: var(--navy);
  color: var(--white);
  transform: translateY(-100%);
}

.skip-link:focus {
  transform: none;
}

/* ---------- Rounded corners ----------
   Photos: every image from the {% image %} shortcode (a <picture>) gets var(--radius) on the <img>,
   which is the element that shows the crop (object-fit), so the corners always show.
   Shapes: any solid or translucent box that holds content (a heading, text, buttons) and sits over or
   next to a photo is class="shape", whatever its color: the feature panel boxes (white, gray, navy) and
   the hero boxes. Section background bands are not shapes; they run full width and stay square.
   Fills: .shape--blue is translucent medium blue (the homepage and Contact Us heroes; dark enough for
   small white text even over a light photo), .shape--steel translucent light steel (not in use now). Set --shape-alpha to change
   either one's opacity.
   Opt-out: put .full-bleed on the container of a photo or shape that runs edge to edge across the screen.
   Logos (header, footer, partner strip) and the framed Virtual Tour graphic keep their own edges. */
picture img,
.shape {
  border-radius: var(--radius);
}

.shape--steel {
  background: rgb(125 155 193 / var(--shape-alpha, 0.85)); /* --steel */
}

.shape--blue {
  background: rgb(50 98 149 / var(--shape-alpha, 0.9)); /* --blue */
}

/* A navy button's usual hover (blue) would vanish into a blue shape, so it darkens instead. */
.shape--blue .btn--navy:hover {
  background: var(--dark-navy);
}

.full-bleed img,
.full-bleed .shape,
.full-bleed.shape,
:is(.site-header__logo, .site-footer__logo, .logo-strip, .vt-hero__graphic) img {
  border-radius: 0;
}

/* ---------- Type ---------- */

p {
  margin: 0;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin: 0;
}

/* ---------- Text pages (legal, statements) ---------- */

.text-page {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 31px 60px;
}

.text-page h1 {
  margin-bottom: 16px;
}

.text-page h2 {
  margin-top: 40px;
  margin-bottom: 12px;
}

.text-page p + p {
  margin-top: 16px;
}

@media (min-width: 1025px) {
  .text-page {
    padding: 60px 28.8px 86.4px;
  }
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 7px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s;
}

.btn:hover {
  background: var(--steel);
}

/* Three colors: blue (default), navy and light steel. */
.btn--navy {
  background: var(--navy);
}

.btn--navy:hover,
.btn--steel:hover {
  background: var(--blue);
}

.btn--steel {
  background: var(--steel);
}

/* Pause/play button for moving content (WCAG 2.2.2): the hero slideshow, the logo strip and the
   DTF video tile. Markup: motionToggle() in macros.njk; behavior: motionToggle() in site.js.
   It shows the pause icon while playing and the play icon once paused. */
.motion-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(0 37 84 / 0.75); /* --navy */
  color: var(--white);
  transition: background-color 0.2s;
}

.motion-toggle:hover {
  background: var(--navy);
}

.motion-toggle[hidden],
.motion-toggle[data-paused] .motion-toggle__pause,
.motion-toggle:not([data-paused]) .motion-toggle__play {
  display: none;
}

.motion-toggle svg {
  width: 14px;
  height: 14px;
}

/* ---------- Utilities ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Shared nav pieces ---------- */

/* Underline under the current page and on hover: 2px blue, grows from the left. */
.nav__text {
  display: block;
}

.nav__text::before,
.nav__text::after {
  content: "";
  display: block;
  width: 100%;
  height: 0;
  border-top: 2px solid transparent;
  transform: scaleX(0);
  transform-origin: 0 center;
  opacity: 0;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.nav__text::before {
  margin-bottom: 0.2em;
}

.nav__text::after {
  margin-top: 0.2em;
  border-top-color: var(--blue);
}

.nav__link:hover .nav__text::after,
.nav__link[aria-current="page"] .nav__text::after,
.nav__link.is-active .nav__text::after {
  transform: scaleX(1);
  opacity: 1;
}

.nav__link {
  text-decoration: none;
}

.chevron {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  margin-top: -2px;
  transition: transform 0.2s ease-out;
}

[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

/* Drawer and footer submenus open inline when tapped. */
.drawer-nav .nav__sub,
.footer-nav .nav__sub {
  display: none;
}

.drawer-nav [aria-expanded="true"] + .nav__sub,
.footer-nav [aria-expanded="true"] + .nav__sub {
  display: block;
}

.nav__sublink {
  display: block;
  text-decoration: none;
}

.nav__sublink:hover,
.nav__sublink[aria-current="page"] {
  color: var(--blue);
}

/* ---------- Social icons ---------- */

.social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 40px;
  color: var(--blue);
  transition: transform 0.2s ease-out;
}

.social__link:hover {
  transform: translateY(-3px);
}

.social__link svg {
  width: 23px;
  height: 23px;
  fill: currentColor;
}

/* ---------- Header ---------- */

.site-header {
  background: var(--white);
}

.site-header__inner {
  display: flex;
  align-items: center;
  padding: 12px 11px;
}

.site-header__logo {
  flex: none;
  padding: 6px 16px;
}

.site-header__logo img {
  width: 170px;
}

.main-nav,
.site-header__portal {
  display: none;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 34px;
  margin-left: auto;
  padding: 0 16px;
}

.site-header__email svg {
  width: 26px;
  height: 26px;
  fill: var(--blue);
}

.site-header__burger svg {
  width: 30px;
  height: 30px;
  fill: var(--navy);
}

@media (min-width: 768px) {
  .site-header__inner {
    padding: 12px 20px;
  }

  .site-header__logo img {
    width: 211px;
  }

  .site-header__actions {
    gap: 49px;
  }

  .site-header__email svg {
    width: 28px;
    height: 28px;
  }
}

@media (min-width: 1025px) {
  .site-header__inner {
    padding: 10px 4%;
  }

  /* Duda's three columns: logo 18.74%, nav 63.03%, Portal Access 18.21%.
     The logo is 227px but never wider than its column, so it shrinks below ~1500px. */
  .site-header__logo {
    width: 18.74%;
  }

  .site-header__logo img {
    width: 100%;
    max-width: 227px;
  }

  .site-header__actions {
    display: none;
  }

  .main-nav {
    display: flex;
    flex: none;
    width: 63.03%;
    justify-content: center;
    padding: 6px 16px;
  }

  /* When labels no longer fit, whole items wrap to a centered second row. */
  .main-nav .nav__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .main-nav .nav__item {
    position: relative;
  }

  .main-nav .nav__link {
    display: flex;
    align-items: center;
    height: 34px;
    padding: 0 15px;
    white-space: nowrap;
  }

  /* Services dropdown */
  .main-nav .nav__sub {
    position: absolute;
    top: 100%;
    left: 15px;
    z-index: 100;
    background: var(--light-gray);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: transform 0.4s ease-out, opacity 0.1s ease-out, visibility 0s 0.4s;
  }

  .main-nav .nav__item--has-sub:hover .nav__sub,
  .main-nav [aria-expanded="true"] + .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: transform 0.4s ease-out, opacity 0.1s ease-out;
  }

  .main-nav .nav__sublink {
    padding: 15px 30px 15px 15px;
  }

  .site-header__portal {
    display: inline-flex;
    flex: none;
    /* 168px, but never wider than Duda's 18.21% column (less its 16px padding each side), right-aligned. */
    width: min(168px, calc(18.21% - 32px));
    height: 50px;
    margin: 0 16px 0 auto;
  }
}

/* ---------- Menu drawer (below 1025px) ---------- */

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s linear;
}

.menu-drawer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: 100vh;
  max-height: 100dvh;
  overflow-y: auto;
  background: var(--light-gray);
  transform: translateY(-100%);
  transition: transform 0.3s linear;
}

.menu-open {
  overflow: hidden;
}

.menu-open .menu-drawer {
  transform: none;
}

.menu-open .menu-overlay {
  opacity: 1;
}

.menu-drawer__top {
  display: flex;
  justify-content: flex-end;
  padding: 32px;
}

.menu-drawer__close svg {
  width: 30px;
  height: 30px;
  fill: var(--navy);
}

.drawer-nav {
  padding: 16px 48px;
}

.drawer-nav .nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.drawer-nav .nav__link {
  display: inline-block;
  padding: 9px 0;
}

.drawer-nav .nav__sublink {
  padding: 4px 12px 22px;
}

.menu-drawer__social {
  padding: 48px 48px 32px;
}

.menu-drawer__social .social__link {
  width: 40px;
  height: 45px;
}

.menu-drawer__social .social__link svg {
  width: 28px;
  height: 28px;
}

@media (min-width: 1025px) {
  .menu-drawer,
  .menu-overlay {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-drawer,
  .menu-overlay,
  .main-nav .nav__sub,
  .nav__text::after,
  .social__link {
    transition: none;
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--white);
}

.site-footer__main,
.site-footer__rule,
.site-footer__bottom {
  max-width: var(--content-width);
  margin: 0 auto;
}

.site-footer__main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 30px 15px 18.75px;
}

.site-footer__main > * {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 0 16px;
}

.site-footer__logo img {
  width: 262px;
}

.site-footer__tagline a {
  text-decoration: none;
}

.footer-nav .nav__link {
  display: inline-block;
  padding: 0 0 12px;
}

.footer-nav .nav__text::after {
  border-top-width: 3px;
}

.footer-nav .nav__sublink {
  padding: 10px 12px;
}

.site-footer__portal {
  width: 200px;
  height: 52px;
}

.site-footer__rule {
  padding: 3.75px 22.5px;
}

.site-footer__rule hr {
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 7.5px 31px 30px;
  text-align: center;
}

@media (min-width: 768px) {
  .site-footer__main {
    display: grid;
    grid-template-columns: 32fr 30fr 34fr;
    column-gap: 2%;
    align-items: start;
    padding: 48px 32px 32px;
  }

  .site-footer__main > * {
    padding: 0;
  }

  .site-footer__logo img {
    width: 215px;
  }

  .site-footer__tagline {
    text-align: center;
  }

  .footer-nav {
    padding: 0 22px 0 37px;
  }

  .site-footer__rule {
    padding: 16px 32px;
  }

  .site-footer__bottom {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    padding: 0 32px 24px;
  }

  .site-footer__copyright {
    text-align: left;
  }
}

@media (min-width: 1025px) {
  .site-footer__main {
    grid-template-columns: 1fr 1fr 1fr;
    padding: 86.4px 28.8px;
  }

  .site-footer__brand {
    align-items: center;
  }

  .site-footer__logo img {
    width: 306px;
  }

  .footer-nav {
    padding: 0 68.5px;
  }

  /* Portal Access is in the header at desktop width. */
  .site-footer__portal {
    display: none;
  }

  .site-footer__rule {
    padding: 14.4px 28.8px;
  }

  .site-footer__bottom {
    grid-template-columns: 46.5fr 20fr 33.5fr;
    padding: 0 28.8px 14.4px;
  }
}

/* ---------- Page building blocks (macros.njk) ---------- */

/* Background bands. The inner column is 1200px wide on desktop, like the Duda site. */
.band {
  position: relative;
}

.band--gray { background: var(--light-gray); }
.band--blue { background: var(--blue); color: var(--white); }
.band--navy { background: var(--navy); color: var(--white); }
.band--photo { color: var(--white); }

.band__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 37.5px 15px;
}

.band__bg,
.band__bg picture {
  position: absolute;
  inset: 0;
}

.band__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.band__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 31, 72, 0.75);
}

@media (min-width: 768px) {
  .band__inner { padding: 56px 32px; }
}

@media (min-width: 1025px) {
  .band__inner { padding: 86.4px 28.8px; }
}

/* Section titles (the accent word is .accent-color, in the Type system section). */
.section-title {
  text-align: center;
}

.divider {
  width: 136px;
  height: 2px;
  margin: 28px auto 0;
  border: 0;
  background: linear-gradient(89deg, transparent, var(--blue), transparent);
}

.divider--white {
  background: linear-gradient(89deg, transparent, var(--white), transparent);
}

@media (min-width: 768px) {
  .divider { width: 165px; }
}

/* Cards */
.card-grid {
  display: grid;
  gap: 18px;
}

.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20.7px 17.25px;
  border: 1px solid #ededed;
  border-radius: var(--radius);
  text-align: center;
  transition: box-shadow 0.4s ease-in-out;
}

@media (hover: hover) {
  .card:hover {
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.5);
  }
}

.card .icon {
  width: 70px;
  height: 70px;
  fill: var(--blue);
}

.card__title {
  margin-top: 18px;
}

.card__body {
  margin-top: 14px;
}

@media (min-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2%;
    row-gap: 16px;
  }

  .card { padding: 15.36px; }

  .card .icon {
    width: 90px;
    height: 99px;
  }

  .card__title {
    margin-top: 20px;
  }

  .card__body { margin-top: 24px; }
}

@media (min-width: 1025px) {
  .card-grid {
    column-gap: 3%;
    row-gap: 36px;
  }

  .card { padding: 22.84px; }
}

/* Feature rows: photo beside text. The photo always comes first on phones. */
.feature {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.feature__media img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.feature__text {
  padding: 10.34px 16px;
}

.feature__title a {
  text-decoration: none;
}

.feature__text p {
  margin-top: 19px;
}

.feature__buttons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  margin-top: 22px;
}

.feature__buttons .btn {
  width: 250px;
  min-height: 52px;
}

@media (min-width: 768px) {
  .feature {
    flex-direction: row;
    align-items: center;
    gap: 6%;
  }

  .feature--reverse {
    flex-direction: row-reverse;
  }

  .feature__media {
    flex: 0 0 48.2%;
  }

  .feature__media img {
    height: 344px;
  }

  .feature__text {
    flex: 1;
    padding: 22px 0;
  }

  .feature__text p { margin-top: 28px; }

  .feature__buttons {
    gap: 24px;
    margin-top: 28px;
  }

  .feature__buttons .btn {
    width: 180px;
    min-height: 50px;
  }
}

@media (min-width: 1025px) {
  .feature { gap: 4%; }

  .feature__media { flex-basis: 48.8%; }

  .feature__text { padding: 34.27px 0; }

  .feature__buttons .btn {
    width: 200px;
    min-height: 54px;
  }
}

/* Testimonials: gray panel with a slider and a photo. */
.testimonials {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 27.6px 20.7px;
  border-radius: var(--radius);
  background: var(--light-gray);
}

.testimonials__media img {
  width: 100%;
  height: 279px;
  object-fit: cover;
}

.testimonials__main {
  min-width: 0;
}

.testimonials .icon--stars {
  width: 96px;
  height: 16px;
  fill: var(--blue);
}

/* The Duda slider is a fixed-height box with the dots at the bottom; min-height keeps that look. */
.slider {
  display: flex;
  flex-direction: column;
  min-height: 573px;
  margin-top: 23px;
}

.slider__viewport {
  overflow: hidden;
}

.slider__track {
  display: flex;
  transition: transform 0.5s ease-in-out;
}

.testimonial {
  flex: 0 0 100%;
  margin: 0;
}

.testimonial blockquote {
  margin: 0;
}

.testimonial__quote {
  margin-bottom: 15px;
  color: var(--blue);
}

.testimonial p + p,
.testimonial__cite {
  margin-top: 22.5px;
}

.testimonial p.tight {
  margin-top: 0;
}

.slider__dots {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding: 18px 0;
}

/* Each dot's button is a 24px tap target (WCAG 2.5.8); the visible dot inside it stays 12px. */
.slider__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.slider__dot::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ced6d9;
  box-shadow: 0 0 2px rgba(24, 39, 75, 0.3), 0 0 3px rgba(24, 39, 75, 0.04);
}

.slider__dot[aria-current="true"]::before {
  background: var(--blue);
}

@media (min-width: 768px) {
  .testimonials {
    gap: 32px;
    padding: 22px;
  }

  .testimonials__media img { height: 470px; }

  .testimonials .icon--stars {
    width: 149px;
    height: 25px;
  }

  .slider {
    min-height: 462px;
    margin-top: 62px;
  }

  .testimonial__quote {
    margin-bottom: 18px;
  }
}

@media (min-width: 1025px) {
  .testimonials {
    flex-direction: row;
    align-items: flex-start;
    gap: 6%;
    padding: 40px 34.27px 34.27px;
  }

  .testimonials__main { flex: 1; }

  .testimonials__media {
    flex: 0 0 367px;
    order: 2;
  }

  .testimonials__media img { height: 548px; }

  .slider {
    min-height: 506px;
    margin-top: 35px;
  }

  .testimonial__quote {
    margin-bottom: 25px;
  }

  .testimonial p + p,
  .testimonial__cite {
    margin-top: 25.5px;
  }
}

/* Logo strip: arrows either side of a row that scrolls one logo at a time. */
.logo-strip {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  column-gap: 6.5px;
  padding-block: 28px;
  border-block: 3px solid var(--navy);
  --logos: 1;
  --logo-gap: 13px;
}

.logo-strip__viewport {
  overflow: hidden;
  touch-action: pan-y;
}

.logo-strip__list {
  display: flex;
  gap: var(--logo-gap);
  transition: transform 0.5s ease-in-out;
}

.logo-strip__item {
  flex: 0 0 calc((100% - (var(--logos) - 1) * var(--logo-gap)) / var(--logos));
}

.logo-strip__item a {
  display: block;
  height: 102px;
  border: 1px solid #ededed;
  border-radius: var(--radius);
  background: var(--white);
}

.logo-strip__item picture,
.logo-strip__item img {
  width: 100%;
  height: 100%;
}

.logo-strip__item img {
  object-fit: contain;
}

/* The viewport clips anything outside a logo's box, so the focus ring sits just inside it. */
.logo-strip__item a:focus-visible {
  outline-offset: -4px;
  box-shadow: none;
}

.logo-strip__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  color: var(--blue);
}

.logo-strip__arrow .chevron {
  width: 22px;
  height: 13px;
  margin: 0;
}

.logo-strip__arrow--prev .chevron { transform: rotate(90deg); }
.logo-strip__arrow--next .chevron { transform: rotate(-90deg); }

/* Pause/play button: sits on the strip's bottom border, centered, in the strip's own colors. */
.logo-strip__toggle {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 32px;
  height: 32px;
  border: 3px solid var(--navy);
  background: var(--white);
  color: var(--blue);
  transform: translate(-50%, 50%);
}

.logo-strip__toggle:hover {
  background: var(--white);
  color: var(--navy);
}

.logo-strip__toggle svg {
  width: 12px;
  height: 12px;
}

@media (min-width: 768px) {
  .logo-strip {
    column-gap: 16px;
    --logos: 5;
    --logo-gap: 7px;
  }

  .logo-strip__item a { height: 82px; }
}

@media (min-width: 1025px) {
  .logo-strip {
    column-gap: 18px;
    --logo-gap: 15px;
  }

  .logo-strip__item a { height: 104px; }
}

/* Contact details: icon tile, label and link. */
.contact-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-details__row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.contact-details__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 57px;
  border-radius: 20%;
  background: #dfe5ee;
}

.contact-details__icon .icon {
  width: 28px;
  height: 28px;
  fill: var(--blue);
}

.contact-details__label {
  margin-bottom: 9px;
}

@media (min-width: 768px) {
  .contact-details { gap: 25px; }

  .contact-details__icon {
    width: 67px;
    height: 67px;
  }

  .contact-details__icon .icon {
    width: 34px;
    height: 34px;
  }
}

@media (min-width: 1025px) {
  .contact-details { gap: 58px; }
}

/* Contact form: underlined fields on a gray panel. */
.contact-form {
  display: grid;
  margin: -20px -10px 0;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
  padding: 10px 14px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  margin: 3px 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
}

.contact-form input {
  height: 30px;
  padding: 0 10px;
}

.contact-form textarea {
  height: 50px;
  padding: 10px;
  resize: both;
}

/* Hidden spam trap (see the contactForm macro). Moved off-screen rather than display:none,
   which some bots skip. */
.contact-form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__submit:disabled {
  opacity: 0.7;
  cursor: wait;
}

.contact-form__submit {
  justify-self: start;
  width: 220px;
  min-height: 52px;
  margin: 40px 0 0 10px;
}

@media (min-width: 768px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
  }

  .contact-form__field {
    padding: 15px 10px;
  }

  .contact-form__field--wide,
  .contact-form__submit {
    grid-column: 1 / -1;
  }

  .contact-form__submit { margin-top: 72px; }
}

@media (min-width: 1025px) {
  .contact-form__field {
    padding: 20px 10px;
  }

  .contact-form__submit { margin-top: 81px; }
}

/* ---------- Home page ---------- */

/* Hero: photo slideshow behind a steel-blue box. */
.hero {
  position: relative;
  overflow: hidden;
  color: var(--white);
}

.hero__slides,
.hero__slide,
.hero__slide picture {
  position: absolute;
  inset: 0;
}

.hero__slide {
  opacity: 0;
  transition: opacity 0.75s ease-in-out;
}

.hero__slide.is-active {
  opacity: 1;
}

.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 75px 15px;
}

.hero__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px; /* the same space above the H1 as below the button */
  text-align: center;
}

.hero__eyebrow {
  margin-bottom: 12px;
}

.hero__title {
  text-wrap: balance;
}

.hero__button {
  width: 220px;
  min-height: 52px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .hero__inner { padding: 96px 32px; }

  .hero__box { padding: 48px 32px; }

  .hero__button {
    width: 200px;
    margin-top: 36px;
  }
}

@media (min-width: 1025px) {
  .hero__inner { padding: 216px 28.8px; }

  .hero__box { padding: 64px 48px; }

  .hero__button { margin-top: 40px; }
}

/* Slideshow pause/play button: bottom-right corner of the hero, over the photos. */
.hero__toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
}

/* Intro text and buttons (gray band) */
.intro .band__inner {
  padding: 45px 15px 30px;
  text-align: center;
}

.intro__text {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 16px;
  color: var(--navy);
}

.intro__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-top: 34px;
}

.intro__buttons .btn {
  width: 250px;
  min-height: 52px;
}

@media (min-width: 768px) {
  .intro .band__inner { padding: 56px 32px; }

  .intro__text {
    max-width: 640px;
    padding: 0;
  }

  .intro__buttons {
    flex-direction: row;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
  }

  .intro__buttons .btn {
    width: 200px;
    min-height: 50px;
  }
}

@media (min-width: 1025px) {
  .intro .band__inner { padding: 100.8px 28.8px 86.4px; }

  .intro__text { max-width: 740px; }

  .intro__buttons {
    gap: 46px;
    margin-top: 29px;
  }

  .intro__buttons .btn { min-height: 52px; }
}

/* Why Choose Silverscreen */
.why .band__inner { padding-bottom: 37.5px; }

.why .section-title {
  max-width: 310px;
  margin: 0 auto;
}

.why .card-grid { margin-top: 39px; }

@media (min-width: 768px) {
  .why .band__inner { padding: 56px 16px; }

  .why .section-title { max-width: none; }

  .why .card-grid { margin-top: 44px; }
}

@media (min-width: 1025px) {
  .why .band__inner { padding: 86.4px 28.8px 100.8px; }

  .why .section-title {
    max-width: 1045px;
    margin: 0 auto;
  }

  .why .card-grid { margin-top: 76px; }
}

/* What We Offer */
.services .band__inner { padding-bottom: 45px; }

.services .feature:first-of-type { margin-top: 30px; }

.services .feature + .feature { margin-top: 22.5px; }

.services a { color: var(--white); }

@media (min-width: 768px) {
  .services .band__inner { padding-bottom: 64px; }

  .services .feature:first-of-type { margin-top: 52px; }

  .services .feature + .feature { margin-top: 64px; }
}

@media (min-width: 1025px) {
  .services .band__inner { padding: 100.8px 28.8px 115.2px; }

  .services .feature:first-of-type { margin-top: 76px; }

  .services .feature + .feature { margin-top: 86.4px; }
}

/* Close partners, far reach: supplier map and US ground-shipping map (src/_includes/shipping-map/).
   One white card per tab. Option chips: right of the map from 1025px, a row under it from 768px,
   and a frosted pop-up menu (opened from the card's corner button) on phones. */
.reach {
  /* Transit-day steps, light steel → navy, in even lightness steps (CIELAB L* 83, 63, 49, 35, 15;
     neighbors differ by ΔE 15+). Day 2 is --steel and day 5 is --navy. "Not reached yet" is a neutral gray. */
  --day-1: #bdd1e8;
  --day-2: var(--steel);
  --day-3: #4179aa;
  --day-4: #00548c;
  --day-5: var(--navy);
  --day-none: #e9eaec;
  --map-land: #f2f5f9;
}

.reach__lede {
  max-width: var(--measure);
  margin: 28px auto 0;
  text-align: center;
}

.reach__widget {
  margin-top: 30px;
}

/* Main tabs: the active one is a filled navy pill. */
.reach__tabs {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.reach__tab {
  padding: 9px 16px;
  border-radius: 999px;
  color: var(--navy);
  font-weight: 700;
  font-size: var(--fs-button);
  transition: background-color 0.2s, color 0.2s;
}

.reach__tab[aria-selected="true"] {
  background: var(--navy);
  color: var(--white);
}

.reach__tab[aria-selected="false"]:hover {
  color: var(--blue);
}

.reach__panel {
  margin-top: 18px;
}

.reach__card {
  position: relative;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 10px 30px rgba(0, 37, 84, 0.1), 0 2px 6px rgba(0, 37, 84, 0.06);
}

/* Both maps share the 960 × 600 frame, so the card keeps its size when switching tabs. */
.reach__map {
  position: relative;
  aspect-ratio: 960 / 600;
  overflow: hidden;
  border-radius: calc(var(--radius) - 4px);
}

.reach__map svg {
  position: relative; /* above the US map's loading placeholder */
  width: 100%;
  height: 100%;
}

.reach__caption {
  margin: 12px auto 0;
  color: var(--muted);
  font-size: var(--fs-small);
  text-align: center;
}

/* Option chips (tesla.rocks style): uppercase, thin border; the active one gets a blue outline. */
.reach__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.reach__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  font-size: var(--fs-small);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  transition: border-color 0.2s, box-shadow 0.2s, color 0.2s;
}

.reach__chip:hover {
  border-color: var(--steel);
  color: var(--navy);
}

.reach__chip[aria-checked="true"] {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue);
  color: var(--navy);
  font-weight: 700;
}

.reach__chip[aria-checked="true"]:focus-visible {
  box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 2px var(--white);
}

.reach__swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.reach__swatch--1 { background: var(--day-1); }
.reach__swatch--2 { background: var(--day-2); }
.reach__swatch--3 { background: var(--day-3); }
.reach__swatch--4 { background: var(--day-4); }
.reach__swatch--5 { background: var(--day-5); }

.reach__options-head,
.reach__menu-button {
  display: none;
}

/* Phones: one menu button in the card's top-right corner opens a frosted panel over the map. */
@media (max-width: 767px) {
  .reach__menu-button {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.92);
    color: var(--navy);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0, 37, 84, 0.12);
  }

  .reach__menu-button:focus-visible {
    box-shadow: 0 2px 8px rgba(0, 37, 84, 0.12), 0 0 0 2px var(--white);
  }

  .reach__options {
    position: absolute;
    inset: 10px;
    z-index: 4;
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: calc(var(--radius) - 4px);
    background: rgba(242, 245, 249, 0.62);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .reach__options.is-open {
    display: flex;
  }

  .reach__options-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .reach__options-title {
    color: var(--navy);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: var(--ls-label);
    text-transform: uppercase;
  }

  .reach__close {
    width: 32px;
    height: 32px;
    margin: -6px -6px -6px 0;
    color: var(--navy);
    font-size: 1.5rem;
    line-height: 1;
  }

  .reach__chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .reach__chips--suppliers {
    grid-template-columns: 1fr;
  }

  .reach__chip {
    justify-content: center;
    min-height: 36px;
    padding: 6px 10px;
    font-size: 0.75rem;
  }
}

/* Tablet: chips in one row under the map. */
@media (min-width: 768px) {
  .reach__widget { margin-top: 40px; }

  .reach__tab { padding: 10px 22px; }

  .reach__panel { margin-top: 22px; }

  .reach__card { padding: 16px; }

  .reach__options { margin-top: 16px; }
}

/* Desktop: chips stacked to the right of the map, like a legend. */
@media (min-width: 1025px) {
  .reach__widget { margin-top: 52px; }

  .reach__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 28px;
    align-items: center;
    padding: 28px;
  }

  .reach__options { margin-top: 0; }

  .reach__chips {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 10px;
  }

  .reach__chip {
    width: 100%;
    min-height: 46px;
    padding: 10px 16px;
  }
}

/* US map: every ZIP area with transit days ≤ the selected day is colored in its own day color. */
.reach-us {
  background: var(--white);
}

.reach-us::before {
  content: "";
  position: absolute;
  inset: 4% 3%;
  border-radius: 40% 30% 35% 30%;
  background: var(--day-none);
  opacity: 0.6;
  transition: opacity 0.3s;
}

.reach-us.is-loaded::before {
  opacity: 0;
}

.reach-us__zips path {
  fill: var(--day-none);
  stroke: var(--white);
  stroke-width: 0.5px;
  vector-effect: non-scaling-stroke;
  transition: fill 0.35s ease;
}

.reach-us__states {
  fill: none;
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.reach-us[data-value="1"] [data-day="1"],
.reach-us[data-value="2"] :is([data-day="1"], [data-day="2"]),
.reach-us[data-value="3"] :is([data-day="1"], [data-day="2"], [data-day="3"]),
.reach-us[data-value="4"] :is([data-day="1"], [data-day="2"], [data-day="3"], [data-day="4"]),
.reach-us[data-value="5"] [data-day] {
  fill: var(--fill);
}

.reach-us [data-day="1"] { --fill: var(--day-1); }
.reach-us [data-day="2"] { --fill: var(--day-2); }
.reach-us [data-day="3"] { --fill: var(--day-3); }
.reach-us [data-day="4"] { --fill: var(--day-4); }
.reach-us [data-day="5"] { --fill: var(--day-5); }

/* Map markers: a navy dot with a white edge and a glowing, pulsing ring. */
.reach-marker {
  position: absolute;
  z-index: 2;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 0 0 4px rgba(50, 98, 149, 0.25), 0 0 14px 4px rgba(125, 155, 193, 0.7);
}

.reach-marker::after {
  content: "";
  position: absolute;
  inset: -9px;
  border: 2px solid var(--blue);
  border-radius: 50%;
  opacity: 0;
  animation: reach-pulse 2.4s ease-out infinite;
}

@keyframes reach-pulse {
  0% { transform: scale(0.5); opacity: 0.8; }
  100% { transform: scale(1.8); opacity: 0; }
}

@media (min-width: 768px) {
  .reach-marker {
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-width: 3px;
  }
}

/* Supplier map: a simplified Reno/Sparks road illustration (OpenStreetMap data). */
.reach-local {
  background: var(--map-land);
}

.reach-local__road {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reach-local__road--minor { stroke: #dde4ed; stroke-width: 1.6; }
.reach-local__road--arterial { stroke: #cbd6e4; stroke-width: 2.4; }
.reach-local__road--freeway-casing { stroke: var(--white); stroke-width: 7; }
.reach-local__road--freeway { stroke: var(--steel); stroke-width: 3.6; }

.reach-local__route {
  display: none;
  fill: none;
  stroke: var(--blue);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 4px rgba(50, 98, 149, 0.45));
}

.reach-local[data-value="sanmar"] .reach-local__route[data-route="sanmar"],
.reach-local[data-value="ss"] .reach-local__route[data-route="ss"],
.reach-local[data-value="lat"] .reach-local__route[data-route="lat"] {
  display: block;
  animation: reach-draw 1.1s ease-in-out both;
}

@keyframes reach-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

.reach-local__label {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  white-space: nowrap;
}

.reach-local__label--city {
  color: var(--navy);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  opacity: 0.55;
}

.reach-local__label--road {
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--steel);
  color: var(--white);
  font-weight: 700;
  font-size: 0.6875rem;
}

/* Supplier markers show only for the selected supplier; Silverscreen always shows. */
.reach-local .reach-marker--sanmar,
.reach-local .reach-marker--ss,
.reach-local .reach-marker--lat,
.reach-callout {
  display: none;
}

.reach-local[data-value="sanmar"] :is(.reach-marker--sanmar, .reach-callout[data-route="sanmar"]),
.reach-local[data-value="ss"] :is(.reach-marker--ss, .reach-callout[data-route="ss"]),
.reach-local[data-value="lat"] :is(.reach-marker--lat, .reach-callout[data-route="lat"]) {
  display: block;
}

.reach-marker__name {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  color: var(--navy);
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  text-shadow: 0 0 3px var(--map-land), 0 0 3px var(--map-land), 0 0 3px var(--map-land);
}

/* SanMar sits near the top-right corner, where the phone menu button is, so its name goes on the left. */
.reach-marker--sanmar .reach-marker__name {
  right: calc(100% + 8px);
  left: auto;
}

.reach-callout {
  position: absolute;
  z-index: 3;
  padding: 5px 9px;
  transform: translate(10px, -50%);
  border-radius: 6px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 0.75rem;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 37, 84, 0.25);
  animation: reach-fade 0.4s 0.6s ease both;
}

@keyframes reach-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reach-local__credit {
  position: absolute;
  right: 6px;
  bottom: 4px;
  z-index: 2;
  color: var(--muted);
  font-size: 0.625rem;
  text-decoration: none;
}

.reach-local__credit:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .reach-local__label--city { font-size: 1rem; }

  .reach-local__label--road { font-size: 0.8125rem; }

  .reach-marker__name,
  .reach-callout { font-size: 0.9375rem; }

  .reach-callout { padding: 7px 12px; }

  .reach-local__credit { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .reach-marker::after,
  .reach-callout,
  .reach-local[data-value] .reach-local__route[data-route] {
    animation: none;
  }

  .reach-us__zips path { transition: none; }
}

/* Our Commitment: navy text panel above the photo, side by side on desktop. */
.commitment {
  display: flex;
  flex-direction: column;
}

.commitment__media {
  order: 2;
}

.commitment__media img {
  width: 100%;
  height: 247px;
  object-fit: cover;
}

.commitment__text {
  padding: 37.5px 30px;
  background: var(--navy);
  color: var(--white);
}

.commitment__text p {
  margin-top: 20px;
}

.commitment__button {
  width: 250px;
  min-height: 52px;
  margin-top: 29px;
}

@media (min-width: 768px) {
  .commitment__media img { height: 468px; }

  .commitment__text { padding: 56px 32px; }

  .commitment__text p { margin-top: 16px; }

  .commitment__button {
    width: 240px;
    min-height: 50px;
    margin-top: 38px;
  }
}

@media (min-width: 1025px) {
  .commitment {
    flex-direction: row;
    gap: 2%;
    padding: 28.8px 0;
  }

  .commitment__media {
    order: 0;
    flex: 0 0 59%;
  }

  .commitment__media img { height: 516px; }

  .commitment__text {
    flex: 1;
    padding: 86.4px;
  }

  .commitment__text p {
    margin-top: 24px;
  }

  .commitment__button {
    min-height: 52px;
    margin-top: 43px;
  }
}

/* Testimonials band */
.reviews .band__inner { padding: 37.5px 15px 18.75px; }

@media (min-width: 768px) {
  .reviews .band__inner { padding: 48px 32px 32px; }
}

@media (min-width: 1025px) {
  .reviews .band__inner { padding: 57.6px 28.8px; }
}

/* Who we work with: the logo row runs wider than the 1200px column on desktop. */
.partners .band__inner {
  padding: 24px 6px 55px;
}

.partners .logo-strip { margin-top: 40px; }

@media (min-width: 768px) {
  .partners .band__inner { padding: 40px 32px 72px; }

  .partners .logo-strip { margin-top: 56px; }
}

@media (min-width: 1025px) {
  .partners .band__inner {
    max-width: none;
    padding: 45px 59.2px 117px;
  }

  .partners .logo-strip { margin-top: 73px; }
}

/* Get in Touch (photo band) */
.get-in-touch .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 22.5px;
  text-align: center;
}

.get-in-touch p {
  max-width: 630px;
  margin-top: 28px;
}

.get-in-touch__button {
  width: 240px;
  min-height: 52px;
  margin-top: 29px;
}

@media (min-width: 768px) {
  .get-in-touch .band__inner { padding: 96px 32px; }

  .get-in-touch p {
    max-width: 600px;
    margin-top: 29px;
  }

  .get-in-touch__button {
    min-height: 50px;
    margin-top: 21px;
  }
}

@media (min-width: 1025px) {
  .get-in-touch .band__inner { padding: 172.8px 28.8px; }

  .get-in-touch p {
    max-width: 630px;
    margin-top: 36px;
  }

  .get-in-touch__button {
    min-height: 52px;
    margin-top: 28px;
  }
}

/* Let's talk: contact details beside the form. */
.lets-talk .band__inner {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 22.5px 15px 37.5px;
}

.lets-talk__info {
  padding: 16px;
}

.lets-talk .section-title {
  text-align: left;
}

.lets-talk__lede {
  margin-top: 22px;
  margin-bottom: 32px;
}

.lets-talk__form {
  padding: 17.25px 17.25px 34.5px;
  background: var(--light-gray);
}

@media (min-width: 768px) {
  .lets-talk .band__inner {
    gap: 30px;
    padding: 48px 32px;
  }

  .lets-talk__lede {
    margin-top: 28px;
    margin-bottom: 41px;
  }

  .lets-talk__form { padding: 37px 51px; }
}

@media (min-width: 1025px) {
  .lets-talk .band__inner {
    flex-direction: row;
    gap: 4%;
    padding: 86.4px 28.8px;
  }

  .lets-talk__info,
  .lets-talk__form {
    flex: 1 1 0;
    min-width: 0;
  }

  .lets-talk__lede {
    margin-top: 24px;
    margin-bottom: 44px;
  }

  .lets-talk__form { padding: 31.5px 41.8px; }
}

/* Static map: full width, 300px tall on tablet and 200px on desktop (hidden on phones, like the live site).
   The address sits on a white label in the corner so it's always visible as text. */
.static-map {
  display: none;
}

@media (min-width: 768px) {
  .static-map {
    position: relative;
    display: block;
    height: 300px;
    color: var(--text);
    text-decoration: none;
  }

  .static-map picture,
  .static-map img {
    width: 100%;
    height: 100%;
  }

  .static-map img {
    object-fit: cover;
  }

  .static-map__address {
    position: absolute;
    left: 16px;
    bottom: 16px;
    max-width: calc(100% - 32px);
    padding: 8px 12px;
    border-radius: var(--radius);
    background: var(--white);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  }

  .static-map__cta {
    display: block;
    color: var(--blue);
    text-decoration: underline;
  }
}

@media (min-width: 1025px) {
  .static-map {
    height: 200px;
    margin: 20px 0;
  }
}

/* ---------- Service pages (Screen Printing, Embroidery, DTG, DTF, Fulfillment) ---------- */

/* Hero: full-width photo under a flat dark overlay, with the H1 on top. Every service page gets the
   overlay from serviceHero(); it matches the live pages (black at 40% over the whole photo). */
.service-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 300px;
  color: var(--white);
}

.service-hero__media,
.service-hero__media picture {
  position: absolute;
  inset: 0;
}

.service-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The overlay: a pseudo-element, so screen readers skip it, and it never takes clicks. */
.service-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  pointer-events: none;
}

.service-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 15px;
}

.service-hero__title {
  max-width: 11em;
}

.service-hero--wide .service-hero__title {
  max-width: 1061px;
}

@media (min-width: 768px) {
  .service-hero { min-height: 460px; }

  .service-hero__inner { padding: 56px 32px; }
}

@media (min-width: 1025px) {
  .service-hero { min-height: 600px; }

  .service-hero__inner { padding: 86.4px 28.8px; }
}

/* Intro: "20+ years of experience" beside the intro heading and text. */
.service-intro__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.service-intro__number {
  color: var(--blue);
}

.service-intro__label {
  margin-top: 8px;
}

.service-intro__text p {
  margin-top: 20px;
}

@media (min-width: 768px) {
  .service-intro__inner {
    flex-direction: row;
    gap: 6%;
  }

  .service-intro__stat { flex: 0 0 22%; }
}

/* Feature panel: photo with a white text box overlapping it (blue band). */
.feature-panel__media img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

.feature-panel__box {
  position: relative;
  margin: -40px 12px 0;
  padding: 28px 22px;
  background: var(--white);
  color: var(--text);
}

.feature-panel__box p {
  margin-top: 20px;
}

.feature-panel__button {
  width: 200px;
  min-height: 50px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .feature-panel__media img { height: 420px; }

  .feature-panel__box {
    margin: -80px 40px 0;
    padding: 40px;
  }
}

@media (min-width: 1025px) {
  .feature-panel__inner {
    display: flex;
    align-items: center;
  }

  .feature-panel__media { flex: 0 0 62%; }

  .feature-panel__media img { height: 560px; }

  .feature-panel__box {
    flex: 1;
    margin: 0 0 0 -12%;
    padding: 48px 44px;
  }
}

/* Feature panel variants: white band, gray or navy box with a shadow, text box on the left. */
.feature-panel--gray .feature-panel__box,
.feature-panel--navy .feature-panel__box {
  box-shadow: 3px 0 11px rgba(0, 0, 0, 0.25);
}

.feature-panel--gray .feature-panel__box { background: var(--light-gray); }

.feature-panel--navy .feature-panel__box {
  background: var(--navy);
  color: var(--white);
}

@media (min-width: 1025px) {
  .feature-panel--reverse .feature-panel__inner { flex-direction: row-reverse; }

  .feature-panel--reverse .feature-panel__box { margin: 0 -12% 0 0; }
}

/* Two-column card grid, and cards with the icon beside the title. */
@media (min-width: 768px) {
  .card-grid--2 { grid-template-columns: repeat(2, 1fr); }
}

.card--inline {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 16px;
  text-align: left;
}

.card--inline .icon {
  width: 48px;
  height: 48px;
}

.card--inline .card__title {
  margin-top: 0;
}

.card--inline .card__body {
  grid-column: 1 / -1;
  margin-top: 14px;
}

@media (min-width: 768px) {
  .card--inline { padding: 24px; }

  .card--inline .icon {
    width: 56px;
    height: 56px;
  }

  .card--inline .card__body {
    grid-column: 2;
    margin-top: 8px;
  }
}

@media (min-width: 1025px) {
  .card--inline { padding: 32px; }
}

/* Specialty Ink & Process Offerings */
.offerings__lede {
  max-width: 800px;
  margin: 28px auto 0;
  text-align: center;
}

.offerings .card-grid { margin-top: 36px; }

@media (min-width: 1025px) {
  .offerings .card-grid { margin-top: 56px; }
}

/* Fact sheet download (navy band) */
.fact-sheet__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.fact-sheet__button {
  min-width: 240px;
  min-height: 50px;
  padding: 10px 24px;
}

@media (min-width: 1025px) {
  .fact-sheet__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-block: 64px;
  }

  .fact-sheet__title {
    max-width: 800px;
  }
}

/* Full-width photo strip */
.photo-band img {
  width: 100%;
  height: 260px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .photo-band img { height: 460px; }
}

@media (min-width: 1025px) {
  .photo-band img { height: 600px; }
}

/* Why partner: photo beside a lead and a check list. */
.why-partner .section-title a {
  text-decoration: none;
}

.why-partner__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}

.why-partner__media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.why-partner__lead {
  margin-bottom: 16px;
}

.check-list {
  margin-top: 24px;
}

.check-list__item {
  display: grid;
  grid-template-columns: 28px 1fr;
  column-gap: 16px;
}

.check-list__item + .check-list__item {
  margin-top: 24px;
}

.check-list .icon {
  width: 28px;
  height: 28px;
  fill: var(--blue);
}

.check-list__item p {
  margin-top: 8px;
}

@media (min-width: 768px) {
  .why-partner__row {
    flex-direction: row;
    align-items: center;
    gap: 6%;
  }

  .why-partner__media { flex: 0 0 40%; }

  .why-partner__media img { height: 560px; }
}

@media (min-width: 1025px) {
  .why-partner__row { margin-top: 64px; }

  .why-partner__media img { height: 640px; }
}

/* The logo strip without its "Who we work with" heading, with room below so the bottom line
   doesn't run into the photo band. */
.partners--service .band__inner { padding-top: 0; padding-bottom: 45px; }

.partners--service .logo-strip { margin-top: 0; }

@media (min-width: 768px) {
  .partners--service .band__inner { padding-bottom: 60px; }
}

@media (min-width: 1025px) {
  .partners--service .band__inner {
    padding-top: 0;
    padding-bottom: 77px;
  }
}

/* Closing call to action (photo band) */
.service-cta .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 22.5px;
  text-align: center;
}

.service-cta__title {
  max-width: 1100px;
}

.service-cta p {
  max-width: 630px;
  margin-top: 24px;
}

.service-cta .service-cta__lead {
  max-width: none;
}

.service-cta__button {
  width: 240px;
  min-height: 52px;
  margin-top: 28px;
}

@media (min-width: 768px) {
  .service-cta .band__inner { padding: 96px 32px; }
}

@media (min-width: 1025px) {
  .service-cta .band__inner { padding: 140px 28.8px; }
}

/* FAQ: <details> accordion with a plus that turns into a minus. */
.faq {
  max-width: 1000px;
  margin: 36px auto 0;
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  cursor: pointer;
  list-style: none;
}

.faq__summary::-webkit-details-marker {
  display: none;
}

.faq__summary::after {
  content: "+";
  flex: none;
  color: var(--navy);
}

.faq__item[open] .faq__summary::after {
  content: "\2212";
}

.faq__answer {
  padding-bottom: 20px;
}

.faq__answer p + p {
  margin-top: 1em;
}

/* Bullet points after an answer's paragraphs (sizes follow .faq__answer p). */
.faq__list {
  margin: 1em 0 0;
  padding-left: 1.5em;
  list-style: disc;
}

@media (min-width: 1025px) {
  .faq { margin-top: 56px; }
}

/* Still have a question? */
.still-question .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
  text-align: center;
}

.still-question__button {
  width: 240px;
  min-height: 52px;
  margin-top: 24px;
}

/* Thank You and Form Error pages (where Insightly sends visitors after the contact form). */
.form-result .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.form-result__text {
  max-width: 640px;
  margin-top: 28px;
}

.form-result__text + .form-result__text {
  margin-top: 12px;
}

.form-result__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 32px;
}

.form-result__button {
  width: 220px;
  min-height: 52px;
}

/* Page not found: links to the main pages under the buttons. */
.not-found__links ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 32px;
}

.not-found__links a {
  display: inline-block;
  padding: 12px 0;
}

.capabilities__title a {
  text-decoration: none;
}

.capabilities__lede {
  margin-top: 24px;
}

.arrow-list {
  margin-top: 40px;
}

.arrow-list__item {
  display: grid;
  grid-template-columns: 43px 1fr;
  column-gap: 24px;
}

.arrow-list__item + .arrow-list__item {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 2px solid var(--blue);
}

.arrow-list .icon {
  width: 43px;
  height: 43px;
  fill: var(--blue);
}

.arrow-list__item p {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .arrow-list__item { grid-template-columns: 49px 1fr; }

  .arrow-list .icon {
    width: 49px;
    height: 49px;
  }
}

@media (min-width: 1025px) {
  .capabilities__inner {
    display: flex;
    align-items: flex-start;
    gap: 8%;
  }

  .capabilities__intro { flex: 0 0 36%; }

  .capabilities__lede {
    margin-top: 40px;
  }

  .arrow-list {
    flex: 1;
    margin-top: 0;
  }

  .arrow-list__item { grid-template-columns: 48px 1fr; }

  .arrow-list .icon {
    width: 48px;
    height: 48px;
  }
}

/* Photo row: 2 or 3 photos edge to edge. Phones show the first two at equal widths; from tablet up
   each photo takes its --share of the row. */
.photo-row {
  display: flex;
  gap: 3px;
}

.photo-row__item {
  flex: 1 1 0;
  min-width: 0;
}

.photo-row__item:nth-child(n + 3) {
  display: none;
}

.photo-row__item img {
  width: 100%;
  height: 190px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .photo-row { gap: 8px; }

  .photo-row__item { flex: var(--share, 1) 1 0; }

  .photo-row__item:nth-child(n + 3) { display: block; }

  .photo-row__item img { height: 292px; }
}

@media (min-width: 1025px) {
  .photo-row { gap: 14px; }

  .photo-row__item img { height: 552px; }
}

/* Video tile: the clip sits over its poster photo at the same size and fades in once playing, so the
   photo shows until then and nothing shifts. People who prefer reduced motion keep the photo. */
.photo-row__item--video { position: relative; }

.photo-row__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s;
}

.photo-row__video.is-playing { opacity: 1; }

.photo-row__toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
}

@media (prefers-reduced-motion: reduce) {
  .photo-row__video { display: none; }
}

/* Fulfillment: Comprehensive Finishing and Warehousing (photo beside a lead-in and an arrow list). */
.finishing__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 36px;
}

.finishing__media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

.finishing .arrow-list { margin-top: 32px; }

@media (min-width: 768px) {
  .finishing__row {
    flex-direction: row;
    align-items: center;
    gap: 6%;
  }

  .finishing__media { flex: 0 0 40%; }

  .finishing__media img { height: 560px; }
}

@media (min-width: 1025px) {
  .finishing__row {
    gap: 45px;
    margin-top: 64px;
  }

  .finishing__media { flex: 0 0 557px; }

  .finishing__media img { height: 591px; }

  .finishing .arrow-list { margin-top: 32px; }
}

/* ---------- Specialties ---------- */

/* Hero: shorter than the service pages, title centered, darker overlay (black at 55%, like the live page). */
.specialties-hero {
  align-items: center;
  min-height: 220px;
  text-align: center;
}

.specialties-hero .service-hero__media::after { background: rgba(0, 0, 0, 0.55); }

.specialties-hero .service-hero__title { margin: 0 auto; }

/* Intro paragraph on a light blue band. */
.specialties-intro { background: #dfe5ee; }

.specialties-intro__text {
  max-width: 894px;
  margin: 0 auto;
  text-align: center;
}

/* Industry: an H2 between two blue rules, then a photo beside the subheading, text and button.
   The photo sits above the text up to tablet, like the live page. */
.industry .band__inner { padding-bottom: 30px; }

.industry__title {
  padding: 20px 0;
  border-top: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  text-align: center;
}

.industry .feature { margin-top: 40px; }

/* Industry items: 3 or 4 icon cards on a gray band. */
.industry-items .band__inner { padding-top: 36px; padding-bottom: 36px; }

.industry-items .card .icon {
  width: 55px;
  height: 64px;
}

/* Closing band */
.specialties-cta .specialties-cta__title {
  max-width: 1142px;
}

.specialties-cta .service-cta__button { width: 250px; }

@media (min-width: 768px) {
  .specialties-hero { min-height: 411px; }

  .industry .band__inner { padding-bottom: 40px; }

  .industry__title {
    padding: 24px 0;
  }

  .industry .feature {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }

  .industry .feature__media img { height: 401px; }

  .industry .feature__text { padding: 0 16px; }

  .industry .feature__buttons .btn {
    width: 200px;
    min-height: 54px;
  }

  .industry-items .card-grid {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 14px;
  }

  .specialties-cta .band__inner { padding: 110px 32px; }

  .specialties-cta .service-cta__button { width: 310px; }
}

@media (min-width: 1025px) {
  .specialties-hero { min-height: 506px; }

  .industry .band__inner { padding-top: 76px; padding-bottom: 50px; }

  .industry__title {
    padding: 28px 0;
  }

  .industry .feature {
    flex-direction: row;
    align-items: center;
    gap: 4%;
    margin-top: 50px;
  }

  .industry .feature__media img { height: 344px; }

  .industry .feature__text { padding: 0; }

  .industry-items .card-grid {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 22px;
  }

  .industry-items .industry-items__grid--4 { grid-template-columns: repeat(4, 1fr); }

  .specialties-cta .band__inner { padding: 170px 28.8px; }
}

/* ---------- Technology ---------- */

/* Intro: centered title, lead and text over a navy-tinted background (navy at 85%, like the live page). */
.portal-intro .band__bg::after { background: rgba(0, 37, 84, 0.85); }

.portal-intro .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 62px;
  padding-bottom: 62px;
  text-align: center;
}

.portal-intro .portal-intro__lead {
  margin-top: 42px;
}

.portal-intro .portal-intro__text {
  max-width: 670px;
  margin-top: 18px;
}

.portal-intro__button {
  width: 220px;
  min-height: 52px;
  margin-top: 18px;
}

/* Photo band with a light navy tint. */
.portal-photo .photo-band { position: relative; }

.portal-photo .photo-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 29, 67, 0.45);
  pointer-events: none;
}

.portal-photo .photo-band img { height: 259px; }

/* Your Central Hub: title, lead-in and four cards with the icon beside the title and text. */
.portal-hub__title {
  max-width: 882px;
  margin: 0 auto;
  text-align: center;
}

.portal-hub .portal-hub__lede {
  max-width: 791px;
  margin: 58px auto 0;
  text-align: center;
}

.portal-hub .card-grid { margin-top: 40px; }

.portal-hub .card--inline {
  align-items: start;
  column-gap: 16px;
  padding: 20.7px 17.25px;
}

.portal-hub .card--inline .icon {
  grid-row: span 2;
  width: 64px;
  height: 64px;
}

.portal-hub .card--inline .card__body {
  grid-column: 2;
  margin-top: 16px;
}

/* New Member? (navy band): centered on phones, text above the button on tablet, side by side on desktop. */
.new-member .band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}

.new-member .new-member__lead {
  margin-top: 16px;
}

.new-member__button {
  width: 250px;
  min-height: 52px;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .portal-intro .band__inner { padding-top: 71px; padding-bottom: 71px; }

  .portal-intro .portal-intro__lead {
    margin-top: 48px;
  }

  .portal-intro .portal-intro__text { margin-top: 24px; }

  .portal-intro__button { margin-top: 24px; }

  .portal-photo .photo-band img { height: 469px; }

  .portal-hub .card-grid--2 {
    grid-template-columns: 1fr;
    row-gap: 36px;
  }

  .portal-hub .card--inline {
    column-gap: 33px;
    padding: 21.2px;
  }

  .portal-hub .card--inline .icon {
    width: 70px;
    height: 70px;
  }

  .new-member .band__inner {
    align-items: flex-start;
    padding-top: 40px;
    padding-bottom: 48px;
    text-align: left;
  }
}

@media (min-width: 1025px) {
  .portal-intro .band__inner { padding-top: 86.4px; padding-bottom: 86.4px; }

  .portal-intro .portal-intro__lead {
    margin-top: 51px;
  }

  .portal-intro .portal-intro__text {
    margin-top: 25px;
  }

  .portal-intro__button {
    margin-top: 25px;
  }

  .portal-photo .photo-band img { height: 577px; }

  .portal-hub .card-grid { margin-top: 72px; }

  .portal-hub .card-grid--2 {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 34px;
    row-gap: 36px;
  }

  .portal-hub .card--inline {
    column-gap: 24px;
    padding: 34.27px;
  }

  .portal-hub .card--inline .card__body { margin-top: 17px; }

  .new-member .band__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .new-member__button {
    margin: 0 52px 0 0;
  }
}

/* ---------- Contact Us ---------- */

/* Hero: photo with a translucent blue box holding the H1 and two buttons, centered, with the same
   spacing as the homepage hero. The buttons stack on phones and sit side by side from tablet up. */
.contact-hero {
  position: relative;
  color: var(--white);
}

.contact-hero__media,
.contact-hero__media picture {
  position: absolute;
  inset: 0;
}

.contact-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact-hero__inner {
  position: relative;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 75px 15px;
}

.contact-hero__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px;
  text-align: center;
}

.contact-hero__title {
  text-wrap: balance;
}

.contact-hero__buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 28px;
}

.contact-hero__button {
  width: 220px;
  min-height: 52px;
}

/* Text blocks sit 16px in from the form panel and photos, like the live page. */
.contact-intro__title,
.contact-intro__lede,
.contact-start__title,
.contact-start__text,
.journey__text,
.journey__subtitle,
.journey .arrow-list,
.have-question__info {
  padding-inline: 16px;
}

.contact-intro .contact-intro__lede {
  margin-top: 18px;
}

.contact-start .contact-start__text {
  margin-top: 34px;
}

.contact-start__form {
  margin-top: 47px;
  padding: 17.25px 17.25px 34.5px;
  background: var(--light-gray);
}

.contact-start .contact-form__submit { background: var(--blue); }

.contact-start .contact-form__submit:hover { background: var(--steel); }

/* Your Custom Apparel Journey (gray band): photo and text, then the "what you can expect" rows. */
.journey__media img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.journey__text { margin-top: 30px; }

.journey__text p {
  margin-top: 24px;
}

.journey__expect { margin-top: 56px; }

.journey .arrow-list { margin-top: 32px; }

.journey .arrow-list__item + .arrow-list__item {
  margin-top: 28px;
  padding-top: 28px;
  border-top-width: 4px;
}

/* Have a Question? (navy band): contact details, then the photo. */
.have-question .have-question__text {
  margin-top: 24px;
}

.have-question .contact-details { margin-top: 40px; }

.have-question__media { margin-top: 48px; }

.have-question__media img {
  width: 100%;
  height: 360px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .contact-hero__inner { padding: 96px 32px; }

  .contact-hero__box { padding: 48px 32px; }

  .contact-hero__buttons {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
    margin-top: 36px;
  }

  .contact-hero__button { width: 200px; }

  .contact-intro .contact-intro__lede {
    max-width: 580px;
  }

  .contact-start .contact-start__text { margin-top: 40px; }

  .contact-start__form {
    margin-top: 52px;
    padding: 37px 51px;
  }

  .journey__media img { height: 434px; }

  .journey__text { margin-top: 45px; }

  .journey__expect { margin-top: 64px; }

  .journey .arrow-list { margin-top: 40px; }

  .have-question__media img { height: 690px; }
}

@media (min-width: 1025px) {
  .contact-hero__inner { padding: 216px 28.8px; }

  .contact-hero__box { padding: 64px 48px; }

  .contact-hero__buttons { margin-top: 40px; }

  .contact-intro .contact-intro__lede {
    max-width: 690px;
    margin-top: 20px;
  }

  .contact-start .contact-start__text {
    margin-top: 24px;
  }

  .contact-start__form {
    margin-top: 75px;
    padding: 31.5px 41.8px;
  }

  .journey__row {
    display: grid;
    grid-template-columns: 557fr 540fr;
    column-gap: 45px;
    align-items: center;
  }

  .journey__media img { height: 455px; }

  .journey__text {
    margin-top: 0;
    padding-inline: 0;
  }

  .journey__text p {
    max-width: 436px;
  }

  .journey__expect {
    display: grid;
    grid-template-columns: 1fr 581px;
    column-gap: 78px;
    align-items: start;
    margin-top: 100px;
  }

  .journey__subtitle {
    max-width: 466px;
  }

  .journey .arrow-list {
    margin-top: 0;
    padding-inline: 0;
  }

  .journey .arrow-list__item + .arrow-list__item {
    margin-top: 40px;
    padding-top: 40px;
  }

  .have-question .band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
  }

  .have-question__info { flex: 0 1 532px; }

  /* Desktop only: a white rule under each contact row. */
  .have-question .contact-details { gap: 64px; }

  .have-question .contact-details__row {
    padding-bottom: 48px;
    border-bottom: 2px solid var(--white);
  }

  .have-question__media {
    flex: 0 1 548px;
    margin-top: 0;
  }

  .have-question__media img { height: 535px; }

  /* The live Contact Us map is 275px tall on desktop (the homepage's is 200px). */
  .contact-map .static-map {
    height: 275px;
    margin: 0;
  }
}

/* ---------- Privacy Policy ---------- */

/* One white column, 16px in from the standard content column. Blocks are spaced by one blank line,
   like the live page: a heading, 16px, its text; a blank line before the next heading. */
.privacy .band__inner {
  padding: 44px 31px 42px;
}

.privacy__heading {
  margin-top: 24px;
}

.privacy__title + .privacy__heading { margin-top: 18px; }

.privacy__heading + p { margin-top: 16px; }

.privacy p + p,
.privacy__list + p {
  margin-top: 24px;
}

.privacy__list li {
  position: relative;
  padding-left: 32px;
}

.privacy__list li::before {
  content: "•";
  position: absolute;
  left: 16px;
}

.privacy__title + .privacy__updated { margin-top: 12px; }

.privacy .lead { margin-top: 24px; }

.privacy p + .privacy__table-wrap,
.privacy__table-wrap + p {
  margin-top: 24px;
}

/* Cookie table: scrolls inside its own box on narrow phones instead of widening the page. */
.privacy__table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.privacy__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  text-align: left;
}

.privacy__table th,
.privacy__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.privacy__table th {
  font-weight: 700;
  border-bottom-color: var(--text);
}

@media (min-width: 768px) {
  .privacy .band__inner { padding: 56px 47px; }
}

@media (min-width: 1025px) {
  .privacy .band__inner { padding: 89px 44.8px 87px; }

  .privacy__heading {
    margin-top: 26px;
  }

  .privacy__title + .privacy__heading { margin-top: 20px; }

  .privacy p + p,
  .privacy__list + p {
    margin-top: 26px;
  }

  .privacy__list li {
    padding-left: 34px;
  }

  .privacy__list li::before { left: 17px; }
}

.vt-button {
  width: 220px;
  min-height: 52px;
}

/* Hero: photo behind a black gradient (Duda: black 40% to transparent, at 65%), text beside the "3D Explore Our" graphic.
   The graphic stacks under the text on phones and is hidden on tablet, like the live page. */
.vt-hero .band__bg img { object-position: 0% 50%; }

.vt-hero .band__bg::after {
  background: linear-gradient(90deg, #000 40%, transparent 100%);
  opacity: 0.65;
}

.vt-hero__inner {
  display: flex;
  flex-direction: column;
  row-gap: 25px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.vt-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
  padding: 0 16px;
}

.vt-hero__title a { text-decoration: none; }

.vt-hero__graphic {
  align-self: center;
  width: 309px;
  max-width: 100%;
  border: 10px solid #ededed;
  box-shadow: 3px 0 11px rgba(0, 0, 0, 0.25);
}

.vt-hero__graphic img {
  width: 100%;
  aspect-ratio: 289 / 294;
  object-fit: cover;
}

/* A Transparent Look: photo above the text, side by side on desktop. */
.vt-look .band__inner {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
  padding-top: 40px;
  padding-bottom: 40px;
}

.vt-look__media img {
  width: 100%;
  height: 247px;
  object-fit: cover;
}

.vt-look__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  row-gap: 24px;
  padding: 15px 16px;
}

/* Explore key areas: the H3, then the four items (number, navy rule, title, text), stacked on phones,
   two per row from tablet up, beside the H3 on desktop. */
.vt-areas .band__inner {
  padding-bottom: 30px;
}

.vt-areas__title { padding: 16px 16px 0; }

.vt-areas__list {
  display: grid;
  row-gap: 32px;
  padding: 16px;
}

.vt-areas .vt-areas__number {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--navy);
  margin-bottom: 28px;
  color: var(--blue);
}

.vt-areas__name {
  margin-bottom: 24px;
}

/* Building Trust: navy text box above the photo, side by side (photo on the left) on desktop, edge to edge. */
.vt-trust {
  display: flex;
  flex-direction: column;
}

.vt-trust__text {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 37.5px 30px;
  background: var(--navy);
  color: var(--white);
}

.vt-trust__media { order: 1; }

.vt-trust__media img {
  width: 100%;
  height: 247px;
  object-fit: cover;
}

/* Ready to See: H2 and intro, side by side on desktop. The intro is an H5 on the live page. */
.vt-ready .band__inner {
  padding: 30px 15px 18.75px;
}

.vt-ready__title { padding: 0 16px; }

.vt-ready .vt-ready__lede {
  padding: 16px;
}

/* Tour cards: screenshot behind a dark gradient, label and button at the bottom. */
.vt-tours {
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  padding: 7.5px 15px 45px;
}

.vt-tours__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: 24px;
  padding: calc(50% + 59px) 8% 8%;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--white);
}

.vt-tours__bg,
.vt-tours__bg picture {
  position: absolute;
  inset: 0;
}

.vt-tours__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vt-tours__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 32%, #000 100%);
  opacity: 0.7;
}

.vt-tours__title,
.vt-tours__button {
  position: relative;
}

.vt-tours__button { width: 280px; max-width: 100%; }

/* HAVE A QUESTION? (navy band): heading on the left, button centered on phones; button beside it on desktop. */
.vt-question .band__inner {
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding: 26.25px 15px 37.5px;
}

.vt-question__title {
  padding: 0 16px;
}

.vt-question__button {
  align-self: center;
  width: 260px;
  max-width: 100%;
}

@media (min-width: 768px) {
  .vt-button { width: 200px; }

  .vt-hero__inner {
    justify-content: center;
    min-height: 446px;
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .vt-hero__graphic { display: none; }

  .vt-look .band__inner { padding: 53.76px 32px 46.08px; }

  .vt-look__media img { height: 400px; }

  .vt-areas .band__inner { padding: 61.44px 32px 46.08px; }

  .vt-areas__title { padding: 0 16px; }

  .vt-areas__list {
    grid-template-columns: 49% 49%;
    justify-content: space-between;
    row-gap: 40px;
  }

  .vt-areas .vt-areas__number {
    margin-bottom: 24px;
  }

  .vt-trust__text {
    row-gap: 16px;
    padding: 53.76px 46.08px;
  }

  .vt-trust__media img { height: 468px; }

  .vt-ready .band__inner { padding: 46.08px 32px 23.04px; }

  .vt-tours {
    row-gap: 12px;
    padding: 15.36px 30.72px 61.44px;
  }

  .vt-tours__card { padding: calc(30% + 65px) 28.26px 28.26px; }

  .vt-tours__button { width: 220px; }

  .vt-question .band__inner {
    row-gap: 16px;
    padding: 30.72px 30.72px;
  }

  .vt-question__button {
    align-self: flex-start;
    width: 240px;
    margin-left: 16px;
  }
}

@media (min-width: 1025px) {
  .vt-hero__inner {
    flex-direction: row;
    align-items: center;
    column-gap: 4%;
    min-height: 707px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .vt-hero__text {
    width: 49.3%;
    padding: 16px;
  }

  .vt-hero__graphic {
    display: block;
    width: 404px;
    margin: 0 auto;
  }

  .vt-hero__graphic img { aspect-ratio: 384 / 382; }

  .vt-look .band__inner {
    flex-direction: row;
    column-gap: 4%;
    padding: 100.8px 28.8px;
  }

  .vt-look__media { width: 54.75%; }

  .vt-look__media img { height: 491px; }

  .vt-look__text { width: 41.25%; }

  .vt-areas .band__inner {
    display: grid;
    grid-template-columns: 35.68% 60.2%;
    column-gap: 4%;
    align-items: start;
    padding: 86.4px 28.8px 100.8px;
  }

  .vt-areas__title { padding: 16px; }

  .vt-areas__list { row-gap: 60px; }

  .vt-areas__item .vt-text { max-width: 295px; }

  .vt-trust {
    flex-direction: row;
    column-gap: 2%;
    padding: 28.8px 0;
  }

  .vt-trust__media {
    order: 0;
    width: 39.76%;
  }

  .vt-trust__media img {
    height: 100%;
    min-height: 428px;
  }

  .vt-trust__text {
    width: 58.24%;
    row-gap: 24px;
    padding: 72px 86.4px 97px;
  }

  .vt-trust__text .vt-text { max-width: 643px; }

  .vt-ready .band__inner {
    display: flex;
    align-items: flex-end;
    column-gap: 4%;
    padding: 72px 28.8px 28.8px;
  }

  .vt-ready__title {
    width: 45.71%;
    padding: 16px;
  }

  .vt-ready .vt-ready__lede { width: 50.17%; }

  .vt-tours {
    flex-direction: row;
    justify-content: space-between;
    padding: 28.8px 28.8px 100.8px;
  }

  .vt-tours__card {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    width: 49%;
    padding: calc(30% + 33px) 4% 4%;
  }

  .vt-tours__title {
    width: 60%;
  }

  .vt-tours__button { width: 170px; }

  .vt-question .band__inner {
    flex-direction: row;
    align-items: center;
    column-gap: 4%;
    padding: 72px 28.8px;
  }

  .vt-question__title {
    width: 65.04%;
    padding: 0;
  }

  .vt-question__button {
    align-self: center;
    margin: 0 auto;
  }
}

/* ---------- Blog posts (layout-post.njk) ---------- */

/* Title block on white: H1 and the date. The header lines up with the live page's 1110px column,
   the article text with its 1078px column (643px on tablet). */
.post__header {
  max-width: 1110px;
  margin: 0 auto;
  padding: 32px 15px 24px;
}

.post__date {
  margin-top: 16px;
  color: #616060;
}

/* Main photo: full width, cropped to a fixed height. */
.post__hero img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.post__body,
.post__pager {
  max-width: 1108px;
  margin: 0 auto;
  padding: 0 15px;
}

.post__body {
  padding-top: 40px;
}

.post__body > * + * {
  margin-top: 1.5em;
}

.post__body > h2,
.post__body > h3,
.post__body > h4,
.post__body > h5 {
  margin-top: 32px;
}

.post__body > h2 + *,
.post__body > h3 + *,
.post__body > h4 + *,
.post__body > h5 + * {
  margin-top: 12px;
}

.post__body > ul,
.post__body > ol {
  margin-bottom: 0;
  padding-left: 34px;
}

.post__body > ul { list-style: disc; }
.post__body ul ul { list-style: circle; padding-left: 24px; }

.post__body a {
  color: var(--text);
  text-decoration: underline;
}

.post__body a.btn {
  color: var(--white);
  text-decoration: none;
}

/* Photos in the article: at most the column width, never enlarged. */
.post-figure {
  margin: 1.5em 0 0;
}

.post-figure img {
  margin: 0 auto;
}

/* Photo galleries: a grid of equal cells (--cols on desktop, --cols-tablet, --cols-phone), each photo
   cropped to the gallery's shape (--ratio). */
.post-gallery {
  display: grid;
  grid-template-columns: repeat(var(--cols-phone, 2), 1fr);
  gap: 16px;
}

.post-gallery img {
  width: 100%;
  height: auto;
  aspect-ratio: var(--ratio, 1 / 1);
  object-fit: cover;
}

/* YouTube player, 16:9. */
.post-video {
  position: relative;
  aspect-ratio: 16 / 9;
}

.post-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.post__body > .faq {
  max-width: none;
}

.post-cta {
  text-align: center;
}

/* < Older Post / Newer Post > */
.post__pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 56px;
}

.post__pager-link {
  text-decoration: underline;
}

.post__pager-link--newer {
  margin-left: auto;
}

/* The two newest posts: stacked on phones, side by side from tablet up. */
.post-latest {
  display: grid;
  gap: 40px;
  max-width: 1172px;
  margin: 0 auto;
  padding: 64px 15px;
}

.post-card__photo img {
  width: 100%;
  height: 255px;
  object-fit: cover;
}

.post-card__title {
  margin-top: 15px;
}

.post-card__title a {
  text-decoration: none;
}

.post-card__title a:hover {
  text-decoration: underline;
}

.post-card__excerpt {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .post__header { padding: 48px 62px 32px; }
  .post__hero img { height: 365px; }

  .post__body,
  .post__pager {
    max-width: 767px;
    padding: 0 62px;
  }

  .post__body { padding-top: 64px; }

  .post-gallery { grid-template-columns: repeat(var(--cols-tablet, var(--cols, 3)), 1fr); }

  .post-latest {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    padding: 80px 32px;
  }
}

@media (min-width: 1025px) {
  .post__header {
    max-width: 1140px;
    padding: 64px 15px 36px;
  }

  .post__hero img { height: 475px; }

  .post__body,
  .post__pager {
    max-width: 1108px;
    padding: 0 15px;
  }

  .post__body { padding-top: 96px; }

  .post-gallery {
    grid-template-columns: repeat(var(--cols, 3), 1fr);
    gap: 20px;
  }

  .post-latest {
    max-width: 1172px;
    padding: 100px 15px 110px;
  }
}

/* ---------- Blog page (news-and-events.njk) ---------- */

/* Hero: photo under a light black tint (15%, like the live page), white H1 at the bottom left. */
.blog-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 379px;
  color: var(--white);
}

.blog-hero__bg,
.blog-hero__bg picture {
  position: absolute;
  inset: 0;
}

.blog-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

.blog-hero__inner {
  position: relative;
  width: 100%;
  max-width: 1230px;
  margin: 0 auto;
  padding: 40px 31px 31px;
}

/* Intro (gray band): titles and text stacked, side by side on desktop. */
.blog-intro .band__inner {
  padding: 54px 31px;
}

.blog-intro__subtitle {
  margin-top: 10px;
}

.blog-intro__text {
  margin-top: 32px;
}

.blog-intro__text p + p {
  margin-top: 1.5em;
}

.blog-intro__text a {
  text-decoration: underline;
}

/* News & Events and the post list. */
.blog-list {
  max-width: 1176px;
  margin: 0 auto;
  padding: 72px 23px 80px;
}

.blog-list__items {
  margin-top: 40px;
}

.blog-card + .blog-card {
  margin-top: 48px;
}

/* Phones: the photo above the text. */
.blog-card__photo img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.blog-card__text {
  margin-top: 16px;
}

.blog-card__title a {
  text-decoration: none;
}

.blog-card__title a:hover {
  text-decoration: underline;
}

.blog-card__date {
  margin-top: 8px;
  color: #5d5c5c;
}

/* Three lines at most, like the live cards. */
.blog-card__excerpt {
  display: -webkit-box;
  margin-top: 12px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.blog-card__more {
  display: inline-block;
  margin-top: 12px;
  color: var(--blue);
  text-decoration: none;
}

.blog-card__more:hover {
  text-decoration: underline;
}

.blog-list__more {
  margin-top: 48px;
  text-align: center;
}

/* Cards past the first 10 and the button use the hidden attribute (site.js); these displays would override it. */
.blog-card[hidden],
.blog-list__more .btn[hidden] {
  display: none;
}

@media (min-width: 768px) {
  .blog-hero { min-height: 688px; }
  .blog-hero__inner { padding-bottom: 46px; }

  .blog-intro .band__inner { padding: 69px 46px; }

  .blog-list { padding: 95px 38px 96px; }
  .blog-list__items { margin-top: 48px; }

  /* Photo on the left, text beside it. */
  .blog-card {
    display: flex;
    align-items: flex-start;
  }

  .blog-card + .blog-card { margin-top: 60px; }

  .blog-card__photo {
    flex: none;
    width: 231px;
  }

  .blog-card__photo img { height: 240px; }

  .blog-card__text {
    flex: 1;
    min-width: 0;
    margin-top: 0;
    padding: 30px 6px 0 35px;
  }
}

@media (min-width: 1025px) {
  .blog-hero { min-height: 761px; }

  .blog-hero__inner {
    max-width: 1226px;
    padding: 40px 29px 73px;
  }

  .blog-intro .band__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 78px;
    max-width: 1168px;
    padding: 88px 29px;
  }

  .blog-intro__subtitle { margin-top: 20px; }
  .blog-intro__text { margin-top: 0; }

  .blog-list {
    max-width: 1172px;
    padding: 86px 29px 100px;
  }
  .blog-list__items { margin-top: 72px; }

  .blog-card__photo { width: 241px; }
  .blog-card__photo img { height: 250px; }

  .blog-card__text { padding: 38px 11px 0 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide,
  .slider__track,
  .card {
    transition: none;
  }

  .logo-strip__list {
    transition: none;
  }
}

/* ---------- Type system ----------
   Every text style comes from one of the roles below, sized by the tokens at the top of this file.
   Fonts: Myriad Pro everywhere (never Light 300), except XSCALE for the stat numbers.
   Size and weight come from the tag (h1–h6), or from an .h1–.h6 class where a heading is styled as
   another level (e.g. <h2 class="h4">). Case comes from the tag only: headings are typed in normal
   case and the capitals come from CSS, for H1, H3 and H4 (short card and list titles), H5, H6, the
   eyebrow and the stat label. Everything else shows exactly as typed. */

/* Body text: Myriad Pro Regular, black (white on the blue and navy bands). */
body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

main p,
main li {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* About 70 characters per line. */
main p,
.post__body > :is(ul, ol) {
  max-width: var(--measure);
}

/* Headings: Myriad Pro, no italics. */
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
  font-family: var(--font-body);
  font-style: normal;
}

/* H1: Myriad Pro Black. */
h1, .h1 {
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-heading);
}

/* H2: Myriad Pro Black. */
h2, .h2 {
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-heading);
}

/* H3: Myriad Pro Bold. The closing "Have any more questions…" line keeps its H2 tag at this size, and
   blog card titles (post headlines) use it too. */
h3, .h3,
.still-question__title,
.post-card__title,
.blog-card__title {
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-heading);
}

/* H4: Myriad Pro Bold. */
h4, .h4 {
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

/* H5 and the eyebrow (a <p> above a heading, not a heading itself): Myriad Pro Regular, muted gray. */
h5, .h5, .eyebrow {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  letter-spacing: var(--ls-label);
  color: var(--label-color);
}

/* H6: Myriad Pro Bold. */
h6, .h6 {
  font-weight: 700;
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  letter-spacing: var(--ls-label);
}

/* Case. */
h1, .h1:not(h2, h3, h4, h5, h6),
h3, h4, h5, h6, .eyebrow {
  text-transform: uppercase;
}

h2,
.post__title,          /* blog post H1s are full sentences */
.testimonial__quote,   /* a quote, not a title */
.post-card__title,     /* post headlines */
.blog-card__title,
.faq__question,
.site-footer :is(h2, h3, h4) {
  text-transform: none;
}

/* Heading accent: one word in medium blue, same font, size and line as the rest of the heading.
   On dark bands, navy boxes and photo overlays it's light steel blue (--accent is switched below). */
.accent-color {
  font: inherit;
  color: var(--accent);
}

/* A linked accent (DTG's "Direct to Garment") keeps an underline so it reads as a link. */
.accent-color a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.12em;
}

/* Dark backgrounds: light steel blue accents and light eyebrows. */
:root {
  --accent: var(--blue);
  --label-color: var(--muted);
}

:is(.hero, .service-hero, .band--blue, .band--navy, .band--photo, .feature-panel--navy .feature-panel__box, .vt-trust__text, .portal-intro) {
  --accent: var(--steel);
  --label-color: var(--muted-on-dark);
}

/* The homepage hero's blue box is lighter than the navy bands, so its eyebrow is full white. */
.hero__box {
  --label-color: var(--white);
}

/* A feature panel's white box sits on the blue band, but its text is on white. */
.feature-panel:not(.feature-panel--navy) .feature-panel__box {
  --accent: var(--blue);
  --label-color: var(--muted);
}

/* Photo heroes with an accent word: the overlay darkens toward the bottom, behind the heading, so the
   light steel blue accent keeps at least 3:1 against the photo. The top of the photo keeps a lighter
   tint. On phones the heading wraps higher up the photo, so the dark part reaches higher. */
.service-hero--accent .service-hero__media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 80%, rgba(0, 0, 0, 0.5) 100%);
}

@media (min-width: 768px) {
  .service-hero--accent .service-hero__media::after {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.72) 55%, rgba(0, 0, 0, 0.4) 90%);
  }
}

/* Lead paragraph. */
main p.lead {
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
}

/* Small text: the footer, dates and the map label. */
.site-footer p,
.post__date,
main p.privacy__updated,
.blog-card__date,
.static-map__address {
  font-weight: 400;
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* Nav links: Myriad Pro Regular. */
:is(.main-nav, .drawer-nav, .footer-nav) :is(.nav__link, .nav__sublink) {
  font-weight: 400;
  font-size: var(--fs-nav);
}

/* Buttons: Myriad Pro Bold, as typed. */
.btn {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-button);
  letter-spacing: normal;
  text-transform: none;
}

/* Stat: big XSCALE number and a small caps label. */
.service-intro__number {
  font-family: var(--font-display);
  font-size: var(--fs-stat);
  line-height: 1;
}

.service-intro__label {
  margin-top: 8px;
  font-weight: 700;
  font-size: var(--fs-stat-label);
  line-height: 1.4;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--blue);
}

/* Virtual Tour area numbers ("01"): Myriad Pro Black at the H3 size (XSCALE is only for stats). */
.vt-areas__number {
  font-weight: 900;
  font-size: var(--fs-h3);
  line-height: 1;
}

/* FAQ: eyebrow and heading centered above a narrower column of questions. Each question row has a
   thin plus on the right that turns into a minus when open (native <details>, so no script). */
.service-faq .eyebrow {
  margin: 0 auto 12px;
  text-align: center;
}

.faq {
  max-width: 900px;
  margin: 32px auto 0;
  padding-inline: 9px; /* 24px from the screen edge on phones, with the band's 15px */
}

.faq__item {
  border-bottom: 1px solid var(--hairline);
}

.faq__summary {
  align-items: flex-start;
  gap: 16px;
  padding: 20px 0;
  font-size: var(--fs-faq-q);
}

/* FAQ question: Myriad Pro Bold, as typed. */
.faq-q,
.faq__question {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-faq-q);
  line-height: var(--lh-faq-q);
  letter-spacing: normal;
}

/* The plus: two 1.5px bars; the upright one goes when the row is open, leaving a minus. Centered on the first line. */
.faq__summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-top: calc((1em * 1.3 - 14px) / 2);
  background:
    linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--navy);
}

.faq__item[open] .faq__summary::after {
  content: "";
  background-size: 14px 1.5px, 1.5px 0;
}

/* Answers: body text in dark gray, lined up with the question and clear of the plus. */
.faq__answer {
  padding: 0 30px 20px 0;
  color: var(--answer);
}

.faq__answer :is(p, li) {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

@media (min-width: 768px) {
  .faq {
    margin-top: 40px;
    padding-inline: 0;
  }

  .faq__summary { padding: 24px 0; }

  .faq__answer { padding-bottom: 24px; }
}