/* Work with us (web/work_with_us.py, templates/services/page.html). Linked from that template only: no other
   page loads this file. Owner, 2026-11-11: "The UI is really bad, could we rework that to be dynamic and pop
   like compass or our other examples and add the dot animations etc". These are marketing pages, so by that
   call they leave the record pages' ledger style and docs/31's restraint: a navy band, large type, a
   gradient on the band, motion. The guardrails stay: written copy only, fonts self-hosted, no prices.

   Colour: the brand's three and nothing else. Navy is the band and the ink; evergreen is what is live (the
   current in the dot field, the step being taken); orange is only ever a round dot (the wordmark's dot: the
   lead of each run, the full stop after the title, the dot in the button).

   Motion: `wwu.js` marks the parts that start below the first screen `.will-reveal` and adds `.is-in` as each
   arrives; without the script, or with reduced motion asked for, nothing is ever hidden. */

main:has(> .wwu) { max-width: none; padding: 0; }
.wwu {
  /* every navy is a step of the site's one ramp (styles.css --navy-*; owner, 2026-11-11: "They should fit one
     family within the brand, likely one Pantone") */
  --w-navy: var(--brand-band); --w-navy-lift: var(--brand-band-lift); --w-navy-deep: var(--brand-band-deep);
  --w-mint: #5fcf9f; --w-green: #1d7356; --w-spark: var(--brand-dot);
  --w-on-navy: #f2f3f6; --w-on-navy-soft: var(--navy-300);
  --w-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --w-gap: clamp(4rem, 9vw, 8.5rem);
  overflow-x: clip;
}
.wwu-in { position: relative; max-width: 1440px; margin: 0 auto; padding-inline: var(--space-5); }
:where(.wwu) :where(h1, h2, h3, p, ul, ol, dl, dd) { margin: 0; }
:where(.wwu) :where(ul, ol) { padding: 0; list-style: none; }
.wwu h2 { display: block; }

/* The dot field's box. The stylesheet sizes it before the script runs, so the canvas never moves the page. */
.wwu-dots { position: absolute; pointer-events: none; }
.wwu-dots canvas { display: block; width: 100%; height: 100%; }

/* The tabs: three plain links. */
.wwu-tabs ul { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; }
.wwu-tabs a {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 clamp(0.625rem, 2.6vw, 1rem); border-radius: 8px; white-space: nowrap;
  text-decoration: none; font-weight: 500; transition: background-color 0.2s, color 0.2s;
}
.wwu-tabs a:focus-visible, .wwu .wwu-go:focus-visible, .wwu .wwu-alt:focus-visible { outline: 2px solid var(--w-mint); outline-offset: 2px; }

/* The two actions. The first carries the orange dot, which beats; its arrow moves on hover. */
.wwu-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.wwu .wwu-go, .wwu .wwu-alt {
  min-height: 3.25rem; padding: 0 1.5rem; border-radius: 8px; font-size: 1.0625rem; font-weight: 600;
  display: inline-flex; align-items: center; text-decoration: none;
  transition: transform 0.25s var(--w-ease), background-color 0.2s, color 0.2s, box-shadow 0.25s;
}
.wwu .wwu-go { gap: 0.75rem; }
.wwu .wwu-go::before {
  content: ""; width: 0.625rem; height: 0.625rem; border-radius: 50%; background: var(--w-spark); flex: none;
  animation: wwu-beat 2.4s ease-out infinite;
}
.wwu .wwu-go::after { content: "\2192"; transition: transform 0.25s var(--w-ease); }
.wwu .wwu-go:hover { transform: translateY(-2px); }
.wwu .wwu-go:hover::after { transform: translateX(4px); }
.wwu .wwu-go:active, .wwu .wwu-alt:active { transform: translateY(0) scale(0.98); }
@keyframes wwu-beat {
  0% { box-shadow: 0 0 0 0 rgba(230, 128, 35, 0.55); } /* taste-skill-ignore: the dot's beat, a ring that fades, not a resting shadow */
  70%, 100% { box-shadow: 0 0 0 0.7rem rgba(230, 128, 35, 0); } /* taste-skill-ignore: as above */
}

