/* ============================================================
   companies.css — For Companies page (companies.html)

   Section order: hero → why → steps → offer → proof → faq → enquiry.
   Follows homepage decisions verbatim (see spec §6b):
   hero geometry from hero.css, tokens-only typography,
   card tiles as <img> layers, shadows on containers.
   ============================================================ */


/* ============================================================
   Page-local variables

   Not tokens — these are two measurements specific to this page's
   cards, kept here rather than in tokens.css because nothing else
   uses them. Both are load-bearing; the comments say why.
   ============================================================ */

:root {
  /* The offer and enquiry slabs share one width so they read as a pair
     down the page (the event card does the same across its own states).
     800px is a deliberate compromise: the add-on price sub-lines
     ("≈ €150 – €570 total") each want 182px to stay on one line, which
     would force the card back to ~888px. At 800 those two wrap to a
     second line — and because .companies-addon uses
     `grid-template-rows: subgrid`, all four wrap together and stay
     aligned, so it reads as a deliberate two-line row rather than a
     ragged one. Do not "fix" the wrap by widening this; the pairing is
     worth more than the single line. */
  --companies-card-w: 800px;

  /* Add-on artwork cap. Also the floor the add-on columns must not fall
     below, or the artwork gets scaled down instead of just inset — the
     tablet padding rule on .companies-offer exists to keep four columns
     above this all the way to 768px. */
  --companies-addon-icon-w: 119px;
}


/* ============================================================
   CompaniesHero
   ============================================================ */

.companies-hero {
  position: relative;
  width: 100%;
  /* Same canvas as the homepage hero — this hero carries the same
     payload (subtext + CTA + 3 tiles), so it gets the same height. */
  min-height: 105vh;
  background: var(--gradient-hero-corporate);
  /* Clipped sideways only. The tiles bleed off both edges by design and
     would otherwise widen the page — `overflow-x: hidden` on the body
     propagates to the viewport, so the body itself does not contain
     them. But they are also meant to hang past the BOTTOM edge and sit
     over the section below, which a plain `overflow: hidden` cut off in
     a straight line along the hero boundary. `clip` is what allows the
     two axes to differ: `hidden` would force this into a scroll
     container and drag the other axis to `auto`. Same pattern as
     .how-it-works-section. */
  overflow-x: clip;
  overflow-y: visible;
}

.navbar--in-flow {
  background: var(--color-glaze-sky-100);
}

.companies-hero__text {
  position: relative;
  z-index: 2;
  padding: var(--space-layout-xl) var(--space-layout-2xl);
  /* Clear the fixed navbar: 70px navbar + layout-xl top padding
     (identical to .hero__subtext on the homepage). */
  padding-top: calc(70px + var(--space-layout-xl));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-component-lg);
}

.ios-navbar-in-flow .companies-hero__text {
  padding-top: var(--space-layout-xl);
}

/* The one place body type runs at display scale, so it gets its own
   tracking and leading rather than the body defaults — open a little
   wider, set a little tighter. Mirrors .hero__subtext-text. */
.companies-hero__subtext {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-wide);
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  line-height: var(--type-leading-hero);
  color: var(--color-text-default);
  width: 600px;   /* same as the homepage subtext */
  max-width: 100%;
  margin: 0;
}

@media (max-width: 1199px) and (min-width: 768px) {
  .companies-hero__text { align-items: center; text-align: center; }
}

@media (max-width: 767px) {
  .companies-hero__text {
    align-items: center;
    text-align: center;
    padding-top: calc(65px + var(--space-layout-xl));
  }
  /* Same as the homepage: hand-placed line breaks are a desktop
     composition device — let the copy reflow on narrow screens. */
  .companies-hero__subtext { width: auto; }
  .companies-hero__subtext br { display: none; }
}


/* ── Tiles — absolutely positioned, bleed off edges ── */

.companies-hero__tiles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.companies-hero__tile {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(var(--shadow-tile));
}

.companies-hero__tile img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
}

