/* ==========================================================================
   Magicomeal — Corporate Catering Landing Page
   Single stylesheet. No framework, no runtime CSS-in-JS, no build step.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts — self-hosted so the page makes zero third-party requests on load.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.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: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.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: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/poppins-600.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: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/poppins-700.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;
}

/* --------------------------------------------------------------------------
   Tokens
   -------------------------------------------------------------------------- */
:root {
  --green: #4eb952;
  --green-dark: #2e7d32;
  --green-deep: #1d4f22;
  --green-tint: #eef8ef;
  --green-tint-2: #dcf0dd;
  --amber: #ff8f00;

  --ink: #17201a;
  --ink-2: #3c4a40;
  --ink-3: #66746b;
  --line: #e3e8e4;
  --line-2: #eef1ef;
  --paper: #ffffff;
  --paper-2: #f7f9f7;

  --radius: 14px;
  --radius-lg: 22px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 26, 0.06), 0 2px 8px rgba(23, 32, 26, 0.05);
  --shadow: 0 2px 6px rgba(23, 32, 26, 0.06), 0 14px 40px rgba(23, 32, 26, 0.09);
  --shadow-lg: 0 24px 70px rgba(23, 32, 26, 0.16);

  --max: 1280px;
  --gutter: 20px;
  --sticky-h: 0px;

  --font: 'Poppins', 'Montserrat', 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Reset / base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: var(--sticky-h);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: var(--green-dark);
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.015em;
}
h1 {
  font-size: clamp(2rem, 1.35rem + 2.7vw, 3.35rem);
}
h2 {
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.3rem);
}
h3 {
  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}
p {
  margin: 0 0 1em;
}
/* `ol` is included deliberately: the steps list stays an <ol> because the
   order is meaningful to screen readers, but its numbers are drawn as the
   green 01–04 badges. Without this, the browser's own markers render beside
   them and the steps read "1. 01", "2. 02". */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 3px;
  border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
  html,
  .carousel__track {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section {
  padding-block: clamp(48px, 6vw, 84px);
}
.section--tint {
  background: var(--paper-2);
}
.section--green {
  background: var(--green-tint);
}
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--green-dark);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip:focus {
  left: 0;
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 14px;
}
.section-head {
  max-width: 760px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.section-head p {
  font-size: 1.0625rem;
  color: var(--ink-3);
  margin: 0;
}
.lead {
  font-size: clamp(1.02rem, 0.97rem + 0.28vw, 1.19rem);
  color: var(--ink-2);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: inherit;
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  padding: 15px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease,
    transform 0.16s ease, box-shadow 0.16s ease;
}
.btn:active {
  transform: translateY(1px);
}
/* Filled surfaces carrying white text use Dark Green (#2e7d32 → 5.13:1).
   The lighter brand green (#4eb952) is only 2.5:1 with white, so it is kept
   for icons, borders, tints and highlights where it sits on light ground. */
.btn--primary {
  background: var(--green-dark);
  color: #fff;
  box-shadow: 0 6px 18px rgba(46, 125, 50, 0.3);
}
.btn--primary:hover {
  background: var(--green-deep);
  box-shadow: 0 8px 24px rgba(29, 79, 34, 0.34);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: var(--green);
  color: var(--green-dark);
  background: var(--green-tint);
}
/* No translucent white fill: it lightens the green behind the label and drops
   the text contrast below 4.5:1. Border-only keeps it at 5.13:1. */
.btn--on-dark {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
.btn--on-dark:hover {
  background: #fff;
  color: var(--green-deep);
  border-color: #fff;
}
.btn--white {
  background: #fff;
  color: var(--green-deep);
}
.btn--white:hover {
  background: var(--green-tint);
}
.btn--lg {
  padding: 17px 32px;
  font-size: 1.02rem;
}
.btn--block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line-2);
  backdrop-filter: saturate(1.4) blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 68px;
}
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink);
}
.site-header__logo img {
  height: 48px;
  width: 48px;
}
/* Descriptor beside the badge — message match for the ad, not a logo lockup. */
.site-header__desc b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.site-header__desc span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--ink-3);
}
@media (max-width: 720px) {
  .site-header__desc {
    display: none;
  }
}
.site-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 999px;
}
.header-phone:hover {
  background: var(--green-tint);
  color: var(--green-dark);
}
.header-phone svg {
  flex: none;
}
@media (max-width: 640px) {
  .header-phone span {
    display: none;
  }
  .site-header__actions .btn {
    padding: 12px 18px;
    font-size: 0.9rem;
  }
  .site-header__logo img {
    height: 40px;
    width: 40px;
  }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  background: linear-gradient(180deg, var(--green-tint) 0%, #fff 78%);
  padding-block: clamp(32px, 4.5vw, 64px) clamp(36px, 4vw, 56px);
  position: relative;
}
.hero__grid {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.hero h1 {
  margin-bottom: 18px;
  text-wrap: balance;
}
.hero h1 .hl {
  color: var(--green-dark);
}
.hero__sub {
  font-size: clamp(1.02rem, 0.96rem + 0.34vw, 1.18rem);
  color: var(--ink-2);
  max-width: 34em;
  margin-bottom: 26px;
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.hero__reassure {
  font-size: 0.875rem;
  color: var(--ink-3);
  margin: 0 0 26px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__reassure svg {
  flex: none;
  color: var(--green);
}
.hero__media {
  position: relative;
}
.hero__media picture {
  display: block;
}
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  object-fit: cover;
  aspect-ratio: 4 / 3;
}
@media (min-width: 900px) {
  /* The 5:6 crop is what makes the image column match the height of the
     copy column — at 4:3 it floated with ~200px of dead space around it. */
  .hero__media img {
    aspect-ratio: 5 / 6;
  }
}
.hero__badge {
  position: absolute;
  left: -14px;
  bottom: 26px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 82%;
}
.hero__badge strong {
  display: block;
  color: var(--ink);
  font-size: 1.15rem;
  line-height: 1.15;
}
.hero__badge span {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.hero__badge .dot {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-dark);
  display: grid;
  place-items: center;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
}
.hero-stats li {
  background: #fff;
  padding: 16px 14px;
  text-align: center;
}
.hero-stats b {
  display: block;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.8rem);
  color: var(--green-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-stats span {
  font-size: 0.78rem;
  color: var(--ink-3);
  font-weight: 500;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: 1.08fr 0.92fr;
  }
  .hero-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --------------------------------------------------------------------------
   Trust bar
   -------------------------------------------------------------------------- */
.trustbar {
  background: var(--green-deep);
  color: #fff;
  padding-block: 26px;
}
.trustbar h2 {
  color: #fff;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.72;
  margin: 0 0 14px;
  font-weight: 600;
}
.trustbar ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.trustbar li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.925rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.94);
}
.trustbar li svg {
  flex: none;
  color: var(--green);
}

/* --------------------------------------------------------------------------
   Client logos
   -------------------------------------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.logo-grid li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: 14px;
}
.logo-grid img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.72;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-grid li:hover img {
  filter: none;
  opacity: 1;
}
.client-more {
  margin-top: 22px;
  font-size: 0.925rem;
  color: var(--ink-3);
}
.client-more strong {
  color: var(--ink-2);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Entity + glance
   -------------------------------------------------------------------------- */
.entity__grid {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}
@media (min-width: 900px) {
  .entity__grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: start;
  }
}
.entity__lead {
  font-size: clamp(1.05rem, 0.98rem + 0.42vw, 1.25rem);
  color: var(--ink);
  font-weight: 500;
  border-left: 4px solid var(--green);
  padding-left: 20px;
  margin-bottom: 22px;
}
.glance {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 8px 22px 14px;
  box-shadow: var(--shadow-sm);
}
.glance h2 {
  font-size: 1.1rem;
  padding-top: 16px;
}
.glance dl {
  margin: 0;
}
.glance div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 11px 0;
  border-top: 1px solid var(--line-2);
}
.glance dt {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-3);
  font-weight: 600;
}
.glance dd {
  margin: 0;
  color: var(--ink);
  font-weight: 500;
  font-size: 0.95rem;
}
@media (min-width: 520px) {
  .glance div {
    grid-template-columns: 148px 1fr;
    gap: 16px;
    align-items: baseline;
  }
}

