/* ==========================================================================
   Southmead website v4: styles
   AI-authored (Claude), 2026-08-27, for Alan L. / Southmead.
   Brand values from southmead-brand-guidelines assets/brand-tokens.css v3.0.0.
   Documented departure (WEB4-0005): hero H1 up to 56px desktop.
   ========================================================================== */

:root {
  /* Colour palette (references/color-system.md) */
  --sm-blue: #2e75b6;
  --sm-red: #fe0101;
  --sm-blue-light: #74a3ce;
  --sm-blue-medium: #5791c4;
  --sm-blue-deep: #4886bf;
  --sm-charcoal: #333333;
  --sm-sky-20: #d5e3f0;
  --sm-tint-10: #eaf1f8;
  --sm-white: #ffffff;
  --sm-border: rgba(51, 51, 51, 0.14);
  /* 0.78 alpha (not the token file's 0.6) so small footnote text passes WCAG AA
     on white (~5.9:1) and Sky-20 (~4.6:1); palette stays closed via rgba charcoal */
  --sm-footnote: rgba(51, 51, 51, 0.78);

  /* Typography (references/typography.md) */
  --sm-font: 'IBM Plex Sans', 'Noto Sans', sans-serif;
  --sm-h1-size: clamp(34px, 4.6vw, 56px);   /* documented departure above 36px ceiling */
  --sm-h2-size: clamp(24px, 2.2vw, 28px);   /* digital H2 ceiling 24-28px */
  --sm-h3-size: 20px;
  --sm-body-size: 16px;
  --sm-body-lg: 18px;
  --sm-caption-size: 14px;
  --sm-line-height: 1.45;

  /* Motion ceilings (references/imagery-and-motion.md) */
  --sm-motion: 280ms;
  --sm-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --sm-slide: 24px;

  /* Grid (references/layout-and-data-viz.md) */
  --sm-gutter: clamp(24px, 5vw, 80px);
  --sm-max: 1200px;
}

/* ---- Reset-lite ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sm-font);
  font-size: var(--sm-body-size);
  font-weight: 400;
  line-height: var(--sm-line-height);
  color: var(--sm-charcoal);
  background: var(--sm-white);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--sm-blue); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---- Type roles ---- */
h1, h2, h3 {
  font-family: var(--sm-font);
  font-weight: 700;             /* Bold only for headings */
  letter-spacing: normal;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--sm-blue);
}
h1 { font-size: var(--sm-h1-size); }
h2 { font-size: var(--sm-h2-size); }
h3 { font-size: var(--sm-h3-size); }

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;    /* short labels only, ≤3 words */
  color: var(--sm-blue);
  margin-bottom: 12px;
}
.lead { font-size: var(--sm-body-lg); }
.caption { font-size: var(--sm-caption-size); color: var(--sm-footnote); }

/* ---- Focus (accessibility) ---- */
:focus-visible { outline: 3px solid var(--sm-blue); outline-offset: 2px; border-radius: 2px; }
.band-blue :focus-visible, .band-deep :focus-visible { outline-color: var(--sm-white); }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--sm-white); color: var(--sm-blue);
  padding: 10px 16px; z-index: 100; font-weight: 500;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Layout shell ---- */
.wrap { max-width: var(--sm-max); margin: 0 auto; padding-inline: var(--sm-gutter); }
.section { padding-block: clamp(64px, 9vw, 112px); }
.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }

/* ---- Bands ---- */
.band-sky  { background: var(--sm-sky-20); }
.band-blue { background: var(--sm-blue); color: var(--sm-white); }
.band-deep { background: var(--sm-blue-deep); color: var(--sm-white); }
.band-blue h1, .band-blue h2, .band-blue h3,
.band-deep h1, .band-deep h2, .band-deep h3,
.band-blue .eyebrow, .band-deep .eyebrow { color: var(--sm-white); }
.band-blue a, .band-deep a { color: var(--sm-white); }
.band-blue .caption, .band-deep .caption { color: var(--sm-white); }

/* Three-dot pattern on blue bands: the favicon-derived white-dots-on-blue
   treatment at whisper opacity (WEB4-0005 item 3). */
.dots-dark {
  background-image:
    radial-gradient(circle 5px at 30px 26px, rgba(255,255,255,0.09) 99%, transparent),
    radial-gradient(circle 5px at 70px 26px, rgba(255,255,255,0.09) 99%, transparent),
    radial-gradient(circle 5px at 50px 60px, rgba(255,255,255,0.09) 99%, transparent);
  background-size: 100px 100px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-block;
  font-family: var(--sm-font);
  font-weight: 700;
  font-size: 19px;   /* >=18.66px bold qualifies as WCAG large text, so the
                        brand's white-on-Signal-Red CTA meets the 3:1 threshold */
  text-decoration: none;
  border-radius: 6px;
  padding: 13px 26px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform var(--sm-motion) var(--sm-ease), opacity var(--sm-motion) var(--sm-ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--sm-red); color: var(--sm-white); }        /* Signal Red: action only */
