/* Pets Avenue SG Design System v1.0 — generated from tokens.json by build-tokens.mjs. Do not edit by hand. */
/* Status: proposed (Route A Garden Commons, working recommendation, not owner-approved). */
:root {
  /* palette.forest */
  --palette-forest-100: #E1EFE8;
  --palette-forest-200: #C9E2D5;
  --palette-forest-300: #A0C9B4;
  --palette-forest-400: #78AC93;
  --palette-forest-500: #548E73;
  --palette-forest-600: #3C765C;
  --palette-forest-700: #1F5A43;
  --palette-forest-800: #1A4A36;
  --palette-forest-900: #17402F;
  --palette-forest-050: #F2F9F5;
  /* palette.ivory */
  --palette-ivory-100: #F3EEE2;
  --palette-ivory-050: #FBF8F1;
  /* palette.white */
  --palette-white: #FFFFFF;
  /* palette.stone */
  --palette-stone-100: #EDEBE7;
  --palette-stone-200: #DEDAD3;
  --palette-stone-300: #C3BDB2;
  --palette-stone-400: #A59E90;
  --palette-stone-500: #877F71;
  --palette-stone-600: #6F685A;
  --palette-stone-700: #585245;
  --palette-stone-800: #453F34;
  --palette-stone-900: #343027;
  --palette-stone-050: #F8F7F5;
  /* palette.ink */
  --palette-ink-600: #5F5A52;
  --palette-ink-700: #4A5550;
  --palette-ink-900: #1D2620;
  /* palette.clay */
  --palette-clay-100: #FEE5DD;
  --palette-clay-200: #FECFBE;
  --palette-clay-300: #F2AA90;
  --palette-clay-400: #DD8364;
  --palette-clay-500: #C1613E;
  --palette-clay-600: #A4482A;
  --palette-clay-700: #8A330F;
  --palette-clay-800: #6E2403;
  --palette-clay-900: #561900;
  --palette-clay-050: #FFF4F1;
  /* palette.sun */
  --palette-sun-100: #F9E9D0;
  --palette-sun-200: #F2D7AB;
  --palette-sun-300: #F2B544;
  --palette-sun-400: #CA9327;
  --palette-sun-500: #A77602;
  --palette-sun-600: #8A6002;
  --palette-sun-700: #6D4B01;
  --palette-sun-800: #553A01;
  --palette-sun-900: #412C01;
  --palette-sun-050: #FDF6EA;
  /* palette.lake */
  --palette-lake-100: #E0EDF9;
  --palette-lake-200: #C8DEF2;
  --palette-lake-300: #9FC2E2;
  --palette-lake-400: #76A4CB;
  --palette-lake-500: #5385AF;
  --palette-lake-600: #3B6E96;
  --palette-lake-700: #28567C;
  --palette-lake-800: #1A4363;
  --palette-lake-900: #11334D;
  --palette-lake-050: #F1F8FD;
  /* palette.heather */
  --palette-heather-100: #F0E7F6;
  --palette-heather-200: #E3D4EC;
  --palette-heather-300: #CBB3D9;
  --palette-heather-400: #AF91C0;
  --palette-heather-500: #9271A4;
  --palette-heather-600: #7A5A8C;
  --palette-heather-700: #624572;
  --palette-heather-800: #4D345A;
  --palette-heather-900: #3B2646;
  --palette-heather-050: #F9F5FC;
  /* palette.slate */
  --palette-slate-100: #E8EDF1;
  --palette-slate-700: #3D4F5C;
  /* palette.moss */
  --palette-moss-100: #E4EEE4;
  --palette-moss-700: #2F5D3A;
  /* palette.red */
  --palette-red-100: #FCE8E6;
  --palette-red-700: #B3261E;
  /* palette.amber */
  --palette-amber-100: #FFF4DB;
  --palette-amber-800: #8A5300;
  /* palette.blue */
  --palette-blue-100: #E6EEF8;
  --palette-blue-700: #2456A6;
  /* palette.green */
  --palette-green-100: #E5F2E8;
  --palette-green-700: #2E6B3F;
  /* palette.neutral */
  --palette-neutral-200: #E6E1D6;
  --palette-neutral-650: #6B665C;
  /* color.surface */
  --color-surface-page: var(--palette-ivory-050);
  --color-surface-panel: var(--palette-ivory-100);
  --color-surface-raised: var(--palette-white);
  --color-surface-brand: var(--palette-forest-900);
  --color-surface-brand-tint: var(--palette-forest-100);
  /* color.text */
  --color-text-primary: var(--palette-ink-900);
  --color-text-secondary: var(--palette-ink-700);
  --color-text-subtle: var(--palette-ink-600);
  --color-text-on-brand: var(--palette-ivory-050);
  --color-text-on-brand-secondary: var(--palette-forest-200);
  --color-text-link: var(--palette-forest-700);
  --color-text-accent: var(--palette-clay-600);
  /* color.border */
  --color-border-subtle: var(--palette-stone-300);
  --color-border-control: var(--palette-stone-600);
  --color-border-strong: var(--palette-ink-900);
  /* color.action */
  --color-action-primary-background: var(--palette-forest-700);
  --color-action-primary-background-hover: var(--palette-forest-900);
  --color-action-primary-foreground: var(--palette-ivory-050);
  --color-action-secondary-foreground: var(--palette-forest-700);
  --color-action-accent-background: var(--palette-sun-300);
  --color-action-accent-foreground: var(--palette-ink-900);
  --color-action-disabled-background: var(--palette-neutral-200);
  --color-action-disabled-foreground: var(--palette-neutral-650);
  /* color.focus */
  --color-focus-ring: var(--palette-blue-700);
  --color-focus-ring-on-brand: var(--palette-sun-300);
  /* color.selected */
  --color-selected-background: var(--palette-forest-700);
  --color-selected-foreground: var(--palette-ivory-050);
  /* color.feedback */
  --color-feedback-error: var(--palette-red-700);
  --color-feedback-error-background: var(--palette-red-100);
  --color-feedback-warning: var(--palette-sun-800);
  --color-feedback-warning-background: var(--palette-sun-100);
  --color-feedback-info: var(--palette-blue-700);
  --color-feedback-info-background: var(--palette-blue-100);
  --color-feedback-success: var(--palette-green-700);
  --color-feedback-success-background: var(--palette-green-100);
  /* color.category */
  --color-category-text: var(--palette-ink-900);
  --color-category-background: var(--palette-stone-100);
  --color-category-markets: var(--palette-clay-500);
  --color-category-markets-background: var(--color-category-background);
  --color-category-programmes: var(--palette-lake-700);
  --color-category-programmes-background: var(--color-category-background);
  --color-category-community: var(--palette-heather-500);
  --color-category-community-background: var(--color-category-background);
  --color-category-partnerships: var(--palette-ink-900);
  --color-category-partnerships-background: var(--color-category-background);
  /* color.graphic */
  --color-graphic-path: var(--palette-clay-600);
  --color-graphic-highlight: var(--palette-sun-300);
  --color-graphic-hedge: var(--palette-forest-500);
  /* color.status */
  --color-status-alert-background: var(--palette-red-700);
  --color-status-alert-foreground: var(--palette-white);
  --color-status-caution-background: var(--palette-sun-300);
  --color-status-caution-foreground: var(--palette-ink-900);
  /* font.display */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  /* font.text */
  --font-text: 'Atkinson Hyperlegible Next', 'Segoe UI', Arial, sans-serif;
  /* type.display */
  --type-display-size: clamp(2.5rem, 1.7rem + 3.4vw, 4rem);
  --type-display-line-height: 1.05;
  /* type.h1 */
  --type-h1-size: clamp(2.125rem, 1.7rem + 1.8vw, 3rem);
  --type-h1-line-height: 1.1;
  /* type.h2 */
  --type-h2-size: clamp(1.625rem, 1.4rem + 1vw, 2.125rem);
  --type-h2-line-height: 1.15;
  /* type.h3 */
  --type-h3-size: 1.375rem;
  --type-h3-line-height: 1.3;
  /* type.h4 */
  --type-h4-size: 1.125rem;
  --type-h4-line-height: 1.4;
  /* type.body-lg */
  --type-body-lg-size: 1.25rem;
  --type-body-lg-line-height: 1.55;
  /* type.body */
  --type-body-size: 1.125rem;
  --type-body-line-height: 1.55;
  /* type.body-sm */
  --type-body-sm-size: 1rem;
  --type-body-sm-line-height: 1.5;
  /* type.label */
  --type-label-size: 1rem;
  --type-label-line-height: 1.3;
  /* type.caption */
  --type-caption-size: 0.9375rem;
  --type-caption-line-height: 1.4;
  /* type.weight */
  --type-weight-regular: 400;
  --type-weight-bold: 700;
  --type-weight-display: 600;
  /* type.measure */
  --type-measure: 40rem;
  /* space.0 */
  --space-0: 0px;
  /* space.1 */
  --space-1: 4px;
  /* space.2 */
  --space-2: 8px;
  /* space.3 */
  --space-3: 12px;
  /* space.4 */
  --space-4: 16px;
  /* space.5 */
  --space-5: 24px;
  /* space.6 */
  --space-6: 32px;
  /* space.7 */
  --space-7: 48px;
  /* space.8 */
  --space-8: 64px;
  /* space.9 */
  --space-9: 96px;
  /* layout.container-max */
  --layout-container-max: 1240px;
  /* layout.gutter-mobile */
  --layout-gutter-mobile: var(--space-4);
  /* layout.gutter-tablet */
  --layout-gutter-tablet: var(--space-5);
  /* layout.gutter-desktop */
  --layout-gutter-desktop: var(--space-6);
  /* layout.touch-target */
  --layout-touch-target: 44px;
  /* radius.small */
  --radius-small: 6px;
  /* radius.control */
  --radius-control: 10px;
  /* radius.card */
  --radius-card: 16px;
  /* radius.arch */
  --radius-arch: 999px;
  /* border.hairline */
  --border-hairline: 1px;
  /* border.control */
  --border-control: 2px;
  /* border.focus */
  --border-focus: 3px;
  /* shadow.1 */
  --shadow-1: 0 1px 2px rgba(23,64,47,0.10), 0 2px 8px rgba(23,64,47,0.06);
  /* shadow.2 */
  --shadow-2: 0 12px 32px rgba(23,64,47,0.18);
  /* motion.duration-short */
  --motion-duration-short: 120ms;
  /* motion.duration-medium */
  --motion-duration-medium: 200ms;
  /* motion.duration-long */
  --motion-duration-long: 320ms;
  /* motion.easing-standard */
  --motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  /* motion.easing-exit */
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
}

