/* =============================================================
   Nice Pack Limited — site stylesheet
   -------------------------------------------------------------
   To retune the look, change the variables in :root below.
   Everything else derives from them.
   ============================================================= */

/* ---------- Fonts (self-hosted, see /fonts) ---------- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/sora-macron.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-macron.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0112-0113, U+012A-012B, U+014C-014D, U+016A-016B;
}

/* ---------- Design tokens ---------- */
:root {
  /* Palette — brand red sampled from the logo */
  --red: #A42826;
  --red-dark: #7E1D1C;
  --off-white: #FAF6F2;
  --ink: #1C1917;
  --ink-soft: #2A2523;      /* cards on the dark contact section */
  --grey: #6B6461;
  --line: #E7DFD8;          /* borders and dividers (a tint of off-white) */
  --white: #FFFFFF;
  --red-tint: #E8A9A7;      /* light red for text on dark grounds and focus rings */
  --red-pale: #F6E9E8;      /* pale red pill background */

  /* Type */
  --font-heading: "Sora", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Spacing scale */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* Layout */
  --container: 72rem;       /* 1152px */
  --gutter: 1.25rem;
  --radius: 6px;
  --header-h: 5rem;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--off-white);
}
img, svg { display: block; max-width: 100%; height: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.5rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }
p { margin: 0 0 var(--s-4); }
a { color: var(--red); }
a:hover { color: var(--red-dark); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.contact :focus-visible, .footer :focus-visible { outline-color: var(--red-tint); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -3rem;
  background: var(--ink); color: var(--white); padding: var(--s-2) var(--s-4);
  border-radius: var(--radius); z-index: 100;
}
.skip-link:focus { top: var(--s-4); }

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}
.section { padding-block: var(--s-16); }
@media (min-width: 768px) { .section { padding-block: var(--s-24); } }
.section--tight { padding-block: var(--s-12); }
.section--white { background: var(--white); }

/* Small uppercase label above section headings */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s-3);
}
.lead { font-size: 1.15rem; max-width: 42rem; color: var(--grey); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-heading); font-weight: 600; font-size: 1rem;
  padding: 0.8em 1.4em; border-radius: var(--radius);
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .12s;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-dark); color: var(--white); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--white); }
.btn--grey { background: var(--grey); color: var(--white); }
.btn--grey:hover { background: var(--ink); color: var(--white); }
.btn--light { background: var(--white); color: var(--red); }
.btn--light:hover { background: var(--off-white); color: var(--red-dark); }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* ---------- Image placeholders (until real photos arrive) ----------
   Any element with class "ph" shows a labelled block. Swap the whole
   element for an <img> when the photo is ready — see README.        */
.ph {
  display: grid; place-items: center; text-align: center;
  background: repeating-linear-gradient(135deg, #EDE5DE 0 12px, #E4DBD3 12px 24px);
  color: var(--grey); font-family: var(--font-heading); font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase; padding: var(--s-4);
  border: 1px dashed #C9BDB4; min-height: 12rem;
}
.ph::before { content: "Photo: " attr(data-label); }
.format__media.ph { min-height: 0; }
.ph--logo { min-height: 4rem; font-size: 0.7rem; background: var(--white); }
.ph--logo::before { content: attr(data-label); }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--header-h);
}
.header__brand { display: flex; align-items: center; gap: var(--s-4); }
.logo { display: block; }
.logo img { height: 3.4rem; width: auto; }
@media (max-width: 599px) { .logo img { height: 2.9rem; } }
.header__badge { height: 3.4rem; width: auto; }
.header__actions { display: flex; align-items: center; gap: var(--s-2); }

.nav__toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: 2px solid var(--line); border-radius: var(--radius);
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  padding: var(--s-2) var(--s-3); cursor: pointer; color: var(--ink);
}
.nav__toggle svg { width: 1.25rem; height: 1.25rem; }
.nav__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--s-1);
}
.nav__list a {
  display: block; padding: var(--s-3) var(--s-2); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; border-radius: var(--radius);
}
.nav__list a:hover { color: var(--red); }
.header__call, .header__enquire { white-space: nowrap; }

