/* ==========================================================================
   Carton-Pro (R Howard)
   Built to Carton-Pro Brand Guidelines V1.0, July 2026.
   Navy 60 / White 30 / Carton Pale 7 / sub-range 3.
   ========================================================================== */

@font-face {
  font-family: 'Barmeno';
  src: url('assets/fonts/barmeno-medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Core palette (2.1) */
  --navy: #14244C;
  --pale: #B7C6DE;
  --mill: #EDF0F3;
  --press-black: #191C26;

  /* Permitted tints of Carton Navy (2.3) */
  --navy-70: #5B6681;
  --navy-50: #8A92A6;
  --navy-30: #B8BDC9;
  --navy-10: #E7E8EC;

  /* Sub-range colours (2.2) are not used on this site. Where one thing needs
     telling apart from its neighbour it uses a permitted tint of Carton Navy
     (2.3) rather than a second hue. */

  --white: #FFFFFF;

  --font-brand: 'Barmeno', 'Source Sans 3', 'Helvetica Neue', Helvetica, sans-serif;
  --font-body: 'Source Sans 3', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --measure: 68ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --rule: 1px solid rgba(20, 36, 76, 0.14);
  --rule-dark: 1px solid rgba(183, 198, 222, 0.22);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------- reset -- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The canvas, seen only when the scroll rubber-bands past either end. */
  background: var(--navy);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.09rem);
  line-height: 1.6;
  color: var(--press-black);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-brand);
  font-weight: 500;
  color: var(--navy);
  margin: 0;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

p { margin: 0 0 1.05em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--navy); color: var(--white); }

:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* On navy panels the focus ring flips to Carton Pale so it stays visible. */
.masthead :focus-visible, .hero :focus-visible, .band--navy :focus-visible,
.band--deep :focus-visible, .foot :focus-visible,
.page-head :focus-visible, .media-band :focus-visible { outline-color: var(--pale); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--navy); color: var(--white);
  padding: 0.85rem 1.25rem; z-index: 999; font-family: var(--font-brand);
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------- primitives -- */

.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1000px; }

section { position: relative; }

.band { padding-block: clamp(4.5rem, 10vw, 10rem); }
.band--tight { padding-block: clamp(3rem, 6vw, 6rem); }

.band--navy { background: var(--navy); color: var(--pale); }
.band--navy h1, .band--navy h2, .band--navy h3, .band--navy h4 { color: var(--white); }

.band--deep { background: var(--press-black); color: var(--pale); }
.band--deep h2, .band--deep h3 { color: var(--white); }

/* Mill White carrying a fine cutting-mat grid, the surface a die line gets
   drawn on. 20mm squares at 3.5% navy: felt, not seen. */
.band--mill {
  background-color: var(--mill);
  background-image:
    repeating-linear-gradient(to right, rgba(20,36,76,0.026) 0 1px, transparent 1px 84px),
    repeating-linear-gradient(to bottom, rgba(20,36,76,0.026) 0 1px, transparent 1px 84px);
  background-position: center;
}

/* ------------------------------------------------------- press marks -- */
/* The margin of a press sheet, borrowed properly: crop marks at all four
   trim corners, a colour slug up the edge, a star target for dot gain, and
   a density ladder along the footer. All of it decorative, all of it hidden
   from assistive tech and dropped below 900px where the margin disappears. */

:root { --mark: rgba(183, 198, 222, 0.42); --mark-ink: rgba(20, 36, 76, 0.3); }

.band--navy { position: relative; overflow: clip; }

/* Four crop marks. Two hairlines per corner, offset so they never meet at
   the vertex, exactly as a trim corner is marked. */
.band--navy::before {
  content: "";
  position: absolute;
  inset: 2.25rem;
  pointer-events: none;
  background:
    linear-gradient(var(--mark) 0 0) no-repeat left 0 top 10px / 1px 22px,
    linear-gradient(var(--mark) 0 0) no-repeat left 10px top 0 / 22px 1px,
    linear-gradient(var(--mark) 0 0) no-repeat right 0 top 10px / 1px 22px,
    linear-gradient(var(--mark) 0 0) no-repeat right 10px top 0 / 22px 1px,
    linear-gradient(var(--mark) 0 0) no-repeat left 0 bottom 10px / 1px 22px,
    linear-gradient(var(--mark) 0 0) no-repeat left 10px bottom 0 / 22px 1px,
    linear-gradient(var(--mark) 0 0) no-repeat right 0 bottom 10px / 1px 22px,
    linear-gradient(var(--mark) 0 0) no-repeat right 10px bottom 0 / 22px 1px;
}

/* Colour slug, the ink name printed up the trim edge. Straight off the
   brand book: Carton Navy is Pantone 2767 C. */
.band--navy::after {
  content: "CARTON NAVY · PANTONE 2767 C";
  position: absolute;
  right: 1.6rem;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-family: var(--font-brand);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  color: var(--mark);
  pointer-events: none;
  white-space: nowrap;
}

/* Star target. A real one is a radial wedge burst used to read dot gain,
   which is precisely what a repeating conic gradient draws. */
.page-head { position: relative; }
.page-head::before {
  content: "";
  position: absolute;
  right: 2.5rem; bottom: 2.5rem;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--mark) 0 7.5deg, transparent 7.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 96%, transparent 97%);
  mask: radial-gradient(circle, #000 96%, transparent 97%);
  pointer-events: none;
  z-index: 1;
}

/* Density ladder across the head of the footer, the control strip a printer
   reads to check ink weight. Runs the permitted tints of Carton Navy (2.3). */
.foot { position: relative; }
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 6px;
  /* A clean density ramp, light to dark, seven patches. */
  background: linear-gradient(to right,
    var(--white)       0 14.2857%,
    var(--pale)        14.2857% 28.5714%,
    var(--navy-30)     28.5714% 42.8571%,
    var(--navy-50)     42.8571% 57.1428%,
    var(--navy-70)     57.1428% 71.4285%,
    var(--navy)        71.4285% 85.7142%,
    var(--press-black) 85.7142% 100%);
}