/* Each tile is anchored to the edge its cut-off cuff/sleeve hangs over,
   so the cropped end is always off-screen (see companies-hero-animations.js):
     team-up        → right edge (grey cuff off-screen right, brush points left)
     log-off        → left edge  (blue cuff off-screen left,  brush points right)
     paint-together → right edge (yellow cuff off-screen right, mug points left)

   The geometry below is the homepage hero's, tile for tile — the three
   compositions map one-to-one onto it (hero.css):
     team-up        ↔ be-creative    (cuff top-right, brush down-left)
     log-off        ↔ get-together   (cuff top-left,  brush down-right)
     paint-together ↔ make-memories  (cuff right, object left)
   Aspect ratios match within 0.3% for the first two, so they take the
   homepage widths verbatim.

   paint-together is the exception. Its label lives inside the mug at
   ~70% of the tile's height, where make-memories' sits on the brush
   handle at ~60%, so the homepage box pushed "PAINT TOGETHER" under the
   divider hill and below the fold. It is therefore shrunk and lifted at
   every tier, holding a constant proportion of the viewport so the fix
   scales instead of being re-tuned per breakpoint:
     width   ≈ 0.61 × viewport width
     right   ≈ -0.28 × viewport width   (pushes the mug clear of LOG OFF's
                                         brush head, which the shrink would
                                         otherwise leave it sitting on)
     top     ≈ 0.32 × the shortest viewport height that tier sees
   Below 1200px the tiles are small enough relative to the canvas that
   they were hand-placed instead. */

/* Ultra-wide (≥ 2800px) */
.companies-hero__tile--team-up {
  right: -400px; top: -500px; width: 2237px;
  --tile-end-rotation: -9.84deg;
}
.companies-hero__tile--log-off {
  left: -343px; top: 200px; width: 2166px;
  --tile-end-rotation: -5.36deg;
}
.companies-hero__tile--paint-together {
  right: -798px; top: 430px; width: 1768px;
  --tile-end-rotation: -1.17deg;
}

@media (max-width: 2799.9px) and (min-width: 2400px) {
  .companies-hero__tile--team-up        { right: -300px; top: -450px; width: 2000px; }
  .companies-hero__tile--log-off        { left: -343px;  top: 270px;  width: 1932px; }
  .companies-hero__tile--paint-together { right: -709px; top: 400px;  width: 1572px; }
}

@media (max-width: 2399.9px) and (min-width: 2000px) {
  .companies-hero__tile--team-up        { right: -250px; top: -380px; width: 1750px; }
  .companies-hero__tile--log-off        { left: -343px;  top: 250px;  width: 1702px; }
  .companies-hero__tile--paint-together { right: -610px; top: 480px;  width: 1350px; }
}

@media (max-width: 1999.9px) and (min-width: 1600px) {
  .companies-hero__tile--team-up        { right: -200px; top: -286px; width: 1387px; --tile-end-rotation: -12.84deg; }
  .companies-hero__tile--log-off        { left: -343px;  top: 214px;  width: 1384px; }
  .companies-hero__tile--paint-together { right: -520px; top: 360px;  width: 1150px; }
}

@media (max-width: 1599.9px) and (min-width: 1200px) {
  .companies-hero__tile--team-up        { right: -180px; top: -250px; width: 1150px; --tile-end-rotation: -12.5deg; }
  .companies-hero__tile--log-off        { left: -300px;  top: 174px;  width: 1150px; }
  .companies-hero__tile--paint-together { right: -277px; top: 280px;  width: 950px; }
}

@media (max-width: 1199px) and (min-width: 768px) {
  .companies-hero__tile--team-up        { right: -370px; top: 80px;  width: 988px; --tile-end-rotation: 3.2deg; }
  .companies-hero__tile--log-off        { left: -362px;  top: 451px; width: 903px; }
  .companies-hero__tile--paint-together { right: -277px; top: 659px; width: 847px; }
}

@media (max-width: 767px) {
  .companies-hero__tile--team-up        { right: -220px; top: 158px; width: 535px; --tile-end-rotation: -3.85deg; }
  .companies-hero__tile--log-off        { left: -230px;  top: 369px; width: 536px; }
  .companies-hero__tile--paint-together { right: -231px; top: 522px; width: 541px; }
}

@media (max-width: 389px) {
  .companies-hero__tile--team-up        { top: 108px; }
  .companies-hero__tile--log-off        { top: 299px; }
  .companies-hero__tile--paint-together { top: 432px; }
}

