/* ==========================================================================
   Kilowattic corporate site
   Page styles layered on top of the Kilowattic design system tokens.
   Load order is fonts, colors, typography, spacing, radius, elevation, motion,
   layout, base, kilowattic.components, then this file. Everything here resolves
   to a token; no raw values that are not in the brand guidelines.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */

html {
  scroll-behavior: smooth;
  /* -webkit-text-size-adjust stops iOS Safari inflating type in landscape,
     which would break the clamp() scale the brand relies on. */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kw-white);
  /* The hero headline and the cookie banner both sit near the viewport edges;
     overflow-x guards against a stray wide child scrolling the page sideways. */
  overflow-x: hidden;
}

/* base.css rules every anchor with a blue border. That is right for the brand
   card links, where the README calls for a rule with deliberate clearance, and
   wrong everywhere the design draws its own treatment. Reset here, restore per
   component. */
a {
  border-bottom: 0;
}

img {
  max-width: 100%;
}

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

.container {
  max-width: var(--container-max);
  margin: 0 auto;
}

.section {
  padding: clamp(64px, 8vw, 112px) var(--gutter);
  /* Anchored jumps have to clear the 76px fixed header. */
  scroll-margin-top: 92px;
}

.section--light { background: var(--kw-white); }
.section--dark  { background: var(--kw-deep-blue); }

/* Accessible skip link. Visible only once focused. */
.skip-link {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 80;
  background: var(--kw-blue);
  color: var(--kw-white);
  font: var(--weight-body-semibold) var(--text-caption) / 1 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: var(--radius-md);
  transition: top var(--dur-fast) var(--ease-standard);
}

.skip-link:focus {
  top: calc(var(--header-height) + 12px);
  color: var(--kw-white);
}

/* Inline icon sprite. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: inherit;
}

.icon--sm { width: 20px; height: 20px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Eyebrow
   In "What we do" and "Our brands" the eyebrow is the section's only headline,
   so it is marked up as an h2. These two declarations keep it looking identical
   to the paragraph version by overriding what base.css gives an h2.
   -------------------------------------------------------------------------- */

h2.kw-eyebrow {
  line-height: 1.5;
  font-weight: var(--weight-body-semibold);
}

.kw-eyebrow__rule {
  width: 24px;
  height: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   .kw-btn comes from the design system. Two page-level additions: the hero pill
   never wraps below its icon, and buttons on Deep Blue take the white focus ring.
   -------------------------------------------------------------------------- */

.kw-btn .icon {
  width: 20px;
  height: 20px;
}

.kw-btn--lg .icon {
  width: 22px;
  height: 22px;
}

/* --------------------------------------------------------------------------
   Header
   Fixed, 76px, solid Deep Blue. The brand forbids transparency and backdrop blur.
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--kw-deep-blue);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.site-header__bar {
  /* Padding sits inside this box, so it is two gutters wider than .container.
     That puts the logo on the same left edge as the section content below. */
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: var(--header-height);
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-header__logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.site-header__logo img {
  width: 148px;
  height: auto;
  display: block;
}

.site-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  font: var(--weight-display-semibold) var(--text-caption) / 1 var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-inverse-muted);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--kw-white);
}

/* Menu toggle, shown at or below 880px. */
.site-header__toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-sm);
  color: var(--kw-white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.site-header__toggle:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--kw-white);
}