/* Fold ticks on the mill bands, the dashed marks that say where a sheet
   creases. */
.band--mill { position: relative; }
.band--mill::before, .band--mill::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: repeating-linear-gradient(to bottom, var(--mark-ink) 0 6px, transparent 6px 14px);
  pointer-events: none;
}
.band--mill::before { left: 2.25rem; }
.band--mill::after { right: 2.25rem; }

/* On a phone the marks stay, just quieter: shorter arms, pulled in tight to
   the trim, and a fainter ink. The colour slug goes, as its tracked-out
   caption has nowhere to sit at this width. */
@media (max-width: 900px) {
  /* Both fold ticks go on a phone. The left one sits 2.25rem in, which is
     inside the text column at this width, so it ruled straight through the
     copy instead of sitting in the margin. */
  .band--navy::after,
  .band--mill::after,
  .band--mill::before { display: none; }

  /* The cutting-mat grid is meant to be felt, not seen. On a phone the copy
     runs the full width of the band, so every line rules through it and it
     is very much seen. Keep the Mill White ground, drop the grid. */
  .band--mill { background-image: none; }

  .band--navy::before {
    inset: 1rem;
    opacity: 0.55;
    background:
      linear-gradient(var(--mark) 0 0) no-repeat left 0 top 6px / 1px 13px,
      linear-gradient(var(--mark) 0 0) no-repeat left 6px top 0 / 13px 1px,
      linear-gradient(var(--mark) 0 0) no-repeat right 0 top 6px / 1px 13px,
      linear-gradient(var(--mark) 0 0) no-repeat right 6px top 0 / 13px 1px,
      linear-gradient(var(--mark) 0 0) no-repeat left 0 bottom 6px / 1px 13px,
      linear-gradient(var(--mark) 0 0) no-repeat left 6px bottom 0 / 13px 1px,
      linear-gradient(var(--mark) 0 0) no-repeat right 0 bottom 6px / 1px 13px,
      linear-gradient(var(--mark) 0 0) no-repeat right 6px bottom 0 / 13px 1px;
  }

  .page-head::before {
    right: 1.1rem; bottom: 1.1rem;
    width: 22px; height: 22px;
    opacity: 0.5;
  }

  .band--mill::before { opacity: 0.5; }
}

/* Tracked-out label — Barmeno Medium, 160 tracking (3.2) */
.label {
  font-family: var(--font-brand);
  font-size: 0.73rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy-70);
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.label::before {
  content: "";
  width: 26px; height: 3px;
  background: var(--navy);
  flex: none;
}
/* On navy panels the label and its rule both go Carton Pale. */
.band--navy .label, .band--deep .label, .hero .label,
.page-head .label { color: var(--pale); }
.band--navy .label::before, .band--deep .label::before, .hero .label::before,
.page-head .label::before { background: var(--pale); }

/* Type scale, rebuilt for screen from 3.2 */
.display {
  font-size: clamp(3rem, 1rem + 8.6vw, 8.5rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.headline {
  font-size: clamp(2.3rem, 1.15rem + 4.6vw, 5.5rem);
  line-height: 0.94;
  letter-spacing: -0.032em;
  text-wrap: balance;
}
.subhead {
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.standfirst {
  font-size: clamp(1.1rem, 1rem + 0.55vw, 1.42rem);
  line-height: 1.48;
  color: var(--navy-70);
  max-width: 54ch;
}
.band--navy .standfirst, .band--deep .standfirst { color: var(--pale); }

/* ---------------------------------------------------------------- logo -- */
/* Lockup proportions per 1.1 / 1.2 / 1.5:
   endorsement cap 0.275X, descriptor 0.30X, tracking 220.            */

.lockup {
  display: inline-block;
  text-decoration: none;
  font-family: var(--font-brand);
  line-height: 1;
  color: var(--navy);
  --wordmark: 1.6rem;
}
.lockup__endorse {
  display: block;
  font-size: calc(var(--wordmark) * 0.275);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: calc(var(--wordmark) * 0.14);
}
.lockup__word { display: block; font-size: var(--wordmark); letter-spacing: -0.008em; }
.lockup__desc {
  display: block;
  font-size: calc(var(--wordmark) * 0.30);
  letter-spacing: 0.004em;
  text-transform: uppercase;
  margin-top: calc(var(--wordmark) * 0.12);
}
.lockup--reversed { color: var(--white); }
.lockup--pale { color: var(--pale); }

/* -------------------------------------------------------------- header -- */

/* The solid bar is the DEFAULT, and script.js clears it while the page is
   at the top. Inverted deliberately: if the script never runs, the masthead
   stays readable navy instead of leaving white type on whatever scrolls
   under it. Nothing here may depend on JavaScript to stay legible. */
.masthead {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: rgba(20, 36, 76, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(183, 198, 222, 0.16);
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease);
}
.masthead[data-stuck="false"] {
  background: transparent;
  backdrop-filter: none;
  border-bottom-color: transparent;
}

.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 88px;
  padding-block: 1rem;
}
/* Guideline 3.2 sets a 14px screen minimum for any type, legal lines
   included. The endorsement is locked to 0.275 of the wordmark by 1.1, so
   the only way to lift R HOWARD is to grow the whole lockup. Sized to the
   largest the header bar and the footer column will take. */
.masthead .lockup { --wordmark: clamp(1.9rem, 1.5rem + 1.1vw, 2.05rem); }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.75rem); }

