/*
Theme Name: Unstoppable Women
Theme URI: https://unstoppablewomen.nz
Author: Unstoppable Women
Description: Life coaching with Kim Jansen, Upper Hutt, Wellington. Eight screens, each a dynamic block rendered by the theme; content lives in the theme, not the database.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: unstoppable-women
Tags: block-theme, one-column, custom-colors
*/

/* =========================================================================
   Unstoppable Women
   Tokens are locked by design_sync/from_designer/design_system.md.
   Desktop layout follows the eight prototypes.
   Everything under "Mobile rulings" implements mobile_rulings.md.
   ========================================================================= */

:root {
  /* Palette. These nine plus the muted tone are the whole system. */
  --uw-white:        #FFFFFF;
  --uw-lavender:     #E8E0FA;
  --uw-mid:          #C5B2F4;
  --uw-card:         #EFEBF9;
  --uw-plum:         #2F0439;
  --uw-body:         #3B3B3B;
  --uw-purple:       #6b46a8;
  --uw-lilac:        #B49BEE;
  --uw-edge:         #DED0EE;
  --uw-muted:        #6b5f7e;

  /* --uw-edge is split by role. #DED0EE is DECORATIVE only: dividers, card
     outlines, the rule between FAQ items. It is exempt from WCAG 1.4.11
     because it carries no information, and it is deliberately not retoned:
     darkening it would darken every divider on the site.

     --uw-edge-field is for INTERACTIVE control boundaries, where the border is
     the only thing identifying the thing as a control. 3.98:1 on white,
     3.40:1 on #EFEBF9, 3.12:1 on #E8E0FA, so it clears 1.4.11 on every light
     band a control can sit on. */
  --uw-edge-field:   #8F72B9;

  /* Derived, used only on the plum band and the footer. */
  --uw-on-plum:      #F4EEFC;
  /* Footer tones. The band is #C5B2F4 mid purple, not plum, so the text sits
     dark on light. #D9CDEA and #B6A6CC were the plum-footer pair and are
     retired with it. */
  --uw-footer-text:  #2F0439;
  --uw-footer-label: #4A1A63;
  /* #43195E no longer names a row. The copyright row it was made for has moved
     to its own plum band, but the value has a second consumer on the mid purple
     footer, the link hover, so it keeps the value under the role it actually
     still fills. 7.18:1 on #C5B2F4. The footer hairline token is retired
     outright: the rule it drew is gone. */
  --uw-footer-link-hover: #43195E;

  /* The base bar is its own plum band below the footer, so its text is light
     again. 11.59:1 on #2F0439. */
  --uw-basebar-text: #D9CDEA;
  --uw-purple-hover: #55357f;
  --uw-quote-attr:   #3D1050;

  /* Error tones. The only reds in the system, kept here with everything else
     rather than inline, so a change lands in one place and theme.json can
     mirror it. --uw-error doubles as the invalid field border and the inline
     message; the panel set is the alert's fill, hairline and text. */
  --uw-error:        #A3123C;
  --uw-error-bg:     #FBEAEF;
  --uw-error-edge:   #E3B7C4;
  --uw-error-strong: #7A0E2D;

  --uw-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --uw-sans:  Jost, 'Helvetica Neue', Arial, sans-serif;

  --uw-ease:  cubic-bezier(.22, .61, .36, 1);
  --uw-pad-x: 56px;
  --uw-pad-y: 84px;
  --uw-wave-h: 90px;
  --uw-radius-card: 20px;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  background: var(--uw-white);
  color: var(--uw-plum);
  font-family: var(--uw-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
  /* Inherited, and only ever acts on a word that would otherwise overflow its
     box. Without it one pasted URL or one long email address pushed the 390px
     layout out by 847px: a visitor's own typing could break the page. */
  overflow-wrap: break-word;
}

/* Flex and grid children default to min-width: auto, which refuses to shrink
   below their content and is what lets a single long word force a track wider
   than the screen. These are the tracks that carry visitor-supplied or
   arbitrary-length text. */
.uw-aside__links a,
.uw-footer__link,
.uw-field,
.uw-contact > *,
.uw-story__body,
.uw-service__body { min-width: 0; }

/* The contact links are flex containers, so their text is an anonymous flex
   item sized by min-content, which `break-word` cannot shrink: it only breaks a
   word once the line would overflow. `anywhere` reduces min-content itself, so
   the item can shrink and the address wraps. These two carry the one string on
   the site that plausibly grows without a redesign, an email address, and at
   390px a 47 character address already overflows. */
.uw-aside__links a,
.uw-footer__link { overflow-wrap: anywhere; }

img { max-width: 100%; }

a { color: var(--uw-purple); text-decoration: none; }
a:hover { color: var(--uw-plum); }

h1, h2, h3 { font-family: var(--uw-serif); text-wrap: pretty; }

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

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

.uw-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--uw-purple); color: var(--uw-white);
  padding: 12px 20px; border-radius: 0 0 12px 12px; font-weight: 600;
  transition: top .2s var(--uw-ease);
}
.uw-skip:focus { top: 0; color: var(--uw-white); }

