/* Layout: Swiss grid, max 1280px. Numbered sections with a label column, sections alternate dark and light from 01, plus one pink event band. */
:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --fg: #0A0A0A;
  --muted: #5E5E5E;
  --body-ink: #333333;
  --line: #E2E2E2;
  --rule: #0A0A0A;
  /* Zeramex pink is 4.47:1 on white, just under AA, so small text and filled buttons use a deeper shade. */
  --accent: #E9006F;
  --accent-text: #C2005C;
  --accent-ink: #FFFFFF;
  --accent-soft: #FDE6F0;
  --zirconia: #F4F4F4;
  --invert-bg: #0A0A0A;
  --invert-fg: #FFFFFF;
  --invert-muted: #BDBDBD;
  --invert-line: #3A3A3A;
  --display: "Inter Tight", Helvetica, Arial, sans-serif;
  --body: "Inter Tight", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  /* Light page chrome; dark sections come from the .invert token scope, not from the OS theme. */
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }
body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--body); font-size: 17px; line-height: 1.55; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
a { color: var(--fg); text-decoration: none; }
a:hover { color: var(--accent-text); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4rem); line-height: 1; letter-spacing: -0.035em; max-width: 16em; }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: max(clamp(16px, 4vw, 48px), env(safe-area-inset-left, 0px)); padding-right: max(clamp(16px, 4vw, 48px), env(safe-area-inset-right, 0px)); }
section { padding-block: clamp(56px, 8vw, 112px); }
.ruled { border-top: 1px solid var(--rule); }
.mono { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.lede { font-size: clamp(1.1rem, 1.4vw, 1.25rem); color: var(--body-ink); max-width: 36em; }
/* Buttons: the hover colour wipes in from the left and leaves to the right, the arrow nudges forward. */
.btn {
  --btn-bg: transparent; --btn-fg: var(--fg); --btn-line: var(--fg);
  --btn-hover-bg: var(--fg); --btn-hover-fg: var(--bg);
  --btn-ease: cubic-bezier(0.65, 0, 0.35, 1);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; font-weight: 600; text-decoration: none; font-size: 1rem; cursor: pointer; font-family: inherit; line-height: 1.2;
  background: var(--btn-bg); color: var(--btn-fg); border: 1.5px solid var(--btn-line);
  transition: color 0.5s var(--btn-ease), border-color 0.5s var(--btn-ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--btn-hover-bg); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--btn-ease); }
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg); border-color: var(--btn-hover-bg); }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.btn > [aria-hidden] { display: inline-block; transition: transform 0.5s var(--btn-ease); }
.btn:hover > [aria-hidden], .btn:focus-visible > [aria-hidden] { transform: translateX(5px); }
.btn-primary { --btn-bg: var(--fg); --btn-fg: var(--bg); --btn-hover-bg: var(--accent-text); --btn-hover-fg: var(--accent-ink); }
.btn-accent { --btn-bg: var(--accent-text); --btn-fg: var(--accent-ink); --btn-line: var(--accent-text); }
/* GSAP swipe (site.js adds is-swipe): the fill is the band between --swipe-a and --swipe-b, and colours follow is-filled */
.btn.is-swipe::before { transform: none; transition: none; clip-path: inset(0 calc(100% - var(--swipe-b, 0%)) 0 var(--swipe-a, 0%)); }
.btn.is-swipe { transition-duration: 0.25s; }
.btn.is-swipe:hover, .btn.is-swipe:focus-visible { color: var(--btn-fg); border-color: var(--btn-line); }
.btn.is-swipe.is-filled { color: var(--btn-hover-fg); border-color: var(--btn-hover-bg); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn > [aria-hidden] { transition-duration: 0.01s; }
}
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* Section head: label column plus heading column */
.sec-head { display: flex; flex-wrap: wrap; gap: 24px 48px; }
.sec-label { flex: 1 1 200px; color: var(--accent-text); font-size: 0.8rem; }
.sec-body { flex: 999 1 640px; min-width: 0; display: grid; gap: 20px; align-content: start; }

