/* ==========================================================================
   Fibreworks — Coming Soon holding page
   Design tokens and layout transcribed from the approved Claude Design canvas.
   Brand rule: border-radius is 0 everywhere. Sharp rectangles only.
   ========================================================================== */

:root {
  /* Surfaces */
  --green:            #12352A;  /* Fibreworks Green — primary */
  --charcoal:         #23312B;  /* secondary surface */
  --offwhite:         #F5F2EA;  /* light surface / type on green */

  /* Accent green family — rules, labels, monogram. Never a background. */
  --accent-deep:      #5C7A5A;
  --accent:           #7FA98F;
  --accent-label:     #8FA98A;
  --accent-label-alt: #8FA98B;

  /* Form surfaces on dark */
  --input-bg-hero:    #1C3F32;
  --input-bg-trade:   #2E3D35;
  --input-border:     #45564C;

  /* Type on dark */
  --body-on-dark:     #E6E3D8;
  --supporting:       #D9D4C4;
  --consent-hero:     #B7C4AE;
  --consent-trade:    #C6D3C1;

  /* Feedback */
  --error-on-dark:    #D98F7A;

  /* Faces */
  --display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --label:   'Gilroy', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--green);
  color: var(--offwhite);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; }

/* --accent-deep (#5C7A5A) measures 2.8:1 on the green ground — below the 4.5:1
   minimum. Links carry the Privacy Policy and Terms, so they must clear it. */
a { color: var(--accent-label-alt); text-decoration: none; }
a:hover, a:focus-visible { color: var(--offwhite); }

/* Visible, on-brand focus ring — the design brief left states to our judgement. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--offwhite);
  color: var(--green);
  padding: 15px 18px;          /* keeps the target at/above 44px tall */
  font-size: 13.5px;
  font-weight: 600;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
  color: var(--green);
}

/* Honeypot — must be reachable by bots parsing the DOM, invisible to people. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------- Shared type components ------------------------ */

/* All-caps letterspaced section label (Gilroy Extrabold) */
.label-eyebrow {
  margin: 0;
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-label);
}

/* Editorial hairline rule trailing the label — accent green is specified for
   rules and small labels, which is exactly this. */
.label-eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 12px;
}
.label-eyebrow--rule::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(143, 169, 138, 0.45) 0%,
    rgba(143, 169, 138, 0.06) 100%);
}
.label-eyebrow--centred {
  justify-content: center;
}

.label-eyebrow--centred::before {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(90deg,
    rgba(143, 169, 138, 0.06) 0%,
    rgba(143, 169, 138, 0.45) 100%);
}
.label-eyebrow--centred::after { max-width: 90px; }
.label-eyebrow--centred::before { max-width: 90px; }
/* A field label, not a section head. No rule — rules mark section boundaries,
   so withholding one here makes the device carry actual information. */
.label-eyebrow--field {
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--consent-hero);
}

/* ------------------------------ Film grain ------------------------------- */
/* A very light tooth over the whole page. Stops the large flat green fields
   reading as dead digital colour and gives the surfaces a printed feel. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* --------------------------------- Hero --------------------------------- */

.hero {
  position: relative;
  /* Reduced from the original 92vh. min-height, not height — if the copy or
     the sign-up ever needs more room the section still grows to fit. */
  min-height: 69vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--green);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 32%;
  display: block;
  /* Very slow drift so the hero breathes rather than sitting dead still.
     Long and shallow enough that it reads as depth, not movement. */
  animation: drift 32s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: scale(1);    }
  to   { transform: scale(1.06); }
}

/* The photo is portrait (0.8) inside a landscape hero (~1.55), so object-fit
   cover scales it to fit the WIDTH exactly — horizontal overflow is zero and
   the X value in object-position has no effect at all on desktop.
   To push the bottles clear of the scrim the image has to be oversized and
   offset instead. The uncovered strip on the left sits under the opaque part
   of the scrim, over an identical green ground, so it is never visible. */