/* ---------- Motion ----------
   Reveal state is applied only when JS is running (.uw-js on <html>), so a
   failed script can never leave the page blank. Reduced motion opts out
   entirely: sections render in place. */

.uw-js [data-rise] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .uw-js [data-rise] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--uw-ease), transform .7s var(--uw-ease);
  }
  .uw-js [data-rise].is-in { opacity: 1; transform: none; }
}

/* The nav underline exists on every device. Only the hover trigger below is
   gated on a pointer: keyboard focus needs the same underline on a tablet or a
   2-in-1, and while this ::after lived inside the hover query it was never
   generated there, so the :focus-visible rule had no pseudo-element to scale. */
.uw-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px;
  background: var(--uw-purple);
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--uw-ease);
}
.uw-nav__link:focus-visible::after { transform: scaleX(1); transform-origin: left; }

/* Hover motion is gated on a real pointer. On touch, a tap navigates. */
@media (hover: hover) and (pointer: fine) {
  .uw-nav__link:hover::after { transform: scaleX(1); transform-origin: left; }

  .uw-btn { transition: background-color .25s ease, transform .25s var(--uw-ease), box-shadow .25s ease; }
  .uw-btn:hover {
    background-color: var(--uw-purple-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(107, 70, 168, .28);
  }

  .uw-textlink { transition: color .25s ease, border-color .25s ease; }
  .uw-textlink:hover { border-color: var(--uw-plum); }

  [data-card] { transition: transform .35s var(--uw-ease), box-shadow .35s ease; }
  [data-card]:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(47, 4, 57, .10); }
  [data-card] svg path { transition: stroke .35s ease; }
  [data-card]:hover svg path { stroke: var(--uw-plum); }

  [data-heroimg] { transition: transform 1.2s var(--uw-ease); }
  .uw-slot--filled:hover [data-heroimg] { transform: scale(1.03); }
}

/* Reduced motion.
   The vestibular trigger is travel and scale, not colour. So every state change
   on this site survives and only the movement is removed: the button still
   darkens and takes its shadow, the card still raises its shadow and darkens
   its icon stroke, the input still takes its focus ring, the underline still
   appears, the hamburger still becomes a cross. What goes is the 2px button
   rise, the 4px card rise, the hero image's 1.03 scale and the skip link's
   60px slide.

   This replaces a blanket `*, *::before, *::after { transition-duration: .01ms }`
   kill. That removed the feedback along with the movement, so nothing
   acknowledged an action: the focus ring, the darken and the shadow all
   snapped. It also carried animation-duration and animation-iteration-count
   clauses for keyframes this stylesheet has never contained. */
@media (prefers-reduced-motion: reduce) {
  /* Nothing travels or scales. Each rule below keeps its end state and drops
     only the transform, so hover and focus still read as state changes. */
  .uw-btn:hover,
  [data-card]:hover,
  .uw-slot--filled:hover [data-heroimg] { transform: none; }

  /* In-place transforms keep their end state and arrive without a tween. */
  .uw-nav__link::after,
  .uw-navtoggle__bars i,
  .uw-skip { transition: none; }

  /* The section reveal needs no undoing here: its hidden state is declared
     only under no-preference, so sections are already in place. */

  html { scroll-behavior: auto; }
}

/* ---------- Header ---------- */

.uw-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; padding: 22px 40px; background: var(--uw-white);
  position: relative; z-index: 60;
}

/* min-height keeps the tap target at 44px once the tagline hides on phones. */
.uw-wordmark {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 44px; color: inherit;
}
.uw-wordmark__name {
  display: block; font-family: var(--uw-serif); font-size: 27px; font-weight: 600;
  letter-spacing: .02em; color: var(--uw-purple); line-height: 1.15;
}
.uw-wordmark__name em { font-weight: 500; }
.uw-wordmark__tag {
  display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--uw-muted); margin-top: 3px; white-space: nowrap;
}

