/* Global Seafood Partners
   Built to gsp-site/boards/ at 1440 and 390, and to section 4 of
   brand/GSP-BRAND-SPEC.md. The boards are two fixed mocks; this is the one
   responsive page they describe, so the breakpoint is where the phone board's
   decisions take over rather than where a device happens to sit. */

:root {
  --high-tide: #0864E0;
  --high-tide-hover: #0858C8;
  --mussel: #FF5A2A;
  --wet-slate: #2A2A2A;
  --sea-salt: #F6F7F7;
  /* Backgrounds only. Not a text colour and not a border: it is the lightest
     thing in the kit and nothing legible sits on it but Wet Slate. */
  --sea-tint: #E6EFFC;
  --white: #FFFFFF;
  --line: #D5D8D8;
  --hush: #4A4A4A;
  --rule-dark: #444444;
  --footer-dim: #BFC4C4;
  --pad: 72px;
}

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

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

body {
  margin: 0;
  background: var(--white);
  color: var(--wet-slate);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

a { color: var(--high-tide); }
/* A button is not a link with a colour. The site's link hover used to reach
   into every button that happened to be an anchor and repaint its text
   #0858C8 on top of whatever fill it had. The footer credit is the same
   case: it is a pill that fills white and turns Wet Slate, and
   `a:not(.btn):hover` outranks `.calo-credit:hover` by one pseudo-class, so
   without naming it here its text and arrow came up blue on a white pill. */
a:not(.btn):not(.calo-credit):hover { color: var(--high-tide-hover); }
button, input, textarea { font-family: inherit; }
img, video { display: block; }

/*
  No play button over the hero.

  iOS paints its own start-playback control on top of an autoplaying video
  when it decides the clip is "not playing yet", which puts a grey circle in
  the middle of the harbor. The clip is decoration behind a headline; there
  is nothing for anybody to press.
*/
video::-webkit-media-controls,
video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

* { text-wrap: pretty; }
h1, h2, h3, blockquote { text-wrap: balance; }

/* Headlines are Archivo Narrow 600, uppercase, everywhere. */
h1, h2, h3, .display {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 0.95;
  margin: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--white); color: var(--wet-slate); padding: 12px 18px;
}
.skip:focus { left: 12px; top: 12px; }

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

.hdr {
  height: 92px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--pad) 0 60px; background: var(--wet-slate);
}

/*
  Pinned, on a desktop only.

  The underline that says which section you are reading was correct from the
  first day and invisible from the first day: the header scrolled away with
  the hero, so by the time you were inside What We Do there was no nav left
  to mark. The header stays; the body is pushed down by exactly its height,
  and anchors land below it rather than under it.

  A phone has no nav in the header to keep, only a burger, so it keeps
  scrolling away and keeps the 580px hero it was drawn with.
*/
@media (min-width: 900px) {
  html { scroll-padding-top: 92px; }
  body { padding-top: 92px; }
  .hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; }
}
.hdr__mark img { height: 80px; width: auto; }
.nav { display: flex; align-items: center; gap: 40px; }
.nav a:not(.btn) {
  position: relative; color: var(--white); text-decoration: none;
  font-size: 17px; font-weight: 500; padding-bottom: 6px;
}
.nav a { text-decoration: none; }

/*
  The underline slides in from the left rather than appearing.
  `scaleX` on a pseudo-element, so nothing in the row moves when it arrives:
  a border that appears on hover pushes the text up by two pixels, and four
  links doing that as the pointer crosses them is a nav that wobbles.

  The same rule carries the current page and the section being read, so the
  mark that says "you are here" and the mark that says "this is what you are
  pointing at" are the same mark.
*/
.nav a:not(.btn)::after,
.drawer nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--white); transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.nav a:not(.btn):hover::after,
.nav a:not(.btn):focus-visible::after,
.nav a:not(.btn)[aria-current="page"]::after,
.nav a:not(.btn).is-here::after,
.drawer nav a:hover::after,
.drawer nav a:focus-visible::after,
.drawer nav a[aria-current="page"]::after,
.drawer nav a.is-here::after { transform: scaleX(1); }
.nav__burger { display: none !important; }

/* A button is Archivo Narrow 600, uppercase, letter-spaced. One shape, four
   fills, so the site never grows a fifth kind of button. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  text-decoration: none; border: 0; cursor: pointer; white-space: nowrap;
}
.btn--sm    { height: 46px; padding: 0 24px; font-size: 17px; }
.btn--md    { height: 58px; padding: 0 32px; font-size: 19px; }
.btn--lg    { height: 62px; padding: 0 36px; font-size: 20px; }
.btn--white { background: var(--white); color: var(--wet-slate); }
.btn--blue  { background: var(--high-tide); color: var(--white); }
.btn--slate { background: var(--wet-slate); color: var(--white); }
.btn--mussel{ background: var(--mussel); color: var(--wet-slate); }
.btn--onblue{ background: var(--white); color: var(--high-tide); }
.btn--ghost {
  background: transparent; color: var(--white);
  border: 2px solid var(--white); padding: 0 28px;
}
.btn--outline {
  background: transparent; color: var(--wet-slate);
  border: 2px solid var(--wet-slate); height: 50px; padding: 0 20px; font-size: 17px;
}

/*
  One hover, three cases, and the arrow follows the text because it inherits
  currentColor.

    filled            -> White fill, Wet Slate text
    already white     -> High Tide fill, White text
    outline and ghost -> White fill, Wet Slate text

  Every button carries the transition rather than each variant declaring its
  own, which is how two of them ended up without one.
*/
.btn { transition: background .25s ease, color .25s ease, border-color .25s ease; }

.btn--blue:hover, .btn--blue:focus-visible,
.btn--slate:hover, .btn--slate:focus-visible,
.btn--mussel:hover, .btn--mussel:focus-visible {
  background: var(--white); color: var(--wet-slate);
}

/* White button on the Wet Slate header: High Tide reads against it. */
.btn--white:hover, .btn--white:focus-visible {
  background: var(--high-tide); color: var(--white);
}

/*
  Three buttons that stand on a ground White cannot be seen against: the band
  button on High Tide, Send on the white form, and the card buttons on white
  cards. They flip the other way.
*/
.btn--onblue:hover, .btn--onblue:focus-visible,
.pop__send:hover, .pop__send:focus-visible,
.btn--outline:hover, .btn--outline:focus-visible {
  background: var(--wet-slate); color: var(--white); border-color: var(--wet-slate);
}
.btn--ghost:hover, .btn--ghost:focus-visible {
  background: var(--white); color: var(--wet-slate); border-color: var(--white);
}

/* The arrow slides 6px on hover. A small cue that the button goes somewhere. */
.go { display: inline-block; transition: transform .25s ease; }
a:hover .go, button:hover .go { transform: translateX(6px); }

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