.site-header__toggle .icon--close { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--open  { display: none; }
.site-header__toggle[aria-expanded="true"] .icon--close { display: inline-block; }

.site-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 12px var(--gutter) var(--gutter);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.site-menu[data-open="true"] {
  display: flex;
}

.site-menu__link {
  font: var(--weight-display-semibold) 15px / 1 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kw-white);
  text-decoration: none;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-menu__link:last-child {
  color: var(--kw-blue);
  border-bottom: 0;
}

/* Five nav items only just fit above the switch, so the gaps close up first. */
@media (max-width: 1040px) {
  .site-nav { gap: 22px; }
}

/* The single layout switch. Anchors above 880px, menu button at or below. */
@media (max-width: 880px) {
  .site-nav { display: none; }
  .site-header__toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   Hero
   Four layers: footage, protection gradient, optional scrim, content.
   Nothing in the layout depends on the footage having loaded or played.
   -------------------------------------------------------------------------- */

.site-main {
  padding-top: var(--header-height);
}

/* Target of the skip link. Focusable without ever showing a ring around the
   whole page. */
.site-main:focus {
  outline: none;
}

.hero {
  position: relative;
  min-height: clamp(540px, 86vh, 880px);
  display: flex;
  align-items: flex-end;
  background: var(--kw-deep-blue);
  overflow: hidden;
  scroll-margin-top: 92px;
}

/* Layer 1: footage, mounted by site.js only when a source is configured. */
.hero__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}

.hero__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Keep the action in the upper two thirds; the lower third carries the headline. */
  object-position: center 40%;
}

/* Layer 2: protection gradient. */
.hero__protect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 34, 85, 0.82) 0%,
    rgba(0, 34, 85, 0.42) 34%,
    rgba(0, 34, 85, 0.94) 100%);
}

/* Layer 3: scrim. light 0, balanced 0.16, heavy 0.34. Balanced ships. */
.hero__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--kw-deep-blue);
  opacity: 0.16;
}

.hero[data-scrim="light"] .hero__scrim { opacity: 0; }
.hero[data-scrim="heavy"] .hero__scrim { opacity: 0.34; }

/* Layer 4: content. */
.hero__inner {
  position: relative;
  width: 100%;
  /* As .site-header__bar: widened by the gutters it pads itself with, so the
     hero text starts on the same edge as .container in the sections below. */
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(88px, 14vh, 160px) var(--gutter) clamp(56px, 8vh, 88px);
}

.hero__eyebrow {
  font: var(--weight-body-semibold) var(--text-eyebrow) / 1.5 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kw-blue);
  margin: 0 0 clamp(20px, 3vw, 30px);
}

.hero__title {
  font: var(--weight-display-black) clamp(38px, 6.6vw, 84px) / 1.02 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--kw-white);
  margin: 0;
  max-width: 15ch;
  text-wrap: balance;
}

.hero__body {
  font: var(--weight-body-regular) clamp(16px, 1.5vw, 19px) / 1.6 var(--font-body);
  /* Full-opacity white: legibility over footage beats the usual muted tone. */
  color: var(--kw-white);
  margin: clamp(20px, 3vw, 30px) 0 clamp(28px, 4vw, 40px);
  max-width: 54ch;
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
}

.hero__email {
  font: var(--weight-body-regular) 15px / 1 var(--font-body);
  color: var(--kw-white);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  padding-bottom: 4px;
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.hero__email:hover {
  color: var(--kw-white);
  border-bottom-color: var(--kw-white);
}

/* --------------------------------------------------------------------------
   What we do
   -------------------------------------------------------------------------- */

/* Every grid on the page is repeat(auto-fit, minmax(N, 1fr)) and collapses to a
   single column on its own. The min(Npx, 100%) guard is what stops a track wider
   than the viewport on a very narrow phone, where the brief's bare minmax(300px)
   would push the page 4px sideways. Identical at every width above that. */
.outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(248px, 100%), 1fr));
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(32px, 4vw, 52px);
}

/* The design system badge is 48px; the site spec fixes it at 44px. */
.outcomes .kw-outcome__badge {
  width: 44px;
  height: 44px;
}

/* The design system title is an H2 at 28px/700 in Deep Blue; the site spec
   fixes card titles at Montserrat 600, 20px, Charcoal. */
.outcomes .kw-outcome__title {
  font-size: var(--text-h3);
  line-height: var(--lh-h3);
  font-weight: var(--weight-display-semibold);
  color: var(--kw-charcoal);
}

.outcomes .kw-outcome__body {
  color: var(--kw-charcoal);
}

/* Four cards on the Our Offer page. Fixed steps rather than auto-fit, which
   would leave three cards and an orphan at some widths. */
.outcomes--four {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
  .outcomes--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .outcomes--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Homepage pointer to the Our Offer page, closing the What we do section. */
.offer-teaser {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--kw-deep-blue);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 48px;
}

