/* ==========================================================================
   SaluStory — site styles   |   VERSION 5
   If the page does not look right, check this number matches what I told you.
   Single stylesheet for the whole site. One cached request, ~9KB.
   Brand colours live in :root below. Change them there, nowhere else.
   ========================================================================== */

:root {
  /* --- BRAND ---------------------------------------------------------
     Taken from the Elementor global palette on the live WordPress site,
     so these are your real brand colours, not placeholders.
       primary   #103A3C   secondary #008080   accent  #73F489
       mint      #B2F2EC   pale mint #A7FFEF   dark    #115A5A
     Every pairing below is checked against WCAG AA (4.5:1).
     --------------------------------------------------------------- */
  --brand:        #008080;  /* Elementor "secondary". White text on it = 4.77:1, passes */
  --brand-deep:   #103A3C;  /* Elementor "primary". White text = 12.41:1 */
  --brand-mid:    #115A5A;
  --accent:       #73F489;  /* Elementor "accent" green. NEEDS DARK TEXT: 8.88:1 with #103A3C.
                               White text on this is 1.4:1 and fails badly. */
  --accent-ink:   #103A3C;  /* the only text colour allowed on --accent */

  /* CTA pink, sampled from the SaluStory pitch deck (#FF4981 exactly).
     WHITE text on it is 3.22:1. That passes WCAG AA for LARGE text, which is
     18.66px+ when bold, and fails below that. So .btn is set to 19px bold to
     stay compliant. Do not reduce the button font size below 1.1875rem.
     If you ever need it to pass at ANY size, use #EC0049 (4.50:1) instead:
     same hue, only darker. */
  --cta:          #FF4981;
  --cta-hover:    #EC0049;   /* darker on hover, so contrast improves on interaction */
  --cta-ink:      #FFFFFF;

  --ink:          #103A3C;
  --surface:      #E8FBF7;  /* mint, lightened. Body text on it = 11.56:1 */
  --cream:        #F3FFFC;

  --paper:   #FFFFFF;
  --muted:   #4A6B6B;       /* 5.82:1 on white, passes AA for body text */
  --line:    #CFEAE5;

  --wrap:    1140px;
  --gap:     clamp(3.5rem, 8vw, 7rem);
  --radius:  18px;

  --font-display: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.15rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

img { max-width: 100%; height: auto; display: block; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

.section { padding-block: var(--gap); }
.section--surface { background: var(--surface); }
.section--cream   { background: var(--cream); }

.eyebrow {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-mid);
  margin: 0 0 0.9rem;
}

.lede { font-size: clamp(1.075rem, 1.9vw, 1.3rem); color: var(--muted); max-width: 46ch; }

/* Skip link ------------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 0.75rem 1.25rem; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; color: #fff; }

:where(a, button, summary, input):focus-visible {
  outline: 3px solid var(--brand-deep);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;   /* 19px. Must stay >=18.66px so white-on-pink passes AA. */
  line-height: 1.2;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-2px); }

/* Warm CTA. Dark teal text, never white. See --cta note above. */
.btn--primary { background: var(--cta); color: var(--cta-ink); }
.btn--primary:hover { background: var(--cta-hover); color: var(--cta-ink); }