/* Loading state — hidden until JS animates in */
.companies-hero--loading .companies-hero__tile,
.companies-hero--loading .companies-hero__text {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .companies-hero__tile {
    transform: rotate(var(--tile-end-rotation, 0deg)) !important;
    visibility: visible !important;
  }
  .companies-hero__text {
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* ============================================================
   Warm wrapper + shared section heading
   ============================================================ */

.companies-warm {
  position: relative; /* anchors the bottom section-divider */
  background: var(--color-surface-warm);
  padding-bottom: var(--space-layout-3xl);
}

.companies-heading {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-display);
  font-weight: var(--type-weight-regular);
  line-height: 1;
  color: var(--color-text-default);
  margin: 0 0 var(--space-layout-lg);
  text-align: center;
}


/* ============================================================
   Why a glazing workshop? — homepage cup cards

   The cups are .how-it-works-section markup reused verbatim, so all
   their sizing lives in how-it-works.css. Only two things differ here:
   this section has a heading above the cups, and .hiw-card-row is
   absolutely positioned at top: -150px (the cups deliberately overflow
   their section box), so the block needs top margin to clear the
   heading instead of colliding with it.
   ============================================================ */

/* No horizontal padding on the section itself: .how-it-works-section
   carries `overflow-x: clip` (so the oversized cup art can't cause a
   horizontal scrollbar). That clip happens at the element's own edges,
   so the cups must span the full viewport — exactly as on the homepage —
   or the clip reads as a visible container edge. The gutter therefore
   belongs to the heading, not to the section. */
.companies-why {
  padding: var(--space-layout-3xl) 0 0;
}

.companies-why > .companies-heading {
  padding-inline: var(--space-layout-2xl);
}

.companies-why__cups {
  margin-top: 190px;   /* clearance for the cups' upward overflow */
}

/* The homepage nudges the row left (48.3%) to suit its own headings;
   these headings are longer, so centre it and share the crop evenly. */
.companies-why__cups .hiw-card-row {
  left: 50%;
}

/* Tablet + mobile use .step-card-mobile, which sits at top: -140px —
   the heading needs that much clearance plus a gap. */
@media (max-width: 1359px) and (min-width: 768px) {
  .companies-why__cups { margin-top: 180px; }
}

@media (max-width: 767px) {
  .companies-why > .companies-heading { padding-inline: var(--space-layout-lg); }
  .companies-why__cups { margin-top: 180px; }
}


/* ============================================================
   How it works for companies — numbered glaze-dot steps
   ============================================================ */

/* A pink band inside the warm wrapper. Both boundaries are beige lobes
   hanging into the pink rather than pink pushing out — the same
   construction as the FAQ section further down, which does it in the
   corporate sky. Padding is divider height plus a layout gap on each
   side, so the curve never crowds the text however the divider is
   resized. --steps-divider-h must track the `.section-divider svg`
   height in dividers.css. */
.companies-steps {
  --steps-divider-h: 120px;
  position: relative; /* anchors both section-dividers */
  /* The homepage pink, not the corporate sky — this band is the one place
     the companies page borrows the homepage's warmth back. */
  background: var(--gradient-steps-pink);
  padding:
    calc(var(--steps-divider-h) + var(--space-layout-3xl))
    var(--space-layout-2xl)
    calc(var(--steps-divider-h) + var(--space-layout-3xl));
}

.companies-steps__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-layout-lg);
  max-width: 720px;
  margin: 0 auto;
}

.companies-step {
  display: flex;
  align-items: flex-start;
  gap: var(--space-component-xl);
}

.companies-step__dot {
  width: 64px;
  height: auto;
  flex-shrink: 0;
  opacity: 0; /* blink-in via JS */
}

.companies-step__text {
  opacity: 0; /* fade-in via JS */
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
}

.companies-step__heading {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  line-height: 1.1;
  color: var(--color-text-default);
  margin: 0;
}

.companies-step__body {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  line-height: 1.45;
  color: var(--color-text-default);
  margin: 0;
}

@media (max-width: 1359px) and (min-width: 768px) {
  .companies-steps { --steps-divider-h: 80px; }
}

@media (max-width: 767px) {
  /* Smaller gap above than below: the why-cups already sit close on
     mobile, so a full 3xl on top reads as dead space rather than
     clearance. */
  .companies-steps {
    --steps-divider-h: 60px;
    padding:
      calc(var(--steps-divider-h) + var(--space-layout-xl))
      var(--space-layout-lg)
      calc(var(--steps-divider-h) + var(--space-layout-3xl));
  }
  .companies-step__dot { width: 52px; }
}

@media (prefers-reduced-motion: reduce) {
  .companies-step__dot,
  .companies-step__text { opacity: 1 !important; }
}

/* ============================================================
   The Workshop — banner, offer card, ladder, add-ons
   ============================================================ */