.uw-nav {
  display: flex; gap: 18px; align-items: center;
  font-size: 14px; font-weight: 500; letter-spacing: .02em;
  flex-wrap: nowrap; justify-content: flex-end;
}
.uw-nav__link {
  position: relative; color: var(--uw-plum); white-space: nowrap;
  min-height: 44px; display: inline-flex; align-items: center;
  transition: color .25s ease;
}
.uw-nav__link.is-accent { color: var(--uw-purple); font-weight: 600; }
.uw-nav__cta { margin-left: 6px; flex-shrink: 0; }

.uw-navtoggle {
  display: none;
  width: 48px; height: 48px; padding: 0; flex-shrink: 0;
  background: transparent; border: 1px solid var(--uw-edge-field); border-radius: 12px;
  cursor: pointer; align-items: center; justify-content: center;
}
.uw-navtoggle__bars { display: block; width: 20px; }
.uw-navtoggle__bars i {
  display: block; height: 1.5px; background: var(--uw-plum); border-radius: 2px;
  transition: transform .3s var(--uw-ease), opacity .2s ease;
}
.uw-navtoggle__bars i + i { margin-top: 5px; }
.uw-navtoggle[aria-expanded="true"] .uw-navtoggle__bars i:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.uw-navtoggle[aria-expanded="true"] .uw-navtoggle__bars i:nth-child(2) { opacity: 0; }
.uw-navtoggle[aria-expanded="true"] .uw-navtoggle__bars i:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Full-screen panel, below 1024px only. */
.uw-navpanel {
  position: fixed; inset: 0; z-index: 55;
  background: var(--uw-white);
  padding: 96px 24px calc(24px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.uw-navpanel[hidden] { display: none; }
.uw-navpanel__nav { display: flex; flex-direction: column; }
.uw-navpanel__link {
  display: flex; align-items: center;
  min-height: 56px; font-size: 22px; font-weight: 500; color: var(--uw-plum);
  border-bottom: 1px solid var(--uw-card);
}
.uw-navpanel__link.is-accent { color: var(--uw-purple); font-weight: 600; }
.uw-navpanel__cta { margin-top: auto; }

/* ---------- Buttons and text links ---------- */

.uw-btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--uw-purple); color: var(--uw-white);
  padding: 15px 34px; border-radius: 999px;
  font-family: var(--uw-sans); font-weight: 600; font-size: 15px; letter-spacing: .03em;
  border: none; cursor: pointer; min-height: 48px; text-align: center;
}
.uw-btn:hover { color: var(--uw-white); }
.uw-btn--sm { padding: 11px 22px; min-height: 44px; }
.uw-btn--block { width: 100%; }

.uw-textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; font-size: 15px;
  border-bottom: 2px solid var(--uw-purple); padding-bottom: 3px;
}

/* Any link sitting inside running copy still has to clear 44px on a phone. */
.uw-inline-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Bands and sections ---------- */

.uw-section { padding: var(--uw-pad-y) var(--uw-pad-x); }
.uw-section--tight { padding: 76px var(--uw-pad-x); }
.uw-section--band  { padding: 72px var(--uw-pad-x); }
.uw-band-lav   { background: var(--uw-lavender); }
.uw-band-mid   { background: var(--uw-mid); }
.uw-band-plum  { background: var(--uw-plum); }
.uw-band-white { background: var(--uw-white); }

.uw-wrap    { max-width: 1200px; margin-inline: auto; }
.uw-wrap-md { max-width: 1100px; margin-inline: auto; }
.uw-wrap-sm { max-width: 900px; margin-inline: auto; }

.uw-eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--uw-purple); font-weight: 600;
}
.uw-label {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uw-purple); font-weight: 600;
}

.uw-h1 { font-weight: 500; font-size: 50px; line-height: 1.12; margin: 0 0 18px; }
.uw-h1--page { font-size: 48px; margin: 0 0 16px; }
.uw-h1--bare { margin-bottom: 0; }
.uw-h2 { font-weight: 600; font-size: 36px; line-height: 1.2; margin: 0 0 20px; }
.uw-h2--center { text-align: center; }
.uw-h2--lead { margin-bottom: 52px; }
.uw-h3 { font-family: var(--uw-serif); font-size: 25px; font-weight: 600; margin: 0 0 12px; }

.uw-lede { font-size: 19px; line-height: 1.65; color: var(--uw-body); margin: 0; max-width: 54ch; }
.uw-prose p { font-size: 17px; line-height: 1.8; color: var(--uw-body); margin: 0 0 20px; }
.uw-prose p:last-child { margin-bottom: 0; }
.uw-measure { max-width: 62ch; }

