/* Ascend Studios homepage.
   Base: the Crimson Plinth system already used on /demo and /updates (warm paper, Instrument Serif,
   Inter Tight, hairlines, one crimson press button per view).
   Borrowed pieces: the video plate hero and row index (Frame & Field), uppercase lockups with italic
   serif connectives on a warm-dark stage (Obra Studio), the bento grid (Boldcase) and a single
   full-bleed brand plane (Tangerine Capital, recoloured to Ascend crimson). */

:root {
  --paper: #f6f2ec;
  --surface: #ffffff;
  --sunken: #efe9e0;
  --ink: #1a1614;
  --ink-2: #4a433d;
  --muted: #6b645d;
  --faint: #8e867e;
  --hairline: #e5dfd6;
  --hairline-strong: #d6cfc3;
  --crimson: #a3202f;
  --crimson-deep: #6e1520;
  --crimson-soft: #f8ecee;

  --stage: #141011;
  --stage-2: #1d1718;
  --stage-line: #33292a;
  --stage-text: #f4e8d7;
  --stage-muted: #a8998b;
  --rose: #f08a96;

  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter Tight", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 12px;
  --radius-lg: 20px;
  --nav-h: 68px;
  --ease-press: cubic-bezier(0.3, 0.7, 0.4, 1);
  --ease-snap: cubic-bezier(0.3, 0.7, 0.4, 1.5);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); -webkit-text-size-adjust: 100%; }
body.home {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
:where(.nav, main, .foot, .sheet) :is(img, video) { display: block; max-width: 100%; }
:where(.nav, main, .foot, .sheet, .cookie) a { color: inherit; }
:where(.nav, main, .foot, .sheet, .cookie) :is(h1, h2, h3, p, ul, ol, figure) { margin: 0; }
:where(.nav, main, .foot, .sheet) :is(ul, ol) { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding-top: 120px; }
.lead { margin-top: 18px; max-width: 60ch; color: var(--muted); font-size: 1.125rem; }

.skip-link { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 100; padding: 10px 14px; background: var(--ink); color: var(--paper); border-radius: 8px; transform: translateY(-200%); }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--crimson); outline-offset: 3px; }

