/* The clean look: every page except TMT Tags and Hole / Eyelet Tag.
   Loaded after site.css (and bopp.css), scoped to body.clean, so the two TMT pages load nothing from
   here and keep their steel look exactly. No rebar rails, cords, eyelets, die-cut shapes or steel bands:
   plain rounded panels on his brand teal. The markup those wore is gone from these pages; the rules
   below undo what site.css still gives the classes the panels keep. */

body.clean {
  --graphite: #015A76;        /* his teal ground in place of the steel band */
  --graphite-2: #014A61;
  --on-dark-soft: #D3E4EA;    /* 6.1:1 on the teal ground */
  --cl-radius: 14px;
  --cl-shadow: 0 1px 0 rgba(18, 17, 15, 0.06), 0 14px 34px -18px rgba(18, 17, 15, 0.35);
}

/* ---------- a panel, where the hanging tag was ---------- */
.clean .hang { padding-top: 0; transform: none; filter: none; --cord: 0px; }
.clean .tag {
  clip-path: none; -webkit-mask: none; mask: none;
  padding: 0 28px 26px; border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); overflow: hidden;
}
.clean .tag::after { content: none; }
.clean .tag > .tag__title:first-child { margin-top: 24px; }
.clean .tag__panel { background: var(--graphite); }
.clean .tag__panel--ink, .clean .tag__panel--teal { background: var(--graphite); }
.clean .tag__foot { padding-right: 0; }
.clean .tag__stamp { transform: none; right: 22px; bottom: 22px; border-width: 2px; border-radius: 999px; font-size: 1.15rem; padding: 7px 16px 5px; }
.clean .format-like, .clean .routes .hang, .clean .order-grid .hang, .clean .format .hang { filter: none; }
.clean .hero__tag::before, .clean .phead__aside::before, .clean .routes__tags .hang + .hang::before, .clean .qr-tag::before { content: none; }
.clean .routes__tags .hang + .hang { margin-top: 0; }
.clean .phead { padding-top: 0; }
.clean .step--details::before { background: var(--graphite); }
.clean .req__strip-hole { width: 12px; height: 12px; background: var(--teal); box-shadow: none; }
.clean .cta__inner { padding-top: 0; }
.clean .order.order--steel { padding-top: clamp(64px, 8vw, 112px); }
.clean .docket, .clean .gauges, .clean .checks, .clean .catalogue, .clean .ceo__lines, .clean .touch__fields, .clean .write__sheet { border-radius: var(--cl-radius); overflow: hidden; border-top: 0; border-bottom: 0; box-shadow: var(--cl-shadow); }
.clean .step, .clean .outcome { border-top: 0; border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); }
.clean .ledger { border-top-width: 1.5px; }

/* ---------- links that were die-cut ---------- */
.clean .route-link { clip-path: none; border-radius: 999px; padding: 0 24px; background: var(--graphite); }
.clean .route-link:hover { background: var(--ink); }
.clean .route-link--quiet { background: transparent; }
.clean .route-link--quiet:hover { background: var(--ink); }

/* ---------- the contact lines, no longer a wrist band ---------- */
.clean .band { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 0; filter: none; border-radius: var(--cl-radius); box-shadow: var(--cl-shadow); overflow: hidden; }
.clean .band__field dt { border-bottom-width: 1px; border-bottom-color: var(--rule); }

/* ---------- Scan to WhatsApp: a plain block ---------- */
.clean .qr-tag { padding-top: 0; filter: none; }
.clean .qr-tag__face { clip-path: none; -webkit-mask: none; mask: none; padding: 14px 16px 14px; border-radius: 12px; }
.clean .lines .qr-tag { filter: none; box-shadow: var(--cl-shadow); border-radius: 12px; }
.clean .lines .band { margin-top: 20px; }