/* --------------------------------------------------------------------------
   Services
   -------------------------------------------------------------------------- */
.service {
  display: grid;
  gap: clamp(22px, 3.5vw, 48px);
  align-items: center;
  padding-block: clamp(30px, 4vw, 52px);
  border-top: 1px solid var(--line-2);
}
.service:first-of-type {
  border-top: 0;
}
.service__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.service__summary {
  font-weight: 500;
  color: var(--ink);
  font-size: 1.06rem;
}
.service__for {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--green-tint);
  color: var(--green-deep);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 0.83rem;
  font-weight: 500;
  margin-bottom: 16px;
}
.service__points {
  display: grid;
  gap: 9px;
  margin: 18px 0 20px;
}
.service__points li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.945rem;
}
.service__points svg {
  flex: none;
  margin-top: 4px;
  color: var(--green);
}
.textlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--green-dark);
  text-decoration: none;
}
.textlink:hover {
  text-decoration: underline;
}
@media (min-width: 880px) {
  .service {
    grid-template-columns: 1fr 1fr;
  }
  .service--flip .service__media {
    order: 2;
  }
}

/* --------------------------------------------------------------------------
   Card grids
   -------------------------------------------------------------------------- */
.cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  box-shadow: var(--shadow-sm);
}
.card h3 {
  margin-bottom: 8px;
}
.card p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-3);
}
.card__icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  background: var(--green-tint);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

/* --------------------------------------------------------------------------
   Scale
   -------------------------------------------------------------------------- */
.scale {
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.88);
}
.scale h2 {
  color: #fff;
}
.scale__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .scale__grid {
    grid-template-columns: 1fr 1fr;
  }
}
.scale__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 26px 0 22px;
}
.scale__stats li {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  padding: 18px 16px;
}
.scale__stats b {
  display: block;
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.1rem);
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.scale__stats span {
  font-size: 0.83rem;
  opacity: 0.8;
}
.scale__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   Food safety
   -------------------------------------------------------------------------- */