/* ---------- Type ---------- */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 22ch;
  text-wrap: balance;
}
.display em { font-style: italic; color: var(--crimson); }
.display--light, .display--light em { color: var(--paper); }
.display--light em { color: #ffd5d9; }

/* Obra-style lockup: uppercase grotesk with italic serif connectives. */
.lockup {
  font-family: var(--sans);
  font-weight: 800;
  font-size: clamp(1.85rem, 4.4vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-transform: none;
}
.lockup em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.1em;
  letter-spacing: -0.01em;
  color: var(--crimson);
}
.lockup--dark { color: var(--stage-text); max-width: 20ch; }
.lockup--dark em { color: var(--rose); }

/* ---------- Buttons ---------- */
/* The press button: the only element with depth. Its edge sits under the face and compresses on click. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px;
  border: 0; border-radius: var(--radius);
  background: var(--crimson); color: #fff;
  font: 600 1rem/1.1 var(--sans); text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation;
  --edge: var(--crimson-deep);
  box-shadow: 0 4px 0 var(--edge), 0 6px 0 rgba(26, 22, 20, 0.2);
  transition: transform 600ms var(--ease-press), box-shadow 600ms var(--ease-press), filter 250ms;
}
.btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--edge), 0 9px 0 rgba(26, 22, 20, 0.16);
  transition-duration: 250ms; transition-timing-function: var(--ease-snap);
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--edge), 0 2px 0 rgba(26, 22, 20, 0.2); transition-duration: 34ms; }
.btn:focus-visible { outline: 2px solid var(--crimson); outline-offset: 6px; }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 0.9375rem; box-shadow: 0 3px 0 var(--edge), 0 4px 0 rgba(26, 22, 20, 0.18); }
.btn-ink { background: var(--ink); --edge: #000; }
.btn-paper { background: var(--paper); color: var(--ink); --edge: var(--crimson-deep); }
.btn-paper:focus-visible { outline-color: var(--paper); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
  font: 600 1rem/1.2 var(--sans); color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: var(--hairline-strong);
  transition: text-decoration-color 180ms, color 180ms;
}
.btn-ghost:hover { color: var(--crimson); text-decoration-color: currentColor; }
.btn-ghost--light { color: var(--paper); text-decoration-color: rgba(246, 242, 236, 0.45); }
.btn-ghost--light:hover { color: #fff; }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 242, 236, 0.94);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms;
}
.nav.is-scrolled { border-bottom-color: var(--hairline); }
.nav-inner {
  max-width: 1360px; height: var(--nav-h); margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; gap: 28px;
}
.nav-logo img { width: 116px; height: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links > a, .nav-menu-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 12px; border-radius: 10px;
  background: none; border: 0; cursor: pointer;
  font: 500 0.9375rem/1 var(--sans); color: var(--ink-2); text-decoration: none;
  transition: background 160ms, color 160ms;
}
.nav-links > a:hover, .nav-menu-toggle:hover, .nav-menu-toggle[aria-expanded="true"] { background: var(--sunken); color: var(--ink); }
.nav-menu { position: relative; }
.nav-menu-toggle svg { transition: transform 200ms; }
.nav-menu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-menu-panel {
  position: absolute; top: calc(100% + 10px); left: 50%; width: 280px;
  transform: translate(-50%, -6px); opacity: 0; visibility: hidden;
  display: grid; grid-template-columns: 1fr; gap: 2px; padding: 8px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 1px 2px rgba(26, 22, 20, 0.04), 0 12px 32px rgba(26, 22, 20, 0.08);
  transition: opacity 160ms, transform 160ms, visibility 0s 160ms;
}
.nav-menu.is-open .nav-menu-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 160ms, transform 160ms; }
.nav-menu-panel a { display: block; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.nav-menu-panel a:hover { background: var(--paper); }
.nav-menu-panel strong { display: block; font-weight: 600; font-size: 0.9375rem; }
.nav-menu-panel span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--muted); }
.nav-cta { flex: none; }
.nav-burger { display: none; }

@media (max-width: 1080px) {
  .nav-inner { gap: 12px; }
  .nav-cta { margin-left: auto; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 6px;
    width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--hairline-strong); border-radius: 10px;
    background: var(--surface); cursor: pointer;
  }
  .nav-burger span { display: block; height: 1.5px; background: var(--ink); transition: transform 200ms; }
  .nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 0 0; z-index: 49;
    flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 12px 24px 40px; overflow-y: auto;
    background: var(--paper); border-top: 1px solid var(--hairline);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 180ms, transform 180ms, visibility 0s 180ms;
  }
  body.menu-open .nav-links { opacity: 1; visibility: visible; transform: none; transition: opacity 180ms, transform 180ms; }
  body.menu-open { overflow: hidden; }
  .nav-links > a, .nav-menu-toggle {
    width: 100%; min-height: 56px; padding: 0; border-radius: 0; justify-content: space-between;
    border-bottom: 1px solid var(--hairline);
    font-family: var(--serif); font-size: 1.75rem; color: var(--ink);
  }
  .nav-links > a:hover, .nav-menu-toggle:hover, .nav-menu-toggle[aria-expanded="true"] { background: none; }
  .nav-menu-panel {
    position: static; width: auto; transform: none; opacity: 1; visibility: visible;
    display: none; grid-template-columns: 1fr; padding: 4px 0 12px; border: 0; box-shadow: none; background: none;
  }
  .nav-menu.is-open .nav-menu-panel { display: grid; transform: none; }
  .nav-menu-panel a { padding: 10px 0; }
}
@media (max-width: 480px) {
  .nav-inner { padding: 0 16px; }
  .nav-logo img { width: 96px; }
  .nav-cta { padding: 0 12px; }
}

/* ---------- Hero: the video plate ---------- */
.hero { padding: 8px 16px 0; }
.hero-plate {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 1360px; margin: 0 auto;
  min-height: min(calc(100svh - var(--nav-h) - 24px), 860px);
  border-radius: var(--radius-lg);
  background: #0d0a0b;
  display: flex; align-items: flex-end;
}
.hero-video { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(13, 10, 11, 0.92) 0%, rgba(13, 10, 11, 0.55) 38%, rgba(13, 10, 11, 0.05) 72%),
    linear-gradient(to right, rgba(13, 10, 11, 0.55) 0%, rgba(13, 10, 11, 0) 60%);
}
.hero-copy { width: 100%; max-width: 980px; padding: clamp(28px, 5vw, 72px); color: var(--paper); }
.hero h1, .hero .hero-h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(3.1rem, 8.6vw, 7.75rem);
  line-height: 0.94; letter-spacing: -0.025em;
  max-width: 13ch;
}
.hero h1 em, .hero .hero-h1 em { font-style: italic; color: var(--rose); }
.hero-sub { margin-top: 22px; max-width: 54ch; font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); color: rgba(246, 242, 236, 0.84); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 32px; }
.hero-tabs {
  display: inline-flex; gap: 4px; margin-bottom: 28px; padding: 4px;
  border: 1px solid rgba(246, 242, 236, 0.22); border-radius: 999px;
}
.hero-tabs button {
  min-height: 38px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer;
  background: none; color: rgba(246, 242, 236, 0.8); font: 500 0.9375rem/1 var(--sans);
  transition: background 180ms, color 180ms;
}
.hero-tabs button.is-active { background: var(--paper); color: var(--ink); }
.hero-panel[hidden] { display: none; }