@media (min-width: 721px) {
  .hero__bg {
    left: 15%;
    right: auto;
    width: 115%;
  }
}
@media (min-width: 1500px) {
  .hero__bg {
    left: 12%;
    width: 112%;
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  /* Falloff pulled in from the original 52/68/82 stops so more of the
     photograph survives. The copy column ends around 37% of the viewport,
     so the solid section still fully backs the type. */
  background: linear-gradient(100deg,
    rgba(18, 53, 42, 0.97) 0%,
    rgba(18, 53, 42, 0.96) 40%,
    rgba(18, 53, 42, 0.62) 56%,
    rgba(18, 53, 42, 0.10) 74%);
}

/* Halftone dot motif. The brief calls this out as the brand texture for
   exactly this kind of full-bleed moment. Two dot grids at different scales,
   masked so density falls away across the frame — the halftone gradient
   effect, without shipping an image. */
.hero__dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(rgba(143, 169, 138, 0.30) 1.15px, transparent 1.25px),
    radial-gradient(rgba(143, 169, 138, 0.16) 0.8px, transparent 0.9px);
  background-size: 15px 15px, 15px 15px;
  background-position: 0 0, 7.5px 7.5px;
  -webkit-mask-image: linear-gradient(105deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 34%,
    rgba(0, 0, 0, 0.18) 54%,
    rgba(0, 0, 0, 0) 68%);
  mask-image: linear-gradient(105deg,
    rgba(0, 0, 0, 0.95) 0%,
    rgba(0, 0, 0, 0.7) 34%,
    rgba(0, 0, 0, 0.18) 54%,
    rgba(0, 0, 0, 0) 68%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  width: 100%;
  /* Vertical padding trimmed with the section height so the content stays
     optically centred rather than crowding the new, shorter frame. */
  padding: 52px 48px;
}


.hero__content {
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.wordmark {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  margin: 0;
  align-self: flex-start;
}
.wordmark img {
  /* Was a flat 42px, which lost to the 72px headline. The brief asks for the
     wordmark to "feel like the whole point, not compete with a headline" —
     so it now leads the scale and the headline sits below it. */
  height: clamp(46px, 4.6vw, 64px);
  width: auto;
  object-fit: contain;
  display: block;
}
.wordmark__tm {
  font-size: clamp(12px, 1vw, 15px);
  line-height: 1;
  color: var(--accent-label-alt);
  margin-left: 2px;
}

.descriptor {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent-label-alt);
}

.headline {
  margin: 6px 0 0;
  font-family: var(--display);
  font-weight: 500;
  /* Reduced from clamp(42px, 6vw, 72px). At this size it also sets on a
     single line, so the break is a decision rather than a wrap accident. */
  font-size: clamp(32px, 3.5vw, 46px);
  line-height: 1.1;
  color: var(--offwhite);
  text-wrap: balance;
}

.supporting {
  margin: 0;
  max-width: 440px;
  /* The mid-tier the scale was missing: everything else sat between 10.5 and
     16px, then jumped straight to the display size with nothing in between. */
  font-size: 18px;
  line-height: 1.6;
  color: var(--supporting);
  text-wrap: pretty;
}

/* ---------------------- Consumer sign-up (in hero) ---------------------- */

.signup {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.signup .label-eyebrow { font-size: 10.5px; }

.signup__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.signup__row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.signup__success {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--offwhite);
  font-weight: 600;
  text-wrap: pretty;
}

/* --------------------------------- Fields -------------------------------- */

.field {
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--input-border);
  border-radius: 0;
  background: var(--input-bg-trade);
  color: var(--offwhite);
  font-family: var(--body);
  font-size: 14px;
  width: 100%;
  transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.field::placeholder { color: rgba(245, 242, 234, 0.45); }
.field:hover { border-color: var(--accent); }
/* Soft accent glow on focus — the "minimal glow" treatment that reads as
   premium on a dark surface, without a heavy ring. */
.field:focus,
.field:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 18px -4px rgba(127, 169, 143, 0.55);
}

.field--hero {
  flex: 1 1 180px;
  min-width: 0;
  background: var(--input-bg-hero);
  font-size: 13.5px;
}

.field--textarea {
  height: auto;
  padding: 12px 14px;
  resize: vertical;
  min-height: 88px;
}

/* appearance:none is required so the select matches the 46px input height */
.field--select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 38px;
  cursor: pointer;
}
.select-wrap { position: relative; }
.select-wrap__chevron {
  position: absolute;
  right: 15px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  border-right: 1.5px solid var(--consent-trade);
  border-bottom: 1.5px solid var(--consent-trade);
  transform: rotate(45deg);
  pointer-events: none;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--body-on-dark);
}