.companies-offer {
  position: relative;
  /* Clipped sideways only — see .companies-hero for why `clip` rather
     than `hidden`. The banner is anchored well above this section's top
     edge, so clipping vertically drew a straight cut along the boundary
     with the blue steps band instead of letting the hand overlap it. */
  overflow-x: clip;
  overflow-y: visible;
  padding: 0 var(--space-layout-2xl);
  padding-top: 380px;        /* reserves the band the banner's brush occupies */
}

/* Oversized, absolutely positioned, anchored past the left edge — the
   hand runs off-screen and only the brush carrying "FOR COMPANIES"
   reads large (same treatment as .upcoming-events-banner). */
.companies-banner {
  position: absolute;
  /* Pushed far up/left: the hand runs off both edges and only the brush
     band carrying "FOR COMPANIES" lands in the section's reserved padding. */
  top: -620px;
  left: -880px;
  width: 1900px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(var(--shadow-tile));
  visibility: hidden; /* slides in via JS */
}

.companies-banner__img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;    /* override base.css img { max-width: 100% } */
}

@media (max-width: 1359px) and (min-width: 768px) {
  .companies-offer  { padding-top: 290px; }
  .companies-banner { top: -460px; left: -660px; width: 1420px; }
}

@media (max-width: 767px) {
  .companies-offer  { padding-top: 190px; }
  .companies-banner { top: -280px; left: -400px; width: 880px; }
}

.companies-offer__card {
  position: relative;
  max-width: var(--companies-card-w);
  margin: 0 auto;
  filter: drop-shadow(var(--shadow-tile));
  visibility: hidden; /* stop-motion entrance */
}

.companies-offer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* `fill` stretches the tile instead of cropping it, so the ceramic's
     own rounded corners stay visible at any card aspect ratio. */
  object-fit: fill;
}

.companies-offer__content {
  position: relative;
  padding: var(--space-layout-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-component-lg);
}

.companies-offer__title {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h1);
  font-weight: var(--type-weight-regular);
  line-height: 1.05;
  color: var(--color-text-default);
  margin: 0;
}

.companies-offer__lede {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  line-height: 1.5;
  color: var(--color-text-default);
  margin: 0;
  max-width: 620px;
}

/* ── Price ladder — the group-size input ── */

.companies-ladder__prompt {
  font-family: var(--type-family-body);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--type-track-wide);
  color: var(--color-text-muted);
  margin: 0 0 calc(-1 * var(--space-component-sm));
}

.companies-ladder {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  max-width: 480px;
}

/* Rows are <label>s wrapping a radio — the whole row is the hit area. */
.companies-ladder__row {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  padding: var(--space-component-sm);
  margin-left: calc(-1 * var(--space-component-sm));
  border-bottom: 1px solid var(--color-surface-muted);
  border-radius: var(--radius-button);
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  transition: background-color 0.15s ease;
}

.companies-ladder__row:hover {
  background-color: rgba(0, 0, 0, 0.035);
}

.companies-ladder__row--selected {
  background-color: rgba(0, 0, 0, 0.055);
}

/* Visually hidden, but still focusable so keyboard users get the
   native radiogroup: arrow keys move between bands. */
.companies-ladder__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.companies-ladder__row:focus-within {
  outline: 2px solid var(--color-text-default);
  outline-offset: 2px;
}

.companies-ladder__token {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  opacity: 0; /* stepped pop-in via JS */
  transition: transform 0.15s ease;
}

.companies-ladder__row--selected .companies-ladder__token {
  transform: scale(1.12);
}

.companies-ladder__size {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-muted);
  flex: 1;
}

.companies-ladder__price {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h2);
  color: var(--color-text-muted);
}

/* Only the chosen band reads at full strength — the rest stay legible
   (the volume discount is the argument) but visibly unselected. */
.companies-ladder__row--selected .companies-ladder__size,
.companies-ladder__row--selected .companies-ladder__price {
  color: var(--color-text-default);
}

.companies-ladder__price small {
  font-size: 0.55em;
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
}

.companies-ladder__note {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  margin: 0;
}

.companies-ladder__note a {
  color: var(--color-text-default);
}

/* ── Add-ons ── */

.companies-offer__addons-title {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h2);
  font-weight: var(--type-weight-regular);
  color: var(--color-text-default);
  margin: var(--space-component-lg) 0 0;
}

