/* Carbon + Waste - palette and copy recovered from the Wix draft document.
   Six brand colours, exactly as the site defined them, plus the two text browns. */
:root {
  --cream:  #FDF6EE;   /* light backgrounds      (--color_0) */
  --warm:   #E9E7E2;   /* warm light grey        (--color_2) */
  --lgrey:  #C1C9CA;   /* dividers, borders      (--color_3) */
  --slate:  #7C95A1;   /* mid slate              (--color_4) */
  --deep:   #366177;   /* deep slate blue        (--color_5) */
  --navy:   #164056;   /* darkest, primary       (--color_8) */
  --ink:    #366177;   /* body text  = --wst-base-2-color       */
  --ink-d:  #366177;   /* headings   = --wst-base-2-color       */

  --accent-4: #EFEFF6; /* box background  (--wst-accent-4)      */
  --pill: 999px;

  --maxw: 1200px;
  --radius: 18px;      /* --wst box radius                      */
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(22,64,86,.06), 0 10px 30px rgba(22,64,86,.07);
  --shadow-sm: 0 1px 3px rgba(22,64,86,.09);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 18px;      /* theme font_7 */
  line-height: 1.6;     /* theme body line-height */
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--deep); text-decoration: none; }
a:hover { color: var(--navy); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink-d); margin: 0 0 .55em; font-weight: 700; }
/* Type scale taken from the site theme: font_0 72 / font_2 42 / font_5 28 / font_6 22 */
h1 { font-size: clamp(2.4rem, 5.2vw, 4.5rem); line-height: 1.2; letter-spacing: -.02em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.63rem); line-height: 1.3; letter-spacing: -.01em; }
h3 { font-size: 1.75rem; line-height: 1.3; }
h4 { font-size: 1.375rem; line-height: 1.4; }
p { margin: 0 0 1.05em; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.lead { font-size: 1.125rem; line-height: 1.6; max-width: 60ch; }
.section { padding: 76px 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; background: var(--navy); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 99; }

/* ---------- header ---------- */
.site-head { position: sticky; top: 0; z-index: 40; background: rgba(253,246,238,.94); backdrop-filter: blur(8px); border-bottom: 1px solid var(--lgrey); }
/* Home page: there is no cream band above the photograph. The header is fixed
   over the picture instead, so the page opens with the photo itself; navy type
   reads against the bright sky the photograph starts with. site.js adds
   .scrolled as soon as the page moves, which brings the band back so the nav
   stays readable over the sections below. */
body.home .site-head { position: fixed; left: 0; right: 0; background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
body.home .site-head.scrolled { background: rgba(253,246,238,.94); border-bottom-color: var(--lgrey); backdrop-filter: blur(8px); }
.head-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; }
.brand img { height: 46px; width: auto; }
.nav { display: flex; align-items: center; gap: 26px; }
/* :not(.btn) matters: a bare `.nav a` rule outranks `.btn`, so the CTA pill was
   getting slate link text on its navy background - dark on dark. */
.nav a:not(.btn) { color: var(--ink-d); font-size: 1rem; font-weight: 500; }
.nav a:not(.btn):hover { color: var(--navy); text-decoration: none; }
.nav a:not(.btn).active { color: var(--navy); box-shadow: inset 0 -2px 0 var(--navy); }
.nav-toggle { display: none; background: none; border: 1px solid var(--lgrey); border-radius: var(--radius-sm); padding: 8px 12px; font: inherit; color: var(--ink-d); cursor: pointer; }

/* ---------- buttons ---------- */
/* buttons are pills, per the --wst-button-* tokens */
.btn { display: inline-block; background: var(--navy); color: var(--cream); border: 1px solid var(--navy); border-radius: var(--pill); padding: 14px 30px; font-weight: 500; font-size: 1rem; }
.btn:hover { background: var(--deep); border-color: var(--deep); color: var(--cream); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--navy); }
.btn.ghost:hover { background: var(--navy); color: var(--cream); }
.btn.tertiary { background: transparent; border-color: transparent; color: var(--navy); letter-spacing: .1em; text-transform: uppercase; font-size: .8125rem; padding: 10px 12px; }
.btn-sm { padding: 9px 20px; font-size: .9rem; }
.link { font-weight: 500; font-size: .95rem; }
.link::after { content: " \2192"; }

