:root {
  --bg: #1b1613;          /* warm near-black */
  --bg-2: #221b17;        /* slightly lighter panel */
  --ink: #f1ece4;         /* off-white text */
  --muted: #b7ada1;       /* muted text */
  --gold: #e3a72c;        /* headline gold */
  --orange: #e0742e;      /* section accent */
  --teal: #67bca9;        /* accent */
  --line: #3a302a;        /* hairline */
  --maxw: 1140px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 1.5rem; width: 100%; }

h1, h2, h3, .name {
  font-family: "Anton", Impact, system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1.04;
  text-transform: uppercase;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 16, 13, .92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
/* Logo centered; nav pinned to the right (absolute, so the logo stays truly
   centered). Links are small uppercase with an animated gold underline. */
/* Vertical padding only, as LONGHANDS: this element is also a .container, and
   the `padding` shorthand would reset the container's `0 1.5rem` gutter to
   zero, putting the logo and the nav hard against the screen edges. Invisible
   above 1140px (the max-width supplies a gutter), obvious on a phone. */
.header-inner { position: relative; display: flex; justify-content: center; align-items: center; padding-top: .85rem; padding-bottom: .85rem; }
.brand img { height: 32px; width: auto; display: block; }
/* right matches the container gutter, not 0: an absolutely positioned element
   resolves against the PADDING box, so right:0 put the nav 1.5rem proud of the
   content column (and hard against the screen edge between 821px and the
   1140px max-width). This lines it up with the body content at every width. */
.nav { position: absolute; right: 1.5rem; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 1.6rem; }
.nav a { position: relative; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; padding: .35rem 0; white-space: nowrap; }
.nav a::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--gold); transition: width .2s ease; }
.nav a:hover { color: var(--gold); }
.nav a:hover::after { width: 100%; }

main { display: block; }
section { padding: 4.5rem 0; }

