@import url("tokens.css");

/* ============ base / utilities ============ */

html { scroll-behavior: smooth; }

body { overflow-x: clip; }

.ww-container {
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
}

.ww-section { padding: var(--section-y) var(--gutter-page); }

@keyframes wnw-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@keyframes wnw-pop {
  0%  { transform: scale(.7); opacity: 0; }
  65% { transform: scale(1.06); }
  100% { transform: scale(1); opacity: 1; }
}
/* --gx/--gy are driven from JS so the cursor can tug the pills about. They ride
   inside the float keyframes because `transform` is already spoken for here,
   and `translate` is in use by the parallax on the hero pills. */
@keyframes wnw-float {
  0%, 100% { transform: translate(var(--gx, 0px), calc(var(--gy, 0px) - 3px)) rotate(var(--tilt, 0deg)); }
  50%      { transform: translate(var(--gx, 0px), calc(var(--gy, 0px) + 3px)) rotate(var(--tilt, 0deg)); }
}

/* hero copy entrance: rises and sharpens into place, staggered down the block */
@keyframes wnw-hero-in {
  from { opacity: 0; transform: translateY(26px); filter: blur(9px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes wnw-pill-pop {
  0%   { opacity: 0; transform: scale(.5) rotate(-9deg); }
  65%  { opacity: 1; transform: scale(1.1) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

[data-reveal] { opacity: 0; }
[data-reveal].is-visible {
  animation: wnw-rise .5s var(--ease-standard) both;
}
[data-reveal="pop"].is-visible {
  animation: wnw-pop .34s var(--ease-bounce) both;
}
/* Once the reveal has played, clear the animation. A completed `both`-filled
   animation still wins over declared values, so leaving it on would block
   :hover transforms on revealed elements. */
[data-reveal].is-settled { animation: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; }
}

/* ============ icons ============ */

.icon {
  display: inline-block;
  flex: none;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.icon-menu          { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/menu.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/menu.svg"); }
.icon-x              { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/x.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/x.svg"); }
.icon-dog            { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/dog.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/dog.svg"); }
.icon-house          { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/house.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/house.svg"); }
.icon-moon           { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/moon.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/moon.svg"); }
.icon-cat            { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/cat.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/cat.svg"); }
.icon-shield-check   { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/shield-check.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/shield-check.svg"); }
.icon-badge-check    { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/badge-check.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/badge-check.svg"); }
.icon-camera         { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/camera.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/camera.svg"); }
.icon-plus           { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/plus.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/plus.svg"); }
.icon-minus          { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/minus.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/minus.svg"); }
.icon-star           { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/star.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/star.svg"); }
.icon-arrow-left     { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/arrow-left.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/arrow-left.svg"); }
.icon-arrow-right    { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/arrow-right.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/arrow-right.svg"); }
.icon-check          { -webkit-mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/check.svg"); mask-image: url("https://unpkg.com/lucide-static@0.441.0/icons/check.svg"); }

/* ============ buttons ============ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 12px 22px;
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-md);
  line-height: 1.1;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.btn:hover { transform: var(--lift-hover); text-decoration: none; }
.btn:active { transform: var(--press-scale); }
.btn:disabled { cursor: not-allowed; opacity: .45; transform: none; box-shadow: none; }

.btn--sm { padding: 8px 16px; font-size: var(--text-body-sm); }
.btn--lg { padding: 16px 30px; font-size: var(--text-body-lg); }
.btn--full { display: flex; width: 100%; }

.btn--primary {
  background: var(--brand);
  color: var(--brand-on);
  box-shadow: var(--shadow-pill);
}
.btn--primary:hover { background: var(--brand-hover); box-shadow: 0 10px 20px -6px rgba(158, 61, 27, .42); color: var(--brand-on); }
.btn--primary:active { background: var(--brand-press); }

.btn--secondary {
  background: var(--surface-brand-soft);
  color: var(--clay-800);
}
.btn--secondary:hover { background: var(--peach-200); box-shadow: var(--shadow-sm); color: var(--clay-800); }
.btn--secondary:active { background: var(--peach-300); }

.btn--outline {
  background: transparent;
  color: var(--clay-900);
  border-color: var(--clay-900);
}
.btn--outline:hover { background: rgba(184, 74, 34, .08); color: var(--clay-900); }

.btn--ghost {
  background: transparent;
  color: var(--clay-800);
}
.btn--ghost:hover { background: rgba(46, 26, 18, .06); color: var(--clay-800); }

.btn--cream {
  background: var(--cream-50);
  color: var(--brand);
  box-shadow: var(--shadow-sm);
}
.btn--cream:hover { background: var(--white); box-shadow: var(--shadow-md); color: var(--brand); }
.btn--cream:active { background: var(--cream-200); }

/* ============ nav rail (desktop) ============ */

.ww-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 238px;
  z-index: 60;
  padding: 26px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
}
/* Brand sits directly above the links. It lives outside .ww-rail-list so the
   sliding pill, which is positioned from that list's top edge, stays aligned. */
.ww-rail-inner {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 196px;
}
.ww-rail-brand {
  display: block;
  padding: 0 18px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1.1;
  color: var(--cream-50);
  transition: color var(--dur-slow) var(--ease-standard);
}
.ww-rail-brand:hover { text-decoration: none; color: var(--cream-50); }
.ww-rail-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream-50);
  transition: color var(--dur-slow) var(--ease-standard);
}
.ww-rail-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 196px;
}
.ww-rail-pill {
  position: absolute;
  top: 0; left: 0;
  width: 196px; height: 42px;
  border-radius: var(--radius-pill);
  background: var(--cream-50);
  box-shadow: var(--shadow-xs);
  opacity: 0;
  translate: 0 0;
  transition: translate .38s var(--ease-bounce), opacity .2s var(--ease-standard), background var(--dur-slow) var(--ease-standard);
}
.ww-rail-link {
  position: relative;
  height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 700;
  color: var(--cream-50);
  transition: color var(--dur-base) var(--ease-standard);
}
.ww-rail-link:hover { color: var(--text-link-hover); text-decoration: none; }
.ww-rail-link.is-active { color: var(--text-brand); }
.ww-rail-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.ww-rail-link.is-active .ww-rail-dot { opacity: 1; }

/* body scroll state toggles rail colours once user scrolls past the hero */
body:not(.ww-on-hero) .ww-rail-brand { color: var(--text-heading); }
body:not(.ww-on-hero) .ww-rail-brand:hover { color: var(--text-heading); }

body:not(.ww-on-hero) .ww-rail-sub { color: var(--text-brand); }
body:not(.ww-on-hero) .ww-rail-pill { background: var(--surface-brand-soft); }
body:not(.ww-on-hero) .ww-rail-link { color: var(--text-body); }
body:not(.ww-on-hero) .ww-rail-link.is-active { color: var(--text-brand); }

/* Applied per rail item by main.js when that item sits over one of the ink-dark
   sections, where the scrolled-state colours would be dark-on-dark. Needs the
   leading `body` to match the specificity of the rules above, and to follow
   them so source order decides. */
body .ww-rail-brand.is-on-dark,
body .ww-rail-brand.is-on-dark:hover { color: var(--cream-50); }
body .ww-rail-brand.is-on-dark .ww-rail-sub { color: var(--peach-300); }
body .ww-rail-link.is-on-dark { color: var(--peach-200); }
body .ww-rail-link.is-on-dark.is-active { color: var(--cream-50); }
body .ww-rail-pill.is-on-dark { background: rgba(253, 243, 227, .13); box-shadow: none; }

/* ============ mobile nav ============ */

.ww-mobile-toggle {
  display: none;
  position: fixed;
  top: 16px; right: 16px;
  z-index: 70;
  background: var(--surface-card);
  border: none;
  border-radius: var(--radius-pill);
  width: 48px; height: 48px;
  cursor: pointer;
  color: var(--text-heading);
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
}
.ww-mobile-toggle:active { transform: scale(.97); }

.ww-mobile-menu {
  position: fixed;
  top: 74px; left: 16px; right: 16px;
  z-index: 65;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 12px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ww-mobile-menu[hidden] { display: none; }
.ww-mobile-menu a {
  padding: 13px 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-body);
  border-bottom: 1px solid var(--border-soft);
}
.ww-mobile-menu a:hover { text-decoration: none; color: var(--text-link-hover); }
.ww-mobile-menu-cta { margin-top: 14px; }

/* ============ hero ============ */

.ww-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--surface-brand);
  overflow: clip;
  padding: 120px 24px 72px;
}
.ww-hero-blob {
  position: absolute;
  border-radius: var(--radius-pill);
  will-change: transform;
}
.ww-hero-blob-1 {
  top: -6%; left: -4%;
  width: 46vw; height: 46vw;
  max-width: 640px; max-height: 640px;
  background: rgba(253, 233, 206, .10);
}
.ww-hero-blob-2 {
  bottom: -14%; right: -6%;
  width: 38vw; height: 38vw;
  max-width: 520px; max-height: 520px;
  background: rgba(248, 194, 133, .16);
}

.ww-hero-grid {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  width: 100%;
  display: grid;
  /* text column gets the larger share — the headline needs the width more than
     the illustration does */
  grid-template-columns: 1.18fr .82fr;
  gap: 48px;
  align-items: center;
}

.ww-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-butter);
  color: var(--text-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
}

.ww-hero-title {
  margin-top: 26px;
  font-size: clamp(38px, 4.1vw, 58px);
  line-height: 1.1;
  color: var(--cream-50);
  /* `ch` scales with font-size, so this sets the wrap point independently of
     the clamp — 20ch lands the headline on three lines. */
  max-width: 20ch;
  /* even out the line lengths so the stack reads as a block, not a ragged column */
  text-wrap: balance;
}
.ww-hero-title .ww-highlight {
  display: inline-block;
  background: var(--accent-sky);
  color: var(--text-heading);
  border-radius: var(--radius-pill);
  padding: 0 .34em;
  animation: wnw-pill-pop .6s var(--ease-bounce) .62s both;
}

/* Staggered hero entrance. Beats the generic [data-reveal].is-visible rule on
   specificity, so these elements use this instead of the plain rise. The
   actions/trust delays are overwritten from JS to land after the headline has
   finished typing, so they stay in step if the copy changes. */
.ww-hero .ww-eyebrow-pill.is-visible { animation: wnw-hero-in .75s var(--ease-out-soft) both; }
.ww-hero .ww-hero-actions.is-visible { animation: wnw-hero-in .75s var(--ease-out-soft) .3s both; }
.ww-hero .ww-hero-trust.is-visible   { animation: wnw-hero-in .75s var(--ease-out-soft) .44s both; }

/* Typewriter headline. Every character is laid out from the start and only
   faded in, so the line breaks never shift as it types. Words are inline-block
   so the browser can only break between them, never mid-word. */
.ww-word { display: inline-block; white-space: pre; }
.ww-char { opacity: 0; animation: wnw-type-in 60ms linear forwards; }
@keyframes wnw-type-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .ww-char { opacity: 1; }
}

.ww-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.btn--hero-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  padding: 16px 30px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(253, 243, 227, .55);
  color: var(--cream-50);
  transition: background var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.btn--hero-outline:hover {
  background: rgba(253, 243, 227, .14);
  color: var(--cream-50);
  transform: translateY(-2px);
  text-decoration: none;
}

.ww-hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin-top: 38px;
  padding-top: 24px;
  border-top: 1px solid rgba(253, 243, 227, .28);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text-inverse);
  list-style: none;
  padding-left: 0;
}

.ww-hero-visual {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 56svh;
}
.ww-hero-glow {
  position: absolute;
  left: 50%; bottom: -4%;
  translate: -50% 0;
  width: 86%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-pill);
  background: radial-gradient(circle, rgba(253, 233, 206, .22), rgba(253, 233, 206, 0) 68%);
  will-change: transform;
}
.ww-hero-photo {
  position: relative;
  display: block;
  width: 100%;
  max-height: 82svh;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(0 26px 34px rgba(46, 26, 18, .34));
  will-change: transform;
}
.ww-confetti { position: absolute; inset: 0; pointer-events: none; }
.ww-pill {
  position: absolute;
  font-weight: 700;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  color: var(--text-heading);
  animation: wnw-float 4s ease-in-out infinite;
}
.ww-pill-1 { --tilt: -7deg; top: 9%; left: -9%; background: var(--accent-blush); }
.ww-pill-2 { --tilt: 6deg; top: 44%; right: -8%; background: var(--accent-sage); animation-duration: 4.6s; animation-delay: .4s; }
.ww-pill-3 { --tilt: -4deg; bottom: 20%; left: -7%; background: var(--accent-butter); animation-duration: 5.2s; animation-delay: .8s; }

.ww-hero-card {
  position: absolute;
  bottom: -22px; right: -10px;
  width: 214px;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 15px 17px;
  box-shadow: var(--shadow-lg);
  will-change: transform;
}
.ww-hero-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--text-heading);
}
.ww-hero-card-desc {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

/* ============ section heads ============ */

.ww-section-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: flex-end;
  justify-content: space-between;
}
.ww-section-head--center { text-align: center; flex-direction: column; align-items: center; }
.ww-section-title {
  margin-top: 12px;
  font-size: var(--text-section);
  color: var(--text-heading);
  max-width: 20ch;
}
.ww-section-title--sm { font-size: var(--text-section); }
.ww-section-lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--text-body);
  max-width: 42ch;
}

/* ============ services ============ */

.ww-services {
  background: var(--surface-page);
}

/* sleeping cat sitting in the section head, with its own floating labels */
.ww-cat-scene {
  position: relative;
  flex: 0 1 auto;
  width: min(320px, 100%);
  align-self: flex-end;
}
.ww-cat-img { display: block; width: 100%; height: auto; }
.ww-cat-pill-1 { --tilt: -6deg; top: -6%; right: 2%; background: var(--accent-sky); }
.ww-cat-pill-2 { --tilt: 5deg; bottom: 6%; left: -3%; background: var(--accent-blush); animation-duration: 4.8s; animation-delay: .5s; }
.ww-services-grid {
  display: grid;
  /* 220px min keeps all four cards on one row once the 262px nav rail gutter
     is taken out of the viewport; 250px drops the last card to its own line. */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 48px;
}
.ww-service-card {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: 28px 26px 30px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.ww-service-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.ww-service-icon {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--brand);
}
.ww-service-card h3 { margin-top: 20px; font-size: 23px; color: var(--text-heading); }
.ww-service-card p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: var(--text-body); }
.ww-service-meta {
  margin-top: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* accent card carrying the meet-and-greet note. Must follow .ww-service-card —
   equal specificity, so source order decides which background wins. */
.ww-service-card--note {
  background: var(--surface-warm);
  box-shadow: none;
}
.ww-service-card--note:hover { box-shadow: none; transform: none; }
.ww-service-icon--note { background: var(--cream-50); }
.ww-service-meta--note { color: var(--clay-700); }

/* ============ about ============ */

.ww-about {
  position: relative;
  background: var(--surface-warm);
  overflow: clip;
}
.ww-about-blob {
  position: absolute;
  top: -90px; right: 6%;
  width: 320px; height: 320px;
  border-radius: var(--radius-pill);
  background: rgba(243, 168, 91, .22);
  will-change: transform;
}
.ww-about-grid {
  position: relative;
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 56px;
  align-items: center;
}
/* About photo, kept in the brand's signature arch. The wrapper stays unclipped
   so the floating pills can sit outside the photo edge; the radius and crop
   live on the image element instead. */
.ww-about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  will-change: transform;
}
.ww-about-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-arch);
  box-shadow: var(--shadow-lg);
}
.ww-about-pill-1 { --tilt: -6deg; top: 7%; left: -8%; background: var(--accent-sky); }
.ww-about-pill-2 { --tilt: 5deg; bottom: 9%; right: -8%; background: var(--accent-sage); animation-duration: 4.7s; animation-delay: .45s; }
/* Contact photo. Same pattern as the about shot: wrapper unclipped so the
   pills can overhang, radius and crop on the image element. */
.ww-contact-photo {
  position: relative;
  aspect-ratio: 5 / 4;
  margin-top: 28px;
}
.ww-contact-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}
.ww-contact-pill-1 { --tilt: -5deg; top: -6%; left: -5%; background: var(--accent-sky); }
.ww-contact-pill-2 { --tilt: 6deg; bottom: 8%; right: -5%; background: var(--accent-blush); animation-duration: 4.4s; animation-delay: .3s; }

.ww-about-copy h2 { margin-top: 12px; max-width: 22ch; font-size: var(--text-section); }
.ww-about-copy p { margin-top: 20px; font-size: 17.5px; line-height: 1.7; color: var(--text-body); max-width: 60ch; }
.ww-about-copy p + p { margin-top: 16px; }

.ww-trust-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 34px;
}
/* With an odd number of points the last one spans the row rather than leaving
   a dead cell beside it. */