.companies-offer__addons-lede {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-muted);
  margin: calc(-1 * var(--space-component-md)) 0 0;
}

/* Subgrid, because the four tiles differ in both image height and label
   length ("your logo on the pieces" wraps, the others don't). Sharing the
   parent's rows lands every label, price and alt-price on the same line
   across the row instead of drifting per tile. */
.companies-addons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: var(--space-component-lg);
  row-gap: var(--space-component-sm);
}

.companies-addon {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  justify-items: center;
  visibility: hidden; /* stop-motion entrance */
}

.companies-addon__tile {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--companies-addon-icon-w);
  /* Shorter tiles sit on the same shelf as the tall ones. */
  align-self: end;
  filter: drop-shadow(var(--shadow-tile)) grayscale(0.35) opacity(0.75);
}

.companies-addon[aria-pressed="true"] .companies-addon__tile {
  filter: drop-shadow(var(--shadow-tile));
}

.companies-addon__img {
  display: block;
  width: 100%;
  height: auto;
}

.companies-addon__tick {
  position: absolute;
  right: -8px;
  bottom: -8px;
  width: 34px;
  height: auto;
  display: none;
}

.companies-addon[aria-pressed="true"] .companies-addon__tick {
  display: block;
}

.companies-addon__label {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-default);
  text-align: center;
}

/* Two price lines per tile: the unit this add-on is sold in, then the
   same figure in the other unit so a flat café fee also reads per head. */
.companies-addon__price {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-default);
  text-align: center;
}

.companies-addon__price-alt {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
  text-align: center;
}

/* ── Rough total ── */

.companies-estimate {
  border-top: 1px solid var(--color-surface-muted);
  padding-top: var(--space-component-lg);
  max-width: 520px;
}

.companies-estimate__title {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h3);
  font-weight: var(--type-weight-regular);
  color: var(--color-text-default);
  margin: 0 0 var(--space-component-md);
}

.companies-estimate__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
}

.companies-estimate__line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  /* The base line's label is long ("25–30 people × €40 pp") and its
     figure can't break; on a narrow card the figure drops to its own
     line rather than crowding the label. */
  flex-wrap: wrap;
  column-gap: var(--space-component-md);
  row-gap: 0;
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-muted);
}

.companies-estimate__line--base {
  color: var(--color-text-default);
}

.companies-estimate__line-value {
  white-space: nowrap;
  margin-left: auto; /* stays right-aligned once it wraps to its own line */
}

.companies-estimate__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-component-md);
  margin-top: var(--space-component-md);
  padding-top: var(--space-component-md);
  border-top: 1px solid var(--color-surface-muted);
}

.companies-estimate__total-label {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
}

.companies-estimate__total-value {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h2);
  color: var(--color-text-default);
  white-space: nowrap;
}

.companies-estimate__caveat {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  line-height: 1.4;
  color: var(--color-text-muted);
  margin: var(--space-component-sm) 0 0;
}

/* "We invoice your company" is a bigger unlock for an HR buyer than a
   few euros per head, so it sits with the total rather than in the FAQ. */
.companies-estimate__reassurance {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  line-height: 1.5;
  color: var(--color-text-default);
  margin: 0;
  max-width: 520px;
}

/* Centred at every breakpoint, like the booking flow's CTA
   (.booking-step .booking-cta) — and like the enquiry submit below, so the
   two slabs on this page agree with each other as well as with the events
   page. This used to be flex-start on desktop and centre on mobile. */
.companies-offer__cta {
  align-self: center;
  /* Tops up the container's flex `gap` so the space above the button
     matches the padding below it (the container's own bottom padding) —
     equal breathing room on both sides rather than a bigger gap tacked
     onto only one. */
  margin-top: calc(var(--space-component-xl) - var(--space-component-lg));
}

/* Tablet — the tier this section never had. --space-layout-2xl only steps
   down below 768px, so at 820px the section was still holding 100px a side
   and squeezing the card to 620px: the add-on columns fell to 115px (below
   the icon's own width, so the artwork got scaled down) and the labels blew
   out to three lines. Dropping to --space-layout-lg here is what
   .events-card-list does at the same breakpoint, and it gives the card
   ~110px back — enough that four columns stay above the icon width all the
   way down to 768px. */
@media (max-width: 1359px) and (min-width: 768px) {
  .companies-offer {
    padding-left: var(--space-layout-lg);
    padding-right: var(--space-layout-lg);
  }
}