/* Dark-surface treatment: wrap content placed on color-surface-brand in .on-brand */
.on-brand {
  --color-text-primary: var(--color-text-on-brand);
  --color-text-secondary: var(--color-text-on-brand-secondary);
  --color-text-subtle: var(--color-text-on-brand-secondary);
  --color-text-link: var(--color-text-on-brand);
  --color-text-accent: var(--palette-sun-300);
  --color-focus-ring: var(--color-focus-ring-on-brand);
  --color-border-control: var(--palette-forest-200);
  --color-action-secondary-foreground: var(--color-text-on-brand);
}

/* Pets Avenue SG Design System v1.0 — components.css
   Every value comes from tokens.css (load it first). Status: proposed, not owner-approved.
   Breakpoints (CSS cannot read custom properties in media queries): 600px tablet, 1024px desktop. */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; } /* keeps focused fields clear of the sticky header */
[hidden] { display: none !important; }
.pa-root, body.pa-root {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-text);
  font-size: var(--type-body-size);
  line-height: var(--type-body-line-height);
}
.pa-root img { max-width: 100%; height: auto; display: block; }
.pa-root :where(h1, h2, h3, h4, p, ul, ol, dl, figure) { margin: 0; }
.pa-root :where(h1, h2, h3) { text-wrap: balance; }
:where(.pa-root) h1, .pa-h1 { font: var(--type-weight-display) var(--type-h1-size)/var(--type-h1-line-height) var(--font-display); letter-spacing: -0.005em; }
:where(.pa-root) h2, .pa-h2 { font: var(--type-weight-display) var(--type-h2-size)/var(--type-h2-line-height) var(--font-display); }
:where(.pa-root) h3, .pa-h3 { font: var(--type-weight-bold) var(--type-h3-size)/var(--type-h3-line-height) var(--font-text); }
:where(.pa-root) h4, .pa-h4 { font: var(--type-weight-bold) var(--type-h4-size)/var(--type-h4-line-height) var(--font-text); }
.pa-display { font: var(--type-weight-display) var(--type-display-size)/var(--type-display-line-height) var(--font-display); letter-spacing: -0.01em; }
.pa-lead { font-size: var(--type-body-lg-size); line-height: var(--type-body-lg-line-height); color: var(--color-text-secondary); max-width: var(--type-measure); }
.pa-small { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.pa-eyebrow { font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); font-weight: var(--type-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-accent); }
.pa-measure { max-width: var(--type-measure); }
.pa-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.pa-stack--lg { gap: var(--space-6); }
.pa-cluster { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.pa-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pa-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -0.25em; }