.ww-trust-item:last-child:nth-child(odd) { grid-column: 1 / -1; }
.ww-trust-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--surface-card);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  box-shadow: var(--shadow-xs);
}
.ww-trust-icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  color: var(--brand);
  display: grid;
  place-items: center;
}
.ww-trust-title { font-family: var(--font-display); font-weight: 800; font-size: 16.5px; color: var(--text-heading); }
.ww-trust-desc { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 2px; }

/* ============ how it works ============ */

.ww-how { background: var(--surface-page); }
.ww-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 52px;
}
.ww-step {
  display: flex;
  flex-direction: column;
  text-align: center;
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
/* illustrated panel behind each step, tinted per card. Fixed aspect keeps all
   four panels the same height so the numbers and headings line up. */
.ww-step-art {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.ww-step-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease-out-soft);
}
.ww-step-art--1 { background: var(--sky-100); }
.ww-step-art--2 { background: var(--peach-100); }
.ww-step-art--3 { background: var(--blush-100); }
.ww-step-art--4 { background: var(--butter-100); }

.ww-step-body { padding: 0 20px 26px; }
.ww-step-num {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px; height: 56px;
  /* straddles the art / copy boundary */
  margin: -28px auto 0;
  border-radius: var(--radius-pill);
  background: var(--brand);
  color: var(--brand-on);
  border: 4px solid var(--surface-card);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  box-shadow: var(--shadow-pill);
  transition: transform .3s var(--ease-bounce), background .3s var(--ease-standard);
}
.ww-step h3 { margin-top: 14px; font-size: 19px; color: var(--text-heading); }
.ww-step p { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--text-body); }