/* Mobile: nav collapses into a panel under the header */
@media (max-width: 1199px) {
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%;
         background: var(--white); border-bottom: 1px solid var(--line);
         padding: var(--s-4) var(--gutter) var(--s-6);
         max-height: calc(100vh - var(--header-h)); max-height: calc(100dvh - var(--header-h));
         overflow-y: auto; overscroll-behavior: contain; }
  .js .nav.is-open { display: block; }
  html:not(.js) .nav__toggle { display: none; }
  html:not(.js) .header__inner { flex-wrap: wrap; }
  html:not(.js) .nav { order: 3; width: 100%; padding-block: var(--s-2) var(--s-4); }
  .header__enquire { display: none; }
  .header__call .btn-text { display: none; }
  .header__call { padding: 0.7em; }
}
@media (min-width: 1200px) {
  .nav__toggle { display: none; }
  .nav { display: flex; flex: 1; justify-content: center; }
  .nav__list { flex-direction: row; gap: var(--s-8); }
}

/* ---------- Hero ---------- */
.hero__media {
  position: relative; display: grid; align-items: end; overflow: hidden;
  /* grows with the width so wide screens are not a thin letterbox of the photo */
  min-height: clamp(22rem, min(42vw, 70vh), 44rem); background: var(--ink);
}
.hero__media > .ph, .hero__media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hero__media > .ph { font-size: 1rem; place-items: start center; padding-top: var(--s-8); }
/* Hero photo: one picture that drifts and zooms very slowly — 40 s out, 40 s back. Pure CSS.
   The origin point is roughly the sign, so the drift settles on it. */
.hero__photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1;
  transform-origin: 38% 42%; will-change: transform;
  animation: hero-drift 40s cubic-bezier(0.4, 0, 0.6, 1) infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.05) translate(0.8%, -0.4%); }
}
@media (prefers-reduced-motion: reduce), print { .hero__photo { animation: none; transform: none; } }
/* Phones: the whole photo sits above the headline instead of behind it (sign lower-left, building right),
   so nothing covers the sign. The photo is in normal flow; the overlay becomes a plain dark band. */
@media (max-width: 600px) {
  .hero__media { display: block; min-height: 0; }
  .hero__media > picture { display: block; }
  .hero__photo { position: static; width: 100%; height: auto; aspect-ratio: 4 / 3; transform-origin: 30% 60%; }
  .hero .hero__overlay { background: var(--ink); padding-block: var(--s-6) var(--s-8); }
}
/* Looping animations (hero, product drawings) only run while on screen: the script adds .is-playing
   to each [data-play] box as it scrolls into view. Without the script, nothing is paused. */
.js [data-play]:not(.is-playing), .js [data-play]:not(.is-playing) * { animation-play-state: paused !important; }
.hero__overlay {
  position: relative; z-index: 2; padding-block: var(--s-16) var(--s-8);
  background: linear-gradient(to top, rgba(28,25,23,.85), rgba(28,25,23,.7) 60%, rgba(28,25,23,.45) 85%, rgba(28,25,23,0));
  color: var(--white);
}
/* When a real photo is in place the gradient sits over it; keep text legible */
.hero__overlay h1 {
  font-size: clamp(2.1rem, 5.2vw, 3.9rem); font-weight: 700; margin: 0; max-width: 16ch;
  letter-spacing: -0.02em; line-height: 1.08; text-wrap: balance;
}
.hero__overlay h1 span { color: var(--white); }
.hero__overlay h1 .dot { color: var(--red-tint); }

.hero__sub {
  margin: var(--s-3) 0 0; font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: rgba(255,255,255,.9); font-family: var(--font-heading); font-weight: 500;
}

/* ---------- Intro (capability statement) ---------- */
.intro__grid { display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 900px) { .intro__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-12); } }
.intro h2 { max-width: 18ch; text-wrap: balance; }
.intro .lead { color: var(--ink); max-width: none; }
.intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); margin-top: var(--s-6); }
.intro__call { font-family: var(--font-heading); font-weight: 600; color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--line); }
.intro__call:hover { color: var(--red); border-color: var(--red); }
.intro__media { border-radius: var(--radius); overflow: hidden; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; min-height: 0; }
/* Phones and tablets: a shorter, wider crop so the photo doesn't take the whole screen */
@media (max-width: 899px) { .intro__media { aspect-ratio: 16 / 9; max-height: 14rem; } }
.intro .lead { margin-bottom: var(--s-3); }