.offer-teaser__copy {
  flex: 1 1 420px;
  max-width: 62ch;
}

.offer-teaser__title {
  font: var(--weight-display-bold) clamp(22px, 2.4vw, 30px) / 1.2 var(--font-display);
  letter-spacing: var(--ls-h2);
  color: var(--kw-white);
  margin: 14px 0 0;
  text-wrap: balance;
}

.offer-teaser__body {
  font: var(--weight-body-regular) clamp(15px, 1.3vw, 17px) / 1.6 var(--font-body);
  color: var(--text-inverse-muted);
  margin: 12px 0 0;
  text-wrap: pretty;
}

.offer-teaser a:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus-inverse);
}

/* --------------------------------------------------------------------------
   Our brands
   Sits under a rule, with no top padding of its own.
   -------------------------------------------------------------------------- */

/* .section--ruled is the same treatment for any light section that follows
   another light section. */
.section--brands,
.section--ruled {
  padding-top: 0;
  padding-bottom: clamp(64px, 8vw, 112px);
}

.section--brands > .container,
.section--ruled > .container {
  border-top: 1px solid var(--kw-soft-grey);
  padding-top: clamp(56px, 7vw, 96px);
}

.brands {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-top: clamp(32px, 4vw, 52px);
}

.brand-card {
  background: var(--kw-mist);
  border: 1px solid var(--kw-soft-grey);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.4vw, 44px);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* A fixed 64px box in both cards so the two marks and the copy below them line
   up across the pair, whatever height each logo renders at. */
.brand-card__logo {
  height: 64px;
  display: flex;
  align-items: center;
}

.brand-card__logo img {
  width: auto;
  display: block;
}

.brand-card__logo--evlife img  { height: 64px; }
.brand-card__logo--driveev img { height: 56px; }

.brand-card__body {
  font: var(--weight-body-regular) clamp(16px, 1.4vw, 18px) / 1.6 var(--font-body);
  color: var(--kw-charcoal);
  margin: 0;
  max-width: 34ch;
  text-wrap: pretty;
}

.brand-card__link {
  margin-top: auto;
  display: block;
  font: var(--weight-body-semibold) var(--text-caption-sm) / 1 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kw-deep-blue);
  text-decoration: none;
  /* The clearance between the link and its rule is deliberate. */
  padding-bottom: 12px;
  border-bottom: 1px solid var(--kw-blue);
  transition: color var(--dur-fast) var(--ease-standard);
}

.brand-card__link:hover {
  color: var(--kw-blue);
}

.partners {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 16px 48px;
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: 28px;
  border-top: 1px solid var(--kw-soft-grey);
}

.partners__label {
  font: var(--weight-body-semibold) var(--text-caption-sm) / 1.5 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kw-slate);
  margin: 0;
}

.partners__names {
  font: var(--weight-display-semibold) clamp(17px, 1.7vw, 22px) / 1.3 var(--font-display);
  color: var(--kw-deep-blue);
  margin: 0;
}

.partners__names span {
  color: var(--kw-soft-grey);
  padding: 0 12px;
}

/* The partner names carry the same rule as the brand card links directly above,
   so they read as links. Colour alone would not: they are already Deep Blue,
   the same as the surrounding text. */
.partners__names a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--kw-blue);
  padding-bottom: 4px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.partners__names a:hover {
  color: var(--kw-blue);
}

/* --------------------------------------------------------------------------
   Where we operate
   -------------------------------------------------------------------------- */

.operate__title {
  font: var(--weight-display-bold) clamp(26px, 3.2vw, 40px) / 1.15 var(--font-display);
  letter-spacing: var(--ls-h2);
  color: var(--kw-white);
  margin: 18px 0 0;
  max-width: 20ch;
  text-wrap: balance;
}

.operate__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
}

/* The map is baked SVG inlined into the page, so it inherits the site fonts and
   costs no extra request. Transparent ground; the Deep Blue band shows through. */
.map {
  width: 100%;
  aspect-ratio: 1.4;
}

.map__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: clamp(28px, 3.4vw, 44px);
}