.btn-ghost-light { background: transparent; color: var(--sm-white); border-color: rgba(255,255,255,0.7); }
.btn-ghost-light:hover { border-color: var(--sm-white); }
.btn-ghost-blue { background: var(--sm-white); color: var(--sm-blue); border-color: var(--sm-blue); }
.cta-row { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--sm-white);
  border-bottom: 1px solid var(--sm-border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-brand img { height: 30px; width: auto; }   /* logo untouched, min size respected */
.nav-brand .product-tag {
  font-size: 14px; font-weight: 500; color: var(--sm-charcoal);
  border-left: 1px solid var(--sm-border); padding-left: 12px;
  white-space: nowrap;
}
.nav-links { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  text-decoration: none; color: var(--sm-charcoal);
  font-size: 15px; font-weight: 500; padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--sm-motion) var(--sm-ease), border-color var(--sm-motion) var(--sm-ease);
}
.nav-links a:hover { color: var(--sm-blue); border-bottom-color: var(--sm-blue); }
.nav-cta { font-size: 19px; padding: 8px 18px; }
.nav-toggle {
  display: none;
  background: none; border: 1px solid var(--sm-border); border-radius: 6px;
  padding: 8px; cursor: pointer; color: var(--sm-blue);
}

@media (max-width: 1023.98px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--sm-white); border-bottom: 1px solid var(--sm-border);
    padding: 16px var(--sm-gutter) 24px;
  }
  .nav-menu.open { display: block; }
  .nav-links { flex-direction: column; align-items: flex-start; gap: 4px; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; padding: 12px 4px; width: 100%; }
  .nav-menu .nav-cta { margin-top: 12px; display: inline-block; }
  .nav-brand .product-tag { display: none; }
}
@media (min-width: 1024px) {
  .nav-menu { display: flex; align-items: center; gap: 26px; }
}

/* ---- Hero ---- */
.hero { padding-block: clamp(72px, 10vw, 128px); }
.hero-grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 1023px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .eyebrow { color: var(--sm-white); text-transform: none; letter-spacing: 0.04em; font-size: 15px; }
.hero h1 { color: var(--sm-white); margin-bottom: 20px; max-width: 15ch; }
.hero .lead { max-width: 52ch; color: var(--sm-white); }
.trust-tagline {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 24px; padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px;
  font-size: 15px; font-weight: 500; color: var(--sm-white);
}

/* ---- The signature: the work diary that writes itself ---- */
.diary {
  background: var(--sm-white);
  border-radius: 12px;
  padding: 24px;
  color: var(--sm-charcoal);
  max-width: 460px;
  margin-inline: auto;
  width: 100%;
}
.diary-head {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--sm-border);
  padding-bottom: 12px; margin-bottom: 6px;
}
.diary-title { font-weight: 700; font-size: 15px; color: var(--sm-blue); }
.diary-badge { font-size: 12px; font-weight: 500; color: var(--sm-footnote); letter-spacing: 0.08em; text-transform: uppercase; }
.diary-entry {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid rgba(51, 51, 51, 0.07);
}
.diary-entry:last-of-type { border-bottom: 0; }
.diary-entry .icon { flex: none; width: 22px; height: 22px; color: var(--sm-blue); margin-top: 2px; }
.diary-entry.alert .icon { color: var(--sm-red); }   /* the one red accent: signal, not surface */
.diary-entry strong { display: block; font-weight: 500; font-size: 15px; }
.diary-entry span { font-size: 14px; color: var(--sm-charcoal); }
.diary-foot { margin-top: 10px; font-size: 12.5px; color: var(--sm-footnote); }

/* ---- Cards ---- */
.cards { display: grid; gap: clamp(16px, 2.5vw, 28px); }
.cards-3 { grid-template-columns: repeat(3, 1fr); }
.cards-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1199px) {
  .cards-3, .cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .cards-3, .cards-4 { grid-template-columns: 1fr; }
}
.card {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 26px 24px;
  transition: border-color var(--sm-motion) var(--sm-ease), transform var(--sm-motion) var(--sm-ease);
}
.card:hover { border-color: var(--sm-blue-light); transform: translateY(-3px); }
.card .icon { width: 28px; height: 28px; color: var(--sm-blue); margin-bottom: 14px; }
.card h3 { margin-bottom: 8px; }
.card p { font-size: 15px; margin-bottom: 0; }

