/*
 * RW Commercial Catering Engineers
 *
 * Rebuilt from scratch to match the look of the original site: Poppins, the
 * cyan and navy brand pair, pill buttons, navy panels with a thick cyan edge.
 * Values are taken from the original theme; none of its code is reused.
 *
 * Contrast. The original put white text on cyan in several places, which is
 * about 1.9:1 and fails WCAG AA. Here, text on cyan is always navy (7.9:1),
 * and headings that sit on white use --cyan-on-light, a deeper cyan that
 * passes for large text. Bright cyan is kept for backgrounds, borders,
 * buttons and text on navy.
 *
 * Light only, like the original. The brand is defined by its light panels.
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/poppins-latin-400-normal.woff2) format('woff2');
}

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/poppins-latin-700-normal.woff2) format('woff2');
}

:root {
  color-scheme: light;

  /* Brand */
  --cyan: #18c9ff;
  --cyan-on-light: #0099cc;
  --navy: #1d2344;
  --navy-deep: #151a36;
  --grey: #f2f2f2;
  --white: #ffffff;
  --scrim: rgb(0 13 46 / 0.55);
  --confirm-bg: #fff1a8;

  /* Type */
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --step-small: 0.875rem;
  --step-body: clamp(1rem, 0.92rem + 0.26vw, 1.125rem);
  --step-lead: clamp(1.125rem, 0.97rem + 0.5vw, 1.375rem);
  --step-h3: clamp(1.375rem, 1.1rem + 0.9vw, 2rem);
  --step-h2: clamp(1.75rem, 1.05rem + 2.2vw, 3rem);
  --step-btn: clamp(1.0625rem, 1rem + 0.2vw, 1.25rem);

  /* Space */
  --gutter: 5vw;
  --panel-y: clamp(4rem, 2.4rem + 5vw, 8rem);
  --edge: 13px;
  --edge-sm: 5px;
  --radius-pill: 50px;

  /* Layers. The only z-index values in the project. */
  --z-callbar: 90;
  --z-header: 100;
  --z-cookie: 120;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --header-h: 5.5rem;
  --callbar-h: 0px;
}

@media (max-width: 649px) {
  :root {
    --header-h: 4.5rem;
  }
}

/* The mobile call bar is fixed to the bottom of the screen. Reserve its height
   so it never covers the end of the page, and so the cookie banner sits above
   it rather than behind it. */
@media (max-width: 767px) {
  :root {
    --callbar-h: 4.25rem;
  }

  body {
    padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom, 0px));
  }
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: -0.0125em;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.75em;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p,
ul,
ol,
dl,
blockquote,
figure {
  margin: 0 0 1em;
}

p {
  text-wrap: pretty;
}

ul,
ol {
  padding: 0;
}

img,
svg,
picture {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

strong,
b {
  font-weight: 700;
}

address {
  font-style: normal;
}

:focus-visible {
  outline: 3px solid var(--focus-ring, var(--navy));
  outline-offset: 3px;
}

/* Dark grounds swap the focus ring so it stays visible. */
.on-navy {
  --focus-ring: var(--cyan);
}

/* ------------------------------------------------------------------------ */
/* Layout                                                                    */
/* ------------------------------------------------------------------------ */

.container {
  width: min(100% - 2 * var(--gutter), 1529px);
  margin-inline: auto;
}

.container--m {
  width: min(100% - 2 * var(--gutter), 1264px);
}

.container--s {
  width: min(100% - 2 * var(--gutter), 960px);
}

.panel {
  padding-block: var(--panel-y);
}

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

.bg-cyan {
  background: var(--cyan);
  color: var(--navy);
}

.bg-grey {
  background: var(--grey);
}

/* ------------------------------------------------------------------------ */
/* Type helpers                                                              */
/* ------------------------------------------------------------------------ */

.h2 {
  font-size: var(--step-h2);
}

.h3 {
  font-size: var(--step-h3);
}

.lead {
  font-size: var(--step-lead);
  line-height: 1.45;
  font-weight: 700;
}

.accent {
  color: var(--cyan);
}

.accent-light {
  color: var(--cyan-on-light);
}

.prose > :last-child {
  margin-bottom: 0;
}

.prose a {
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--cyan);
}

.prose a:hover {
  text-decoration-color: currentColor;
}

.prose h3 {
  font-size: var(--step-h3);
  margin-top: 1.5em;
}

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

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: calc(var(--z-cookie) + 1);
  padding: 0.75rem 1.25rem;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-pill);
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

/* Chevron list, the original site's signature bullet. Drawn in CSS rather than
   loaded from an icon font. */
.ticks {
  list-style: none;
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 0.7em;
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0.1em;
  top: 0.52em;
  width: 0.5em;
  height: 0.5em;
  border-top: 0.17em solid var(--tick, var(--cyan));
  border-right: 0.17em solid var(--tick, var(--cyan));
  transform: rotate(45deg);
}

.ticks--bold {
  font-weight: 700;
}

.ticks--cols {
  columns: 2 16rem;
  column-gap: 2.5rem;
}

.ticks--cols li {
  break-inside: avoid;
}

/* Numbered steps, for processes that genuinely happen in order. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0 0 1em;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  margin-bottom: 1rem;
  padding-left: 3.25rem;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--cyan);
  font-weight: 700;
}

/* Details still to be confirmed with the client. Highlighted so nobody
   mistakes them for finished copy, and caught by `npm run audit:launch`. */
.confirm {
  background: var(--confirm-bg);
  color: var(--navy);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-weight: 700;
  font-size: 0.9em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 2.75rem;
  padding: 0.5rem 1.5625rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--cyan);
  color: var(--navy);
  font-family: inherit;
  font-size: var(--step-btn);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.35s var(--ease),
    color 0.35s var(--ease),
    transform 0.15s var(--ease);
}

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

.btn:active {
  transform: translateY(1px);
}

.btn svg {
  width: 1.1em;
  height: 1.1em;
  flex: none;
}

.btn--dark {
  background: var(--navy);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--cyan);
  color: var(--navy);
}

.bg-cyan .btn--dark:hover {
  background: var(--white);
}

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

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

.btn--small {
  min-height: 2.5rem;
  padding: 0.35rem 1.1rem;
  font-size: 0.95rem;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ------------------------------------------------------------------------ */
/* The original's square anchor button, used once, at the foot of the hero. */
/* ------------------------------------------------------------------------ */

.anchor-action {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  background: var(--cyan);
  color: var(--navy);
  transition: background-color 0.3s var(--ease);
}

.anchor-action:hover {
  background: var(--white);
}

.anchor-action svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ------------------------------------------------------------------------ */
/* Forms                                                                     */
/* ------------------------------------------------------------------------ */

.field {
  display: grid;
  gap: 0.4rem;
}

.field label,
.field .label {
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
}

.field .optional {
  font-weight: 400;
  opacity: 0.85;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--field-border, transparent);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

.field textarea {
  min-height: 9.5rem;
  resize: vertical;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  border-color: var(--cyan);
  outline-offset: 2px;
}

.field .hint {
  font-size: 0.85rem;
  line-height: 1.45;
  opacity: 0.9;
}

.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: 0.9rem;
  line-height: 1.5;
}

.check input {
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--cyan);
}

/* ------------------------------------------------------------------------ */
/* Scroll reveal. Only hides content once JavaScript has confirmed it can     */
/* reveal it again, and never under reduced motion.                           */
/* ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.7s var(--ease),
      transform 0.7s var(--ease);
    transition-delay: var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-in {
    opacity: 1;
    transform: none;
  }
}