/* Self-hosted web fonts. Both families are SIL Open Font License 1.1 (licences in /assets/fonts). Only the woff2 files we use ship. */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* atkinson-hyperlegible-latin-ext-700-normal */
@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(/assets/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* instrument-serif-latin-ext-400-normal */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* instrument-serif-latin-ext-400-italic */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-ext-400-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-display: swap;
  font-weight: 400;
  src: url(/assets/fonts/instrument-serif-latin-400-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* AAC website, bright clinical pass.
   Layout idea: light floating-pill hero with tilted photo panels, blush page headers, near-white reading surface,
   one maroon band to close each page.
   Single look by choice: every colour is set explicitly and color-scheme is light.
   Colours are the five approved brand colours plus one label shade used only behind photo captions.
   Approved text pairs: maroon and charcoal on near-white, off-white and blush; near-white and off-white on maroon;
   blush on maroon; charcoal on blush buttons.
   Type: two families. Atkinson Hyperlegible (designed for low-vision readers) for body text, navigation, forms and all
   interface; Instrument Serif for page headlines and brand statements only, in one weight, at large sizes.
   The brand faces (Perandory, Amsterdam Four) are not licensed for web use and are not used. */

:root {
  --char: #2A2A2A;
  --maroon: #4D2A28;
  --blush: #E7C5B8;
  --off: #F3F0EB;
  --near: #FAFBF8;
  --label: #281514;
  --font: 'Atkinson Hyperlegible', 'Segoe UI', system-ui, -apple-system, Roboto, 'Helvetica Neue', Arial, sans-serif;
  --display: var(--font);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --scrim: rgba(40, 21, 20, 0.88);
  --gx: clamp(16px, 4vw, 48px);
  --r: 20px;
  color-scheme: light;
  padding-block: env(safe-area-inset-top, 0px) env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  margin: 0; background: var(--near); color: var(--char);
  font: 400 18px/1.65 var(--font); -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
ul, ol { padding: 0; list-style: none; }
strong { font-weight: 700; }
em, i, cite { font-style: normal; }
h1 em { font-style: italic; }

:focus-visible { outline: 3px solid var(--blush); outline-offset: 3px; box-shadow: 0 0 0 3px var(--label); }

.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 100;
  background: var(--near); color: var(--maroon); border: 2px solid var(--maroon);
  font: 700 17px/1.2 var(--font); padding: 14px 22px; border-radius: 999px;
}
.skip:focus { left: 16px; }

.wrap {
  max-width: 1400px; margin: 0 auto;
  padding-left: max(var(--gx), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gx), env(safe-area-inset-right, 0px));
}

/* ---------- section grounds: each one sets the colours its content reads from ---------- */
.sec, .hero, .page-hero {
  --fg: var(--char); --head: var(--maroon); --acc: var(--maroon); --rule: rgba(77, 42, 40, 0.3);
  --chip-bg: var(--blush); --chip-fg: var(--maroon);
  color: var(--fg);
}
.sec { padding-block: clamp(64px, 8vw, 112px); background: var(--bg, var(--near)); }
.sec-off { --bg: var(--off); }
.sec-near { --bg: var(--near); }
.sec-blush { --bg: var(--blush); --chip-bg: var(--near); }
.sec-maroon {
  --bg: var(--maroon); --fg: var(--off); --head: var(--near); --acc: var(--blush);
  --rule: rgba(243, 240, 235, 0.35); --chip-bg: var(--blush); --chip-fg: var(--maroon);
}
.sec h2 { font-size: clamp(34px, 4vw, 56px); color: var(--head); }
.sec h3 { font-size: clamp(21px, 1.9vw, 27px); color: var(--head); }
/* headlines: Instrument Serif, one weight, large sizes only. Card titles, form summaries and small headings stay in Atkinson. */
.hero h1, .page-hero h1, .fb h1, .fb h2, .sec h2, .cta-final h2, .tsec h2 { font-family: var(--serif); font-weight: 400; letter-spacing: 0; line-height: 1.06; }
.svc-card h2, .summary h2, .send-error h2, .sent h2, .toc h2 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; }
.prose > * + * { margin-top: 1em; }
.prose { max-width: 66ch; }
.sec-head { max-width: 760px; margin-bottom: clamp(32px, 4.5vw, 56px); }
.sec-head > * + * { margin-top: 18px; }
.lead { font-size: clamp(19px, 1.5vw, 21px); line-height: 1.6; max-width: 62ch; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.split.top { align-items: start; }
.stack > * + * { margin-top: 22px; }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--acc); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.placeholder-note { font-size: 16px; }

