/* ---- fonts.css ---- */
/* css/fonts.css — GENERATED by internal/perf/subset-fonts.py; do not hand-edit.
   Self-hosted, subset web fonts with font-display: swap. Weights are the ones the
   stylesheets use: Archivo 400-700, Fraunces roman 400-560 (optical-size axis kept),
   Fraunces italic 400, Spline Sans Mono 400-600. Each -ext face holds the rest of
   Google's latin subset and loads only if a page prints one of those characters. */
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/archivo-ext.woff2') format('woff2');
  unicode-range: U+000D, U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0102, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+2009, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF;
}
@font-face {
  font-family: 'Archivo'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/archivo.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 560; font-display: swap;
  src: url('/fonts/fraunces-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces'; font-style: normal; font-weight: 400 560; font-display: swap;
  src: url('/fonts/fraunces.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-italic-ext.woff2') format('woff2');
  unicode-range: U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0323, U+201A, U+201E, U+2032-2033, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Fraunces'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/fonts/fraunces-italic.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/spline-sans-mono-ext.woff2') format('woff2');
  unicode-range: U+000D, U+00A1-00A2, U+00A4-00A8, U+00AA, U+00AC-00B6, U+00B8-00BA, U+00BC-00C8, U+00CA-00D6, U+00D8-00E0, U+00E4-00E8, U+00EA-00F6, U+00F8-00FF, U+0102, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+0303-0304, U+0308, U+0323, U+200B, U+201A, U+201E, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+2215;
}
@font-face {
  font-family: 'Spline Sans Mono'; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url('/fonts/spline-sans-mono.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00A3, U+00A9, U+00AB, U+00B7, U+00BB, U+00C9, U+00D7, U+00E1-00E3, U+00E9, U+00F7, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026;
}

/* ---- goa/tokens.css ---- */
/* css/goa/tokens.css — "Golden hour on laterite" (phase 2 redesign, 2026-09-14)
   ---------------------------------------------------------------------------
   6:10 pm in a South Goa village when the mandap lights come on. One palette,
   one accent. Limewash is the page, marine is the chrome and the sea, laterite
   is the only colour that asks you to do something. Azulejo blue appears in
   exactly two places: map pins and the tile band at the head of the footer.
   No gold paint anywhere (the sister sites own gold and cream-serif).

   Contrast (WCAG, computed): ink on limewash 14.1:1 · white on marine 12.0:1 ·
   white on laterite 5.1:1 · laterite-text on limewash 5.6:1 · ink-soft on
   limewash 7.4:1 · ink-soft on sand 6.4:1 · sea-foam on marine 7.9:1.
   Old variable names that generators write inline (--s-*, --measure, --t-*,
   --hairline, --gold-text, --ink-soft, --line, --muted) are kept as aliases. */
:root {
  --limewash: #F4EFE4;
  --sand: #E9DCC5;
  --sand-deep: #DDCBAE;
  --marine: #003D42;
  --marine-deep: #002C30;
  --marine-lift: #0B4D52;
  --laterite: #A35B37;
  --laterite-deep: #8A4A2B;
  --laterite-text: #92502F;
  --laterite-glow: #D98E63;
  --ink: #04252A;
  --ink-soft: #3C5254;
  --azulejo: #2B4C9B;
  --foam: #B9D3D0;

  --gold-text: var(--laterite-text);
  --muted: var(--ink-soft);
  --accent: var(--laterite);
  --wash: var(--sand);
  --line: rgba(4, 37, 42, .16);
  --rule: 1px solid var(--line);
  --hairline: 1px solid var(--line);
  --hairline-light: 1px solid rgba(244, 239, 228, .2);

  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Archivo', 'Archivo Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-figure: 'Spline Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-xs: .8125rem;
  --t-sm: .9375rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, .35vw + 1.05rem, 1.25rem);
  --t-lg: clamp(1.35rem, .8vw + 1.15rem, 1.7rem);
  --t-xl: clamp(1.7rem, 1.6vw + 1.3rem, 2.4rem);
  --t-2xl: clamp(2.1rem, 3vw + 1.3rem, 3.4rem);
  --t-3xl: clamp(2.5rem, 4.4vw + 1.2rem, 4.6rem);
  --t-hero: clamp(2.7rem, 6.2vw + .9rem, 6.4rem);

  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;
  --section-y: clamp(3.5rem, 8vw, 7.5rem);
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --measure: 66ch;
  --wrap: 1280px;
  --wrap-narrow: 800px;

  --radius: 3px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --slow: 900ms;

  /* The high-water line, drawn once as a mask and reused on every band edge. */
  --tide-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 28V14c60-8 120-8 180 0s120 8 180 0 120-8 180 0 120 8 180 0 120-8 180 0 120 8 180 0 120-8 180 0 120 8 180 0v14z'/%3E%3C/svg%3E");
  /* Laterite: the cut red stone of every Goan wall. Two offset dot fields make
     the pitted surface; no image request. */
  --laterite-grain: radial-gradient(rgba(4, 37, 42, .09) 1px, transparent 1.4px) 0 0 / 7px 7px,
                    radial-gradient(rgba(163, 91, 55, .10) 1.2px, transparent 1.6px) 3px 4px / 11px 9px;
}

/* ---- goa/base.css ---- */
/* css/goa/base.css — reset, type, links, buttons, layout primitives. */

/* Metric-matched fallbacks (no download): while Fraunces and Archivo are still
   arriving, Georgia and Arial are resized to the same line lengths, so the swap
   does not reflow the headline and push the page (CLS). Ratios computed with
   fontTools on 2026-09-14 from the self-hosted files. */
@font-face { font-family: 'Fraunces Fallback'; src: local('Georgia'); size-adjust: 103%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: 'Fraunces Fallback XL'; src: local('Georgia'); size-adjust: 90%; ascent-override: 108%; descent-override: 28%; line-gap-override: 0%; }
@media (min-width: 900px) { .page-mast h1, .home-hero h1 { font-family: 'Fraunces', 'Fraunces Fallback XL', Georgia, serif; } }
@font-face { font-family: 'Archivo Fallback'; src: local('Arial'), local('Roboto'), local('Helvetica Neue'); size-adjust: 98.4%; ascent-override: 89.2%; descent-override: 21.3%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body {
  margin: 0; background: var(--limewash); color: var(--ink);
  font: 400 var(--t-base)/1.68 var(--font-body);
  font-kerning: normal; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--font-display); font-weight: 420; font-optical-sizing: auto;
  line-height: 1.12; letter-spacing: -.012em; margin: 0; text-wrap: balance; color: inherit;
}
h1 { font-size: var(--t-3xl); line-height: 1.02; letter-spacing: -.022em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-lg); line-height: 1.2; }
h4 { font-size: var(--t-md); }
p, ul, ol, dl, figure, blockquote { margin: 0; }
p + p, p + ul, ul + p, p + ol, ol + p { margin-top: var(--s-4); }
h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: var(--s-3); }
strong, b { font-weight: 640; }
em, i { font-style: italic; }
small { font-size: .82em; }
abbr[title] { text-decoration: none; }