.nav a {
  position: relative;
  font-family: var(--font-brand);
  font-size: 1rem;
  letter-spacing: 0.01em;
  color: var(--white);
  text-decoration: none;
  padding-block: 0.5rem;
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--pale);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover::after { transform: scaleX(1); }
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Customer portal icon */
.portal {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.62rem 1.05rem 0.62rem 0.85rem;
  border: 1px solid rgba(183, 198, 222, 0.45);
  color: var(--white);
  text-decoration: none;
  font-family: var(--font-brand);
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background 0.22s var(--ease), border-color 0.22s var(--ease), color 0.22s var(--ease);
}
.portal svg { width: 19px; height: 19px; flex: none; }
.portal:hover { background: var(--pale); border-color: var(--pale); color: var(--navy); }
.portal::after { display: none; }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(183, 198, 222, 0.45);
  color: var(--white);
  font-family: var(--font-brand);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.65rem 1rem;
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--pale); background: var(--pale); color: var(--navy); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed;
    inset: 88px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--navy);
    border-bottom: var(--rule-dark);
    padding: 0.5rem var(--gutter) 1.75rem;
    display: none;
  }
  .nav[data-open="true"] { display: flex; }
  .nav a {
    padding-block: 1.15rem;
    border-bottom: 1px solid rgba(183, 198, 222, 0.14);
    font-size: 1.4rem;
  }
  .nav a::after { bottom: -1px; }
  .portal { margin-top: 1.35rem; justify-content: center; border-bottom: 1px solid rgba(183,198,222,0.45); font-size: 0.95rem; }
}

/* ------------------------------------------------------------- buttons -- */

/* The hidden attribute must beat the display rules set on buttons and rows */
[hidden] { display: none !important; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-brand);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 1.05rem 1.85rem;
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  cursor: pointer;
  transition: background 0.22s var(--ease), color 0.22s var(--ease), border-color 0.22s var(--ease), transform 0.22s var(--ease);
}
/* Colour is the only thing that changes on hover. Nothing moves and nothing
   resizes, so a pair of buttons stays locked to the same footprint. */
.btn:hover { background: var(--press-black); border-color: var(--press-black); }
/* Instant press feedback without touching the footprint, since these buttons
   are required to hold one size at rest, on hover and on press. */
.btn:active { background: var(--press-black); border-color: var(--press-black); }
.btn--light:active { background: var(--navy-30); border-color: var(--navy-30); }
.btn--ghost:active { background: var(--press-black); border-color: var(--press-black); color: var(--white); }
.btn--ghost-on-navy:active { background: var(--pale); border-color: var(--pale); color: var(--navy); }

/* Primary action where the panel behind it is already navy */
.btn--light { background: var(--white); border-color: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--pale); border-color: var(--pale); color: var(--navy); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { background: var(--navy); color: var(--white); }

.btn--ghost-on-navy { background: transparent; border-color: rgba(183, 198, 222, 0.5); color: var(--white); }
.btn--ghost-on-navy:hover { background: var(--pale); border-color: var(--pale); color: var(--navy); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.5rem; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-brand);
  font-size: 1rem;
  color: var(--navy);
  text-decoration: none;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid var(--navy);
  transition: gap 0.24s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .arrow-link:hover { gap: 1rem; }
}
.band--navy .arrow-link, .band--deep .arrow-link { color: var(--white); border-bottom-color: var(--pale); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--navy);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Light enough to keep the factory visible, dark enough to hold white type */
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(20, 36, 76, 0.95) 0%, rgba(20, 36, 76, 0.55) 45%, rgba(20, 36, 76, 0.35) 100%);
}

.hero__inner { padding-block: clamp(7rem, 12vw, 9rem) clamp(3rem, 5vw, 4.5rem); width: 100%; }
.hero .display { color: var(--white); }

.hero__stand {
  margin-top: 2rem;
  color: var(--pale);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.45rem);
  line-height: 1.45;
  max-width: 48ch;
}

/* Light hero: the carton photography, centred type.
   assets/cartons-tile.svg is the drawn stand-in for this shot and is no longer
   loaded here, so swapping the photograph is a one-line change. */