/* Green variant, for when a CTA sits on a warm or light background */
.btn--green { background: var(--accent); color: var(--accent-ink); }
.btn--green:hover { background: #5CE976; color: var(--accent-ink); }

.btn--brand { background: var(--brand); color: #fff; }
.btn--brand:hover { background: var(--brand-deep); color: #fff; }

.btn--ghost { border-color: currentColor; color: var(--ink); background: transparent; }
.btn--ghost-light { border-color: rgba(255,255,255,.55); color: #fff; background: transparent; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Header ---------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--brand-deep);
  color: #fff;
}
.site-header a:not(.btn) { color: #fff; }  /* :not(.btn) so buttons keep their own text colour */

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 96px;
}

.logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.logo img { height: 58px; width: auto; }

.nav-toggle, .nav-toggle-label { display: none; }

.nav ul {
  display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none; margin: 0; padding: 0;
}
.nav a:not(.btn) {
  font-family: var(--font-display);
  font-size: 0.94rem; font-weight: 600;
  text-decoration: none;
  padding-block: 0.4rem;
}
.nav .btn { text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 5px; }
.nav .btn { padding: 0.8rem 1.7rem; font-size: 1.1875rem; }  /* do not shrink, see --cta */

@media (max-width: 900px) {
  .nav-toggle-label {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 9px; cursor: pointer;
  }
  .nav-toggle-label span { display: block; height: 2px; background: #fff; border-radius: 2px; }
  .nav {
    position: absolute; inset: 96px 0 auto 0;
    background: var(--brand-deep);
    max-height: 0; overflow: hidden;
    transition: max-height .25s ease;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  .nav ul {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 0.5rem clamp(1.25rem, 5vw, 2.5rem) 1.5rem;
  }
  .nav li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav li:last-child { border-bottom: 0; padding-top: 1rem; }
  .nav a { display: block; padding: 1rem 0; }
  .nav .btn { display: inline-block; padding: 0.85rem 1.8rem; }
  .nav-toggle:checked ~ .nav { max-height: 420px; }
}

/* Hero ------------------------------------------------------------------ */
.hero {
  background: linear-gradient(160deg, var(--brand-deep) 0%, var(--brand-mid) 100%);
  color: #fff;
  padding-block: clamp(3.5rem, 7vw, 6rem);
}
.hero--slim { padding-block: clamp(3rem, 5vw, 4.25rem); }
.hero-grid {
  display: grid; gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1.2fr 0.8fr; } }

.hero h1 { color: #fff; margin-bottom: 0.6em; }
.hero .lede { color: rgba(255,255,255,.9); max-width: 40ch; margin-bottom: 2rem; }
.hero-grid > *, .feature > * { min-width: 0; }

.hero-figure img {
  margin-inline: auto;
  width: 100%;
  max-width: min(100%, 440px);
  /* No border-radius or box-shadow here. The artwork is transparent, so a box-shadow
     draws a visible rounded rectangle around it. drop-shadow follows the alpha. */
  filter: drop-shadow(0 24px 34px rgba(0, 0, 0, .32));
}

/* Feature rows ---------------------------------------------------------- */
.feature {
  display: grid; gap: clamp(2rem, 5vw, 4.5rem);
  grid-template-columns: 1fr;
  align-items: center;
}
.feature + .feature { margin-top: var(--gap); }

@media (min-width: 860px) {
  .feature { grid-template-columns: 1fr 1fr; }
  .feature--flip .feature-media { order: -1; }
}

.feature-media img {
  border-radius: var(--radius);
  width: 100%;
  max-width: min(100%, 440px);
  margin-inline: auto;
}
.feature-list {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.feature-list li {
  font-family: var(--font-display);
  font-size: 0.83rem; font-weight: 600;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  color: var(--brand-deep);
}
.section--surface .feature-list li { background: var(--paper); }

/* Testimonials ---------------------------------------------------------- */
.quote-grid {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  margin-top: 2.75rem;
}
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  margin: 0;
  display: flex; flex-direction: column; gap: 1rem;
}
.quote--wide { grid-column: span 2; }
@media (max-width: 720px) { .quote--wide { grid-column: auto; } }

.quote p {
  font-size: 1.05rem;
  line-height: 1.55;
  margin: 0;
}
.quote p::before { content: "\201C"; }
.quote p::after  { content: "\201D"; }

.quote footer {
  font-family: var(--font-display);
  font-size: 0.85rem; font-weight: 600;
  color: var(--muted);
  margin-top: auto;
}
.quote footer strong { color: var(--ink); display: block; font-weight: 700; }

/* Pricing --------------------------------------------------------------- */
.plans {
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
  margin-top: 2.75rem;
  align-items: start;
}
@media (min-width: 900px) { .plans { grid-template-columns: 1.45fr 1fr; } }

.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
}
.plan--featured {
  border: 2px solid var(--brand);
  box-shadow: 0 24px 48px -30px rgba(14,124,123,.55);
  position: relative;
}
.plan-badge {
  position: absolute; top: -0.85rem; left: clamp(1.75rem, 3.5vw, 2.5rem);
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.9rem; border-radius: 999px;
}
.plan-price {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700; line-height: 1.1;
  margin: 0.35rem 0 0.15rem;
}
.plan-price span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.plan-alt { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; }

.plan-features { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 1.15rem; }
.plan-features h3 { font-size: 1.02rem; margin: 0 0 0.25rem; }
.plan-features p { font-size: 0.95rem; color: var(--muted); margin: 0; }
.plan-features li { padding-left: 1.75rem; position: relative; }
.plan-features li::before {
  content: ""; position: absolute; left: 0; top: 0.42rem;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--brand-mid) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat;
}
.plan-note { font-size: 0.88rem; color: var(--muted); margin-top: 1.25rem; }

/* Closing CTA ----------------------------------------------------------- */
.cta {
  background: linear-gradient(160deg, var(--brand-mid) 0%, var(--brand-deep) 100%);
  color: #fff; text-align: center;
}
.cta h2 { color: #fff; }
.cta .lede { color: rgba(255,255,255,.9); margin-inline: auto; margin-bottom: 2rem; max-width: 52ch; }

/* Footer ---------------------------------------------------------------- */
.site-footer {
  background: var(--brand-deep);
  color: rgba(255,255,255,.72);
  padding-block: clamp(2.75rem, 5vw, 4rem);
  font-size: 0.94rem;
}
.site-footer a { color: rgba(255,255,255,.82); text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid {
  display: grid; gap: 2.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.footer-grid h2 {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; margin-bottom: 1rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.site-footer .logo img { height: 44px; margin-bottom: 1rem; }
.footer-base {
  margin-top: 2.75rem; padding-top: 1.75rem;
  border-top: 1px solid rgba(255,255,255,.14);
  font-size: 0.85rem; color: rgba(255,255,255,.55);
}

/* Long-form pages (Our Story) -------------------------------------------- */
.prose { max-width: 62ch; margin-inline: auto; }
.prose h2 { margin-top: 2.25em; }
.prose h2:first-child { margin-top: 0; }
.prose p { font-size: 1.09rem; }
.prose blockquote,
.story-text blockquote {
  margin: 2rem 0; padding: 0 0 0 1.5rem;
  border-left: 4px solid var(--cta);
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 600;
  line-height: 1.45; color: var(--brand-deep);
}

/* Embeds ---------------------------------------------------------------- */
.embed {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: var(--radius); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Story page ------------------------------------------------------------ */
.story-intro { max-width: 40ch; }
/* Our Story: text and photos side by side, so the column is anchored instead of
   floating in the middle of an empty page. Photos overlap slightly at desktop,
   which reads as designed rather than stacked. */
.story {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) { .story { grid-template-columns: 1fr 0.78fr; } }
.story > * { min-width: 0; }
.story-text { max-width: 54ch; }

.story-photos { display: grid; gap: 1.25rem; }
.story-photos figure { margin: 0; }
.story-photos img {
  width: 100%;
  border-radius: var(--radius);
  object-fit: cover;
  object-position: center 28%;
}
.ph-a img { aspect-ratio: 4 / 3; }
.ph-b img { aspect-ratio: 1 / 1; }

@media (min-width: 900px) {
  .story-photos { grid-template-columns: repeat(6, 1fr); gap: 0; }
  .ph-a { grid-column: 1 / 6; grid-row: 1; }
  .ph-b { grid-column: 3 / 7; grid-row: 2; margin-top: -26%; z-index: 1; }
  /* ring drawn with box-shadow so it does not change the element's size */
  .ph-b img { box-shadow: 0 0 0 8px var(--paper), 0 18px 32px -18px rgba(16,58,60,.35); }
}
.story-media img { border-radius: var(--radius); width: 100%; }

.cards {
  display: grid; gap: 1.25rem;
  grid-template-columns: 1fr;
  margin-top: 2.75rem;
}
/* Four cards read as a balanced 2x2, not 3 + 1 orphan */
@media (min-width: 700px)  { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1050px) { .cards--four { grid-template-columns: 1fr 1fr; max-width: 940px; } }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 1.75rem;
}
.card h3 { font-size: 1.1rem; margin-bottom: 0.6rem; color: var(--brand-deep); }
.card p { color: var(--muted); margin: 0; }

.pull {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700; line-height: 1.3;
  color: var(--brand-deep);
  max-width: 24ch;
  text-wrap: balance;
}

/* Webinar / resource page ------------------------------------------------ */
.resource-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.notice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: var(--muted);
}