/* ============================================================
   HUARA — shared styles for the inner pages (how-it-works.html, privacy.html).
   Same tokens, type and components as index.html (which keeps its own inline copy
   so the homepage stays a single file). Change a token here AND in index.html.
   ============================================================ */
:root {
  --paper: #FAF8F5;
  --paper-2: #F3EFE9;
  --card: #FFFFFF;
  --ink: #131B2E;
  --ink-2: #131B2E; /* body text: dark charcoal */
  --ink-3: #5E6472; /* small text: 4.9:1 on paper (was #8B91A0, too faint under 18px) */
  --muted: #5E6472;
  --line: #E7E2DA;
  --green: #131B2E;
  --accent: #E86F61;
  /* warm minimalist pastels (grid cards): sage, sandstone, blush, slate, lavender */
  --sage: #D2DBC4;
  --sand: #EADEC9;
  --blush: #EADEC9;
  --slate: #E6E9EE;
  --lavender: #E6E9EE;
  --butter: var(--sand);  /* older names, kept so existing markup still resolves */
  --mist: var(--slate);
  --serif: var(--sans);
  --sans: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --out: cubic-bezier(.23, 1, .32, 1);
}
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -0.015em; margin: 0; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--green); }
p { margin: 0; }
[id] { scroll-margin-top: 90px; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }
.sec { padding: 176px 0; }
.eyebrow { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px; }
.lede { font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.sec-head { max-width: 680px; margin-bottom: 80px; }
.sec-head h2 { font-size: 60px; line-height: 1.02; }
.sec-head p { margin-top: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tag-ex { display: inline-block; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #B94A3E; background: rgba(232,111,97,0.12); padding: 4px 9px; border-radius: 999px; }

/* buttons: on an 8px grid, 48px tall (40px in the nav) with 24px sides */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 24px; font-family: var(--sans); font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; border-radius: 999px; border: 0; cursor: pointer;
  transition: transform .2s var(--out), background-color .2s var(--out), color .2s var(--out), border-color .2s var(--out); }
.btn:active { transform: scale(.97); transition-duration: .1s; }
.btn svg { flex: none; transition: transform .2s var(--out); }
.btn-dark { background: var(--ink); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 8px 24px -8px rgba(19,27,46,0.32); }
/* the deeper hover shadow lives on ::after and only its opacity animates */
.btn-dark::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 16px 32px -8px rgba(19,27,46,0.36); opacity: 0; transition: opacity .2s var(--out); pointer-events: none; }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-ghost { color: var(--ink); padding: 0 16px; }
@media (hover: hover) and (pointer: fine) {
  .btn-dark:hover { background: #2B2B28; transform: translateY(-1px); }
  .btn-dark:hover::after { opacity: 1; }
  .btn-dark:hover:active { transform: translateY(-1px) scale(.97); }
  .btn:hover svg { transform: translateX(2px); }
  .btn-line:hover { border-color: var(--ink); }
  .btn-ghost:hover { color: var(--green); }
}

/* nav: 72px bar, translucent paper with one light blur (a single sticky layer keeps it cheap) */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,248,245,0.94); border-bottom: 1px solid transparent; transition: border-color .3s var(--out), background-color .3s var(--out); }
html[data-scrolled="1"] .nav { border-bottom-color: rgba(19,27,46,0.08); background: rgba(250,248,245,0.97); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .nav { background: rgba(250,248,245,0.72); -webkit-backdrop-filter: saturate(1.6) blur(16px); backdrop-filter: saturate(1.6) blur(16px); }
  html[data-scrolled="1"] .nav { background: rgba(250,248,245,0.8); }
}
@media (prefers-reduced-transparency: reduce) { .nav, html[data-scrolled="1"] .nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.nav-in { max-width: 1200px; height: 72px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-family: var(--serif); font-size: 25px; color: var(--ink); letter-spacing: -0.01em; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--ink-2); transition: color .2s var(--out), background-color .2s var(--out); }
.nav-links a[aria-current="page"] { color: var(--ink); background: rgba(19,27,46,0.06); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--ink); background: rgba(19,27,46,0.05); } }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav .btn { height: 40px; padding: 0 16px; font-size: 14px; }
.menu { display: none; position: relative; }
/* the 4px transparent border draws a 40px pill but gives a 48px tap target */
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 16px; border: 4px solid transparent; border-radius: 999px; background: #FFFFFF padding-box; box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 600; color: var(--ink); transition: box-shadow .2s var(--out); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ''; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s var(--out), margin .2s var(--out); }
.menu[open] summary { box-shadow: inset 0 0 0 1px var(--ink); }
.menu[open] summary::after { transform: rotate(225deg); margin-top: 3px; }
.menu-list { position: absolute; right: 4px; top: calc(100% + 4px); min-width: 224px; padding: 8px; display: grid; background: #FFFFFF; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(19,27,46,0.24); } /* solid: a blur here would only see the nav (nested backdrop roots) */
.menu[open] .menu-list { transform-origin: top right; animation: menuIn .18s var(--out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(.96); } }
.menu-list a { display: flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 8px; font-size: 15px; color: var(--ink); transition: background-color .15s var(--out); }
@media (hover: hover) and (pointer: fine) { .menu-list a:hover { background: var(--paper); } .menu summary:hover { box-shadow: inset 0 0 0 1px rgba(19,27,46,0.32); } }

/* key CTA: warm coral with midnight-navy text (about 7:1). Other primary buttons are navy (.btn-dark) */
.btn-accent { background: #F78173; color: #131B2E; box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 8px 20px -12px rgba(247,129,115,0.6); }
@media (hover: hover) and (pointer: fine) { .btn-accent:hover { background: #F99185; transform: translateY(-1px); } }
.btn-accent:active { transform: scale(.97); }

/* page hero */
.page-hero { padding: 110px 0 40px; position: relative; overflow-x: clip; }
.page-hero::before { content: ''; position: absolute; left: 50%; top: -140px; width: 1100px; height: 620px; transform: translateX(-50%); pointer-events: none; z-index: -1;
  background: radial-gradient(38% 45% at 25% 45%, rgba(210,219,196,0.9), transparent 70%), radial-gradient(32% 40% at 75% 35%, rgba(234,222,201,0.7), transparent 70%); }
.page-hero h1 { font-size: 92px; line-height: 0.98; letter-spacing: -0.025em; max-width: 900px; }
.page-hero .lede { max-width: 560px; margin-top: 26px; }
.crumb { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); margin-bottom: 26px; }
.crumb a { display: inline-block; padding: 10px 0; margin: -10px 0; }
@media (hover: hover) and (pointer: fine) { .crumb a:hover { color: var(--ink); } }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; font-size: 13.5px; color: var(--ink-2); background: rgba(255,255,255,0.7); border: 1px solid var(--line); padding: 8px 15px; border-radius: 999px; transition: border-color .2s var(--out), color .2s var(--out); }
@media (hover: hover) and (pointer: fine) { .jump a:hover { border-color: var(--ink); color: var(--ink); } }

/* closing cta + footer */
.cta { position: relative; text-align: center; padding: 144px 0 160px; overflow-x: clip; }
.cta::before { content: ''; position: absolute; left: 50%; top: 50%; width: 960px; height: 560px; transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
  background: radial-gradient(40% 50% at 35% 50%, rgba(210,219,196,0.7), transparent 70%), radial-gradient(35% 45% at 68% 45%, rgba(234,222,201,0.6), transparent 70%); }
.cta h2 { font-size: 88px; line-height: 0.98; letter-spacing: -0.025em; }
.cta .lede { margin: 24px auto 0; max-width: 464px; }
.cta .btn { margin-top: 40px; }
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; }
.foot-in { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.foot p { font-size: 14px; max-width: 320px; margin-top: 14px; }
.foot-links { display: flex; gap: 64px; }
.foot-links div { display: flex; flex-direction: column; gap: 0; font-size: 14px; }
.foot-links a { padding: 9px 0; } /* 40px rows, easier to tap */
.foot-links b { font-size: 12.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) { .foot-links a:hover { color: var(--ink); } }
.legal { margin-top: 48px; font-size: 12.5px; color: var(--ink-3); }

/* sheets: a section surface rises over the previous one on a curved top edge that flattens as you scroll in (site.js) */
.sheet { position: relative; z-index: 2; --arc: 160px; margin-top: calc(-1 * var(--arc)); }
@media (max-width: 640px) { .sheet { --arc: 64px; } }
/* touch devices: skip the scroll-driven curved edges and the nav blur. Both repaint on every scroll frame, which is what made phones judder */
@media (pointer: coarse) {
  .sheet { --arc: 0px; }
  .nav, html[data-scrolled="1"] .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,248,245,0.98); }
  .w { filter: none; transition-property: opacity, transform; }
}
/* headings blur in word by word as they reach the screen (site.js splits them) */
.w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(0.24em); transition: opacity .6s var(--out), filter .6s var(--out), transform .7s var(--out); transition-delay: calc(var(--i) * 40ms); }
.words-in .w { opacity: 1; filter: none; transform: none; }