.hero--light {
  align-items: center;
  text-align: center;
  background-color: var(--mill);
  background-image: url('assets/img/hero-boxes-grid-v2.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
/* Trial hero: the grid of navy boxes, cropped 25% off the top so the lockup
   embossed on the raised box sits above the headline rather than through it.
   Panning alone could not clear it: the lockup sits near the centre of the
   frame and cover leaves only 60 to 240px of play at desktop sizes.

   The crop fixed the contrast at the same time. With the bright box face
   behind the headline it measured 2.96:1 at the 95th percentile, under the
   3:1 large text floor; clear of it, the same measurement reads 8.38:1. So
   the scrim can stay light at 22% and leave the photograph alone, where the
   bright carton shot it replaced needed 40%.
   To revert: background-image back to hero-cartons.jpg above, and this to 0.4. */
.hero--light .hero__scrim { background: rgba(20, 36, 76, 0.22); }

/* On a portrait screen a 2.22:1 photograph zooms about 5x to cover, and centred
   that slices the embossed lockup down the middle. It does fit though, about
   310px of a 375px viewport, so pan to hold it whole instead of hiding it.
   64% is the midpoint of the range that keeps both its edges inside the frame
   on every common phone from 360 to 430 CSS px wide. */
@media (max-aspect-ratio: 1/1) {
  .hero--light { background-position: 64% center; }
  /* "Make your packaging stand out." runs to three lines on a phone, and at
     the shared display size the third line pushed the headline up into the
     embossed lockup: clearance measured -3px. Shrinking the type fixed that
     but cost a fifth of its size, so the block is pushed down into the dead
     space under the buttons instead. There was 131px of it doing nothing. */
  .hero--light .hero__inner { padding-top: clamp(6rem, 23vh, 13rem); }
  /* Sized against the height of the screen rather than its width, which is
     what actually constrains this hero: the headline, the lockup above it and
     the buttons below all have to share one viewport. A tall phone gets the
     full display size; a 667px screen has room for two lines, not three. */
  .hero--light .display { font-size: clamp(1.9rem, 5.9vh, 3.05rem); }
}
.hero--light .hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero--light .display { max-width: 16ch; }
.hero--light .hero__stand {
  color: var(--white);
  max-width: 46ch;
  font-family: var(--font-brand);
  font-size: clamp(1.25rem, 1rem + 0.95vw, 1.75rem);
  line-height: 1.3;
}
.hero--light .hero__stand strong { font-family: var(--font-brand); font-weight: 500; }

/* Paired hero buttons share one width so they read as a matched set. */
.btn-row--centre { justify-content: center; }
.btn-row--centre .btn {
  min-width: clamp(11rem, 16vw, 14rem);
  justify-content: center;
  text-align: center;
}


/* Capability strip. Carton Pale, picking up the ground of the hero photograph
   directly above it, with navy type. */
.specs { background: var(--pale); }
/* Five equal fifths. The labels are wildly different lengths, and sizing the
   tracks to their content leaves the rules at uneven intervals, which reads as
   an accident rather than a grid. Equal columns put the rules on a steady beat
   and cost only type size, which this component can afford: it is a label
   strip, not a row of figures, and the site's own eyebrow labels sit smaller
   still. */
.specs__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.specs__item {
  padding: clamp(1.15rem, 1.8vw, 1.5rem) clamp(0.9rem, 1.25vw, 1.25rem);
  border-left: 1px solid rgba(20, 36, 76, 0.18);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The first label sits on the page gutter, so the wrap edge acts as its rule
   and the strip lines up with the headline beneath it. */
.specs__item:first-child { border-left: 0; padding-left: 0; }

.specs__label {
  font-family: var(--font-brand);
  /* Sized against the longest label at the narrowest width that still runs
     five across (1200px): about 177px of ink in 185px of room. Above that the
     cap holds it at 0.8rem so it does not drift into figure territory. */
  font-size: clamp(0.7rem, 0.95vw, 0.85rem);
  color: var(--navy);
  line-height: 1.2;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  display: block;
}
/* Below 1200 the fifths are too narrow for 'Warehouse & Transportation' at a
   legible size, so the strip folds to three over two: thirds on the top row,
   halves on the bottom. No stranded cell. */
@media (min-width: 621px) and (max-width: 1199px) {
  .specs__grid { grid-template-columns: repeat(6, 1fr); }
  .specs__item { padding: 1.1rem 1.2rem; }
  .specs__item:nth-child(-n+3) { grid-column: span 2; }
  .specs__item:nth-child(n+4) { grid-column: span 3; border-top: 1px solid rgba(20, 36, 76, 0.18); }
  .specs__item:first-child, .specs__item:nth-child(4) { border-left: 0; padding-left: 0; }
  .specs__label { font-size: clamp(0.7rem, 1.15vw, 0.92rem); }
}
/* Narrower again and even a half row is tight, so the labels stack. */
@media (max-width: 620px) {
  .specs__grid { grid-template-columns: 1fr; }
  .specs__item { border-left: 0; padding: 1.15rem 0; border-top: 1px solid rgba(20, 36, 76, 0.18); }
  .specs__item:first-child { border-top: 0; padding-top: 1.6rem; }
  .specs__item:last-child { padding-bottom: 1.6rem; }
}

/* -------------------------------------------------------- page heading -- */

.page-head {
  background: var(--navy);
  color: var(--pale);
  padding-block: clamp(9rem, 16vw, 14rem) clamp(3.5rem, 7vw, 6.5rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.page-head__media {
  position: absolute; inset: 0; z-index: -2;
  background-position: center; background-size: cover; background-repeat: no-repeat;
}
.page-head__media img, .page-head__media video { width: 100%; height: 100%; object-fit: cover; }
.page-head::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 36, 76,0.96) 0%, rgba(20, 36, 76,0.72) 100%);
}
/* Already-dark footage does not need the full scrim; at 0.72 the canopy
   disappears entirely. Lighter, and the type still clears its ratio. */
.page-head--dark-media::after {
  background: linear-gradient(to top, rgba(20, 36, 76,0.8) 0%, rgba(20, 36, 76,0.34) 100%);
}

/* On a phone a header clip is 9 MB of mobile data for a decorative
   background, so the poster frame carries it instead. Each page-head__media
   sets its own poster as an inline background-image. */
@media (max-width: 700px) {
  .page-head__media video { display: none; }
}

.page-head .headline { color: var(--white); }
.page-head .standfirst { margin-top: 1.75rem; color: var(--pale); }

/* -------------------------------------------------------------- layout -- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2.5rem, 7vw, 8.5rem);
  align-items: start;
}
/* The heading holds while its copy scrolls past, which is what makes the
   asymmetry read as deliberate rather than as a narrow column. */
@media (min-width: 901px) {
  .split > *:first-child { position: sticky; top: 140px; }
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 1.75rem; } }

.stack > * + * { margin-top: 1.6rem; }

/* --------------------------------------------------------------- cards -- */
/* Entries on a press sheet, not boxes. A hairline rule holds the top of each
   one and draws across in full navy on hover. */

.grid { display: grid; column-gap: clamp(2rem, 4.5vw, 5rem); row-gap: clamp(2.75rem, 5vw, 4.5rem); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 940px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.cell {
  position: relative;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--navy-30);
}
.cell::after {
  content: "";
  position: absolute; top: -1px; left: 0;
  width: 100%; height: 2px;
  background: var(--navy);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cell:hover::after { transform: scaleX(1); }
  .cell:hover .dieline { color: var(--navy); }
}
.band--navy .cell { border-top-color: rgba(183, 198, 222, 0.35); }
.band--navy .cell::after { background: var(--pale); }

.cell h3 {
  font-size: clamp(1.45rem, 1.15rem + 1.15vw, 2.1rem);
  margin-bottom: 0.9rem;
  letter-spacing: -0.02em;
}
.cell p { color: var(--navy-70); font-size: 1.02rem; margin-bottom: 0; max-width: 40ch; }
.band--navy .cell p { color: var(--pale); }

/* -------------------------------------------------------- process list -- */

.process { counter-reset: step; }

.process__step {
  display: grid;
  grid-template-columns: minmax(0, 6.5rem) minmax(0, 1fr);
  gap: clamp(1.25rem, 3.5vw, 3.5rem);
  padding-block: clamp(2rem, 3.6vw, 3.25rem);
  border-top: var(--rule);
  align-items: start;
}
.process__step:last-child { border-bottom: var(--rule); }
@media (max-width: 680px) { .process__step { grid-template-columns: 1fr; gap: 0.75rem; } }

.process__no {
  font-family: var(--font-brand);
  font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem);
  line-height: 0.85;
  color: var(--navy-10);
  letter-spacing: -0.04em;
}
.band--navy .process__no, .band--deep .process__no { color: rgba(183, 198, 222, 0.28); }
.band--navy .process__step, .band--deep .process__step { border-color: rgba(183, 198, 222, 0.2); }