.safety__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .safety__grid {
    grid-template-columns: 0.95fr 1.05fr;
  }
}
/* 2x2 grid of real kitchen photos. */
.safety__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.safety__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.safety__media img:nth-child(1) {
  border-radius: var(--radius-lg) 12px 12px 12px;
}
.safety__media img:nth-child(2) {
  border-radius: 12px var(--radius-lg) 12px 12px;
}
.safety__media img:nth-child(3) {
  border-radius: 12px 12px 12px var(--radius-lg);
}
.safety__media img:nth-child(4) {
  border-radius: 12px 12px var(--radius-lg) 12px;
}
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}
.pillars li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 13px 15px;
  font-size: 0.91rem;
  font-weight: 500;
  color: var(--ink);
}
.pillars svg {
  flex: none;
  margin-top: 3px;
  color: var(--green);
}
.cert-line {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--green-tint);
  border-radius: 11px;
  font-weight: 600;
  color: var(--green-deep);
  font-size: 0.92rem;
}

/* --------------------------------------------------------------------------
   Menu
   -------------------------------------------------------------------------- */
.menu__grid {
  display: grid;
  gap: clamp(26px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) {
  .menu__grid {
    grid-template-columns: 1.05fr 0.95fr;
  }
}
.menu__media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.menu__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.menu__media .menu__lead {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.chips li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 17px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Proof
   -------------------------------------------------------------------------- */
.proof-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.proof-card {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 22px;
}
.proof-card b {
  display: block;
  font-size: 1.85rem;
  color: var(--green-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.proof-card h3 {
  font-size: 1rem;
  margin-bottom: 6px;
}
.proof-card p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink-3);
}
.proof-note {
  margin-top: 20px;
  font-size: 0.9rem;
  color: var(--ink-3);
  font-style: italic;
}

/* --------------------------------------------------------------------------
   Areas
   -------------------------------------------------------------------------- */
.area-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.area-pills li {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 600;
  color: var(--ink);
}
.area-pills svg {
  color: var(--green);
  flex: none;
}

/* --------------------------------------------------------------------------
   How it works
   -------------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  position: relative;
}
.step b {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-size: 0.85rem;
  margin-bottom: 14px;
}
.step h3 {
  font-size: 1.02rem;
  margin-bottom: 6px;
}
.step p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--ink-3);
}

/* --------------------------------------------------------------------------
   Form
   -------------------------------------------------------------------------- */
.formsec {
  background: var(--green-deep);
  color: rgba(255, 255, 255, 0.86);
}
.formsec h2 {
  color: #fff;
}
.formsec__grid {
  display: grid;
  gap: clamp(26px, 4vw, 52px);
  align-items: start;
}
@media (min-width: 940px) {
  .formsec__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}
.formsec__aside p {
  font-size: 1.03rem;
}
.formsec__aside .mini {
  font-size: 0.875rem;
  opacity: 0.75;
  border-left: 3px solid rgba(255, 255, 255, 0.3);
  padding-left: 14px;
  margin-top: 22px;
}
.formsec__contacts {
  display: grid;
  gap: 10px;
  margin-top: 26px;
}
.formsec__contacts a {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  padding: 13px 16px;
}
.formsec__contacts a:hover {
  background: rgba(255, 255, 255, 0.16);
}
.formsec__contacts svg {
  flex: none;
}

.formcard {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-lg);
}
.formgrid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) {
  .formgrid {
    grid-template-columns: 1fr 1fr;
  }
  .field--full {
    grid-column: 1 / -1;
  }
}
.field label {
  display: block;
  font-size: 0.855rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}
.field .req {
  color: #c0392b;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 13px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field textarea {
  min-height: 92px;
  resize: vertical;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2366746b' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(78, 185, 82, 0.2);
}
.field input[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: #c0392b;
}
.field input[aria-invalid='true']:focus,
.field select[aria-invalid='true']:focus {
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.18);
}
.err {
  display: none;
  font-size: 0.8rem;
  color: #c0392b;
  margin-top: 5px;
  font-weight: 500;
}
.err.show {
  display: block;
}
.form-foot {
  margin-top: 20px;
}
.form-privacy {
  font-size: 0.8rem;
  color: var(--ink-3);
  text-align: center;
  margin: 12px 0 0;
}
.form-alert {
  display: none;
  background: #fdecea;
  border: 1px solid #f5c6c0;
  color: #96261a;
  border-radius: 10px;
  padding: 12px 15px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.form-alert.show {
  display: block;
}
.btn[aria-busy='true'] {
  opacity: 0.75;
  pointer-events: none;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: none;
}
.btn[aria-busy='true'] .spinner {
  display: block;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Success panel */
.success {
  display: none;
  text-align: center;
  padding: 14px 4px;
}
.success.show {
  display: block;
}
.success__tick {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-dark);
  display: grid;
  place-items: center;
  margin: 0 auto 18px;
}
.success__title {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 1em;
}
.success p {
  color: var(--ink-3);
  max-width: 34em;
  margin-inline: auto;
}
.success__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 22px;
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq {
  display: grid;
  gap: 10px;
  max-width: 880px;
}
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] {
  border-color: var(--green);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 52px 18px 20px;
  font-weight: 600;
  color: var(--ink);
  position: relative;
  font-size: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '';
  position: absolute;
  right: 22px;
  top: 50%;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--green-dark);
  border-bottom: 2px solid var(--green-dark);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.18s ease;
}
.faq details[open] summary::after {
  transform: translateY(-20%) rotate(-135deg);
}
.faq .answer {
  padding: 0 20px 20px;
  color: var(--ink-2);
  font-size: 0.955rem;
  max-width: 62em;
}
.faq .answer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.finalcta {
  background: var(--green-dark);
  color: #fff;
  text-align: center;
}
.finalcta h2 {
  color: #fff;
  margin-inline: auto;
  max-width: 18em;
}
.finalcta p {
  max-width: 44em;
  margin-inline: auto;
  color: rgba(255, 255, 255, 0.93);
  font-size: 1.05rem;
}
.finalcta__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: #101710;
  color: rgba(255, 255, 255, 0.66);
  padding-block: 44px 34px;
  font-size: 0.9rem;
}
.site-footer img {
  height: 40px;
  width: auto;
  margin-bottom: 14px;
}
.site-footer__grid {
  display: grid;
  gap: 26px;
}
@media (min-width: 760px) {
  .site-footer__grid {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}
.site-footer strong {
  display: block;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 10px;
  font-weight: 600;
}
.site-footer a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}
.site-footer a:hover {
  color: #fff;
  text-decoration: underline;
}
.site-footer address {
  font-style: normal;
  line-height: 1.7;
}
.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 6px;
}
.site-footer__bottom {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  justify-content: space-between;
  font-size: 0.83rem;
  opacity: 0.8;
}