/* Wave dividers. Only ever between two full-width single-colour bands. */
/* THE WAVE RULE. Read this before changing any of the four values below.
   A wave is 90px of artwork RENDERED AT 91px, bleeding 1px over the band above
   and 1px over the band below, and 0.2% past each side. It is never laid out at
   exactly 100% width or at exactly its nominal height.

   Why: the SVG box and the band it meets round to different device pixels at
   fractional scroll offsets and non-integer device pixel ratios, which exposed a
   one-pixel seam of the wrong colour that flickered on scroll. Butting two
   boxes edge to edge cannot be made safe, because the rounding is the
   compositor's, not the layout's. Overlapping them can: a rounding error now
   reveals one more row of wave instead of a gap.

   This depends on the SVG's own background matching the band immediately above
   it, which uw_wave() guarantees by taking that colour as its first argument.
   It also depends on no ancestor clipping the bleed, so a wave must never sit
   inside a container with overflow: hidden.

   The height tracks --uw-wave-h so the mobile ruling still holds: 90px of
   artwork at 91px on desktop, 48px at 49px below 768px. The 1px bleed is
   constant, not proportional; it exists to cover a rounding error of at most
   one device pixel. */
.uw-wave {
  display: block;
  width: 100.4%;
  height: calc(var(--uw-wave-h) + 1px);
  margin: -1px 0 -1px -0.2%;
  vertical-align: top;
}

/* ---------- Hero ---------- */

.uw-hero {
  display: grid; grid-template-columns: .95fr 1.05fr; align-items: stretch;
  background: var(--uw-lavender);
}
.uw-hero__text {
  padding: 84px var(--uw-pad-x);
  display: flex; flex-direction: column; justify-content: center;
}
.uw-hero__eyebrow { margin-bottom: 20px; }
.uw-hero__lede { max-width: 40ch; margin-bottom: 36px; }
.uw-hero__actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.uw-hero__note { font-size: 14px; color: var(--uw-muted); }
.uw-hero__media { min-height: 560px; position: relative; overflow: hidden; background: var(--uw-plum); }

/* The hero image must never drive the band's height. `height: 100%` on the img
   resolves against a parent whose own height depends on this content, so the
   percentage falls back to auto, the intrinsic ratio takes over, and a portrait
   source stretched the hero to 1252px. Out of flow, the row goes back to being
   min-height and the text column, which is what the prototype sizes it by. */
.uw-hero__media .uw-slot--fill { position: absolute; inset: 0; }

/* ---------- Evidence strip ---------- */

.uw-evidence { background: var(--uw-white); border-bottom: 1px solid var(--uw-card); padding: 22px var(--uw-pad-x); }
.uw-evidence__list {
  list-style: none; margin: 0 auto; padding: 0; max-width: 1200px;
  display: flex; flex-wrap: wrap; gap: 14px 40px; justify-content: center;
}
.uw-evidence__item {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14px; font-weight: 500; color: var(--uw-body);
}
.uw-tick { flex-shrink: 0; margin-top: 3px; }

/* ---------- Checklist ---------- */

.uw-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; }
.uw-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.uw-checklist li {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 18px; line-height: 1.6; color: var(--uw-plum);
  padding-bottom: 18px; border-bottom: 1px solid var(--uw-card);
}

/* ---------- Quote bands ---------- */

.uw-quote { padding: var(--uw-pad-y) var(--uw-pad-x); text-align: center; }
.uw-quote__text {
  font-family: var(--uw-serif); font-style: italic; font-weight: 500;
  font-size: 27px; line-height: 1.6; color: var(--uw-plum);
  margin: 0 auto 20px; max-width: 34em; text-wrap: pretty;
}
.uw-quote__tag {
  font-size: 12px; letter-spacing: .22em; font-weight: 600; color: var(--uw-quote-attr);
}

/* The emotional peak. Live text, its own full-height band. */
.uw-pullquote {
  background: var(--uw-plum);
  padding: 104px var(--uw-pad-x);
  text-align: center;
  display: flex; align-items: center; justify-content: center;
  min-height: 46vh;
}
.uw-pullquote p {
  font-family: var(--uw-serif); font-weight: 500;
  font-size: 64px; line-height: 1.18; color: var(--uw-on-plum);
  margin: 0 auto; max-width: 16em; text-wrap: pretty;
}

/* ---------- Cards ---------- */