.process__step h3 { font-size: clamp(1.35rem, 1.15rem + 0.7vw, 1.85rem); margin-bottom: 0.8rem; }
.process__step p { color: var(--navy-70); }
.band--navy .process__step p, .band--deep .process__step p { color: var(--pale); }

/* ------------------------------------------------------------- dieline -- */
/* Cutter-guide illustration standing in for a sector's pack shape. Solid
   lines are cuts, dashed are creases, which is how a real die line reads. */

.dieline {
  display: block;
  width: 100%;
  /* The set is drawn at three tiers. Capping at 190px keeps us in the 200px
     tier, the one drawn with every crease showing. */
  max-width: 190px;
  height: auto;
  overflow: visible;
  color: var(--navy-70);
  margin-bottom: 1.5rem;
  transition: color 0.32s var(--ease);
}

.formats {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 1.3rem 0 0;
  border-top: var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.formats li {
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy-70);
  border: 1px solid var(--navy-30);
  padding: 0.34rem 0.6rem;
}

/* Format chips on a navy panel */
.band--navy .formats { border-top-color: rgba(183, 198, 222, 0.3); }
.band--navy .formats li { color: var(--pale); border-color: rgba(183, 198, 222, 0.42); }

/* ----------------------------------------------------------------- faq -- */

.faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 3.5vw, 3.25rem) clamp(2rem, 5vw, 5rem);
}
@media (max-width: 780px) { .faq { grid-template-columns: 1fr; } }

.faq__item { border-top: 2px solid var(--navy); padding-top: 1.25rem; }
.faq__item h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); margin-bottom: 0.65rem; }
.faq__item p { color: var(--navy-70); font-size: 1rem; max-width: 46ch; }

/* -------------------------------------------------------- data / specs -- */

.datalist { border-top: 2px solid var(--navy); }
.datalist__row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; padding-block: 1.05rem; border-bottom: var(--rule);
}
.datalist__key { font-size: 1rem; color: var(--navy-70); }
.datalist__val { font-family: var(--font-brand); font-size: 1.05rem; color: var(--navy); text-align: right; }

/* Two columns cramp badly under ~520px: the key wraps and the right-aligned
   value stacks against it. Below that the row stacks and both go left. */
@media (max-width: 520px) {
  .datalist__row { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .datalist__val { text-align: left; }
}

.band--navy .datalist, .band--deep .datalist { border-top-color: var(--pale); }
.band--navy .datalist__row, .band--deep .datalist__row { border-bottom: var(--rule-dark); }
.band--navy .datalist__key, .band--deep .datalist__key { color: var(--pale); }
.band--navy .datalist__val, .band--deep .datalist__val { color: var(--white); }

/* ------------------------------------------------------------ benefits -- */

/* Fourteen short items. One column is a long scroll, three is a word each,
   so two columns with the rules doing the separating. */
.benefits {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}
.benefits li {
  padding: 1rem 0;
  border-top: 1px solid rgba(20, 36, 76, 0.16);
  color: var(--navy);
  font-size: 1rem;
  line-height: 1.45;
}
.benefits li:nth-child(-n+2) { border-top: 0; }
@media (max-width: 700px) {
  .benefits { grid-template-columns: 1fr; }
  .benefits li:nth-child(2) { border-top: 1px solid rgba(20, 36, 76, 0.16); }
}

/* -------------------------------------------------------- accreditation -- */

/* Three schemes, one row, so none of them is left hanging on its own. */
.accred { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
@media (max-width: 1000px) { .accred { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .accred { grid-template-columns: 1fr; } }

.accred__panel {
  background: var(--navy);
  border: 1px solid rgba(183, 198, 222, 0.22);
  padding: clamp(2rem, 3.2vw, 3.25rem);
  position: relative;
}
/* Sized for the longest scheme name rather than the shortest. 'BRCGS for
   Packaging' is a title, not a three-letter logo, and at the old display
   size it broke to three ragged lines next to 'FSC'. */
.accred__mark {
  font-family: var(--font-brand);
  font-size: clamp(1.5rem, 1.1rem + 1.35vw, 2.2rem);
  line-height: 1.08;
  color: var(--white); letter-spacing: -0.02em; display: block; margin-bottom: 0.6rem;
  text-wrap: balance;
}
.accred__sub {
  font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.17em;
  text-transform: uppercase; color: var(--pale); display: block; margin-bottom: 1.75rem;
}
.accred__panel p { color: var(--pale); font-size: 1rem; }

/* --------------------------------------------------------------- media -- */

.media-band {
  position: relative;
  min-height: clamp(400px, 58vw, 720px);
  display: grid; align-items: end;
  overflow: hidden; isolation: isolate;
}
.media-band video, .media-band img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
.media-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(20, 36, 76,0.92) 0%, rgba(20, 36, 76,0.35) 65%, rgba(20, 36, 76,0.25) 100%);
}
.media-band__caption { padding-block: clamp(2.5rem, 5vw, 4.5rem); color: var(--white); }

.pullquote {
  font-family: var(--font-brand);
  font-size: clamp(1.9rem, 1.1rem + 3.4vw, 4.5rem);
  line-height: 1.0;
  color: var(--white);
  max-width: 20ch;
  margin: 0;
  letter-spacing: -0.028em;
}

/* ----------------------------------------------------------------- CTA -- */

.cta { background: var(--pale); color: var(--navy); padding-block: clamp(4rem, 8vw, 7.5rem); }
.cta__inner {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2.5rem, 5vw, 5.5rem); align-items: center;
}
@media (max-width: 820px) { .cta__inner { grid-template-columns: 1fr; } }
/* navy-70 only reaches 3.3:1 on Carton Pale, so text on this panel is full navy */
.cta .standfirst, .cta .datalist__key, .cta p, .cta .label { color: var(--navy); }