.hero { position: relative; height: 700px; background: var(--wet-slate); color: var(--white); overflow: hidden; }
/*
  No scale-up. The clip is 1440x810 and was being magnified 1.25x to fill a
  1440x700 band, which threw away a quarter of its resolution on the one
  moving thing on the page. object-position keeps the same anchor, so the
  horizon sits where it sat; the frame is simply wider than it was.
*/
.hero__media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 9% 5%;
}
/* Much lighter than the first build, and clear under the nav. */
.hero__wash {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(42,42,42,0.36) 0%, rgba(42,42,42,0.12) 40%, rgba(42,42,42,0) 65%);
}
.hero__body {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: center; gap: 28px; padding: 0 var(--pad) 120px;
}
.hero h1 { font-size: 104px; line-height: 0.92; color: var(--white); }
.hero h1 span { display: block; }
.hero__sub { margin: 0; font-size: 26px; line-height: 1.4; color: var(--white); max-width: 720px; }
.hero__acts { display: flex; align-items: center; gap: 16px; padding-top: 8px; flex-wrap: wrap; }

/* --------------------------------------------------------------- services */

.services { background: var(--sea-salt); padding: 0 var(--pad) 136px; position: relative; z-index: 1; display: flex; flex-direction: column; gap: 72px; }
/*
  The one module on the site that sits on top of a video.

  Safari on iPhone will paint a video over the thing in front of it: the
  video gets its own compositing layer, the card does not, and the card
  loses. Giving the card a layer of its own - a stacking context from
  position and z-index, and translateZ to put it on the GPU beside the
  video - settles the order.
*/
.pitch {
  margin-top: -120px; display: grid; grid-template-columns: minmax(0, 1fr) 380px;
  background: var(--white); box-shadow: 0 10px 30px rgba(42,42,42,0.08);
  position: relative; z-index: 3; transform: translateZ(0);
}
.pitch__say {
  position: relative; overflow: hidden; padding: 72px var(--pad) 76px;
  border-top: 4px solid var(--high-tide);
  display: flex; flex-direction: column; justify-content: center; gap: 28px;
}
/* The globe turns once every four minutes. Barely noticeable on purpose. */
.pitch__turn {
  position: absolute; left: -170px; bottom: -230px; width: 580px; height: 580px;
  opacity: 0.08; animation: gspTurn 240s linear infinite;
}
.pitch__say p {
  position: relative; margin: 0;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 44px; line-height: 1.12; letter-spacing: -0.005em; max-width: 820px;
}
.pitch__where { padding: 48px 44px; background: var(--sea-salt); border-top: 4px solid var(--wet-slate); display: flex; flex-direction: column; justify-content: center; }
.pitch__where h2 { font-size: 16px; font-family: 'Archivo', system-ui, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--hush); margin: 0 0 6px; }
.pitch__where li {
  display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line);
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 24px; text-transform: uppercase;
}
.pitch__where ul { list-style: none; margin: 0; padding: 0; }
.pitch__where li:last-child { border-bottom: 0; }
.pitch__where li::before { content: ''; width: 12px; height: 12px; border-radius: 6px; background: var(--mussel); flex-shrink: 0; }
.pitch__markets-phone { display: none; }

.what { display: flex; flex-direction: column; gap: 44px; }
.what > h2 { font-size: 64px; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.tabs { display: none; }

.side {
  position: relative; display: flex; flex-direction: column; overflow: hidden; color: var(--white);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}
.side--prod { background: var(--high-tide); }
.side--buy  { background: var(--wet-slate); }
/*
  Pick your side: yours rises, as one piece.

  It used to also grow an orange foot, drawn with an inset shadow along the
  bottom edge. Two things already carry the orange on this page - the dots in
  Home markets and the top edge of a partner card - and a line that appears
  under a panel only while the pointer is on it is a third meaning for the
  same colour. The lift and the shadow say "this one" on their own.

  Before that it blurred and faded the OTHER panel to 0.35, which reads as
  the page breaking rather than as a choice.
*/
@media (hover: hover) and (min-width: 900px) {
  .sides .side:hover, .sides .side:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(42, 42, 42, .18);
  }
}
.side__shot { position: relative; height: 420px; flex-shrink: 0; overflow: hidden; }
.side__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The Armando, the blue boat with the yellow nets. 1200x1800, which is a
   shade over the 1264px this panel asks for on a 2x screen, so `cover`
   scales it down rather than up. The first export was a 500px copy and it
   showed: the rigging came out as mush. No scale() on top of this one -
   the earlier 1.05 stacked on cover's own enlargement and only cost sharpness. */
