/* ==========================================================================
   Reset
   ========================================================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==========================================================================
   Tokens
   ========================================================================== */
:root {
  --font-title-family: "Century Gothic", Futura, "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-body-family: var(--font-title-family);

  /* Layout */
  --page-width: 1600px;
  --page-padding: 5rem;

  /* Scaling reference ("content width").
     The design was measured on a 1210px-wide artboard, so every size below is
     expressed as a ratio of the content width: 0.0364 means "44px at 1210px".
     Multiplying against --cw instead of 100vw makes the whole page scale in
     proportion up to --page-width, then stop — on wider screens only the
     gutters grow, so line breaks and every spacing ratio stay put.
     The clamp() bounds around each ratio are the floor for phones and the
     ceiling for very large monitors. */
  --cw: min(100vw, var(--page-width));

  /* Type scale — see the note above for what the ratios mean */
  --fs-xs: clamp(13px, calc(var(--cw) * 0.0107), 24px);
  --fs-sm: clamp(13px, calc(var(--cw) * 0.0115), 26px);
  --fs-md: clamp(14px, calc(var(--cw) * 0.0140), 31px);
  --fs-lg: clamp(15px, calc(var(--cw) * 0.0175), 38px);
  --fs-xl: clamp(24px, calc(var(--cw) * 0.0300), 66px);
  --fs-2xl: clamp(30px, calc(var(--cw) * 0.0364), 80px);

  /* Colour */
  --color-navy: #152A3C;
  --color-header-bg: #B3C0C8;
  --color-contact-bg: #17293D;
  --color-story-bg: #F5F6F8;
  --color-footer-bg: #6B8093;
  --color-light: #FFFFFF;
  --color-muted: #E3E7EA;
  --color-field-bg: #E9EDF1;
  --color-alert: #FFD8CE;
  --color-footer-rule: rgba(255, 255, 255, 0.45);
  --shadow-menu: 0 12px 20px rgba(21, 42, 60, 0.12);
}

/* ==========================================================================
   Base
   ========================================================================== */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body-family);
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--color-navy);
  background-color: var(--color-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-title-family);
  font-weight: 400;
  line-height: 1.2;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Colour bands run edge to edge; their content sits on this centred column. */
.page-width {
  width: 100%;
  max-width: var(--page-width);
  margin-inline: auto;
  padding-inline: var(--page-padding);
}

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

/* ==========================================================================
   Header & nav
   ========================================================================== */
.site-header {
  position: relative;
  z-index: 100;
  background-color: var(--color-header-bg);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding-block: clamp(0.9rem, calc(var(--cw) * 0.0256), 3.5rem);
}

.logo {
  display: block;
  line-height: 0;
}

.logo img {
  width: clamp(150px, calc(var(--cw) * 0.18), 330px);
  height: auto;
}

.header-menu ul {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, calc(var(--cw) * 0.048), 6rem);
}

.header-menu a {
  display: block;
  position: relative;
  font-size: var(--fs-xs);
  color: var(--color-navy);
  transition: font-weight 0.15s ease;
}

/* Reserve the bold width up front so hovering never nudges the layout.
   data-text is re-synced from the link's own text at runtime, so editing a
   label in the markup cannot silently break the reservation. */
.header-menu a::after {
  content: attr(data-text);
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  font-weight: 600;
}

.header-menu a:hover,
.header-menu a.is-active {
  font-weight: 600;
}

/* mobile hamburger – hidden on desktop */
.mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
}

.mobile-toggle span {
  width: 22px;
  height: 2px;
  background: var(--color-navy);
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  /* Natural crop of the source photo, but never taller than the screen.
     width must stay explicit: with an auto width, max-height would clamp the
     height and aspect-ratio would then shrink the width to match, leaving a
     gap beside the image. */
  width: 100%;
  aspect-ratio: 2560 / 1133;
  max-height: 82vh;
}

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