/* The design system stat label is tracked capitals; the site spec calls for
   sentence case on this band. */
.stats .kw-stat__label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-caption);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.72);
}

.operate__source {
  font-size: var(--text-caption-sm);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  margin: clamp(28px, 3.5vw, 44px) 0 0;
}

/* On the Our Offer page the stats run as a band of their own, without the map. */
.stats--band {
  margin-top: clamp(32px, 4vw, 56px);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(36px, 5vw, 80px);
  align-items: start;
}

.contact__title {
  font: var(--weight-display-bold) clamp(32px, 4.4vw, 56px) / 1.08 var(--font-display);
  letter-spacing: var(--ls-h1);
  color: var(--kw-charcoal);
  margin: 18px 0 0;
}

.contact__body {
  font: var(--weight-body-regular) clamp(16px, 1.5vw, 19px) / 1.6 var(--font-body);
  color: var(--kw-charcoal);
  margin: 20px 0 32px;
  max-width: 34ch;
}

.contact__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: var(--weight-display-semibold) clamp(16px, 1.6vw, 20px) / 1 var(--font-display);
  color: var(--kw-deep-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--kw-blue);
  padding-bottom: 8px;
  transition: color var(--dur-fast) var(--ease-standard);
}

.contact__mail:hover {
  color: var(--kw-blue);
}

.contact__panel {
  background: var(--kw-mist);
  border: 1px solid var(--kw-soft-grey);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Field padding on this form is wider than the design system default. */
.contact-form .kw-input {
  padding: 12px 20px;
  font: var(--weight-body-regular) var(--text-body-sm) / 1.6 var(--font-body);
}

.contact-form textarea.kw-input {
  min-height: 118px;
  resize: vertical;
}

.contact-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 4px;
}

.contact-form__note {
  font: var(--weight-body-regular) var(--text-caption-sm) / 1.5 var(--font-body);
  color: var(--kw-slate);
  margin: 0;
  max-width: 30ch;
}

.contact-form__note a {
  color: var(--kw-deep-blue);
  border-bottom: 1px solid var(--kw-blue);
}

/* Form-level error, shown when the submission itself fails. */
.contact-form__error {
  font: var(--weight-body-regular) var(--text-caption) / 1.5 var(--font-body);
  color: var(--kw-negative);
  margin: 0;
}

.contact-form__error a {
  color: var(--kw-negative);
  border-bottom: 1px solid currentColor;
}

/* Success state. Replaces the form in place; no redirect. */
.contact-success {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(24px, 4vw, 48px) 0;
}

.contact-success .icon {
  color: var(--kw-blue);
}

.contact-success__title {
  font: var(--weight-display-semibold) 22px / 1.3 var(--font-display);
  color: var(--kw-charcoal);
  margin: 0;
}

.contact-success__body {
  font: var(--weight-body-regular) var(--text-body-sm) / 1.6 var(--font-body);
  color: var(--kw-charcoal);
  margin: 0;
}