/* ---------- home, the first screen: his words, his two lines as photographs, the requirement ---------- */
.clean .hero { padding-bottom: clamp(48px, 6vw, 88px); }
.clean .hero__copy { padding-top: clamp(32px, 4vw, 56px); }
.clean .hero h1 { font-size: clamp(2.75rem, 1.6rem + 2.9vw, 4.4rem); }
.clean .hero__lede { margin-top: 16px; }
.clean .hero .btn--action { margin-top: 24px; }
.clean .hero__direct { margin-top: 14px; }
.clean .hero__tag { padding-top: clamp(32px, 4vw, 56px); }
.clean .hang--hero { width: 100%; }
.clean .hero__routes {
  display: grid; grid-template-columns: minmax(0, 405fr) minmax(0, 1110fr); gap: 14px;
  margin-top: 24px; padding-top: 0; border-top: 0;
}
.clean .photo-route { display: block; color: var(--ink); text-decoration: none; }
.clean .photo-route img { display: block; width: 100%; height: auto; border-radius: var(--cl-radius); background: #fff; }
.clean .photo-route span {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 2px;
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0.01em; color: var(--teal);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em;
}
.clean .photo-route:hover span { color: var(--teal-deep); text-decoration-thickness: 2px; }
.clean .hero__routes .route-link--quiet { grid-column: 1 / -1; justify-self: start; min-height: 48px; }
.clean .hero__routes--plain { display: flex; }

/* ---------- home, Our products: three plain cards, each led by a photograph ---------- */
.clean .routes { padding-block: clamp(56px, 7vw, 96px); }
.clean .routes__tags { align-items: stretch; }
.clean .hang--route { display: flex; }
.clean .hang--route .tag { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.clean .hang--route .tag__go { margin-top: auto; padding-top: 14px; align-self: flex-start; }
.clean .hang--route .fields { margin-bottom: 8px; }
.clean .route-photo { margin: 0 -28px; display: grid; gap: 3px; aspect-ratio: 3 / 2; background: #fff; overflow: hidden; }
.clean .route-photo--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.clean .route-photo picture, .clean .route-photo img { display: block; width: 100%; height: 100%; min-height: 0; }
.clean .route-photo img { object-fit: cover; }
.clean .route-photo--pair picture { overflow: hidden; }
.clean .route-photo + .tag__panel { margin-top: 0; }
.clean .routes .tag__panel { padding-block: 12px; }
.clean .routes .tag__heading { font-size: 1.7rem; }
@media (min-width: 961px) {
  .clean .routes__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; }
  .clean .routes__head h2 { grid-column: 1; grid-row: 1; }
  .clean .routes__head p { grid-column: 2; grid-row: 1; padding-top: 6px; }
}

/* ---------- BOPP overview: the banner alone, and On this page beside it ---------- */
.bopp.clean .bp-top { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: stretch; padding-top: clamp(16px, 2.4vw, 32px); }
.bopp.clean .bp-top .bp-banner { padding: 0; background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.bopp.clean .bp-banner__shot { margin: 0; width: 100%; max-width: 980px; }
.bopp.clean .bp-banner__shot img { display: block; width: 100%; height: auto; }
.bopp.clean .bp-menu { padding: 18px clamp(16px, 1.8vw, 22px) 10px; background: var(--face); color: var(--ink); }
.bopp.clean .bp-menu__h { padding-bottom: 12px; color: var(--ink-soft); font-size: 0.95rem; }
.bopp.clean .bp-menu a {
  position: relative; min-height: 48px; padding: 8px 0 8px 16px; border-top: 1px solid var(--rule-soft);
  color: var(--ink); font-size: 1.2rem;
}
.bopp.clean .bp-menu a::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 22px; margin-top: -11px; border-radius: 3px;
  background: transparent;
}
.bopp.clean .bp-menu a[aria-current="true"]::before { background: var(--teal); }
.bopp.clean .bp-menu a[aria-current="true"] { color: var(--teal-deep); }
.bopp.clean .bp-menu a:hover { color: var(--teal-deep); text-decoration: underline; text-decoration-thickness: 2px; }
@media (max-width: 960px) {
  .bopp.clean .bp-top { grid-template-columns: minmax(0, 1fr); }
  .bopp.clean .bp-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; padding: 12px 16px 8px; }
  .bopp.clean .bp-menu__h { grid-column: 1 / -1; padding-bottom: 8px; }
  .bopp.clean .bp-menu a { min-height: 44px; padding: 6px 0 6px 12px; border-radius: 0; box-shadow: none; border-top: 1px solid var(--rule-soft); font-size: 1.1rem; }
}

/* ---------- BOPP overview: the nine new questions, answers on the page ---------- */
.bopp.clean .se-faq { max-width: none; }
.bopp.clean .se-faq__item--open { padding: 18px 0 20px; }
.bopp.clean .se-faq__item--open .se-faq__q {
  display: block; min-height: 0; padding: 0; cursor: auto; color: var(--ink);
  font-size: clamp(1.3rem, 1.15rem + 0.4vw, 1.55rem); text-transform: none; letter-spacing: 0;
}
.bopp.clean .se-faq__item--open .se-faq__q::after { content: none; }
.bopp.clean .se-faq__item--open .se-faq__a { padding: 8px 0 0; max-width: 46rem; }
.bopp.clean .se-faq__item--open .se-faq__a p + p { margin-top: 8px; }
.bopp.clean .bp-faq-go { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }

/* ---------- BOPP: video and a small original ---------- */
.bopp.clean .bp-player__v { max-height: 68vh; object-fit: contain; }
.bopp .bp-shot.bp-shot--native > img { max-width: 370px; align-self: center; }
.bopp.clean .bp-gallery .bp-shot > video { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #fff; }
.bopp.clean .bp-video-note { flex: none; padding: 0 14px 10px; font-size: 0.86rem; line-height: 1.35; color: var(--ink-soft); }

/* ---------- phones and tablets ---------- */
@media (max-width: 960px) {
  .clean .hero__tag { padding-top: 0; margin-top: 32px; }
  .clean .hero__routes { display: grid; }
  .clean .routes__tags { max-width: none; gap: 20px; }
  .clean .band__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 681px) and (max-width: 960px) {
  .clean .routes__tags { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .clean .tag { padding-inline: 20px; }
  .clean .tag__panel { margin-inline: -20px; }
  .clean .route-photo { margin-inline: -20px; }
  .clean .band { border-left: 0; }
  .clean .band__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- page heads: the panel starts level with the words ---------- */
.clean .phead__copy { padding-top: clamp(32px, 4vw, 56px); }
.clean .phead__aside { padding-top: clamp(32px, 4vw, 56px); }
.clean .choose__intro { padding-top: clamp(32px, 4vw, 56px); }
.clean .req { padding-top: clamp(32px, 4vw, 56px); }
.clean .hero__routes .route-link--quiet { text-transform: none; font-size: 1.2rem; }
@media (max-width: 960px) {
  .clean .phead__aside { padding-top: 0; margin-top: 28px; }
  .clean .req { padding-top: 0; }
}