/* ---------- Feature section (What we do): more weight than the others ---------- */
.section--feature { padding-block: var(--s-24); border-block: 1px solid var(--line); }
.section--feature .subhead { font-family: var(--font-heading); font-weight: 600; font-size: 1.15rem; color: var(--red); margin-bottom: var(--s-3); }
.section--feature .lead { max-width: 48rem; }
.section--feature .card { padding: var(--s-12) var(--s-8); }
.section--feature .card__icon { width: 3.5rem; height: 3.5rem; margin-bottom: var(--s-6); }
.section--feature .card h3 { font-size: 1.5rem; }
.section--feature .card p { font-size: 1.05rem; color: var(--ink); }
@media (max-width: 767px) { .section--feature { padding-block: var(--s-16); } .section--feature .card { padding: var(--s-8) var(--s-6); } }

/* ---------- Cards (What we do) ---------- */
.cards {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  margin-top: var(--s-8);
}
.card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-8) var(--s-6);
}
.card__icon { width: 2.75rem; height: 2.75rem; margin-bottom: var(--s-4); color: var(--red); }
.card__icon svg { width: 100%; height: 100%; }
.card h3 { margin-bottom: var(--s-2); }
.card p { color: var(--grey); margin: 0; }
.card ul { margin: var(--s-3) 0 0; padding-left: 1.1em; color: var(--grey); }
.card li { margin-bottom: var(--s-1); }