/* reveal */
/* uses the separate `translate` property so it never cancels an element's own transform (hover lifts, the raised Huara card) */
.rv { opacity: 0; translate: 0 22px; transition: opacity .8s var(--out), translate .8s var(--out), transform .3s var(--out), box-shadow .3s var(--out), background-color .2s var(--out), color .2s var(--out); }
.rv.in { opacity: 1; translate: none; }
.rv-2 { transition-delay: .08s, .08s, 0s, 0s, 0s, 0s; } .rv-3 { transition-delay: .16s, .16s, 0s, 0s, 0s, 0s; } .rv-4 { transition-delay: .24s, .24s, 0s, 0s, 0s, 0s; }

@media (max-width: 900px) {
  .nav-links { display: none; }
  .menu { display: block; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 24px; }
  .nav-in { height: 64px; padding: 0 24px; }
  .nav .btn { display: none; }
  .sec { padding: 112px 0; }
  .sec-head h2 { font-size: 42px; }
  .page-hero { padding-top: 64px; }
  .page-hero h1 { font-size: 52px; }
  .page-hero .lede { font-size: 16.5px; }
  .cta { padding: 96px 0 112px; }
  .cta h2 { font-size: 52px; }
  .foot-links { gap: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv { opacity: 1 !important; translate: none !important; transition: none !important; }
  .sheet { --arc: 0px; }
  .w { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .menu[open] .menu-list { animation: none; }
  .btn, .btn svg, .btn-dark::after, .nav-links a, .menu summary, .menu summary::after, .menu-list a { transition: none; }
}

/* ---------- site-wide type + surfaces, matched to the hero (28 Sep 2026) ----------
   Bold navy sans headings with tight tracking; emphasis is italic, not colour. Amber is for booking CTAs and key accents only. */
:root { --serif: var(--sans); --navy: #131B2E; --navy-2: #131B2E; --amber: #F78173; --amber-ink: #B94A3E; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
h3, h4 { font-weight: 650; letter-spacing: -0.025em; }
h1 em, h2 em, h3 em { font-style: italic; font-weight: 600; color: inherit; }
.logo { font-family: var(--sans); font-weight: 700; font-size: 21px; letter-spacing: -0.03em; }
.eyebrow { color: var(--ink-3); letter-spacing: 0.14em; }
.sec-head h2 { font-size: 48px; line-height: 1.04; }
.page-hero h1 { font-size: 72px; line-height: 1.0; letter-spacing: -0.045em; }
.cta h2 { font-size: 64px; line-height: 1.02; }
@media (max-width: 640px) { .sec-head h2 { font-size: 36px; } .page-hero h1 { font-size: 44px; } .cta h2 { font-size: 42px; } }

/* ---------- NAVBAR (editorial, 28 Sep 2026): solid off-white, hairline rule, plain text links with a teal underline on hover, squared teal CTA ---------- */
.nav, html[data-scrolled="1"] .nav { background: #FAF8F5; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: 1px solid transparent; }
html[data-scrolled="1"] .nav { border-bottom-color: rgba(19,27,46,0.1); }
.logo { gap: 10px; color: #131B2E; font-size: 20px; font-weight: 700; letter-spacing: -0.035em; }
.nav-links { gap: 0; }
.nav-links a { position: relative; height: auto; padding: 8px 0; margin: 0 16px; border-radius: 0; background: none !important; font-size: 14px; font-weight: 500; color: #131B2E; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px; background: #F78173; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--out); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { transform: scaleX(1); } }
.nav .btn { height: 40px; padding: 0 18px; border-radius: 2px; font-size: 14px; }
.menu summary { border-radius: 4px; }
.menu-list { border-radius: 4px; }
.menu-list a { border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { .nav-links a::after { transition: none; } }

/* ============================================================
   REDESIGN LAYER (6 Oct 2026): the homepage's "venture-backed SaaS" system applied to the inner pages.
   Same palette (Warm Coral + Midnight Navy); every extra shade is an opacity of an existing colour.
   Type: Instrument Serif for h1/h2, Inter for everything else. Older component rules that use
   var(--serif) still resolve to the sans, on purpose.
   ============================================================ */
:root {
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --text-muted: rgba(19,27,46,0.62);
  --border: rgba(19,27,46,0.08); --border-strong: rgba(19,27,46,0.14);
  --rise: cubic-bezier(.16, 1, .3, 1);
}
body { font-family: var(--sans); font-size: 17px; overflow-x: clip; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.02em; }
h1 em, h2 em { font-style: italic; font-weight: 400; }
h3, h4 { font-family: var(--sans); font-weight: 600; letter-spacing: -0.015em; }
.page-hero h1 { font-size: clamp(3rem, 6.5vw, 5.75rem); line-height: 1.04; letter-spacing: -0.02em; }
.sec-head h2 { font-size: clamp(2.5rem, 4.6vw, 4rem); line-height: 1.04; }
.cta h2 { font-size: clamp(3rem, 6vw, 5.25rem); line-height: 1.04; letter-spacing: -0.02em; }
.logo { font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; }

/* grain */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* buttons: 48px pills */
.btn { height: 48px; padding: 0 28px; border-radius: 999px; font-weight: 500; transition: transform .2s var(--out), filter .2s var(--out), background-color .2s var(--out), box-shadow .2s var(--out); }
.btn-accent { background: #F78173; color: #131B2E; }
.btn-dark { background: #131B2E; color: #FAF8F5; }
.btn-line { border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); filter: brightness(1.03); }
  .btn-accent:hover { background: #F99185; }
  .btn-line:hover { box-shadow: inset 0 0 0 1px #131B2E; }
}

/* scroll reveal: 24px rise, 600ms */
.rv { translate: 0 24px; transition: opacity .6s var(--rise), translate .6s var(--rise), transform .3s var(--out), box-shadow .3s var(--out), background-color .2s var(--out), color .2s var(--out); }

/* NAV: a floating glass pill. Sticky (it keeps its place in the flow) so no inner-page layout needs extra top space.
   The glass lives on ::before so the full-screen phone menu can cover the viewport. */
.nav, html[data-scrolled="1"] .nav { position: sticky; top: 16px; z-index: 60; width: min(1100px, calc(100% - 32px)); margin: 16px auto 0; border: 0; border-radius: 999px;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: rgba(250,248,245,0.6); border: 1px solid var(--border);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); transition: background-color .3s var(--out), box-shadow .3s var(--out); }
html[data-scrolled="1"] .nav::before { background: rgba(250,248,245,0.94); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 16px 40px -20px rgba(19,27,46,0.28); }
@media (pointer: coarse), (prefers-reduced-transparency: reduce) { .nav::before { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(250,248,245,0.96); } }
.nav-in { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; max-width: none; height: 60px; padding: 0 8px 0 20px; }
.nav .logo { position: relative; z-index: 2; justify-self: start; display: inline-flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 18px; letter-spacing: -0.03em; color: #131B2E; }
/* 44px tap targets on the logo links (nav and footer), with no change to how they look */
.logo { padding: 8px 0; margin-top: -8px; margin-bottom: -8px; }
.nav .logo svg { width: 24px; height: 24px; }
.logo-mark { display: block; flex: none; width: 32px; height: 32px; }
@media (max-width: 640px) { .nav .logo-mark { width: 28px; height: 28px; } }
.nav-links { gap: 4px; }
.nav-links a { height: 40px; padding: 0 14px; margin: 0; border-radius: 999px; color: var(--text-muted); }
.nav-links a::after { display: none; }
.nav-links a[aria-current="page"] { color: #131B2E; background: rgba(19,27,46,0.06) !important; }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: #131B2E; background: rgba(19,27,46,0.05) !important; } }
.nav-right { justify-self: end; }
.nav .btn { height: 44px; padding: 0 20px; border-radius: 999px; }
.nav .btn-accent { background: #131B2E; color: #FAF8F5; } /* coral stays for the page's own main CTA */
@media (hover: hover) and (pointer: fine) { .nav .btn-accent:hover { background: #1F2A42; } }
/* phone menu: a hamburger that opens a full-screen glass sheet */
.menu summary { position: relative; z-index: 2; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; font-size: 0; box-shadow: inset 0 0 0 1px var(--border-strong); }
.menu summary::before, .menu summary::after { content: ""; position: absolute; left: 14px; right: 14px; width: auto; height: 1.5px; margin: 0; border: 0; background: #131B2E; border-radius: 2px; transform: none; transition: transform .25s var(--out); }
.menu summary::before { top: 18px; } .menu summary::after { top: 25px; }
.menu[open] summary::before { transform: translateY(3.5px) rotate(45deg); } .menu[open] summary::after { transform: translateY(-3.5px) rotate(-45deg); margin-top: 0; }
.menu:not([open]) .menu-list { display: none; }
.menu-list { position: fixed; inset: 0; z-index: 1; right: auto; top: 0; min-width: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 96px 32px 48px;
  border: 0; border-radius: 0; box-shadow: none; background: rgba(250,248,245,0.94); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.menu[open] .menu-list { transform: none; animation: menuFade .25s var(--out); }
@keyframes menuFade { from { opacity: 0; } }
.menu-list a { min-height: 0; padding: 6px 0; border-radius: 0; font-family: var(--display); font-size: 44px; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .menu-list a:hover { background: none; color: #E86F61; } }
@media (max-width: 900px) { .nav-in { grid-template-columns: 1fr auto; } }

/* footer: minimal and muted */
.foot { border-top: 1px solid var(--border); color: var(--text-muted); }
.foot-links b { font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .nav::before, .menu summary::before, .menu summary::after { transition: none; }
  .menu[open] .menu-list { animation: none; }
}

/* ============================================================
   ROUND 3 (6 Oct 2026): engraved textures, the ridge divider, navy sections and the shared photo CTA.
   Same palette: navy #131B2E with its tints #1F2A42 / #3A4663, coral #F78173, cream #FAF8F5.
   The homepage keeps an inline copy of the textures and the ridge (index.html).
   ============================================================ */
/* ---------- ENGRAVED TEXTURES (shared with site.css) ----------
   .texture-lines: fine parallel wavy contour lines. Navy at 4.5% on cream; add .on-navy for cream at 7% on navy.
   .sky-tex: a seigaiha (overlapping wave arcs) layer for the hero sky, about 3.5%. */
.texture-lines { position: relative; isolation: isolate; --tl: #131B2E; --tl-o: .045; }
.texture-lines::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: var(--tl); opacity: var(--tl-o);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' d='M0 5Q40 1 80 5T160 5T240 5T320 5M0 15Q40 11 80 15T160 15T240 15T320 15M0 25Q40 21 80 25T160 25T240 25T320 25'/%3E%3C/svg%3E") 0 0 / 320px 30px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='30'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1' d='M0 5Q40 1 80 5T160 5T240 5T320 5M0 15Q40 11 80 15T160 15T240 15T320 15M0 25Q40 21 80 25T160 25T240 25T320 25'/%3E%3C/svg%3E") 0 0 / 320px 30px repeat; }
.texture-lines.on-navy { --tl: #FAF8F5; --tl-o: .07; }
.texture-lines.tl-soft { --tl-o: .035; }
.sky-tex { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; opacity: .035; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Cg transform='translate%280 0%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3Cg transform='translate%2848 0%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3Cg transform='translate%2824 12%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3Cg transform='translate%280 24%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3Cg transform='translate%2848 24%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3Cg transform='translate%2824 36%29'%3E%3Ccircle r='24' fill='%23FAF8F5' stroke='%23131B2E'/%3E%3Ccircle r='18' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='12' fill='none' stroke='%23131B2E'/%3E%3Ccircle r='6' fill='none' stroke='%23131B2E'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 48px 24px repeat;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* ---------- WAVE DIVIDER (.ridge): where cream meets navy. Four stacked, opaque sea-wave layers in navy tints #5B6785 / #3A4666 /
   #232D49 / #131B2E (the front one is the section colour, so the join has no seam), with a cream crest line (22%) on the two front
   layers; the divider above the footer has a coral crest line (30%) on the front layer instead.
   Each layer is two identical wave periods wide and loops with translateX(0 -> -50%); back layers are slower, neighbours run in
   opposite directions, and each one bobs 4px. Only transform animates. Paused off screen (.is-paused, set by script), still with
   reduced motion, three slower layers on phones. .ridge-top sits on a navy section; .ridge-bottom hangs below one (flipped). ---------- */
.has-ridge { position: relative; z-index: 2; }
.ridge { position: absolute; left: 0; right: 0; height: clamp(56px, 7vw, 110px); overflow: hidden; pointer-events: none; }
.ridge-top { bottom: calc(100% - 1px); }
.ridge-bottom { top: calc(100% - 1px); transform: scaleY(-1); }
.rw { position: absolute; left: 0; right: 0; bottom: -8px; height: calc(100% + 8px); will-change: transform; animation: rwBob 6s ease-in-out infinite alternate; }
.rw-i { position: absolute; left: 0; top: 0; bottom: 0; width: max(200%, 2880px); will-change: transform; animation: rwX 38s linear infinite; }
.rw-i svg { display: block; width: 100%; height: 100%; }
@keyframes rwX { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes rwBob { from { transform: translateY(-4px); } to { transform: translateY(4px); } }
.rw1 { animation-duration: 7s; animation-delay: -1.5s; }   .rw1 .rw-i { animation-duration: 38s; }
.rw2 { animation-duration: 6s; animation-delay: -4s; }     .rw2 .rw-i { animation-duration: 28s; animation-direction: reverse; }
.rw3 { animation-duration: 5.5s; animation-delay: -2.5s; } .rw3 .rw-i { animation-duration: 20s; }
.rw4 { animation-duration: 5s; animation-delay: -0.5s; }   .rw4 .rw-i { animation-duration: 14s; animation-direction: reverse; }
.ridge.is-paused .rw, .ridge.is-paused .rw-i { animation-play-state: paused; }
@media (max-width: 640px) {
  .rw2 { display: none; }
  .rw1 .rw-i { animation-duration: 49s; } .rw3 .rw-i { animation-duration: 26s; } .rw4 .rw-i { animation-duration: 18s; }
}
@media (prefers-reduced-motion: reduce) { .rw, .rw-i { animation: none; } }

/* navy sections: cream copy, muted cream at 62%, hairlines cream at 12% */
.sec-navy { background: #131B2E; color: rgba(250,248,245,0.86); }
.sec-navy h2, .sec-navy h3, .sec-navy h4 { color: #FAF8F5; }
.sec-navy h1 em, .sec-navy h2 em, .sec-navy h3 em { color: inherit; }
.sec-navy .eyebrow { color: rgba(250,248,245,0.62); }
.sec-navy .lede, .sec-navy .sec-head p { color: rgba(250,248,245,0.78); }
.sec-navy .tag-ex { color: #FBB0A7; background: rgba(247,129,115,0.16); }
.sec-navy :where(a, button, summary, input, [tabindex]):focus-visible { outline-color: #FAF8F5; }

/* the closing CTA on the dusk art (same component as the homepage's #contact) */
.cta-photo { position: relative; z-index: 2; isolation: isolate; padding: 176px 0 200px; }
.cta-photo::before { display: none; }
.cta-photo .backdrop { position: absolute; inset: -1px 0 0; z-index: -1; overflow: hidden; background: #131B2E; } /* 1px overlap: no hairline seam against a navy section above */
.cta-photo .backdrop::before { content: none; } /* no scrim over the ridges: only the copy gets one */
/* a soft navy scrim behind the heading and lede only, so no contour line ever crosses the text */
.cta-photo .cta-copy { position: relative; isolation: isolate; }
.cta-photo .cta-copy::before { content: ""; position: absolute; z-index: -1; inset: -64px -14%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(19,27,46,0.94) 52%, rgba(19,27,46,0.6) 76%, rgba(19,27,46,0)); }
/* the bottom settles into solid navy (never a grey band); the wave divider hangs from it into the footer */
.cta-photo .backdrop::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to bottom, rgba(19,27,46,0) calc(100% - 96px), #131B2E); }
.cta-photo .backdrop-img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: center bottom;
  -webkit-mask-image: linear-gradient(transparent, #000 120px); mask-image: linear-gradient(transparent, #000 120px); }
/* the art runs wider than the section and is pushed right, so the sun sits beside the headline, never behind it */
.cta-photo .backdrop-img { left: auto; right: -20%; width: 120%; }
.cta-photo h2 { color: #FAF8F5; }
.cta-photo h2 em { color: inherit; }
.cta-photo .lede { color: rgba(250,248,245,.86); }
.cta-photo :where(a, button):focus-visible { outline-color: #FAF8F5; }
@media (max-width: 640px) {
  /* phones: the full-width crop shows the sun at the top right (about two thirds of it), and the copy starts below it */
  .cta-photo { padding: 216px 0 160px; }
  .cta-photo .cta-copy::before { inset: -56px -24px; }
  .cta-photo .backdrop-img { right: 0; width: 100%; object-position: 100% 100%; -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
}

/* footer under a wave divider: clear of the waves, no hairline */
.foot.after-ridge { border-top: 0; padding-top: calc(clamp(56px, 7vw, 110px) + 56px); }