/* Focus: one rule for every interactive element. */
.pa-root :focus-visible { outline: var(--border-focus) solid var(--color-focus-ring); outline-offset: 2px; }
.pa-root :focus:not(:focus-visible) { outline: none; }
.pa-root :is(h1, h2, section, main, [role="status"], [role="alert"])[tabindex="-1"]:focus { outline: none; }

/* ---------- Layout ---------- */
.pa-container { width: 100%; max-width: var(--layout-container-max); margin-inline: auto; padding-inline: max(var(--layout-gutter-mobile), env(safe-area-inset-left, 0px)); }
.pa-section { padding-block: var(--space-7); }
.pa-section--panel { background: var(--color-surface-panel); }
.pa-section--tint { background: var(--color-surface-brand-tint); }
.pa-section--brand { background: var(--color-surface-brand); color: var(--color-text-on-brand); }
.pa-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.pa-grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .pa-container { padding-inline: var(--layout-gutter-tablet); }
  .pa-section { padding-block: var(--space-8); }
  .pa-grid--2, .pa-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pa-container { padding-inline: var(--layout-gutter-desktop); }
  .pa-section { padding-block: var(--space-9); }
  .pa-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Skip link ---------- */
.pa-skip { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--color-surface-raised); color: var(--color-text-primary); padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); font-weight: var(--type-weight-bold); }
.pa-skip:focus { top: var(--space-3); }

/* ---------- Links ---------- */
.pa-link, .pa-prose a { color: var(--color-text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; font-weight: var(--type-weight-bold); }
.pa-link:hover, .pa-prose a:hover { text-decoration-thickness: 3px; }
.pa-link--arrow { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-touch-target); }
.pa-link--arrow .pa-icon { transition: transform var(--motion-duration-short) var(--motion-easing-standard); }
.pa-link--arrow:hover .pa-icon { transform: translateX(3px); }

/* ---------- Buttons ---------- */
.pa-btn {
  --btn-bg: var(--color-action-primary-background); --btn-fg: var(--color-action-primary-foreground); --btn-border: var(--color-action-primary-background);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--layout-touch-target); min-width: var(--layout-touch-target);
  padding: var(--space-2) var(--space-5);
  border: var(--border-control) solid var(--btn-border); border-radius: var(--radius-control);
  background: var(--btn-bg); color: var(--btn-fg);
  font: var(--type-weight-bold) var(--type-label-size)/var(--type-label-line-height) var(--font-text);
  text-decoration: none; cursor: pointer; text-align: center;
  transition: background-color var(--motion-duration-short) var(--motion-easing-standard), border-color var(--motion-duration-short) var(--motion-easing-standard);
}
.pa-btn:hover { --btn-bg: var(--color-action-primary-background-hover); --btn-border: var(--color-action-primary-background-hover); }
.pa-btn:active { transform: translateY(1px); }
.pa-btn--secondary { --btn-bg: transparent; --btn-fg: var(--color-action-secondary-foreground); --btn-border: var(--color-action-secondary-foreground); }
.pa-btn--secondary:hover { --btn-bg: var(--color-surface-brand-tint); --btn-border: var(--color-action-secondary-foreground); }
.on-brand .pa-btn--secondary:hover { --btn-bg: rgba(255,255,255,0.08); }
.pa-btn--accent { --btn-bg: var(--color-action-accent-background); --btn-fg: var(--color-action-accent-foreground); --btn-border: var(--color-action-accent-background); }
.pa-btn--accent:hover { --btn-bg: var(--palette-ivory-050); --btn-border: var(--palette-ivory-050); }
.pa-btn--quiet { --btn-bg: transparent; --btn-fg: var(--color-text-link); --btn-border: transparent; padding-inline: var(--space-3); text-decoration: underline; text-underline-offset: 0.18em; }
.pa-btn--quiet:hover { --btn-bg: var(--color-surface-brand-tint); --btn-border: transparent; }
.pa-btn--block { width: 100%; }
.pa-btn[disabled], .pa-btn[aria-disabled="true"] { --btn-bg: var(--color-action-disabled-background); --btn-fg: var(--color-action-disabled-foreground); --btn-border: var(--color-action-disabled-background); cursor: not-allowed; transform: none; }
.pa-btn.is-loading { cursor: progress; }
.pa-btn .pa-spinner { display: none; }
.pa-btn.is-loading .pa-spinner { display: inline-block; }
.pa-spinner { width: 1.1em; height: 1.1em; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: pa-spin 0.8s linear infinite; }
@keyframes pa-spin { to { transform: rotate(360deg); } }