.hero-text {
  position: absolute;
  /* 51%, not 50%: the design centres the block optically, a shade below the
     true middle of the band. */
  top: 51%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.hero-title {
  font-size: var(--fs-2xl);
  font-weight: 300;
  line-height: 1.16;
  color: var(--color-light);
  margin-bottom: clamp(0.8rem, calc(var(--cw) * 0.018), 3rem);
}

.hero-title em {
  font-style: italic;
  font-weight: 300;
}

.hero-subtitle {
  font-size: var(--fs-md);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.03em;
  color: var(--color-muted);
}

/* ==========================================================================
   Contact
   ========================================================================== */
.contact {
  background-color: var(--color-contact-bg);
  color: var(--color-light);
}

.contact-inner {
  padding-block: clamp(2.5rem, calc(var(--cw) * 0.068), 9rem);
  text-align: center;
}

.contact-title {
  font-size: var(--fs-xl);
  font-weight: 300;
  margin-bottom: clamp(1.5rem, calc(var(--cw) * 0.042), 6rem);
}

.contact-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, calc(var(--cw) * 0.018), 2.6rem);
}

.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: clamp(0.6rem, calc(var(--cw) * 0.021), 3rem);
  font-size: var(--fs-lg);
  font-weight: 300;
}

.contact-list img {
  width: clamp(18px, calc(var(--cw) * 0.0264), 58px);
  height: auto;
  flex-shrink: 0;
}

.contact-list a:hover span {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ==========================================================================
   Our Story
   ========================================================================== */
.our-story {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  /* Band height is locked to the design ratio; the photo crops to fit */
  min-height: calc(var(--cw) * 0.529);
}

.our-story-text {
  display: flex;
  align-items: center;
  /* Flush right inside the left half, so the text lands on the same
     left edge as the .page-width column in every other band. */
  justify-content: flex-end;
  background-color: var(--color-story-bg);
  background-image: url("../images/our-story-bg-woodgrain.jpg");
  background-size: cover;
  background-position: center;
  padding: clamp(3rem, calc(var(--cw) * 0.06), 8rem) var(--page-padding);
}

/* Half the content column, minus its two gutters. Paired with the flush-right
   parent above, this puts the text's left edge exactly on the page column —
   it assumes the band stays a 50/50 split, so revisit both if that changes. */
.our-story-inner {
  width: 100%;
  max-width: calc(var(--page-width) / 2 - var(--page-padding) * 2);
}

.our-story-heading {
  display: block;
  width: clamp(150px, calc(var(--cw) * 0.19), 420px);
  height: auto;
  margin-bottom: clamp(1rem, calc(var(--cw) * 0.020), 3.2rem);
}

.our-story-text p {
  font-size: var(--fs-md);
  line-height: 1.55;
  max-width: 23em;
}

.our-story-text p + p {
  margin-top: clamp(1rem, calc(var(--cw) * 0.025), 3.5rem);
}

/* The photo is taken out of the height calculation, otherwise a full-bleed
   column would stretch the band to the image's own ratio on wide screens. */
.our-story-media {
  position: relative;
}

.our-story-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background-color: var(--color-footer-bg);
  color: var(--color-light);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-block: clamp(2.5rem, calc(var(--cw) * 0.058), 8rem);
}

.footer-logo {
  display: block;
  width: clamp(110px, calc(var(--cw) * 0.132), 290px);
  height: auto;
  margin-bottom: clamp(1rem, calc(var(--cw) * 0.028), 4rem);
}

.footer-brand p {
  font-size: var(--fs-xs);
  line-height: 2;
  max-width: 30em;
}

.footer-subscribe {
  border-left: 1px solid var(--color-footer-rule);
  padding-left: clamp(1.5rem, calc(var(--cw) * 0.132), 18rem);
}

.footer-subscribe h3 {
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: clamp(0.8rem, calc(var(--cw) * 0.023), 3rem);
}

.footer-subscribe > p {
  font-size: var(--fs-xs);
  line-height: 1.7;
  margin-bottom: clamp(1.2rem, calc(var(--cw) * 0.033), 4.5rem);
}