.uw-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.uw-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.uw-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.uw-pillar {
  background: var(--uw-card); border-radius: var(--uw-radius-card);
  padding: 40px 36px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.uw-pillar__icon { margin-bottom: 26px; flex-shrink: 0; }
.uw-pillar h3 {
  font-family: var(--uw-serif); font-size: 27px; font-weight: 600;
  color: var(--uw-purple); margin: 0 0 10px;
}
.uw-pillar p { font-size: 15px; color: var(--uw-body); line-height: 1.6; margin: 0; }

.uw-step {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 22px; border-top: 2px solid var(--uw-mid);
}
.uw-step h3 {
  font-family: var(--uw-serif); font-size: 25px; font-weight: 600; margin: 0;
  min-height: 2.6em; display: flex; align-items: flex-start;
}
.uw-step p { font-size: 15px; line-height: 1.7; color: var(--uw-body); margin: 0; }

.uw-testimonial {
  margin: 0; background: var(--uw-card); border-radius: var(--uw-radius-card);
  padding: 36px 40px; display: flex; flex-direction: column; gap: 18px;
}
.uw-testimonial blockquote {
  font-family: var(--uw-serif); font-style: italic; font-weight: 500;
  font-size: 21px; line-height: 1.6; color: var(--uw-plum); margin: 0; text-wrap: pretty;
}
.uw-testimonial figcaption {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uw-purple); font-weight: 600; margin-top: auto;
}

/* ---------- Meet Kim bio ---------- */

.uw-bio { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: start; max-width: 1200px; margin-inline: auto; }
.uw-bio__media { position: sticky; top: 40px; }

/* ---------- Story block ---------- */