/* ---------- floating pill nav (light) ---------- */
.site-header { position: fixed; top: max(16px, env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 60; pointer-events: none; }
.pill {
  pointer-events: auto; position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 28px;
  border: 1px solid rgba(77, 42, 40, 0.28); border-radius: 999px;
  background: rgba(250, 251, 248, 0.96);
  box-shadow: 0 12px 32px rgba(77, 42, 40, 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--char);
}
.brand { margin-right: auto; padding: 4px 6px 4px 0; font: 700 30px/1 var(--display); letter-spacing: 0.02em; color: var(--maroon); text-decoration: none; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links > li { position: relative; }
.nav-links a, .menu-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 16px; border-radius: 999px; border: 0; background: none; cursor: pointer;
  font: 400 17px/1.2 var(--font); color: var(--char); text-decoration: none;
}
.nav-links a:hover, .menu-btn:hover { background: rgba(77, 42, 40, 0.09); }
.nav-links a[aria-current="page"], .menu-btn.is-current { font-weight: 700; color: var(--maroon); text-decoration: underline; text-decoration-color: var(--maroon); text-decoration-thickness: 2px; text-underline-offset: 7px; }
.menu-btn .ico { transition: transform 0.2s; }
.menu-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.menu {
  display: none; position: absolute; top: calc(100% + 18px); left: -12px; min-width: 320px;
  flex-direction: column; padding: 10px;
  border: 1px solid rgba(77, 42, 40, 0.28); border-radius: 24px; background: var(--near);
  box-shadow: 0 18px 40px rgba(77, 42, 40, 0.18);
}
.menu[data-open="true"] { display: flex; }
html:not(.js) .has-menu:hover .menu, html:not(.js) .has-menu:focus-within .menu { display: flex; }
.menu a { padding: 10px 16px; border-radius: 14px; font-size: 16px; white-space: nowrap; }
.menu a.menu-all { color: var(--maroon); font-weight: 700; }
.nav-toggle {
  display: none; align-items: center; gap: 8px; min-height: 46px; padding: 10px 20px;
  border: 2px solid var(--maroon); border-radius: 999px; background: none; cursor: pointer;
  font: 700 16px/1.2 var(--font); color: var(--maroon);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 12px 30px; border-radius: 999px; border: 2px solid transparent;
  font: 700 17px/1.2 var(--font); text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.btn .ico { flex: none; }
.btn-dark { background: var(--maroon); color: var(--near); }
.btn-dark:hover { background: #3C201E; }
.btn-line { border-color: var(--maroon); color: var(--maroon); }
.btn-line:hover { background: rgba(77, 42, 40, 0.09); }
.btn-primary { background: var(--blush); color: var(--char); }
.btn-primary:hover { background: #F0D5CA; }
.btn-ghost { border-color: var(--off); color: var(--off); }
.btn-ghost:hover { background: rgba(243, 240, 235, 0.14); }
.nav-cta { min-height: 48px; padding: 10px 24px; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- heroes ---------- */
.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero {
  padding-top: clamp(128px, 14vw, 176px); padding-bottom: clamp(64px, 7vw, 104px);
  background:
    radial-gradient(900px 640px at 100% 0%, rgba(231, 197, 184, 0.85) 0%, rgba(231, 197, 184, 0) 62%),
    radial-gradient(800px 520px at 0% 100%, rgba(231, 197, 184, 0.5) 0%, rgba(231, 197, 184, 0) 62%),
    var(--near);
}
.page-hero {
  padding-top: clamp(128px, 13vw, 168px); padding-bottom: clamp(48px, 6vw, 88px);
  background: radial-gradient(760px 480px at 0% 0%, rgba(250, 251, 248, 0.6) 0%, rgba(250, 251, 248, 0) 62%), var(--blush);
  --chip-bg: var(--near);
}
.hero .wrap, .page-hero .wrap { position: relative; z-index: 2; }
.hero-copy { max-width: min(47%, 680px); }
.hero h1 { font-size: clamp(44px, 5.4vw, 80px); color: var(--maroon); }
.hero h1 .accent { background: linear-gradient(transparent 60%, var(--blush) 60%, var(--blush) 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero .lead { margin: 26px 0 34px; max-width: 54ch; }
.chips-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.chips-row a { display: inline-flex; align-items: center; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--maroon); color: var(--maroon); font: 700 16px/1.3 var(--font); text-decoration: none; background: rgba(250, 251, 248, 0.7); }
.chips-row a:hover { background: var(--blush); }
.hero-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.page-hero h1 { font-size: clamp(40px, 5.2vw, 76px); color: var(--maroon); }
.page-hero .lead { margin: 22px 0 30px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 20px; font-size: 16px; }
.crumbs li + li::before { content: "/"; content: "/" / ""; margin-right: 10px; color: var(--maroon); }
.crumbs a { color: var(--maroon); text-underline-offset: 4px; }

/* tilted drifting photo columns */
.stage {
  --gap: clamp(12px, 1.5vw, 22px);
  position: absolute; z-index: 1; top: -6%; bottom: -6%; right: -8%; width: 57%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: var(--gap);
  transform: perspective(1500px) rotateX(8deg) rotateY(-16deg) rotateZ(-7deg);
  transform-origin: 60% 50%; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 84%, transparent 100%);
}
.col { overflow: hidden; height: 100%; }
.col:nth-child(1) { margin-top: -5%; }
.col:nth-child(2) { margin-top: 7%; }
.col:nth-child(3) { margin-top: -1%; }
.track { display: flex; flex-direction: column; gap: var(--gap); animation: drift 50s linear infinite; will-change: transform; }
.col:nth-child(2) .track { animation-direction: reverse; animation-duration: 58s; }
.col:nth-child(3) .track { animation-duration: 66s; }
@keyframes drift { to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
.stage[data-paused="true"] .track { animation-play-state: paused; }
.card { position: relative; flex: none; width: 100%; border-radius: var(--r); overflow: hidden; box-shadow: 0 22px 50px rgba(77, 42, 40, 0.26); }
.motion-btn {
  position: absolute; z-index: 3; bottom: 24px; right: max(var(--gx), env(safe-area-inset-right, 0px));
  min-height: 46px; padding: 10px 20px; border-radius: 999px; cursor: pointer;
  border: 2px solid var(--maroon); background: var(--near); color: var(--maroon);
  font: 700 16px/1.2 var(--font);
}
.motion-btn[aria-pressed="true"] { background: var(--maroon); color: var(--near); }
@media (prefers-reduced-motion: reduce) {
  .track { animation: none; }
  .motion-btn { display: none; }
  html { scroll-behavior: auto; }
}

/* photo placeholders: swap the figure for an <img class="ph-img"> once the shoot delivers */
.ph {
  position: relative; display: block; width: 100%; height: 100%; margin: 0; overflow: hidden;
  border-radius: var(--r); background: linear-gradient(160deg, #E7C5B8, #A66A63);
}
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 72% 24%, rgba(255, 255, 255, 0.45) 0, rgba(255, 255, 255, 0) 46%),
    radial-gradient(circle at 18% 92%, rgba(77, 42, 40, 0.28) 0, rgba(77, 42, 40, 0) 56%);
}
.ph-tag {
  position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  background: var(--label); color: var(--near); border-radius: 999px;
  font: 400 14px/1.3 var(--font); padding: 6px 13px;
}
.ph-img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r); }
.g1 { background-image: linear-gradient(160deg, #F4D8CD, #C48E84); }
.g2 { background-image: linear-gradient(160deg, #E7C5B8, #A66A63); }
.g3 { background-image: linear-gradient(160deg, #D9ADA6, #8A4E4A); }
.g4 { background-image: linear-gradient(160deg, #EBCABE, #B27B73); }
.g5 { background-image: linear-gradient(160deg, #FAFBF8, #E7C5B8); }
.g6 { background-image: linear-gradient(160deg, #C9A29B, #6E3E3B); }

/* pair of tilted photos */
.pair { position: relative; width: 100%; max-width: 540px; aspect-ratio: 1 / 0.92; margin-left: auto; }
.pair .p1 { position: absolute; left: 0; top: 4%; width: 56%; aspect-ratio: 4 / 5; transform: rotate(-7deg); }
.pair .p2 { position: absolute; right: 0; bottom: 0; width: 52%; aspect-ratio: 3 / 4; transform: rotate(5deg); }
.pair .p1, .pair .p2 { border-radius: var(--r); box-shadow: 0 22px 50px rgba(77, 42, 40, 0.26); }
.pair.left { margin-left: 0; margin-right: auto; }

/* ---------- full-bleed photograph: hero and band ----------
   One shape, two sizes. The photograph runs edge to edge. Every word sits on a solid dark panel (the scrim), never on the
   photograph itself. data-side says which side the panel is on; on a phone the panel runs along the bottom. */
.fb {
  --fg: var(--off); --head: var(--near); --acc: var(--blush); --rule: rgba(243, 240, 235, 0.35);
  --chip-bg: var(--blush); --chip-fg: var(--maroon);
  position: relative; isolation: isolate; overflow: hidden; display: flex;
  background: var(--label); color: var(--fg);
}
.fb[data-side="right"] { justify-content: flex-end; }
.fb-media { position: absolute; inset: 0; z-index: 0; }
.fb-media .ph, .fb-media .ph-img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; }
.fb-media .ph-tag { left: auto; right: 24px; bottom: 24px; }
.fb[data-side="right"] .fb-media .ph-tag { left: 24px; right: auto; }
.fb-scrim { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; background: var(--scrim); }
.fb-copy { max-width: 600px; }
.fb-copy > * + * { margin-top: 24px; }
.fb h1, .fb h2 { color: var(--head); }
.fb .lead { color: var(--fg); }
.fb .chips-row { margin-bottom: 0; }
.fb .chips-row a { background: transparent; border-color: var(--off); color: var(--off); }
.fb .chips-row a:hover { background: var(--blush); border-color: var(--blush); color: var(--maroon); }
.fb-hero { min-height: clamp(640px, 90vh, 900px); }
.fb-hero .fb-scrim {
  width: 52%; min-width: 560px;
  padding: clamp(136px, 14vw, 184px) clamp(28px, 4vw, 64px) clamp(56px, 6vw, 96px) max(var(--gx), calc((100% - 1400px) / 2 + var(--gx)));
}
.fb-hero h1 { font-size: clamp(44px, 4.8vw, 74px); }
.fb-band { min-height: clamp(400px, 38vw, 520px); }
.fb-band .fb-scrim {
  width: 50%; min-width: 520px;
  padding: clamp(56px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(56px, 6vw, 88px) max(var(--gx), calc((100% - 1400px) / 2 + var(--gx)));
}
.fb-band[data-side="right"] .fb-scrim { padding-left: clamp(28px, 4vw, 64px); padding-right: max(var(--gx), calc((100% - 1400px) / 2 + var(--gx))); }
.fb-band h2 { font-size: clamp(36px, 3.8vw, 56px); }

/* ---------- statements band ---------- */
.statements { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.statements p { font: 400 clamp(32px, 3.5vw, 52px)/1.08 var(--serif); color: var(--maroon); }

/* ---------- services with tilted preview ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.srow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center;
  padding: 26px 0; border-top: 1px solid var(--rule); text-decoration: none; color: var(--maroon);
}
.srow:last-child { border-bottom: 1px solid var(--rule); }
.srow-title { font: 700 clamp(21px, 2.1vw, 28px)/1.2 var(--display); }
.srow-desc { grid-column: 1; max-width: 54ch; color: var(--char); font-size: 17px; line-height: 1.55; }
.srow .ico { grid-column: 2; grid-row: 1; }
.srow:hover .srow-title, .srow.is-active .srow-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.preview { position: sticky; top: 120px; width: 100%; max-width: 440px; margin-left: auto; aspect-ratio: 4 / 5; }
.pcard { position: absolute; inset: 0; opacity: 0; transform: rotate(-2deg) scale(0.95); transition: opacity 0.35s, transform 0.35s; border-radius: 26px; box-shadow: 0 26px 56px rgba(77, 42, 40, 0.26); }
.pcard .ph, .pcard .ph-img { border-radius: 26px; }
.pcard.is-on { opacity: 1; transform: rotate(-5deg) scale(1); }
@media (prefers-reduced-motion: reduce) { .pcard { transition: none; } }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: clamp(24px, 3vw, 44px); }
.step-n { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; margin-bottom: 18px; background: var(--acc); color: var(--bg); font: 700 22px/1 var(--font); }
.step h3 { margin-bottom: 10px; }

/* ---------- why ---------- */
.why { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.why-left { position: sticky; top: 120px; }
.why-item { padding-block: 28px; border-top: 1px solid var(--rule); }
.why-item:last-child { border-bottom: 1px solid var(--rule); }
.why-item h3 { font-size: clamp(21px, 2.2vw, 28px); margin-bottom: 10px; }
.why-item p { max-width: 58ch; }

.trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(28px, 4vw, 56px); }
.trio > * > * + * { margin-top: 14px; }

/* ---------- lists ---------- */
.chiplist { display: flex; flex-wrap: wrap; gap: 12px; }
.chiplist li { padding: 10px 20px; border-radius: 12px; background: var(--chip-bg); color: var(--chip-fg); font: 400 18px/1.35 var(--font); }
.path { display: flex; flex-wrap: wrap; gap: 14px; counter-reset: p; }
.path li { counter-increment: p; display: flex; align-items: center; gap: 12px; padding: 10px 22px 10px 12px; border-radius: 999px; background: var(--chip-bg); color: var(--maroon); font: 400 18px/1.3 var(--font); }
.path li::before { content: counter(p); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--maroon); color: var(--near); font: 700 16px/1 var(--font); }
.big-list > li { position: relative; padding: 22px 0 22px 52px; border-top: 1px solid var(--rule); font: 700 clamp(21px, 2.3vw, 30px)/1.25 var(--display); color: var(--head); }
.big-list > li:last-child { border-bottom: 1px solid var(--rule); }
.big-list > li::before { content: ""; position: absolute; left: 6px; top: 32px; width: 20px; height: 11px; border-left: 4px solid var(--acc); border-bottom: 4px solid var(--acc); transform: rotate(-45deg); }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 64px); }
.values h3 { margin-bottom: 8px; }
.checks > li { position: relative; padding: 14px 0 14px 40px; border-top: 1px solid var(--rule); }
.checks > li:last-child { border-bottom: 1px solid var(--rule); }
.checks > li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 16px; height: 9px; border-left: 3px solid var(--acc); border-bottom: 3px solid var(--acc); transform: rotate(-45deg); }

/* team */
.team { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: clamp(28px, 3vw, 44px); }
.member .arch { aspect-ratio: 4 / 5; margin-bottom: 18px; }
.member .arch .ph, .member .arch .ph-img { border-radius: 999px 999px var(--r) var(--r); }
.member h3 { font-size: 24px; }
.member .role { font-weight: 700; color: var(--maroon); }

/* services overview grid */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(36px, 4vw, 56px) clamp(24px, 3vw, 40px); }
.svc-card { display: flex; flex-direction: column; gap: 16px; text-decoration: none; color: var(--maroon); }
.svc-card .shot { aspect-ratio: 4 / 3; transition: transform 0.3s; }
.svc-card:nth-child(odd) .shot { transform: rotate(-1.6deg); }
.svc-card:nth-child(even) .shot { transform: rotate(1.6deg); }
.svc-card .shot .ph { border-radius: var(--r); box-shadow: 0 18px 40px rgba(77, 42, 40, 0.2); }
.svc-card h2 { font-size: clamp(21px, 2vw, 27px); color: var(--maroon); }
.svc-card p { color: var(--char); font-size: 17px; line-height: 1.55; }
.svc-card .more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.svc-card:hover h2 { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.svc-card:hover .shot { transform: rotate(0deg); }
@media (prefers-reduced-motion: reduce) { .svc-card .shot { transition: none; } }
.others { display: flex; flex-wrap: wrap; gap: 12px; }
.others a { display: inline-flex; align-items: center; padding: 10px 20px; border-radius: 999px; border: 2px solid var(--acc); color: var(--acc); font: 700 17px/1.3 var(--font); text-decoration: none; }
.others a:hover { background: rgba(231, 197, 184, 0.16); }

/* FAQ */
.faq-list { max-width: 860px; }
.faq { border-top: 1px solid var(--rule); }
.faq:last-child { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; cursor: pointer; list-style: none;
  padding: 22px 0; font: 700 clamp(19px, 1.8vw, 23px)/1.3 var(--display); color: var(--maroon);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ico { flex: none; transition: transform 0.2s; }
.faq[open] summary .ico { transform: rotate(45deg); }
.faq .ans { padding-bottom: 24px; max-width: 70ch; }
.faq summary:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

.resource { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; padding-block: 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.resource h3 { margin-bottom: 8px; font-size: clamp(21px, 2.2vw, 28px); }

/* contact details */
.details { display: grid; gap: 20px; }
.details dt { font-weight: 700; color: var(--maroon); }
.details dd { font-size: 19px; }
.details a { color: var(--maroon); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.hours { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; }

/* trust page */
.toc { position: sticky; top: 120px; }
.toc ul > li + li { margin-top: 4px; }
.toc a { display: block; padding: 8px 0; color: var(--maroon); font-weight: 700; text-underline-offset: 5px; }
.toc h2 { font-size: 24px; margin-bottom: 12px; }
.tsec { padding-block: clamp(32px, 4vw, 52px); border-top: 1px solid var(--rule); }
.tsec:first-child { border-top: 0; padding-top: 0; }
.tsec h2 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 16px; }

/* closing band */
.cta-final { text-align: center; }
.cta-final h2 { margin-bottom: 22px; font-size: clamp(38px, 5vw, 68px); }
.cta-final p { margin: 0 auto 34px; max-width: 54ch; font-size: 20px; }
.cta-final .actions { justify-content: center; }

/* ---------- forms ---------- */
.form { display: grid; gap: 26px; max-width: 760px; }
.row2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.field label, .group legend { display: block; font-weight: 700; color: var(--maroon); margin-bottom: 8px; padding: 0; }
.req { font-weight: 700; }
.hint { display: block; font-weight: 400; color: var(--char); font-size: 16px; margin-bottom: 8px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; min-height: 54px; padding: 12px 16px; font: 400 18px/1.4 var(--font); color: var(--char);
  background: var(--near); border: 2px solid var(--maroon); border-radius: 12px; appearance: none;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, var(--maroon) 50%), linear-gradient(135deg, var(--maroon) 50%, transparent 50%);
  background-position: calc(100% - 24px) 50%, calc(100% - 18px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 48px;
}
.field textarea { min-height: 140px; resize: vertical; }
.group { border: 0; margin: 0; padding: 0; min-width: 0; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4px 20px; }
.opt { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.opt input { flex: none; width: 24px; height: 24px; margin: 3px 0 0; accent-color: var(--maroon); }
.opt label { margin: 0; font-weight: 400; color: var(--char); }
.field[data-invalid="true"] input, .field[data-invalid="true"] select, .field[data-invalid="true"] textarea { border-width: 4px; }
.err { margin-top: 8px; font-weight: 700; color: var(--maroon); }
.err::before { content: "Error: "; }
.summary { padding: 22px 26px; border: 4px solid var(--maroon); border-radius: 16px; background: var(--near); color: var(--maroon); }
.summary h2 { font-size: 24px; margin-bottom: 10px; color: var(--maroon); }
.summary a { color: var(--maroon); font-weight: 700; text-underline-offset: 4px; }
.sent { padding: 28px 30px; border-radius: 16px; background: var(--near); border: 2px solid var(--maroon); color: var(--char); max-width: 760px; }
.sent h2 { font-size: 28px; margin-bottom: 12px; color: var(--maroon); }
.formnote { font-size: 16px; color: var(--char); max-width: 62ch; }
.send-error { padding: 22px 26px; border: 4px solid var(--maroon); border-radius: 16px; background: var(--near); color: var(--char); }
.send-error h2 { font-size: 24px; margin-bottom: 10px; color: var(--maroon); }
.send-error a, .sent a { color: var(--maroon); font-weight: 700; text-underline-offset: 4px; }
.form button[aria-disabled="true"] { cursor: progress; }
/* spam trap: off screen for everyone, and hidden from assistive technology */
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer (light) ---------- */
.site-footer { background: var(--blush); color: var(--char); padding-block: clamp(52px, 6vw, 88px) 32px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.foot-brand { font: 700 44px/1 var(--display); letter-spacing: 0.02em; color: var(--maroon); margin-bottom: 14px; }
.site-footer h2 { font: 700 17px/1.3 var(--font); letter-spacing: 0; color: var(--maroon); margin-bottom: 14px; }
.site-footer li + li { margin-top: 8px; }
.site-footer a { color: var(--char); text-underline-offset: 4px; }
.site-footer address { font-style: normal; }
.legal { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(77, 42, 40, 0.35); font-size: 16px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-toggle { display: inline-flex; }
  .js .nav-links {
    display: none; position: absolute; top: calc(100% + 12px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 14px;
    border: 1px solid rgba(77, 42, 40, 0.28); border-radius: 28px; background: var(--near);
    box-shadow: 0 18px 40px rgba(77, 42, 40, 0.18);
    max-height: calc(100vh - 120px); overflow-y: auto;
  }
  .js .nav-open .nav-links { display: flex; }
  html:not(.js) .nav-links { flex-wrap: wrap; }
  .nav-links a, .menu-btn { width: 100%; justify-content: space-between; }
  .menu { position: static; min-width: 0; border: 0; padding: 4px 0 8px 14px; background: none; box-shadow: none; }
  .nav-cta { display: none; }
  .nav-cta-mobile { padding-top: 6px; }
  .nav-cta-mobile .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1181px) { .nav-cta-mobile { display: none; } }

@media (max-width: 1100px) {
  .hero-copy { max-width: none; }
  .stage {
    position: relative; top: auto; bottom: auto; right: auto; width: auto; height: 460px;
    margin: 56px max(var(--gx), env(safe-area-inset-right, 0px)) 0 max(var(--gx), env(safe-area-inset-left, 0px));
    transform: perspective(1200px) rotateX(6deg) rotateZ(-4deg);
  }
  .motion-btn { position: static; margin: 24px max(var(--gx), env(safe-area-inset-left, 0px)) 0; }
  .hero-split { grid-template-columns: minmax(0, 1fr); }
  .pair { margin-left: 0; max-width: 460px; }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .fb, .fb[data-side="right"] { flex-direction: column; justify-content: flex-end; }
  .fb-hero { padding-top: clamp(280px, 62vw, 420px); min-height: 0; }
  .fb-band { padding-top: clamp(160px, 38vw, 260px); min-height: 0; }
  .fb-hero .fb-scrim, .fb-band .fb-scrim, .fb-band[data-side="right"] .fb-scrim { width: auto; min-width: 0; padding: 40px max(var(--gx), env(safe-area-inset-right, 0px)) 48px max(var(--gx), env(safe-area-inset-left, 0px)); }
  .fb-copy { max-width: 640px; }
  .split, .svc, .why { grid-template-columns: minmax(0, 1fr); }
  .preview { display: none; }
  .why-left, .toc { position: static; }
  .statements { grid-template-columns: minmax(0, 1fr); }
  .resource { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .pill { padding-left: 20px; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { height: 380px; }
  .btn { width: 100%; }
  .actions { width: 100%; }
  .pair .p1 { width: 60%; }
}