a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: color-mix(in srgb, var(--laterite) 70%, transparent); transition: text-decoration-color .2s, color .2s; }
a:hover { color: var(--laterite-text); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--laterite); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.stack > * + * { margin-top: var(--s-4); }
.stack > h2, .stack > h3 { margin-top: var(--s-7); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--laterite); color: #fff; padding: .6rem 1rem; text-decoration: none; }
.skip-link:focus { top: 1rem; }

/* Label above a heading: sentence case, laterite, a short tide stroke before it.
   Not letter-spaced capitals (the sister sites' tell). */
.plaque, .eyebrow, .design-kicker {
  display: inline-flex; align-items: center; gap: .6rem;
  font: 560 var(--t-sm)/1.3 var(--font-body); color: var(--laterite-text); letter-spacing: 0;
}
.plaque::before, .eyebrow::before, .design-kicker::before {
  content: ""; width: 1.6rem; height: .5rem; flex: none; background: currentColor;
  -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat;
}
.section-head > * + * { margin-top: var(--s-4); }
.section-head h1 + .lede, .section-head h2 + .lede { margin-top: var(--s-5); }
.lede { font-size: var(--t-md); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; }
.caption, figcaption { font-size: var(--t-xs); line-height: 1.55; color: var(--ink-soft); }
.h1-sub { display: block; font-size: .42em; line-height: 1.3; letter-spacing: 0; margin-top: .5rem; color: var(--ink-soft); font-weight: 400; }
.pull { font: 400 var(--t-xl)/1.25 var(--font-display); color: var(--marine); max-width: 24ch; }
.pull::before { content: "\201C"; color: var(--laterite); }

/* Buttons: laterite block, square shoulders, no arrow glyphs. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .7rem 1.4rem; border: 1.5px solid transparent; border-radius: var(--radius);
  font: 600 1rem/1.2 var(--font-body); letter-spacing: .005em; text-decoration: none; cursor: pointer;
  transition: background-color .25s var(--ease), color .25s, border-color .25s, transform .25s var(--ease);
}
.btn-primary { background: var(--laterite); color: #fff; }
.btn-primary:hover { background: var(--laterite-deep); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--ink) 35%, transparent); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn:active { transform: translateY(1px); }
.btn-small { min-height: 2.5rem; padding: .45rem 1rem; font-size: var(--t-sm); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4); align-items: center; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---- goa/shell.css ---- */
/* css/goa/shell.css — header, footer, call bar, page masthead, reading rail. */

/* ---- header: a marine bar, the mark on the left, one laterite action ---- */
.site-header { background: var(--marine); color: var(--limewash); position: relative; z-index: 40; }
@media (min-width: 960px) { .site-header { position: sticky; top: 0; } }
.header-bar { display: flex; align-items: center; gap: var(--s-5); min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--limewash); margin-right: auto; }
.brand:hover { color: var(--limewash); }
.brand-mark { width: 3.1rem; height: auto; }
.brand-type { font: 460 1.18rem/1 var(--font-display); letter-spacing: -.005em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: .25rem clamp(.6rem, 1.6vw, 1.6rem); }
.nav a:not(.btn) { color: var(--limewash); text-decoration: none; font: 500 .96rem/1 var(--font-body); padding: .6rem .1rem; position: relative; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: .25rem; height: 2px; background: var(--laterite-glow); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { margin-left: .5rem; min-height: 2.6rem; padding-block: .5rem; }
.nav-toggle { display: none; }

@media (max-width: 959px) {
  .brand-mark { width: 2.6rem; }
  .brand-type { font-size: 1.05rem; }
  .nav-toggle { display: inline-flex; align-items: center; gap: .55rem; background: none; border: 1px solid rgba(244,239,228,.35); border-radius: var(--radius); color: var(--limewash); padding: .5rem .8rem; font-size: .95rem; cursor: pointer; }
  .nav-toggle-lines { width: 1.1rem; height: .7rem; background: linear-gradient(currentColor 0 0) top / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) bottom / 70% 1.5px no-repeat; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--marine); padding: .5rem var(--gutter) 1.5rem; border-top: var(--hairline-light); }
  .nav[data-open="false"] { display: none; }
  html:not(.js) .nav[data-open="false"] { display: flex; position: static; }
  .nav a:not(.btn) { padding: .95rem 0; font-size: 1.1rem; border-bottom: var(--hairline-light); }
  .nav a:not(.btn)::after { display: none; }
  .nav-cta { margin: 1.2rem 0 0; }
}
html:not(.js) .nav-toggle { display: none; }
@media (max-width: 959px) { html:not(.js) .header-bar { flex-wrap: wrap; } }

/* ---- footer: azulejo tile band, then the studio and the link groups ---- */
.site-footer { background: var(--marine-deep); color: var(--foam); font-size: var(--t-sm); margin-top: 0; }
.footer-tiles {
  height: 22px;
  background:
    radial-gradient(circle at 50% 50%, var(--limewash) 0 3px, transparent 3.5px) 0 0 / 22px 22px,
    conic-gradient(from 45deg, var(--azulejo) 0 25%, #F4EFE4 0 50%, var(--azulejo) 0 75%, #F4EFE4 0) 0 0 / 22px 22px;
}
.site-footer a { color: var(--limewash); text-decoration-color: rgba(217,142,99,.55); }
.site-footer a:hover { color: #fff; }
.footer-top { display: grid; gap: var(--s-7); padding-block: var(--s-8) var(--s-7); }
@media (min-width: 960px) { .footer-top { grid-template-columns: minmax(16rem, 22rem) 1fr; gap: var(--s-9); } }
.footer-logo img { width: 9.5rem; }
.footer-line { margin-top: var(--s-5); color: var(--limewash); font: 400 1.15rem/1.45 var(--font-display); max-width: 30ch; }
.footer-parent { font-style: normal; margin-top: var(--s-4); line-height: 1.6; }
.footer-studio .btn { margin-top: var(--s-5); }
.footer-links { display: grid; gap: var(--s-5); align-content: start; }
.footer-group { display: grid; gap: .4rem var(--s-5); padding-top: var(--s-4); border-top: var(--hairline-light); }
@media (min-width: 720px) { .footer-group { grid-template-columns: 11rem 1fr; } }
.footer-group h3 { font: 460 1.1rem/1.3 var(--font-display); color: var(--limewash); }
.footer-group ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; }
.footer-group a { text-decoration: none; }
.footer-group a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3) var(--s-6); padding-block: var(--s-5) var(--s-7); border-top: var(--hairline-light); font-size: var(--t-xs); }
.footer-base p { margin: 0; }
.footer-owner { max-width: 70ch; }
.design-image-note { font-size: var(--t-xs); padding-bottom: var(--s-7); margin-top: calc(var(--s-5) * -1); color: var(--foam); }