@media (max-width: 767px) {
  .companies-offer {
    padding-left: var(--space-layout-lg);
    padding-right: var(--space-layout-lg);
  }
  .companies-offer__content {
    padding: var(--space-component-xl);
  }
  .companies-addons { grid-template-columns: repeat(2, 1fr); }
  /* Two per row means two rows of tiles — keep them apart. */
  .companies-addon { margin-bottom: var(--space-component-lg); }
  /* A breakdown row is label + a nowrap figure; at body size the two
     collide on a 375px screen. */
  .companies-estimate__line { font-size: var(--type-size-caption); }
}

@media (prefers-reduced-motion: reduce) {
  .companies-banner,
  .companies-offer__card,
  .companies-addon { visibility: visible !important; }
  .companies-ladder__token { opacity: 1 !important; }
}


/* ============================================================
   Proof — testimonial + photo strip
   ============================================================ */

.companies-proof {
  position: relative; /* anchors the bottom section-divider */
  background: var(--color-surface-page);
  padding: var(--space-layout-3xl) var(--space-layout-2xl);
  padding-bottom: calc(var(--space-layout-3xl) + 120px); /* divider clearance */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-layout-lg);
}

/* Three fixed-width cards plus gaps come to ~1315px, but this section pads
   100px a side where the homepage's pads none — enough to clip the third
   card on a 1440px screen that has room for it. Pull the row back out to
   the full viewport (the calc cancels whatever side padding is in play, so
   it needs no per-breakpoint upkeep) and let it scroll below that.
   `safe center` centres the row when it fits but falls back to flex-start
   when it overflows, so the first card can never end up unreachable off
   the scroll container's left edge. The row's own T/B padding keeps the
   card shadows inside the scroll box. */
.companies-proof .testimonials-row {
  align-self: stretch;
  /* social-proof.css pins width to 100% in its tablet rule; with the
     negative margins here that would shift the row instead of widening it. */
  width: auto;
  margin-inline: calc(50% - 50vw);
  justify-content: safe center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.companies-proof .testimonials-row::-webkit-scrollbar {
  display: none;
}

/* Grid rather than wrap: with four photos, flex-wrap would break to a 3+1
   row and leave a widow. Explicit column counts step 4 → 2×2 → 1, so every
   row is always full. Tracks are minmax(0, …) so they shrink instead of
   overflowing between breakpoints. */
.companies-proof__photos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 260px));
  gap: var(--space-component-lg);
  justify-content: center;
  width: 100%;
}

/* Four 260px columns plus gaps come to 1112px, and this section pads 100px
   a side — below ~1320px they would start being squeezed, so go 2×2. */
@media (max-width: 1319px) {
  .companies-proof__photos {
    grid-template-columns: repeat(2, minmax(0, 260px));
  }
}

.companies-proof__photo {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-tile);
}

.companies-proof__photo img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .companies-proof { padding: var(--space-layout-3xl) var(--space-layout-lg); }
  .companies-proof__photos { grid-template-columns: minmax(0, 340px); }
}


/* ============================================================
   Corporate FAQ — About-section details pattern, page-scoped
   ============================================================ */

/* Values mirror .about-faq in about.css exactly — same borders, type,
   spacing, chevron and the animated underline on the open question.
   The open/close motion is the shared GSAP accordion in faq-accordion.js. */

.companies-faq {
  position: relative; /* anchors the bottom section-divider */
  background: var(--color-surface-bold-corporate);
  padding: var(--space-layout-3xl) 0;
  padding-bottom: calc(var(--space-layout-3xl) + 120px); /* divider clearance */
}

.companies-faq > .companies-heading {
  padding-inline: var(--space-layout-2xl);
}

.companies-faq__list {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-layout-xl);
  box-sizing: border-box;
  text-align: left;
}

.companies-faq__item {
  border-bottom: 1px solid var(--color-glaze-sky-200);
}

.companies-faq__item:first-of-type {
  border-top: 1px solid var(--color-glaze-sky-200);
}

.companies-faq__question {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body-lg);
  font-weight: var(--type-weight-medium);
  color: var(--color-text-default);
  padding: 20px 0;
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.companies-faq__question::-webkit-details-marker {
  display: none;
}

.companies-faq__question-text {
  position: relative;
}

/* Underline wipes in from the left while the answer is open */
.companies-faq__question-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s ease;
}