@media (max-width: 640px) {
  .hero { padding: 4px 8px 0; }
  .hero-plate { min-height: calc(100svh - var(--nav-h) - 12px); border-radius: 16px; }
  .hero-copy { padding: 24px 20px 28px; }
  .hero-actions .btn { width: 100%; }
}

/* ---------- Manifesto ---------- */
.manifesto { padding-top: 112px; }
.manifesto .lockup { max-width: 24ch; }
.manifesto-foot { margin-top: 40px; max-width: 60ch; }
.manifesto-foot p { font-size: 1.125rem; color: var(--ink-2); }
.manifesto-foot .manifesto-press { margin-top: 16px; font-size: 1rem; color: var(--muted); }
.manifesto-press a { color: var(--ink); text-underline-offset: 4px; text-decoration-color: var(--hairline-strong); }
.manifesto-press a:hover { color: var(--crimson); }

/* ---------- Row index (What we build) ---------- */
.rows { margin-top: 48px; border-top: 1px solid var(--ink); }
.row {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--hairline-strong);
}
.row h3 {
  font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.375rem); line-height: 1.05; letter-spacing: -0.01em;
  transition: transform 260ms var(--ease-press), color 200ms;
}
.row p { color: var(--muted); }
.row:hover h3 { transform: translateX(8px); color: var(--crimson); }
@media (max-width: 720px) {
  .row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; }
  .row:hover h3 { transform: none; }
}

/* ---------- Before / after band ---------- */
.band { margin-top: 120px; padding: 104px 0; background: var(--sunken); }
.shift { width: 100%; margin-top: 44px; border-collapse: collapse; font-size: clamp(1.0625rem, 1.8vw, 1.375rem); }
.shift th {
  padding: 0 0 14px; text-align: left; font: 600 0.875rem/1 var(--sans); color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
.shift td { padding: 20px 0; border-bottom: 1px solid var(--hairline-strong); vertical-align: top; width: 50%; }
.shift td:first-child { padding-right: 24px; color: var(--muted); }
.shift td:last-child { font-weight: 600; }
.shift td:last-child::before { content: "→"; margin-right: 12px; color: var(--crimson); font-weight: 400; }
@media (max-width: 600px) {
  .band { padding: 72px 0; margin-top: 80px; }
  .shift thead { display: none; }
  .shift tr { display: block; padding: 16px 0; border-bottom: 1px solid var(--hairline-strong); }
  .shift td { display: block; width: auto; padding: 0; border: 0; }
  .shift td:last-child { margin-top: 4px; }
}

/* ---------- Real estate bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.tile { position: relative; overflow: hidden; border-radius: 16px; }
.tile--media { grid-column: span 4; grid-row: span 2; min-height: 460px; background: #0d0a0b; }
.tile--media video, .tile--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--media figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 64px 28px 24px;
  font-family: var(--serif); font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; color: var(--paper);
  background: linear-gradient(to top, rgba(13, 10, 11, 0.85), rgba(13, 10, 11, 0));
}
.tile--crimson {
  grid-column: span 2; padding: 28px; background: var(--crimson); color: var(--paper);
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
}
.tile-statement { font-family: var(--serif); font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.04; letter-spacing: -0.01em; }
.tile-statement em { display: block; font-style: italic; color: #ffd5d9; }
.tile-link { align-self: flex-start; font-weight: 600; text-underline-offset: 6px; text-decoration-color: rgba(246, 242, 236, 0.5); }
.tile-link:hover { text-decoration-color: currentColor; }
.tile--paper { grid-column: span 2; padding: 8px 24px; background: var(--surface); border: 1px solid var(--hairline); }
.fixes li { padding: 14px 0; border-bottom: 1px solid var(--hairline); }
.fixes li:last-child { border-bottom: 0; }
.fixes s { display: block; font-size: 0.875rem; color: var(--faint); text-decoration-color: rgba(142, 134, 126, 0.6); }
.fixes span { display: block; margin-top: 2px; font-weight: 600; }
.tile--flow { grid-column: span 2; background: #0d0a0b; color: var(--stage-muted); }
.tile--flow img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.tile--flow figcaption { padding: 16px 20px 20px; font-size: 0.9375rem; }
.tile--flow strong { color: var(--stage-text); font-weight: 600; }
.tile--features {
  grid-column: span 6; padding: 32px; background: var(--surface); border: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px;
}
.tile--features h3 { font-size: 1.0625rem; font-weight: 600; }
.tile--features p { margin-top: 6px; font-size: 0.9375rem; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 36px; }

@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile--media { grid-column: span 2; grid-row: auto; min-height: 340px; }
  .tile--crimson, .tile--paper, .tile--flow { grid-column: span 1; }
  .tile--flow:last-of-type { grid-column: span 2; }
  .tile--flow:last-of-type img { aspect-ratio: 16 / 7; }
  .tile--features { grid-column: span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .tile--media, .tile--crimson, .tile--paper, .tile--flow, .tile--flow:last-of-type, .tile--features { grid-column: auto; }
  .tile--media { min-height: 280px; }
  .tile--flow img, .tile--flow:last-of-type img { aspect-ratio: 16 / 9; }
  .tile--features { grid-template-columns: 1fr; padding: 24px; gap: 20px; }
  .actions .btn { width: 100%; }
}

/* ---------- Reel: the warm-dark stage ---------- */
.reel { position: relative; margin-top: 120px; padding: 0 0 120px; background: var(--stage); color: var(--stage-text); }
.flare { height: 96px; overflow: hidden; }
.flare video { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; opacity: 0.9; }
.reel .wrap { padding-top: 24px; }
.reel-lead { margin-top: 18px; max-width: 52ch; color: var(--stage-muted); font-size: 1.125rem; }
.reel-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px 16px; margin-top: 52px; }
.reel-media {
  aspect-ratio: 2 / 3; overflow: hidden; border-radius: 14px;
  background: var(--stage-2); border: 1px solid var(--stage-line);
}
.reel-media video, .reel-media img { width: 100%; height: 100%; object-fit: cover; }
.reel-card h3 { margin-top: 14px; font-size: 1rem; font-weight: 600; color: var(--stage-text); }
.reel-card p { margin-top: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--stage-muted); }
@media (max-width: 1080px) {
  .reel-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(200px, 30%);
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-right: -24px; padding-right: 24px; padding-bottom: 8px; scrollbar-width: thin; scrollbar-color: var(--stage-line) transparent;
  }
  .reel-card { scroll-snap-align: start; }
}
@media (max-width: 600px) {
  .reel { margin-top: 80px; padding-bottom: 80px; }
  .reel-grid { grid-auto-columns: 62%; margin-right: -16px; padding-right: 16px; }
}