/* ---------- Header and navigation ---------- */
.pa-header { background: var(--color-surface-page); border-bottom: var(--border-hairline) solid var(--color-border-subtle); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; }
.pa-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 72px; }
.pa-brand { display: inline-flex; align-items: center; min-height: var(--layout-touch-target); border-radius: var(--radius-small); }
.pa-brand img { height: 36px; width: auto; }
.pa-menu-toggle { display: inline-flex; }
.pa-nav { display: none; }
.pa-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--color-surface-raised); box-shadow: var(--shadow-2); border-top: var(--border-hairline) solid var(--color-border-subtle); padding: var(--space-3) max(var(--space-4), env(safe-area-inset-left, 0px)) var(--space-5); }
.pa-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.pa-nav__link { display: flex; align-items: center; min-height: var(--layout-touch-target); padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); color: var(--color-text-primary); text-decoration: none; font-weight: var(--type-weight-bold); }
.pa-nav__link:hover { background: var(--color-surface-panel); }
.pa-nav__link[aria-current="page"] { color: var(--color-text-link); box-shadow: inset 0 -3px 0 var(--color-graphic-path); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.pa-nav__cta { margin-top: var(--space-3); }
@media (min-width: 1024px) {
  .pa-menu-toggle { display: none; }
  .pa-nav, .pa-nav.is-open { display: flex; align-items: center; gap: var(--space-4); position: static; padding: 0; box-shadow: none; border: 0; background: none; }
  .pa-nav__list { flex-direction: row; gap: var(--space-1); }
  .pa-nav__cta { margin-top: 0; }
  .pa-brand img { height: 44px; }
}

/* ---------- Prototype banner ---------- */
.pa-proto { background: var(--palette-sun-300); color: var(--palette-ink-900); font-size: var(--type-body-sm-size); }
.pa-proto .pa-container { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-2); }
.pa-proto strong { font-weight: var(--type-weight-bold); }

/* ---------- Badges: category tags and status ---------- */
/* Category = a squared tag with a category icon. Status = a rounded pill with a status icon. They never share a shape. */
.pa-tag { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-2); border-radius: var(--radius-small); font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); font-weight: var(--type-weight-bold); color: var(--color-category-text); background: var(--color-category-background); }
.pa-tag > .pa-icon { color: var(--tag-icon); }
.pa-tag--markets { --tag-icon: var(--color-category-markets); }
.pa-tag--programmes { --tag-icon: var(--color-category-programmes); }
.pa-tag--community { --tag-icon: var(--color-category-community); }
.pa-tag--partnerships { --tag-icon: var(--color-category-partnerships); }
.pa-tag--sample { color: var(--palette-ink-900); background: transparent; box-shadow: inset 0 0 0 1.5px var(--palette-ink-900); } /* outlined so a concept label never shares the caution status fill */
.pa-status { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px var(--space-3) 2px var(--space-2); border-radius: 999px; border: var(--border-hairline) solid currentColor; font-size: var(--type-caption-size); line-height: var(--type-caption-line-height); font-weight: var(--type-weight-bold); background: var(--status-bg); color: var(--status-fg); }
.pa-status--open { --status-fg: var(--color-feedback-success); --status-bg: var(--color-feedback-success-background); }
.pa-status--full { --status-fg: var(--color-status-alert-foreground); --status-bg: var(--color-status-alert-background); border-color: var(--color-status-alert-background); }
.pa-status--weather, .pa-status--postponed { --status-fg: var(--color-status-caution-foreground); --status-bg: var(--color-status-caution-background); border-color: var(--color-status-caution-background); }
.pa-status--tbc { --status-fg: var(--color-feedback-info); --status-bg: transparent; border-style: dashed; }

/* ---------- Date marker ---------- */
.pa-date { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: var(--space-2) var(--space-2) var(--space-1); border-radius: var(--radius-arch) var(--radius-arch) var(--radius-small) var(--radius-small); background: var(--color-surface-brand); color: var(--color-text-on-brand); text-align: center; line-height: 1.1; }
.pa-date__dow { font-size: var(--type-caption-size); font-weight: var(--type-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-on-brand-secondary); padding-top: var(--space-2); }
.pa-date__day { font: var(--type-weight-display) 1.75rem/1 var(--font-display); }
.pa-date__mon { font-size: var(--type-caption-size); font-weight: var(--type-weight-bold); }

/* ---------- Arch image frame ---------- */
.pa-arch { position: relative; overflow: hidden; border-radius: var(--radius-arch) var(--radius-arch) var(--radius-card) var(--radius-card); background: var(--color-surface-brand-tint); aspect-ratio: 4 / 5; max-width: 100%; }
.pa-arch--wide { aspect-ratio: 4 / 3; border-radius: 40% 40% var(--radius-card) var(--radius-card) / 30% 30% var(--radius-card) var(--radius-card); }
.pa-arch > img, .pa-arch > svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pa-media-missing { display: grid; place-items: center; height: 100%; padding: var(--space-5); text-align: center; color: var(--color-text-secondary); font-size: var(--type-body-sm-size); }

