/* ───────── mutuals - shared styles ───────── */
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,300..600;1,14..32,300..600&display=swap");

/* OS Rotare - the mutuals display face (headings). Body stays in Inter. */
@font-face {
  font-family: "OS Rotare";
  src: url("../assets/fonts/OSRotareSansVFVariable.ttf") format("truetype");
  font-weight: 300 900;
  font-display: swap;
}

/* Edition palettes - each edition has a background + a mark colour.
   I   Tuscany            terracotta / peach
   II  Hinwick House      burgundy-black / cream
   III South of France   butter / sage
   The house default is neutral (soft linen on warm charcoal) so no edition owns the site. */
:root {
  --house-bg: #221c1a; --house-mark: #ebe4d8;
  --i-bg: #a24437;   --i-mark: #f9bc93;
  --ii-bg: #2a1311;  --ii-mark: #f9e9c7;
  --iii-bg: #f2deaa; --iii-mark: #84a2a5; --iii-ink: #3f5d61;

  --sans: "Inter", system-ui, sans-serif;
  --display: "OS Rotare", "Inter", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1180px;
  --ease: cubic-bezier(.22, .8, .2, 1);
}

/* A theme sets --bg (background), --cream (text), --mark (logo) and --wine (accent band);
   dim text, rules and raised surfaces are mixed from those. */
:root, .theme-house {
  --bg: var(--house-bg); --cream: var(--house-mark); --mark: var(--house-mark); --wine: #2e2623;
}
.theme-ii {
  --bg: var(--ii-bg); --cream: var(--ii-mark); --mark: var(--ii-mark); --wine: #46201b;
}
.theme-i {
  --bg: var(--i-bg); --cream: var(--i-mark); --mark: var(--i-mark); --wine: #8e3a2e;
}
.theme-iii {
  --bg: var(--iii-bg); --cream: var(--iii-ink); --mark: var(--iii-mark); --wine: #ead08f;
}
:root, .theme-house, .theme-i, .theme-ii, .theme-iii {
  --cream-dim: color-mix(in srgb, var(--cream) 66%, transparent);
  --line: color-mix(in srgb, var(--cream) 18%, transparent);
  --bg-raised: color-mix(in srgb, var(--bg) 92%, var(--cream));
}
.theme-house, .theme-i, .theme-ii, .theme-iii { background: var(--bg); color: var(--cream); }
/* peach on terracotta needs a stronger secondary text to stay readable */
.theme-i { font-weight: 400; --cream-dim: color-mix(in srgb, var(--cream) 92%, transparent); --line: color-mix(in srgb, var(--cream) 28%, transparent); }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--cream); color: var(--bg); }

/* ───────── type ───────── */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--cream-dim);
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.04; letter-spacing: -.02em; }
h1 { font-size: clamp(40px, 7vw, 96px); }
h2 { font-size: clamp(34px, 5vw, 64px); }
h3 { font-size: clamp(24px, 2.6vw, 32px); }
em { font-style: italic; }
.lede { font-size: clamp(20px, 2vw, 26px); line-height: 1.45; letter-spacing: -.015em; font-weight: 300; }
p + p { margin-top: 1em; }
.muted { color: var(--cream-dim); }

/* ───────── layout ───────── */
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(80px, 12vw, 160px) 0; }
.rule { border: 0; border-top: 1px solid var(--line); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 820px) { .grid-2 { grid-template-columns: 1fr; } }

/* ───────── nav ───────── */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--gutter);
  transition: background .4s var(--ease), padding .4s var(--ease);
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); padding-top: 14px; padding-bottom: 14px; }
.nav-logo { display: flex; align-items: center; }
.nav-logo .mark { height: 22px; width: auto; color: var(--mark); }
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); list-style: none; }
.nav-links a {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  position: relative; padding: 4px 0; opacity: .82; transition: opacity .3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease);
}
.nav-links a:hover, .nav-links a[aria-current="page"] { opacity: 1; }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-cta { border: 1px solid var(--cream); padding: 8px 14px !important; border-radius: 999px; }
.nav-cta::after { display: none; }
.nav-cta:hover { background: var(--cream); color: var(--bg); }
.nav-toggle { display: none; background: none; border: 0; color: inherit; font: inherit; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: fixed; inset: 0; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
    background: var(--bg); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
  }
  .nav-links a { font-size: 34px; letter-spacing: 0; text-transform: none; }
  .nav.open .nav-links { opacity: 1; pointer-events: auto; }
  .nav.open .nav-toggle { position: relative; z-index: 2; }
}

/* ───────── buttons ───────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase; font-weight: 400;
  padding: 16px 28px; border: 1px solid var(--cream); border-radius: 999px;
  background: transparent; color: var(--cream); cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease);
}
.btn:hover { background: var(--cream); color: var(--bg); }
.btn.solid { background: var(--cream); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--cream); }
.btn .arrow { transition: transform .35s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

/* ───────── page header (inner pages) ───────── */
.page-head { padding-top: clamp(140px, 20vw, 220px); padding-bottom: clamp(50px, 8vw, 90px); }
.page-head h1 { margin-top: 18px; max-width: 14ch; }
.page-head .lede { margin-top: 28px; max-width: 34ch; color: var(--cream-dim); }

/* ───────── footer ───────── */
.footer { border-top: 1px solid var(--line); padding: 64px 0 40px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; align-items: end; }
.footer-logo { display: flex; align-items: center; gap: 16px; }
.footer-logo .mark { height: 26px; width: auto; color: var(--mark); }
.footer-logo .mark-picture { height: 56px; }
.mark { display: block; }
.footer small { display: block; margin-top: 14px; font-size: 12px; color: var(--cream-dim); }
.footer ul { list-style: none; display: flex; gap: 28px; flex-wrap: wrap; }
.footer a { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.footer a:hover { opacity: 1; }

/* ───────── scroll reveal ───────── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .12s; } .reveal.d2 { transition-delay: .24s; } .reveal.d3 { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ───────── brand marks ───────── */