.uw-story { display: grid; grid-template-columns: .8fr 1.2fr; gap: 64px; align-items: center; }
.uw-story__body { max-width: 58ch; }
.uw-story__meta { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.uw-story__cred { font-size: 14px; color: var(--uw-muted); }

/* ---------- Pricing ---------- */

.uw-price-strip {
  background: var(--uw-white); border-radius: var(--uw-radius-card);
  padding: 36px; text-align: center;
}
.uw-price-strip__amount { font-family: var(--uw-serif); font-size: 46px; font-weight: 500; line-height: 1; }
.uw-price-strip .uw-label { display: block; margin-bottom: 10px; }

.uw-discovery {
  background: var(--uw-card); border-radius: 24px; padding: 44px 48px;
  max-width: 1100px; margin: 0 auto 44px;
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center;
}
.uw-discovery h2 { font-size: 30px; margin: 0 0 12px; }
.uw-discovery p { font-size: 17px; line-height: 1.7; color: var(--uw-body); margin: 0; max-width: 58ch; }

.uw-tier {
  border: 1px solid var(--uw-edge); border-radius: var(--uw-radius-card);
  padding: 40px 36px; display: flex; flex-direction: column; gap: 10px;
}
.uw-tier__amount { font-family: var(--uw-serif); font-size: 52px; font-weight: 500; line-height: 1; }
.uw-tier__note { font-size: 15px; color: var(--uw-muted); line-height: 1.6; }

.uw-note-card { background: var(--uw-lavender); border-radius: var(--uw-radius-card); padding: 36px 40px; }
.uw-note-card p { font-size: 16px; line-height: 1.7; color: var(--uw-body); margin: 0; }

/* ---------- Services rows ---------- */

.uw-service { display: grid; grid-template-columns: .45fr 1fr; gap: 56px; align-items: start; max-width: 1200px; margin-inline: auto; }
/* The prototype sets these numerals in --uw-lilac (#B49BEE), which is 1.86:1 on
   the lavender band and fails the 3:1 large-text floor. Raised to the primary
   purple, which is in palette and passes. Logged as divergence 3 in STATUS.md.
   Weight and colour still read a tier below the plum heading beside them. */
.uw-service__num { font-family: var(--uw-serif); font-size: 46px; font-weight: 500; color: var(--uw-purple); line-height: 1; }
.uw-service__head h2 { font-size: 30px; margin: 12px 0 20px; }
.uw-service__body { max-width: 60ch; }
.uw-service__body ul { margin: 0 0 20px; padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
.uw-service__body li { font-size: 17px; line-height: 1.7; color: var(--uw-body); }

/* ---------- Testimonials page ---------- */

.uw-masonry { columns: 2; column-gap: 28px; max-width: 1100px; margin-inline: auto; }
.uw-masonry .uw-testimonial { break-inside: avoid; margin: 0 0 28px; display: block; }
.uw-masonry .uw-testimonial blockquote { font-size: 22px; margin-bottom: 18px; }

/* ---------- FAQs ---------- */

.uw-faqs { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; }
.uw-faq { padding: 32px 0; }
.uw-faq + .uw-faq { border-top: 1px solid var(--uw-edge); }
.uw-faq h2 { font-size: 27px; line-height: 1.3; margin: 0 0 12px; color: var(--uw-plum); }
.uw-faq p { font-size: 17px; line-height: 1.8; color: var(--uw-body); margin: 0; }

/* ---------- Upcoming ---------- */

.uw-course {
  display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: center;
  max-width: 1100px; margin-inline: auto; background: var(--uw-card); border-radius: 24px; padding: 48px;
}
.uw-course h2 { font-size: 34px; margin: 0 0 20px; }
.uw-course__links { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 28px; }
.uw-course__links a { font-size: 16px; }

/* ---------- Credentials ---------- */

/* Third-party trademarks: full colour, transparent, never on a chip and never
   restyled. ANZCAL never renders below 56px, enforced in inc/chrome.php. */
.uw-creds { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.uw-creds__logo { width: auto; display: block; }

.uw-credbox { margin-top: 36px; padding: 28px 32px; background: var(--uw-card); border-radius: var(--uw-radius-card); }
.uw-credbox__list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.uw-credbox__list div { font-size: 16px; line-height: 1.6; color: var(--uw-body); }

/* ---------- Image slots ----------
   Built to spec, deliberately empty. See inc/slots.php. */

.uw-slot { position: relative; overflow: hidden; background: var(--uw-card); }
.uw-slot--fill { width: 100%; height: 100%; }
.uw-slot__img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: var(--slot-object-position, center); display: block;
}
.uw-slot--empty {
  background-image: repeating-linear-gradient(45deg,
    var(--uw-card), var(--uw-card) 12px, var(--uw-edge) 12px, var(--uw-edge) 24px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.uw-slot__marker {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  text-align: center; max-width: 34ch;
  background: rgba(255, 255, 255, .92); border: 1px dashed var(--uw-purple);
  border-radius: 12px; padding: 16px 20px;
}
.uw-slot__tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .1em; font-weight: 600;
  color: var(--uw-purple); text-transform: uppercase;
}
.uw-slot__spec {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: var(--uw-muted); overflow-wrap: anywhere;
}

/* ---------- Contact form ---------- */

.uw-contact { display: grid; grid-template-columns: 1fr .8fr; gap: 64px; max-width: 1100px; margin-inline: auto; align-items: start; }
.uw-form { display: flex; flex-direction: column; gap: 22px; }
.uw-field { display: flex; flex-direction: column; gap: 8px; }
.uw-field__label { font-size: 14px; font-weight: 600; color: var(--uw-plum); }
.uw-req { color: var(--uw-purple); }

.uw-input, .uw-textarea, .uw-select {
  width: 100%; max-width: 100%; box-sizing: border-box; min-height: 48px;
  font-family: var(--uw-sans); font-size: 16px; color: var(--uw-plum);
  background: var(--uw-white); border: 1px solid var(--uw-edge-field); border-radius: 12px;
  padding: 12px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.uw-textarea { padding: 14px 16px; resize: vertical; min-height: 150px; }
.uw-input::placeholder, .uw-textarea::placeholder { color: var(--uw-muted); }
.uw-input:focus, .uw-textarea:focus {
  outline: none; border-color: var(--uw-purple);
  box-shadow: 0 0 0 3px rgba(107, 70, 168, .16);
}
.uw-input[aria-invalid="true"], .uw-textarea[aria-invalid="true"] { border-color: var(--uw-error); }

/* Sits above the first field. The asterisks themselves are aria-hidden and the
   inputs carry `required`, so this is for sighted users, who otherwise meet an
   unexplained glyph. */
.uw-form__legend { font-size: 14px; color: var(--uw-muted); margin: 0; }

.uw-consent {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.6; color: var(--uw-body);
}
.uw-consent input {
  width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--uw-purple); flex-shrink: 0;
}

/* Honeypot. Hidden from sight and from assistive tech, still in the DOM. */
.uw-hp {
  position: absolute !important; left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.uw-error { font-size: 14px; color: var(--uw-error); font-weight: 500; }
.uw-alert { border-radius: 12px; padding: 16px 20px; font-size: 16px; line-height: 1.6; }
.uw-alert--bad { background: var(--uw-error-bg); border: 1px solid var(--uw-error-edge); color: var(--uw-error-strong); }
.uw-alert--good { background: var(--uw-card); border: 1px solid var(--uw-edge); color: var(--uw-plum); }

.uw-aside {
  background: var(--uw-card); border-radius: var(--uw-radius-card); padding: 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.uw-aside h2 { font-size: 27px; margin: 0 0 6px; }
.uw-aside__where { font-size: 16px; color: var(--uw-body); }
.uw-aside__links { display: flex; flex-direction: column; gap: 10px; }
.uw-aside__links a { font-size: 17px; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.uw-aside__creds { border-top: 1px solid var(--uw-edge); padding-top: 24px; }

/* ---------- Footer ---------- */

/* <footer> is a bare wrapper. The colour and padding sit on its two children so
   both bands run full width inside the one contentinfo landmark: the mid purple
   band, then the plum base bar. <footer> itself carries no styling at all. */
.uw-footer__band { background: var(--uw-mid); color: var(--uw-footer-text); padding: 64px var(--uw-pad-x); }
.uw-footer__grid {
  display: grid; grid-template-columns: 1.1fr .75fr 1fr 1.5fr; gap: 44px;
}
.uw-footer__wordmark { font-family: var(--uw-serif); font-size: 25px; font-weight: 600; color: var(--uw-footer-text); }
.uw-footer__wordmark em { font-weight: 500; }
.uw-footer__tag {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--uw-footer-label); margin-top: 6px;
}
.uw-footer__col { display: flex; flex-direction: column; gap: 0; }
.uw-footer__heading {
  font-family: var(--uw-sans);
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--uw-footer-label); font-weight: 600; margin: 0 0 10px;
}
.uw-footer__link {
  color: var(--uw-footer-text); font-size: 15px; line-height: 1.5;
  min-height: 44px; display: flex; align-items: center;
}
/* Hover darkens and underlines. On the plum footer the links lightened towards
   white; on #C5B2F4 that direction runs out of contrast, and #6b46a8 lands at
   3.60:1. The underline carries the state so the colour shift can stay small. */
.uw-footer__link:hover { color: var(--uw-footer-link-hover); text-decoration: underline; }
.uw-footer__link--static { color: var(--uw-footer-text); }
.uw-footer__col--creds { gap: 10px; }
.uw-footer__cred { font-size: 15px; line-height: 1.5; color: var(--uw-footer-text); }
.uw-footer__col--creds .uw-creds { margin-top: 14px; }
/* Base bar. A sibling of <footer>, its own full-width plum band, joined to the
   footer by a hard colour change like every other band join here. */
.uw-basebar { background: var(--uw-plum); padding: 20px var(--uw-pad-x); }
.uw-basebar__inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--uw-basebar-text);
}
.uw-basebar__credit { color: var(--uw-basebar-text); min-height: 44px; display: inline-flex; align-items: center; }
.uw-basebar__credit:hover { color: var(--uw-white); }

/* =========================================================================
   Mobile rulings, from design_sync/from_designer/mobile_rulings.md
   ========================================================================= */

/* Nav collapses below 1024px. */
@media (max-width: 1023.98px) {
  .uw-nav { display: none; }
  .uw-navtoggle { display: inline-flex; }
  body.uw-navopen { overflow: hidden; }
}

@media (min-width: 1024px) {
  .uw-navpanel { display: none !important; }
}

/* No JavaScript, no hamburger. The toggle cannot open anything, and below
   1024px the desktop nav is hidden, so a phone with JS off had no navigation
   at all beyond the four footer links. The panel already holds the right six
   links and the CTA, so it is reused in flow rather than duplicated in markup.
   .uw-js is set inline in <head>, so this branch is only ever taken when the
   script genuinely did not run. */
@media (max-width: 1023.98px) {
  html:not(.uw-js) .uw-navtoggle { display: none; }
  html:not(.uw-js) .uw-navpanel[hidden] {
    display: flex;
    position: static;
    padding: 0 var(--uw-pad-x) 20px;
    overflow: visible;
  }
  html:not(.uw-js) .uw-navpanel__cta { margin-top: 16px; }
}

/* Split sections stack below 900px. */
@media (max-width: 899.98px) {
  .uw-hero { grid-template-columns: 1fr; }
  .uw-hero__media { order: -1; min-height: 0; aspect-ratio: 4 / 5; }  /* image ABOVE the text */
  .uw-hero__text { padding: 56px var(--uw-pad-x); }

  .uw-split { grid-template-columns: 1fr; gap: 32px; }

  .uw-story { grid-template-columns: 1fr; gap: 32px; }
  .uw-story__media { order: 2; }                                       /* image BELOW the text */

  .uw-bio { grid-template-columns: 1fr; gap: 32px; }
  .uw-bio__media { order: 2; position: static; }

  .uw-service { grid-template-columns: 1fr; gap: 20px; }
  .uw-service__head h2 { margin-bottom: 0; }

  .uw-contact { grid-template-columns: 1fr; gap: 40px; }               /* form first, aside after */

  .uw-course { grid-template-columns: 1fr; gap: 32px; padding: 36px; }
  .uw-course__media { order: 2; }

  .uw-discovery { grid-template-columns: 1fr; gap: 24px; }
  .uw-discovery .uw-btn { justify-self: start; }

  .uw-masonry { columns: 1; }                                          /* 2 columns to 1 below 900px */
}

/* A 4-up step rail needs one intermediate stop before the phone layout. */
@media (max-width: 1023.98px) and (min-width: 768px) {
  .uw-grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
  :root {
    --uw-pad-x: 20px;
    --uw-pad-y: 56px;
    --uw-wave-h: 48px;      /* waves drop from 90px to 48px */
  }

  .uw-header { padding: 16px 20px; }
  .uw-wordmark__tag { display: none; }   /* two-line break at phone width, adds nothing */

  /* Type scale. Body stays 17px. */
  .uw-h1 { font-size: 34px; }
  .uw-h1--page { font-size: 34px; }
  .uw-h2 { font-size: 27px; }
  .uw-h2--lead { margin-bottom: 32px; }
  .uw-lede { font-size: 18px; }
  .uw-pullquote { padding: 72px var(--uw-pad-x); min-height: 60vh; }
  .uw-pullquote p { font-size: 36px; }
  .uw-quote__text { font-size: 24px; }
  .uw-service__head h2, .uw-discovery h2, .uw-course h2 { font-size: 27px; }
  .uw-faq h2 { font-size: 24px; }

  /* All multi-column grids go to a single column. No 2-column intermediate. */
  .uw-grid-2, .uw-grid-3, .uw-grid-4 { grid-template-columns: 1fr; gap: 20px; }

  .uw-pillar { padding: 32px 28px; }
  .uw-step h3 { min-height: 0; }
  .uw-testimonial { padding: 28px 24px; }
  .uw-masonry .uw-testimonial blockquote { font-size: 20px; }
  .uw-aside { padding: 28px 24px; }
  .uw-credbox { padding: 24px; }
  .uw-section, .uw-section--tight, .uw-section--band { padding-left: var(--uw-pad-x); padding-right: var(--uw-pad-x); }

  /* Evidence strip becomes a horizontal chip rail. */
  .uw-evidence { padding-left: 0; padding-right: 0; }
  .uw-evidence__list {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 16px;
    padding: 0 20px;                      /* 20px end padding, last chip is not flush */
    -webkit-overflow-scrolling: touch;    /* keep momentum scrolling */
    scrollbar-width: none;                /* hide the scrollbar */
    scroll-snap-type: x proximity;
  }
  .uw-evidence__list::-webkit-scrollbar { display: none; }
  .uw-evidence__item {
    flex: 0 0 auto;
    min-height: 44px;
    align-items: center;
    scroll-snap-align: start;
  }
  .uw-tick { margin-top: 0; }

  /* Hero image holds the subject on a portrait crop. */
  .uw-hero__media { aspect-ratio: 3 / 4; }
  .uw-hero__media .uw-slot__img { object-position: 60% center; }

  /* Contact form. The OG's worst defect. */
  .uw-form .uw-btn { width: 100%; }

  .uw-footer__band { padding: 48px var(--uw-pad-x) 28px; }
  .uw-footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .uw-basebar__inner { flex-direction: column; align-items: flex-start; gap: 8px; }

  .uw-story__meta { gap: 12px; }
}

@media (max-width: 380px) {
  .uw-h1, .uw-h1--page { font-size: 31px; }
  .uw-pullquote p { font-size: 32px; }
}

@media print {
  .uw-js [data-rise] { opacity: 1 !important; transform: none !important; }
  .uw-header, .uw-navpanel, .uw-navtoggle, .uw-skip { display: none !important; }
}

/* =========================================================================
   WordPress integration
   The screens are dynamic blocks, so WordPress wraps each template's <main>
   in .wp-block-group. global-styles is dequeued (see functions.php), so that
   class carries no styling of its own and only needs neutralising here.
   ========================================================================= */

.wp-block-group { margin: 0; }

/* The admin bar is fixed and would sit over the full-screen mobile nav panel. */
body.admin-bar .uw-navpanel { top: 32px; }

@media screen and (max-width: 782px) {
  body.admin-bar .uw-navpanel { top: 46px; }
}

/* WordPress emits its own .screen-reader-text; keep it consistent with .uw-sr. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}