/* The first screen arrives in order. The title and its sentence only move (they are painted at once, so the
   largest paint is not held back); the tabs and the actions fade. */
@keyframes wwu-rise { from { transform: translateY(0.4em); } to { transform: none; } }
@keyframes wwu-fade { from { opacity: 0; transform: translateY(0.75rem); } to { opacity: 1; transform: none; } }
.wwu-hero h1 { animation: wwu-rise 0.8s var(--w-ease) both; }
.wwu-hero__lede { animation: wwu-rise 0.8s var(--w-ease) 0.08s both; }
.wwu-hero .wwu-tabs { animation: wwu-fade 0.6s var(--w-ease) both; }
.wwu-hero .wwu-actions { animation: wwu-fade 0.7s var(--w-ease) 0.25s both; }

/* Blocks. */
.wwu-block { padding-block: var(--w-gap); scroll-margin-top: var(--top-bar-h, 3rem); }
.wwu-block__title { font-size: var(--fs-section); line-height: 1.02; letter-spacing: var(--tr-title); font-weight: 600; }
.wwu-card h3, .wwu-step h3, .wwu-fact dt { font-size: var(--fs-sub); line-height: 1.2; letter-spacing: var(--tr-block); font-weight: 600; }
.wwu-card p, .wwu-step p, .wwu-fact dd, .wwu-q p, .wwu-note { font-size: 1.0625rem; line-height: 1.45; }
.wwu-step__n { font-variant-numeric: tabular-nums; }
.wwu-q > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-sub); line-height: 1.2; font-weight: 600; letter-spacing: var(--tr-block); }
.wwu-q > summary::-webkit-details-marker { display: none; }
.wwu-q > summary::after { content: "+"; margin-inline-start: auto; font-weight: 400; font-size: 1.5rem; line-height: 1; transition: transform 0.3s var(--w-ease); }
.wwu-q[open] > summary::after { transform: rotate(45deg); }
.wwu-q > summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.wwu-q > p { max-width: 60ch; }
.wwu-provider { font-size: 1rem; }

/* Arriving on scroll. */
.wwu .will-reveal { opacity: 0; transform: translateY(1.75rem); }
.wwu .will-reveal.is-in { opacity: 1; transform: none; transition: opacity 0.7s var(--w-ease), transform 0.6s var(--w-ease), background-color 0.3s, color 0.3s; }
.wwu-cards > .will-reveal:nth-child(2), .wwu-facts > .will-reveal:nth-child(2) { transition-delay: 0.08s; }
.wwu-cards > .will-reveal:nth-child(3), .wwu-facts > .will-reveal:nth-child(3) { transition-delay: 0.16s; }
.wwu-cards > .will-reveal:nth-child(4), .wwu-facts > .will-reveal:nth-child(4) { transition-delay: 0.24s; }
.wwu-facts > .will-reveal:nth-child(5) { transition-delay: 0.32s; }
/* The steps stay in place and light one after another instead. */
.wwu .wwu-track.will-reveal { opacity: 1; transform: none; }
.wwu-track { --w-step: 0.65s; position: relative; }
.wwu-track__line, .wwu-track__spark { position: absolute; pointer-events: none; }
.wwu-track__line::after { content: ""; position: absolute; inset: 0; transform-origin: 0 0; }
.wwu-track.will-reveal:not(.is-in) .wwu-track__line::after { transform: scale(0); } /* taste-skill-ignore: the line filling from its start, not a part entering */
.wwu-track.will-reveal.is-in .wwu-track__line::after { transition: transform calc(var(--w-step) * 4) linear 0.1s; }
.wwu-track__spark { width: 0.875rem; height: 0.875rem; border-radius: 50%; background: var(--w-spark); opacity: 0; }
.wwu-track.is-in .wwu-step { transition: opacity 0.5s var(--w-ease); }
.wwu-track.is-in .wwu-step__n { transition: background-color 0.4s, color 0.4s, transform 0.5s var(--w-ease), box-shadow 0.4s; }
.wwu-track.will-reveal:not(.is-in) .wwu-step { opacity: 0.32; }
.wwu-track.is-in .wwu-step:nth-child(1), .wwu-track.is-in .wwu-step:nth-child(1) .wwu-step__n { transition-delay: 0.1s; }
.wwu-track.is-in .wwu-step:nth-child(2), .wwu-track.is-in .wwu-step:nth-child(2) .wwu-step__n { transition-delay: calc(0.1s + var(--w-step)); }
.wwu-track.is-in .wwu-step:nth-child(3), .wwu-track.is-in .wwu-step:nth-child(3) .wwu-step__n { transition-delay: calc(0.1s + var(--w-step) * 2); }
.wwu-track.is-in .wwu-step:nth-child(4), .wwu-track.is-in .wwu-step:nth-child(4) .wwu-step__n { transition-delay: calc(0.1s + var(--w-step) * 3); }