/* Hover: the card lifts, the illustration eases in, and the number pops.
   Gated behind hover-capable pointers so touch devices don't latch the state. */
@media (hover: hover) {
  .ww-step:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
  .ww-step:hover .ww-step-art img { transform: scale(1.07); }
  .ww-step:hover .ww-step-num { transform: scale(1.12) rotate(-7deg); background: var(--brand-hover); }
}

/* ============ faq ============ */

.ww-faq { background: var(--surface-sunken); }
.ww-faq-wrap { max-width: 840px; margin: 0 auto; }
.ww-faq-list { margin-top: 40px; display: flex; flex-direction: column; gap: 12px; }
.ww-faq-item {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border-soft);
}
.ww-faq-question {
  width: 100%;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18.5px;
  color: var(--text-heading);
}
.ww-faq-question:hover { background: var(--surface-brand-soft); }
.ww-faq-icon { flex: 0 0 auto; color: var(--brand); display: grid; place-items: center; }
.ww-faq-answer { padding: 0 24px 24px; font-size: 16.5px; line-height: 1.65; color: var(--text-body); }
.ww-faq-answer[hidden] { display: none; }

/* ============ reviews ============ */

.ww-reviews {
  position: relative;
  background: var(--surface-ink);
  overflow: clip;
}
.ww-reviews-blob {
  position: absolute;
  bottom: -140px; left: -60px;
  width: 420px; height: 420px;
  border-radius: var(--radius-pill);
  background: rgba(184, 74, 34, .28);
  will-change: transform;
}
.ww-reviews-inner { position: relative; max-width: var(--max-content); margin: 0 auto; text-align: center; }
.ww-reviews-inner h2 { font-size: var(--text-section); color: var(--cream-50); }