.field-error {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--error-on-dark);
}

/* Consent checkboxes — never pre-ticked (GDPR requirement in the brief) */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  line-height: 1.5;
  cursor: pointer;
}
.consent input {
  margin: 2px 0 0;
  flex: 0 0 auto;
  accent-color: var(--accent);
}
.consent--hero {
  font-size: 11.5px;
  color: var(--consent-hero);
}
.consent--hero input { width: 15px; height: 15px; }
.consent--trade {
  font-size: 12.5px;
  gap: 10px;
  color: var(--consent-trade);
}
.consent--trade input { width: 16px; height: 16px; }

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

.btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
  font-family: var(--body);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 180ms ease, filter 180ms ease;
}
/* Sheen that wipes across on hover. One flourish, on the page's primary
   action only — the thing we most want people to press. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.38) 50%,
    transparent 100%);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateX(120%) skewX(-18deg); }

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.55);
}
.btn:active { transform: translateY(0); }

.btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.btn[disabled]::after { display: none; }

.btn--light {
  background: var(--offwhite);
  color: var(--green);
  padding: 12px 18px;
  font-size: 13.5px;
  font-weight: 600;
}

.btn--accent {
  background: var(--accent);
  color: var(--green);
  padding: 15px 22px;   /* was 14px 20px, which measured 43px tall */
  font-size: 14px;
  font-weight: 700;
  align-self: flex-start;
}

/* ----------------------------- Trade section ----------------------------- */

.trade-section {
  background: var(--offwhite);
  padding: 72px 24px;
}

.trade-panel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  background: var(--charcoal);
  color: var(--offwhite);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  /* Lifts the panel off the off-white ground so it reads as a distinct
     object — the brief wants trade visually separated from consumer. */
  box-shadow: 0 24px 60px -28px rgba(18, 53, 42, 0.55);
}
/* Hairline accent along the top edge */
.trade-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0%,
    rgba(127, 169, 143, 0.35) 42%,
    rgba(127, 169, 143, 0) 78%);
  z-index: 2;
}

.trade-panel__body {
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.trade-panel__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.trade-panel__lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--body-on-dark);
  text-wrap: pretty;
}

.trade__success {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--offwhite);
  font-weight: 600;
}

.trade-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.trade-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.trade-panel__media {
  position: relative;
  overflow: hidden;
}
.trade-panel__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ---------------------------- What it is -------------------------------- */

.what {
  position: relative;
  overflow: hidden;
  background: var(--charcoal);
  padding: 72px 24px;
}

/* Oversized monogram watermark. The brief names the monogram as the secondary
   mark; this was the flattest section on the page and it gives it a subject. */
.what__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 300px;
  transform: translate(-50%, -50%);
  opacity: 0.045;
  pointer-events: none;
  user-select: none;
}

.what__inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}

.what__copy {
  margin: 0;
  font-size: 18px;
  line-height: 1.7;
  color: var(--body-on-dark);
  text-wrap: pretty;
}

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

.footer {
  background: var(--green);
  padding: 48px 24px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.footer p { margin: 0; }

.footer__logo {
  height: 24px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer__slogan {
  font-family: var(--display);
  font-size: 14px;
  font-style: italic;
  font-weight: 400;
  color: var(--supporting);
}

.footer__legal {
  font-size: 12px;
  font-weight: 600;
  color: var(--offwhite);
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--accent-label-alt);
}
/* Negative margin keeps the visual rhythm while the tap area reaches 44px */
.footer__links a {
  display: inline-block;
  padding: 15px 8px;
  margin: -15px 0;
}

.footer__copyright {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  /* Was --accent-deep (#5C7A5A), which measured 2.8:1 on the green ground —
     below the 4.5:1 minimum. This pairing clears it. */
  color: var(--accent-label-alt);
  opacity: 0.85;
}

/* ==========================================================================
   Scroll reveal
   Content is visible by default; the hidden start state is only applied once
   JS has confirmed it can reveal it again. Nothing is ever stranded invisible.
   ========================================================================== */

.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* ==========================================================================
   Recall bar — quiet persistent sign-up prompt once the hero form is gone
   ========================================================================== */

.recall {
  position: fixed;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 12px 20px;
  background: rgba(18, 53, 42, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(127, 169, 143, 0.28);
  transform: translateY(101%);
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
.recall.is-visible { transform: translateY(0); }

.recall__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--supporting);
}

.recall__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.recall__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  background: var(--offwhite);
  color: var(--green);
  padding: 0 18px;
  font-size: 12.5px;
  font-weight: 600;
  transition: filter 160ms ease, transform 160ms ease;
}
.recall__cta:hover,
.recall__cta:focus-visible {
  color: var(--green);
  filter: brightness(1.05);
  transform: translateY(-1px);
}