/* ---------- Where it goes: Pacific map ---------- */
.reach__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .reach__grid { grid-template-columns: 1fr 1.5fr; gap: var(--s-12); } }
.reach__list { list-style: none; margin: var(--s-6) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reach__list li {
  font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem;
  padding: 0.4em 0.9em; background: var(--off-white); border: 1px solid var(--line); border-radius: 999px;
}
.reach__list li.is-home { background: var(--red); color: var(--white); border-color: var(--red); }
.map-figure { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pmap { display: block; width: 100%; height: auto; }
.pmap .grat { fill: none; stroke: var(--line); stroke-width: 1; }
.pmap .land { fill: #EDE7E1; stroke: #D3C9C0; stroke-width: 0.75; stroke-linejoin: round; }
.pmap .nz { fill: var(--red); stroke: var(--red-dark); stroke-width: 0.5; stroke-linejoin: round; }
.pmap .arc { fill: none; stroke: var(--red); stroke-width: 1.75; stroke-linecap: round; opacity: 0.85; stroke-dasharray: 1; stroke-dashoffset: 0; }
/* Route order sets the draw stagger; removing a route just closes the gap */
.pmap .route:nth-of-type(1) { --i: 0; }
.pmap .route:nth-of-type(2) { --i: 1; }
.pmap .route:nth-of-type(3) { --i: 2; }
.pmap .route:nth-of-type(4) { --i: 3; }
.pmap .route:nth-of-type(5) { --i: 4; }
.pmap .route:nth-of-type(6) { --i: 5; }
.pmap .route:nth-of-type(7) { --i: 6; }
.pmap .dest { fill: var(--white); stroke: var(--red); stroke-width: 2; }
.pmap .home { fill: var(--red); }
.pmap .halo { fill: var(--red); opacity: 0.25; transform-origin: center; transform-box: fill-box; }
.pmap text { font-family: var(--font-heading); font-size: 20px; font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--white); stroke-width: 4px; stroke-linejoin: round; }
.pmap .lbl-home { fill: var(--red); }
.pmap .lbl-sub { font-size: 18px; font-weight: 400; fill: var(--grey); }
@media (max-width: 600px) {
  .pmap text { font-size: 30px; stroke-width: 6px; }
  .pmap .lbl-sub { display: none; }
  .pmap .dest { r: 6px; }
  /* at this size two labels need moving: Australia would run off the left edge (centre it under
     its marker) and Vanuatu would touch the Fiji marker (centre it above its own) */
  .pmap .route[data-place="Australia"] text { text-anchor: middle; transform: translate(11px, 42px); }
  .pmap .route[data-place="Vanuatu"] text { text-anchor: middle; transform: translate(-11px, -23px); }
  .pmap .route[data-place="New Caledonia"] text { text-anchor: end; transform: translate(-22px, 0); }
}
/* Once-only draw: html.js + .is-visible are set by js/main.js when the map scrolls into view.
   Without JS the routes are simply shown drawn. */
.js .pmap .arc { stroke-dashoffset: 1; }
.js .pmap .dest, .js .pmap .route text { opacity: 0; }
.js .map-figure.is-visible .arc { animation: pmap-draw 1s cubic-bezier(0.4, 0, 0.2, 1) forwards; animation-delay: calc(0.5s + var(--i) * 0.12s); }
.js .map-figure.is-visible .dest, .js .map-figure.is-visible .route text { animation: pmap-in 0.45s ease-out forwards; animation-delay: calc(1.3s + var(--i) * 0.12s); }
.js .map-figure.is-visible .halo { animation: pmap-halo 2.2s ease-out 2 forwards; animation-delay: 0.3s; }
@keyframes pmap-draw { to { stroke-dashoffset: 0; } }
@keyframes pmap-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pmap-halo { 0% { transform: scale(0.6); opacity: 0.35; } 100% { transform: scale(2.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce), print {
  .js .pmap .arc, .js .map-figure.is-visible .arc { stroke-dashoffset: 0; animation: none; }
  .js .pmap .dest, .js .pmap .route text, .js .map-figure.is-visible .dest, .js .map-figure.is-visible .route text { opacity: 1; animation: none; }
  .js .map-figure.is-visible .halo { animation: none; }
}

/* ---------- Scroll reveal ----------
   Elements with data-reveal fade and rise into place when they scroll into
   view. html.js is set by the one-line script in <head>; without it nothing
   is hidden. --d is the stagger delay set by js/main.js.                  */
.js [data-reveal]:not(.is-visible) { opacity: 0; }
.js [data-reveal].is-visible { animation: reveal 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) backwards; animation-delay: var(--d, 0ms); }
@keyframes reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce), print {
  .js [data-reveal], .js [data-reveal]:not(.is-visible), .js [data-reveal].is-visible { opacity: 1; animation: none; transform: none; }
}

/* ---------- Hover and press feedback (transform/opacity only) ---------- */
.card, .format { transition: transform 0.35s cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
@media (hover: hover) {
  .card:hover, .format:hover { transform: translateY(-3px); box-shadow: 0 14px 30px -18px rgba(28, 25, 23, 0.35); border-color: #D9CFC6; }
}
.btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .card, .format, .btn { transition: none; }
  .card:hover, .format:hover { transform: none; }
}

/* ---------- Customer logo strip (hidden until logos are supplied) ---------- */
.logos { background: var(--white); border-block: 1px solid var(--line); }
.logos .eyebrow { text-align: center; color: var(--grey); }
.logos__row {
  display: grid; gap: var(--s-6); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.logos__row img { max-height: 3.5rem; width: auto; margin-inline: auto; filter: grayscale(1); opacity: .75; }

/* ---------- Under one roof: process flow ---------- */
.flow {
  list-style: none; margin: var(--s-8) 0 0; padding: 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  position: relative;
}
.flow__stage { position: relative; padding-top: var(--s-4); }
.flow--three { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--s-8); margin-top: var(--s-12); }
.flow--three .flow__icon { width: 6rem; height: 6rem; border-width: 2px; }
.flow--three .flow__icon svg { width: 3rem; height: 3rem; }
.flow--three .flow__stage h3 { font-size: 1.75rem; margin-top: var(--s-2); }
.flow--three .flow__stage p { font-size: 1.2rem; color: var(--ink); max-width: 26ch; line-height: 1.5; }
@media (min-width: 900px) { .flow--three .flow__stage::before { left: 6rem; top: calc(var(--s-4) + 3rem); right: calc(-1 * var(--s-8)); } }
.flow__icon {
  width: 3.25rem; height: 3.25rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); border: 1px solid var(--line); color: var(--red);
  margin-bottom: var(--s-4); position: relative; z-index: 1;
}
.flow__icon svg { width: 1.5rem; height: 1.5rem; }
.flow__stage h3 { font-size: 1.05rem; margin-bottom: var(--s-2); }
.flow__stage p { color: var(--grey); font-size: 0.95rem; margin: 0; }
/* connecting line runs behind the icons on wide screens */
@media (min-width: 900px) {
  .flow__stage::before {
    content: ""; position: absolute; left: 3.25rem; right: calc(-1 * var(--s-6));
    top: calc(var(--s-4) + 1.625rem); height: 1px; background: var(--line);
  }
  .flow__stage:last-child::before { display: none; }
}

/* ---------- Formats & sizes ---------- */
.formats {
  display: grid; gap: var(--s-6); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.format { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.format__media { aspect-ratio: 4 / 3; min-height: 0; border: 0; border-bottom: 1px solid var(--line); }
.format__media--illus { display: grid; place-items: center; padding: 0; background: radial-gradient(ellipse at 50% 40%, #FFFFFF 0%, var(--off-white) 70%, #F1EAE3 100%); }
.format__media--illus svg { width: 100%; height: 100%; display: block; overflow: visible; }
.format h3 { margin: var(--s-6) var(--s-6) var(--s-3); flex: 1; }
.format p { margin: 0 var(--s-6); color: var(--grey); flex: 1; }
.format__range {
  display: inline-block; margin: var(--s-4) var(--s-6) var(--s-6); align-self: start;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem;
  color: var(--red); background: var(--red-pale); padding: 0.25em 0.7em; border-radius: 999px;
}
.goes-in { margin-top: var(--s-12); }
.goes-in h3 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.products {
  list-style: none; margin: var(--s-4) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s-2);
}
.products li {
  padding: var(--s-2) var(--s-4); background: var(--white);
  border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-heading); font-weight: 500; font-size: 0.9rem;
}

/* ---------- Photo motion (applies once real <img> photos replace the placeholders) ----------
   A slow, slight zoom on hover; nothing moves on its own. Off under reduced motion. */
.plant__item .pic > picture, .intro__media > picture { display: block; height: 100%; }
.format__media img, .plant__item .pic img, .intro__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (hover: hover) {
  .format:hover .format__media img { transform: scale(1.05); }
  .plant__item:hover .pic img, .intro__media:hover img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) { .format__media img, .plant__item .pic img, .intro__media img { transition: none; transform: none !important; } }

/* ---------- Quality (dark band: equipment photos, then the hygiene points and marks) ---------- */
.section--dark { background: var(--ink); color: var(--white); }
.section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark .eyebrow { color: var(--red-tint); }
.section--dark .lead { color: rgba(255,255,255,.75); }
.plant__grid { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; gap: var(--s-4); }
@media (min-width: 700px) { .plant__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-6); } }
.plant__item figure { margin: 0; }
.plant__item .pic { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 2; background: #2A2624; }
.plant__item figcaption { margin-top: var(--s-3); font-family: var(--font-heading); font-weight: 600; font-size: 0.95rem; color: rgba(255,255,255,.85); }
.quality__hygiene { margin-top: var(--s-16); padding-top: var(--s-12); border-top: 1px solid rgba(255,255,255,.15); }
.quality__subhead { font-size: clamp(1.45rem, 2.8vw, 2rem); font-weight: 700; margin-bottom: var(--s-3); }
.hygiene__grid { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 768px) { .hygiene__grid { grid-template-columns: repeat(3, 1fr); gap: var(--s-8); } }
.hygiene__item { padding-left: var(--s-6); border-left: 2px solid var(--red-tint); }
.hygiene__item h4 { margin-bottom: var(--s-2); font-size: 1.15rem; font-weight: 600; }
.hygiene__item p { margin: 0; color: rgba(255,255,255,.75); }

/* ---------- About ---------- */
.about__grid { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 768px) { .about__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-12); } }
.about__media { border-radius: var(--radius); overflow: hidden; min-height: 18rem; }
.about__media img { width: 100%; height: 100%; object-fit: cover; }
.about__facts { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, 1fr); margin-top: var(--s-6); }
.about__fact strong { display: block; font-family: var(--font-heading); font-size: 1.05rem; color: var(--red); }
.about__fact span { font-size: 0.9rem; color: var(--grey); }