/* ---------- Cards ---------- */
.pa-card { position: relative; display: flex; flex-direction: column; background: var(--color-surface-raised); border: var(--border-hairline) solid var(--color-border-subtle); border-radius: var(--radius-card); overflow: hidden; min-width: 0; }
.pa-card--link { box-shadow: var(--shadow-1); transition: box-shadow var(--motion-duration-short) var(--motion-easing-standard), border-color var(--motion-duration-short) var(--motion-easing-standard); }
.pa-card--link:hover { border-color: var(--color-border-control); box-shadow: var(--shadow-2); }
.pa-card--link:focus-within { outline: var(--border-focus) solid var(--color-focus-ring); outline-offset: 2px; }
.pa-card--link:focus-within :focus-visible { outline: none; }
.pa-card__body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); flex: 1; }
@media (min-width: 600px) { .pa-card__body { padding: var(--space-5); } }
.pa-card__top { display: flex; gap: var(--space-4); align-items: flex-start; }
.pa-card__title { font: var(--type-weight-bold) var(--type-h3-size)/var(--type-h3-line-height) var(--font-text); overflow-wrap: anywhere; }
.pa-card__title a { color: inherit; text-decoration: none; }
.pa-card__title a::after { content: ""; position: absolute; inset: 0; }  /* whole card is the link target */
.pa-card__title a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.pa-card__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; justify-content: space-between; margin-top: auto; padding-top: var(--space-2); }
.pa-meta { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); color: var(--color-text-secondary); }
.pa-meta li { display: flex; gap: var(--space-2); align-items: flex-start; }
.pa-meta .pa-icon { margin-top: 0.15em; color: var(--color-text-primary); }
.pa-card__status { position: relative; z-index: 1; }
.pa-card.is-unavailable { background: var(--color-surface-panel); }

/* Programme card: mobile first, image becomes a side column at 600px inside list view */
.pa-programme { }
.pa-programme__media { aspect-ratio: 16 / 9; background: var(--color-surface-brand-tint); }
.pa-programme__media > * { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 600px) {
  .pa-list .pa-programme { flex-direction: row; }
  .pa-list .pa-programme__media { aspect-ratio: auto; flex: 0 0 34%; }
}

/* ---------- Forms ---------- */
.pa-form { display: flex; flex-direction: column; gap: var(--space-5); max-width: 40rem; }
.pa-field { display: flex; flex-direction: column; gap: var(--space-2); }
.pa-label, .pa-legend { font-weight: var(--type-weight-bold); font-size: var(--type-label-size); line-height: var(--type-label-line-height); color: var(--color-text-primary); }
.pa-legend { padding: 0; margin-bottom: var(--space-2); font-size: var(--type-h4-size); }
.pa-optional { font-weight: var(--type-weight-regular); color: var(--color-text-subtle); }
.pa-hint { font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); color: var(--color-text-subtle); margin-top: calc(var(--space-1) * -1); }
.pa-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pa-input, .pa-select, .pa-textarea {
  width: 100%; min-height: var(--layout-touch-target); padding: var(--space-2) var(--space-3);
  border: var(--border-control) solid var(--color-border-control); border-radius: var(--radius-control);
  background: var(--color-surface-raised); color: var(--color-text-primary);
  font: inherit; font-size: var(--type-body-size);
  transition: border-color var(--motion-duration-short) var(--motion-easing-standard);
}
.pa-input:hover, .pa-select:hover, .pa-textarea:hover { border-color: var(--color-border-strong); }
.pa-input--short { max-width: 8rem; }
.pa-textarea { min-height: 7.5rem; resize: vertical; }
.pa-select { appearance: none; padding-right: var(--space-7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2620' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9.5 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 22px; }
.pa-input:disabled, .pa-select:disabled, .pa-textarea:disabled { background: var(--color-action-disabled-background); color: var(--color-action-disabled-foreground); border-color: var(--color-action-disabled-background); }
[aria-invalid="true"].pa-input, [aria-invalid="true"].pa-select, [aria-invalid="true"].pa-textarea { border-color: var(--color-feedback-error); border-width: var(--border-focus); }
.pa-field.has-error { padding-left: var(--space-4); border-left: 4px solid var(--color-feedback-error); }
.pa-error-msg { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-feedback-error); font-weight: var(--type-weight-bold); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-line-height); }
.pa-error-msg .pa-icon { margin-top: 0.1em; }
.pa-choice { position: relative; display: flex; gap: var(--space-3); align-items: flex-start; min-height: var(--layout-touch-target); padding: var(--space-2) 0; cursor: pointer; }
.pa-choice input { appearance: none; flex: none; width: 28px; height: 28px; margin: 0; border: var(--border-control) solid var(--color-border-control); background: var(--color-surface-raised); border-radius: var(--radius-small); display: grid; place-content: center; cursor: pointer; }
.pa-choice input[type="radio"] { border-radius: 50%; }
.pa-choice input::before { content: ""; width: 14px; height: 14px; transform: scale(0); transition: transform var(--motion-duration-short) var(--motion-easing-standard); background: var(--color-selected-foreground); }
.pa-choice input[type="checkbox"]::before { clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.pa-choice input[type="radio"]::before { border-radius: 50%; }
.pa-choice input:checked { background: var(--color-selected-background); border-color: var(--color-selected-background); }
.pa-choice input:checked::before { transform: scale(1); }
.pa-choice input:hover { border-color: var(--color-border-strong); }
.pa-choice input:focus-visible { outline: var(--border-focus) solid var(--color-focus-ring); outline-offset: 2px; }
.pa-choice__text { padding-top: 2px; }
.pa-choice__text small { display: block; color: var(--color-text-subtle); font-size: var(--type-body-sm-size); }
.pa-error-summary { border: var(--border-focus) solid var(--color-feedback-error); border-radius: var(--radius-card); padding: var(--space-4) var(--space-5); background: var(--color-surface-raised); }
.pa-error-summary h2 { font: var(--type-weight-bold) var(--type-h4-size)/var(--type-h4-line-height) var(--font-text); color: var(--color-feedback-error); display: flex; gap: var(--space-2); align-items: center; }
.pa-error-summary ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.pa-error-summary a { color: var(--color-feedback-error); font-weight: var(--type-weight-bold); }

/* ---------- Filter chips ---------- */
.pa-filters { display: flex; flex-direction: column; gap: var(--space-4); }
.pa-filter-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.pa-filter-group legend { font-weight: var(--type-weight-bold); font-size: var(--type-body-sm-size); margin-bottom: var(--space-2); padding: 0; }
.pa-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.pa-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--layout-touch-target); padding: var(--space-2) var(--space-4); border: var(--border-control) solid var(--color-border-control); border-radius: 999px; background: var(--color-surface-raised); color: var(--color-text-primary); font: var(--type-weight-bold) var(--type-body-sm-size)/1.2 var(--font-text); cursor: pointer; transition: background-color var(--motion-duration-short) var(--motion-easing-standard); }
.pa-chip:hover { border-color: var(--color-border-strong); }
.pa-chip .pa-icon { display: none; }
.pa-chip[aria-pressed="true"] { background: var(--color-selected-background); border-color: var(--color-selected-background); color: var(--color-selected-foreground); }
.pa-chip[aria-pressed="true"] .pa-icon { display: inline-block; }
.pa-results { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; padding-block: var(--space-3); border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
.pa-results__count { font-weight: var(--type-weight-bold); }

/* ---------- Accordion (details/summary) ---------- */
.pa-accordion { border-top: var(--border-hairline) solid var(--color-border-control); }
.pa-accordion details { border-bottom: var(--border-hairline) solid var(--color-border-control); }
.pa-accordion summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); min-height: 56px; padding: var(--space-3) var(--space-1); cursor: pointer; font-weight: var(--type-weight-bold); font-size: var(--type-h4-size); }
.pa-accordion summary::-webkit-details-marker { display: none; }
.pa-accordion summary:hover { color: var(--color-text-link); }
.pa-accordion summary .pa-icon { transition: transform var(--motion-duration-medium) var(--motion-easing-standard); }
.pa-accordion details[open] summary .pa-icon { transform: rotate(180deg); }
.pa-accordion__panel { padding: 0 var(--space-1) var(--space-5); color: var(--color-text-secondary); max-width: var(--type-measure); }