.recall__close {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--accent-label);
  cursor: pointer;
  transition: color 160ms ease;
}
.recall__close:hover { color: var(--offwhite); }

/* ==========================================================================
   Responsive — the design export had none. Brief calls the page mobile-first
   and says the sign-up must be usable one-handed on a phone.
   ========================================================================== */

/* Trade panel: two columns can't hold the form below ~900px */
@media (max-width: 900px) {
  .trade-panel {
    grid-template-columns: 1fr;
  }
  .trade-panel__media {
    position: relative;
    height: 280px;
    order: 2;
  }
  .trade-panel__media img {
    position: relative;
    inset: auto;
    height: 280px;
    object-position: center 40%;
  }
}

@media (max-width: 720px) {
  /* The 100deg scrim only covers the left of the frame — at narrow widths the
     headline would sit on bare photo, so switch to a vertical scrim. */
  .hero__scrim {
    background: linear-gradient(178deg,
      rgba(18, 53, 42, 0.95) 0%,
      rgba(18, 53, 42, 0.92) 55%,
      rgba(18, 53, 42, 0.82) 100%);
  }
  .hero__bg { object-position: 72% 30%; }

  .hero__inner { padding: 56px 24px; }
  .hero__content { max-width: none; gap: 18px; }

  .trade-section { padding: 56px 20px; }
  .trade-panel__body { padding: 32px 24px; gap: 16px; }

  .what { padding: 56px 20px; }

  .footer { padding: 40px 20px 28px; }
}

@media (max-width: 420px) {
  .hero__inner { padding: 48px 20px; }
  /* Was 40px, set against the old 72px desktop headline. Brought in line with
     the corrected scale so the wordmark still leads on small screens. */
  .headline { font-size: 34px; }
  .supporting { font-size: 17px; }
  .btn--accent { align-self: stretch; text-align: center; }

  /* Keep the email row on one line as long as it fits, then stack cleanly */
  .signup__row { gap: 8px; }
  .field--hero { flex: 1 1 100%; }
  .btn--light { width: 100%; }
}

/* Very short landscape phones: 92vh + padding would clip the sign-up */
@media (max-height: 620px) and (orientation: landscape) {
  .hero { min-height: auto; }
  .hero__inner { padding-top: 48px; padding-bottom: 48px; }
}

@media (max-width: 720px) {
  /* The dot motif fights the vertical scrim at narrow widths — fade it down
     and mask top-to-bottom instead of across. */
  .hero__dots {
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0) 72%);
    mask-image: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.18) 46%, rgba(0,0,0,0) 72%);
  }
  .what__mark { height: 210px; }
  .recall { justify-content: space-between; gap: 10px; padding: 10px 14px; }
  .recall__text { font-size: 12px; flex: 1 1 140px; }
}

/* ==========================================================================
   Reduced motion — strip every added flourish, not just shorten it.
   Parallax/drift and scroll reveals are the exact effects that cause trouble,
   so they are removed outright rather than sped up.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .hero__bg { animation: none; transform: none; }
  .btn::after { display: none; }
  .btn:hover { transform: none; }
  .js-reveal [data-reveal] { opacity: 1; transform: none; }
  .grain { display: none; }
}

/* Print — collapse the photographic layers, keep the copy legible */
@media print {
  .hero__bg, .hero__scrim, .trade-panel__media, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .hero, .what, .trade-panel, .footer { background: #fff; color: #000; }
  .headline, .supporting, .what__copy, .footer__slogan { color: #000; }
}