/* Chevron — CSS borders, rotates 45deg → -135deg on open */
.companies-faq__question::after {
  content: '';
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--color-text-default);
  border-bottom: 1.5px solid var(--color-text-default);
  transform: rotate(45deg);
  margin-left: 16px;
  flex-shrink: 0;
  transition-property: transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

.companies-faq__item--active .companies-faq__question-text::after {
  transform: scaleX(1);
  transform-origin: left;
}

.companies-faq__item[open] .companies-faq__question::after {
  transform: rotate(-135deg);
}

/* Answer — height + fade managed by GSAP */
.companies-faq__answer {
  overflow: hidden;
  height: 0;
  padding: 0 0 20px;
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-regular);
  line-height: 1.6;
  color: var(--color-text-default);
  text-wrap: pretty;
}

.companies-faq__answer p { margin: 0; }

@media (max-width: 767px) {
  .companies-faq__list {
    max-width: none;
    padding: 0 20px;
  }

  .companies-faq__question {
    font-size: var(--type-size-body);
    padding: 16px 0;
  }
}


/* ============================================================
   Enquiry — form on cream slab
   ============================================================ */

/* position: relative is load-bearing, not cosmetic: the preceding
   section's divider is absolutely positioned with z-index 0, so a static
   section here would paint *below* it and expose the shadow cast by the
   divider's flat bottom edge as a hard line. Every section that follows
   a divider is positioned for this reason (see the homepage sections). */
.companies-enquiry {
  position: relative;
  background: var(--color-surface-warm);
  padding: var(--space-layout-3xl) var(--space-layout-2xl);
}

/* Tablet — same missing tier as .companies-offer above: --space-layout-2xl
   holds 100px a side until 768px, needlessly narrowing the slab. Matches
   .events-card-list at this breakpoint. */
@media (max-width: 1359px) and (min-width: 768px) {
  .companies-enquiry {
    padding-left: var(--space-layout-lg);
    padding-right: var(--space-layout-lg);
  }
}

.companies-enquiry__card {
  position: relative;
  max-width: var(--companies-card-w);
  margin: 0 auto;
  filter: drop-shadow(var(--shadow-tile));
  visibility: hidden; /* stop-motion entrance */
}

.companies-enquiry__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill; /* keep the tile's rounded corners — see offer card */
}

.companies-enquiry__form {
  position: relative;
  padding: var(--space-layout-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
}

/* ── "Your brief" — the offer card's selection, shown back ── */

.enquiry-brief {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding: var(--space-component-lg);
  margin-bottom: var(--space-component-sm);
  border: 1px solid var(--color-skin-800);
  border-radius: var(--radius-button);
}

.enquiry-brief__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-component-md);
}

.enquiry-brief__title {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h3);
  font-weight: var(--type-weight-regular);
  color: var(--color-text-default);
  margin: 0;
}

.enquiry-brief__edit {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-caption);
  font-weight: var(--type-weight-semibold);
  text-transform: uppercase;
  color: var(--color-text-link);
  text-decoration: underline;
}

.enquiry-brief__size {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  margin: 0;
}

.enquiry-brief__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-component-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Tapping a chip removes the extra — and because the selection lives in
   companies-quote.js, the tile up in the offer card unticks with it. */
.enquiry-brief__chip {
  appearance: none;
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-component-xs);
  padding: var(--space-component-xs) var(--space-component-sm);
  border: 1px solid var(--color-glaze-sky-200);
  border-radius: var(--radius-button);
  background: var(--color-surface-muted);
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-default);
}

.enquiry-brief__chip:hover {
  background: var(--color-glaze-sky-200);
}

.enquiry-brief__chip-x {
  font-size: 1.15em;
  line-height: 1;
  color: var(--color-text-muted);
}

.enquiry-brief__total {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  font-weight: var(--type-weight-semibold);
  color: var(--color-text-default);
  margin: 0;
}

.enquiry-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-xs);
  width: 100%;
}

.enquiry-field__label {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-muted);
}

.enquiry-field__optional { opacity: 0.5; }

.enquiry-field input[type="text"],
.enquiry-field input[type="email"],
.enquiry-field textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--type-family-nav);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  padding: var(--space-component-md) var(--space-component-sm);
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.enquiry-field textarea { resize: vertical; }

.enquiry-field input:focus,
.enquiry-field textarea:focus {
  border-color: var(--color-skin-800);
  background: var(--color-surface-subtle);
}

.enquiry-field--error input {
  border-color: var(--color-glaze-ember-600);
}