/* ---------- Alerts and notices ---------- */
.pa-alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border-radius: var(--radius-card); background: var(--alert-bg); color: var(--color-text-primary); border: var(--border-control) solid var(--alert-fg); }
.pa-alert > .pa-icon { color: var(--alert-fg); width: 28px; height: 28px; }
.pa-alert__title { font-weight: var(--type-weight-bold); color: var(--alert-fg); }
.pa-alert__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.pa-alert--info { --alert-fg: var(--color-feedback-info); --alert-bg: var(--color-feedback-info-background); }
.pa-alert--warning { --alert-fg: var(--color-feedback-warning); --alert-bg: var(--color-feedback-warning-background); }
.pa-alert--error { --alert-fg: var(--color-feedback-error); --alert-bg: var(--color-feedback-error-background); }
.pa-alert--success { --alert-fg: var(--color-feedback-success); --alert-bg: var(--color-feedback-success-background); }

/* ---------- Empty state ---------- */
.pa-empty { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6) var(--space-5); border: var(--border-control) dashed var(--color-border-control); border-radius: var(--radius-card); background: var(--color-surface-panel); }

/* ---------- Avenue path graphic (signature) ---------- */
.pa-path { display: block; width: 100%; height: 40px; color: var(--color-graphic-path); }
.pa-path-divider { display: flex; align-items: center; gap: var(--space-2); color: var(--color-graphic-path); }
.pa-path-divider::before { content: ""; flex: 1; border-top: 3px dotted currentColor; }
.pa-path-divider::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: currentColor; }

/* ---------- Facts list (visit info, programme detail) ---------- */
.pa-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; border-top: var(--border-hairline) solid var(--color-border-control); }
.pa-facts > div { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding-block: var(--space-4); border-bottom: var(--border-hairline) solid var(--color-border-control); }
.pa-facts dt { font-weight: var(--type-weight-bold); display: flex; gap: var(--space-2); align-items: center; }
.pa-facts dd { margin: 0; color: var(--color-text-secondary); }
/* Label column appears only when the list itself is wide enough (container query), so it also works in narrow sidebars and at 200% text. */
.pa-facts { container-type: inline-size; }
@container (min-width: 34rem) { .pa-facts > div { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--space-5); } }
.pa-tbc { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border: var(--border-hairline) dashed var(--color-feedback-info); border-radius: var(--radius-small); color: var(--color-feedback-info); background: var(--color-feedback-info-background); font-size: var(--type-body-sm-size); font-weight: var(--type-weight-bold); }

/* ---------- Opportunity card (vendors and partners) ---------- */
.pa-opportunity .pa-card__body { gap: var(--space-4); }
.pa-opportunity__icon { width: 56px; height: 56px; border-radius: var(--radius-arch) var(--radius-arch) var(--radius-small) var(--radius-small); display: grid; place-items: center; background: var(--color-surface-brand-tint); color: var(--color-text-link); }
.pa-opportunity__icon .pa-icon { width: 28px; height: 28px; }
.pa-opportunity dl { margin: 0; display: grid; gap: var(--space-2); font-size: var(--type-body-sm-size); }
.pa-opportunity dt { font-weight: var(--type-weight-bold); }
.pa-opportunity dd { margin: 0 0 var(--space-2); color: var(--color-text-secondary); }

/* ---------- Impact module ---------- */
.pa-impact { display: grid; gap: var(--space-5); }
@media (min-width: 1024px) { .pa-impact { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: start; } }
.pa-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); counter-reset: flow; }
.pa-flow li { counter-increment: flow; display: grid; grid-template-columns: 44px 1fr; gap: var(--space-3); align-items: start; }
.pa-flow li::before { content: counter(flow); width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--color-surface-brand); color: var(--color-text-on-brand); font: var(--type-weight-display) 1.25rem/1 var(--font-display); }
.pa-evidence { background: var(--color-surface-raised); border: var(--border-control) dashed var(--color-border-control); border-radius: var(--radius-card); padding: var(--space-5); display: grid; gap: var(--space-3); }
.pa-evidence__label { font-size: var(--type-caption-size); font-weight: var(--type-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-subtle); }