/* --------------------------------------------------------------------------
   Floating WhatsApp button
   -------------------------------------------------------------------------- */
.wa-fab {
  position: fixed;
  left: 16px;
  /* Clears the sticky CTA bar, which is 76px on phones and 0 on desktop via
     --sticky-h. The bar adds the safe-area inset to its own padding on top
     of that flat value, so the inset is added here too or the button sits
     under the bar on a notched phone. */
  bottom: calc(var(--sticky-h, 0px) + env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 65; /* under the sticky bar (70), which it never overlaps anyway */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;

  /* WhatsApp's darker brand green, not the familiar #25D366. A white glyph
     on #25D366 measures 1.98:1, well under the 3:1 WCAG 1.4.11 asks of a
     graphical object; this is 4.14:1. The glyph carries the recognition. */
  background: #128c7e;
  color: #fff;
  box-shadow: 0 6px 20px rgba(18, 140, 126, 0.42);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.wa-fab svg {
  width: 30px;
  height: 30px;
}
.wa-fab:hover,
.wa-fab:focus-visible {
  background: #0f7569;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(18, 140, 126, 0.5);
}
.wa-fab:focus-visible {
  outline: 3px solid var(--green-dark);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .wa-fab {
    transition: none;
  }
  .wa-fab:hover,
  .wa-fab:focus-visible {
    transform: none;
  }
}
/* Phones: a 56px circle at left:16 occupies x 16–72, and the cuisine
   legend's left column starts at x≈58, so the leading edge of the Indian,
   Chinese and Mexican buttons sat under the FAB and could not be tapped.
   48px at left:8 occupies x 8–56.

   Measured overlap of those buttons after the change, by viewport width:
     414px  0px covered    375px  0px     360px  6px     320px 26px
   The legend shifts further left as the viewport narrows, so a bottom-left
   FAB cannot clear it at 320 — anything fixed there overlaps what scrolls
   under it. 98px of a 124px button is still tappable at the worst width,
   well above the 44px floor, so this is as far as it is worth taking. */
@media (max-width: 899px) {
  .wa-fab {
    left: 8px;
    width: 48px;
    height: 48px;
  }
  .wa-fab svg {
    width: 26px;
    height: 26px;
  }
}

/* Landscape phones: the sticky bar is already trimmed there and vertical
   space is the scarce thing, so shrink to the 44px tap-target floor. */
@media (max-height: 460px) and (max-width: 899px) {
  .wa-fab {
    width: 46px;
    height: 46px;
    bottom: calc(var(--sticky-h, 0px) + env(safe-area-inset-bottom, 0px) + 10px);
  }
  .wa-fab svg {
    width: 24px;
    height: 24px;
  }
}

/* --------------------------------------------------------------------------
   Sticky mobile CTA
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.98);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(23, 32, 26, 0.1);
}
.sticky-cta .btn {
  flex: 1;
  padding: 14px 10px;
  font-size: 0.95rem;
}
.sticky-cta .btn--ghost {
  flex: 0 0 38%;
  border-color: var(--line);
}
/* The Call half went with the phone number, so the remaining button spans
   the bar rather than sitting at 62% with dead space beside it. */
.sticky-cta--single .btn {
  flex: 1 1 100%;
}
@media (max-width: 899px) {
  .sticky-cta {
    display: flex;
  }
  body {
    --sticky-h: 76px;
  }
  html {
    scroll-padding-top: 76px;
  }
}

/* --------------------------------------------------------------------------
   Kitchens
   -------------------------------------------------------------------------- */
.kitchens {
  display: grid;
  gap: clamp(22px, 3.5vw, 44px);
  align-items: stretch;
}
@media (min-width: 900px) {
  .kitchens {
    grid-template-columns: 1.15fr 0.85fr;
  }
}
.kitchens__list {
  display: grid;
  gap: 16px;
  align-content: start;
}
.kitchen {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
/* The CPU carries the brand green so the primary site reads first. */
.kitchen--primary {
  border-left-color: var(--green);
}
.kitchen__role {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 6px;
}
.kitchen__area {
  display: block;
  font-size: clamp(1.6rem, 1.3rem + 1.1vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kitchen__city {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 1rem;
  font-weight: 600;
  margin: 4px 0 8px;
}
.kitchen__city svg {
  flex: none;
  color: var(--green);
}
.kitchen p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-3);
}
.kitchens__media img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.kitchens__foot {
  margin: 22px 0 0;
  font-size: 0.95rem;
  color: var(--ink-3);
  max-width: 62em;
}

/* ==========================================================================
   SHORT (lead-gen) LAYOUT
   Hero carries the form, so the ad click is one screen from a submission.
   ========================================================================== */
.hero--form {
  padding-block: clamp(24px, 3vw, 44px) clamp(32px, 4vw, 56px);
}
.hero__grid--form {
  align-items: start;
}
@media (min-width: 980px) {
  .hero__grid--form {
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
  }
}
.hero--form h1 {
  margin-bottom: 14px;
}
.hero--form .hero__sub {
  margin-bottom: 22px;
}
.hero--form .hero-stats {
  margin-bottom: 20px;
}

.hero-assure {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}
.hero-assure li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.hero-assure svg {
  flex: none;
  color: var(--green-dark);
}
.hero-assure b {
  color: var(--ink);
}
.hero__call {
  display: inline-flex;
}

.hero__form-head {
  margin-bottom: 14px;
}
.hero__form-title {
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
.hero__form-head p {
  margin: 0;
  color: var(--ink-3);
  font-size: 0.95rem;
}
.hero__form .formcard {
  padding: clamp(18px, 2.4vw, 26px);
}
.hero__form-note {
  margin: 12px 2px 0;
  font-size: 0.8rem;
  color: var(--ink-3);
}
/* Tighter rows so a 7-field form still fits beside the hero copy. */
.hero__form .formgrid {
  gap: 12px;
}
.hero__form .field input,
.hero__form .field select,
.hero__form .field textarea {
  padding: 11px 13px;
}
.hero__form .field textarea {
  min-height: 70px;
}

.cards--tight .card {
  padding: 20px 18px;
}
.cards--tight .card h3 {
  font-size: 1.02rem;
}

/* --------------------------------------------------------------------------
   Proof strip
   -------------------------------------------------------------------------- */
.proofstrip__stats {
  margin-bottom: clamp(22px, 3vw, 34px);
}
.proofstrip {
  display: grid;
  gap: clamp(22px, 3.5vw, 44px);
  align-items: center;
}
@media (min-width: 900px) {
  .proofstrip {
    grid-template-columns: 1.1fr 0.9fr;
  }
}
.proofstrip__points {
  display: grid;
  gap: 18px;
}
.proofstrip__points li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.proofstrip__points svg {
  flex: none;
  margin-top: 5px;
  color: var(--green-dark);
}
.proofstrip__points h3 {
  font-size: 1.02rem;
  margin-bottom: 4px;
}
.proofstrip__points p {
  margin: 0;
  font-size: 0.94rem;
  color: var(--ink-3);
}
/* The kitchen photographs are a carousel now, one at a time across the
   whole media column. Four tiles at 260px each were small for photographs
   that have to carry detail — a probe reading, a label on a container.

   One slide per view, unlike the gallery.
   The gallery widens its slides at several breakpoints, but those rules
   are a single class deeper than this one, so scoping to the section wins
   at every width without repeating the media queries. */
.proofstrip__media .carousel__track > li {
  flex: 0 0 100%;
}
.proofstrip__media .carousel__track {
  gap: 0;
}
.proofstrip__media .carousel__track img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
/* The buttons sit inside the frame here rather than hanging off the edge:
   the column is flush with the section padding, so -10px put them under
   the text beside it. */
.proofstrip__media .carousel__btn--prev {
  left: 10px;
}
.proofstrip__media .carousel__btn--next {
  right: 10px;
}
/* Pause control for the auto-rotating kitchen strip. Bottom-left, clear of
   both arrows, and dark-on-photo like the one in the hero so it stays
   legible whatever slide is underneath. 44px to match the arrows. */
.carousel__pause {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(8, 20, 10, 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.carousel__pause:hover {
  background: rgba(8, 20, 10, 0.8);
}
/* Nothing auto-rotates under reduced motion, so the control would have
   nothing to control. */
@media (prefers-reduced-motion: reduce) {
  .carousel__pause {
    display: none;
  }
}
.proofstrip__clients {
  margin: clamp(22px, 3vw, 32px) 0 0;
  font-size: 0.92rem;
  color: var(--ink-3);
  max-width: 70em;
}

/* --------------------------------------------------------------------------
   Gallery carousel

   CSS scroll-snap rather than a carousel library: native momentum and swipe
   on touch, native arrow-key scrolling once the track has focus, and it still
   works as a scrollable strip if the JS never runs. Every image stays in the
   DOM, so nothing is hidden from crawlers.
   -------------------------------------------------------------------------- */
.carousel {
  position: relative;
}
.carousel__track {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  /* `proximity` rather than `mandatory`. Mandatory snapping is known to
     interfere with programmatic scrolling in some engines, and proximity
     still snaps tidily on swipe, so it is the safer default here. */
  scroll-snap-type: x proximity;
  /* Left as `auto`: main.js passes behavior:'smooth' per scroll so it can fall
     back to an instant jump where the animation would not run anyway. */
  scroll-behavior: auto;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room for the focus ring, which would otherwise be clipped by overflow. */
  padding: 4px;
  margin: -4px;
}
.carousel__track::-webkit-scrollbar {
  display: none;
}
.carousel__track > li {
  flex: 0 0 72%;
  scroll-snap-align: start;
}
.carousel__track img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 600px) {
  .carousel__track > li {
    flex-basis: 38%;
  }
}
@media (min-width: 900px) {
  .carousel__track > li {
    flex-basis: 27%;
  }
}
@media (min-width: 1200px) {
  .carousel__track > li {
    flex-basis: 20.5%;
  }
}

/* Arrows. Hidden from pointer-less/touch contexts is wrong — they stay, but
   on touch the swipe is the primary interaction. */
.carousel__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: opacity 0.16s ease, background-color 0.16s ease;
}
.carousel__btn:hover:not(:disabled) {
  background: var(--green-tint);
  color: var(--green-dark);
}
.carousel__btn:disabled {
  opacity: 0;
  pointer-events: none;
}
.carousel__btn--prev {
  left: -10px;
  transform: translateY(-50%) rotate(180deg);
}
.carousel__btn--next {
  right: -10px;
}
@media (max-width: 760px) {
  /* On phones the arrows sit inside the edge so they never overhang the
     gutter, and swipe is the main interaction anyway. */
  .carousel__btn--prev {
    left: 2px;
  }
  .carousel__btn--next {
    right: 2px;
  }
}

/* ==========================================================================
   RESPONSIVE HARDENING
   ========================================================================== */

/* --------------------------------------------------------------------------
   Touch targets
   WCAG 2.2 AA (2.5.8 Target Size Minimum) asks for 24x24 CSS px; platform
   guidance asks ~44px for primary actions. Audited at 320px: the header phone
   CTA measured 38px and the footer links 20-23px, all relying on line-height
   alone. These give them an explicit floor without changing how they look.
   -------------------------------------------------------------------------- */
.header-phone,
.site-header__logo {
  min-height: 44px;
}
.site-footer address a,
.site-footer__links a {
  display: inline-block;
  padding-block: 7px;
  min-height: 24px;
}
/* The address block uses <br>, so the extra padding would double the leading
   without this compensating adjustment. */
.site-footer address {
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   Short viewports (landscape phones)
   At 740x360 the sticky CTA was eating 20% of the screen. Trim it so more of
   the page stays visible, without dropping below a 44px tap target.
   -------------------------------------------------------------------------- */
@media (max-height: 460px) and (max-width: 899px) {
  .sticky-cta {
    padding-top: 6px;
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
  }
  .sticky-cta .btn {
    padding-block: 11px;
  }
  body {
    --sticky-h: 62px;
  }
}

/* --------------------------------------------------------------------------
   Very small phones (<=360px)
   Trim horizontal padding so content keeps its width, and stop the two-up
   hero stats from crowding.
   -------------------------------------------------------------------------- */
@media (max-width: 360px) {
  :root {
    --gutter: 14px;
  }
  .formcard,
  .hero__form .formcard {
    padding: 16px 14px;
  }
  .optional summary {
    padding-right: 38px;
  }
  .hero-stats b {
    letter-spacing: -0.03em;
  }
}

/* ==========================================================================
   HERO: photo carousel behind copy + form  (`heroMedia`)
   ========================================================================== */
.hero--media {
  position: relative;
  isolation: isolate;
  background: var(--green-deep);
  padding-block: min(clamp(32px, 4.5vw, 64px), 6.5vh) clamp(36px, 4.5vw, 64px);
  overflow: hidden;
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms ease;
}
.hero__slide.is-active {
  opacity: 1;
}

/* The scrim is what makes white text legible over an unpredictable photo.
   Strong and near-opaque behind the copy column, easing off to the right
   where the white form card sits. Measured, not eyeballed: the copy side
   stays above 4.5:1 against white on every slide. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      100deg,
      rgba(8, 20, 10, 0.9) 0%,
      rgba(8, 20, 10, 0.86) 42%,
      rgba(8, 20, 10, 0.5) 62%,
      rgba(8, 20, 10, 0.3) 100%
    );
}
@media (max-width: 979px) {
  /* Single column: the copy sits over the whole width, so the scrim is flat
     and heavier rather than directional. */
  .hero__scrim {
    background: rgba(8, 20, 10, 0.86);
  }
}

.hero--media .eyebrow {
  color: #9fe3a3;
}
.hero--media h1 {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.hero--media h1 .hl {
  color: #8fe095;
}
.hero--media .hero__sub {
  color: rgba(255, 255, 255, 0.93);
}

/* Stats become translucent panels instead of white boxes. */
.hero--media .hero-stats {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
}
.hero--media .hero-stats li {
  background: transparent;
}
.hero--media .hero-stats b {
  color: #fff;
}
.hero--media .hero-stats span {
  color: rgba(255, 255, 255, 0.86);
}
.hero--media .hero-assure li {
  color: rgba(255, 255, 255, 0.94);
}
.hero--media .hero-assure b {
  color: #fff;
}
.hero--media .hero-assure svg {
  color: #8fe095;
}
.hero--media .hero__form-head h2 {
  color: var(--ink);
}
.hero--media .hero__form-note {
  color: rgba(255, 255, 255, 0.82);
}

/* The form keeps a solid white card so it reads as a distinct surface. */
.hero--media .hero__form .formcard {
  background: #fff;
  box-shadow: var(--shadow-lg);
}
.hero--media .hero__form-head {
  background: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: 18px 22px 0;
  margin-bottom: 0;
}
.hero--media .hero__form .formcard {
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* Pause control — required for auto-advancing content (WCAG 2.2.2). */
.hero__pause {
  position: absolute;
  left: max(16px, calc((100% - var(--max)) / 2 + var(--gutter)));
  bottom: 14px;
  z-index: 3;
  /* Matches the 44px touch-target floor used elsewhere on the page. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(8, 20, 10, 0.55);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
}
.hero__pause:hover {
  background: rgba(8, 20, 10, 0.8);
}
.hero__pause-icon {
  display: block;
  width: 10px;
  height: 12px;
  border-left: 3px solid #fff;
  border-right: 3px solid #fff;
}
/* The pause/play glyph is shared, so both buttons that use it flip together
   rather than the carousel one being stuck showing "pause" while stopped. */
.hero__pause[aria-pressed='true'] .hero__pause-icon,
.carousel__pause[aria-pressed='true'] .hero__pause-icon {
  width: 0;
  height: 0;
  border: 0;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide {
    transition: none;
  }
}

/* ==========================================================================
   SECTION 2 — three headline services
   ========================================================================== */
.svc3 {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 680px) {
  .svc3 {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Four cards now, not three. At 1000px four across would leave each card
   around 230px with a 16:10 image on top, which is too small to read, so
   the four-across only starts at 1180px. Between the two it is a 2x2,
   which suits four better than the 3+1 orphan the old rule produced. */
@media (min-width: 1180px) {
  .svc3 {
    grid-template-columns: repeat(4, 1fr);
  }
}
.svc3__card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.svc3__card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.svc3__body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.svc3__body h2 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}
.svc3__body p {
  font-size: 0.945rem;
  color: var(--ink-3);
  flex: 1;
}
.svc3__body .textlink {
  margin-top: 4px;
}

/* ==========================================================================
   SECTION 3 — Our Partners, auto-rotating logo strip
   Two identical rows side by side; the track slides exactly 50% and loops,
   so the seam is invisible. The second row is aria-hidden so screen readers
   hear the client list once, not twice.
   ========================================================================== */
.partners {
  position: relative;
}
.partners__viewport {
  overflow: hidden;
  /* Fade the strip into the section background at both edges. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.partners__track {
  display: flex;
  width: max-content;
  animation: partners-scroll 46s linear infinite;
}
.partners__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-right: 14px;
}
.partners__row li {
  flex: 0 0 auto;
}
.partners__row img {
  width: 150px;
  height: 84px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  filter: grayscale(1);
  opacity: 0.74;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.partners__row img:hover {
  filter: none;
  opacity: 1;
}
@keyframes partners-scroll {
  to {
    transform: translateX(-50%);
  }
}
/* Stop while someone is reading or tabbing through it. */
.partners:hover .partners__track,
.partners:focus-within .partners__track,
.partners.is-paused .partners__track {
  animation-play-state: paused;
}
.partners__pause {
  margin-top: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.partners__pause:hover {
  background: var(--green-tint);
  color: var(--green-dark);
}
.partners__pause .hero__pause-icon {
  border-color: currentColor;
}
.partners__pause[aria-pressed='true'] .hero__pause-icon {
  border-left-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  /* No motion at all: fall back to a static wrapped grid of the real row. */
  .partners__viewport {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .partners__track {
    animation: none;
    width: 100%;
  }
  .partners__row[aria-hidden='true'] {
    display: none;
  }
  .partners__row {
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 0;
  }
  .partners__pause {
    display: none;
  }
}

/* ==========================================================================
   SECTION 4 — three reasons, alternating image / text rows
   ========================================================================== */
.feat3 {
  display: grid;
  gap: clamp(28px, 4vw, 52px);
}
.feat3__item {
  display: grid;
  gap: clamp(18px, 3vw, 40px);
  align-items: center;
}
@media (min-width: 820px) {
  .feat3__item {
    grid-template-columns: 0.9fr 1.1fr;
  }
  .feat3__item:nth-child(even) .feat3__media {
    order: 2;
  }
}
.feat3__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.feat3__body h3 {
  font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.45rem);
  margin-bottom: 10px;
}
.feat3__body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 1.0125rem;
  max-width: 44em;
}

/* ==========================================================================
   HERO LEFT COLUMN — three propositions, visual beside text
   ========================================================================== */
.hero__statline {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  margin: 0 0 22px;
}
.hero__statline b {
  color: #fff;
  font-size: 1.05rem;
}

.herofeat {
  display: grid;
  gap: clamp(10px, 1.6vh, 14px);
  margin-bottom: 22px;
}
.herofeat__item {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  padding: 12px;
}
@media (min-width: 520px) {
  .herofeat__item {
    grid-template-columns: clamp(104px, 13vh, 132px) 1fr;
    gap: 18px;
    padding: 14px;
  }
}
.herofeat__media img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
.herofeat__title {
  color: #fff;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}
.herofeat__body p {
  margin: 0;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Cuisine pizza — six slices of real food, not a colour key

   The subject is catering, so the slices are filled with the dishes
   themselves. Hovering lifts a slice out of the pie the way you would take
   one, and enlarges it. Motion only ever answers the pointer or the keyboard.
   ========================================================================== */
.pizza__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  /* Turns like a lazy susan. Slow enough to read as presentation rather than
     animation, and it stops the moment anyone reaches for it. */
  transform-origin: 50% 50%;
  animation: pizza-spin 54s linear infinite;
}
@keyframes pizza-spin {
  to {
    transform: rotate(360deg);
  }
}
/* Stop while someone is choosing, and whenever the hero's pause control is
   engaged — that one button governs every bit of motion in the hero. */
/* The wheel keeps turning while someone picks: hovering, focusing or clicking
   a slice only changes the selection. The explicit pause control below is the
   one thing that stops it — which is also what keeps this WCAG 2.2.2 compliant
   now that interaction no longer pauses it. */
.hero--media.is-paused .pizza__svg {
  animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
  .pizza__svg {
    animation: none;
  }
}
.pizza__slice {
  cursor: pointer;
  transform-origin: 100px 100px;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1), filter 0.2s ease;
  /* Resting slices sit back; the chosen one comes forward to full strength. */
  filter: brightness(0.86);
}
.pizza__slice:hover,
.pizza__slice.is-active {
  /* Pulled out along its own bisector, then enlarged. */
  transform: translate(var(--tx), var(--ty)) scale(1.09);
  filter: none;
}
.pizza__slice.is-active {
  /* Lift above its neighbours so the enlarged edge is not clipped. */
  position: relative;
}
.pizza__slice:focus-visible {
  outline: none;
}
.pizza__slice:focus-visible .pizza__edge {
  stroke: #fff;
  stroke-width: 4;
}
.pizza__edge {
  fill: none;
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 2;
  stroke-linejoin: round;
  pointer-events: none;
}
/* The drawn dish inside each wedge. One warm ink on the dough tones. */
.pizza__food {
  fill: #5c3c1d;
  color: #5c3c1d;
  pointer-events: none;
}
.pizza__now {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
}
/* Two columns gave each label about 118px, which was fine for the one-word
   cuisine names this started with. The categories that replaced them —
   "Regional Specialities", "International Cuisine" — wrapped to two lines,
   leaving the four rows at uneven heights. auto-fit keeps two columns where
   there is room for a label to sit on one line and drops to one where there
   is not, instead of wrapping. */
.pizza__legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
  gap: 2px 12px;
  margin-top: 10px;
}
.pizza__legend button {
  display: block;
  width: 100%;
  min-height: 26px;
  padding: 3px 0;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  font: inherit;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.82);
  text-align: left;
}
.pizza__legend button:hover {
  color: #fff;
}
.pizza__legend button[aria-pressed='true'] {
  color: #fff;
  font-weight: 600;
  border-bottom-color: rgba(255, 255, 255, 0.65);
}
@media (prefers-reduced-motion: reduce) {
  .pizza__slice {
    transition: none;
  }
}

/* Text on the left, the pizza on the right. */
.herofeat__item--wheel {
  grid-template-columns: 1fr clamp(136px, 19vh, 168px);
}
.herofeat__item--wheel .herofeat__body {
  order: 1;
}
.herofeat__item--wheel .herofeat__media {
  order: 2;
}

/* The pizza needs real estate: six slices inside a 96px circle give tap
   targets far below any reasonable minimum. Below the two-column breakpoint
   the row stacks and the pie gets its own width. */
@media (max-width: 560px) {
  .herofeat__item--wheel {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .herofeat__item--wheel .herofeat__body {
    order: 2;
  }
  .herofeat__item--wheel .herofeat__media {
    order: 1;
    width: min(230px, 72vw);
  }
  .pizza__legend {
    max-width: 260px;
    margin-inline: auto;
  }
  .pizza__legend button {
    text-align: center;
  }
}
}

/* Image credits for the freely-licensed cuisine photographs that require
   attribution. Quiet, but present — the licence asks for it. */
/* Collapsed by default. The three CC BY-SA cuisine images have to be
   credited, but the credit does not have to be three lines of the footer. */
.site-footer__credits {
  flex-basis: 100%;
  font-size: 0.72rem;
  line-height: 1.5;
}
.site-footer__credits > summary {
  display: inline-flex;
  align-items: center;
  min-height: 24px; /* WCAG 2.5.8 target size */
  opacity: 0.55;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.site-footer__credits > summary::-webkit-details-marker {
  display: none;
}
.site-footer__credits > summary::after {
  content: '＋';
  margin-left: 6px;
  font-size: 0.82em;
}
.site-footer__credits[open] > summary::after {
  content: '－';
}
.site-footer__credits > summary:hover,
.site-footer__credits > summary:focus-visible {
  opacity: 0.9;
  text-decoration: underline;
}
.site-footer__credits > summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}
.site-footer__credits > p {
  margin: 6px 0 0;
  opacity: 0.6;
  max-width: 70em;
}

/* Short clarifier beside a field label — "People served per meal" etc. */
.field__hint {
  display: block;
  font-weight: 400;
  font-size: 0.74rem;
  color: var(--ink-3);
  margin-top: 1px;
}