/* ---------- FAQ (slot, hidden until content exists) ---------- */
.faq details { border-top: 1px solid var(--line); padding: var(--s-4) 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-family: var(--font-heading); font-weight: 600; cursor: pointer; }
.faq details p { margin: var(--s-3) 0 0; color: var(--grey); }

/* ---------- Contact (dark) ---------- */
.contact { background: var(--ink); color: var(--white); }
.contact .eyebrow { color: var(--red-tint); }
.contact .lead { color: rgba(255,255,255,.75); }
.contact a { color: var(--white); }
.contact__grid { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
@media (min-width: 900px) { .contact__grid { grid-template-columns: 1.2fr 1fr; } }

.form { display: grid; gap: var(--s-4); }
.form__row { display: grid; gap: var(--s-4); }
@media (min-width: 600px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form label { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 0.85rem; margin-bottom: var(--s-1); }
.form label .opt { font-weight: 400; color: rgba(255,255,255,.6); }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; color: var(--white);
  background: var(--ink-soft); border: 1px solid rgba(255,255,255,.38);
  border-radius: var(--radius); padding: 0.7em 0.9em;
}
.form select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.8em center; background-size: 1em; padding-right: 2.4em; }
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--red-tint); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--red-tint); outline-offset: 2px; }
.form textarea { min-height: 8rem; resize: vertical; }
.form__privacy { font-size: 0.85rem; color: rgba(255,255,255,.6); margin: 0; }
.form .btn { justify-self: start; }
.honeypot { position: absolute; left: -10000px; }