/* Fills the right column so its right edge lands on the content column
   boundary, mirroring the logo on the left */
.subscribe-form {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, calc(var(--cw) * 0.013), 1.8rem);
  width: 100%;
  height: clamp(44px, calc(var(--cw) * 0.05), 110px);
  padding-inline: clamp(0.9rem, calc(var(--cw) * 0.016), 2.2rem);
  background-color: var(--color-field-bg);
  color: var(--color-navy);
}

/* Text inputs match :focus-visible on click too, so a hard ring would show on
   every mouse focus. The field brightens and picks up a soft halo instead —
   no border, but still a visible state change for keyboard users. */
.subscribe-form:has(input:focus-visible) {
  background-color: var(--color-light);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

.subscribe-form:has(input:focus-visible) input {
  outline: none;
}

.subscribe-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.subscribe-icon svg {
  width: clamp(16px, calc(var(--cw) * 0.019), 42px);
  height: auto;
}

.subscribe-form input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  /* form controls don't inherit the page font on their own */
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--color-navy);
}

.subscribe-form input::placeholder {
  color: var(--color-navy);
  opacity: 0.75;
}

.subscribe-form button {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--color-navy);
  cursor: pointer;
}

.subscribe-form button svg {
  width: clamp(20px, calc(var(--cw) * 0.024), 52px);
  height: auto;
}

.subscribe-form button:disabled {
  opacity: 0.45;
  cursor: default;
}

/* Honeypot. Parked off-screen rather than display:none — bots commonly skip
   fields that are explicitly hidden, but happily fill this one in. */
.subscribe-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Reserves its line so the footer does not jump when a message appears */
.subscribe-status {
  min-height: 1.6em;
  margin-top: clamp(0.6rem, calc(var(--cw) * 0.012), 1.6rem);
  font-size: var(--fs-xs);
}

.subscribe-status[data-state="error"] {
  color: var(--color-alert);
}

/* ==========================================================================
   Tablet
   ========================================================================== */
@media (max-width: 900px) {
  .footer-inner {
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 3rem);
  }

  .footer-subscribe {
    border-left: none;
    border-top: 1px solid var(--color-footer-rule);
    padding-left: 0;
    padding-top: clamp(2rem, 5vw, 3rem);
  }

  /* Once the footer stacks, the column is the full page width — cap the
     field and its blurb so they don't stretch across the whole screen. */
  .subscribe-form,
  .footer-subscribe > p {
    width: min(100%, 420px);
  }
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
  :root {
    --page-padding: 1.5rem;
  }

  .mobile-toggle {
    display: flex;
  }

  .logo img {
    width: 180px;
  }

  .header-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    display: none;
    background-color: var(--color-header-bg);
    padding: 0.5rem var(--page-padding) 1.5rem;
    box-shadow: var(--shadow-menu);
  }

  .header-menu.open {
    display: block;
  }

  .header-menu ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .header-menu a {
    font-size: 15px;
  }

  /* Small-screen art direction: the type scale is deliberately overridden
     per component here rather than by re-declaring the tokens. */
  .hero {
    aspect-ratio: auto;
    height: 49vh;
    max-height: 455px;
  }

  .hero-title {
    font-size: clamp(28px, 8vw, 38px);
  }

  .hero-subtitle {
    font-size: clamp(13px, 3.6vw, 16px);
  }

  /* The subtitle line is too long to keep the designed break on phones */
  .hero-subtitle br {
    display: none;
  }

  .contact-title {
    font-size: clamp(22px, 6vw, 28px);
  }

  .contact-list a {
    font-size: clamp(15px, 4.2vw, 20px);
  }

  .our-story {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  /* Photo first, story text underneath */
  .our-story-media {
    order: -1;
    aspect-ratio: 4 / 3;
  }

  .our-story-text p,
  .footer-brand p {
    max-width: none;
  }

  /* Hold the heading above the body size it would otherwise share */
  .footer-subscribe h3 {
    font-size: 15px;
  }
}