.ww-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  background: var(--surface-card);
  border-radius: var(--radius-pill);
  padding: 9px 20px 9px 14px;
  box-shadow: var(--shadow-md);
}
.ww-rating-g {
  width: 30px; height: 30px;
  border-radius: var(--radius-pill);
  background: var(--surface-brand-soft);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--brand);
  font-size: 16px;
}
.ww-rating-score { font-family: var(--font-display); font-weight: 800; font-size: 19px; color: var(--text-heading); }
.ww-rating-stars { display: flex; gap: 2px; color: var(--warning); }
.ww-rating-source { font-size: 14px; color: var(--text-muted); font-weight: 700; }

.ww-carousel { margin-top: 44px; position: relative; }
.ww-carousel-viewport { overflow: hidden; border-radius: var(--radius-xl); }
.ww-carousel-track {
  display: flex;
  transition: transform .34s var(--ease-standard);
}
.ww-review-slide { flex: 0 0 100%; padding: 6px; }
.ww-review-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: 44px 42px;
  box-shadow: var(--shadow-lg);
  text-align: left;
  max-width: 780px;
  margin: 0 auto;
}
.ww-review-stars { display: flex; gap: 3px; color: var(--warning); }
.ww-review-quote {
  margin-top: 20px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.35;
  color: var(--text-heading);
}
.ww-review-author { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.ww-review-initial {
  width: 42px; height: 42px;
  border-radius: var(--radius-pill);
  background: var(--accent-sage);
  color: var(--text-heading);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 800;
}
.ww-review-name { font-weight: 700; font-size: 15.5px; color: var(--text-heading); }
.ww-review-meta { font-size: 13px; color: var(--text-muted); }

.ww-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 28px; }
.ww-carousel-btn {
  width: 46px; height: 46px;
  border-radius: var(--radius-pill);
  border: 2px solid rgba(253, 243, 227, .4);
  background: none;
  color: var(--cream-50);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--dur-base) var(--ease-standard);
}
.ww-carousel-btn:hover { background: rgba(253, 243, 227, .14); }
.ww-carousel-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; max-width: 100%; }
/* Each dot keeps a fixed 30px slot and the indicator inside it scales, so the
   active state animates on transform alone. Animating the button's own width
   would relayout the row and shunt the other dots sideways on every change. */