/* ----------------------------------------------------------------- map -- */

/* The map sits in a printed frame: corner crop marks outside the image, a
   navy caption strip under it carrying the coordinates and a directions
   link. Same register marks language as the bands. */
.mapframe { position: relative; margin: 0; }
.mapframe::before, .mapframe::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.mapframe::before {
  top: -6px; left: -6px;
  border-top: 1px solid var(--navy-50); border-left: 1px solid var(--navy-50);
}
.mapframe::after {
  bottom: -6px; right: -6px;
  border-bottom: 1px solid var(--navy-50); border-right: 1px solid var(--navy-50);
}

.map {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--navy-30);
  border-bottom: 0;
  background: var(--mill);
  overflow: hidden;
}
.map iframe {
  width: 100%; height: 100%; border: 0; display: block;
  filter: grayscale(0.35) contrast(1.04);
}

.mapframe__bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.85rem 1.1rem;
  background: var(--navy); color: var(--pale);
  font-family: var(--font-brand); font-size: 0.72rem;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.mapframe__addr { color: var(--navy-30); text-transform: none; letter-spacing: 0.08em; }
.mapframe__link { color: var(--white); text-decoration: none; white-space: nowrap; }
.mapframe__link:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 900px) { .map { aspect-ratio: 16 / 10; } }
@media (max-width: 420px) {
  .mapframe__bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ---------------------------------------------------------------- form -- */

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }
.field--full { grid-column: 1 / -1; }

.field label {
  display: block; font-family: var(--font-brand); font-size: 0.72rem;
  letter-spacing: 0.17em; text-transform: uppercase; color: var(--navy-70); margin-bottom: 0.6rem;
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: 1rem;
  color: var(--press-black); background: var(--white);
  border: 1px solid var(--navy-30); border-radius: 0;
  padding: 0.95rem 1rem; transition: border-color 0.18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--navy); outline: 2px solid rgba(20, 36, 76, 0.16); outline-offset: 0;
}
.field textarea { min-height: 160px; resize: vertical; }

.form-note { font-size: 0.9rem; color: var(--navy-70); margin-top: 1.15rem; }

.form-status {
  margin-top: 1.35rem; padding: 1rem 1.2rem; font-size: 1rem;
  border-left: 1px solid var(--navy); background: var(--mill); display: none;
}
.form-status[data-state="ok"] { display: block; border-left-color: var(--navy); }
.form-status[data-state="error"] { display: block; border-left-color: var(--press-black); background: var(--navy-10); }

.hp { position: absolute; left: -9999px; }

/* -------------------------------------------------------------- footer -- */

.foot { background: var(--navy); color: var(--navy-30); padding-block: clamp(3.5rem, 6vw, 5rem) 2rem; font-size: 0.97rem; }

.foot__top {
  display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem); padding-bottom: 3rem;
  border-bottom: 1px solid rgba(183, 198, 222, 0.16);
}
@media (max-width: 900px) { .foot__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot__top { grid-template-columns: 1fr; } }

.foot h4 {
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--pale); margin-bottom: 1.25rem;
}
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li + li { margin-top: 0.7rem; }
.foot a { color: var(--navy-30); text-decoration: none; transition: color 0.18s var(--ease); }
.foot a:hover { color: var(--white); }
.foot .lockup { --wordmark: 2.5rem; }
.foot__blurb { color: var(--navy-30); max-width: 34ch; margin-top: 1.6rem; }

.social { display: flex; align-items: center; gap: 0.85rem; margin-top: 1.75rem; list-style: none; padding: 0; }
/* Beats the .foot li + li stacking margin, which was dropping the second icon */
.foot .social li, .foot .social li + li { margin: 0; }
.social a, .social__pending {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(183, 198, 222, 0.32);
  color: var(--pale);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.social svg { width: 19px; height: 19px; }
.social a:hover { background: var(--pale); border-color: var(--pale); color: var(--navy); }
/* Not yet a link, because the account does not exist yet */
.social__pending { opacity: 0.45; }

.foot__bottom {
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  align-items: center; padding-top: 1.85rem; font-size: 0.87rem; color: var(--navy-50);
}
.foot__badges {
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.25rem);
  font-family: var(--font-brand);
  font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--pale);
}

/* BRCGS Certificated Site logo. Their guidelines forbid any alteration to the
   design or colour, so it is placed unmodified on its own white ground: the
   mark carries mid-grey and mid-blue that would fall well below a readable
   contrast on Carton Navy. The padding is the exclusion zone the guidelines
   ask for, scaled with the mark rather than fixed, so nothing crowds it at
   any width. Aspect ratio is pinned by the intrinsic width and height on the
   element, since the guidelines also forbid stretching it. */
.foot__brcgs {
  display: block;
  width: clamp(84px, 8vw, 108px);
  height: auto;
  background: var(--white);
  padding: clamp(0.5rem, 0.8vw, 0.7rem);
  box-sizing: content-box;
  flex: none;
}
/* Kept clearly apart from the BRCGS mark: neither scheme's guidelines permit
   the marks to be combined or read as one lockup. FSC permits green, black and
   white, so the white artwork sits straight on the navy with no tile, and it
   is matched to the BRCGS mark by height so it is not the subordinate of the
   two, which FSC's guide asks for on size and placement.

   TODO: FSC's promotional rules also want the licence code (FSC(R) C######)
   alongside the mark. Awaiting it from the client; add it as a .foot__fsc-code
   span next to this image. */
.foot__fsc {
  display: block;
  width: auto;
  height: clamp(63.5px, 6.05vw, 81.7px);
  flex: none;
}

/* --------------------------------------------------------------- utils -- */

/* Scroll reveal, built so that nothing can ever be left hidden.
   The resting state is fully visible. Adding .is-in plays an animation that
   starts from hidden and ends at the resting state, so if the observer never
   fires, never fires in time, or the script does not run at all, the copy is
   simply on screen with no animation. There is no state in which an element
   sits at opacity 0 waiting for JavaScript. */