/* Header */
header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 9; background: var(--bg); border-bottom: 1px solid var(--rule); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px; min-height: 72px; }
.brand { display: flex; align-items: baseline; gap: 12px; text-decoration: none; color: var(--fg); }
.brand b { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.12em; }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { text-decoration: none; font-weight: 500; font-size: 0.95rem; }
.lang { display: flex; align-items: center; gap: 4px; }
/* Flags stay in full colour; a short bar beneath marks the current language (pink) and the hovered one (grey) */
.lang a, .lang span { position: relative; display: block; padding: 16px 6px; }
.lang img { display: block; width: 24px; height: 12px; box-shadow: 0 0 0 1px var(--line); }
.lang a::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 12px; height: 2px; margin-left: -6px; border-radius: 1px; background: transparent; transition: background-color 0.3s var(--ease-soft); }
.lang a[aria-current]::after { background: var(--accent); }
@media (hover: hover) { .lang a:not([aria-current]):hover::after { background: var(--muted); } }
.lang-soon { cursor: not-allowed; }
.lang-soon img { opacity: 0.25; filter: grayscale(1); }
.nav .btn { padding: 12px 20px; font-size: 0.95rem; }
@media (max-width: 900px) { .nav-links { display: none; } .lang { margin-left: auto; } }
/* Burger mode: the script sets html.nav-burger up to 900px, and wider whenever the flags would still wrap under the logo */
.nav-burger .nav-links { display: none; }
.nav-burger .lang { margin-left: auto; }

/* Mobile menu: a burger that turns into a cross, opening a full-screen panel of large links under the header */
.burger { display: none; position: relative; width: 44px; height: 44px; margin-right: -10px; padding: 0; background: none; border: 0; color: var(--fg); cursor: pointer; }
.burger span { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; transition: transform 0.45s var(--ease-soft), opacity 0.25s var(--ease-soft); }
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mobile-menu { display: none; }
.nav-burger .burger { display: block; }
.nav-burger .mobile-menu {
  display: block; position: fixed; inset: 0; z-index: 8; overflow-y: auto; overscroll-behavior: contain;
  padding: calc(env(safe-area-inset-top, 0px) + 96px) 0 calc(env(safe-area-inset-bottom, 0px) + 32px);
  background: var(--bg);
  opacity: 0; visibility: hidden;
  transition: opacity 0.35s var(--ease-soft), visibility 0s linear 0.35s;
}
.nav-burger .mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity 0.35s var(--ease-soft), visibility 0s; }
.nav-burger .mobile-menu nav { display: grid; border-top: 2px solid var(--rule); margin-bottom: 32px; }
.nav-burger .mobile-menu nav a {
  display: flex; align-items: baseline; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: clamp(2rem, 9vw, 3rem); line-height: 1; letter-spacing: -0.04em;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s var(--ease-soft), transform 0.6s var(--ease-soft), color 0.3s;
}
.nav-burger .mobile-menu nav a .mono { color: var(--accent-text); }
.nav-burger .mobile-menu.is-open nav a { opacity: 1; transform: none; transition-delay: calc(0.08s + var(--i) * 0.05s), calc(0.08s + var(--i) * 0.05s), 0s; }
html.nav-burger.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .burger span, .nav-burger .mobile-menu, .nav-burger .mobile-menu.is-open, .nav-burger .mobile-menu nav a, .nav-burger .mobile-menu.is-open nav a { transition-duration: 0.01s; transition-delay: 0s; }
}

/* Compact header: the script sets html.nav-compact up to 900px, and wider whenever the demo button would wrap under the logo
   (the point differs per language). The header button then hides and the same CTA is pinned to the bottom of the screen,
   shown once the hero is passed and hidden again while the contact form is on screen. */