/* ---------- Footer ---------- */
.pa-footer { background: var(--color-surface-brand); color: var(--color-text-on-brand); padding-block: var(--space-7); }
.pa-footer a { color: var(--color-text-on-brand); }
.pa-footer__grid { display: grid; gap: var(--space-6); }
@media (min-width: 600px) { .pa-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pa-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.pa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.pa-footer ul a { display: inline-flex; min-height: var(--layout-touch-target); align-items: center; }

/* ---------- Sticky enquiry bar (mobile detail page) ---------- */
.pa-stickybar { position: sticky; bottom: 0; z-index: 10; background: var(--color-surface-raised); box-shadow: var(--shadow-2); padding: var(--space-3) max(var(--space-4), env(safe-area-inset-left, 0px)) calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; }
@media (min-width: 1024px) { .pa-stickybar { display: none; } }

/* ---------- Motion preference (project rule; WCAG 2.3.3 is AAA) ---------- */
@media (prefers-reduced-motion: reduce) {
  .pa-root *, .pa-root *::before, .pa-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .pa-link--arrow:hover .pa-icon, .pa-btn:active { transform: none; }
  .pa-spinner { animation: none; border-right-color: currentColor; opacity: 0.6; }
}
@media (forced-colors: active) {
  .pa-chip[aria-pressed="true"] { outline: 3px solid CanvasText; }
  .pa-tag, .pa-status, .pa-btn { border: 1px solid CanvasText; }
}

/* Pets Avenue SG website: page layout and scroll scenes. Colour, type and components come from tokens.css and components.css.
   Without .js-motion (reduced motion, or the script did not start) every scene is a plain, readable section. */
html { scroll-padding-top: 88px; }
body { overflow-x: clip; }

.mega { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.75rem, 8vw, 7.5rem); line-height: 0.98; letter-spacing: -0.02em; overflow-wrap: break-word; text-wrap: balance; }
.section-title { display: grid; gap: var(--space-2); }

/* ---------- Header: transparent over the gate, solid after ---------- */
.site-header { position: sticky; top: 0; z-index: 30; transition: background-color var(--motion-duration-medium) var(--motion-easing-standard), box-shadow var(--motion-duration-medium) var(--motion-easing-standard); }
.pa-brand .logo-dark { display: none; }
.js-motion .site-header { position: fixed; left: 0; right: 0; }
.js-motion .site-header:not(.is-solid) { background: transparent; box-shadow: none; border-color: transparent; }
@media (min-width: 1024px) {
  .js-motion .site-header:not(.is-solid) .pa-nav__link { color: var(--palette-ivory-050); }
  .js-motion .site-header:not(.is-solid) .pa-nav__link:hover { background: rgba(255, 255, 255, 0.1); }
  .js-motion .site-header:not(.is-solid) .pa-nav__cta { --btn-bg: var(--palette-sun-300); --btn-fg: var(--palette-ink-900); --btn-border: var(--palette-sun-300); }
}
.js-motion .site-header:not(.is-solid) .pa-brand .logo-light { display: none; }
.js-motion .site-header:not(.is-solid) .pa-brand .logo-dark { display: block; }
.js-motion .site-header:not(.is-solid) .pa-menu-toggle { --btn-fg: var(--palette-ivory-050); --btn-border: var(--palette-ivory-050); --btn-bg: transparent; }

/* ---------- 1. Gate ---------- */
.gate { background: var(--palette-forest-900); color: var(--palette-ivory-050); position: relative; }
.gate__sticky { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: 120px 80px; }
.gate__canvas { display: none; }
.gate__fallback { position: absolute; right: max(16px, 6vw); bottom: 10%; width: min(44vw, 520px); height: auto; opacity: 0.9; }
.gate__glow { display: none; }
.gate__copy { position: relative; z-index: 2; display: grid; gap: var(--space-7); }
.gate__frame { display: grid; gap: var(--space-4); justify-items: start; }
.gate__frame .mega { max-width: 9em; }
.gate .pa-eyebrow { color: var(--palette-sun-300); }
.gate .mega { text-shadow: 0 2px 28px rgba(23, 64, 47, 0.75); }
@media (min-width: 1024px) { .js-motion .gate__frame { right: auto; max-width: 48vw; } .js-motion .gate .mega { font-size: clamp(3rem, 5.6vw, 6rem); } }
.scroll-cue { display: none; }