@keyframes revealIn {
  from { opacity: 0; transform: translateY(14px); }
}
@keyframes revealInChild {
  from { opacity: 0; transform: translateY(12px); }
}

.js .reveal.is-in { animation: revealIn 0.5s var(--ease-out) backwards; }

/* A collection animates item by item rather than as one slab. */
.js .grid.reveal.is-in > *,
.js .accred.reveal.is-in > *,
.js .faq.reveal.is-in > *,
.js .process.reveal.is-in > * { animation: revealInChild 0.5s var(--ease-out) backwards; }

.js .grid.reveal.is-in > *:nth-child(2), .js .accred.reveal.is-in > *:nth-child(2),
.js .faq.reveal.is-in > *:nth-child(2), .js .process.reveal.is-in > *:nth-child(2) { animation-delay: 60ms; }
.js .grid.reveal.is-in > *:nth-child(3), .js .faq.reveal.is-in > *:nth-child(3),
.js .process.reveal.is-in > *:nth-child(3) { animation-delay: 120ms; }
.js .grid.reveal.is-in > *:nth-child(4), .js .faq.reveal.is-in > *:nth-child(4),
.js .process.reveal.is-in > *:nth-child(4) { animation-delay: 180ms; }
.js .grid.reveal.is-in > *:nth-child(5), .js .faq.reveal.is-in > *:nth-child(5),
.js .process.reveal.is-in > *:nth-child(5) { animation-delay: 240ms; }
.js .grid.reveal.is-in > *:nth-child(6), .js .faq.reveal.is-in > *:nth-child(6) { animation-delay: 300ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal.is-in,
  .js .grid.reveal.is-in > *, .js .accred.reveal.is-in > *,
  .js .faq.reveal.is-in > *, .js .process.reveal.is-in > * { animation: none; }
}

.u-mt-l { margin-top: clamp(2.25rem, 4.5vw, 4rem); }
.u-mb-l { margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }


/* ------------------------------------------------ enquiry type switch -- */
/* A quote and a plain question are different errands. The switch decides
   which, and the specification fields step aside when they are not wanted. */

.switch { border: 0; padding: 0; margin: 0 0 2rem; }
.switch__legend {
  font-family: var(--font-brand); font-size: 0.72rem;
  letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--navy-70); padding: 0; margin-bottom: 0.85rem;
}
.switch__options { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.switch__option { position: relative; }
.switch__option input {
  position: absolute; opacity: 0; width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.switch__option span {
  display: block;
  font-family: var(--font-brand); font-size: 0.72rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--navy-70);
  border: 1px solid var(--navy-30);
  padding: 0.72rem 1.25rem;
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.switch__option input:checked + span {
  background: var(--navy); border-color: var(--navy); color: var(--white);
}
.switch__option input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }
.switch__option input:not(:checked):hover + span { border-color: var(--navy); color: var(--navy); }

.field__opt {
  font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--navy-50); text-transform: uppercase;
}

/* Hidden rather than removed, so a half-filled answer survives a change of
   mind; the submit handler clears them so nothing stale is sent. */
form[data-mode="question"] .field--spec { display: none; }

/* Headings run at a line-height below 1, so the element box stops short of
   the descenders. Any space set after one therefore reads about 20px tighter
   than it measures, which shows most where a heading sits directly on top of
   a ruled grid. Give the box back the depth its ink actually occupies. */
.u-mb-l > .headline:last-child,
.u-mb-l > .subhead:last-child { padding-bottom: 0.24em; }

/* A ruled grid directly under an intro block read as an underline to the
   last line of copy. Padding, not margin, so it cannot collapse away. */
.u-mb-l + .grid,
.u-mb-l + .process,
.u-mb-l + .accred { padding-top: 1.15rem; }

/* No single-word last lines in display and lead copy. */
.subhead, .standfirst, .hero__stand, .pullquote, .cell h3, .accred__panel h3 {
  text-wrap: balance;
}

/* Inside a cell the heading already has the cell's own rule above it, so a
   second rule under it brackets the heading in lines. The chips carry their
   own borders and need no divider. */
.cell .formats { border-top: 0; padding-top: 0; margin-top: 1.1rem; }

/* ------------------------------------------------------- quick bar -- */
/* Phone only. The masthead already carries these on a wider screen, and
   the contact page has both in the copy, so it is left out there. */

.quickbar { display: none; }

@media (max-width: 700px) {
  .quickbar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 95;
    background: rgba(183, 198, 222, 0.28);
    border-top: 1px solid rgba(183, 198, 222, 0.28);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .quickbar__btn {
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-family: var(--font-brand); font-size: 0.74rem;
    letter-spacing: 0.15em; text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 0.75rem;
    background: var(--navy); color: var(--white);
    min-height: 52px;
  }
  .quickbar__btn svg { width: 17px; height: 17px; flex: none; }
  .quickbar__btn--solid { background: var(--white); color: var(--navy); }

  /* Clear the bar so the footer is never trapped underneath it. */
  .foot { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------- articles -- */

/* Wider columns than the service cards use: an article is carried by its
   picture, and at 19rem the picture was too small to carry anything. */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: clamp(2.25rem, 4vw, 3.5rem); }
@media (max-width: 620px) { .posts { grid-template-columns: 1fr; } }
.post__link { display: block; text-decoration: none; color: inherit; }
.post__media {
  display: block; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--mill); border: 1px solid var(--navy-30); margin-bottom: 1.15rem;
}
.post__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s var(--ease-out); }
.post__link:hover .post__media img { transform: scale(1.03); }
.post__meta {
  display: block; font-family: var(--font-brand); font-size: 0.7rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--navy-50); margin-bottom: 0.6rem;
}
.post__title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.15; margin: 0 0 0.7rem; text-wrap: balance; }
.post__excerpt { color: var(--navy-70); margin: 0 0 1rem; }
.post__link:hover .post__title { text-decoration: underline; text-underline-offset: 4px; }