.mobile-cta { display: none; }
.nav-compact .nav .btn-accent { display: none; }
.nav-compact .mobile-cta {
  display: flex; justify-content: center; position: fixed; z-index: 7;
  right: max(24px, env(safe-area-inset-right, 0px)); bottom: max(24px, env(safe-area-inset-bottom, 0px));
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.25);
  transform: translateY(calc(100% + 32px)); visibility: hidden;
  transition: transform 0.5s var(--ease-soft), visibility 0s linear 0.5s;
}
.nav-compact .mobile-cta.is-visible { transform: none; visibility: visible; transition: transform 0.5s var(--ease-soft), visibility 0s; }
.nav-compact footer { padding-bottom: 104px; }
/* Phones: a full-width bar instead of a corner button */
@media (max-width: 900px) {
  .nav-compact .mobile-cta { left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-compact .mobile-cta, .nav-compact .mobile-cta.is-visible { transition-duration: 0.01s; transition-delay: 0s; }
}

/* Hero */
.hero { padding-top: clamp(40px, 6vw, 88px); }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 32px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
.hero-grid { display: grid; gap: 48px; align-items: start; margin-top: 40px; }
/* Fig. 1 sits left of the copy only side by side; stacked on small screens the headline stays first, as in the source order. */
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .hero-grid .implant { order: -1; }
}
.hero-copy { min-width: 0; display: grid; gap: clamp(40px, 4vw, 56px); }
.hero h1 { font-weight: 800; font-size: clamp(3rem, 6.2vw, 6.25rem); line-height: 1; letter-spacing: -0.045em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.implant { margin: 0; border: 1px solid var(--rule); padding: 20px; min-width: 0; display: grid; gap: 12px; }
.implant svg { width: 100%; height: auto; display: block; }
.fig-meta { display: flex; justify-content: space-between; gap: 12px; font-family: var(--mono); font-size: 11px; color: var(--muted); text-transform: uppercase; }
.implant figcaption { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.dg-line { fill: none; stroke: var(--fg); stroke-width: 1.5; }
.dg-thread { fill: none; stroke: var(--fg); stroke-width: 1; }
.dg-screw { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4 3; }
.dg-bone { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 4; }
.dg-label { font-family: var(--mono); font-size: 10px; fill: var(--fg); }
.dg-grid-line { fill: none; stroke: var(--line); stroke-width: 0.5; }
.dg-crop { fill: none; stroke: var(--fg); stroke-width: 1; }
.dg-center { fill: none; stroke: var(--muted); stroke-width: 0.75; stroke-dasharray: 14 3 2 3; }
.dg-dim, .dg-arrow { fill: none; stroke: var(--muted); stroke-width: 0.75; }
.dg-dim-label { font-family: var(--mono); font-size: 10px; fill: var(--muted); }
.dg-scan { stroke: var(--accent); stroke-width: 1; opacity: 0; }
.dg-tick { stroke: var(--fg); stroke-width: 1; }
.dg-tick-accent { stroke: var(--accent); }
.dg-accent { fill: var(--accent-text); }
.dg-muted { fill: var(--muted); }

/* Why ceramic */
.tile { position: relative; isolation: isolate; }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 2px solid var(--rule); margin-top: 28px; }
.point { padding: 24px 24px 28px; display: grid; gap: 10px; align-content: start; }
.point p { color: var(--body-ink); font-size: 0.95rem; }

/* Evidence */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 48px clamp(40px, 5vw, 72px); border-top: 2px solid var(--rule); margin-top: 48px; padding-top: 32px; }
.stat { display: grid; gap: 18px; align-content: start; min-width: 0; }
.stat b { font-weight: 800; font-size: clamp(5rem, 9vw, 9.5rem); line-height: 0.85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat .pct { display: inline-block; vertical-align: top; font-size: 0.5em; line-height: 1; letter-spacing: 0; margin: 0.08em 0 0 0.04em; }
.stat b small { font-size: 0.4em; letter-spacing: -0.02em; }
.stat:first-child b { color: var(--accent); }
.stat p { font-size: 1rem; }
.more { display: inline-block; margin-top: 40px; font-weight: 600; }

/* Studies and papers: year in the label column, citations in the body column */
.papers-list { margin-top: 48px; display: grid; }
.papers-year { display: flex; flex-wrap: wrap; gap: 8px 48px; border-top: 2px solid var(--rule); padding-top: 20px; margin-top: 8px; }
.papers-yr { flex: 1 1 200px; font-weight: 800; font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; }
.papers { flex: 999 1 640px; min-width: 0; list-style: none; margin: 0; padding: 0; }
.paper { display: grid; gap: 6px; padding: 4px 0 24px; }
.paper + .paper { border-top: 1px solid var(--line); padding-top: 20px; }
.paper-title { font-weight: 600; font-size: 1.15rem; line-height: 1.3; letter-spacing: -0.01em; }
.paper-title > span { color: var(--accent-text); }
.paper-authors { color: var(--body-ink); font-size: 0.95rem; }
.paper-source { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.papers-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* Comparison */
.table-wrap { overflow-x: auto; margin-top: 40px; }
/* Separate borders on cells, not collapsed row borders, so each line fades and moves with its row's reveal. */
table { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 720px; font-size: 0.95rem; }
th, td { text-align: left; padding: 18px 16px; vertical-align: top; }
tbody th, tbody td { border-bottom: 1px solid var(--line); }
tbody tr:last-child > * { border-bottom: 2px solid var(--rule); }
thead th { border-bottom: 2px solid var(--rule); }
thead th { font-size: 1rem; }
thead th:first-child { width: 18%; }
thead th.z { color: var(--accent-text); }
th[scope="row"], thead th:first-child { padding-left: 0; }
td.ti { color: var(--body-ink); }
/* Hover: the row's line warms to pink, the criterion steps in and the titanium text firms up. No transform on the row itself, GSAP owns that for the reveal. */
@media (hover: hover) and (min-width: 721px) {
  tbody th, tbody td { transition: border-color 0.5s var(--ease-soft), color 0.5s var(--ease-soft); }
  tbody th[scope="row"] { transition: color 0.5s var(--ease-soft), transform 0.5s var(--ease-soft); }
  tbody tr:hover > * { border-bottom-color: var(--accent); }
  tbody tr:hover th[scope="row"] { color: var(--accent-text); transform: translateX(8px); }
  tbody tr:hover td.ti { color: var(--fg); }
}
/* Narrow screens: each row stacks into a block with its own column labels, so the table never scrolls sideways. */
@media (max-width: 720px) {
  .table-wrap { overflow: visible; }
  table, tbody, tr, th, td { display: block; }
  table { min-width: 0; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  tbody tr { padding: 20px 0; border-bottom: 1px solid var(--line); }
  tbody tr:first-child { border-top: 2px solid var(--rule); }
  tbody tr:last-child { border-bottom: 2px solid var(--rule); }
  tbody th, tbody td, tbody tr:last-child > * { border-bottom: 0; padding: 0; }
  tbody th[scope="row"] { font-size: 1.1rem; margin-bottom: 12px; }
  tbody td + td { margin-top: 14px; }
  tbody td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
  tbody td:not(.ti)::before { color: var(--accent-text); }
}

/* Dark sections: remap the tokens so every component inside follows without its own dark rules.
   The accent lightens to stay readable on black, and its ink turns black because white on the light pink fails contrast. */
.invert {
  --bg: var(--invert-bg); --fg: var(--invert-fg); --muted: var(--invert-muted); --body-ink: var(--invert-muted);
  --line: var(--invert-line); --rule: var(--invert-fg); --zirconia: #1A1A1A;
  --accent-text: #FF5AA2; --accent-ink: #0A0A0A; --accent-soft: #3A0A20;
  background: var(--bg); color: var(--fg);
}

/* System band */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 32px; margin-top: 48px; }
.feature { border-top: 1px solid var(--invert-line); padding: 24px 24px 32px; display: grid; gap: 10px; align-content: start; }
.feature .mono { color: var(--invert-muted); }
.feature h3 { font-size: 1.4rem; }
.feature p { color: var(--invert-muted); font-size: 0.95rem; }
.system-foot { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--invert-line); padding-top: 24px; color: var(--invert-muted); }

/* Brochure figures beside copy: stacked on narrow screens, side by side from 821px with the image alternating left and right.
   The plate keeps light tokens inside dark sections because the brochure images sit on white. */
.media { display: grid; gap: 28px 64px; margin-top: clamp(56px, 7vw, 96px); align-items: center; }
.media-fig { --fg: #0A0A0A; --muted: #5E5E5E; --line: #E2E2E2; margin: 0; padding: 20px; display: grid; gap: 12px; background: #FFFFFF; color: var(--fg); border: 1px solid var(--rule); min-width: 0; }
.media-fig img { display: block; width: 100%; height: auto; max-height: 440px; object-fit: contain; }
.media-fig figcaption { font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 10px; }
.media-copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
.media-copy h3 { font-size: clamp(1.6rem, 2.6vw, 2.25rem); line-height: 1.05; letter-spacing: -0.025em; }
.media-copy > p:not(.mono) { color: var(--body-ink); font-size: 1.05rem; max-width: 34em; }
.media-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; border-top: 2px solid var(--rule); padding-top: 18px; }
.media-copy li { display: flex; gap: 12px; font-weight: 600; }
.media-copy li::before { content: "→"; color: var(--accent-text); }
@media (min-width: 821px) {
  .media-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .media-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .media-right .media-fig { order: 2; }
}

/* Services */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 2px solid var(--rule); border-left: 1px solid var(--line); margin-top: 48px; }
.service { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 24px; display: grid; gap: 14px; align-content: start; }
.service .num { font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.04em; }
/* Tile hover (points, features, services): a zirconia tint rises from the base line, a pink rule draws across the top and the marker takes the accent. */
@media (hover: hover) {
  .tile::before, .tile::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
  .tile::before { inset: 0; background: var(--zirconia); transform: scaleY(0); transform-origin: bottom; transition: transform 0.6s var(--ease-soft); }
  .tile::after { inset: -2px 0 auto; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease-soft); }
  .feature.tile::after { top: -1px; }
  .tile .num, .tile .mono, .tile h3 { transition: color 0.5s var(--ease-soft), transform 0.6s var(--ease-soft); }
  .tile:hover::before { transform: scaleY(1); }
  .tile:hover::after { transform: scaleX(1); }
  .tile:hover .num { color: var(--accent); }
  .tile:hover .mono { color: var(--accent-text); }
  .tile:hover h3 { transform: translateX(4px); }
}
/* After the hover rules so it wins the cascade */
@media (prefers-reduced-motion: reduce) {
  tbody th, tbody td, .tile::before, .tile::after, .tile .num, .tile .mono, .tile h3 { transition-duration: 0.01s; }
}
.service p { color: var(--body-ink); font-size: 0.95rem; }