[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Our Offer page
   Built from the homepage components. What follows covers only what the
   homepage has no equivalent for: a shorter hero, a section heading with a
   sub line, the video, and the HubSpot report form.
   -------------------------------------------------------------------------- */

.hero--page {
  min-height: clamp(460px, 68vh, 680px);
}

.hero--page .hero__title {
  font-size: clamp(34px, 5.2vw, 68px);
  max-width: 18ch;
}

.page-title {
  font: var(--weight-display-bold) clamp(26px, 3.2vw, 40px) / 1.15 var(--font-display);
  letter-spacing: var(--ls-h2);
  color: var(--kw-charcoal);
  margin: 0;
  max-width: 24ch;
  text-wrap: balance;
}

.section--dark .page-title {
  color: var(--kw-white);
}

.page-sub {
  font: var(--weight-body-regular) clamp(16px, 1.5vw, 19px) / 1.6 var(--font-body);
  color: var(--kw-charcoal);
  margin: 14px 0 0;
  max-width: 54ch;
}

/* Video. A self-hosted still and a play button stand in until the visitor
   presses play, so nothing is requested from YouTube before then. The box
   holds 16:9 from first paint, and the iframe that replaces the still fills
   the same box, so neither step shifts the layout. Without JavaScript the
   still is a plain link to the video on YouTube. */
.video {
  position: relative;
  max-width: 960px;
  aspect-ratio: 16 / 9;
  margin-top: clamp(28px, 3.5vw, 44px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--kw-deep-blue);
}

.video__poster,
.video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video__poster {
  display: block;
  cursor: pointer;
}

.video__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The play control sits bottom left: YouTube thumbnails often carry a title
   burned into the centre of the frame, and this one does. */
.video__play {
  position: absolute;
  left: clamp(14px, 2.4vw, 28px);
  bottom: clamp(14px, 2.4vw, 28px);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 8px 20px 8px 8px;
  border-radius: var(--radius-pill);
  background: var(--kw-deep-blue);
  color: var(--kw-white);
  font: var(--weight-body-semibold) var(--text-caption) / 1 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  box-shadow: 0 8px 28px rgba(0, 34, 85, 0.35);
  transition: background-color var(--dur-fast) var(--ease-standard);
}

.video__play-disc {
  width: clamp(40px, 4.4vw, 52px);
  height: clamp(40px, 4.4vw, 52px);
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: var(--kw-blue);
}

.video__play-disc .icon {
  width: 44%;
  height: 44%;
  margin-left: 8%;
}

.video__poster:hover .video__play {
  background: #001a44;
}

.video__poster:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 4px var(--kw-blue);
}

/* Report download. The copy column reuses the contact block; these widen its
   measure for two paragraphs rather than one line. */
.report__body {
  max-width: 48ch;
  margin: 20px 0 0;
}

.report__cta {
  font: var(--weight-display-semibold) clamp(17px, 1.6vw, 20px) / 1.4 var(--font-display);
  color: var(--kw-deep-blue);
  margin: 28px 0 0;
}

/* HubSpot renders the form into a same-origin iframe; its styling is passed in
   from site.js. The min-height reserves the form's rendered height so nothing
   below it moves when it arrives. */
.report-form {
  min-height: 560px;
}

@media (min-width: 1100px) {
  .report-form { min-height: 470px; }
}

.report-form iframe {
  display: block;
  width: 100% !important;
}

.report-form__fallback {
  font: var(--weight-body-regular) var(--text-body-sm) / 1.6 var(--font-body);
  color: var(--kw-charcoal);
  margin: 0;
}

.report-form__fallback a {
  color: var(--kw-deep-blue);
  border-bottom: 1px solid var(--kw-blue);
}

.report-panel .contact-form__note {
  max-width: none;
  margin-top: 16px;
}

.coffee__name {
  font: var(--weight-display-semibold) clamp(16px, 1.6vw, 20px) / 1.4 var(--font-display);
  color: var(--kw-charcoal);
  margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--kw-deep-blue);
  padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(32px, 4vw, 48px);
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 52px);
}

/* Once there is room for a row, size the columns to their content and group
   them next to the logo. Spreading three columns across the full 1200px, which
   is what auto-fit does on its own, left a gap between the mark and the links
   wide enough to read as a mistake. Below this the auto-fit rule above still
   applies and the columns stack. */
@media (min-width: 720px) {
  .site-footer__cols {
    grid-template-columns: auto auto minmax(0, 1fr);
    column-gap: clamp(48px, 6vw, 80px);
  }
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.site-footer__logo img {
  width: 176px;
  height: auto;
  display: block;
}

.site-footer__heading {
  font: var(--weight-body-semibold) 11px / 1.5 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kw-blue);
  margin: 0 0 4px;
}

.site-footer__link {
  font: var(--weight-body-regular) 14px / 1.5 var(--font-body);
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  align-self: flex-start;
  transition: color var(--dur-fast) var(--ease-standard);
}

.site-footer__link:hover {
  color: var(--kw-white);
}

/* Social row. Icon-only links, so each gets a 44px hit area to meet the tap
   target minimum, and an aria-label since there is no visible text. */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: -10px;
  margin-top: 2px;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: rgba(255, 255, 255, 0.82);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}