.page-head--article .label a { color: inherit; }
.article__date { font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pale); margin-top: 1.1rem; }
.article > p { max-width: 62ch; }
/* The whole picture, never a crop. A 5:4 photograph at full page width
   would stand over 1100px tall, so the strip is capped and the image sits
   inside it complete. The field behind is set close to the dark ground of
   the photographs themselves, so the join does not read as a letterbox. */
.article__hero { margin: 0 0 2.25rem; }
.article__hero img { width: 100%; height: auto; display: block; border: 1px solid var(--navy-30); }
.article__list { margin: 0 0 1.35rem 1.1rem; padding: 0; color: var(--navy-70); max-width: 62ch; }
.article__list li { margin-bottom: 0.4rem; }

/* ---------------------------------------------------------- admin -- */

.admin { padding-block: clamp(7rem, 12vw, 10rem) clamp(3rem, 6vw, 5rem); }
.admin-gate { max-width: 26rem; }
.admin-head { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2.5rem; }
.admin-cols { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 3rem); align-items: start; }
@media (max-width: 900px) { .admin-cols { grid-template-columns: 1fr; } }

.admin-list { display: flex; flex-direction: column; gap: 1px; background: var(--navy-30); border: 1px solid var(--navy-30); }
.admin-item { display: block; width: 100%; text-align: left; background: var(--white); border: 0; padding: 0.95rem 1.05rem; cursor: pointer; }
.admin-item:hover { background: var(--mill); }
.admin-item__title { display: block; font-family: var(--font-brand); font-size: 1rem; color: var(--navy); margin-bottom: 0.25rem; }
.admin-item__meta { display: block; font-size: 0.78rem; color: var(--navy-50); }

.admin-editor { border: 1px solid var(--navy-30); padding: clamp(1.25rem, 2.5vw, 2rem); }
.admin-editor .field { margin-bottom: 1.35rem; }
.admin-editor code { background: var(--mill); padding: 0.1rem 0.3rem; font-size: 0.92em; }
.admin-label { display: block; font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.17em; text-transform: uppercase; color: var(--navy-70); margin-bottom: 0.6rem; }

.admin-upload { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 0.9rem 0 1rem; }
.admin-upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.admin-upload__btn {
  font-family: var(--font-brand); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  border: 1px solid var(--navy); color: var(--navy); padding: 0.65rem 1.2rem; cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}
.admin-upload__btn:hover { background: var(--navy); color: var(--white); }
.admin-upload input[type="file"]:focus-visible + .admin-upload__btn { outline: 2px solid var(--navy); outline-offset: 3px; }

.admin-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.8rem; }
.admin-thumb { margin: 0; border: 1px solid var(--navy-30); background: var(--mill); }
.admin-thumb.is-header { border-color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.admin-thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.admin-thumb figcaption { display: flex; }
.admin-thumb figcaption button {
  flex: 1; font-family: var(--font-brand); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--white); border: 0; border-top: 1px solid var(--navy-30); padding: 0.5rem 0.2rem; cursor: pointer; color: var(--navy);
}
.admin-thumb figcaption button + button { border-left: 1px solid var(--navy-30); }
.admin-thumb figcaption button:hover { background: var(--navy); color: var(--white); }

/* Pictures set inside an article body. */
.article__figure { margin: 2.25rem 0; }
.article__figure img { width: 100%; height: auto; display: block; border: 1px solid var(--navy-30); }
.article__figure figcaption { font-size: 0.86rem; color: var(--navy-50); margin-top: 0.7rem; }

/* Quiet way in for the client team; deliberately not in the main nav. */
/* Its own line under the copyright and the certification marks, rather than
   trailing the legal text. flex-basis forces the wrap in .foot__bottom. */
.foot__staffrow { flex-basis: 100%; order: 3; }
.foot__staff { color: var(--navy-50); text-decoration: none; }
.foot__staff:hover { color: var(--pale); text-decoration: underline; text-underline-offset: 3px; }
.admin-check { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-body); font-size: 1rem; color: var(--press-black); text-transform: none; letter-spacing: 0; }
.admin-check input { width: auto; }

.admin-signout {
  font-family: var(--font-brand); font-size: 0.78rem; letter-spacing: 0.06em;
  background: transparent; border: 0; color: var(--pale); cursor: pointer; padding: 0;
}
.admin-signout:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.btn--danger { border-color: #8B2130; color: #8B2130; }
.btn--danger:hover { background: #8B2130; color: var(--white); }

/* --------------------------------------------------------- careers -- */

.vacancy { border: 1px solid var(--navy-30); padding: clamp(1.5rem, 3vw, 2.5rem); }
.vacancy + .vacancy { margin-top: 1.25rem; }
.vacancy h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); margin: 0 0 0.75rem; }
.vacancy p { color: var(--navy-70); margin: 0; max-width: 62ch; }
.vacancy--none { background: var(--mill); border-style: dashed; }
/* A subheading inside a card must not outsize the card title above it */
.vacancy .subhead { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); margin-top: 1.6rem; }
.vacancy .article__list { margin-top: 0.7rem; }

/* -------------------------------------------------- admin tabs -- */

.admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.admin-tab {
  font-family: var(--font-brand); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--navy-30);
  color: var(--navy-70); padding: 0.7rem 1.3rem; cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease), border-color 0.18s var(--ease);
}
.admin-tab:hover { border-color: var(--navy); color: var(--navy); }
.admin-tab[aria-selected="true"] { background: var(--navy); border-color: var(--navy); color: var(--white); }

/* A vacancy on the public careers page. */
.vacancy__facts {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem;
  margin: 0 0 1.1rem; padding: 0;
}
.vacancy__facts li {
  font-family: var(--font-brand); font-size: 0.68rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--navy-70); border: 1px solid var(--navy-30);
  padding: 0.3rem 0.6rem;
}
.vacancy__summary { font-size: 1.08rem; color: var(--navy); margin-bottom: 1.25rem; }
.vacancy__closes {
  margin-top: 1.25rem; font-family: var(--font-brand);
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-50);
}