.js-motion .gate { height: 420vh; }
.js-motion .gate__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; }
.js-motion .gate__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.js-motion .gate__fallback { display: none; }
.js-motion .gate__glow { display: block; position: absolute; inset: 0; background: radial-gradient(circle at 50% 55%, var(--palette-sun-300) 0%, var(--palette-ivory-050) 60%); opacity: 0; pointer-events: none; z-index: 1; }
.js-motion .gate__copy { position: absolute; inset: 0; padding-block: 120px 96px; align-content: end; }
.js-motion .gate__frame { position: absolute; left: var(--space-4); right: var(--space-4); bottom: 10vh; }
@media (min-width: 600px) { .js-motion .gate__frame { left: var(--space-6); right: var(--space-6); } }
@media (min-width: 1024px) { .js-motion .gate__frame { left: var(--space-7); right: var(--space-7); } }
.js-motion .gate__frame:not([data-frame="1"]) { opacity: 0; visibility: hidden; }
.js-motion .scroll-cue { display: flex; position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; flex-direction: column; align-items: center; gap: 8px; font-size: var(--type-body-sm-size); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--palette-ivory-050); }
.js-motion .scroll-cue::after { content: ""; width: 2px; height: 40px; background: linear-gradient(var(--palette-sun-300), transparent); animation: cue 1.6s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- 2. Rail ---------- */
.rail__track { display: grid; }
.rail__panel { min-height: 80svh; display: grid; align-content: center; gap: var(--space-6); padding: 96px max(var(--space-4), 6vw); position: relative; overflow: hidden; }
.rail__panel--forest { background: var(--palette-forest-700); color: var(--palette-ivory-050); }
.rail__panel--clay { background: var(--palette-clay-600); color: var(--palette-ivory-050); }
.rail__panel--sand { background: var(--palette-ivory-100); color: var(--palette-ink-900); }
.rail__text { display: grid; gap: var(--space-4); max-width: 34rem; position: relative; z-index: 1; }
.rail__text p { font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.35; }
.rail__num { font-family: var(--font-display); font-size: 1.5rem; color: var(--palette-sun-300); }
.rail__panel--sand .rail__num { color: var(--palette-clay-600); }
.rail__icon { position: absolute; right: -4vw; bottom: -6vh; width: min(70vw, 62vh); height: min(70vw, 62vh); opacity: 0.16; color: currentColor; }
.js-motion .rail { overflow: hidden; }
.js-motion .rail__track { display: flex; width: max-content; height: 100vh; height: 100svh; }
.js-motion .rail__panel { width: 100vw; height: 100%; min-height: 0; flex: none; }

/* ---------- 3. Place ---------- */
.place { background: var(--palette-ivory-050); position: relative; }
.place__sticky { position: relative; min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: 96px; }
.place__path { position: absolute; inset: 0; width: 100%; height: 100%; }
.place__dots { stroke: var(--palette-clay-500); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.1 22; vector-effect: non-scaling-stroke; }
.place__mask { stroke-dasharray: 3000; stroke-dashoffset: 0; }
.place__sun { fill: var(--palette-sun-300); }
.place__inner { position: relative; z-index: 1; display: grid; gap: var(--space-8); }
.place__head { display: grid; gap: var(--space-3); }
.place__head .mega { max-width: 8em; }
.place__stats { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .place__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.stat { display: grid; gap: var(--space-1); }
.stat__n { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 6vw, 5rem); line-height: 1; color: var(--palette-forest-900); font-variant-numeric: tabular-nums; }
.stat__l { font-size: 1.125rem; color: var(--color-text-secondary); max-width: 18rem; }
.js-motion .place { height: 300vh; }
.js-motion .place__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 88px 48px; }
.js-motion .place__mask { stroke-dashoffset: 3000; }

/* ---------- 4. What's on ---------- */
.whats-on { padding-block: clamp(96px, 14vh, 160px); }
.events { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .events { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.event__body { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); }
.event .pa-card__title a { color: inherit; }
.news { display: grid; gap: var(--space-3); max-width: 48rem; }
.updates { list-style: none; margin: 0; padding: 0; display: grid; }
.update { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-top: var(--border-hairline) solid var(--color-border-subtle); }
.update:last-child { border-bottom: var(--border-hairline) solid var(--color-border-subtle); }
.update__date { font-size: var(--type-body-sm-size); color: var(--color-text-subtle); font-weight: 700; }

/* ---------- 5. Visit ---------- */
.visit { padding-block: clamp(96px, 14vh, 160px); }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.tile { background: var(--color-surface-raised); border-radius: 999px 999px var(--radius-card) var(--radius-card) / 72px 72px var(--radius-card) var(--radius-card); padding: var(--space-6) var(--space-5) var(--space-5); display: grid; gap: var(--space-2); align-content: start; }
.tile .pa-icon { width: 40px; height: 40px; color: var(--palette-clay-600); }
.tile__t { font-weight: 700; font-size: 1.25rem; }

/* ---------- 6. Vendors ---------- */
.vendors { background: var(--palette-forest-900); color: var(--palette-ivory-050); position: relative; }
.vendors__sticky { min-height: 100svh; display: grid; align-items: center; overflow: hidden; padding-block: 96px; }
.vendors__inner { display: grid; gap: var(--space-5); }
.vendors .pa-eyebrow { color: var(--palette-sun-300); }
.vendors__title { font-size: clamp(3.5rem, 13vw, 11rem); }
.cloud { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: 56rem; }
.cloud li { padding: 10px 20px; border-radius: 999px; border: 2px solid var(--palette-forest-300); font-size: clamp(1.125rem, 2vw, 1.5rem); font-weight: 700; }
.cloud li:nth-child(3n+1) { background: var(--palette-sun-300); border-color: var(--palette-sun-300); color: var(--palette-ink-900); }
.vendors__end { display: grid; gap: var(--space-4); }
.vendors__line { font-size: clamp(1.25rem, 2.2vw, 1.75rem); max-width: 36rem; }
.vendors__rules { color: var(--color-text-secondary); }
.js-motion .vendors { height: 260vh; }
.js-motion .vendors__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: 88px 32px; }

/* ---------- 7-9 ---------- */
.partners__inner { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 900px) { .partners__inner { grid-template-columns: 1fr auto; } }
.faq { max-width: 48rem; }
.contact { background: var(--palette-forest-700); color: var(--palette-ivory-050); min-height: 100svh; display: grid; align-items: center; padding-block: 96px; }
.contact__inner { display: grid; gap: var(--space-7); align-items: center; }
@media (min-width: 1024px) { .contact__inner { grid-template-columns: 1.2fr 0.8fr; } }
.contact__title { font-size: clamp(3.5rem, 12vw, 10rem); }
.contact__title .w { display: inline-block; white-space: nowrap; }
.contact__title .ch { display: inline-block; }
.contact__card { background: rgba(255, 255, 255, 0.06); border: var(--border-hairline) solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-card); padding: var(--space-5); display: grid; gap: var(--space-2); max-width: 26rem; width: 100%; }
.contact__name { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }
.contact__role { color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.pa-footer { position: relative; z-index: 1; }
@media (max-width: 599px) { .gate__fallback { display: none; } }