/* ---- call bar: one action on phones, after the first screen ---- */
.callbar { display: none; }
@media (max-width: 759px) {
  .js .callbar { display: block; position: fixed; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); z-index: 50; opacity: 0; transform: translateY(1.2rem); pointer-events: none; transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .js .callbar.is-shown { opacity: 1; transform: none; pointer-events: auto; }
  .callbar .btn { box-shadow: 0 10px 30px -10px rgba(0, 44, 48, .6); }
}

/* ---- breadcrumbs ---- */
.crumbs { font-size: var(--t-xs); color: inherit; opacity: .85; display: flex; flex-wrap: wrap; gap: .2rem .45rem; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---- page masthead: every inner page opens on the sea ---- */
.page-mast { background: var(--marine); color: var(--limewash); position: relative; padding-block: var(--s-6) calc(var(--s-8) + 20px); overflow: hidden; }
.page-mast::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 24px; background: var(--limewash); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.page-mast-grid { display: grid; gap: var(--s-6); align-items: center; }
.page-mast.has-aside .page-mast-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .page-mast.has-aside .page-mast-grid { grid-template-columns: minmax(0, 1.7fr) minmax(14rem, 1fr); } }
.page-mast .section-head { margin-top: var(--s-6); max-width: 58rem; }
.page-mast h1 { font-size: clamp(2.3rem, 4.6vw + .8rem, 4.8rem); }
.page-mast .lede, .page-mast .caption, .page-mast .h1-sub { color: var(--foam); }
.page-mast .plaque { color: var(--laterite-glow); }
.page-mast a { text-decoration-color: rgba(217,142,99,.6); }
.page-mast a:hover { color: #fff; }
.page-dates { margin-top: var(--s-4); }
.page-mast .page-dates { color: var(--foam); }
.mast-aside { justify-self: end; width: min(100%, 17rem); }
@media (max-width: 899px) { .mast-aside { justify-self: start; width: min(100%, 13rem); } }

/* ---- reading layout: the contents rail is a line of stops, like the coast ---- */
.design-reading-layout { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.design-reading-body > .section:first-child { padding-top: var(--s-7); }
.design-reading-body .wrap, .design-reading-body .wrap-narrow { padding-inline: 0; max-width: none; }
.design-reader nav { display: flex; gap: .5rem; overflow-x: auto; padding-block: var(--s-5) .25rem; scrollbar-width: none; }
.design-reader nav::-webkit-scrollbar { display: none; }
.design-reader .design-kicker { display: none; }
.design-reader a { flex: 0 0 auto; font-size: var(--t-xs); text-decoration: none; padding: .45rem .8rem; border: var(--hairline); border-radius: 999px; white-space: nowrap; color: var(--ink-soft); }
.design-reader a.design-reader-enquire { background: var(--laterite); color: #fff; border-color: var(--laterite); }
@media (min-width: 1100px) {
  .design-reading-layout { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); gap: var(--s-8); }
  .design-reader { position: relative; }
  .design-reader nav { position: sticky; top: 6rem; flex-direction: column; gap: 0; overflow: visible; padding-block: var(--s-7) 0; }
  .design-reader .design-kicker { display: inline-flex; margin-bottom: var(--s-4); }
  .design-reader a { white-space: normal; border: 0; border-radius: 0; padding: .45rem 0 .45rem 1.35rem; font-size: .875rem; line-height: 1.35; position: relative; }
  .design-reader a:not(.design-reader-enquire)::before { content: ""; position: absolute; left: .28rem; top: 0; bottom: 0; width: 1px; background: var(--line); }
  .design-reader a:not(.design-reader-enquire)::after { content: ""; position: absolute; left: 0; top: .85rem; width: .6rem; height: .6rem; border-radius: 50%; background: var(--limewash); border: 1.5px solid color-mix(in srgb, var(--ink) 40%, transparent); transition: background-color .3s, border-color .3s, transform .3s var(--ease); }
  .design-reader a:hover, .design-reader a.is-current { color: var(--ink); }
  .design-reader a.is-current::after { background: var(--laterite); border-color: var(--laterite); transform: scale(1.25); }
  .design-reader a.design-reader-enquire { margin-top: var(--s-5); padding: .6rem 1rem; border-radius: var(--radius); text-align: center; }
}
.page-mast .pull { color: var(--limewash); margin-top: var(--s-5); font-size: var(--t-lg); max-width: 34ch; }
.page-mast .pull::before { color: var(--laterite-glow); }

/* ---- goa/content.css ---- */
/* css/goa/content.css — the reading furniture every generator shares. */

/* Dark bands are the sea: marine, with the high-water line on their top edge. */
.section-dark, .section-ink { background: var(--marine); color: var(--limewash); position: relative; }
.section-dark::before, .section-ink::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: var(--marine); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.section-dark .lede, .section-dark .caption, .section-ink .lede { color: var(--foam); }
.section-dark .plaque { color: var(--laterite-glow); }
.section-dark a:not(.btn) { text-decoration-color: rgba(217,142,99,.6); }
.section-dark a:not(.btn):hover { color: #fff; }
.section-dark .btn-ghost { color: var(--limewash); border-color: rgba(244,239,228,.45); }
.design-reading-body .section-dark:not(#enquire) { border-radius: 4px; padding: var(--s-7) clamp(1.25rem, 4vw, 3rem); margin-block: var(--s-7); }
.design-reading-body .section-dark:not(#enquire)::before { display: none; }

/* The short answer: a sand panel with a laterite edge, the part an engine quotes. */
.answer { background: var(--sand); border-left: 3px solid var(--laterite); padding: var(--s-5) var(--s-5) var(--s-5) clamp(1.1rem, 3vw, 2rem); border-radius: 0 4px 4px 0; max-width: var(--measure); }
.answer h2, .answer h3 { font-size: var(--t-md) !important; font-family: var(--font-body); font-weight: 640; letter-spacing: 0; }
.answer p { color: var(--ink); }
.section-dark .answer { background: var(--marine-lift); color: var(--limewash); }
.section-dark .answer p { color: var(--limewash); }

/* Prose inside content pages. */
.prose > * + *, .design-reading-body .section > .wrap > * + * { margin-top: var(--s-4); }
.design-reading-body h2 { margin-top: var(--s-8); }
.design-reading-body h2:first-child, .answer h2, .section-head h2, .enquiry h2 { margin-top: 0; }
.design-reading-body h3 { margin-top: var(--s-6); }
.design-reading-body :is(.venue-card, .proof-card, .work-card, .answer, .faq, .family) h3 { margin-top: 0; }
.design-reading-body p, .design-reading-body li { max-width: var(--measure); }
.design-reading-body ul:not([class]), .design-reading-body ol:not([class]) { padding-left: 1.2rem; }
.design-reading-body li + li { margin-top: .35rem; }

/* Fact tables: the ledger. Figures in the mono face, blanks said out loud. */
.fact-table { width: 100%; font-size: var(--t-sm); border-top: 2px solid var(--ink); margin-top: var(--s-4); }
.fact-table th, .fact-table td { text-align: left; vertical-align: top; padding: .7rem .9rem .7rem 0; border-bottom: var(--hairline); }
.fact-table thead th { font: 600 var(--t-xs)/1.3 var(--font-body); color: var(--ink-soft); padding-block: .6rem; }
.fact-table tbody th { font-weight: 560; }
.fact-table tbody th a { text-decoration-color: color-mix(in srgb, var(--laterite) 55%, transparent); }
.fact-table td { font-family: var(--font-figure); font-size: .86rem; letter-spacing: -.01em; }
.fact-table tbody tr { transition: background-color .2s; }
.fact-table tbody tr:hover { background: color-mix(in srgb, var(--sand) 55%, transparent); }
.fact-unknown { font-family: var(--font-body); font-size: var(--t-xs); color: var(--ink-soft); font-style: italic; }
.section-dark .fact-table { border-top-color: var(--limewash); }
.section-dark .fact-table th, .section-dark .fact-table td { border-bottom-color: rgba(244,239,228,.18); }
.section-dark .fact-table thead th, .section-dark .fact-unknown { color: var(--foam); }
div:has(> .fact-table) { overflow-x: auto; }

/* Questions: a rule, a question in the display face, and a plus that turns. */
.faq { border-top: var(--hairline); margin-top: var(--s-5); max-width: var(--measure); }
.faq details { border-bottom: var(--hairline); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; font: 440 var(--t-md)/1.35 var(--font-display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: .9rem; height: .9rem; margin-top: .35rem; background: linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat, linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat; transition: transform .35s var(--ease); color: var(--laterite); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { padding: 0 0 var(--s-5); color: var(--ink-soft); }
.section-dark .faq, .section-dark .faq details { border-color: rgba(244,239,228,.2); }
.section-dark .faq-body { color: var(--foam); }
.section-dark .faq summary::after { color: var(--laterite-glow); }

/* Link lists ("on file"): a column of stops. */
.onfile { list-style: none; padding: 0; margin-top: var(--s-4); display: grid; gap: 0; max-width: var(--measure); border-top: var(--hairline); }
.onfile li { border-bottom: var(--hairline); padding: .7rem 0 .7rem 1.4rem; position: relative; margin: 0 !important; }
.onfile li::before { content: ""; position: absolute; left: .1rem; top: 1.2rem; width: .5rem; height: .5rem; border-radius: 50%; border: 1.5px solid var(--laterite); }
.onfile a { text-decoration: none; }
.onfile a:hover { text-decoration: underline; }

/* Three-up statements (studio, legacy home cards). */
.proof-grid { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
@media (min-width: 820px) { .proof-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.proof-card { border-top: 2px solid var(--marine); padding-top: var(--s-4); }
.proof-card h3 { font-size: var(--t-lg); margin-bottom: var(--s-3); }
.proof-card p { color: var(--ink-soft); }

.figure-row { display: grid; gap: var(--s-5); margin-top: var(--s-6); }
@media (min-width: 720px) { .figure-row { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); } }
.figure { border-top: var(--hairline); padding-top: var(--s-4); }
.figure dt { font: 440 var(--t-lg)/1.2 var(--font-display); }
.figure dd { margin: var(--s-2) 0 0; color: var(--ink-soft); font-size: var(--t-sm); }

/* Photographs in teaching positions: whole frame, credit underneath, small. */
.plate { margin-block: var(--s-7); }
.plate img, .gallery img, .work-card img { width: 100%; border-radius: 3px; background: var(--sand); }
.plate img { max-height: 42rem; object-fit: contain; object-position: left center; background: transparent; }
.plate figcaption { margin-top: var(--s-3); max-width: var(--measure); }
.gallery { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.gallery img { aspect-ratio: 4 / 5; object-fit: cover; }
.work-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); margin-top: var(--s-6); }
.work-card { text-decoration: none; display: block; }
.work-card img { aspect-ratio: 4 / 5; object-fit: cover; }
.work-card figcaption { margin-top: var(--s-3); }
.work-card h3 { font-size: var(--t-lg); color: var(--ink); }

/* Cards: journal entries and guides. A rule on top, not a box. */
.venue-grid { display: grid; gap: var(--s-6) var(--s-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); margin-top: var(--s-6); }
.venue-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); border-top: 2px solid var(--ink); padding-top: var(--s-4); }
.venue-card:hover { color: var(--ink); }
.venue-card:hover h3 { text-decoration: underline; text-decoration-color: var(--laterite); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
.venue-card-media { order: -1; margin: calc(var(--s-4) * -1 - 2px) 0 var(--s-4); overflow: hidden; border-radius: 0 0 3px 3px; }
.venue-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s var(--ease); }
.venue-card:hover .venue-card-media img { transform: scale(1.04); }
.venue-card-where { display: block; font-size: var(--t-xs); color: var(--laterite-text); font-weight: 560; margin-bottom: var(--s-2); }
.venue-card h3 { font-size: var(--t-lg); line-height: 1.22; }
.venue-card-facts { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: var(--s-3); font: .82rem/1.4 var(--font-figure); color: var(--ink-soft); }
.hub-legend { color: var(--ink-soft); }
.onward p:first-child { font-size: var(--t-xs) !important; letter-spacing: 0 !important; text-transform: none !important; font-weight: 600; opacity: 1 !important; color: var(--laterite-text); }
.onward { border-color: var(--line) !important; border-radius: 4px !important; background: color-mix(in srgb, var(--sand) 45%, transparent); }

/* Other blocks. */
.abroad-note { margin-top: var(--s-4); padding: var(--s-4); background: color-mix(in srgb, var(--sand) 60%, transparent); border-radius: 4px; font-size: var(--t-xs); color: var(--ink-soft); }
.abroad-note .btn { margin-top: var(--s-3); }
.design-crosslinks { padding-block: var(--s-6); font-size: var(--t-sm); color: var(--ink-soft); border-top: var(--hairline); }
.design-crosslinks .design-kicker { margin-bottom: var(--s-3); }
.design-crosslinks p + p { margin-top: var(--s-2); }
[data-booking-guide-link] { max-width: var(--wrap); margin: var(--s-6) auto; padding: var(--s-4) var(--gutter); font: 440 var(--t-md)/1.4 var(--font-display); }
.bracket-table td { font-family: var(--font-body); font-size: var(--t-xs); line-height: 1.5; min-width: 15rem; }
.bracket-table td b { display: block; font-size: var(--t-sm); margin-bottom: .2rem; }
.bracket-table td em { display: block; margin-top: .3rem; color: var(--ink-soft); }
.chip { font: 500 var(--t-sm)/1 var(--font-body); padding: .6rem 1rem; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent); background: transparent; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--marine); color: var(--limewash); border-color: var(--marine); }
.village-list { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: 0 var(--s-5); }
.village-list a { display: flex; justify-content: space-between; gap: var(--s-3); padding: .7rem 0; border-bottom: var(--hairline); text-decoration: none; }
.village-list b { font: 440 1.1rem/1.3 var(--font-display); }
.village-list span { font: .8rem/1.9 var(--font-figure); color: var(--ink-soft); }
.village-list a:hover b { color: var(--laterite-text); }
.design-reading-body > .section { padding-block: var(--s-7); }
.design-reading-body > .section:last-child { padding-bottom: var(--s-9); }
.design-reading-body .venue-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }

/* ---- goa/forms.css ---- */
/* css/goa/forms.css — the ask. Name and WhatsApp number first; everything else optional. */
#enquire { scroll-margin-top: 4.5rem; }
.enquiry { display: grid; gap: var(--s-6) var(--s-9); align-items: start; }
@media (min-width: 900px) {
  .enquiry { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "head form" "after form"; }
  .enquiry > .section-head { grid-area: head; }
  .enquiry > form, .enquiry > .form-grid { grid-area: form; }
  .enquiry > .after-strip { grid-area: after; }
}
.enquiry h2 { font-size: var(--t-2xl); }
.form-grid { display: grid; gap: var(--s-4); background: var(--limewash); color: var(--ink); padding: clamp(1.25rem, 3.5vw, 2.25rem); border-radius: 4px; }
.field-row { display: grid; gap: var(--s-4); }
@media (min-width: 560px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field label small { font-weight: 400; color: var(--ink-soft); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 3rem; padding: .7rem .85rem; background: #fff; color: var(--ink);
  border: 1.5px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: var(--radius);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 6rem; resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--laterite); box-shadow: 0 0 0 3px color-mix(in srgb, var(--laterite) 22%, transparent); }
.form-grid .btn-primary { width: 100%; min-height: 3.25rem; font-size: 1.05rem; }
.form-status { font-weight: 600; font-size: var(--t-sm); min-height: 1.4em; margin: 0; }
.form-status[data-state="error"] { color: #9B2C1C; }
.form-note { font-size: var(--t-xs); color: var(--ink-soft); margin: 0; }
.form-grid .answer { border-left-color: var(--laterite); }

/* What happens next: a real sequence, so it is numbered. */
.after-strip { list-style: none; padding: 0; counter-reset: next; display: grid; gap: 0; max-width: 34rem; }
.after-strip li { counter-increment: next; display: grid; grid-template-columns: 2.6rem 1fr; align-items: baseline; padding: .8rem 0; border-top: var(--hairline-light); }
.after-strip li::before { content: counter(next); font: 400 1.3rem/1 var(--font-figure); color: var(--laterite-glow); }
:not(.section-dark) > * > .enquiry .after-strip li { border-top: var(--hairline); }
:not(.section-dark) > * > .enquiry .after-strip li::before { color: var(--laterite-text); }

/* The date check (js/lead-surfaces.js), one strip, drawn here rather than inline. */
.gwc-datecheck, .pg-dossier-brand { margin: var(--s-5) 0 var(--s-6); padding: var(--s-5); background: var(--marine); color: var(--limewash); border-radius: 4px; max-width: var(--measure); }
.gwc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .9rem; margin-bottom: var(--s-3); }
.gwc-head strong { font: 440 var(--t-md)/1.3 var(--font-display); }
.gwc-head span { font-size: var(--t-xs); color: var(--foam); display: block; }
.gwc-form { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.gwc-form input { flex: 1 1 10rem; min-width: 0; min-height: 2.9rem; padding: .6rem .8rem; border: 1px solid transparent; border-radius: var(--radius); background: var(--limewash); color: var(--ink); font-size: .95rem; }
.gwc-form input:focus { outline: 3px solid var(--laterite-glow); outline-offset: 1px; }
.gwc-form button { flex: 0 1 auto; min-height: 2.9rem; padding: .6rem 1.2rem; border: 0; border-radius: var(--radius); background: var(--laterite); color: #fff; font-weight: 600; cursor: pointer; }
.gwc-form button:hover { background: var(--laterite-deep); }
.pg-dossier-brand .gwc-form button { flex-basis: 100%; }
.gwc-form [role="status"] { width: 100%; margin: .3rem 0 0; font-weight: 600; color: var(--limewash); font-size: var(--t-sm); }
/* Reserved space so the strip does not push the page down when it arrives. */
.js .gwc-slot { min-height: 22.3rem; }
@media (min-width: 700px) { .js .gwc-slot { min-height: 14.2rem; } }
.js .gwc-slot-dossier { min-height: 24.1rem; }
@media (min-width: 700px) { .js .gwc-slot-dossier { min-height: 24.4rem; } }
.gwc-slot > div { margin-block: 0; }
@media (max-width: 559px) { .gwc-form input[name="phone"] { flex-basis: 100%; } .gwc-form input[name="name"] { flex-basis: 100%; } }

/* ---- goa/home.css ---- */
/* css/goa/home.css — the seven homepage sections. */

/* 1 · hero: the sea at golden hour, the coast drawn in, the stake in words. */
.home-hero { background: var(--marine); color: var(--limewash); position: relative; overflow: hidden; padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6.5rem); }
.home-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 26px; background: var(--limewash); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.home-hero-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .home-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: var(--s-8); min-height: min(calc(100svh - 11rem), 44rem); } }
.hero-where { font-size: var(--t-sm); color: var(--foam); max-width: 40ch; }
.home-hero h1 { font-size: var(--t-hero); line-height: 1; letter-spacing: -.018em; font-weight: 400; margin-top: var(--s-5); max-width: 13ch; }
.hero-lede { margin-top: var(--s-5); font-size: var(--t-md); line-height: 1.6; color: var(--foam); max-width: 50ch; }
.hero-slot { margin-top: var(--s-6); max-width: 40rem; }
.js .hero-slot { min-height: 15.2rem; }
@media (min-width: 560px) { .js .hero-slot { min-height: 11.7rem; } }
.hero-slot .gwc-datecheck { background: transparent; padding: 0; margin: 0; max-width: none; }
.hero-slot .gwc-form input { min-height: 3.2rem; font-size: 1rem; }
.hero-slot .gwc-form button { min-height: 3.2rem; padding-inline: 1.5rem; font-size: 1rem; }
.hero-link { color: var(--limewash); font-weight: 500; }
.home-hero-map { justify-self: center; width: min(100%, 25rem); position: relative; }
@media (max-width: 899px) { .home-hero-map { width: min(62%, 15rem); justify-self: end; margin-top: calc(var(--s-4) * -1); } }
.home-hero-map figcaption { color: var(--foam); text-align: right; margin-top: var(--s-2); }

/* the map itself, wherever it appears */
.goa-map { width: 100%; height: auto; overflow: visible; }
.map-land { fill: var(--sand); stroke: var(--marine); stroke-width: 1.2; stroke-linejoin: round; }
.map-tide { fill: none; stroke: var(--foam); stroke-width: 2; stroke-linecap: round; opacity: .32; }
.map-pin circle { fill: var(--azulejo); stroke: var(--sand); transition: transform .3s var(--ease); transform-box: fill-box; transform-origin: center; }
.map-pin.is-on circle { fill: var(--laterite); }
.map-pin.is-big circle { fill: var(--marine); stroke: var(--laterite); }
.map-pin text { font-family: var(--font-body); font-weight: 600; fill: var(--ink); paint-order: stroke; stroke: var(--sand); stroke-linejoin: round; text-decoration: none; }
a.map-pin:hover circle, a.map-pin:focus-visible circle { transform: scale(1.5); }
a.map-pin:focus-visible { outline: none; }
.page-mast .map-land, .home-hero .map-land { stroke: var(--sand); }
.goa-map.is-crop { background: var(--marine-lift); border-radius: 4px; overflow: hidden; }
a.map-pin { text-decoration: none; }

/* 2 · the short season */
.home-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .home-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-9); } }
.home-relief { margin-top: var(--s-5); font-weight: 560; max-width: 48ch; }
.home-relief a { display: inline-block; margin-left: .3rem; font-weight: 500; }
.gauge-months { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(3px, .8vw, 10px); height: clamp(12rem, 26vw, 17rem); align-items: end; border-bottom: 2px solid var(--ink); }
.gauge-month, .gauge-month button { height: 100%; }
.gauge-month button { width: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 0; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); position: relative; }
.gauge-bar { display: block; height: var(--h); border-radius: 3px 3px 0 0; background: var(--tone); transition: clip-path var(--slow) var(--ease), filter .2s; transition-delay: calc(var(--i) * 55ms); }
.gauge-month[data-state="premium"], .gauge-key [data-state="premium"] { --tone: var(--laterite-deep); }
.gauge-month[data-state="peak"], .gauge-key [data-state="peak"] { --tone: var(--laterite); }
.gauge-month[data-state="shoulder"], .gauge-key [data-state="shoulder"] { --tone: var(--sand-deep); }
.gauge-month[data-state="monsoon"], .gauge-key [data-state="monsoon"] { --tone: #5F8F92; }
.gauge-month abbr { position: absolute; left: 0; right: 0; bottom: -1.9rem; text-align: center; font: 500 .8rem/1 var(--font-figure); }
.gauge-month button:hover .gauge-bar { filter: brightness(1.08); }
.gauge-month button[aria-pressed="true"] abbr { color: var(--laterite-text); font-weight: 700; }
.gauge-month button[aria-pressed="true"] .gauge-bar { box-shadow: inset 0 0 0 2px var(--ink); }
.gauge-note { margin-top: 3rem; min-height: 3.4em; font-size: var(--t-md); line-height: 1.5; }
.gauge-note b { font: 440 1.35rem/1 var(--font-display); margin-right: .35rem; }
.gauge-state { font-size: var(--t-xs); font-weight: 600; color: var(--laterite-text); margin-right: .35rem; }
.gauge-key { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin-top: var(--s-4); font-size: var(--t-xs); color: var(--ink-soft); }
.gauge-key li { display: inline-flex; align-items: center; gap: .4rem; }
.gauge-key li::before { content: ""; width: .8rem; height: .8rem; border-radius: 2px; background: var(--tone); }
.rv .gauge:not(.is-in) .gauge-bar { clip-path: inset(100% 0 0 0); }
.gauge .gauge-bar { clip-path: inset(0); }

/* 3 · the coast, north to south: a laterite wall with the shoreline running across it */
.home-coast { background: var(--laterite-grain), var(--sand); position: relative; }
.home-coast-head { max-width: 50rem; }
.coast-rail { --rail-pad: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); scroll-padding-inline: var(--rail-pad); margin-top: var(--s-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--laterite) transparent; padding-bottom: var(--s-4); }
.coast-stops { list-style: none; margin: 0; display: flex; width: max-content; padding-inline: var(--rail-pad); position: relative; }
.coast-stops::before { content: ""; position: absolute; left: 0; right: 0; top: .55rem; height: 14px; background: var(--marine); opacity: .85; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7q15-7 30 0t30 0 30 0 30 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M0 7q15-7 30 0t30 0 30 0 30 0' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 0 0 / 120px 14px repeat-x; }
.coast-stop { width: clamp(13rem, 60vw, 15.5rem); flex: none; scroll-snap-align: start; padding-right: var(--s-5); }
.coast-stop a { display: flex; flex-direction: column; gap: .35rem; height: 100%; padding-top: 2.4rem; text-decoration: none; color: var(--ink); position: relative; }
.coast-stop a::before { content: ""; position: absolute; top: .3rem; left: 0; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--sand); border: 3px solid var(--marine); transition: background-color .3s, transform .3s var(--ease); }
.coast-stop a:hover::before, .coast-stop a:focus-visible::before { background: var(--laterite); transform: scale(1.2); }
.coast-region { font-size: var(--t-xs); color: var(--laterite-text); font-weight: 600; }
.coast-stop b { font: 420 1.75rem/1.05 var(--font-display); letter-spacing: -.015em; }
.coast-stop a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--laterite); text-underline-offset: .15em; }
.coast-note { font-size: var(--t-sm); line-height: 1.5; color: var(--ink-soft); }
.coast-count { margin-top: auto; padding-top: .5rem; font: 600 .85rem/1.3 var(--font-body); color: var(--ink); }
.coast-hint { margin-top: var(--s-6); font-size: var(--t-xs); color: var(--ink-soft); display: flex; justify-content: space-between; gap: var(--s-4); }
.coast-hint span:last-child::after { content: ""; display: inline-block; width: 2.2rem; height: .55rem; margin-left: .5rem; background: currentColor; -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.home-families { position: relative; }
.home-families::before { content: ""; position: absolute; left: 0; right: 0; top: -23px; height: 24px; background: var(--marine); -webkit-mask: var(--tide-mask) center / 100% 100% no-repeat; mask: var(--tide-mask) center / 100% 100% no-repeat; }
.rv .coast-rail:not(.is-in) .coast-stop { opacity: 0; transform: translateX(1.5rem); }
.coast-stop { transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(min(var(--i), 8) * 70ms); }
.home-coast-foot { margin-top: var(--s-6); gap: var(--s-3) var(--s-5); }

/* 4 · drawn, then built */
.home-split-flip { align-items: start; }
.drawing { background: var(--limewash); border: var(--hairline); border-radius: 4px; padding: clamp(1rem, 3vw, 2rem); background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 26px 26px; background-position: -1px -1px; }
.drawing svg { width: 100%; }
.drawing path { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.2s var(--ease); }
.dr-ground path { stroke: var(--ink-soft); stroke-width: 1.2; }
.dr-frame path { stroke: var(--ink); stroke-width: 2; }
.dr-drape path { stroke: var(--laterite); stroke-width: 1.8; transition-delay: .6s; }
.dr-dims path { stroke: var(--ink-soft); stroke-width: 1; transition-delay: 1.1s; }
.dr-dims text { font: 500 13px/1 var(--font-figure); fill: var(--ink-soft); text-anchor: middle; transition: opacity .6s 1.8s; }
.rv .drawing:not(.is-in) path { stroke-dashoffset: 1; }
.rv .drawing:not(.is-in) text { opacity: 0; }
.drawing figcaption { margin-top: var(--s-3); }
.build-steps { list-style: none; padding: 0; margin-top: var(--s-6); counter-reset: step; border-top: var(--hairline); }
.build-steps li { counter-increment: step; display: grid; grid-template-columns: 3rem 1fr; gap: .15rem 0; padding: var(--s-4) 0; border-bottom: var(--hairline); }
.build-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font: 500 .9rem/1.9 var(--font-figure); color: var(--laterite-text); }
.build-steps b { font: 440 var(--t-md)/1.35 var(--font-display); }
.build-steps span { color: var(--ink-soft); font-size: var(--t-sm); }
.home-drawn-foot { margin-top: var(--s-5); gap: var(--s-3) var(--s-6); }