.ww-dot {
  width: 30px;
  height: 16px;
  border: none;
  padding: 0;
  background: none;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.ww-dot::before {
  content: "";
  display: block;
  width: 30px;
  height: 9px;
  border-radius: var(--radius-pill);
  background: rgba(253, 243, 227, .32);
  transform: scaleX(.3);
  transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.ww-dot.is-active::before { transform: scaleX(1); background: var(--accent-butter); }

.ww-reviews-link { margin-top: 24px; font-size: 15px; }
.ww-reviews-link a {
  font-weight: 700;
  color: var(--peach-200);
  border-bottom: 2px solid rgba(248, 194, 133, .5);
  padding-bottom: 3px;
  text-decoration: none;
}
.ww-reviews-link a:hover { color: var(--accent-butter); text-decoration: none; }
.ww-reviews-note {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--clay-300);
}

/* ============ contact ============ */

.ww-contact { background: var(--surface-page); }
.ww-contact-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  gap: 52px;
  align-items: start;
}
.ww-contact-copy h2 { margin-top: 12px; font-size: var(--text-section); max-width: 18ch; }
.ww-contact-copy > p { margin-top: 18px; font-size: 17.5px; line-height: 1.7; color: var(--text-body); }
.ww-contact-details {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 16.5px;
  color: var(--text-body);
}
.ww-contact-details strong { color: var(--text-heading); }
.ww-contact-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--clay-300); }