/* ---- How it works: stepped rail ---- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); counter-reset: step; }
@media (max-width: 1199px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--sm-white);
  border: 1px solid var(--sm-border);
  border-radius: 10px;
  padding: 26px 24px;
  position: relative;
}
.step-num {
  display: inline-block;
  font-weight: 700; font-size: 14px;
  color: var(--sm-blue);
  border: 2px solid var(--sm-blue);
  border-radius: 999px;
  width: 34px; height: 34px;
  line-height: 30px; text-align: center;
  margin-bottom: 14px;
}
.step h3 { font-size: 18px; }
.step p { font-size: 15px; margin: 0; }
.step .example {
  display: block; font-style: italic; font-size: 14.5px;
  color: var(--sm-charcoal); margin-bottom: 8px;
}

.flow-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 28px; }
.flow-pills .pill {
  border: 1px solid var(--sm-blue); color: var(--sm-blue);
  border-radius: 999px; padding: 6px 16px; font-size: 14px; font-weight: 500;
  background: var(--sm-white);
}
.flow-pills .chev { width: 16px; height: 16px; color: var(--sm-blue-medium); flex: none; }
.flow-pills .flow-label { font-size: 14px; color: var(--sm-charcoal); margin-right: 4px; }

/* ---- Management / Staff band ---- */
.mgmt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 1023px) { .mgmt-grid { grid-template-columns: 1fr; } }
.mgmt-card {
  /* transparent fill: a white-tint fill would lighten the blue beneath white
     text below the 4.5:1 AA threshold */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px; padding: 24px;
}
.mgmt-card h3 { font-size: 17px; margin-bottom: 6px; }
.mgmt-card p { font-size: 15px; color: var(--sm-white); margin: 0; }
.vision-note { margin-top: 28px; font-size: 15px; color: var(--sm-white); max-width: 62ch; }

/* ---- QTT inset ---- */
.qtt-inset {
  background: var(--sm-blue);
  color: var(--sm-white);
  border-radius: 12px;
  padding: clamp(28px, 4vw, 44px);
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: start;
}
@media (max-width: 767px) { .qtt-inset { grid-template-columns: 1fr; } }
.qtt-inset .icon { width: 36px; height: 36px; color: var(--sm-white); }
.qtt-inset h3 { color: var(--sm-white); margin-bottom: 8px; }
.qtt-inset p { color: var(--sm-white); font-size: 16px; margin: 0; }

/* ---- Pilot ---- */
.pilot-steps { counter-reset: pstep; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2.5vw, 28px); }
@media (max-width: 1199px) { .pilot-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .pilot-steps { grid-template-columns: 1fr; } }

/* ---- Partners ---- */
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); margin-top: 8px; }
@media (max-width: 767px) { .split-grid { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; }
.faq-item { border-bottom: 1px solid var(--sm-border); }
.faq-item summary {
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  cursor: pointer;
  padding: 20px 4px;
  font-family: var(--sm-font); font-weight: 700; font-size: 18px; color: var(--sm-blue);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon {
  flex: none; width: 20px; height: 20px; color: var(--sm-blue);
  transition: transform var(--sm-motion) var(--sm-ease);
}
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item .faq-body { padding: 0 4px 22px; max-width: 70ch; }
.faq-item .faq-body p { font-size: 16px; }

/* ---- Vision band ---- */
/* The vision statement is the band's top-level heading: Level-1 scale
   (digital H1 range tops out at 36px), not the H2 24-28px role */
.vision-band h2 { max-width: 22ch; font-size: clamp(28px, 3vw, 36px); }
.vision-band .lead { color: var(--sm-white); font-size: 18px; font-weight: 500; max-width: 56ch; }
.socials { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.socials a {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--sm-white); text-decoration: none;
  font-size: 15px; font-weight: 500;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  padding-bottom: 2px;
}
.socials a:hover { border-bottom-color: var(--sm-white); }
.socials .icon { width: 18px; height: 18px; }

/* ---- Footer ---- */
.site-footer { padding-block: 48px; border-top: 1px solid var(--sm-border); }
.footer-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-brand img { height: 26px; width: auto; }
.footer-brand span { font-size: 14px; color: var(--sm-footnote); }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: 14px; }
.footer-links a { color: var(--sm-charcoal); text-decoration: none; }
.footer-links a:hover { color: var(--sm-blue); }
.footer-legal { font-size: 13px; color: var(--sm-footnote); margin-top: 20px; }

/* ---- Icons ---- */
.icon { display: inline-block; }
.icon svg { display: block; width: 100%; height: 100%; }

/* ---- Reveal on scroll: one-shot, within the 300ms ceiling ---- */
.reveal {
  opacity: 0;
  transform: translateY(var(--sm-slide));
  transition: opacity var(--sm-motion) var(--sm-ease), transform var(--sm-motion) var(--sm-ease);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn, .card, .nav-links a, .faq-item summary .icon { transition: none; }
}