.side--prod .side__shot img { object-position: 45% 60%; }
.side--buy  .side__shot img { object-position: 50% 65%; }
.side__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 75%; background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.35) 45%, rgba(20,20,20,0.78) 100%); }
.side__cap { position: absolute; left: 64px; right: 64px; bottom: 44px; display: flex; flex-direction: column; gap: 14px; }
.side__cap h3 { font-size: 56px; color: var(--white); text-shadow: 0 1px 12px rgba(0,0,0,0.35); letter-spacing: 0; }
.side__cap p { margin: 0; font-size: 22px; line-height: 1.45; max-width: 520px; }
.side__list { flex-grow: 1; display: flex; flex-direction: column; gap: 32px; padding: 28px 64px 52px; }
.side__rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 1px solid var(--rule); }
.row:last-child { border-bottom: 1px solid var(--rule); }
.side--prod { --rule: #4D95DA; }
.side--buy  { --rule: #555555; }
.row__t { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 28px; text-transform: uppercase; }
.row__d { font-size: 18px; line-height: 1.5; }
.row > div { display: flex; flex-direction: column; gap: 4px; }
.side__list .btn { margin-top: auto; align-self: flex-start; }

/* --------------------------------------------------------------- partners */

.partners { padding: 128px var(--pad); background: var(--wet-slate); display: flex; flex-direction: column; gap: 56px; }
.partners h2 { font-size: 64px; color: var(--white); }
.partners__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.card {
  display: flex; flex-direction: column; gap: 14px; padding: 36px 32px 32px;
  border-top: 4px solid var(--mussel); background: var(--white);
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease;
}
/* The same lift as a What We Do panel, in a shadow that can be seen against
   Wet Slate rather than against the light ground upstairs. A card is swiped
   on a phone, where a hover state is something a finger leaves behind. */
@media (hover: hover) and (min-width: 900px) {
  .card:hover, .card:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  }
}
.card h3 { font-size: 34px; line-height: 1; letter-spacing: 0; }
.card__what { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 600; }
.card__what::before { content: ''; width: 9px; height: 9px; border-radius: 5px; background: var(--mussel); flex-shrink: 0; }
.card__d { margin: 0 0 12px; font-size: 18px; line-height: 1.6; color: var(--hush); }
.card .btn { margin-top: auto; align-self: flex-start; }

/* ---------------------------------------------------------------- mission */

.mission__shot { position: relative; height: 680px; overflow: hidden; }
.mission__shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.mission__say { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 96px; padding: 104px var(--pad) 128px; align-items: start; }
.mission__say h2 { font-size: 64px; }
.mission__body { display: flex; flex-direction: column; gap: 32px; padding-top: 6px; }
.quote {
  margin: 0; font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 38px; line-height: 1.15; color: var(--high-tide);
}
.mission__by { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.mission__by p { margin: 0; font-size: 17px; font-weight: 500; }
/* A text link, not a button: the general link hover is right here. The border
   follows the text so the two halves change together. */
.readmore:hover { border-bottom-color: var(--high-tide-hover); }
.readmore {
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 4px;
  border-bottom: 2px solid var(--high-tide); color: var(--high-tide); text-decoration: none;
  transition: color .25s ease, border-color .25s ease;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 17px; letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------------------------------------------------------------- contact */

.band { padding: 128px var(--pad); background: var(--high-tide); color: var(--white); position: relative; overflow: hidden; }
.band__turn { position: absolute; right: -40px; top: -110px; width: 720px; height: 720px; opacity: 0.12; }
.band__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.band h2 { font-size: 68px; color: var(--white); }
.band h2 span { display: block; }
.band p { margin: 0; font-size: 22px; line-height: 1.5; }
.band .btn { margin-top: 14px; }

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

.ftr { background: var(--wet-slate); color: var(--sea-salt); padding: 72px var(--pad) 64px 56px; display: flex; flex-direction: column; gap: 56px; }
.ftr__grid { display: grid; grid-template-columns: 360px repeat(3, minmax(0, 1fr)); gap: 48px; align-items: start; }
.ftr__mark { height: 104px; width: auto; }
.ftr__col { display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; padding-top: 18px; }
.ftr__col h2 { font-size: 16px; letter-spacing: 0.08em; color: var(--white); }
.ftr__col a { color: inherit; text-decoration: none; }
/* The copyright line and who built it, on one rule, centred against each
   other. On a phone they stack and both sit against the left edge. */
.ftr__legal {
  padding: 28px 0 0 16px; border-top: 1px solid var(--rule-dark);
  font-size: 14px; color: var(--footer-dim);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}

/* "Created by CALO&CO", footer of globalseafood.partners */
.calo-credit{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;box-sizing:border-box;border:1px solid rgba(246,247,247,.28);border-radius:6px;background:transparent;color:#BFC4C4;font-family:'Archivo',system-ui,sans-serif;font-size:13px;line-height:1;text-decoration:none;white-space:nowrap;transition:background .2s ease,border-color .2s ease,color .2s ease}
.calo-credit b{font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;color:#FFFFFF;transition:color .2s ease}
.calo-credit svg{width:12px;height:12px;stroke:currentColor;transition:transform .2s ease}
.calo-credit:hover,.calo-credit:focus-visible{background:#FFFFFF;border-color:#FFFFFF;color:#2A2A2A;outline:none}
.calo-credit:hover b,.calo-credit:focus-visible b{color:#2A2A2A}
.calo-credit:hover svg{transform:translate(2px,-2px)}

/* ------------------------------------------------------------------ about */

.about__hero { position: relative; height: 600px; overflow: hidden; background: var(--wet-slate); }
.about__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.about__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.35) 45%, rgba(20,20,20,0.8) 100%); }
.about__cap { position: absolute; left: var(--pad); right: var(--pad); bottom: 64px; display: flex; flex-direction: column; gap: 14px; }
.eyebrow { margin: 0; font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.about__cap h1 { font-size: 88px; color: var(--white); text-shadow: 0 1px 14px rgba(0,0,0,0.35); }
.story { padding: 112px var(--pad) 128px; display: flex; flex-direction: column; align-items: center; }
.story__col { width: min(760px, 100%); display: flex; flex-direction: column; gap: 22px; }
.story__col .quote { font-size: 36px; }
.story__by { margin: 0; padding-bottom: 32px; border-bottom: 1px solid #E4E6E6; font-size: 17px; font-weight: 500; }
.story__col p:not(.quote):not(.story__by) { margin: 0; font-size: 19px; line-height: 1.75; }

/* ---------------------------------------------------------------- pop-up */

.pop[hidden] { display: none; }
.pop { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 24px; }
.pop__scrim { position: absolute; inset: 0; background: var(--wet-slate); opacity: 0.8; }
.pop__card {
  position: relative; width: min(680px, 100%); max-height: min(720px, calc(100dvh - 48px));
  background: var(--white); color: var(--wet-slate); box-shadow: 0 24px 60px rgba(0,0,0,.35);
  display: grid; grid-template-rows: auto minmax(0, 1fr);
}
.pop__head { background: var(--high-tide); color: var(--white); padding: 28px 36px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.pop__head img { position: absolute; right: -60px; top: -60px; width: 260px; height: 260px; opacity: 0.12; }
.pop__head h2 { position: relative; font-size: 40px; line-height: 1; color: var(--white); letter-spacing: 0; }
.pop__head p { position: relative; margin: 0; font-size: 16px; }
.pop__x { position: absolute; right: 16px; top: 16px; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pop__form { padding: 28px 36px 32px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.pop__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 500; }
.field input, .field textarea { border: 1px solid var(--footer-dim); font-size: 16px; color: var(--wet-slate); background: var(--white); }
.field input { height: 48px; padding: 0 12px; }
.field textarea { padding: 12px; resize: vertical; min-height: 150px; }
.pop__heard small { font-size: 13px; font-weight: 400; color: var(--hush); }
.pop__heard select { height: 48px; padding: 0 12px; border: 1px solid var(--footer-dim); font: inherit; font-size: 16px; font-weight: 400; color: var(--wet-slate); background: var(--white); }
.pop__heard select:focus { outline: 2px solid var(--high-tide); outline-offset: 0; border-color: var(--high-tide); }
.field input:focus, .field textarea:focus { outline: 2px solid var(--high-tide); outline-offset: 0; border-color: var(--high-tide); }
.pop__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 6px; flex-wrap: wrap; }
.pop__note { font-size: 13px; color: var(--hush); margin: 0; }
.pop__note.ok { color: #0E7A3C; }
.pop__note a { color: var(--high-tide); }
.pop__send { height: 54px; padding: 0 32px; font-size: 18px; }
.pop__send[disabled] { opacity: .55; cursor: default; }
/* The honeypot. Off screen rather than display:none, which some bots skip. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------- the drawer */

.drawer[hidden] { display: none; }
.drawer { position: fixed; inset: 0; z-index: 55; background: var(--wet-slate); display: flex; flex-direction: column; padding: 20px; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; }
.drawer__top img { height: 68px; }
.drawer nav { display: flex; flex-direction: column; gap: 4px; padding-top: 24px; }
.drawer nav a {
  position: relative; color: var(--white); text-decoration: none;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 32px; text-transform: uppercase; padding: 14px 0 16px;
  box-shadow: inset 0 -1px 0 var(--rule-dark);
}
.drawer .btn { margin-top: 28px; }
.icon-btn { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--white); cursor: pointer; }

/* -------------------------------------------------------------- the motion */

@keyframes gspTurn { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gspRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* On load, once. Each line rises 24px and fades in, 0.11s apart. */
.rise { animation: gspRise .6s cubic-bezier(.16, 1, .3, 1) both; }
.rise--2 { animation-delay: .11s; }
.rise--3 { animation-delay: .22s; }
.rise--4 { animation-delay: .33s; }

/*
  As each section scrolls into view, once. Never replays.

  The end state is declared rather than held by `forwards`, and that is
  load-bearing rather than tidy. A filled animation keeps its grip on every
  property it touched, and it beats an ordinary rule in the cascade - so
  `transform: none` from the finished rise was quietly overriding the hover
  lift on all four panels and cards. Their shadow arrived and they never
  moved. Declaring the end state lets the animation let go of transform the
  moment it finishes.
*/
.reveal { opacity: 0; transform: translateY(24px); }
.reveal.seen { opacity: 1; transform: none; animation: gspRise .6s cubic-bezier(.16, 1, .3, 1); }

@media (prefers-reduced-motion: reduce) {
  .pitch__turn { animation: none; }
  .rise, .reveal, .reveal.seen { animation: none; opacity: 1; transform: none; }
  .card, .go, .side, .btn--ghost, .btn--outline { transition: none; }
  .hero__media { display: none; }
  /* The shadow still says which one you are on. Nothing moves to say it. */
  .sides .side:hover, .sides .side:focus-within,
  .card:hover, .card:focus-within { transform: none; }
}

/* ------------------------------------------------------------------ phone */

@media (max-width: 899px) {
  :root { --pad: 20px; }

  .hdr { height: 76px; padding: 0 16px 0 10px; }
  .hdr__mark img { height: 68px; }
  .nav { display: none; }
  .nav__burger { display: flex !important; }

  .hero { height: 580px; }
  /* The phone file is cut portrait for this band, so it is framed on its own
     middle. 35% was chosen for the old landscape clip, which no longer
     exists. */
  .hero__media { object-position: 50% 50%; }
  .hero__wash { background: linear-gradient(180deg, rgba(42,42,42,0) 0%, rgba(42,42,42,0.2) 40%, rgba(42,42,42,0.62) 78%, rgba(42,42,42,0.74) 100%); }
  .hero__body { justify-content: flex-end; gap: 18px; padding: 0 20px 96px; }
  .hero h1 { font-size: 40px; line-height: 0.94; }
  .hero__sub { font-size: 18px; line-height: 1.5; }
  .hero__acts { padding-top: 6px; }
  .hero__acts .btn { width: 100%; height: 56px; font-size: 18px; }
  .hero__acts .btn--ghost { display: none; }

  .services { padding: 0 16px 72px; gap: 20px; }
  .pitch { margin-top: -60px; grid-template-columns: minmax(0, 1fr); border-top: 4px solid var(--high-tide); box-shadow: 0 8px 24px rgba(42,42,42,0.08); }
  .pitch__say { padding: 32px 24px 28px; border-top: 0; gap: 18px; }
  .pitch__say p { font-size: 28px; }
  .pitch__turn { display: none; }
  .pitch__where { display: none; }
  .pitch__markets-phone {
    display: flex; align-items: baseline; gap: 8px; margin: 0 24px 28px;
    padding-top: 14px; border-top: 1px solid #E4E6E6; font-size: 13px; line-height: 1.5; color: var(--hush);
  }
  .pitch__markets-phone::before { content: ''; width: 7px; height: 7px; border-radius: 4px; background: var(--mussel); flex-shrink: 0; transform: translateY(-1px); }

  .what { gap: 16px; }
  .what > h2 { font-size: 44px; margin-top: 36px; }
  /* Two tabs instead of hover: a phone has no hover to pick a side with. */
  .tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px; background: var(--white); border: 1px solid var(--line); }
  .tab { height: 50px; border: 0; background: transparent; color: var(--hush); font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; }
  .tab[aria-selected="true"] { color: var(--white); }
  .tab--prod[aria-selected="true"] { background: var(--high-tide); }
  .tab--buy[aria-selected="true"]  { background: var(--wet-slate); }
  .sides { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .side[hidden] { display: none; }
  /* On a phone the panel arrives because a tab was pressed, not because the
     page scrolled, so it does not also fade in. A panel that was display:none
     never starts its animation, which left the Buyers side invisible. */
  .side.reveal, .side.reveal.seen { opacity: 1; transform: none; animation: none; }
  .side__shot { height: 300px; }
  .side--prod .side__shot img { object-position: 45% 60%; }
  .side--buy  .side__shot img { object-position: 50% 58%; }
  .side__fade { height: 80%; background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.35) 45%, rgba(20,20,20,0.8) 100%); }
  .side__cap { left: 24px; right: 24px; bottom: 24px; gap: 10px; }
  .side__cap h3 { font-size: 36px; }
  .side__cap p { font-size: 18px; line-height: 1.5; }
  .side__list { gap: 28px; padding: 12px 24px 32px; }
  .row { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 24px 0; }
  .row__ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; }
  .side--prod .row__ico { background: #1F7AD3; }
  .side--buy  .row__ico { background: #3A3A3A; }
  .row__t { font-size: 22px; }
  .row__d { font-size: 16px; }
  .side__list .btn { align-self: stretch; height: 56px; font-size: 18px; }

  .partners { padding: 72px 0 72px 20px; gap: 24px; }
  .partners h2 { font-size: 40px; }
  /* Swiped, not stacked: two cards in a row you push sideways. */
  .partners__grid { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-right: 20px; -webkit-overflow-scrolling: touch; }
  .card { width: 300px; flex-shrink: 0; scroll-snap-align: start; padding: 26px 22px; gap: 12px; }
  .card h3 { font-size: 28px; }
  .card__what { font-size: 16px; }
  .card__d { font-size: 16px; line-height: 1.55; }
  .card .btn { align-self: stretch; height: 50px; font-size: 16px; }

  .mission__shot { height: 260px; }
  .mission__shot img { object-position: 40% 35%; }
  .mission__say { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 40px 20px 72px; }
  .mission__say h2 { font-size: 44px; }
  .mission__body { gap: 20px; padding-top: 0; }
  .quote { font-size: 26px; }
  .mission__by { flex-direction: column; align-items: stretch; gap: 16px; }
  .readmore { justify-content: center; height: 52px; border: 2px solid var(--high-tide); border-bottom-width: 2px; }

  .band { padding: 72px 20px; gap: 16px; display: flex; flex-direction: column; }
  .band__turn { right: -120px; top: -50px; width: 370px; height: 370px; }
  .band h2 { font-size: 38px; }
  .band p { font-size: 17px; }
  .band .btn { align-self: stretch; height: 56px; font-size: 18px; }

  .ftr { padding: 48px 20px 64px; gap: 16px; font-size: 15px; }
  .ftr__grid { display: flex; flex-direction: column; gap: 16px; }
  .ftr__mark { height: 76px; align-self: flex-start; margin-left: -10px; }
  /* All four columns stack and all four keep their heading. The old footer
     hid two of them and their headings with them, which is why these rules
     said what they said; the new one has no column worth dropping. */
  .ftr__col { padding-top: 0; gap: 8px; }
  .ftr__col h2 { display: block; margin-bottom: 2px; }
  .ftr__legal {
    border-top: 0; padding: 8px 0 0;
    flex-direction: column; align-items: flex-start; gap: 14px;
  }

  .about__hero { height: 380px; }
  .about__hero img { object-position: 40% 50%; }
  .about__fade { height: 75%; background: linear-gradient(180deg, rgba(20,20,20,0) 0%, rgba(20,20,20,0.4) 45%, rgba(20,20,20,0.85) 100%); }
  .about__cap { left: 20px; right: 20px; bottom: 32px; gap: 10px; }
  .eyebrow { font-size: 15px; }
  .about__cap h1 { font-size: 42px; letter-spacing: 0; }
  .story { padding: 48px 20px 72px; }
  .story__col { gap: 20px; }
  .story__col .quote { font-size: 26px; }
  .story__by { font-size: 16px; padding-bottom: 28px; margin-bottom: 12px; }
  .story__col p:not(.quote):not(.story__by) { font-size: 17px; line-height: 1.65; }

  .pop { padding: 0; align-items: stretch; }
  .pop__card { width: 100%; max-height: 100dvh; }
  .pop__head { padding: 20px 20px; }
  .pop__head h2 { font-size: 32px; }
  .pop__form { padding: 20px 20px 28px; }
  .pop__pair { grid-template-columns: minmax(0, 1fr); }
  .pop__foot { flex-direction: column-reverse; align-items: stretch; }
  .pop__send { width: 100%; }
}

/* Between the two boards. Nothing here is a third design; it keeps the
   desktop layout legible while the columns are too narrow for it. */
@media (min-width: 900px) and (max-width: 1200px) {
  :root { --pad: 40px; }
  .hero h1 { font-size: 72px; }
  .hero__sub { font-size: 22px; }
  .pitch { grid-template-columns: minmax(0, 1fr) 300px; }
  .pitch__say { padding: 48px 40px 52px; }
  .pitch__say p { font-size: 34px; }
  .what > h2, .partners h2, .mission__say h2 { font-size: 48px; }
  .side__cap { left: 32px; right: 32px; }
  .side__cap h3 { font-size: 40px; }
  .side__list { padding: 24px 32px 40px; }
  .mission__say { gap: 48px; }
  .quote { font-size: 30px; }
  .band h2 { font-size: 48px; }
  .about__cap h1 { font-size: 60px; }
  .ftr__grid { grid-template-columns: 260px repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* ======================================================================
   Who We Serve, the new footer, and the brand product pages
   ====================================================================== */

/* Screen-reader-only, for a table header that is a column of pictures. */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------- Who We Serve */

/*
  A dropdown that opens on hover AND on click, and closes on Escape.

  Hover alone is unusable with a keyboard and unreachable on a touch screen;
  click alone makes a desktop user press twice to read three links. So the
  trigger is a real <button> with aria-expanded, the pointer opens it through
  the same code the click uses rather than through a :hover rule, and the
  state lives in one place. A CSS-only hover menu cannot tell a screen reader
  it is open.
*/
.menu { position: relative; display: flex; align-items: center; }
.menu__btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0 0 6px; margin: 0;
  color: var(--white); font-size: 17px; font-weight: 500; cursor: pointer;
  position: relative;
}
.menu__btn::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--white); transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease;
}
.menu__btn:hover::after,
.menu__btn:focus-visible::after,
.menu[data-here] .menu__btn::after,
.menu__btn[aria-expanded="true"]::after { transform: scaleX(1); }
.menu__chev { transition: transform .2s ease; flex-shrink: 0; }
.menu__btn[aria-expanded="true"] .menu__chev { transform: rotate(180deg); }

.menu__list {
  position: absolute; top: calc(100% + 10px); left: -16px; z-index: 60;
  margin: 0; padding: 8px 0; list-style: none; min-width: 208px;
  background: var(--white); border-radius: 6px;
  box-shadow: 0 10px 30px rgba(42, 42, 42, 0.22);
}
.menu__list[hidden] { display: none; }
/*
  Equal above and below, so no item sits closer to the edge than its
  neighbour does to the next one.

  Scoped under .nav deliberately. The header's own `.nav a:not(.btn)` paints
  every link in there white, for a dark bar, and it outranks a bare
  `.menu__list a` - so the first build drew three white links on a white
  panel. They were in the DOM and read out correctly to a screen reader, and
  nobody looking at the page could see them.
*/
.nav .menu__list a {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px;
  color: var(--wet-slate); font-size: 16px; font-weight: 400;
  text-decoration: none;
}
/*
  Hover, keyboard focus and the page you are on all look the same on purpose:
  they are one question - is this the row I mean - and three answers to it is
  how a menu starts looking like it has states nobody can name.

  The panel's min-width is wider than the longest label at 600, so the weight
  change cannot widen the panel and make it wobble under the pointer.
*/
.nav .menu__list a:hover,
.nav .menu__list a:focus-visible,
.nav .menu__list a[aria-current="page"] {
  background: var(--sea-tint); color: var(--high-tide); font-weight: 600;
}
/* And no sliding underline in here: that belongs to the bar, not to a list
   of links on white. */
.nav .menu__list a::after { display: none; }

/* The three audience links under a label in the phone drawer. */
.drawer__label {
  margin: 0; font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 15px; color: var(--footer-dim);
}
/*
  The sub-rows carry the same row as the dropdown: icon and label on one
  centre line, 14px between them. The vertical rhythm stays the drawer's own
  - these are 32px uppercase rows with a rule under each, not 16px rows on
  white, and 12px of padding around type that size is a squeeze.
*/
.drawer nav a.drawer__sub {
  display: flex; align-items: center; gap: 14px; padding-left: 14px; padding-right: 14px;
}
/*
  The current page, tinted rather than just recoloured.

  High Tide on Wet Slate is 2.7:1, which is under the 4.5 a body-sized label
  needs and was the drawer saying where you are in a colour some people
  cannot pick out. The same blue on Sea tint is 4.6:1, and it is the
  treatment the dropdown uses for the same state.
*/
.drawer nav a[aria-current="page"] {
  background: var(--sea-tint); color: var(--high-tide);
}

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

.ftr__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.btn--outline-white {
  background: transparent; color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}
.btn--outline-white:hover, .btn--outline-white:focus-visible {
  background: var(--white); color: var(--wet-slate); border-color: var(--white);
}
.ftr__col h2 { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; text-transform: uppercase; }
.ftr__col a:hover, .ftr__col a:focus-visible { color: var(--white); }

/* --------------------------------------------- the blue closing section */

.close { background: var(--high-tide); color: var(--white); padding: 76px var(--pad); }
.close__body { max-width: 1040px; margin: 0 auto; }
.close h2 {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; font-size: 44px; line-height: 1.02; margin: 0 0 14px;
}
.close p { font-size: 19px; line-height: 1.6; margin: 0 0 32px; max-width: 62ch; }
.close__tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.close__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  background: var(--white); border-radius: 8px; padding: 22px 20px;
  text-decoration: none; color: var(--wet-slate);
  transition: transform .2s ease, box-shadow .2s ease;
}
.close__tile:hover, .close__tile:focus-visible {
  transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42, 42, 42, 0.18);
}
/* A blue circle with a white icon in it, on a white tile. */
.close__ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--high-tide); color: var(--white);
}
.close__ico svg { width: 21px; height: 21px; }
.close__t {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; font-size: 18px;
}
.close__line { margin: 28px 0 0; font-size: 17px; }
.close__line a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.close__line span { opacity: .6; padding: 0 6px; }

/* -------------------------------------------------- brand product page */

.bp { padding: 64px var(--pad) 80px; max-width: 1180px; margin: 0 auto; }
.bp__crumb { font-size: 15px; color: var(--hush); margin: 0 0 26px; }
.bp__crumb a { text-decoration: none; }
.bp__crumb span[aria-hidden] { padding: 0 8px; color: var(--line); }
.bp__logo { width: auto; margin: 0 0 20px; }
.bp h1 {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; font-size: 52px; line-height: 1.02; margin: 0 0 10px;
}
.bp__what {
  margin: 0 0 14px; font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: 17px; color: var(--high-tide);
}
.bp__d { margin: 0 0 10px; font-size: 20px; line-height: 1.6; max-width: 66ch; color: var(--hush); }
.bp__intro { margin: 0; font-size: 17px; line-height: 1.6; color: var(--hush); max-width: 66ch; }
.bp__cats { margin: 48px 0 0; display: flex; flex-direction: column; gap: 44px; }
.cat h3 {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; font-size: 24px; margin: 0 0 14px;
  padding-bottom: 10px; border-bottom: 2px solid var(--high-tide);
}
.t { width: 100%; border-collapse: collapse; font-size: 17px; table-layout: fixed; }
/* One set of widths for every category on the page. `table-layout: fixed`
   is what makes them stick: without it a column is only as wide as the
   content asks for, and seven tables ask for seven different things. */
.c-pic     { width: 88px; }
.c-product { width: auto; }
.c-size    { width: 22%; }
.c-pack    { width: 20%; }
.t thead th {
  text-align: left; padding: 10px 16px 10px 0; font-size: 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--hush);
  border-bottom: 1px solid var(--line);
}
.t tbody th, .t tbody td {
  text-align: left; padding: 13px 16px 13px 0; font-weight: 400;
  border-bottom: 1px solid var(--line); vertical-align: middle;
}
.t tbody th { font-weight: 500; }
.t tbody tr:nth-child(odd) { background: var(--sea-salt); }
.t__pic { width: 88px; padding-right: 12px !important; }
/* contain on a dark ground, so nothing is cropped off a product shot. */
.t__pic img {
  width: 72px; height: 72px; object-fit: contain;
  background: #000000; border-radius: 4px;
}
.bp__terms {
  margin: 44px 0 0; padding: 18px 22px; background: var(--sea-tint);
  border-radius: 6px; font-size: 17px; line-height: 1.6; color: var(--wet-slate);
}

/* ------------------------------------------------------------- focus */

/*
  One visible focus ring for everything that takes focus.

  The site had focus-visible styling on some controls and nothing on others,
  so tabbing through a page lost the cursor at the first link that had been
  missed. This is the floor; anything with its own treatment still has it.
*/
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--high-tide);
  outline-offset: 2px;
  border-radius: 2px;
}
.hdr :focus-visible, .drawer :focus-visible, .close :focus-visible, .ftr :focus-visible {
  outline-color: var(--white);
}