.ww-form-card {
  background: var(--surface-card);
  border-radius: var(--radius-xl);
  padding: 36px;
  box-shadow: var(--shadow-lg);
}

.ww-form-success { text-align: center; padding: 44px 10px; }
.ww-form-success[hidden] { display: none; }
.ww-success-icon {
  display: grid;
  place-items: center;
  width: 74px; height: 74px;
  margin: 0 auto;
  border-radius: var(--radius-pill);
  background: var(--success-soft);
  color: var(--success);
  animation: wnw-pop .34s var(--ease-bounce) both;
}
.ww-form-success h3 { margin-top: 24px; font-size: 28px; color: var(--text-heading); }
.ww-form-success p { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--text-body); max-width: 34ch; margin-left: auto; margin-right: auto; }
.ww-form-success .btn { margin-top: 26px; }
.ww-form-success-actions { display: flex; justify-content: center; }

.ww-form[hidden] { display: none; }
/* spam honeypot — hidden from people, still submitted by bots */
.ww-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* auto-fit rather than a fixed 1fr 1fr: grid items won't shrink below their
   content, so a hard two-column form bursts out of its column on narrow
   laptops. min-width:0 lets the fields actually give way. */
.ww-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
.ww-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-size: 14px; font-weight: 700; color: var(--text-heading); }
.ww-field input,
.ww-field select,
.ww-field textarea {
  min-width: 0;
  width: 100%;
  font: inherit;
  font-weight: 400;
  font-size: 16px;
  padding: 13px 16px;
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-soft);
  background: var(--surface-page);
  color: var(--text-body);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard);
}
.ww-field textarea { border-radius: var(--radius-lg); resize: vertical; }
.ww-field input:focus,
.ww-field select:focus,
.ww-field textarea:focus {
  border-color: var(--focus-ring);
  background: var(--white);
}
.ww-field.has-error input,
.ww-field.has-error select { border-color: var(--danger); }
.ww-field-error { font-weight: 600; font-size: 13px; color: var(--danger); }
.ww-field-hint { font-weight: var(--weight-semibold); font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

.ww-pet-fieldset { border: none; padding: 0; margin: 20px 0 0; }
.ww-pet-fieldset legend { font-size: 14px; font-weight: 700; color: var(--text-heading); padding: 0; margin-bottom: 9px; }
.ww-pet-options { display: flex; gap: 10px; flex-wrap: wrap; }
.ww-pet-btn {
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 2px solid var(--border-soft);
  background: var(--surface-page);
  color: var(--text-heading);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ww-pet-btn:active { transform: var(--press-scale); }
.ww-pet-btn.is-active { background: var(--accent-butter); border-color: var(--brand); }

/* Contact-method choices: real checkboxes (so keyboard and screen readers get
   proper semantics) wearing the same pill as the pet-type toggles. */
.ww-choice { position: relative; display: inline-flex; }
.ww-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.ww-choice-pill {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  border: 2px solid var(--border-soft);
  background: var(--surface-page);
  color: var(--text-heading);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.ww-choice:hover .ww-choice-pill { border-color: var(--brand-hover); }
.ww-choice input:checked + .ww-choice-pill { background: var(--accent-butter); border-color: var(--brand); }
.ww-choice input:focus-visible + .ww-choice-pill { box-shadow: var(--ring-focus); }
[data-contact-method].has-error .ww-choice-pill { border-color: var(--danger); }
[data-method-error] { display: block; margin-top: 9px; }
[data-method-error][hidden] { display: none; }

.ww-field-when { margin-top: 20px; }
.ww-field-message { margin-top: 20px; }

.ww-form-submit { margin-top: 26px; }
.ww-form-hint { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); text-align: center; }
.ww-form-error { margin-top: 12px; font-size: 14px; color: var(--danger); text-align: center; }
.ww-form-error[hidden] { display: none; }

/* ============ footer ============ */

.ww-footer { background: var(--surface-ink); color: var(--peach-200); padding: 72px 24px 32px; }
.ww-footer-grid {
  max-width: var(--max-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 44px;
}
.ww-footer-brand { display: flex; align-items: center; gap: 10px; }
.ww-footer-mark {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  background: var(--brand);
  display: grid;
  place-items: center;
  color: var(--brand-on);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
}
.ww-footer-name { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--cream-50); }
.ww-footer-desc { margin-top: 16px; font-size: 15.5px; line-height: 1.65; max-width: 34ch; }
.ww-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  background: rgba(253, 243, 227, .12);
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  color: var(--cream-50);
}
.ww-footer-heading {
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--peach-300);
  font-weight: 700;
}
.ww-footer-links { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; }
.ww-footer-links a { font-size: 15.5px; color: var(--peach-200); text-decoration: none; }
.ww-footer-links a:hover { color: var(--accent-butter); text-decoration: none; }
.ww-footer-contact { display: flex; flex-direction: column; gap: 11px; margin-top: 16px; font-size: 15.5px; }
/* The phone/email are links, so they'd take the global terracotta link colour —
   only 3.17:1 on the ink footer. Match the Explore column instead. */