.site-footer__social a:hover {
  color: var(--kw-white);
  background: rgba(255, 255, 255, 0.12);
}

.site-footer__social .icon {
  width: 20px;
  height: 20px;
}

.site-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: clamp(24px, 3vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
  justify-content: space-between;
  align-items: flex-start;
}

.site-footer__legal {
  font: var(--weight-body-regular) var(--text-caption) / 1.7 var(--font-body);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 62ch;
}

.site-footer__copyright {
  font: var(--weight-body-regular) var(--text-caption) / 1.7 var(--font-body);
  color: rgba(255, 255, 255, 0.52);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Cookie consent banner
   Bottom-anchored so it never covers the hero headline.
   -------------------------------------------------------------------------- */

.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: var(--kw-deep-blue);
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.cookie-banner__inner {
  max-width: calc(var(--container-max) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 32px;
}

.cookie-banner__copy {
  font: var(--weight-body-regular) 14px / 1.6 var(--font-body);
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  flex: 1 1 320px;
  max-width: 70ch;
}

.cookie-banner__copy a {
  color: var(--kw-white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.cookie-banner__copy a:hover {
  color: var(--kw-white);
  border-bottom-color: var(--kw-white);
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  flex: 0 0 auto;
}

/* --------------------------------------------------------------------------
   Focus on Deep Blue grounds takes the white ring.
   -------------------------------------------------------------------------- */

.site-header a:focus-visible,
.site-header button:focus-visible,
.hero a:focus-visible,
.section--dark a:focus-visible,
.site-footer a:focus-visible,
.cookie-banner a:focus-visible,
.cookie-banner button:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus-inverse);
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   Section reveal
   Applied by site.js only to sections that start below the fold, and never
   under prefers-reduced-motion. Sections already in view are never hidden.
   -------------------------------------------------------------------------- */

[data-reveal].is-hidden {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-reveal) var(--ease-standard),
              transform var(--dur-reveal) var(--ease-standard);
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].is-hidden { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   Privacy notice
   Plain and readable rather than styled to match the homepage. Also the
   template for a later About or Press page.
   -------------------------------------------------------------------------- */

.doc-header {
  background: var(--kw-deep-blue);
  padding: 0 var(--gutter);
}

.doc-header__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  height: var(--header-height);
  display: flex;
  align-items: center;
}

.doc-header__inner img {
  width: 148px;
  height: auto;
  display: block;
}

.doc {
  /* Pads itself, so it is two gutters wider than .doc-header__inner, which is
     padded from outside. Both then start the text on the same edge. */
  max-width: calc(var(--container-narrow) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(48px, 7vw, 88px) var(--gutter) clamp(64px, 8vw, 104px);
}

.doc__date {
  font: var(--weight-body-semibold) var(--text-eyebrow) / 1.5 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--kw-slate);
  margin: 0 0 18px;
}

.doc h1 {
  font: var(--weight-display-bold) clamp(30px, 4.4vw, 44px) / 1.12 var(--font-display);
  color: var(--kw-charcoal);
  margin: 0 0 24px;
}

.doc h2 {
  font: var(--weight-display-bold) 22px / 1.3 var(--font-display);
  color: var(--kw-charcoal);
  margin: 0 0 12px;
  padding-top: 32px;
  border-top: 1px solid var(--kw-soft-grey);
}

.doc p {
  font: var(--weight-body-regular) 17px / 1.7 var(--font-body);
  color: var(--kw-charcoal);
  margin: 0 0 32px;
  text-wrap: pretty;
}

.doc__lede {
  margin-bottom: 40px;
}

.doc p a {
  border-bottom: 1px solid var(--kw-blue);
}

.doc__back {
  margin: 40px 0 0;
}

.doc__back a {
  font: var(--weight-body-semibold) var(--text-caption-sm) / 1 var(--font-body);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--kw-deep-blue);
  border-bottom: 1px solid var(--kw-blue);
  padding-bottom: 6px;
}

.doc-footer {
  background: var(--kw-deep-blue);
  padding: 32px var(--gutter);
}

.doc-footer__inner {
  max-width: var(--container-narrow);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
}