/* Event band: text sizes stay large so white on the brand pink passes the 3:1 large-text threshold. */
.event { background: var(--accent); color: #FFFFFF; padding-block: clamp(40px, 5vw, 72px); }
.event .wrap { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: flex-end; justify-content: space-between; }
.event-date { font-weight: 800; font-size: clamp(3.5rem, 9vw, 8.75rem); line-height: 0.85; letter-spacing: -0.05em; white-space: nowrap; }
.event-dash { margin-inline: 0.12em; }
.event-copy { flex: 0 1 460px; display: grid; gap: 20px; }
.event h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
.event-copy p { font-size: 1.5rem; line-height: 1.3; }
.event .btn { --btn-bg: #FFFFFF; --btn-fg: #0A0A0A; --btn-line: #FFFFFF; --btn-hover-bg: #0A0A0A; --btn-hover-fg: #FFFFFF; justify-self: start; }

/* FAQ: native details, so answers open without JavaScript; browsers that can animate to height auto ease them open */
.faq { --faq-num: 3rem; --faq-icon: 40px; --faq-gap: 24px; border-top: 2px solid var(--rule); margin-top: 48px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 2px solid var(--rule); }
.faq-item summary { display: grid; grid-template-columns: var(--faq-num) 1fr var(--faq-icon); gap: var(--faq-gap); align-items: center; padding: 24px 0; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; }
.faq-item h3 { font-size: clamp(1.15rem, 1.8vw, 1.5rem); transition: transform 0.5s var(--ease-soft); }
.faq-item .num { transition: color 0.5s var(--ease-soft); }
.faq-icon { position: relative; width: var(--faq-icon); height: var(--faq-icon); border: 1.5px solid var(--rule); transition: background-color 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--fg); transition: transform 0.4s var(--ease-soft), background-color 0.4s var(--ease-soft); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { background: var(--fg); }
.faq-item[open] .faq-icon::before, .faq-item[open] .faq-icon::after { background: var(--bg); }
.faq-item[open] .faq-icon::after { transform: rotate(0deg); }
.faq-item[open] .num { color: var(--accent-text); }
.faq-answer { padding: 0 calc(var(--faq-icon) + var(--faq-gap)) 28px calc(var(--faq-num) + var(--faq-gap)); }
.faq-answer p { max-width: 44em; color: var(--body-ink); }
@media (max-width: 720px) {
  .faq { --faq-num: 1.75rem; --faq-icon: 36px; --faq-gap: 14px; }
  .faq-answer { padding-right: 0; }
}
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height 0.5s var(--ease-soft), content-visibility 0.5s var(--ease-soft) allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
}
@media (hover: hover) {
  .faq-item summary:hover h3 { transform: translateX(4px); }
  .faq-item summary:hover .num { color: var(--accent-text); }
  .faq-item summary:hover .faq-icon { border-color: var(--accent); }
}
/* After the rules it overrides */
@media (prefers-reduced-motion: reduce) {
  .faq-item h3, .faq-item .num, .faq-icon, .faq-icon::before, .faq-icon::after, .faq-item::details-content { transition-duration: 0.01s; }
}

/* Contact */
.contact { display: flex; flex-wrap: wrap; gap: 48px; }
.contact-side { flex: 1 1 320px; display: grid; gap: 28px; align-content: start; }
.contact-side h2 { font-weight: 800; font-size: clamp(2.75rem, 6vw, 5.5rem); line-height: 1; letter-spacing: -0.045em; }
.contact-side dl { margin: 0; display: grid; gap: 18px; border-top: 2px solid var(--rule); padding-top: 20px; }
.contact-side dd { margin: 4px 0 0; font-weight: 600; }
form { flex: 999 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 32px; align-content: start; }
label { display: grid; gap: 8px; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
input, select, textarea { font-family: var(--body); font-size: 1.1rem; letter-spacing: 0; text-transform: none; color: var(--fg); border: 0; border-bottom: 1.5px solid var(--rule); border-radius: 0; padding: 10px 0; background: transparent; width: 100%; min-height: 44px; }
/* Focused field: a pink underline draws in from the left and the label turns pink, instead of the outline box.
   Both lines are background layers so the 2px pink one fully covers the 1.5px resting rule beneath it. */
input:not([type=checkbox]), select, textarea {
  border-bottom: 0; padding-bottom: 11.5px;
  background:
    linear-gradient(var(--accent-text), var(--accent-text)) no-repeat left bottom / 0 2px,
    linear-gradient(var(--rule), var(--rule)) no-repeat left bottom / 100% 1.5px;
  transition: background-size 0.45s var(--ease-soft);
}
input:not([type=checkbox]):focus, select:focus, textarea:focus { outline: none; background-size: 100% 2px, 100% 1.5px; }
label:not(.consent) { transition: color 0.3s var(--ease-soft); }
label:not(.consent):focus-within { color: var(--accent-text); }
@media (prefers-reduced-motion: reduce) { input, select, textarea, label { transition-duration: 0.01s; } }
select option { color: #0A0A0A; }
textarea { min-height: 96px; resize: vertical; }
.full { grid-column: 1 / -1; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-family: var(--body); font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: var(--body-ink); }
.consent input { width: 20px; height: 20px; min-height: 0; margin: 2px 0 0; accent-color: var(--accent-text); }
.form-done { display: grid; gap: 6px; padding: 20px 24px; border-left: 4px solid var(--accent); background: var(--accent-soft); }
.form-done[hidden], .form-notice[hidden] { display: none; }
/* Off-screen rather than display: none, which some bots detect and skip */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-notice { display: grid; gap: 6px; padding: 20px 24px; border: 1px solid var(--line); border-left: 4px solid #F5B400; }
.form-notice ul { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; font-size: 0.95rem; color: var(--body-ink); }

.link-btn { font: inherit; color: var(--accent-text); background: none; border: 0; padding: 0; cursor: pointer; }
.link-btn:hover { color: var(--fg); }
.privacy { width: min(640px, calc(100vw - 32px)); max-height: min(80vh, 720px); padding: 0; border: 1px solid var(--rule); border-radius: 0; background: var(--bg); color: var(--fg); overflow: auto; overscroll-behavior: contain; }
.privacy::backdrop { background: rgba(10, 10, 10, 0.6); }
.privacy-head { position: sticky; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; background: var(--bg); border-bottom: 2px solid var(--rule); }
.privacy-head h2 { font-size: 1.75rem; letter-spacing: -0.02em; }
.privacy-close { font: inherit; font-size: 1.75rem; line-height: 1; width: 44px; height: 44px; background: none; border: 0; color: var(--fg); cursor: pointer; }
.privacy-close:hover { color: var(--accent-text); }
.privacy-body { display: grid; gap: 10px; padding: 24px; }
.privacy-body h3 { margin-top: 14px; font-size: 1.05rem; }
.privacy-body p { color: var(--body-ink); font-size: 0.95rem; }

footer { border-top: 1px solid var(--rule); padding-block: 28px; }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
footer a { color: var(--muted); }

/* Reveal motion: hidden only while the motion script owns them, so no-JS and reduced-motion visitors see everything. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.motion [data-split]:not(.is-split), .motion [data-reveal] { opacity: 0; }
.word { display: inline-block; will-change: transform, opacity; }