/* ---------- Process ---------- */
.steps { margin-top: 48px; border-top: 1px solid var(--ink); counter-reset: none; }
.steps li {
  display: grid; grid-template-columns: 72px minmax(0, 4fr) minmax(0, 6fr); gap: 24px; align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid var(--hairline-strong);
}
.step-n { font-family: var(--serif); font-style: italic; font-size: 2.25rem; line-height: 1; color: var(--crimson); }
.steps h3 { font-size: 1.25rem; font-weight: 600; }
.steps p { color: var(--muted); }
#process > .btn { margin-top: 40px; }
@media (max-width: 720px) {
  .steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 4px 12px; }
  .steps p { grid-column: 2; }
  .step-n { font-size: 1.875rem; }
  #process > .btn { width: 100%; }
}

/* ---------- Zamili: the crimson plane ---------- */
.plane { margin-top: 120px; padding: 112px 0 80px; background: var(--crimson); color: var(--paper); }
.plane-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.plane-copy > p { margin-top: 22px; max-width: 48ch; font-size: 1.125rem; color: rgba(246, 242, 236, 0.9); }
.plane-copy .btn { margin-top: 36px; }
.ticks { margin-top: 28px; }
.ticks li { position: relative; padding: 10px 0 10px 30px; border-top: 1px solid rgba(246, 242, 236, 0.22); }
.ticks li:last-child { border-bottom: 1px solid rgba(246, 242, 236, 0.22); }
.ticks li::before {
  content: ""; position: absolute; left: 3px; top: 17px;
  width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg);
}
.plane-figure img {
  width: 100%; height: auto; border-radius: 16px; border: 1px solid rgba(246, 242, 236, 0.2);
  box-shadow: 0 2px 4px rgba(40, 6, 10, 0.18), 0 24px 48px rgba(40, 6, 10, 0.28);
}
.zamili-clients { margin-top: 72px; }
.zamili-clients p { font-size: 0.9375rem; font-weight: 600; color: rgba(246, 242, 236, 0.85); }
.zamili-clients ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.zamili-clients li { width: 76px; height: 76px; padding: 8px; border-radius: 12px; background: #fff; display: grid; place-items: center; }
.zamili-clients img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; }
@media (max-width: 900px) {
  .plane { padding: 80px 0 64px; margin-top: 80px; }
  .plane-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .zamili-clients li { width: 64px; height: 64px; }
}