/* Matches .booking-input-field__error: same 12px "!" disc beside the text,
   so the error does not rely on red alone to signal the state. Booking
   ships the disc as an inline SVG because its markup is built in JS; these
   errors are static in the template, so drawing it in CSS keeps the icon
   out of the markup entirely — the same trade the FAQ chevron makes. */
.enquiry-field__error {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-glaze-ember-600);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-component-xs);
}

/* A class rule with `display: flex` beats the [hidden] attribute's UA
   `display: none` — same trap as .companies-enquiry__success below. */
.enquiry-field__error[hidden] { display: none; }

.enquiry-field__error::before {
  content: '!';
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  line-height: 1;
}

.enquiry-field__help {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  color: var(--color-text-faint);
  margin: 0;
}

.enquiry-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-md);
}

@media (min-width: 768px) {
  .enquiry-row { flex-direction: row; }
  .enquiry-row > .enquiry-field { flex: 1 1 0; min-width: 0; }
}

/* Group-size stepper — booking-qty pattern */

.enquiry-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-component-lg);
}

.enquiry-stepper__btn {
  appearance: none;
  background: var(--color-surface-muted);
  border: none;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
  display: grid;
  place-items: center;
}

.enquiry-stepper__btn:active { background: var(--color-surface-subtle); }

.enquiry-stepper__btn img { width: 16px; height: auto; }

.enquiry-stepper__value {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h1);
  color: var(--color-text-default);
  min-width: 64px;
  text-align: center;
}

/* Where? — tile radios */

.enquiry-where {
  display: flex;
  gap: var(--space-component-md);
  flex-wrap: wrap;
}

.enquiry-where__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.enquiry-where__tile {
  display: inline-block;
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  padding: var(--space-component-sm) var(--space-component-lg);
  background: var(--color-surface-muted);
  border: 1px solid transparent;
  border-radius: var(--radius-card);
  cursor: url('/public/images/ui/cursor-pointer.webp?v=2') 19 10, pointer;
}

.enquiry-where__option input:checked + .enquiry-where__tile {
  border-color: var(--color-skin-800);
  background: var(--color-surface-subtle);
}

.enquiry-where__option input:focus-visible + .enquiry-where__tile {
  outline: 2px solid var(--color-skin-800);
  outline-offset: 2px;
}

.companies-enquiry__error {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-caption);
  margin: 0;
  color: var(--color-glaze-ember-600);
}

.companies-enquiry__submit {
  align-self: center;
  /* Tops up the form's flex `gap` so the space above the button matches
     the padding below it (the form's own bottom padding). */
  margin-top: calc(var(--space-component-xl) - var(--space-component-md));
}

/* Sent state — the form stays on the slab as a read-only record of what
   was sent, greyed back so the confirmation below it carries the eye.
   The whole state is declarative here rather than tweened, so it holds
   even if the JS transition never runs. `inert` (set in
   companies-form.js) takes it out of the tab order; pointer-events is
   the belt to that braces. */

.companies-enquiry__form--sent {
  opacity: 0.4;
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}

@media (prefers-reduced-motion: no-preference) {
  .companies-enquiry__form {
    transition: opacity 0.45s ease, filter 0.45s ease;
  }
}

/* Success state — appears under the spent form on the same slab */

.companies-enquiry__success {
  position: relative;
  padding: 0 var(--space-layout-lg) var(--space-layout-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-component-md);
}

/* A class rule beats the [hidden] attribute's UA `display: none`, so the
   confirmation needs to opt back out explicitly or it shows on load. */
.companies-enquiry__success[hidden] { display: none; }

.companies-enquiry__success-tick { width: 56px; height: auto; }

.companies-enquiry__success-title {
  font-family: var(--type-family-display);
  letter-spacing: var(--type-track-display);
  font-size: var(--type-size-h1);
  font-weight: var(--type-weight-regular);
  color: var(--color-text-default);
  margin: 0;
}

.companies-enquiry__success-body {
  font-family: var(--type-family-body);
  letter-spacing: var(--type-track-body);
  font-size: var(--type-size-body);
  color: var(--color-text-default);
  margin: 0;
  max-width: 420px;
}

@media (max-width: 767px) {
  .companies-enquiry { padding: var(--space-layout-3xl) var(--space-layout-lg); }
  .companies-enquiry__form {
    padding: var(--space-component-xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .companies-enquiry__card { visibility: visible !important; }
}