.ww-footer-contact a { color: var(--peach-200); text-decoration: none; }
.ww-footer-contact a:hover { color: var(--accent-butter); text-decoration: none; }
.ww-footer-bottom {
  max-width: var(--max-content);
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(253, 243, 227, .16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--clay-300);
}

/* ============ responsive ============ */

/* Clear the fixed nav rail. These must be class selectors, not `main > section`:
   an element selector (0,0,2) loses to .ww-section/.ww-hero (0,1,0) no matter
   what the media query says, so the rail would overlap the content. */
@media (min-width: 941px) {
  .ww-section, .ww-hero, .ww-footer { padding-left: 262px; }
}

@media (max-width: 940px) {
  .ww-rail { display: none; }
  .ww-mobile-toggle { display: flex; }
  .ww-hero-grid,
  .ww-about-grid,
  .ww-contact-grid,
  .ww-footer-grid { grid-template-columns: 1fr; }
  .ww-hero-grid { gap: 40px; }
  .ww-footer-grid { gap: 32px; }
  .ww-pill-1 { left: 5%; }
  .ww-pill-2 { right: 5%; }
  .ww-pill-3 { left: 6%; bottom: 28%; }
  .ww-hero-card { right: 0; }
  .ww-about-pill-1 { left: 4%; }
  .ww-about-pill-2 { right: 4%; }
  .ww-contact-pill-1 { left: 3%; }
  .ww-contact-pill-2 { right: 3%; }
}