/* ---------- Clients ---------- */
.logo-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin-top: 44px;
  border-top: 1px solid var(--hairline-strong); border-left: 1px solid var(--hairline-strong);
}
.logo-grid li {
  aspect-ratio: 1 / 1; display: grid; place-items: center; padding: 14px;
  background: var(--surface); border-right: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong);
}
.logo-grid img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 960px) { .logo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 480px) { .logo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Recognition ---------- */
.honours { margin-top: 44px; border-top: 1px solid var(--ink); }
.honours li {
  display: grid; grid-template-columns: 120px 132px minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--hairline-strong);
}
.honour-kind { font-size: 0.9375rem; color: var(--muted); }
.honour-logo { width: 132px; height: 56px; padding: 6px 10px; border-radius: 10px; background: var(--surface); border: 1px solid var(--hairline); display: block; overflow: hidden; }
.honour-logo img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.honour-name { font-family: var(--serif); font-size: clamp(1.375rem, 2.4vw, 1.875rem); line-height: 1.15; text-decoration: none; }
a.honour-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; text-decoration-color: var(--hairline-strong); }
a.honour-name:hover { color: var(--crimson); text-decoration-color: currentColor; }
@media (max-width: 640px) {
  .honours li { grid-template-columns: 104px minmax(0, 1fr); gap: 8px 16px; }
  .honour-kind { grid-column: 1 / -1; }
  .honour-logo { width: 104px; height: 48px; }
}

/* ---------- Writing ---------- */
.writing { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 40px; margin-top: 44px; align-items: start; }
.post--lead {
  display: grid; grid-template-columns: 200px minmax(0, 1fr); overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px; text-decoration: none;
  transition: border-color 200ms;
}
.post--lead:hover { border-color: var(--hairline-strong); }
.post--lead img { width: 100%; height: 100%; min-height: 100%; object-fit: cover; }
.post-body { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.post-src { font-size: 0.875rem; font-weight: 600; color: var(--crimson); }
.post-body strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.25rem); line-height: 1.05; }
.post-body > span:last-child { color: var(--muted); }
.post-list .post { display: block; padding: 20px 0; border-bottom: 1px solid var(--hairline-strong); text-decoration: none; font-family: var(--sans), "Segoe UI", Tahoma, sans-serif; }
.post-list .post:first-child { border-top: 1px solid var(--ink); }
.post-list .post strong { display: block; font-size: 1.1875rem; font-weight: 600; }
.post-list .post span { display: block; margin-top: 4px; color: var(--muted); font-size: 0.9375rem; }
.post-list .post:hover strong { color: var(--crimson); }
.post-links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; }
@media (max-width: 900px) { .writing { grid-template-columns: 1fr; } }
@media (max-width: 520px) {
  .post--lead { grid-template-columns: 112px minmax(0, 1fr); }
  .post-body { padding: 18px; }
}

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; max-width: 880px; border-top: 1px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--hairline-strong); }
.faq summary {
  position: relative; padding: 22px 48px 22px 0; cursor: pointer; list-style: none;
  font-family: var(--serif); font-size: clamp(1.375rem, 2.6vw, 1.875rem); line-height: 1.15;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 16px; height: 1.5px; background: var(--ink);
  transition: transform 220ms var(--ease-press);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--crimson); }
.faq details p { padding: 0 48px 24px 0; max-width: 62ch; color: var(--ink-2); }
.faq details a { color: var(--crimson); text-underline-offset: 3px; }

/* ---------- Contact ---------- */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px;
  padding: clamp(28px, 5vw, 64px); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
}
.contact-copy > p { margin-top: 18px; color: var(--muted); max-width: 42ch; }
.contact-direct { margin-top: 28px; }
.contact-direct li { padding: 8px 0; font-size: 1.125rem; }
.contact-direct a { text-decoration: none; border-bottom: 1px solid var(--hairline-strong); }
.contact-direct a:hover { color: var(--crimson); border-color: currentColor; }
.contact-call { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.contact-call p { margin-bottom: 14px; color: var(--muted); }
.contact-form { display: grid; gap: 18px; align-content: start; }
.contact-form .btn { justify-self: start; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.field input, .field textarea, .inline-form input {
  width: 100%; padding: 13px 14px; border: 1px solid var(--hairline-strong); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: 400 1rem/1.4 var(--sans);
  transition: border-color 160ms, box-shadow 160ms, background 160ms;
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus, .inline-form input:focus {
  outline: none; border-color: var(--crimson); background: #fff; box-shadow: 0 0 0 3px rgba(163, 32, 47, 0.12);
}
.fine { font-size: 0.8125rem; line-height: 1.5; color: var(--faint); }
.fine a { color: var(--muted); }
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact-form .btn, .contact-call .btn { width: 100%; }
}

/* ---------- Footer ---------- */
.foot { margin-top: 120px; padding: 72px 0 32px; background: var(--stage); color: #cfc6bb; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)) minmax(0, 1.3fr); gap: 40px; }
.foot-brand img { width: 150px; height: auto; }
.foot-brand p { margin-top: 18px; max-width: 30ch; color: var(--stage-muted); font-size: 0.9375rem; }
.foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 0.9375rem; }
.foot-col a { text-decoration: none; width: fit-content; }
.foot-col a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.socials { display: flex; gap: 8px; margin-top: 8px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--stage-line); border-radius: 10px; }
.socials a:hover { border-color: var(--stage-muted); text-decoration: none; }
.foot-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--stage-line); font-size: 0.8125rem; color: var(--stage-muted); }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 420px) { .foot-grid { grid-template-columns: 1fr; } }

