/* ── Weather page only: lighten the footer CTA copy ─────── */
      .page-weather .home-footer-cta__title {
          font-weight: 200;
          color: rgba(248, 244, 234, 0.88);
          letter-spacing: 0.01em;
      }
      /* CMS body wraps its content in its own <p>, which auto-closes the
         outer .home-footer-cta__sub <p>. The visible copy ends up in a
         bare <p> with no class, so we target any <p> inside the section. */
      .page-weather .home-footer-cta__sub,
      .page-weather .home-footer-cta p {
          font-weight: 300;
          color: #e8e3d8 !important;
      }

      /* ── Doorstep (our own Zigbee sensor) ───────────────────── */
      .doorstep {
          position: relative;
          padding: 64px 56px 48px;
          background: linear-gradient(180deg, #fff 0%, #faf8f5 100%);
          border: 1px solid #ede9e4;
          border-radius: 4px;
          text-align: center;
          box-shadow: 0 14px 40px -20px rgba(120, 67, 86, 0.18);
          overflow: hidden;
      }
      .doorstep::before {
          content: ""; position: absolute;
          left: 50%; top: 0; transform: translateX(-50%);
          width: 80px; height: 1px; background: #c4a052;
          z-index: 3;
      }
      .doorstep__bg {
          position: absolute; inset: 0; z-index: 0;
          background-image: var(--door-bg);
          background-size: cover; background-position: center;
          opacity: 0.55;
          filter: sepia(0.25) contrast(0.95) brightness(0.98) saturate(0.85);
      }
      .doorstep::after {
          content: ""; position: absolute; inset: 0; z-index: 1;
          background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(250,248,245,0.55) 55%, rgba(250,248,245,0.78) 100%);
          pointer-events: none;
      }
      .doorstep--with-image .doorstep::after { display: block; }
      .doorstep__inner { position: relative; z-index: 2; }
      .doorstep__ornament { font-size: 1.375rem; color: #c4a052; line-height: 1; margin-bottom: 14px; }
      .doorstep__eyebrow {
          display: block;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.28em;
          text-transform: uppercase; color: #c4a052;
          margin-bottom: 20px;
      }
      .doorstep__title {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 2.75rem; font-weight: 400; line-height: 1.05;
          color: #1e1e1c;
          margin: 0 0 44px;
      }
      .doorstep__readings { display: flex; justify-content: center; align-items: center; gap: 64px; margin-bottom: 36px; }
      .doorstep__reading { display: flex; flex-direction: column; align-items: center; }
      .doorstep__big {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 4.25rem; font-weight: 400; line-height: 0.9;
          color: #784356; letter-spacing: -1px; margin-bottom: 18px;
      }
      .doorstep__unit { font-size: 1.5rem; color: #8a8784; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
      .doorstep__lbl {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.16em;
          text-transform: uppercase; color: #5a5855;
      }
      .doorstep__divider { width: 1px; height: 64px; background: #ede9e4; margin-bottom: 22px; }
      .doorstep__prose {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic; font-size: 1.25rem; line-height: 1.6;
          color: #5a5855; max-width: 540px; margin: 0 auto 22px;
      }
      .doorstep__age {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
          text-transform: uppercase; color: #8a8784; margin: 0;
      }
      @media (max-width: 640px) {
          .doorstep { padding: 40px 24px 32px; }
          .doorstep__title { font-size: 1.875rem; margin-bottom: 32px; }
          .doorstep__readings { gap: 28px; }
          .doorstep__big { font-size: 3.125rem; margin-bottom: 14px; }
          .doorstep__unit { font-size: 1.125rem; }
          .doorstep__divider { height: 44px; }
      }

      .weather-source, .weather-fallback {
          text-align: center; margin-top: 16px;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.75rem; letter-spacing: 0.08em; color: #8a8784;
      }
      .weather-fallback { font-style: italic; }

      /* ── Outlook rows ────────────────────────────────────────── */
      .outlook-stack { display: flex; flex-direction: column; gap: 18px; margin-top: var(--space-7, 32px); }
      .outlook-row {
          display: grid;
          grid-template-columns: 360px 1px 1fr;
          gap: 40px; padding: 32px 44px;
          background: #fff; border: 1px solid #ede9e4;
          border-left: 4px solid #c4a052; border-radius: 4px;
          align-items: stretch;
      }
      .outlook-row--gold     { border-left-color: #c4a052; }
      .outlook-row--burgundy { border-left-color: #784356; }
      .outlook-row--pink     { border-left-color: #A8778A; }
      .outlook-row--blue     { border-left-color: #87B7CF; }
      .outlook-row__head { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
      .outlook-row__bar { background: #ede9e4; width: 1px; height: 100%; justify-self: center; }
      .outlook-row__eyebrow {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
      }
      .outlook-row--gold .outlook-row__eyebrow     { color: #c4a052; }
      .outlook-row--burgundy .outlook-row__eyebrow { color: #784356; }
      .outlook-row--pink .outlook-row__eyebrow     { color: #8a5a6e; }
      .outlook-row--blue .outlook-row__eyebrow     { color: #5a94b0; }
      .outlook-row__lede {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.875rem; font-weight: 500; line-height: 1.15; color: #1e1e1c; margin: 0;
      }
      .outlook-row__body { display: flex; flex-direction: column; justify-content: center; }
      .outlook-row__body p {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          color: #5a5855; line-height: 1.7; margin: 0 0 12px;
      }
      .outlook-row__body p:last-child { margin-bottom: 0; }
      .outlook-row__body a { color: #784356; text-decoration: none; border-bottom: 1px solid rgba(120, 67, 86, 0.3); }
      .outlook-row__body a:hover { border-bottom-color: #784356; }
      @media (max-width: 820px) {
          .outlook-row { grid-template-columns: 1fr; gap: 16px; padding: 26px; }
          .outlook-row__bar { display: none; }
      }

      /* ── Activity rows ───────────────────────────────────────── */
      .activity-stack {
          display: flex; flex-direction: column; gap: 0;
          margin-top: var(--space-7, 32px);
          background: #fff; border: 1px solid #ede9e4; border-radius: 4px;
      }
      .activity-row {
          display: grid;
          grid-template-columns: 360px 1px 1fr;
          gap: 40px; padding: 30px 44px;
          border-bottom: 1px solid #ede9e4; align-items: stretch;
      }
      .activity-row:last-child { border-bottom: 0; }
      .activity-row__head { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
      .activity-row__title {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.75rem; font-weight: 500; color: #784356; margin: 0;
      }
      .activity-row__verdict {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic; font-size: 1.1875rem; line-height: 1.4; color: #c4a052; margin: 0;
      }
      .activity-row__bar { background: #ede9e4; width: 1px; height: 100%; justify-self: center; }
      .activity-row__body { display: flex; flex-direction: column; justify-content: center; }
      .activity-row__body p {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          color: #5a5855; line-height: 1.7; margin: 0 0 10px;
      }
      .activity-row__body p:last-child { margin-bottom: 0; }
      .activity-row__note { color: #1e1e1c !important; font-weight: 500; }
      @media (max-width: 820px) {
          .activity-row { grid-template-columns: 1fr; gap: 14px; padding: 26px; }
          .activity-row__bar { display: none; }
      }

      /* ── Hourly strip ───────────────────────────────────────── */
      .hourly-strip {
          display: flex; gap: 0; overflow-x: auto;
          padding: 4px 0 18px;
          scrollbar-width: thin; scrollbar-color: #c4a052 transparent;
          border-top: 1px solid #ede9e4; border-bottom: 1px solid #ede9e4;
          background: #fff;
      }
      .hourly-strip::-webkit-scrollbar { height: 6px; }
      .hourly-strip::-webkit-scrollbar-thumb { background: #c4a052; border-radius: 0; }
      .hourly-strip__hour {
          flex: none; min-width: 84px;
          display: flex; flex-direction: column; align-items: center; gap: 6px;
          padding: 18px 12px; border-right: 1px solid #ede9e4;
      }
      .hourly-strip__hour:last-child { border-right: 0; }
      .hourly-strip__time {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
          text-transform: uppercase; color: #8a8784;
      }
      .hourly-strip__glyph { color: #784356; }
      .hourly-strip__temp {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.25rem; font-weight: 500; color: #1e1e1c;
      }
      .hourly-strip__rain {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; letter-spacing: 0.08em; color: #5a94b0;
      }

      /* ── Extended ───────────────────────────────────────────── */
      .extended-list { background: #fff; border: 1px solid #ede9e4; border-radius: 4px; }
      .extended-list__row {
          display: grid;
          grid-template-columns: 1.2fr 1.6fr auto auto;
          align-items: center; gap: 22px;
          padding: 18px 24px; border-bottom: 1px solid #ede9e4;
      }
      .extended-list__row:last-child { border-bottom: 0; }
      .extended-list__date { display: flex; flex-direction: column; gap: 2px; }
      .extended-list__day {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.25rem; font-weight: 500; color: #1e1e1c;
      }
      .extended-list__sub {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
          text-transform: uppercase; color: #8a8784;
      }
      .extended-list__cond { display: flex; align-items: center; gap: 12px; }
      .extended-list__glyph { color: #784356; }
      .extended-list__label {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic; font-size: 1.125rem; color: #1e1e1c;
      }
      .extended-list__temps {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          display: flex; align-items: baseline; gap: 8px;
      }
      .extended-list__temps strong { font-size: 1.375rem; font-weight: 500; color: #1e1e1c; }
      .extended-list__temps small { font-size: 1rem; color: #8a8784; font-weight: 400; }
      .extended-list__rain {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em;
          text-transform: uppercase; color: #5a94b0; min-width: 100px; text-align: right;
      }
      .extended-list__rain--dry { color: #c4a052; }
      @media (max-width: 720px) {
          .extended-list__row { grid-template-columns: 1fr auto; row-gap: 8px; }
          .extended-list__cond { grid-column: 1 / -1; }
          .extended-list__rain { text-align: left; }
      }

      /* ── Tides ─────────────────────────────────────────────── */
      .tides {
          background: #fff;
          border: 1px solid #ede9e4;
          border-left: 4px solid #5a94b0;
          border-radius: 4px;
          padding: 32px 36px;
      }
      .tides__strip {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 0;
          border-bottom: 1px solid #ede9e4;
      }
      .tides__cell {
          padding: 14px 12px 20px;
          text-align: center;
          border-right: 1px solid #ede9e4;
          display: flex; flex-direction: column; align-items: center; gap: 4px;
      }
      .tides__cell:last-child { border-right: 0; }
      .tides__day {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; font-weight: 600; letter-spacing: 0.2em;
          text-transform: uppercase; color: #8a8784;
          margin-bottom: 2px;
      }
      .tides__icon { color: #5a94b0; }
      .tides__cell--high .tides__icon { color: #784356; }
      .tides__type {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em;
          text-transform: uppercase; color: #5a5855;
      }
      .tides__time {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.875rem; font-weight: 500; color: #1e1e1c;
          line-height: 1.05; letter-spacing: -0.5px;
      }
      .tides__height {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.75rem; color: #5a94b0; font-weight: 600;
      }
      .tides__curve {
          display: block;
          width: 100%;
          height: auto;
          aspect-ratio: 10 / 1;
          max-height: 130px;
          margin-top: 8px;
      }
      /* RNLI lifeboat — respects reduced-motion */
      .tides__boat animateMotion { /* placeholder selector for browsers that need it */ }
      @media (prefers-reduced-motion: reduce) {
          .tides__boat, .tides__wash { display: none; }
      }
      .tides__rnli-wrap {
          display: flex; flex-direction: column; align-items: center;
          gap: 12px; margin: 14px 0 4px;
      }
      .tides__rnli {
          text-align: center;
          margin: 0;
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic;
          font-size: 1.0625rem;
          font-weight: 600;
          color: #4a4845;
          letter-spacing: 0.01em;
      }
      .tides__rnli-donate {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 10px 22px;
          background: #f37021;
          color: #ffffff;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.75rem; font-weight: 600;
          letter-spacing: 0.18em; text-transform: uppercase;
          text-decoration: none;
          border-radius: 999px;
          box-shadow: 0 4px 12px rgba(243, 112, 33, 0.22);
          transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
      }
      .tides__rnli-donate:hover,
      .tides__rnli-donate:focus-visible {
          background: #06214A;
          transform: translateY(-1px);
          box-shadow: 0 6px 16px rgba(6, 33, 74, 0.28);
      }
      .tides__rnli-donate svg { transition: transform 0.18s ease; }
      .tides__rnli-donate:hover svg { transform: translateX(3px); }
      .tides__source {
          text-align: center; margin-top: 12px;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; letter-spacing: 0.1em; color: #8a8784;
      }
      .tides__sea-strip {
          display: flex;
          flex-wrap: wrap;
          gap: 12px;
          width: 100%;
          margin: 22px 0 0;
      }
      .tides__sea-strip > .tides__sea-chip {
          flex: 1 1 140px;
          min-width: 0;
      }
      .tides__sea-chip {
          display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
          padding: 16px 18px 18px;
          background: #faf8f5;
          border: 1px solid #ede9e4;
          border-radius: 6px;
          min-height: 120px;
          position: relative; overflow: hidden;
          transition: transform 0.18s ease, box-shadow 0.18s ease;
      }
      .tides__sea-icon {
          display: flex; align-items: center; justify-content: center;
          width: 100%; height: 32px;
          margin-bottom: 6px;
      }
      .tides__sea-icon svg { display: block; }
      .tides__sea-chip:hover {
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(30, 30, 28, 0.06);
      }
      .tides__sea-chip::before {
          content: ""; position: absolute; left: 0; top: 0; bottom: 0;
          width: 4px; background: #5a94b0;
      }
      .tides__sea-lbl {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
          text-transform: uppercase; color: #5a94b0;
      }
      .tides__sea-val {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.125rem; font-weight: 500; color: #1e1e1c; line-height: 1.2;
          word-break: break-word; overflow-wrap: anywhere;
      }
      .tides__sea-chip--temp .tides__sea-val { font-size: 1.5rem; }
      .tides__sea-note {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-style: italic; color: #8a8784;
          margin-top: 2px;
      }

      /* Per-chip accent colours */
      .tides__sea-chip--temp::before    { background: var(--temp-col, #5a94b0); }
      .tides__sea-chip--temp .tides__sea-lbl { color: var(--temp-col, #5a94b0); }
      .tides__sea-chip--temp .tides__sea-val { color: var(--temp-col, #1e1e1c); }
      .tides__sea-chip--temp           { background: color-mix(in srgb, var(--temp-col, #5a94b0) 6%, #faf8f5); }

      .tides__sea-chip--state::before   { background: #0d9488; }
      .tides__sea-chip--state .tides__sea-lbl { color: #0d9488; }
      .tides__sea-chip--state          { background: rgba(13, 148, 136, 0.06); }

      .tides__sea-chip--swell::before   { background: #1d4ed8; }
      .tides__sea-chip--swell .tides__sea-lbl { color: #1d4ed8; }
      .tides__sea-chip--swell          { background: rgba(29, 78, 216, 0.06); }

      .tides__sea-chip--current::before { background: #0891b2; }
      .tides__sea-chip--current .tides__sea-lbl { color: #0891b2; }
      .tides__sea-chip--current        { background: rgba(8, 145, 178, 0.06); }

      .tides__sea-chip--level::before   { background: #c4a052; }
      .tides__sea-chip--level .tides__sea-lbl { color: #a07c2c; }
      .tides__sea-chip--level          { background: rgba(196, 160, 82, 0.07); }

      .tides__sea-chip--vis::before     { background: #6b7280; }
      .tides__sea-chip--vis .tides__sea-lbl { color: #6b7280; }
      .tides__sea-chip--vis            { background: rgba(107, 114, 128, 0.05); }

      /* ── Air &amp; pollen cards ───────────────────────────── */
      .air-strip {
          display: grid; gap: 16px;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      }
      .air-card {
          display: flex; flex-direction: column; align-items: center;
          gap: 6px;
          padding: 22px 22px 20px;
          background: #faf8f5;
          border: 1px solid #ede9e4;
          border-radius: 6px;
          position: relative;
          overflow: hidden;
          text-align: center;
      }
      .air-card__lbl {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
          text-transform: uppercase; color: #8a8784;
      }
      .air-card__big {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 2.375rem; font-weight: 500; color: #1e1e1c; line-height: 1;
          margin-top: 2px;
      }
      .air-card__band {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.75rem; font-weight: 500; color: #1e1e1c; letter-spacing: 0.04em;
      }

      /* AQI arc gauge */
      .air-card__gauge {
          display: flex; align-items: center; justify-content: center;
          margin: 4px 0 0;
      }
      .air-card__gauge svg { display: block; }
      .air-card--aqi .air-card__big { margin-top: -10px; } /* overlap with arc bottom */

      /* Pollen plant icon */
      .air-card__icon {
          display: flex; align-items: center; justify-content: center;
          height: 52px; margin: 4px 0 2px;
      }
      .air-card__icon svg { display: block; }

      /* Pollen 4-dot intensity scale */
      .air-card__dots {
          display: flex; gap: 6px; margin: 4px 0 6px;
      }
      .air-card__dot {
          width: 10px; height: 10px; border-radius: 50%;
          background: #e9e6e0;
          border: 1px solid #ddd6cb;
      }
      .air-card__dot.is-on { border-color: transparent; }

      /* PM chart */
      .air-card__pm-chart {
          display: flex; align-items: center; justify-content: center;
          margin: 4px 0;
      }
      .air-card__pm-chart svg { display: block; }
      .air-card::after {
          content: ""; position: absolute; left: 0; right: 0; top: 0;
          height: 3px; background: #c4a052;
      }
      .air-card--good::after,
      .air-card--none::after,
      .air-card--low::after        { background: #6c9a73; }
      .air-card--fair::after,
      .air-card--moderate::after   { background: #c4a052; }
      .air-card--poor::after,
      .air-card--high::after       { background: #d28a4a; }
      .air-card--very-poor::after,
      .air-card--very-high::after  { background: #b34c43; }

      .air-card--pm .air-card__pm-rows {
          display: flex; flex-direction: column; gap: 4px;
          margin-top: 4px; align-items: center;
      }
      .air-card--pm .air-card__pm-rows strong {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.125rem; font-weight: 500; color: #1e1e1c;
          margin-right: 6px;
      }
      .air-card--pm .air-card__pm-rows small {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; color: #8a8784; letter-spacing: 0.04em;
      }

      /* Moon line inside the daylight outlook card */
      .outlook-row__moon {
          margin-top: 12px !important;
          padding-top: 10px;
          border-top: 1px dashed #ede9e4;
          font-family: 'Cormorant Garamond', Cormorant, serif !important;
          font-style: italic; font-size: 1rem !important;
          color: #784356 !important;
      }
      .outlook-row__moon-lbl {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.625rem; font-weight: 600; letter-spacing: 0.2em;
          text-transform: uppercase; color: #c4a052;
          margin-right: 8px; font-style: normal;
      }
      @media (max-width: 720px) {
          .tides { padding: 24px 18px; }
          .tides__strip { grid-template-columns: repeat(2, 1fr); }
          .tides__cell:nth-child(2) { border-right: 0; }
          .tides__cell:nth-child(-n+2) { border-bottom: 1px solid #ede9e4; }
          .tides__time { font-size: 1.5rem; }
      }

      /* ── Extended forecast "Next week" disclosure ──────────── */
      .extended-more {
          margin-top: 14px;
          background: #fff;
          border: 1px solid #ede9e4;
          border-radius: 4px;
      }
      .extended-more summary {
          list-style: none; cursor: pointer;
          padding: 18px 24px;
          display: flex; align-items: center; gap: 14px;
          position: relative;
      }
      .extended-more summary::-webkit-details-marker { display: none; }
      .extended-more summary::after {
          content: "+";
          position: absolute; right: 24px; top: 50%;
          transform: translateY(-50%);
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 1.375rem; font-weight: 300; color: #c4a052;
          transition: transform 0.25s ease;
      }
      .extended-more[open] summary::after { transform: translateY(-50%) rotate(45deg); }
      .extended-more__label {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.25rem; font-weight: 500; color: #784356;
      }
      .extended-more__hint {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.2em;
          text-transform: uppercase; color: #8a8784;
          margin-left: auto; margin-right: 36px;
      }
      .extended-list--more {
          border-top: 1px solid #ede9e4;
          border-radius: 0;
          border-left: 0; border-right: 0; border-bottom: 0;
      }
      @media (max-width: 720px) {
          .extended-more__hint { display: none; }
      }

      /* ── Beyond the forecast (climate normals panel) ────────── */
      .beyond-forecast {
          padding: 36px 40px;
          background: linear-gradient(135deg, #fff 0%, #faf4e6 100%);
          border: 1px solid #ede9e4;
          border-left: 4px solid #c4a052;
          border-radius: 4px;
      }
      .beyond-forecast__head { margin-bottom: 24px; }
      .beyond-forecast__eyebrow {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; font-weight: 600; letter-spacing: 0.22em;
          text-transform: uppercase; color: #c4a052;
          display: block; margin-bottom: 8px;
      }
      .beyond-forecast__title {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.75rem; font-weight: 500; color: #784356;
          margin: 0 0 10px;
      }
      .beyond-forecast__lede {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.875rem; color: #5a5855; line-height: 1.6; margin: 0;
          max-width: 640px;
      }
      .beyond-forecast__grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
          gap: 0;
          background: #fff;
          border: 1px solid #ede9e4;
          border-radius: 4px;
      }
      .beyond-month {
          padding: 22px 18px;
          text-align: center;
          border-right: 1px solid #ede9e4;
      }
      .beyond-month:last-child { border-right: 0; }
      .beyond-month__name {
          display: block;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.18em;
          text-transform: uppercase; color: #8a8784;
          margin-bottom: 10px;
      }
      .beyond-month__temps {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          margin-bottom: 8px;
      }
      .beyond-month__temps strong {
          font-size: 1.75rem; font-weight: 500; color: #1e1e1c;
          letter-spacing: -0.5px;
      }
      .beyond-month__temps small {
          font-size: 1.125rem; color: #8a8784; margin-left: 6px; font-weight: 400;
      }
      .beyond-month__meta {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.7188rem; color: #5a5855; line-height: 1.5;
      }
      .beyond-month__meta strong { color: #784356; }
      .beyond-month__sep { color: #c4a052; margin: 0 4px; }
      @media (max-width: 720px) {
          .beyond-forecast { padding: 26px 22px; }
          .beyond-month { border-right: 0; border-bottom: 1px solid #ede9e4; }
          .beyond-month:last-child { border-bottom: 0; }
      }

      /* ── Climate stats ──────────────────────────────────────── */
      .climate-stats {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          gap: 16px;
          margin: var(--space-7, 32px) 0 var(--space-8, 40px);
      }
      .climate-stat {
          display: flex; flex-direction: column; align-items: center;
          padding: 28px 22px 22px;
          background: #ffffff;
          border: 1px solid #ede9e4;
          border-radius: 6px;
          text-align: center;
          position: relative;
          overflow: hidden;
          transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
      }
      .climate-stat:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(120, 67, 86, 0.06);
      }
      .climate-stat::before {
          content: ""; position: absolute; top: 0; left: 0; right: 0;
          height: 3px;
      }
      .climate-stat--gold::before     { background: linear-gradient(90deg, transparent, #c4a052, transparent); }
      .climate-stat--burgundy::before { background: linear-gradient(90deg, transparent, #784356, transparent); }
      .climate-stat--pink::before     { background: linear-gradient(90deg, transparent, #A8778A, transparent); }
      .climate-stat--blue::before     { background: linear-gradient(90deg, transparent, #87B7CF, transparent); }
      .climate-stat--gold     { background: linear-gradient(180deg, rgba(196, 160, 82, 0.06) 0%, #ffffff 70%); }
      .climate-stat--burgundy { background: linear-gradient(180deg, rgba(120, 67, 86, 0.06) 0%, #ffffff 70%); }
      .climate-stat--pink     { background: linear-gradient(180deg, rgba(168, 119, 138, 0.06) 0%, #ffffff 70%); }
      .climate-stat--blue     { background: linear-gradient(180deg, rgba(135, 183, 207, 0.07) 0%, #ffffff 70%); }
      .climate-stat__icon {
          display: flex; align-items: center; justify-content: center;
          width: 40px; height: 40px; margin-bottom: 10px;
      }
      .climate-stat__icon svg { display: block; }
      .climate-stat__num {
          display: block;
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 3.25rem; font-weight: 400; line-height: 1;
          letter-spacing: -0.5px; margin-bottom: 4px;
      }
      .climate-stat--gold .climate-stat__num     { color: #a07c2c; }
      .climate-stat--burgundy .climate-stat__num { color: #784356; }
      .climate-stat--pink .climate-stat__num     { color: #8a5a6e; }
      .climate-stat--blue .climate-stat__num     { color: #4a7a90; }
      .climate-stat__num small { font-size: 1.0625rem; color: #8a8784; margin-left: 2px; font-weight: 400; }
      .climate-stat__lbl {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6562rem; font-weight: 600; letter-spacing: 0.22em;
          text-transform: uppercase; color: #5a5855;
          margin-bottom: 14px;
      }
      .climate-stat__bar {
          width: 100%; max-width: 200px;
          padding: 4px 0;
          margin-bottom: 12px;
      }
      .climate-stat__bar svg { display: block; width: 100%; }
      .climate-stat__note {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic; font-size: 0.875rem; line-height: 1.4;
          color: #5a5855;
      }
      .climate-prose {
          max-width: 720px;
          margin: 0 auto;
          padding: 0 16px;
      }
      .climate-prose p {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          color: #3a3835; line-height: 1.7; font-size: 1.1875rem; margin: 0 0 22px;
      }
      .climate-prose p:first-of-type::first-letter {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 3.5rem; float: left; line-height: 0.9; padding: 6px 8px 0 0;
          color: #784356; font-weight: 500;
      }
      .climate-prose p:last-child { margin-bottom: 0; }
      .climate-prose a {
          color: #784356; text-decoration: none;
          border-bottom: 1px solid rgba(120, 67, 86, 0.3);
          transition: border-bottom-color 0.18s ease;
      }
      .climate-prose a:hover { border-bottom-color: #784356; }

      /* ── Seasonal rows ──────────────────────────────────────── */
      .season-stack { display: flex; flex-direction: column; gap: 20px; }
      .season-row {
          display: grid;
          grid-template-columns: 320px 1fr;
          gap: 40px; padding: 34px 44px;
          background: #fff; border: 1px solid #ede9e4;
          border-left: 4px solid #c4a052; border-radius: 6px;
          position: relative; align-items: stretch; overflow: hidden;
          isolation: isolate;
      }
      /* Seasonal landscape sits behind the entire row, faded so text stays sharp */
      .season-row__art {
          position: absolute; inset: 0;
          opacity: 0.38;
          z-index: 0;
          pointer-events: none;
          transition: opacity 0.5s ease, transform 0.6s ease;
          will-change: opacity, transform;
      }
      .season-row__art svg {
          display: block; width: 100%; height: 100%;
      }
      /* Soft white veil on top of the landscape so text remains legible */
      .season-row::after {
          content: ""; position: absolute; inset: 0;
          background: linear-gradient(90deg,
              rgba(255, 255, 255, 0.9) 0%,
              rgba(255, 255, 255, 0.74) 45%,
              rgba(255, 255, 255, 0.56) 100%);
          z-index: 1; pointer-events: none;
          transition: background 0.5s ease;
      }
      .season-row__head,
      .season-row__body { position: relative; z-index: 2; }
      /* Hover: lift opacity, gently zoom, ease the veil back */
      .season-row:hover .season-row__art {
          opacity: 0.58;
          transform: scale(1.03);
      }
      .season-row:hover::after {
          background: linear-gradient(90deg,
              rgba(255, 255, 255, 0.78) 0%,
              rgba(255, 255, 255, 0.62) 45%,
              rgba(255, 255, 255, 0.42) 100%);
      }

      /* ── Subtle seasonal motion ────────────────────────────── */
      @keyframes wx-butterfly-a {
          0%, 100% { transform: translate(0, 0); }
          25%      { transform: translate(3px, -5px); }
          50%      { transform: translate(-2px, -2px); }
          75%      { transform: translate(2px, -6px); }
      }
      @keyframes wx-butterfly-b {
          0%, 100% { transform: translate(0, 0); }
          25%      { transform: translate(-3px, -4px); }
          50%      { transform: translate(2px, -2px); }
          75%      { transform: translate(-2px, -5px); }
      }
      .wx-bf--a { animation: wx-butterfly-a 5s ease-in-out infinite; }
      .wx-bf--b { animation: wx-butterfly-b 4.2s ease-in-out infinite; }

      @keyframes wx-gull-glide {
          0%, 100% { transform: translate(0, 0); }
          50%      { transform: translate(8px, -2px); }
      }
      .wx-gull--a { animation: wx-gull-glide 9s ease-in-out infinite; }
      .wx-gull--b { animation: wx-gull-glide 11s ease-in-out infinite -3s; }
      .wx-gull--c { animation: wx-gull-glide 13s ease-in-out infinite -6s; }

      @keyframes wx-leaf-sway {
          0%, 100% { transform: translate(0, 0) rotate(0deg); }
          50%      { transform: translate(-2px, 3px) rotate(8deg); }
      }
      .wx-leaf { transform-origin: center; }
      .wx-leaf--0 { animation: wx-leaf-sway 6s ease-in-out infinite; }
      .wx-leaf--1 { animation: wx-leaf-sway 7s ease-in-out infinite -1s; }
      .wx-leaf--2 { animation: wx-leaf-sway 5s ease-in-out infinite -2s; }
      .wx-leaf--3 { animation: wx-leaf-sway 6.5s ease-in-out infinite -3s; }
      .wx-leaf--4 { animation: wx-leaf-sway 7.5s ease-in-out infinite -1.5s; }
      .wx-leaf--5 { animation: wx-leaf-sway 5.5s ease-in-out infinite -2.5s; }
      .wx-leaf--6 { animation: wx-leaf-sway 6s ease-in-out infinite -4s; }
      .wx-leaf--7 { animation: wx-leaf-sway 7s ease-in-out infinite -0.5s; }

      @keyframes wx-flake-drift {
          0%   { transform: translate(0, -4px); opacity: 0.4; }
          15%  { opacity: 0.95; }
          100% { transform: translate(2px, 14px); opacity: 0.3; }
      }
      .wx-flake--0 { animation: wx-flake-drift 7s linear infinite; }
      .wx-flake--1 { animation: wx-flake-drift 8s linear infinite -2s; }
      .wx-flake--2 { animation: wx-flake-drift 6.5s linear infinite -4s; }
      .wx-flake--3 { animation: wx-flake-drift 7.5s linear infinite -1s; }
      .wx-flake--4 { animation: wx-flake-drift 8.5s linear infinite -3s; }
      .wx-flake--5 { animation: wx-flake-drift 7s linear infinite -5s; }
      .wx-flake--6 { animation: wx-flake-drift 6s linear infinite -0.5s; }
      .wx-flake--7 { animation: wx-flake-drift 8s linear infinite -2.5s; }
      .wx-flake--8 { animation: wx-flake-drift 7s linear infinite -4.5s; }
      .wx-flake--9 { animation: wx-flake-drift 8s linear infinite -6s; }

      @media (prefers-reduced-motion: reduce) {
          .wx-bf, .wx-gull, .wx-leaf, .wx-flake { animation: none !important; }
      }
      .season-row--pink     { border-left-color: #A8778A; background: linear-gradient(135deg, #fff 0%, #f5edf0 100%); }
      .season-row--gold     { border-left-color: #c4a052; background: linear-gradient(135deg, #fff 0%, #faf4e6 100%); }
      .season-row--burgundy { border-left-color: #784356; background: linear-gradient(135deg, #fff 0%, #fbf2f4 100%); }
      .season-row--blue     { border-left-color: #87B7CF; background: linear-gradient(135deg, #fff 0%, #eef5f8 100%); }
      .season-row__head { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
      .season-row__eyebrow {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.22em;
          text-transform: uppercase; color: #8a8784;
      }
      .season-row__title {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 2.25rem; font-weight: 500; line-height: 1; margin: 0;
      }
      .season-row--pink .season-row__title     { color: #8a5a6e; }
      .season-row--gold .season-row__title     { color: #c4a052; }
      .season-row--burgundy .season-row__title { color: #784356; }
      .season-row--blue .season-row__title     { color: #5a94b0; }
      .season-row__temps {
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-style: italic; font-size: 1rem; color: #5a5855;
      }
      .season-row__bar { display: none; }
      .season-row__body { display: flex; flex-direction: column; justify-content: center; }
      .season-row__body p {
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          color: #5a5855; line-height: 1.75; margin: 0 0 12px;
      }
      .season-row__body p:last-child { margin-bottom: 0; }
      .season-row__body a { color: #784356; text-decoration: none; border-bottom: 1px solid rgba(120, 67, 86, 0.3); }
      .season-row__body a:hover { border-bottom-color: #784356; }
      @media (max-width: 820px) {
          .season-row { grid-template-columns: 1fr; gap: 18px; padding: 26px 24px; }
      }

      /* ── FAQ ────────────────────────────────────────────────── */
      .weather-faq { border-top: 1px solid #ede9e4; }
      .weather-faq__item { border-bottom: 1px solid #ede9e4; }
      .weather-faq__item summary {
          list-style: none; cursor: pointer;
          padding: 22px 36px 22px 4px; position: relative;
          font-family: 'Cormorant Garamond', Cormorant, serif;
          font-size: 1.375rem; font-weight: 500; color: #1e1e1c;
          transition: color 0.2s ease;
      }
      .weather-faq__item summary::-webkit-details-marker { display: none; }
      .weather-faq__item summary::after {
          content: "+";
          position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          font-size: 1.375rem; font-weight: 300; color: #c4a052;
          transition: transform 0.25s ease;
      }
      .weather-faq__item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
      .weather-faq__item[open] summary { color: #784356; }
      .weather-faq__item p {
          padding: 0 4px 22px; margin: 0;
          font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
          color: #5a5855; line-height: 1.75;
      }
      .weather-faq__item a { color: #784356; text-decoration: none; border-bottom: 1px solid rgba(120, 67, 86, 0.3); }
      .weather-faq__item a:hover { border-bottom-color: #784356; }

      /* ── Both weather panels: full-bleed on a portrait phone ──────────
         LAST in this stylesheet on purpose. A media query carries no extra
         specificity, so an equally-weighted rule further down the file beats
         it — which is exactly what .doorstep's own padding did to the first
         version of this.

         Deliberately needs no padding values, so it cannot drift when someone
         retunes a breakpoint. Each panel is pulled out by the container's own
         inset, and the same amount is given back on an element that has NO
         padding of its own — so it ADDS to whatever the panel already had
         rather than replacing it, and not a word moves:

             .doorstep      compensates on .doorstep__inner
             .weather-hero  compensates on itself (its padding is on __inner)

         Portrait only: held sideways a phone has width to spare and the inset
         reads as deliberate. */
      @media (max-width: 720px) and (orientation: portrait) {
          .doorstep,
          .weather-hero {
              /* TWICE the container inset: the section pads by --container-x
                 and the .container inside it pads by --container-x again.
                 Bleeding by one of them leaves the other as a visible gap. */
              --bleed: calc(var(--container-x, 20px) * 2);
              margin-inline: calc(var(--bleed) * -1) !important;
              border-inline-width: 0 !important;
              border-radius: 0 !important;
          }
          .doorstep__inner { padding-inline: var(--bleed) !important; }
          .weather-hero    { padding-inline: var(--bleed) !important; }
      }

.weather-demo-picker {
            position: fixed;
            left: 50%;
            bottom: 16px;
            transform: translateX(-50%);
            z-index: 9999;
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            align-items: center;
            padding: 10px 14px;
            background: rgba(30, 30, 28, 0.94);
            border: 1px solid rgba(196, 160, 82, 0.55);
            border-radius: 999px;
            box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
            font-family: 'Jost', ui-sans-serif, system-ui, sans-serif;
            font-size: 0.7812rem;
            letter-spacing: 0.04em;
            max-width: calc(100vw - 24px);
        }
        .weather-demo-picker__label {
            color: #c4a052;
            text-transform: uppercase;
            font-weight: 600;
            font-size: 0.6562rem;
            letter-spacing: 0.14em;
            padding: 0 4px 0 2px;
        }
        .weather-demo-picker__chip {
            display: inline-block;
            padding: 6px 12px;
            border-radius: 999px;
            color: #f4ede0;
            text-decoration: none;
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(244, 237, 224, 0.15);
            transition: background 0.18s ease, border-color 0.18s ease;
        }
        .weather-demo-picker__chip:hover {
            background: rgba(196, 160, 82, 0.18);
            border-color: rgba(196, 160, 82, 0.55);
        }
        .weather-demo-picker__chip.is-active {
            background: #c4a052;
            border-color: #c4a052;
            color: #1e1e1c;
            font-weight: 600;
        }
        .weather-demo-picker__chip--hide {
            font-size: 1rem;
            line-height: 1;
            padding: 4px 9px;
            opacity: 0.7;
        }
        .weather-demo-picker__chip--hide:hover { opacity: 1; }