/* ---------- hero ---------- */
.hero { padding: 96px 0 72px; }
/* Home hero, matching the Wix document: the photograph is a full-bleed
   background (displayMode: fill, from the 6000px original, object-fit: cover)
   with the copy laid over it, and the Wix hero box is 1265x776 — the photo's own
   1.63 ratio. An earlier version stacked a cream gradient on top (.94 -> .20)
   and washed the picture out; nothing belongs over the image. */
.hero.hero-photo {
  /* No scrim, no gradient - the Wix hero declares no overlay background at all,
     so the photograph is shown as it is. */
  background-image: url('/assets/img/hero-bg.jpg');
  background-size: cover;
  background-position: center center;
  display: flex;
  align-items: center;
  /* The Wix hero box is 1265x776 - the photograph's own 1.63 ratio - so nearly
     the whole frame is visible rather than a cropped strip. */
  min-height: 720px;
  padding: 104px 0;
}
.hero.hero-photo .wrap { width: 100%; }
/* Legibility without touching the image: a light halo on the type only. A veil
   is what made the picture look washed out, so the halo does the work instead.
   Thin small type needs a stronger halo than the heavy display heading. */
.hero.hero-photo h1 { text-shadow: 0 1px 4px rgba(253,246,238,.9), 0 0 26px rgba(253,246,238,.65); }
.hero.hero-photo .lead,
.hero.hero-photo .eyebrow { text-shadow: 0 1px 3px rgba(253,246,238,.98), 0 0 12px rgba(253,246,238,.92), 0 0 4px rgba(253,246,238,.85); }

/* ---------- home hero ---------- */
/* The photograph is the top band of the home page: whole, uncropped, at its own
   1.63 ratio (the Wix hero box is 1265x776, the photo's own frame), so the
   section is exactly the image's height at any width. The copy sits white on the
   dark mountain on the right, where it reads with no veil and no halo. */
.hero.hero-home { position: relative; padding: 0; }
/* width 100% + height auto: the whole frame, at any viewport, cropped never.
   The picture element must be block too, or the inline box adds a gap under it. */
.hero.hero-home picture { display: block; }
.hero-img { width: 100%; height: auto; }
.hero.hero-home .wrap {
  /* The usual 1200px column, still centred, with the copy on its right edge.
     padding-top is a percentage of the WIDTH, and the photograph locks height to
     width at 1.63, so 26% down the width is 42% down the picture at every
     desktop width: the two phrases sit on the dark slope. Where the block ends is
     set by the gap before the CTA, not by this number - see .lead below. */
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding-top: 26%;
}
/* Right-aligned, so the copy flushes against the right edge of the frame. */
.hero-copy { max-width: 52rem; text-align: right; }
/* The plain .lead caps at 60ch, which would leave its right edge short of the
   heading's; here it keeps the same right edge and only narrows from the left.
   The extra bottom margin is what holds the CTA down in the golden plain while
   the phrases above it sit higher; it shrinks by whatever the lead grows, so a
   font-size change does not drag the pill along with it. */
.hero.hero-home .hero-copy .lead { max-width: 34rem; margin-left: auto; margin-bottom: 31px; }
/* White type and only a soft shadow: a light halo is what made the picture look
   washed out before, so legibility is bought with position, not paint. */