/* ---------- Dialogs, toast, cookie notice ---------- */
.sheet {
  width: min(440px, calc(100% - 32px)); padding: 32px 28px 28px; border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 4px rgba(26, 22, 20, 0.06), 0 24px 64px rgba(26, 22, 20, 0.22);
}
.sheet::backdrop { background: rgba(20, 16, 17, 0.55); }
.sheet h2 { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.05; padding-right: 32px; }
.sheet > p { margin-top: 10px; color: var(--muted); }
.sheet form { display: grid; gap: 14px; margin-top: 22px; }
.sheet form .btn { width: 100%; }
.sheet-close {
  position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: none; font-size: 1.6rem; line-height: 1; color: var(--muted); cursor: pointer;
}
.sheet-close:hover { background: var(--sunken); color: var(--ink); }
.sheet-error { color: var(--crimson); font-size: 0.9375rem; }
.sheet-note { margin-top: 12px; font-size: 0.9375rem; color: var(--ink-2); }
.sheet-note:empty { display: none; }
.inline-form { grid-template-columns: minmax(0, 1fr) auto !important; }
.inline-form .btn { width: auto !important; }
.hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
@media (max-width: 420px) { .inline-form { grid-template-columns: 1fr !important; } .inline-form .btn { width: 100% !important; } }

.toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 10001;
  transform: translateX(-50%); max-width: calc(100% - 32px); padding: 14px 20px; border-radius: 12px;
  background: var(--ink); color: var(--paper); font-size: 0.9375rem;
  box-shadow: 0 2px 4px rgba(26, 22, 20, 0.1), 0 16px 40px rgba(26, 22, 20, 0.24);
}

.cookie {
  position: fixed; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  width: min(380px, calc(100% - 112px)); padding: 16px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--hairline);
  box-shadow: 0 2px 4px rgba(26, 22, 20, 0.05), 0 16px 40px rgba(26, 22, 20, 0.14);
}
.cookie.show { display: block; }
.cookie p { font-size: 0.875rem; color: var(--ink-2); }
.cookie p a { color: var(--crimson); text-underline-offset: 3px; }
.cookie div { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 10px; }
.cookie .btn-ghost { min-height: 40px; font-size: 0.9375rem; }