@media (max-width: 640px) {
  .ww-trust-grid,
  .ww-form-grid { grid-template-columns: 1fr; }
  /* 11 dots at the full 30px slot overrun a phone. A tighter slot plus a row of
     their own, below the arrows, keeps them on one line without clipping. */
  .ww-dot { width: 22px; }
  .ww-carousel-controls { flex-wrap: wrap; gap: 14px; }
  .ww-carousel-dots { order: 3; width: 100%; }
  .ww-section,
  .ww-hero,
  .ww-footer { padding-left: 20px; padding-right: 20px; }
}

/* ============ designer credit ============ */

/* The anchor is just the ghost, so that's the only hit target. The caption is
   absolutely positioned to its left and revealed with transform + opacity —
   no layout property animates, and it reads as unfurling out of the ghost. */
.hm-credit {
  position: relative;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.hm-credit:hover { text-decoration: none; }

.hm-credit-ghost {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 30px;
  /* scale sits here, the idle float sits on the svg — one transform each, so
     the hover can't be clobbered by the running animation */
  transition: transform .35s var(--ease-out-soft);
}
.hm-credit:hover .hm-credit-ghost,
.hm-credit:focus-visible .hm-credit-ghost { transform: scale(1.3); }

.hm-credit-ghost svg {
  width: 22px;
  height: 26px;
  display: block;
  animation: hm-ghost-float 3.4s ease-in-out infinite;
}
@keyframes hm-ghost-float {
  0%, 100% { transform: translateY(-1.5px); }
  50%      { transform: translateY(1.5px); }
}

.hm-credit-text {
  position: absolute;
  right: 100%;
  top: 50%;
  margin-right: 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translate(16px, -50%);
  transition: opacity .3s var(--ease-out-soft), transform .45s var(--ease-out-soft);
  pointer-events: none;
}
.hm-credit:hover .hm-credit-text,
.hm-credit:focus-visible .hm-credit-text {
  opacity: 1;
  transform: translate(0, -50%);
}
.hm-credit-text > span {
  display: block;
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  color: var(--peach-200);
}
.hm-credit-text strong { color: #C9A8E8; font-weight: var(--weight-bold); }

@media (max-width: 640px) {
  .hm-credit-text > span { font-size: 11.5px; }
}