@media (max-width: 899px) {
  .close { padding: 56px 20px; }
  .close h2 { font-size: 32px; }
  .close__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .close__tile { padding: 18px 14px; gap: 10px; }
  .close__t { font-size: 15px; }

  .bp { padding: 40px 20px 64px; }
  .bp h1 { font-size: 36px; }
  .bp__d { font-size: 18px; }
  .cat h3 { font-size: 20px; }
  /*
    The table FITS rather than scrolls.

    It scrolled inside its own box first, which clipped the Pack column at
    the screen edge with nothing to say it could be dragged - the same thing
    that makes a preview look broken when what it is showing is correct.
    Product, Size and Pack are three short columns; at 14px with tight
    padding they fit 390 with room to spare, and a long product name wraps
    onto a second line, which costs nothing.
  */
  .cat { overflow-x: visible; }
  .t { font-size: 14px; }
  .t thead th { padding: 8px 8px 8px 0; font-size: 11px; letter-spacing: 0.04em; }
  .t tbody th, .t tbody td { padding: 10px 8px 10px 0; }
  .c-size { width: 26%; }
  .c-pack { width: 22%; }
  .c-pic  { width: 56px; }
  .t__pic { width: 56px; padding-right: 8px !important; }
  .t__pic img { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu__chev, .close__tile { transition: none; }
  .close__tile:hover, .close__tile:focus-visible { transform: none; }
  .menu__btn::after { transition: none; }
}

/* ======================================================================
   The three audience pages
   Ported from the approved mockup. The mockup used container queries at
   900px; this site's breakpoint is already 900px, so the same numbers land
   in the same places and the two can be compared side by side.
   ====================================================================== */

.aud .h1, .aud .h2 {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; text-wrap: balance; margin: 0;
}
.aud .h1 { font-size: 34px; line-height: .95; }
.aud .h2 { font-size: 34px; line-height: .95; }
.aud .h2.blue { color: var(--high-tide); }
.aud .lede { font-size: 17px; line-height: 1.5; color: var(--hush); max-width: 56ch; margin: 0; text-wrap: pretty; }
.aud .lede--dark { color: var(--wet-slate); }
.aud .slate .lede, .aud .tide .lede { color: var(--white); }
.aud .fine { font-size: 14px; color: var(--hush); margin: 0; }
.aud .tide .fine { color: var(--white); }
.aud .tide .fine a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }

.sec { padding: 40px var(--pad); display: flex; flex-direction: column; gap: 20px; }
.sec .in { width: 100%; max-width: 1120px; margin: 0 auto; display: flex; flex-direction: column; gap: 20px; }
.sec.sea { background: var(--sea-tint); }
.sec.slate { background: var(--wet-slate); color: var(--white); }
.sec.tide { background: var(--high-tide); color: var(--white); }
.sec--tight { padding-top: 0; }

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

.ahero {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  /*
    Its own ground and its own ink.

    This was called `.hero` and inherited the homepage's: a 700px slate band
    with white type, built for a video. The H1 survived because it is white
    either way; the breadcrumb and the lede came out dark grey on near-black
    and could not be read at all. The name is the fix - `.hero` on this site
    already means the video band.
  */
  background: var(--white); color: var(--wet-slate);
}
.aud .ahero > img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.aud .ahero .txt { padding: 28px 20px 32px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crumb {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--hush); margin: 0;
}
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--high-tide); }
.aud .btns { display: flex; flex-wrap: wrap; gap: 10px; }
/* The mockup's button, which is the site's button at a smaller size. */
.aud .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 18px; background: var(--high-tide); color: var(--white);
  text-decoration: none; border: 0; height: auto;
}
.aud .btn.out { background: var(--white); color: var(--high-tide); box-shadow: inset 0 0 0 2px var(--high-tide); }
.aud .btn svg { width: 16px; height: 16px; }
.aud .btn:hover, .aud .btn:focus-visible { background: var(--high-tide-hover); color: var(--white); box-shadow: none; }