.contact__details { display: grid; gap: var(--s-6); align-content: start; }
.contact__item h3 { font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-tint); margin-bottom: var(--s-2); }
.contact__item p { margin: 0; }
.contact__item .big { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; text-decoration: none; }
.hours { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--s-1) var(--s-4); }
.hours dt { font-weight: 600; }
.hours dd { margin: 0; color: rgba(255,255,255,.8); }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.15); }
.map iframe { display: block; width: 100%; height: 14rem; border: 0; }
.map iframe:focus-visible { outline-offset: -3px; }

/* ---------- Floating "Prefer to talk?" chip (mobile only) ---------- */
.chip {
  position: fixed; right: var(--s-4); bottom: var(--s-4); z-index: 40;
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: var(--ink); color: var(--white); text-decoration: none;
  font-family: var(--font-heading); font-weight: 600; font-size: 0.9rem;
  padding: 0.7em 1em; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.chip svg { width: 1.1em; height: 1.1em; color: var(--red-tint); }
@media (min-width: 1200px) { .chip { display: none; } }

/* ---------- Footer ---------- */
.footer { background: #141110; color: var(--white); border-top: 1px solid rgba(255,255,255,.08); padding-block: var(--s-12) var(--s-8); font-size: 0.95rem; }
.footer a { color: var(--white); }
.footer__grid { display: grid; gap: var(--s-8); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer__logo { height: 2.1rem; width: auto; margin-bottom: var(--s-4); }
.footer h3 { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: var(--s-3); }
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: var(--s-2); }
.footer p { margin: 0 0 var(--s-2); }
.footer__bottom {
  margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid rgba(255,255,255,.2);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2);
  font-size: 0.85rem; color: rgba(255,255,255,.75);
}


/* ---------- Print ----------
   Browsers drop backgrounds when printing, so the dark sections need dark text;
   fixed and interactive-only elements are dropped.                            */
@media print {
  .section--dark { background: none !important; color: var(--ink) !important; }
  .section--dark h2, .section--dark h3, .section--dark h4, .section--dark .lead, .section--dark figcaption, .section--dark .hygiene__item p { color: var(--ink) !important; }
  .section--dark .quality__hygiene { border-top-color: var(--line) !important; }
  .section--dark .eyebrow { color: var(--red) !important; }
  .hero__media, .hero__overlay, .contact, .footer, .btn--primary, .reach__list li.is-home,
  .form input, .form select, .form textarea { background: none !important; color: var(--ink) !important; }
  .contact a, .contact .lead, .contact__item p, .hours dd, .form label .opt, .form__privacy,
  .footer a, .footer h3, .footer__bottom, .hero__overlay h1 span, .hero__overlay h1 .dot, .hero__sub { color: var(--ink) !important; }
  .contact .eyebrow, .contact__item h3 { color: var(--red) !important; }
  .form input, .form select, .form textarea { border-color: var(--grey) !important; }
  .hero__media { min-height: 0; }
  .chip, .nav__toggle, .map, .skip-link { display: none !important; }
  .header { position: static; }
  .js .nav { display: block; position: static; padding: 0; border: 0; }
}

/* ---------- Thank-you page ---------- */
.thanks { min-height: 60vh; display: grid; place-items: center; text-align: center; padding-block: var(--s-16); }
.thanks__inner { max-width: 36rem; }

/* ==== product illustrations (generated: moved out of the inline SVGs so the CSP can stay style-src 'self'; replaced by Website Design/tools/replace_illus.py) ==== */
.sa-tilt{transform-box:view-box;transform-origin:280px 205px;transform:rotate(-6deg);animation:sa-tilt 8s ease-in-out infinite}
.sa-flap{transform-box:view-box;transform-origin:280px 69px;animation:sa-flap 8s ease-in-out infinite}
.sa-pour{animation:sa-gate 8s ease-in-out infinite}
.sa-g{animation:sa-fall 8s ease-in-out infinite}
.sa-pile{transform-box:view-box;transform-origin:458px 377px;animation:sa-pile 8s ease-in-out infinite}
@keyframes sa-tilt{0%,30%{transform:rotate(-6deg)}47%,67%{transform:rotate(38deg)}84%,100%{transform:rotate(-6deg)}}
@keyframes sa-flap{0%,11%{transform:none;opacity:1}21%{opacity:1}30%{transform:translate(34px,-26px) rotate(9deg);opacity:0}30.1%,72%{transform:none;opacity:0}84%,100%{transform:none;opacity:1}}
@keyframes sa-gate{0%,45.5%{opacity:0}48.5%,64.5%{opacity:1}67.5%,100%{opacity:0}}
@keyframes sa-fall{0%,45%,49.01%,53.01%,57.01%,61.01%,65.01%{transform:translate(0,0);animation-timing-function:linear}49%,53%,57%,61%,65%,69%{transform:translate(0,200px)}69.01%,100%{transform:translate(0,0)}}
@keyframes sa-pile{0%,46%{transform:scale(.1);opacity:0}49%{transform:scale(.16);opacity:1}65%,68%{transform:scale(1);opacity:1}83%{transform:scale(1);opacity:0}84%,100%{transform:scale(.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.sa-tilt,.sa-flap,.sa-pour,.sa-g,.sa-pile{animation:none}}
.bx-nf,.bx-ff{transform-box:fill-box;transform-origin:0 0;animation:8s ease-in-out infinite}
.bx-nf{animation-name:bx-nf}
.bx-ff{animation-name:bx-ff}
.bx-sa{opacity:0;transform-box:fill-box;transform-origin:50% 50%;animation:bx-sa 8s ease-in-out infinite}
.bx-lf{transform-box:fill-box;transform-origin:50% 50%;animation:bx-lf 8s ease-in-out infinite}
.bx-ls{animation:bx-ls 8s ease-in-out infinite}
.bx-cs{opacity:0;animation:bx-cs 8s ease-in-out infinite}
@keyframes bx-nf{
0%,10%{transform:skewX(0) scaleY(1);animation-timing-function:ease-in}
17.75%{transform:skewX(-12.4deg) scaleY(1.7);animation-timing-function:linear}
21.9%{transform:skewX(-18.4deg) scaleY(1.9);animation-timing-function:linear}
25.75%{transform:skewX(-24.2deg) scaleY(1.7);animation-timing-function:linear}
28.75%{transform:skewX(-30deg) scaleY(1.2);animation-timing-function:ease-out}
35%,62.5%{transform:skewX(-42.4deg) scaleY(.6);animation-timing-function:ease-in}
68.15%{transform:skewX(-30deg) scaleY(1.2);animation-timing-function:linear}
70.85%{transform:skewX(-24.2deg) scaleY(1.7);animation-timing-function:linear}
74.3%{transform:skewX(-18.4deg) scaleY(1.9);animation-timing-function:linear}
78.05%{transform:skewX(-12.4deg) scaleY(1.7);animation-timing-function:ease-out}
85%,100%{transform:skewX(0) scaleY(1)}}
@keyframes bx-ff{
0%,10%{transform:skewX(0) scaleY(1);animation-timing-function:ease-in}
16.75%{transform:skewX(-34.3deg) scaleY(.4);animation-timing-function:linear}
20.25%{transform:skewX(58.1deg) scaleY(-.3);animation-timing-function:linear}
23.25%{transform:skewX(34.6deg) scaleY(-.9);animation-timing-function:linear}
27.5%{transform:skewX(24.2deg) scaleY(-1.7);animation-timing-function:ease-out}
35%,62.5%{transform:skewX(20.2deg) scaleY(-1.9);animation-timing-function:ease-in}
69.3%{transform:skewX(24.2deg) scaleY(-1.7);animation-timing-function:linear}
73%{transform:skewX(34.6deg) scaleY(-.9);animation-timing-function:linear}
75.7%{transform:skewX(58.1deg) scaleY(-.3);animation-timing-function:linear}
78.95%{transform:skewX(-34.3deg) scaleY(.4);animation-timing-function:ease-out}
85%,100%{transform:skewX(0) scaleY(1)}}
@keyframes bx-sa{
0%,24%{opacity:0;transform:translateY(20px)}
36%{opacity:1}
44%,62%{opacity:1;transform:translateY(4px)}
73%,100%{opacity:0;transform:translateY(20px)}}
@keyframes bx-lf{
0%,40%{transform:translateY(0) rotate(0)}
54%{transform:translateY(-40px) rotate(-1.5deg)}
68%,100%{transform:translateY(0) rotate(0)}}
@keyframes bx-ls{
0%,40%{opacity:1}
54%{opacity:.3}
68%,100%{opacity:1}}
@keyframes bx-cs{
0%,12%{opacity:0}
35%,62%{opacity:.55}
82%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.bx-nf,.bx-ff,.bx-sa,.bx-lf,.bx-ls,.bx-cs{animation:none}}
.po-sway{transform-box:fill-box;transform-origin:50% 100%;animation:po-sway 8s ease-in-out infinite}
.po-slide{animation:po-slide 8s ease-in-out infinite}
.po-front{transform-box:fill-box;transform-origin:50% 100%;animation:po-front 8s ease-in-out infinite}
.po-back{transform-box:fill-box;transform-origin:50% 100%;animation:po-back 8s ease-in-out infinite}
.po-mouth{transform-box:fill-box;transform-origin:50% 50%;animation:po-mouth 8s ease-in-out infinite}
@keyframes po-slide{0%,10%{transform:translateX(0)}31%,70%{transform:translateX(236px)}84%,100%{transform:translateX(0)}}
@keyframes po-front{0%,31%{transform:scale(1,1)}49%,56%{transform:scale(1,.72)}70%,100%{transform:scale(1,1)}}
@keyframes po-back{0%,31%{transform:translateY(0) scaleY(1)}49%,56%{transform:translateY(-4px) scaleY(.96)}70%,100%{transform:translateY(0) scaleY(1)}}
@keyframes po-mouth{0%,31%{transform:scaleY(.02);opacity:0}49%,56%{transform:scaleY(1);opacity:1}70%,100%{transform:scaleY(.02);opacity:0}}
@keyframes po-sway{0%,31%{transform:rotate(0)}40%{transform:rotate(.45deg)}52%{transform:rotate(-.3deg)}62%,100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.po-sway,.po-slide,.po-front,.po-back,.po-mouth{animation:none}}
/* ==== end product illustrations ==== */