/* 5 · who this is for */
.home-families { background: var(--marine); color: var(--limewash); }
.home-families .plaque { color: var(--laterite-glow); }
.families { display: grid; gap: 0; margin-top: var(--s-7); }
@media (min-width: 900px) { .families { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.family { padding: var(--s-5) 0; border-top: var(--hairline-light); display: flex; flex-direction: column; gap: var(--s-3); }
@media (min-width: 900px) { .family { padding: var(--s-2) var(--s-6) var(--s-2); border-top: 0; border-left: var(--hairline-light); } .family:first-child { padding-left: 0; border-left: 0; } }
.family h3 { font-size: var(--t-xl); line-height: 1.1; max-width: 14ch; }
.family p { color: var(--foam); }
.family a { margin-top: auto; padding-top: var(--s-3); color: var(--limewash); font-weight: 500; text-decoration-color: rgba(217,142,99,.7); }

/* 6 · the numbers, late */
.ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 0; margin-top: var(--s-7); border-top: 2px solid var(--ink); }
.ledger div { padding: var(--s-5) var(--s-5) var(--s-5) 0; border-bottom: var(--hairline); }
.ledger dt { font: 400 clamp(2.2rem, 2.8vw + 1.1rem, 3.4rem)/1 var(--font-display); letter-spacing: -.02em; color: var(--marine); font-variant-numeric: lining-nums; }
.ledger dd { margin: var(--s-3) 0 0; font-size: var(--t-sm); color: var(--ink-soft); max-width: 28ch; }
.home-numbers-foot { margin-top: var(--s-6); gap: var(--s-3) var(--s-5); }
.home-faq { display: grid; gap: var(--s-5) var(--s-9); margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hairline); }
@media (min-width: 960px) { .home-faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); } .home-faq .faq { margin-top: 0; } }
.home-faq h2 { max-width: 12ch; }
.hero-alt { margin-top: var(--s-4); font-size: var(--t-sm); color: var(--foam); }
/* hero date check: two by two on wider screens so every placeholder reads whole */
@media (min-width: 560px) {
  .hero-slot .gwc-form { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-slot .gwc-form [role="status"] { grid-column: 1 / -1; }
}
.hero-slot .gwc-form button { width: 100%; }

/* ---- goa/venues.css ---- */
/* css/goa/venues.css — the venue book, hubs, village pages and a single venue. */

/* ---- the book: filter bar, then a ledger of entries ---- */
.venue-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: var(--s-7); padding: var(--s-4) 0; border-top: 2px solid var(--ink); position: sticky; top: 4.25rem; z-index: 5; background: var(--limewash); }
@media (max-width: 959px) { .venue-toolbar { position: static; } }
.venue-search { flex: 1 1 100%; min-height: 3rem; padding: .6rem .9rem; border: 1.5px solid color-mix(in srgb, var(--ink) 25%, transparent); border-radius: var(--radius); background: #fff; }
@media (min-width: 760px) { .venue-search { flex: 0 1 20rem; margin-right: .5rem; } }
.venue-search:focus { outline: none; border-color: var(--laterite); box-shadow: 0 0 0 3px color-mix(in srgb, var(--laterite) 22%, transparent); }
.venue-count { margin-left: auto; font: 500 .85rem/1 var(--font-figure); color: var(--ink-soft); }
#venue-grid { display: block; margin-top: 0; }
#venue-grid .venue-card { display: grid; grid-template-columns: 1fr; gap: .15rem; border-top: 0; border-bottom: var(--hairline); padding: var(--s-4) 0; }
@media (min-width: 760px) {
  #venue-grid .venue-card { grid-template-columns: 10rem minmax(0, 1.5fr) minmax(0, 1.2fr); align-items: baseline; gap: var(--s-5); padding: var(--s-4) var(--s-3); margin-inline: calc(var(--s-3) * -1); border-radius: 3px; transition: background-color .25s; }
  #venue-grid .venue-card:hover { background: var(--sand); }
}
#venue-grid .venue-card-body { display: contents; }
#venue-grid .venue-card-where { margin: 0; }
#venue-grid .venue-card h3 { font-size: var(--t-md); line-height: 1.3; }
#venue-grid .venue-card-facts { margin: 0; }
#venue-grid .venue-card-media { display: none; }
.js #venue-grid[data-collapsed="true"] > :nth-child(n+13) { display: none; }
@media (min-width: 641px) { .js #venue-grid[data-collapsed="true"] > :nth-child(n+13) { display: grid; } }
.grid-more { display: none; margin: var(--s-5) 0 0; }
@media (max-width: 640px) { .js #venue-grid[data-collapsed="true"] + .grid-more { display: block; } }
.grid-more .btn { width: 100%; }
.venue-empty { padding: var(--s-8) 0; color: var(--ink-soft); font: 400 var(--t-lg)/1.4 var(--font-display); }
.book-villages { margin-top: var(--s-9); padding-top: var(--s-7); border-top: var(--hairline); }

/* ---- a single venue: the brief under the masthead ---- */
.venue-brief { display: grid; gap: var(--s-6) var(--s-8); align-items: start; }
@media (min-width: 900px) { .venue-brief { grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 1fr); } }
.venue-brief-main > * + * { margin-top: var(--s-5); }
.venue-facts { background: var(--sand); padding: var(--s-5); border-radius: 4px; position: relative; }
.venue-facts .fact-table { margin-top: 0; border-top: 0; }
.venue-facts .fact-table th { width: 42%; font-weight: 500; color: var(--ink-soft); font-size: var(--t-xs); }
.venue-facts .fact-table td { font-size: .92rem; }
.venue-facts .fact-table tr:last-child th, .venue-facts .fact-table tr:last-child td { border-bottom: 0; }
.venue-facts-title { font: 440 var(--t-md)/1.3 var(--font-display); margin-bottom: var(--s-2); }
.venue-more { font-size: var(--t-sm); padding-bottom: var(--s-6); }

/* ---- the locator map in a masthead ---- */
.mast-aside .goa-map { filter: drop-shadow(0 18px 30px rgba(0, 20, 22, .35)); }
.mast-aside figcaption { color: var(--foam); font-size: var(--t-xs); margin-top: var(--s-2); }
@media (max-width: 899px) { .mast-aside { width: 100%; } .mast-aside figure { display: grid; grid-template-columns: 6rem 1fr; gap: var(--s-4); align-items: center; } .mast-aside .map-pin text { display: none; } .mast-aside .goa-map.is-crop { max-height: 8rem; } }

/* ---- hub and village pages ---- */
.hub-map-note { font-size: var(--t-xs); color: var(--foam); margin-top: var(--s-2); }
.h1-colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.venue-facts .gwc-slot { margin-top: var(--s-5); }
.venue-facts .pg-dossier-brand { margin: 0; padding: var(--s-4); }
.venue-facts .pg-dossier-brand .gwc-form input { flex-basis: 100%; }

.locator:not(.is-crop) .map-pin.is-on circle { transform: scale(2); }
@media (max-width: 899px) { .locator:not(.is-crop) .map-pin.is-on circle { transform: scale(4.5); } .locator.is-crop .map-pin.is-on circle { transform: scale(1.6); } }
@media (max-width: 700px) {
  div:has(> .fact-table) { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
  div:has(> .fact-table) > .fact-table:not(.venue-facts .fact-table) { min-width: 36rem; }
  .fact-table tbody th { min-width: 9.5rem; }
}

/* ---- goa/motion.css ---- */
/* css/goa/motion.css — "the tide, not the app".
   One easing curve. Only transform, opacity, clip-path and stroke offsets move.
   Nothing is hidden unless js/motion.js has run (html.rv); nothing scroll-jacks;
   no will-change anywhere. Under prefers-reduced-motion everything is shown at
   its end state. */

/* The coast draws in, north to south, once, when the homepage opens. The H1
   (the LCP element) never animates. */
@keyframes coast-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pins-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tide-drift { from { transform: translateX(0); } to { transform: translateX(14px); } }
.hero-map .map-land { animation: coast-in 1.6s var(--ease) .15s both; }
.hero-map .map-pin { animation: pins-in .8s var(--ease) 1.2s both; }
.hero-map .map-tide, .mast-aside .map-tide { animation: tide-drift 9s ease-in-out infinite alternate; }

/* Section edges: the high-water line settles once when a band comes into view. */
@keyframes line-settle { from { transform: translateX(-60px); } to { transform: translateX(0); } }
.rv .section-dark.is-in::before { animation: line-settle 1.4s var(--ease) both; }

/* Cross-page fade where the browser supports it. */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .rv .gauge .gauge-bar { clip-path: none !important; }
  .rv .coast-stop { opacity: 1 !important; transform: none !important; }
  .rv .drawing path { stroke-dashoffset: 0 !important; }
  .rv .drawing text { opacity: 1 !important; }
  @view-transition { navigation: none; }
}