/* ----------------------------------------------------------- John row */

.jrow { display: flex; gap: 14px; align-items: center; background: var(--wet-slate); color: var(--white); padding: 16px var(--pad); }
.jrow img { width: 72px; height: 72px; object-fit: cover; object-position: center top; flex-shrink: 0; }
.jrow div { display: flex; flex-direction: column; gap: 2px; }
.jrow b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 18px; text-transform: uppercase; }
.jrow span { font-size: 14px; color: #E4E7E9; }

/* -------------------------------------------------- what we do for ... */

.awhat { display: grid; gap: 24px; }
.pimg { width: 100%; aspect-ratio: 8/5; object-fit: cover; object-position: center top; display: block; }
/* The stand-in for a photo that has not arrived. A flat brand tint, not a
   dashed box with a label: this ships to clients, and an empty frame reads
   as a fault rather than as a photo still coming. */
.pimg--tint { background: var(--sea-tint); border: 1px solid rgba(8, 100, 224, .18); }
.items { display: grid; gap: 18px; }
.item { display: flex; gap: 14px; align-items: flex-start; }
.item svg { width: 36px; height: 36px; flex-shrink: 0; color: var(--high-tide); }
.item div { display: flex; flex-direction: column; gap: 3px; }
.item b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.1; text-transform: uppercase; }
.item span { font-size: 15px; line-height: 1.45; color: var(--hush); }