@media (max-width: 640px) {
  .section { padding-top: 80px; }
  .manifesto { padding-top: 72px; }
  .wrap { padding: 0 16px; }
  .foot { margin-top: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .row h3, .nav-links, .nav-menu-panel { transition: none; }
}

/* ---------- Booking widget: same palette as the /demo widget (rules copied from demo/demo.css, rescoped) ---------- */
.home .asc-booking { color: #1a1614; }
.home .asc-booking .asc-cal__info { border-right: 1px solid #e5dfd6; }
.home .asc-booking .asc-cal__info.is-overlay-scrollbar-visible { scrollbar-color: rgba(26, 22, 20, 0.38) transparent; }
.home .asc-booking .asc-cal__info.is-overlay-scrollbar-visible::-webkit-scrollbar-thumb { background: rgba(26, 22, 20, 0.38); }
.home .asc-booking .asc-cal__info.is-overlay-scrollbar-visible::-webkit-scrollbar-thumb:hover { background: rgba(26, 22, 20, 0.52); }
.home .asc-booking .asc-cal__brand-sep { background: #e5dfd6; }
.home .asc-booking .asc-cal__brand span { color: #a3202f; }
.home .asc-booking .asc-cal__avatar { border: 3px solid #efe9e0; }
.home .asc-booking .asc-cal__host { color: #6b645d; }
.home .asc-booking .asc-cal__title { color: #1a1614; }
.home .asc-booking .asc-cal__meta li { color: #4a433d; }
.home .asc-booking .asc-cal__meta svg { color: #6b645d; }
.home .asc-booking .asc-cal__meta li:nth-child(2) { color: #6b645d; }
.home .asc-booking .asc-cal__desc { color: #4a433d; }
.home .asc-booking .asc-cal__desc-lead { color: #1a1614; }
.home .asc-booking .asc-cal__more-toggle { color: #a3202f; }
.home .asc-booking .asc-cal__section { border-top: 1px solid #e5dfd6; }
.home .asc-booking .asc-cal__section summary { color: #1a1614; }
.home .asc-booking .asc-cal__section summary::after { color: #6b645d; }
.home .asc-booking .asc-cal__check, .home .asc-booking .asc-cal__dots, .home .asc-booking .asc-cal__nope { color: #4a433d; }
.home .asc-booking .asc-cal__dots li::before { background: #a3202f; }
.home .asc-booking .asc-cal__invest strong { color: #1a1614; }
.home .asc-booking .asc-cal__foot { border-top: 1px solid #e5dfd6; border-right: 1px solid #e5dfd6; }
.home .asc-booking .asc-cal__foot-link { color: #a3202f; }
.home .asc-booking .asc-cal__view-title { color: #1a1614; }
.home .asc-booking .asc-booking-error { border-left: 3px solid #a3202f; background: #f8ecee; color: #8a1a27; }
.home .asc-booking .asc-cal__month { color: #1a1614; }
.home .asc-booking .asc-cal__nav-btn { color: #4a433d; }
.home .asc-booking .asc-cal__nav-btn:hover:not(:disabled) { background: rgba(26, 22, 20, 0.06); }
.home .asc-booking .asc-cal__weekdays span { color: #8e867e; }
.home .asc-booking .asc-cal__picker.has-times .asc-cal__picker-left { border-right: 1px solid #e5dfd6; }
.home .asc-booking .asc-cal__slots-day { color: #1a1614; }
.home .asc-booking .asc-cal__day { color: #1a1614; }
.home .asc-booking .asc-cal__day--available { background: #f8ecee; color: #a3202f; }
.home .asc-booking .asc-cal__day--available:hover { background: #a3202f; }
.home .asc-booking .asc-cal__day--selected { background: #a3202f; }
.home .asc-booking .asc-cal__day--disabled { color: #cfc7bb; }
.home .asc-booking .asc-cal__tz { border-top: 1px solid #e5dfd6; }
.home .asc-booking .asc-cal__tz-label { color: #1a1614; }
.home .asc-booking .asc-cal__tz-toggle { color: #1a1614; }
.home .asc-booking .asc-cal__tz-toggle:hover { background: rgba(26, 22, 20, 0.04); border-color: #e5dfd6; }
.home .asc-booking .asc-cal__tz-globe { color: #6b645d; }
.home .asc-booking .asc-cal__tz-caret { color: #6b645d; }
.home .asc-booking .asc-cal__tz-panel { border: 1px solid #e5dfd6; box-shadow: 0 16px 48px rgba(26, 22, 20, 0.18); }
.home .asc-booking .asc-cal__tz-search { border-bottom: 1px solid #efe9e0; color: #6b645d; }
.home .asc-booking .asc-cal__tz-search input { color: #1a1614; }
.home .asc-booking .asc-cal__tz-head-label { color: #8e867e; }
.home .asc-booking .asc-cal__tz-fmt { color: #6b645d; }
.home .asc-booking .asc-cal__switch { background: #a3202f; }
.home .asc-booking .asc-cal__tz-item { color: #4a433d; }
.home .asc-booking .asc-cal__tz-item:hover { background: #f6f2ec; }
.home .asc-booking .asc-cal__tz-item.is-selected { background: #f8ecee; color: #a3202f; }
.home .asc-booking .asc-cal__tz-item-time { color: #1a1614; }
.home .asc-booking .asc-cal__tz-empty { color: #8e867e; }
.home .asc-booking .asc-cal__back { color: #a3202f; }
.home .asc-booking .asc-cal__slots-hint { color: #8e867e; }
.home .asc-booking .asc-cal__slot-btn { border: 1px solid #a3202f; color: #a3202f; }
.home .asc-booking .asc-cal__slot-btn:hover { background: #a3202f; }
.home .asc-booking .asc-cal__slot-btn.is-selected { background: #a3202f; }
.home .asc-booking .asc-cal__picked { color: #a3202f; }
.home .asc-booking .asc-cal__field label { color: #1a1614; }
.home .asc-booking .asc-cal__field input[type="text"], .home .asc-booking .asc-cal__field input[type="email"], .home .asc-booking .asc-cal__field input[type="tel"] { border: 1px solid #d6cfc3; color: #1a1614; }
.home .asc-booking .asc-cal__field textarea { border: 1px solid #d6cfc3; color: #1a1614; }
.home .asc-booking .asc-cal__field-note { color: #8e867e; }
.home .asc-booking .asc-cal__field input:focus { border-color: #a3202f; box-shadow: 0 0 0 3px rgba(163, 32, 47, 0.12); }
.home .asc-booking .asc-cal__field textarea:focus { border-color: #a3202f; box-shadow: 0 0 0 3px rgba(163, 32, 47, 0.12); }
.home .asc-booking .asc-cal__invest-q legend { color: #4a433d; }
.home .asc-booking .asc-cal__choice span { border: 1px solid #d6cfc3; color: #4a433d; }
.home .asc-booking .asc-cal__choice input:checked + span { border-color: #a3202f; background: #f8ecee; color: #a3202f; }
.home .asc-booking .asc-cal__submit { background: #a3202f; }
.home .asc-booking .asc-cal__progress-pct { color: #a3202f; }
.home .asc-booking .asc-cal__progress-label { color: #4a433d; }
.home .asc-booking .asc-cal__step-title { color: #1a1614; }
.home .asc-booking .asc-cal__step-hint { color: #6b645d; }
.home .asc-booking .asc-cal__chip-q legend { color: #1a1614; }
.home .asc-booking .asc-cal__chip span { border: 1px solid #d6cfc3; color: #4a433d; }
.home .asc-booking .asc-cal__chip span:hover { border-color: #cfc7bb; }
.home .asc-booking .asc-cal__chip input:checked + span { border-color: #a3202f; background: #f8ecee; color: #a3202f; }
.home .asc-booking .asc-cal__invest-lead { color: #4a433d; }
.home .asc-booking .asc-cal__agree { color: #1a1614; }
.home .asc-booking .asc-cal__agree input { accent-color: #a3202f; }
.home .asc-booking .asc-cal__qualify-back { border: 1px solid #d6cfc3; color: #4a433d; }
.home .asc-booking .asc-cal__qualify-back:hover { border-color: #a3202f; color: #a3202f; }
.home .asc-booking .asc-cal__success-title { color: #1a1614; }
.home .asc-booking .asc-cal__success-when { color: #a3202f; }
.home .asc-booking .asc-cal__success-line { color: #4a433d; }
.home .asc-booking .asc-cal__success-line--strong { color: #1a1614; }
@media (max-width: 768px) {
  .home .asc-booking .asc-cal__foot { border-top: 1px solid #e5dfd6; }
  .home .asc-booking .asc-cal__schedule { border-top: 1px solid #e5dfd6; }
  .home .asc-booking .asc-cal__picker.has-times .asc-cal__picker-left { border-bottom: 1px solid #e5dfd6; }
  .home .asc-booking .asc-cal__qualify-nav { border-top: 1px solid #efe9e0; }
}

/* ---------- Booking widget: type, buttons and surfaces ---------- */
.home .asc-booking,
.home .asc-booking button,
.home .asc-booking input,
.home .asc-booking textarea { font-family: var(--sans); }
.home .asc-booking { color: var(--ink); }
.home .asc-booking .asc-cal__title { font-family: var(--serif); font-weight: 400; font-size: 2rem; line-height: 1.05; letter-spacing: -0.015em; }
.home .asc-booking .asc-cal__view-title { font-weight: 600; }
.home .asc-booking .asc-cal__milestone { background: var(--paper); border: 1px solid var(--hairline); }
.home .asc-booking .asc-cal__progress-track { background: var(--sunken); }
.home .asc-booking .asc-cal__progress-bar { background: var(--crimson); }
.home .asc-booking .asc-cal__slot-btn,
.home .asc-booking .asc-cal__chip span,
.home .asc-booking .asc-cal__field input[type="text"],
.home .asc-booking .asc-cal__field input[type="email"],
.home .asc-booking .asc-cal__field input[type="tel"] { border-radius: 10px; }
.home .asc-booking .asc-cal__submit {
  border-radius: var(--radius);
  background: var(--crimson);
  font-weight: 600; font-size: 1rem;
  animation: none;
  box-shadow: 0 4px 0 var(--crimson-deep), 0 6px 0 rgba(26, 22, 20, 0.2);
  transition: transform 600ms var(--ease-press), box-shadow 600ms var(--ease-press), filter 250ms;
}
.home .asc-booking .asc-cal__submit:hover:not(:disabled) {
  background: var(--crimson); filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 var(--crimson-deep), 0 9px 0 rgba(26, 22, 20, 0.16);
  transition-duration: 250ms; transition-timing-function: var(--ease-snap);
}
.home .asc-booking .asc-cal__submit:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--crimson-deep), 0 2px 0 rgba(26, 22, 20, 0.2);
  transition-duration: 34ms;
}
.home .asc-booking .asc-cal__qualify-back { border-radius: var(--radius); font-weight: 500; }
.home .asc-booking .asc-cal__qualify-back:hover { border-color: var(--ink); color: var(--ink); background: var(--sunken); }
/* The base widget uses an emoji check here; use the page's drawn tick instead. */
.home .asc-booking .asc-cal__check li::before {
  content: ""; left: 2px; top: 7px;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--crimson); border-bottom: 1.5px solid var(--crimson);
  transform: rotate(-45deg);
}