@media (prefers-reduced-motion: reduce) {
  .wwu *, .wwu *::before, .wwu *::after { animation: none !important; transition: none !important; }
}
/* The look (direction A of three, "Night grid"): the navy band is the picture's ground; the sections between
   are the site's paper. */

/* The hero band. */
.wwu-hero {
  position: relative; isolation: isolate; color: var(--w-on-navy);
  background: radial-gradient(120% 95% at 82% 18%, var(--w-navy-lift) 0%, var(--w-navy) 52%, var(--w-navy-deep) 100%); /* taste-skill-ignore: the owner's call for these pages (2026-11-11), a richer band behind the dot field */
}
.wwu-hero .wwu-dots { inset: 0 0 0 36%; z-index: -1; --dot: var(--navy-700); --dot-live: #5fcf9f; --dot-spark: var(--brand-dot); }
.wwu-hero__in { display: flex; flex-direction: column; align-items: flex-start; min-height: min(86svh, 50rem); padding-block: var(--space-7) clamp(3rem, 7vw, 6rem); }
.wwu-hero h1 {
  margin-top: auto; padding-top: var(--space-10); color: #fff;
  font-size: var(--fs-display); line-height: 0.95; letter-spacing: var(--tr-display); font-weight: 600;
}
.wwu-hero h1::after {
  content: ""; display: inline-block; width: 0.17em; height: 0.17em; margin-inline-start: 0.06em; border-radius: 50%;
  background: var(--w-spark);
}
.wwu-hero__lede { max-width: 26ch; margin-top: clamp(1.25rem, 2.5vw, 2rem); font-size: var(--fs-lede); line-height: 1.2; letter-spacing: var(--tr-lede); font-weight: 500; color: var(--w-on-navy); }
.wwu-hero .wwu-actions { margin-top: clamp(1.75rem, 3vw, 2.75rem); }

.wwu-tabs ul { background: rgba(255, 255, 255, 0.08); }
.wwu-tabs a, .wwu-tabs a:visited { color: var(--w-on-navy-soft); }
.wwu-tabs a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.wwu-tabs a[aria-current="page"] { background: #fff; color: var(--w-navy); }

.wwu-hero .wwu-go, .wwu-hero .wwu-go:visited, .wwu-close .wwu-go, .wwu-close .wwu-go:visited, .wwu-block--steps .wwu-go { background: #fff; color: var(--w-navy); }
.wwu-hero .wwu-alt, .wwu-hero .wwu-alt:visited, .wwu-close .wwu-alt, .wwu-close .wwu-alt:visited { background: rgba(255, 255, 255, 0.1); color: #fff; }
.wwu-hero .wwu-alt:hover, .wwu-close .wwu-alt:hover { background: rgba(255, 255, 255, 0.18); }

/* A block: its title on the left, its content on the right. */
.wwu-block > .wwu-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-7) clamp(1.5rem, 4vw, 4rem); align-items: start; }
.wwu-block__title { position: sticky; top: calc(var(--top-bar-h, 3rem) + var(--space-6)); }

/* Cards: the options. Each lifts and turns navy under the pointer; its corner of dots lights. */
.wwu-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.wwu-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wwu-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 17rem; padding: clamp(1.25rem, 2vw, 2rem);
  border-radius: 14px; background: var(--surface); color: var(--text);
  transition: opacity 0.7s var(--w-ease), transform 0.5s var(--w-ease), background-color 0.3s, color 0.3s;
}
.wwu-card::after {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 9rem; height: 9rem; color: var(--color-accent);
  background: radial-gradient(circle, currentColor 0.75px, transparent 1.05px) 0 0 / 6px 6px; /* taste-skill-ignore: draws the dots, not a gradient fill */
  -webkit-mask: linear-gradient(225deg, #000 12%, transparent 62%); mask: linear-gradient(225deg, #000 12%, transparent 62%); /* taste-skill-ignore: fades the dots out across the corner */
  opacity: 0.55; transition: opacity 0.3s, color 0.3s;
}
.wwu-card h3 { margin-top: auto; padding-top: var(--space-10); }
.wwu-card p { margin-top: var(--space-3); color: var(--text-muted); transition: color 0.3s; }
.wwu-card:hover { transform: translateY(-6px); background: var(--w-navy); color: #fff; }
.wwu-card:hover p { color: var(--w-on-navy-soft); }
.wwu-card:hover .wwu-card:hover::after { opacity: 1; color: var(--w-mint); }

/* Steps: a second navy band; the line fills and each step lights in turn, the orange dot leading. */
.wwu-block--steps { background: var(--w-navy); color: var(--w-on-navy); }
.wwu-block--steps > .wwu-in { grid-template-columns: minmax(0, 1fr); }
.wwu-block--steps .wwu-block__title { position: static; color: #fff; }
.wwu-track { padding-top: 1.375rem; }
.wwu-track__line { inset: 2.75rem 0 auto 0; height: 2px; background: rgba(255, 255, 255, 0.14); }
.wwu-track__line::after { background: var(--w-mint); }
.wwu-track__spark { top: calc(2.75rem - 0.375rem); left: 0; }
.wwu-track.will-reveal.is-in .wwu-track__spark { animation: wwu-spark-x calc(var(--w-step) * 4) linear 0.1s both; }
@keyframes wwu-spark-x { 0% { left: 0; opacity: 1; } 96% { opacity: 1; } 100% { left: calc(100% - 0.875rem); opacity: 0; } }
.wwu-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 3rem); }
.wwu-step { position: relative; }
.wwu-step__n {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; position: relative; z-index: 1;
  background: var(--w-mint); color: var(--navy-900); font-size: 1rem; font-weight: 600;
}
.wwu-track.will-reveal:not(.is-in) .wwu-step__n { background: var(--navy-800); color: var(--w-on-navy-soft); transform: scale(0.82); }
.wwu-step h3 { margin-top: var(--space-7); color: #fff; }
.wwu-step p { margin-top: var(--space-3); color: var(--w-on-navy-soft); max-width: 26ch; }
.wwu-note { margin-top: var(--space-8); padding: var(--space-5) var(--space-6); border-radius: 12px; background: rgba(255, 255, 255, 0.07); color: var(--w-on-navy); max-width: 44rem; }
.wwu-note strong { margin-inline-end: var(--space-3); color: var(--w-mint); font-weight: 600; }

/* Facts: what we look at. */
.wwu-facts { display: grid; gap: 3px; }
.wwu-fact { display: grid; grid-template-columns: minmax(9rem, 2fr) minmax(0, 5fr); gap: var(--space-5); align-items: baseline; padding: var(--space-5) var(--space-6); background: var(--surface); border-radius: 6px; transition: opacity 0.7s var(--w-ease), transform 0.7s var(--w-ease), background-color 0.25s; }
.wwu-fact:first-child { border-radius: 14px 14px 6px 6px; }
.wwu-fact:last-child { border-radius: 6px 6px 14px 14px; }
.wwu-fact dt { line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; }
.wwu-fact dt::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline-end: var(--space-3); border-radius: 50%; background: var(--color-accent); vertical-align: 0.15em; }
.wwu-fact dd { color: var(--text-muted); }
.wwu-fact:hover { background: var(--active); }

/* One row set large: its label is the line, its value the sentence under it. */
.wwu-lead strong { display: block; font-size: var(--fs-lede); line-height: 1.2; letter-spacing: var(--tr-lede); font-weight: 600; }
.wwu-lead span { display: block; margin-top: var(--space-3); max-width: 44ch; font-size: 1.0625rem; line-height: 1.45; color: var(--text-muted); }

/* Questions. */
.wwu-qs { display: grid; gap: 3px; }
.wwu-q { background: var(--surface); border-radius: 6px; }
.wwu-q:first-child { border-radius: 14px 14px 6px 6px; }
.wwu-q:last-child { border-radius: 6px 6px 14px 14px; }
.wwu-q > summary { padding: var(--space-5) var(--space-6); }
.wwu-q > summary::after { color: var(--color-accent); }
.wwu-q > p { padding: 0 var(--space-6) var(--space-6); color: var(--text-muted); }

/* The closing band. */
.wwu-close { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: var(--w-on-navy); background: radial-gradient(90% 120% at 50% 100%, var(--w-navy-lift) 0%, var(--w-navy) 55%, var(--w-navy-deep) 100%); } /* taste-skill-ignore: as the hero band */
.wwu-close .wwu-dots { inset: 0; z-index: -1; --dot: var(--navy-750); --dot-live: #3f8f78; --dot-spark: var(--brand-dot); }
.wwu-close > .wwu-in { padding-block: clamp(5rem, 12vw, 10rem) var(--space-8); }
.wwu-close h2 { text-align: center; color: #fff; font-size: var(--fs-display); line-height: 0.95; letter-spacing: var(--tr-display); font-weight: 600; }
.wwu-close .wwu-actions { justify-content: center; margin-top: clamp(2rem, 4vw, 3.5rem); }
.wwu .wwu-provider { margin-top: clamp(4rem, 9vw, 8rem); color: var(--w-on-navy-soft); }

@media (max-width: 899px) {
  .wwu-block > .wwu-in { grid-template-columns: minmax(0, 1fr); }
  .wwu-block__title { position: static; }
  .wwu-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  /* The phone's own composition: the words first, the map under them across the whole band. */
  .wwu-hero__in { min-height: 0; padding-bottom: var(--space-6); }
  .wwu-hero h1 { margin-top: 0; padding-top: var(--space-9); }
  .wwu-hero .wwu-dots { position: relative; inset: auto; aspect-ratio: 16 / 10; width: 100%; }
  .wwu-hero { display: flex; flex-direction: column-reverse; }
  .wwu-cards, .wwu-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .wwu-card { min-height: 12rem; }
  .wwu-fact { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-5); }
  /* The steps run down the page; the line runs down beside them. */
  .wwu-track { padding-top: 0; }
  .wwu-steps { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
  .wwu-step { padding-inline-start: 4.25rem; min-height: 2.75rem; }
  .wwu-step__n { position: absolute; left: 0; top: 0; }
  .wwu-step h3 { margin-top: 0; padding-top: 0.5rem; }
  .wwu-track__line { inset: 0 auto 0 calc(1.375rem - 1px); width: 2px; height: auto; }
  .wwu-track__spark { top: 0; left: calc(1.375rem - 0.4375rem); }
  .wwu-track.will-reveal.is-in .wwu-track__spark { animation-name: wwu-spark-y; }
  .wwu .wwu-go, .wwu .wwu-alt { flex: 1 1 auto; justify-content: center; }
}
@keyframes wwu-spark-y { 0% { top: 0; opacity: 1; } 96% { opacity: 1; } 100% { top: calc(100% - 0.875rem); opacity: 0; } }