/* ---------- Buttons ---------- */
.btn, .btn-outline {
  display: inline-block; font-weight: 700; text-decoration: none;
  padding: .8rem 1.5rem; border-radius: 10px; font-size: 1rem;
}
.btn { background: var(--gold); color: #1b1613; }
.btn:hover { background: #f0b23a; }
.btn-outline { border: 2px solid var(--gold); color: var(--gold); }
.btn-outline:hover { background: var(--gold); color: #1b1613; }

/* ---------- Hero ---------- */
/* ---------- Hero video (landing) ---------- */
.hero-video { position: relative; height: calc(100svh - 58px); min-height: 420px; background: #000; overflow: hidden; padding: 0; }
.hero-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,13,10,0) 60%, rgba(18,13,10,.85) 100%); pointer-events: none; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 2; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.scroll-cue span { display: block; width: 14px; height: 14px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); }

.hero {
  position: relative;
  background-image: url('/static/img/hero-bg.webp');
  background-size: cover; background-position: center right;
  min-height: 78vh; display: flex; align-items: center;
  padding: 6rem 0;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(18,13,10,.94) 0%, rgba(18,13,10,.7) 45%, rgba(18,13,10,.2) 100%);
}
.hero-inner { position: relative; }
.hero h1 { color: var(--gold); font-size: clamp(2.2rem, 5.2vw, 4.4rem); max-width: 14ch; margin: 0 0 1.5rem; }
.hero-copy { max-width: 620px; }
.hero-copy p { color: var(--ink); margin: 0 0 1rem; }
.welcome { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- Reset / app section ---------- */
.reset { background: var(--bg-2); }
.reset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.h-orange { color: var(--orange); font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0 0 1.5rem; }
.lede { color: var(--muted); font-size: 1.15rem; }
.features { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .55rem; }
.features li { position: relative; padding-left: 1.6rem; }
.features li::before { content: "+"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.cta-line { font-weight: 700; margin: 1.5rem 0 1rem; }
.screens { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; align-items: center; }
.screens img { border-radius: 16px; }

/* App-store badges */
.appstore { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.appstore img { height: 48px; width: auto; }

/* ---------- Facilitators ---------- */
.facilitators { padding: 0; background: #000; }
.fac-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.fac-image { position: relative; overflow: hidden; background-image: url('/static/img/facilitators-group.webp'); background-size: cover; background-position: center; min-height: 100%; }
.fac-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.fac-people { padding: 4.5rem 3rem 4.5rem 3.5rem; }
.fac-people > h2 { font-size: 1.6rem; letter-spacing: .12em; margin: 0 0 2.5rem; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; margin-bottom: 2.75rem; }
.headshot { width: 120px; height: 150px; object-fit: cover; filter: grayscale(1) contrast(1.05); border-radius: 4px; }
.name { font-size: 1.7rem; margin: 0; }
.name-teal { color: var(--teal); }
.name-gold { color: var(--gold); }
.name-orange { color: var(--orange); }
.role { font-weight: 700; margin: .35rem 0 0; }
.cofounder { font-style: italic; color: var(--muted); margin: 0 0 .75rem; }
.person p:last-of-type { color: var(--muted); }
.ig { display: inline-block; margin-top: .6rem; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem; }
.ig::before { content: "◉ "; color: var(--gold); }
.ig:hover { color: var(--gold); }

/* ---------- Quote ---------- */
.quote { position: relative; background-image: url('/static/img/quote-bg.webp'); background-size: cover; background-position: center; text-align: center; }
.quote::before { content: ""; position: absolute; inset: 0; background: rgba(15,11,9,.78); }
.quote .container { position: relative; }
.quote blockquote { margin: 0 auto; max-width: 800px; font-size: clamp(1.3rem, 2.6vw, 1.9rem); font-style: italic; color: var(--ink); line-height: 1.4; }
.quote cite { display: block; margin-top: 1.25rem; font-size: 1rem; font-style: normal; color: var(--gold); }

/* ---------- Contact teaser ---------- */
.contact-teaser { text-align: center; }
.contact-teaser p { max-width: 640px; margin: 0 auto 1.5rem; color: var(--muted); font-size: 1.1rem; }
.tagline { font-style: italic; color: var(--teal); font-size: 1.2rem; text-align: center; }

/* ---------- Simple pages / prose ---------- */
.page { padding: 3.5rem 0; }
.prose { max-width: 760px; }
.prose h1 { color: var(--gold); font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 1.5rem; }
.legal-body { color: var(--ink); }
.legal-body h2 { font-family: "Anton", sans-serif; color: var(--gold); font-size: 1.5rem; margin: 2rem 0 .75rem; text-transform: uppercase; }
.legal-body h3, .legal-body h4 { color: var(--ink); font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.legal-body a { color: var(--teal); }

/* ---------- Contact form ---------- */
.contact { max-width: 640px; }
.contact-form { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.contact-form label { display: grid; gap: .4rem; font-weight: 600; }
.contact-form input, .contact-form select, .contact-form textarea {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: .7rem .8rem; font: inherit; width: 100%;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
  outline: none; border-color: var(--gold);
}
.form-error {
  background: rgba(224, 116, 46, .1); border: 1px solid var(--orange);
  border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; color: var(--ink);
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; }
.faq h1 { color: var(--gold); }
.faq h2 { color: var(--orange); font-size: 1.4rem; margin: 2.5rem 0 1rem; }
.faq details { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.faq summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.faq summary:hover { color: var(--gold); }
.faq details p { color: var(--muted); margin: .75rem 0 0; }

/* ---------- Footer ---------- */
.site-footer { background: #14100d; border-top: 1px solid var(--line); padding-top: 3rem; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; text-align: center; }
.footer-brand { text-align: center; }
.footer-logo { height: 30px; width: auto; margin: 0 auto .5rem; display: block; }
.site-footer p { color: var(--muted); }
.site-footer h4 { font-family: "Inter", sans-serif; text-transform: none; font-size: 1rem; color: var(--ink); margin: 0 0 .6rem; }
.site-footer a { display: block; color: var(--muted); text-decoration: none; padding: .15rem 0; }
.site-footer a:hover { color: var(--gold); }
.copyright { max-width: var(--maxw); margin: 1.5rem auto 0; padding: 1.5rem; color: #7c7268; border-top: 1px solid var(--line); text-align: center; }

/* ---------- Motion ----------
   Reveal-on-scroll: site.js tags elements with .reveal and an IntersectionObserver
   adds .in; with JS (or motion) off, nothing is tagged and everything stays
   visible. All animation lives behind prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
  .btn, .btn-outline { transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; }
  .btn:hover, .btn-outline:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
  .screens img { transition: transform .35s ease; }
  .screens img:hover { transform: translateY(-6px) scale(1.02); }
  .headshot { transition: filter .45s ease; }
  .person:hover .headshot { filter: grayscale(0) contrast(1); }
  .appstore img { transition: transform .18s ease; }
  .appstore a:hover img { transform: translateY(-2px); }
  .scroll-cue span { animation: cue-bob 1.7s ease-in-out infinite; }
}
@keyframes cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .95; }
  50% { transform: rotate(45deg) translate(5px, 5px); opacity: .45; }
}

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  section { padding: 3rem 0; }
  .reset-grid { grid-template-columns: 1fr; gap: 2rem; }
  .fac-grid { grid-template-columns: 1fr; }
  .fac-image { min-height: 280px; }
  .fac-people { padding: 3rem 1.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  /* Not enough room to center the logo with a right nav: go logo-left, nav-right. */
  .header-inner { justify-content: space-between; }
  .nav { position: static; transform: none; gap: 1.1rem; }
  /* Touch targets: a finger needs about 44px, roughly twice a mouse pointer.
     Only touch layouts grow; the desktop design keeps its tighter spacing.
     These add vertical padding rather than resizing anything, so nothing moves
     visually except the space around it. */
  .brand { display: flex; align-items: center; min-height: 44px; }
  .nav a { padding: .8rem 0; }
  .footer-grid a { padding: .6rem 0; }
  .person a.ig { padding: .7rem 0; }
  /* Inline by default, so padding alone would not grow its hit box. */
  .back-link a { display: inline-block; padding: .7rem 0; }
  /* The help list put its padding on the li, so each row LOOKED comfortable
     while only the 20px of text was actually tappable. Move the padding onto
     the anchor so the hit box matches the row. */
  .help-list li { padding: .15rem 0; }
  .help-list a { display: block; padding: .75rem 0; }
}
@media (max-width: 480px) {
  .person { grid-template-columns: 1fr; }
  .headshot { width: 110px; height: 130px; }
  .footer-grid { grid-template-columns: 1fr; }
  .brand img { height: 26px; }
  .nav { gap: .8rem; }
  /* .7rem here was 11.2px: too small to read comfortably on a phone. At .8rem
     the three items plus the logo still fit one row well inside 375px. */
  .nav a { font-size: .8rem; letter-spacing: .04em; }
}
/* Smallest phones still in use (iPhone SE at 320px): with the gutter restored,
   the logo and the nav meet in the middle with nothing between them. Trim the
   logo and the link spacing, not the font size, so the nav stays readable. */
@media (max-width: 360px) {
  .brand img { height: 22px; }
  .nav { gap: .6rem; }
}

/* ---------- Contact: chooser + forms ---------- */
.chooser-intro { color: var(--muted); }
.chooser { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.5rem; }
.choice {
  display: block; text-decoration: none; color: var(--ink);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 1.5rem; transition: border-color .15s ease, transform .15s ease;
}
.choice:hover { border-color: var(--gold); transform: translateY(-2px); }
.choice h2 { font-size: 1.35rem; margin: 0 0 .5rem; color: var(--gold); }
.choice p { color: var(--muted); margin: 0 0 1rem; }
.choice-go { color: var(--teal); font-weight: 600; }
.back-link { margin: 0 0 .5rem; }
.back-link a { color: var(--muted); text-decoration: none; }
.back-link a:hover { color: var(--gold); }

.hint { font-weight: 400; color: var(--muted); font-size: .85em; }
fieldset.appsupport { border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.1rem; display: grid; gap: 1.1rem; margin: 0; }
fieldset.appsupport legend { color: var(--ink); font-weight: 600; padding: 0 .4rem; }
.howto { background: rgba(255, 255, 255, .03); border-radius: 8px; padding: .5rem .75rem; }
.howto summary { cursor: pointer; color: var(--teal); font-weight: 600; }
.howto p { color: var(--muted); margin: .5rem 0 0; }

.help-note { background: rgba(103, 188, 169, .08); border: 1px solid var(--teal); border-radius: 8px; padding: .9rem 1rem; margin-bottom: .4rem; }
.help-note strong { color: var(--teal); }
.help-note p { margin: .5rem 0; color: var(--ink); }
.help-note ul { margin: .5rem 0 0; padding-left: 1.2rem; }
.help-note a { color: var(--gold); }

@media (max-width: 760px) { .chooser { grid-template-columns: 1fr; } }

/* --- Help centre (KB) --- */
.help-index { max-width: 820px; }
.help-index h1 { color: var(--gold); }
.help-index h2 { color: var(--orange); font-size: 1.4rem; margin: 2.5rem 0 1rem; }
.help-intro { color: var(--muted); }
.help-intro a { color: var(--teal); }
.help-cat { border-bottom: 1px solid var(--line); }
.help-cat > summary { cursor: pointer; list-style: none; color: var(--orange); font-size: 1.3rem; font-weight: 600; padding: 1.1rem 0; }
.help-cat > summary::-webkit-details-marker { display: none; }
.help-cat > summary::before { content: "+"; color: var(--gold); font-weight: 700; margin-right: .7rem; display: inline-block; width: 1rem; }
.help-cat[open] > summary { color: var(--gold); }
.help-cat[open] > summary::before { content: "\2212"; }
.help-cat .help-list { padding: 0 0 1rem; }
.help-list { list-style: none; padding: 0; margin: 0; }
.help-list li { border-bottom: 1px solid var(--line); padding: .9rem 0; }
.help-list a { font-weight: 600; color: var(--ink); }
.help-list a:hover { color: var(--gold); }
.help-list p { color: var(--muted); margin: .35rem 0 0; font-size: .95rem; }
.help-breadcrumb { color: var(--muted); font-size: .9rem; margin-bottom: 1.5rem; }
.help-breadcrumb a { color: var(--teal); }
.help-body h1 { color: var(--gold); font-family: "Anton", sans-serif; font-size: 1.9rem; margin-bottom: 1rem; }
.help-body ul { padding-left: 1.2rem; }
.help-body li { margin: .4rem 0; }
.help-footer { margin-top: 2.5rem; color: var(--muted); }
.help-footer a { color: var(--teal); }
.help-note .help-links { margin: .5rem 0 0; padding-left: 1.2rem; }