/* -------------------------------------------------------- brand tiles */

.brands { display: grid; gap: 12px; }
.bc { display: flex; flex-direction: column; gap: 12px; padding: 24px 20px; background: var(--wet-slate); color: var(--white); }
/* Straight onto the slate, with nothing behind them. */
.bc img.logo { height: 64px; width: auto; max-width: 70%; object-fit: contain; align-self: flex-start; }
.bc h3 { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 34px; line-height: .92; text-transform: uppercase; color: var(--white); margin: 0; }
.bc p { font-size: 15px; line-height: 1.45; margin: 0; }
.list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.list span {
  display: flex; align-items: center; gap: 8px; color: var(--white);
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 15px; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase;
}
.list span::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mussel); flex-shrink: 0; }
.specs { display: flex; flex-direction: column; background: var(--white); color: var(--wet-slate); border-top: 4px solid var(--high-tide); padding: 2px 14px; }
.specs div { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid #DDE2E6; }
.specs div:last-child { border-bottom: 0; }
.specs b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; }
.specs span { font-size: 15px; }
.strip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.strip::-webkit-scrollbar { display: none; }
/* contain on black, so a product shot is never cropped. */
.strip img { flex: 0 0 72%; width: 72%; aspect-ratio: 4/3; object-fit: contain; display: block; background: #000000; }
.bc__go { align-self: stretch; justify-content: center; }

/* ------------------------------------------------- what we can source */

.src { display: grid; gap: 24px; }
.cats { display: grid; gap: 0; }
.cats .acat { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 2px solid var(--high-tide); }
.cats .acat b {
  display: flex; align-items: center; gap: 10px; color: var(--high-tide);
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 28px; line-height: 1; text-transform: uppercase;
}
.cats .acat b::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--mussel); flex-shrink: 0; }
.cats .acat span { font-size: 15px; line-height: 1.45; }

/* --------------------------------------------------------- the steps */

.steps { display: grid; gap: 0; }
.step { background: var(--white); border-top: 5px solid var(--high-tide); padding: 16px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.step i { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 34px; line-height: .9; font-style: normal; color: var(--high-tide); }
.step b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.05; text-transform: uppercase; }
.step span { font-size: 15px; line-height: 1.45; }
/* Two arrows, and CSS picks. Rotating one would leave a down arrow pointing
   right anywhere the transform is ignored. */
.arrow { display: flex; justify-content: center; padding: 4px 0; color: var(--mussel); }
.arrow svg { width: 26px; height: 26px; }
.arrow .r { display: none; }

