/* Jo McCarthy: site styles. Palette taken from the live Wix site (blue, ocean-inspired). */
@font-face { font-family: "Instrument Serif"; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/assets/fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --ink: #0f2d3d;          /* headings, from the live site */
  --text: #2c4757;         /* body copy */
  --muted: #4a6c80;        /* live footer slate blue */
  --accent: #2b7fa3;       /* live accent (decorative) */
  --accent-strong: #1d6888;/* AA-safe accent for text and buttons */
  --accent-deep: #155573;
  --foam: #f8fbff;
  --sea-0: #f1f6fc;
  --sea-1: #e6f0f9;
  --sea-2: #dce9f7;
  --sea-3: #d1e3f2;
  --blush: #fadbd8;
  --line: rgba(43, 127, 163, .16);
  --shadow: 0 18px 40px -22px rgba(15, 45, 61, .35);
  --shadow-soft: 0 10px 30px -18px rgba(15, 45, 61, .28);
  --radius: 22px;
  --radius-lg: 36px;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --header-h: 76px;
  --wave-h: clamp(26px, 4.2vw, 64px);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);
  --space: clamp(4rem, 9vw, 7.5rem);
}
@media (min-width: 960px) { :root { --header-h: 92px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.65; color: var(--text); background: var(--foam); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
a { color: var(--accent-strong); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--ink); line-height: 1.05; margin: 0 0 .4em; text-wrap: balance; letter-spacing: -.005em; }
h2 { font-size: clamp(2.5rem, 6.4vw, 4rem); }
h3 { font-size: clamp(1.7rem, 3.4vw, 2.1rem); }
p, li { text-wrap: pretty; }
p { margin: 0 0 1.1em; }
ul { margin: 0; padding: 0; list-style: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 1rem; top: -100px; z-index: 100; background: var(--ink); color: #fff; padding: .7rem 1.1rem; border-radius: 999px; text-decoration: none; font-weight: 600; }
.skip:focus { top: 1rem; color: #fff; }
main:focus { outline: none; }
.pin { fill: var(--accent); flex: none; }
/* Role line (hero + footer): even gaps, small round separators that only sit between items on the same line.
   Narrow screens stack the roles, so a separator can never start or end a line. */
.roles { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: .9em; row-gap: .1em; margin: 0; padding: 0; list-style: none; }
.roles li { display: inline-flex; align-items: center; gap: .9em; white-space: nowrap; text-wrap: nowrap; }
.roles li + li::before { content: ""; flex: none; width: .3em; height: .3em; border-radius: 50%; background: var(--accent); opacity: .85; }
@media (max-width: 559px) {
  .roles { flex-direction: column; row-gap: .05em; }
  .roles li + li::before { display: none; }
}
/* The footer line is longer, so it stays stacked a little wider. */
@media (max-width: 639px) {
  .footer__roles { flex-direction: column; row-gap: .05em; }
  .footer__roles li + li::before { display: none; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 52px; padding: .8rem 1.75rem; border-radius: 999px; background: var(--accent-strong); color: #fff; font: 500 1.0625rem/1.2 var(--sans); text-decoration: none; border: 1.5px solid var(--accent-strong); cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s, box-shadow .2s; box-shadow: 0 10px 22px -14px rgba(21, 85, 115, .9); white-space: nowrap; }
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--ghost { background: transparent; color: var(--accent-strong); box-shadow: none; }
.btn--ghost:hover { background: rgba(29, 104, 136, .08); color: var(--accent-deep); }
.btn--quiet { background: var(--muted); border-color: var(--muted); box-shadow: 0 10px 22px -14px rgba(15, 45, 61, .8); }
.btn--quiet:hover { background: #3c5a6c; border-color: #3c5a6c; }
.btn--block { width: 100%; }
.ext { flex: none; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* Header */
.header { position: sticky; top: 0; z-index: 40; height: var(--header-h); background: rgba(248, 251, 255, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); transition: box-shadow .25s; }
.header.is-scrolled { box-shadow: 0 1px 0 var(--line), 0 10px 30px -24px rgba(15, 45, 61, .5); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: block; border-radius: 8px; }
.brand img { width: 144px; height: auto; }
@media (min-width: 960px) { .brand img { width: 176px; } }
.nav { display: none; }
.nav__list { display: flex; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.nav__list a { position: relative; color: var(--ink); text-decoration: none; font-size: 1.0625rem; padding: .4rem 0; }
.nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--accent); border-radius: 2px; transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.nav__list a:hover::after, .nav__list a[aria-current]::after { transform: scaleX(1); }
@media (min-width: 960px) { .nav { display: block; } .menu-btn { display: none !important; } }
.menu-btn { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-right: -8px; border: 0; background: transparent; color: var(--ink); border-radius: 50%; cursor: pointer; }
.menu-btn__lines { display: grid; gap: 7px; width: 26px; }
.menu-btn__lines span { display: block; height: 1.6px; background: currentColor; border-radius: 2px; }
.menu-btn__lines span:last-child { width: 70%; margin-left: auto; }

/* Mobile menu */
.menu { position: fixed; inset: 0; z-index: 60; background: rgba(15, 45, 61, .28); }
.menu[hidden] { display: none; }
.menu__panel { position: relative; background: var(--foam); padding: 0 var(--gutter) 2rem; box-shadow: 0 30px 40px -30px rgba(15, 45, 61, .45); }
@media (max-height: 640px) { .menu__panel { max-height: 100%; overflow-y: auto; } .menu__wave { display: none; } }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); }
.menu__title { font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.menu__close { width: 48px; height: 48px; margin-right: -8px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--sea-0); color: var(--ink); cursor: pointer; }
.menu__list { margin-top: .5rem; }
.menu__list li + li { border-top: 1px solid var(--line); }
.menu__list a { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem .25rem; font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--ink); text-decoration: none; }
.menu__list a::after { content: ""; width: 9px; height: 9px; border-top: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); transform: rotate(45deg); opacity: .7; margin-right: .4rem; }
.menu__list a:hover, .menu__list a:focus-visible { color: var(--accent-strong); }
.menu__foot { display: flex; align-items: center; gap: .45rem; margin: 1.5rem 0 0; font-size: .8125rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.menu__wave { position: absolute; left: 0; top: calc(100% - 1px); width: 100%; height: 26px; color: var(--foam); fill: currentColor; transform: scaleY(-1); }
.js .menu:not([hidden]) .menu__panel { animation: menu-in .32s cubic-bezier(.2, .7, .2, 1); }
.js .menu:not([hidden]) { animation: fade-in .25s ease; }
@keyframes menu-in { from { transform: translateY(-14px); opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .js .menu:not([hidden]) .menu__panel, .js .menu:not([hidden]) { animation: none; } }

/* Hero */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 0 calc(var(--wave-h) + clamp(3rem, 6vw, 4.5rem)); min-height: min(calc(100svh - var(--header-h)), 860px); display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(248, 251, 255, .72) 0%, rgba(248, 251, 255, .6) 45%, rgba(237, 245, 252, .74) 100%); }
.hero__inner { display: flex; flex-direction: column; align-items: center; }
.hero__place { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 0 0 .5rem; font-size: clamp(.875rem, 1.6vw, 1rem); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ink); }
.hero__title { font-size: clamp(4rem, 13.5vw, 8.25rem); line-height: .95; margin: 0 0 .22em; letter-spacing: -.01em; }
/* Roles line: normal weight, framed by two short waves in the accent blue (the site's wave motif).
   Wide screens: wave, roles, wave on one line. Narrower: a wave above and below the line or stack. */
.hero__roleline { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); }
.hero__roles { font-size: clamp(1.34375rem, 3.2vw, 2rem); font-weight: 500; color: var(--ink); line-height: 1.35; }
.flourish { flex: none; width: 44px; height: 10px; fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; opacity: .8; }
@media (min-width: 900px) {
  .hero__roleline { flex-direction: row; gap: 1.1rem; }
  .flourish { width: 52px; height: 12px; }
  .flourish--end { transform: scaleX(-1); }
}
/* Mobile: white waves above and below the roles line */
@media (max-width: 899.98px) {
  .hero__roleline .flourish { stroke: #fff; opacity: 1; }
}
/* Desktop: white waves beside the roles line, and true-black separator dots.
   Pin, place, name and roles sit 2px higher; the shift is visual only, so the stats band stays put.
   The roles stay on one line. 36px waves fit from 900px until the type steps up at 1024px.
   From there even 28px waves wrap the 2.25rem line, so the waves hide until 1124px, where the 52px waves fit again. */
@media (min-width: 900px) {
  .hero__roleline .flourish { stroke: #fff; opacity: 1; }
  .hero__roles { flex-wrap: nowrap; }
  .hero__roles li + li::before { background: #000; opacity: 1; }
  .hero:has(.stats--c) .hero__place,
  .hero:has(.stats--c) .hero__title,
  .hero:has(.stats--c) .hero__roleline { position: relative; top: -2px; }
}
@media (min-width: 900px) and (max-width: 1023.98px) {
  .hero__roleline { gap: .5rem; }
  .hero__roleline .flourish { width: 36px; height: 8px; }
}
@media (min-width: 1024px) and (max-width: 1123.98px) {
  .hero__roleline .flourish { display: none; }
}
.hero .btn--hero { min-width: 13rem; min-height: 58px; font-size: 1.125rem; }

/* Stats: three designs, switched by one class on the list (.stats--a, .stats--b or .stats--c).
   Shared: serif figure over a small tracked label, both centred; the count-up overlays the final figure. */
.stats { width: 100%; margin: 0 0 clamp(1.75rem, 4vw, 2.5rem); padding: 0; }
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; min-width: 0; text-align: center; }
/* The figure's box sits exactly on its ink: the "+" is small and raised, and its right side bearing is trimmed,
   so figure and label centres match (measured within 1px in Chromium and WebKit). */
.stat__num { position: relative; display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 4.4vw, 3rem); line-height: 1; color: var(--accent-strong); font-variant-numeric: lining-nums; white-space: nowrap; }
.stat__final { position: relative; display: inline-block; }
.stat__plus { position: absolute; left: 100%; top: .08em; margin-left: .04em; font-size: .6em; line-height: 1; }
.stat__num > span { text-align: center; }
/* The animated figure floats over the real one, so the layout is always sized by the final value */
.stat__anim { position: absolute; top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.stat__label { font-size: .75rem; font-weight: 500; letter-spacing: .1em; padding-left: .1em; line-height: 1.35; text-transform: uppercase; color: var(--ink); text-align: center; text-wrap: balance; }
@media (max-width: 379px) { .stat__label { font-size: .6875rem; letter-spacing: .04em; padding-left: .04em; } }

/* A: minimal. No boxes: figures over the photo between two hairlines, thin dividers between items.
   Mobile: 3 + 2 on a 6-column grid (bottom two span 3), so both rows fill the width. */
.stats--a { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.1rem; max-width: 1000px; padding: 1.1rem 0; border-block: 1px solid rgba(15, 45, 61, .2); }
.stats--a .stat { grid-column: span 2; padding: 0 .35rem; }
.stats--a .stat:nth-child(n+4) { grid-column: span 3; }
.stats--a .stat + .stat:not(:nth-child(4)) { border-left: 1px solid rgba(15, 45, 61, .2); }
.stats--a .stat:nth-child(n+4) { padding-top: 1.1rem; border-top: 1px solid rgba(15, 45, 61, .12); }
@media (min-width: 720px) {
  .stats--a { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 1.35rem 0; }
  .stats--a .stat, .stats--a .stat:nth-child(n+4) { grid-column: auto; padding-top: 0; border-top: 0; }
  .stats--a .stat + .stat { border-left: 1px solid rgba(15, 45, 61, .2); }
}

/* B: refined cards. Small, solid white, hairline border, one size for all.
   Mobile: two columns with the fifth card full width; 720px and up: one compact row of five. */
.stats--b { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; max-width: 24rem; }
.stats--b .stat { padding: .9rem .4rem .85rem; border-radius: 14px; background: rgba(255, 255, 255, .94); border: 1px solid rgba(43, 127, 163, .16); box-shadow: 0 8px 22px -16px rgba(15, 45, 61, .45); }
.stats--b .stat:last-child { grid-column: 1 / -1; }
.stats--b .stat__num { font-size: clamp(2rem, 3.6vw, 2.5rem); }
.stats--b .stat__label { color: var(--muted); }
@media (min-width: 720px) {
  .stats--b { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; max-width: 880px; }
  .stats--b .stat:last-child { grid-column: auto; }
  .stats--b .stat { padding: 1.05rem .4rem 1rem; }
}

/* C: editorial. The figures leave the photo and sit in a white band at the foot of the hero, under a wave.
   Large figures, small labels, hairline dividers. Mobile: 3 + 2 on a 6-column grid; 720px and up: five across. */
.hero:has(.stats--c) { padding-bottom: 0; padding-top: clamp(3rem, 8vw, 5.5rem); align-items: stretch; }
.hero:has(.stats--c) .hero__inner { flex: 1; }
.hero:has(.stats--c) .hero__place { margin-top: auto; }
.hero:has(.stats--c) .btn--hero { margin-bottom: calc(var(--wave-h) + clamp(1.75rem, 4vw, 2.5rem)); }
/* 1024px and up: a shorter hero, so name, roles, button and the whole stats band sit above the fold at 1280x800 and 1440x900 */
@media (min-width: 1024px) {
  .hero:has(.stats--c) { padding-top: 1.5rem; min-height: min(calc(100svh - var(--header-h) - 2.5rem), 760px); }
  .hero:has(.stats--c) .hero__roleline { margin-bottom: 1.75rem; }
  .hero:has(.stats--c) .btn--hero { margin-bottom: calc(var(--wave-h) + 1.5rem); }
}
/* No hero button: the roles line keeps the clearance above the wave. Desktop: pin, name and roles a touch larger and lower. */
.hero:has(.stats--c) .hero__roleline { margin-bottom: calc(var(--wave-h) + clamp(2rem, 4.5vw, 3rem)); }
@media (min-width: 1024px) {
  .hero:has(.stats--c) .hero__roleline { margin-bottom: calc(var(--wave-h) + 2.75rem); }
  .hero:has(.stats--c) .hero__title { font-size: clamp(8.25rem, 9.6vw, 9.5rem); }
  .hero:has(.stats--c) .hero__roles { font-size: 2.25rem; }
  .hero:has(.stats--c) .hero__place { font-size: 1.0625rem; }
}
/* The white runs edge to edge (a filled, horizontally outset border image) while the figures stay on the page grid. */
.stats--c { order: 10; position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: 1.75rem; max-width: 1100px; margin: auto 0 0; padding: clamp(2.125rem, 4vw, 2.5rem) 0 calc(var(--wave-h) + clamp(1.875rem, 5vw, 3.5rem)); background: #fff; border-image: linear-gradient(#fff 0 0) fill 0 / 0 / 0 100vmax; }
.stats--c::before { content: ""; position: absolute; left: 50%; width: 100vw; top: 1px; transform: translate(-50%, -100%); height: var(--wave-h); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 30c150 26 330 42 520 30S900 14 1080 22s270 30 360 34v74H0Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; pointer-events: none; }
.stats--c .stat { grid-column: span 2; padding: 0 .35rem; gap: .55rem; }
.stats--c .stat:nth-child(n+4) { grid-column: span 3; }
.stats--c .stat + .stat:not(:nth-child(4)) { border-left: 1px solid var(--line); }
.stats--c .stat__num { font-size: clamp(2.4rem, 5vw, 3.75rem); }
.stats--c .stat__label { color: var(--muted); }
@media (min-width: 720px) {
  .stats--c { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .stats--c .stat, .stats--c .stat:nth-child(n+4) { grid-column: auto; }
  .stats--c .stat + .stat { border-left: 1px solid var(--line); }
}
@media (min-width: 1024px) { .stats--c { padding: 2rem 0 calc(var(--wave-h) + 1.75rem); } }
/* Mobile only. v6 hung the "+" and centred the digits, which moved each value (digits plus "+")
   about 5.9px right of its v5 centre. Video views and Years experience come halfway back.
   TikTok followers gets a separate 1px nudge. Labels did not move in v6, so they stay put.
   Measured at 390px; the same half holds at 320px. */
@media (max-width: 759px) {
  .stats--c .stat:nth-child(4) .stat__num,
  .stats--c .stat:nth-child(5) .stat__num { transform: translateX(-2.94px); }
  .stats--c .stat:nth-child(3) .stat__num { transform: translateX(1px); }
}
/* Count-up: final figures are in the HTML. JS hides them only while counting; the failsafe shows them anyway. */
.js .stats:not(.is-done) .stat__final { opacity: 0; }
/* Failsafe: if the script never runs, show the final figures and content anyway */
.js:not(.is-ready) .stats .stat__final, .js:not(.is-ready) .reveal { animation: failsafe 0s 2.5s forwards; }
@keyframes failsafe { to { opacity: 1; transform: none; } }
.stats.is-done .stat__anim { display: none; }
@media (prefers-reduced-motion: reduce) { .js .stats .stat__final { opacity: 1 !important; animation: none; } .stat__anim { display: none; } }

/* Sections + waves */
.section { position: relative; padding: calc(var(--space) * .8) 0 var(--space); }
.wave { position: absolute; left: 0; top: 1px; transform: translateY(-100%); width: 100%; height: var(--wave-h); fill: currentColor; pointer-events: none; }
.wave--flip { transform: translateY(-100%) scaleX(-1); }
.section--about { background: var(--sea-0); color: var(--text); }
.section--about .wave { color: var(--sea-0); }
.section--celebrant { background: var(--sea-1); }
.section--celebrant .wave { color: var(--sea-1); }
.section--plymkids { background: var(--sea-0); }
.section--plymkids .wave { color: var(--sea-0); }
.section--tiktok { background: var(--sea-1); }
.section--tiktok .wave { color: var(--sea-1); }
.section--contact { background: var(--sea-3); }
.section--contact .wave { color: var(--sea-3); }

.eyebrow { font-family: var(--sans); font-size: clamp(1rem, 1.8vw, 1.1875rem); font-weight: 500; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase; color: var(--accent-strong); margin-bottom: 1.25rem; max-width: 34ch; }
.lead { font-size: clamp(1.1875rem, 2.2vw, 1.375rem); line-height: 1.55; color: var(--ink); }

.split { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 960px) { .split { grid-template-columns: 1fr 1fr; } }
.split__text { max-width: 36rem; }

/* About, Celebrant, TikTok: body, lead and buttons about 5% larger so these sections read at the same weight as Plymkids */
:is(.section--about, .section--celebrant, .section--tiktok) .split__text > p:not(.eyebrow):not(.lead):not(.handle) { font-size: 1.125rem; }
:is(.section--about, .section--celebrant, .section--tiktok) .lead { font-size: clamp(1.25rem, 2.3vw, 1.4375rem); }
:is(.section--about, .section--celebrant, .section--tiktok) .eyebrow { font-size: clamp(1.0625rem, 1.9vw, 1.25rem); }
:is(.section--celebrant, .section--tiktok) .btn, .paths a { font-size: 1.125rem; }
.section--celebrant .ceremony p { font-size: 1.1875rem; }

/* About */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; max-width: 26rem; margin-top: 1.75rem; }
.paths a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 52px; padding: .6rem 1.25rem; white-space: nowrap; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; font-weight: 500; transition: border-color .2s, background-color .2s; }
.paths a span { color: var(--accent); transition: transform .2s; }
.paths a:hover { border-color: var(--accent); background: #fff; }
.paths a:hover span { transform: translateX(3px); }
@media (max-width: 379px) {
  .paths a { justify-content: center; padding: .55rem .75rem; font-size: .9375rem; }
  .paths a span { display: none; }
  .btn { padding-inline: 1.25rem; }
}
/* About photos: 8% larger than their column. Mobile grows evenly into the side margins; desktop grows outward (right). */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2vw, 1.5rem); align-items: start; width: 108%; margin-inline: -4%; }
@media (min-width: 960px) { .duo { margin-inline: 0 -8%; } }
.duo img { width: 100%; aspect-ratio: 3 / 4.2; object-fit: cover; border: 3.5px solid #fff; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.duo__a img { object-position: 50% 30%; }
.duo__b { margin-top: clamp(2rem, 6vw, 4rem); }
.duo__b img { object-position: 52% 50%; }

/* Celebrant */
.arch { margin: 0; justify-self: center; width: min(100%, 460px); }
.arch img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; object-position: 60% 40%; border: 3.5px solid #fff; border-radius: 46% 46% 30px 30px / 34% 34% 30px 30px; background: #fff; box-shadow: var(--shadow); }
.ceremonies { display: grid; gap: clamp(1.25rem, 3vw, 2rem); margin-top: clamp(3rem, 7vw, 5rem); }
@media (min-width: 760px) { .ceremonies { grid-template-columns: 1fr 1fr; } }
/* Same surface as the Plymkids fact cards: solid white, no border, hairline + soft shadow */
.ceremony { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: clamp(1.75rem, 4vw, 2.75rem); border-radius: var(--radius-lg); background: #fff; border: 0; box-shadow: 0 1px 0 var(--line), var(--shadow-soft); overflow: hidden; }
.ceremony__icon { color: var(--accent); margin-bottom: 1rem; }
.ceremony--funeral .ceremony__icon { color: var(--muted); }
.ceremony p { flex: 1; max-width: 30ch; font-size: 1.125rem; }
.ceremony .btn { margin-top: .5rem; position: relative; }

/* Plymkids */
/* Plymkids at a glance: one card. Narrow columns stack the three facts, each centred (figure over label);
   once the text column is wide enough, three cells side by side with figures and labels centred on shared rows. */
.split--plymkids .split__text { container-type: inline-size; }
.facts { display: grid; margin: 1.5rem 0 1.75rem; padding: .35rem 1.25rem; border-radius: 18px; background: #fff; box-shadow: 0 1px 0 var(--line), var(--shadow-soft); }
.facts li { display: grid; justify-items: center; align-content: center; row-gap: .4rem; text-align: center; padding: .9rem 0; }
.facts li + li { border-top: 1px solid var(--line); }
.facts strong { font-family: var(--serif); font-weight: 400; font-size: 2.25rem; line-height: 1; color: var(--accent-strong); font-variant-numeric: lining-nums; white-space: nowrap; }
.facts span { font-size: .8125rem; font-weight: 500; line-height: 1.35; letter-spacing: .08em; padding-left: .08em; text-transform: uppercase; color: var(--muted); text-wrap: balance; }
@container (min-width: 30rem) {
  /* The third label is the longest: its cell sizes to it, so all three labels stay on one line with no empty space under the others. */
  .facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) max-content; grid-template-rows: auto auto; padding: 1.15rem .5rem; }
  .facts li { grid-row: span 2; grid-template-rows: subgrid; row-gap: .45rem; align-content: center; padding: 0 .75rem; }
  .facts li + li { border-top: 0; border-left: 1px solid var(--line); }
  .facts strong { align-self: end; }
  .facts span { align-self: start; white-space: nowrap; }
  /* Cells share both rows, so every figure and label sits at the same height and the card has no empty space. */
}
.split--plymkids .btn { margin-top: .75rem; }
.stage { margin: 0; }
.stage img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; object-position: 50% 50%; border: 3.5px solid #fff; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
@media (min-width: 960px) { .split--plymkids { grid-template-columns: 1.05fr .95fr; align-items: start; } .stage { position: sticky; top: calc(var(--header-h) + 2rem); } }

/* TikTok */
@media (min-width: 960px) { .split--tiktok .reels { order: -1; } }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.handle { margin: 1rem 0 0; font-size: .9375rem; color: var(--muted); }
.reels { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(.9rem, 2.4vw, 1.75rem); max-width: 520px; width: 100%; justify-self: center; align-items: start; }
.reel { margin: 0; padding: 3.5px; border-radius: 30px; background: #fff; box-shadow: var(--shadow); }
.reel img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 24px; }
.reel--photo img { object-position: 50% 30%; }
.reel--profile { margin-top: clamp(2rem, 7vw, 4rem); }
.reel--profile img { object-position: 50% 0; }

/* Contact */
.contact { display: grid; gap: clamp(2rem, 5vw, 3rem); justify-items: center; text-align: center; }
.contact__intro { max-width: 40rem; }
.contact__intro p { font-size: 1.125rem; }
.contact__place { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0; }
.form-card { width: 100%; max-width: 760px; text-align: left; background: var(--foam); border-radius: var(--radius-lg); padding: clamp(1.5rem, 5vw, 3rem); box-shadow: var(--shadow); }
.form__required { font-size: .9375rem; color: var(--muted); margin-bottom: 1.25rem; }
.form__row { display: grid; gap: 0 1.25rem; }
@media (min-width: 640px) { .form__row--2 { grid-template-columns: 1fr 1fr; } }
.field { margin-bottom: 1.15rem; display: flex; flex-direction: column; }
.field label { font-size: .9375rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.field__opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1px solid #b9cfe0; border-radius: 14px; padding: .8rem 1rem; min-height: 50px; transition: border-color .2s, box-shadow .2s; appearance: none; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #8fb0c6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px rgba(29, 104, 136, .22); }
.select { position: relative; }
.select::after { content: ""; position: absolute; right: 1.1rem; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select { padding-right: 2.5rem; }
[aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 3px rgba(179, 38, 30, .12) !important; }
.field__err { margin: .4rem 0 0; font-size: .9375rem; color: #a3221b; }
.field__err::before { content: "! "; font-weight: 700; }
.form__summary { margin-bottom: 1.25rem; padding: .85rem 1.1rem; border-radius: 14px; background: #fdecea; color: #7f1d17; border: 1px solid #f3c2bd; }
.form__summary p { margin: 0; font-weight: 600; }
.form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__privacy { font-size: .9375rem; color: var(--muted); }
.form__status { margin: 1rem 0 0; font-size: .9375rem; color: var(--ink); }
.form__status:empty { display: none; }
.form__status.is-error { color: #a3221b; }
.form__soon { margin: 1rem 0 0; padding: .85rem 1rem; border-radius: 12px; background: var(--sea-0); font-size: .9375rem; color: var(--ink); }
.form__soon:focus { outline: none; }
.form__soon a { color: var(--accent-strong); }
.form__note { margin: 1rem 0 0; font-size: .9375rem; color: var(--muted); }
.form.is-sending button[type="submit"] { opacity: .7; pointer-events: none; }
.form__success { text-align: center; padding: 2rem 0; }
.form__success:focus { outline: none; }
.form__success h3 { font-size: 2.25rem; }

/* Footer: same character as the live site (slate blue, centred name, three columns) */
.footer { position: relative; background: var(--muted); color: #fff; padding: clamp(3rem, 6vw, 4.5rem) 0 2.5rem; margin-top: calc(var(--wave-h) * -.15); }
.footer .wave--foot { color: var(--muted); height: clamp(28px, 4.6vw, 70px); }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; color: #fff; }
.footer :focus-visible { outline-color: #fff; }
.footer__brand { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.footer__name { font-family: var(--serif); font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1; margin: 0 0 .6rem; }
.footer__roles { font-size: clamp(1rem, 2vw, 1.1875rem); color: #eef5fb; }
.footer__roles li + li::before { background: #cfe2f0; }
.footer__cols { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
@media (min-width: 760px) { .footer__cols { grid-template-columns: repeat(3, 1fr); } }
.footer__col:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .footer__col:last-child { grid-column: auto; } }
.footer__h { font-family: var(--sans); font-size: 1.25rem; font-weight: 500; color: #fff; margin: 0 0 .9rem; letter-spacing: 0; }
.footer__col li { margin-bottom: .35rem; color: #eef5fb; }
.footer__col li a { display: inline-block; padding: .2rem 0; white-space: nowrap; }
.social { display: flex; gap: .6rem; }
.footer__col .social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .25); transition: background-color .2s; }
.social a:hover { background: rgba(255, 255, 255, .24); }
.social svg { fill: #fff; }
.footer__base { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.75rem; border-top: 1px solid rgba(255, 255, 255, .22); display: flex; flex-direction: column; align-items: center; gap: 1.5rem; text-align: center; font-size: .9375rem; color: #eef5fb; }
.footer__base p { margin: 0; text-wrap: balance; }
.footer__base p a { display: inline-block; text-decoration: underline; margin-left: .5rem; white-space: nowrap; }
/* Credit: small and quiet, in the footer's own colours */
.credit { display: inline-flex; align-items: center; gap: .35rem; font-size: .8125rem; letter-spacing: .02em; color: rgba(238, 245, 251, .82); white-space: nowrap; }
.footer .credit a { color: #fff; font-weight: 500; }
.footer .credit a:hover { text-decoration: underline; }
.footer .credit .credit__ig { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-left: .15rem; border-radius: 50%; opacity: .85; transition: opacity .2s, background-color .2s; }
.footer .credit .credit__ig:hover { opacity: 1; background: rgba(255, 255, 255, .12); }
.credit__ig svg { fill: currentColor; }
@media (min-width: 760px) {
  .footer__base { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* Reveal (only with JS; content is always visible without it) */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; transition: none; } }

/* Sub-pages (privacy, 404) */
.page { padding: clamp(3rem, 8vw, 5rem) 0 var(--space); background: var(--sea-0); min-height: 60vh; }
.page .wrap { max-width: 760px; }
.page h1 { font-size: clamp(2.75rem, 7vw, 4rem); }
.page h2 { font-size: clamp(1.75rem, 4vw, 2.25rem); margin-top: 1.6em; }
.page li { list-style: disc; margin: 0 0 .5em 1.25rem; }
.page .note { padding: 1rem 1.25rem; border-radius: 14px; background: #fff; border: 1px solid var(--line); }
.header--simple .header__inner { justify-content: space-between; }
.back { font-weight: 500; }
.footer__base--solo { margin-top: 0; border-top: 0; padding-top: 0; justify-content: center; text-align: center; }
.page + .footer { margin-top: 0; padding-top: 2.5rem; }
/* v13 desktop: nudge pin, name and roles down so the block sits midway between the header and the white stats wave */
@media (min-width: 1024px) {
  .hero:has(.stats--c) :is(.hero__place, .hero__title, .hero__roleline) { position: relative; top: 1.65rem; }
}