.hero.hero-home .hero-copy, .hero.hero-home .hero-copy h1 { color: #fff; }
.hero.hero-home .hero-copy .lead { color: rgba(255,255,255,.94); font-size: 1.625rem; }
.hero.hero-home .hero-copy .eyebrow { color: rgba(255,255,255,.86); }
.hero.hero-home .hero-copy * { text-shadow: 0 1px 10px rgba(18,28,38,.5); }
/* A little smaller than the other pages' hero: at 72px the heading swamped the
   photograph rather than sitting on it. */
.hero.hero-home h1 { font-size: clamp(1.75rem, 3.6vw, 3.25rem); }
/* A navy pill disappears into the mountain, so this one CTA is cream. */
.hero.hero-home .btn { background: var(--cream); border-color: var(--cream); color: var(--navy); }
.hero.hero-home .btn:hover { background: #fff; border-color: #fff; color: var(--navy); }
.hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 600; color: var(--deep); margin-bottom: 14px; }
.hero-media img { border-radius: var(--radius); box-shadow: var(--shadow); aspect-ratio: 4/3; object-fit: cover; }
.hero:only-child .hero-inner { grid-template-columns: 1fr; }

/* ---------- bands / marquee ---------- */
.band { background: var(--warm); color: var(--ink); padding: 88px 0; }   /* theme secondary background #E9E7E2 */
.band.alt { background: var(--accent-4); }
/* Bands are the light secondary background, so a ghost button inside one needs
   the navy treatment, not the cream-on-dark one it originally assumed. */
.band .btn.ghost { color: var(--navy); border-color: var(--navy); }
.band .btn.ghost:hover { background: var(--navy); color: var(--cream); }
.marquee-wrap { overflow: hidden; background: var(--warm); border-top: 1px solid var(--lgrey); border-bottom: 1px solid var(--lgrey); }
.marquee { display: flex; width: max-content; animation: slide 34s linear infinite; }
.marquee span { padding: 18px 0; font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }

/* ---------- cards ---------- */
.grid.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 36px 0 0; }
/* cards use the --wst-box-primary tokens: background accent-4, border shade-3 */
.card { background: var(--accent-4); border: 1px solid var(--slate); border-radius: var(--radius); padding: 30px 28px; }
.card h3 { margin-bottom: .45em; font-size: 1.375rem; }
.card p { font-size: 1rem; }
.card .link { display: inline-block; margin-top: .4em; }
.grid.four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 40px; }
.grid.four img { border-radius: var(--radius); aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.two-col img { border-radius: var(--radius); }
.feature { border-radius: var(--radius); width: 100%; margin-top: 44px; }

/* ---------- layout helpers ---------- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.media img { border-radius: var(--radius); }
.prose { max-width: 76ch; }
.prose h2 { margin-top: 2em; }
.notice { background: var(--warm); border-left: 3px solid var(--slate); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 16px 20px; }
.hint { font-size: .88rem; color: #6b5a48; }

/* ---------- forms ---------- */
.form label { display: block; margin-bottom: 16px; font-weight: 500; font-size: .94rem; color: var(--ink-d); }
.form input, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; font: inherit; color: var(--ink); background: #fff; border: 1px solid var(--lgrey); border-radius: var(--radius-sm); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--deep); outline-offset: 1px; border-color: var(--deep); }

/* ---------- footer ---------- */
.site-foot { background: var(--navy); color: var(--cream); padding: 60px 0 26px; margin-top: 40px; }
.foot-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.site-foot h4 { color: var(--cream); font-size: 1.05rem; }
.site-foot p, .site-foot a { color: #cfdbe2; font-size: .95rem; }
.site-foot a:hover { color: #fff; }
.foot-col a { display: block; margin-bottom: 8px; }
.foot-base { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid rgba(207,219,226,.22); margin-top: 40px; padding-top: 20px; font-size: .86rem; color: #a9bcc7; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .hero-grid, .two-col, .grid.three, .foot-inner { grid-template-columns: 1fr; }
  .grid.four { grid-template-columns: repeat(2, 1fr); }
  .hero { padding: 54px 0 40px; }
  .section { padding: 52px 24px; }
  .nav-toggle { display: inline-block; }
  .nav { display: none; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; padding: 16px 0; }
  .nav.open { display: flex; }
  .head-inner { flex-wrap: wrap; }
  /* On a phone the home photograph is only ~250px tall at its own ratio, which
     is no place to lay copy on. It keeps the top of the page, whole and
     uncropped, and the copy sits under it in the site's own ink. */
  .hero.hero-home .wrap { position: static; transform: none; padding: 26px 24px 0; }
  .hero-copy { max-width: none; text-align: left; }
  /* back to normal spacing: the 62px gap only makes sense over the photograph */
  .hero.hero-home .hero-copy .lead { max-width: none; margin-left: 0; margin-bottom: 1.05em; }
  .hero.hero-home .hero-copy, .hero.hero-home .hero-copy h1,
  .hero.hero-home .hero-copy .lead, .hero.hero-home .hero-copy .eyebrow { color: var(--ink-d); text-shadow: none; }
  .hero.hero-home .hero-copy .eyebrow { color: var(--deep); }
  .hero.hero-home .btn { background: var(--navy); border-color: var(--navy); color: var(--cream); }
  .hero.hero-home { padding: 0 0 40px; }
}