.who { background: var(--white); color: var(--wet-slate); border-left: 6px solid var(--high-tide); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.who--boxed { border: 1px solid #DDE2E6; border-left: 6px solid var(--high-tide); }
.who b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; color: var(--high-tide); }
.who span { font-size: 15px; line-height: 1.45; }

/* ------------------------------------------------------------- about */

.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.about__say { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.jphoto { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 20%; display: block; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stats div { display: flex; flex-direction: column; gap: 6px; }
.stats strong { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 54px; line-height: .9; }
.stats span { font-size: 14px; line-height: 1.4; color: #E4E7E9; }
.aquote { background: var(--white); padding: 18px; display: flex; flex-direction: column; gap: 8px; margin: 0; }
.aquote p { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; color: var(--high-tide); margin: 0; }
.aquote span { font-size: 14px; font-weight: 600; color: var(--hush); }

/* -------------------------------------------------- the contact tiles */

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tile {
  background: var(--white); color: var(--wet-slate); padding: 14px;
  display: flex; flex-direction: column; gap: 10px; min-height: 96px;
  justify-content: space-between; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover, .tile:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(42, 42, 42, .22); }
.tile i { width: 36px; height: 36px; border-radius: 50%; background: var(--high-tide); color: var(--white); display: flex; align-items: center; justify-content: center; }
.tile i svg { width: 18px; height: 18px; }
.tile b { font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 17px; line-height: 1.1; text-transform: uppercase; color: var(--high-tide); }

/* ------------------------------------------------- the phone-only bar */

/*
  Hidden on desktop by CSS rather than by scripting, so it is never briefly
  visible while a stylesheet is still on its way. `position: sticky` keeps it
  off the top of the document flow, so it cannot cover the footer's last line.
*/
.s-bar {
  position: sticky; bottom: 0; z-index: 4; display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96); border-top: 1px solid #DDE2E6;
}
.s-bar a {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 8px; background: var(--high-tide); color: var(--white); text-decoration: none;
}
.s-bar a.alt { background: var(--white); color: var(--high-tide); box-shadow: inset 0 0 0 2px var(--high-tide); }
.s-bar svg { width: 18px; height: 18px; }

@media (min-width: 900px) {
  .sec { padding: 80px 48px; gap: 28px; }
  .sec .in { gap: 28px; }
  .aud .h1 { font-size: 64px; }
  .aud .h2 { font-size: 52px; }
  .aud .lede { font-size: 19px; }
  .aud .ahero { grid-template-columns: 1fr 1fr; height: 600px; }
  .aud .ahero > img { height: 600px; aspect-ratio: auto; }
  /* Text first in the source and first on screen; the photo sits on top on a
     phone, which is what `order` has to survive. */
  .aud .ahero .txt { order: -1; padding: 72px 56px 72px 48px; justify-content: center; gap: 22px; }
  .jrow { padding: 20px 48px; }
  .awhat { grid-template-columns: 1fr 1fr; align-items: start; gap: 56px; }
  .awhat .pimg { aspect-ratio: 4/3; }
  .items { grid-template-columns: 1fr; gap: 26px; }
  .brands { grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
  .bc { padding: 36px; }
  .strip { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .strip img { width: 100%; aspect-ratio: 1/1; }
  .cats { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .src { grid-template-columns: 2fr 1fr; gap: 40px; align-items: start; }
  .steps { display: flex; align-items: stretch; gap: 0; }
  .steps .step { flex: 1; }
  .arrow { padding: 0 6px; align-items: center; }
  .arrow .d { display: none; }
  .arrow .r { display: block; }
  .about { grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
  .jphoto { aspect-ratio: 4/5; }
  .stats strong { font-size: 84px; }
  .tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .s-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  .tile:hover, .tile:focus-visible { transform: none; }
}

/* ---------------------------------------------------------------------------
   The producers headline, and the only page that needs its own size.

   "U.S. sales representation for seafood producers" is the longest headline on
   the site, and the half that must not break is "for seafood producers": split
   across two lines it reads as two different claims. `.nw` holds it together
   and the type comes down so that holding it together still fits.

   Placed after the 900px block on purpose. `.aud .h1` is set twice, 34px then
   64px, and this has the same specificity as both, so source order is what
   makes it win at every width. The clamp is the "scaling down on phone" the
   brief asks for: 42px on a desktop, 26px on a narrow phone, and smooth
   between. Checked at 390, 1100 and 1440.
--------------------------------------------------------------------------- */
.nw { white-space: nowrap; }
.aud .h1--tight { font-size: clamp(26px, 3.4vw, 42px); }

/* ---------------------------------------------------------------------------
   "How you buy", as one band.

   A rule above and below rather than a filled panel: this is a statement, not
   a card, and a card invites the eye to look for a control in it. The High
   Tide bar on the left is the only colour, and it does the work the old
   heading did - it says a new thing starts here.

   Two columns that become two rows under 900px. The lead holds its own line
   on a phone, which is why the note's own wrapping is left alone.
--------------------------------------------------------------------------- */
/* --line, not --rule: there is no global --rule. It is set locally by
   .side--prod and friends, so using it here would have drawn no border at
   all on the one page this band appears on. */
.buyband { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.buyband__in { display: grid; gap: 14px; padding-top: 26px; padding-bottom: 26px; border-left: 4px solid var(--high-tide); }
.buyband__lead {
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif; font-weight: 600;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.98;
  font-size: 26px; color: var(--wet-slate); margin: 0; text-wrap: balance;
}
.buyband__note { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.buyband__note b { color: var(--high-tide); font-weight: 700; font-size: 16px; }
.buyband__note span { color: var(--hush); font-size: 16px; line-height: 1.5; text-wrap: pretty; }

@media (min-width: 900px) {
  .buyband__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .buyband__lead { font-size: 32px; }
}

/* ---------------------------------------------------------------------------
   The icon in front of each row in both menus.

   WHY THIS IS NOT WHERE THE ROW IS BUILT ANY MORE

   It used to be. `.menu__list a` set display:flex here and the icons still
   sat high and touched their labels on the live site, because
   `.nav .menu__list a` - two classes and a tag against one and a tag - sets
   `display: block` three hundred lines earlier and outranks it. The anchor
   stayed a block, so the `gap` did nothing and the icon sat on the text
   baseline, which is what "riding high" was. The row is built up there now,
   where the rule that wins is, and this block only sizes and colours the
   icon itself.

   24px, High Tide, in the dropdown and in the phone drawer alike: the drawer
   is the same menu on a phone, and an icon in one and not the other makes
   them look like two different menus.
--------------------------------------------------------------------------- */
.menu__ico { display: block; width: 24px; height: 24px; flex: 0 0 24px; color: var(--high-tide); }
/* `block`, not `inline-flex`: an inline box sits on the text baseline, and
   that baseline drop is the gap that made the icon look misaligned. */
.menu__ico svg { width: 24px; height: 24px; display: block; }

/* ---------------------------------------------------------------------------
   Brand cards and step cards lift like everything else you can press.

   `.tile` and `.close__tile` already did; these two were the panels built
   after that rule was written and nobody went back. The lift is `.sides
   .side`'s rather than `.card`'s: `.card` sits on Wet Slate and carries a
   shadow at .45 alpha to be visible there, which on a light ground reads as a
   smudge.

   Behind the same hover query as the others: a lift that fires on a phone's
   tap is a flicker, not an affordance.
--------------------------------------------------------------------------- */
.bc, .step { transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s ease; }

@media (hover: hover) and (min-width: 900px) {
  .bc:hover, .bc:focus-within,
  .step:hover, .step:focus-within {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(42, 42, 42, .18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bc, .step { transition: none; }
  .bc:hover, .bc:focus-within, .step:hover, .step:focus-within { transform: none; }
}

/* ------------------------------------------- the one-pager download link */

/*
  Under the hero buttons, and again as a full-width tile in the closing
  section. Both are promised by name in John's email, so both are here.

  44px minimum on the phone: it is a link rather than a button, but it is a
  download somebody taps with a thumb, and the rule is about the target and
  not about the markup. `align-self: flex-start` keeps the tap area the width
  of the words instead of the whole hero column, so it never swallows a tap
  meant for the white space beside it.
*/
.onep {
  display: inline-flex; align-items: center; gap: 9px; align-self: flex-start;
  min-height: 44px;
  font-family: 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  font-weight: 600; font-size: 16px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--high-tide); text-decoration: none;
  border-bottom: 2px solid transparent; transition: border-color .2s ease;
}
.onep svg { width: 18px; height: 18px; flex: none; }
.onep:hover, .onep:focus-visible { border-bottom-color: var(--high-tide); }

/* The label does not fit half a grid column at 390px without breaking three
   ways, so it takes the whole row rather than the wording being shortened to
   something the email did not promise. */
.tile--wide {
  grid-column: 1 / -1; min-height: 0; flex-direction: row; align-items: center;
  /* `.tile` sets space-between for its stacked shape, which in a row pushes
     the label to the far edge and leaves a gap nobody meant. */
  justify-content: flex-start; gap: 14px;
}