/* LSCA — La Salle Consulting Association
   Website style. Cream pages (#F2E9DC), one sans-serif family (Instrument Sans),
   bordeaux (#38121E) as the accent and for full-width colour bands, brass for details.
   The logo keeps its own Fraunces + brass, as in the Brand Guidelines.
   One file, organised by component in page order. Rules for features that are no
   longer on any page live in archive-unused.css (not loaded), so nothing is lost. */

/* ---------- Tokens ---------- */
:root {
  --bg: #F2E9DC;          /* page cream */
  --soft: #EADFCD;        /* deeper cream for bands and fields */
  --card: #FAF5EE;        /* light cream for cards and panels */
  --line: #DDD0BC;
  --ink: #1E1E1E;         /* text */
  --muted: #5E5054;
  --bx: #38121E;          /* bordeaux */
  --bx-2: #571C2E;
  --bx-deep: #23090F;     /* footer */
  --accent: #38121E;      /* same as --bx, kept for compatibility */
  --on-bx: #FFFFFF;
  --on-bx-muted: rgba(255, 255, 255, .74);
  --line-bx: rgba(255, 255, 255, .18);
  --brass: #C9A26B;
  --brass-d: #8A5F2E;

  --f-sans: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  --f-serif: 'Fraunces', Georgia, serif;   /* logo only */

  --gutter: clamp(16px, 4.5vw, 56px);
  --max: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Section links land just below the fixed header. Smooth scrolling is done in site.js, and only
   for links within the same page, so arriving from another page never slides through the hero. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--f-sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--bx); color: #fff; }
:focus-visible { outline: 2px solid var(--bx); outline-offset: 3px; }
.on-ink :focus-visible, .band :focus-visible, .site-footer :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--bx); color: #fff; padding: 10px 16px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.arcade, .tick { display: none !important; }

/* ---------- Moving between pages ----------
   Browsers that support it crossfade one page into the next and the header stays still. Others just load the page as before. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
/* The next page opens through a door: an arch grows from the middle until it is the whole screen,
   while the old page settles back a touch behind it */
::view-transition-old(root), ::view-transition-new(root) { mix-blend-mode: normal; }
::view-transition-old(root) { animation: vt-back .5s var(--ease) both; }
::view-transition-new(root) { animation: vt-arch .5s cubic-bezier(.65, 0, .25, 1) both; }
@keyframes vt-back { to { opacity: .55; transform: scale(.985); } }
@keyframes vt-arch {
  from { clip-path: inset(30% 38% 0 38% round 50% 50% 0 0 / 28% 28% 0 0); }
  to { clip-path: inset(0 0 0 0 round 0 0 0 0 / 0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Logo colour contexts (Threshold) */
.on-b { --l-main: #F2E9DC; --l-acc: #C9A26B; }
.on-c { --l-main: #38121E; --l-acc: #8A5F2E; }

/* ---------- Layout and type ---------- */
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: clamp(48px, 5.5vw, 76px) 0; position: relative; }
.on-cream, .on-paper, .plan.section { background: var(--soft); }
.on-ink, .band { background: var(--bx); color: var(--on-bx); }

h1, h2, h3 { font-family: var(--f-sans); margin: 0; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(42px, 6vw, 80px); font-weight: 600; line-height: 1.02; }
h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 600; line-height: 1.08; }
h3 { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
h1 em, h2 em { font-style: normal; }
p { margin: 0 0 1em; }
.overline { font-size: 14px; font-weight: 600; color: var(--bx); margin: 0 0 14px; letter-spacing: 0; }
.on-ink .overline, .band .overline { color: var(--brass); }
.label { font-size: 13px; font-weight: 500; color: var(--muted); }
.on-ink .label, .band .label { color: var(--on-bx-muted); }
.rule { display: none; }
.lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; max-width: 46ch; }
.muted { color: var(--muted); }
.on-ink .muted, .band .muted { color: var(--on-bx-muted); }

/* ---------- Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, scale .15s;
}
.btn:active { scale: .97; }
.btn .arr { display: inline-block; transition: transform .25s var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr { transform: translateX(4px); }
.btn-brass, .btn-bx { background: var(--bx); color: #fff; }
.btn-brass:hover, .btn-bx:hover { background: var(--bx-2); color: #fff; }
.btn-ghost { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); }
.on-ink .btn-brass, .band .btn-brass, .on-ink .btn-bx, .band .btn-bx { background: #fff; color: var(--bx); }
.on-ink .btn-brass:hover, .band .btn-brass:hover, .on-ink .btn-bx:hover, .band .btn-bx:hover { background: #F1E7E9; color: var(--bx); }
.on-ink .btn-ghost, .band .btn-ghost { border-color: var(--line-bx); color: #fff; }
.on-ink .btn-ghost:hover, .band .btn-ghost:hover { border-color: #fff; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; flex: none; }

/* The door in the Apply buttons opens on hover and on click */
.door { display: block; width: 12px; height: 16px; flex: none; overflow: visible; }
.door path { fill: none; stroke: currentColor; stroke-width: 1.6; }
.door .leaf { fill: currentColor; transform-origin: 10.4px 50%; transition: transform .38s var(--ease); }
.btn:hover .door .leaf, .btn:focus-visible .door .leaf, .btn.opening .door .leaf { transform: perspective(40px) rotateY(-68deg); }
.btn.opening { background: var(--bx-2); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; padding-block: 6px; font-weight: 600; font-size: 16px; color: var(--bx);
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s; }
.link-arrow:hover { text-decoration-color: currentColor; }
.link-arrow span:last-child { transition: transform .2s; }
.link-arrow:hover span:last-child { transform: translateX(4px); }
.on-ink .link-arrow, .band .link-arrow { color: #fff; }

/* ---------- Header and navigation ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); display: flex; align-items: center;
  background: rgb(242 233 220 / .78); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8);
  border-bottom: 1px solid transparent; transition: border-color .2s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header { background: var(--bg); } }
/* While the phone menu is open, drop the blur: a backdrop-filter makes the header the box the fixed menu sizes against */
.menu-open .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (prefers-reduced-transparency: reduce) { .site-header { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand { display: block; width: 150px; flex: none; }
.brand svg { width: 100%; height: auto; }
.nav { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 32px); }
.nav a:not(.btn) { font-size: 15px; font-weight: 500; text-decoration: none; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--bx); }
@media (min-width: 901px) {
  .pages { position: relative; isolation: isolate; display: flex; padding: 4px; border-radius: 999px;
    background: rgb(250 245 238 / .7); box-shadow: inset 0 0 0 1px var(--line); touch-action: pan-y; user-select: none; -webkit-user-select: none;
    --nav-ease: cubic-bezier(.2, 0, 0, 1); }
  @supports (transition-timing-function: linear(0, 1)) {
    .pages { --nav-ease: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.106 26%, 1.103, 1.092 30.4%, 1.016 39.4%, .995 43.9%, .987 48.5%, .996 63.2%, 1); }
  }
  .pages a:not(.btn) { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    border: 0; border-radius: 999px; -webkit-tap-highlight-color: transparent; -webkit-user-drag: none;
    transition: color .2s, scale .25s var(--ease); }
  .pages a:not(.btn):hover { color: var(--bx); }
  .pages a[aria-current="page"] { color: var(--bx); font-weight: 600; }
  .pages a[data-hot] { scale: 1.05; }
  .pages .lens { position: absolute; z-index: 0; top: 4px; left: 0; height: 40px; width: var(--w, 0px); translate: var(--x, 0px) 0;
    border-radius: 999px; background: rgb(56 18 30 / .08); opacity: 0; pointer-events: none;
    transition: translate .48s var(--nav-ease), width .48s var(--nav-ease), scale .32s var(--ease), background-color .18s linear, box-shadow .18s linear, opacity .2s linear; }
  .pages[data-has] .lens { opacity: 1; }
  .pages .lens[data-instant] { transition: none; }
  .pages[data-press] .lens { scale: 1.1 1.18; background: rgb(255 255 255 / .8);
    box-shadow: inset 0 0 0 .5px rgb(0 0 0 / .06), inset 0 1px 0 #fff, 0 6px 20px rgb(56 18 30 / .18), 0 1px 3px rgb(0 0 0 / .1); }
  .pages[data-drag] .lens { transition-property: width, scale, background-color, box-shadow, opacity; }
}
@media (max-width: 900px) { .pages { display: contents; } .pages .lens { display: none; } }
@media (prefers-reduced-motion: reduce) { .pages .lens { transition: background-color .18s linear, box-shadow .18s linear, opacity .2s linear; } .pages[data-press] .lens, .pages a[data-hot] { scale: none; } }
.nav .btn { padding: 10px 18px; font-size: 14px; }
.icon-link { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; color: var(--ink); border: 0 !important; }
.icon-link:hover { color: var(--bx); }
.icon-link svg { width: 18px; height: 18px; }
.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch button { background: none; border: 0; padding: 4px 6px; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; border-radius: 2px; }
.lang-switch button:hover { color: var(--ink); }
.lang-switch button[aria-pressed="true"] { color: var(--bx); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); width: 44px; height: 44px; cursor: pointer; position: relative; border-radius: 999px; }
.menu-btn span { position: absolute; left: 12px; right: 12px; height: 2px; background: var(--ink); transition: transform .3s var(--ease), top .3s var(--ease); }
.menu-btn span:first-child { top: 16px; }
.menu-btn span:last-child { top: 25px; }
.menu-open .menu-btn span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .menu-btn span:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 900px) {
  .menu-btn { display: block; }
  .brand { width: 132px; }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; background: var(--bg); flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px var(--gutter) 40px; overflow-y: auto; visibility: hidden; opacity: 0; transition: opacity .2s, visibility 0s .2s;
  }
  .menu-open .nav { visibility: visible; opacity: 1; transition: opacity .2s; }
  .nav a:not(.btn) { font-size: 26px; font-weight: 600; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav a:not(.btn)[aria-current="page"] { color: var(--bx); border-bottom-color: var(--line); }
  .nav .lang-switch { margin-top: 24px; gap: 8px; }
  .nav .lang-switch button { min-width: 56px; height: 44px; border-radius: 999px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--line); }
  .nav .lang-switch button[aria-pressed="true"] { color: var(--bx); background: rgb(56 18 30 / .08); box-shadow: inset 0 0 0 1px rgb(56 18 30 / .25); text-decoration: none; }
  .lang-switch button { font-size: 16px; padding: 8px 12px; }
  .nav .icon-link { margin-top: 12px; }
  .nav .btn { margin-top: 20px; justify-content: center; padding: 16px; font-size: 16px; }
}

/* ---------- Header bar (computer): one frosted capsule holding pages, language, LinkedIn and Aplica ---------- */
@media (min-width: 901px) {
  .nav { gap: 4px; padding: 5px; border-radius: 999px; background: rgb(250 245 238 / .62);
    box-shadow: inset 0 0 0 1px rgb(56 18 30 / .1), 0 1px 2px rgb(56 18 30 / .04); }
  .pages { padding: 0; background: none; box-shadow: none; }
  .pages a:not(.btn) { min-height: 44px; padding: 0 22px; font-size: 15.5px; }
  .pages .lens { top: 0; height: 44px; }
  .nav .lang-switch { gap: 2px; margin: 0 6px; padding: 0 8px; position: relative; }
  .nav .lang-switch::before, .nav .lang-switch::after { content: ''; position: absolute; top: 11px; bottom: 11px; width: 1px; background: rgb(56 18 30 / .14); }
  .nav .lang-switch::before { left: 0; } .nav .lang-switch::after { right: 0; }
  .nav .lang-switch button { min-width: 40px; height: 44px; padding: 0 10px; border-radius: 999px; font-size: 13.5px; color: var(--muted); text-decoration: none;
    transition: color .2s, background-color .2s; }
  .nav .lang-switch button:hover { color: var(--ink); background: rgb(56 18 30 / .05); }
  .nav .lang-switch button[aria-pressed="true"] { color: var(--bx); background: rgb(56 18 30 / .08); text-decoration: none; }
  .nav .icon-link { width: 44px; height: 44px; border-radius: 999px; transition: color .2s, background-color .2s; }
  .nav .icon-link:hover { color: var(--bx); background: rgb(56 18 30 / .06); }
  .nav .icon-link svg { width: 18px; height: 18px; }
  .nav .btn { height: 44px; min-height: 44px; padding: 0 24px 0 20px; margin-left: 6px; border-radius: 999px; font-size: 15px; gap: 10px; }
  .nav .btn:active { scale: .97; }
}

/* ---------- Home hero ---------- */
.hero { position: relative; overflow: hidden; padding: calc(var(--header-h) + clamp(36px, 6vw, 80px)) 0 clamp(40px, 5vw, 64px); }
.hero > .wrap { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: end; }
.hero-copy { max-width: 820px; }
.hero h1 { font-size: clamp(44px, 6.4vw, 88px); }
.hero .sub { font-size: clamp(17px, 1.5vw, 20px); color: var(--muted); max-width: 44ch; margin: 22px 0 32px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 24px); }
  .hero-grid { gap: 28px; }
  .hero .sub { margin: 16px 0 22px; font-size: 16px; }
  .hero-ctas .btn { padding: 13px 18px; font-size: 14px; }
}

/* Hero art: nested threshold arches (decoration only) */
.hero-art { position: absolute; z-index: 0; right: -4vw; bottom: 0; height: 112%; width: min(54vw, 760px); pointer-events: none; }
.hero-art svg { width: 100%; height: 100%; }
.ha-line { fill: none; stroke: var(--bx); stroke-opacity: .16; stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: ha-draw 2.2s var(--ease) forwards; animation-delay: var(--d, 0s); }
.ha-door { fill: var(--bx); opacity: 0; transform: translateY(24px); animation: ha-rise 1.2s var(--ease) .5s forwards; }
.ha-inner { fill: none; stroke: var(--brass); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ha-draw 1.8s var(--ease) 1.1s forwards; }
.ha-step { fill: var(--brass); opacity: 0; animation: ha-fade .6s ease 2s forwards; }
/* After the first page of a visit the arches are already drawn (flag set by the <head> script) */
.arch-seen .ha-line, .arch-seen .ha-inner { animation: none; stroke-dashoffset: 0; }
.arch-seen .ha-door, .arch-seen .ha-step { animation: none; opacity: 1; transform: none; }
@keyframes ha-draw { to { stroke-dashoffset: 0; } }
@keyframes ha-rise { to { opacity: 1; transform: none; } }
@keyframes ha-fade { to { opacity: 1; } }
@media (max-width: 900px) {
  .hero-art { width: 70vw; height: 60%; right: -18vw; opacity: .5; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-line, .ha-inner { animation: none; stroke-dashoffset: 0; }
  .ha-door, .ha-step { animation: none; opacity: 1; transform: none; }
}
@media (max-width: 700px) { .hero-art { width: 78vw; height: 52%; right: -24vw; opacity: .32; } }

/* ---------- Home: scroll through the door ----------
   The hero stays pinned while you scroll; the door grows until its inside fills the screen,
   the about line lights up word by word, and you come out into the bordeaux events band. */
.door-scene { position: relative; height: 280vh; }
.door-scene .hero { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; padding-bottom: 0; }
.door-scene .hero > .wrap { width: 100%; }
.door-scene .hero-art { will-change: transform; }
.door-line { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter); opacity: 0; pointer-events: none; }
.door-line p { margin: 0; color: #fff; font-size: clamp(32px, 4.6vw, 68px); line-height: 1.08; letter-spacing: -.025em; font-weight: 600; text-align: center; max-width: 16ch; text-wrap: balance; }
.door-line .w { opacity: .15; }
/* the about line now lives inside the door: keep it for screen readers only */
.door-on .about .statement { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
/* First-visit intro (class set by the <head> script on the home page): scrolling waits while
   the door draws and the title comes in, line by line. */
html.intro { overflow: hidden; }
html.intro .door-scene .hero-copy > * { animation: intro-up .9s var(--ease) both; }
html.intro .door-scene .hero-copy > h1 { animation-delay: .3s; }
html.intro .door-scene .hero-copy > .sub { animation-delay: .7s; }
html.intro .door-scene .hero-copy > .hero-ctas { animation-delay: .95s; }
@keyframes intro-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .door-scene { height: 240vh; } }
@media (prefers-reduced-motion: reduce) {
  .door-scene { height: auto; }
  .door-scene .hero { position: relative; height: auto; display: block; padding-bottom: clamp(40px, 5vw, 64px); }
  .door-line { display: none; }
}

/* ---------- Page heroes (Events, Team, Apply, Legal) ---------- */
.page-hero { position: relative; overflow: hidden; min-height: 420px; display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + clamp(48px, 7vw, 96px)) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.page-hero > .wrap { position: relative; z-index: 1; }
.page-hero .overline { color: var(--bx); }
.page-hero h1 { font-size: clamp(40px, 5.6vw, 72px); }
.page-hero .lead { color: var(--muted); margin-top: 18px; }
.page-hero .label[data-deadline] { color: var(--bx); font-weight: 600; }
.page-art { height: 130%; width: min(46vw, 620px); right: -6vw; }
.page-art .ha-door { opacity: 0; }
.page-art .ha-line { stroke-opacity: .2; }
@media (max-width: 700px) { .page-hero { min-height: 0; } }

/* Team page hero: shorter, so the founders fit on the first screen */
.team-hero.page-hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: 28px; }
.team-hero h1 { font-size: clamp(36px, 4.4vw, 56px); }
.team-hero .lead { margin-top: 10px; }

/* Portraits: plain rectangles, initials when there is no photo yet */
.portrait { position: relative; aspect-ratio: 4 / 5; background: #E2D5C1; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.portrait .mono { font-size: clamp(28px, 3vw, 44px); font-weight: 600; color: var(--bx); letter-spacing: -.02em; }
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s; }
.portrait img.ok { opacity: 1; }
.portrait:has(img.ok) .mono, .o-av:has(img) > span { visibility: hidden; }

/* ---------- Next event band (home): the next event as a cream ticket on the wine band ---------- */
.next-band { padding: clamp(40px, 5vw, 56px) 0; }
.ticket { display: grid; grid-template-columns: 200px minmax(0, 1fr); background: var(--bg); color: var(--ink); border-radius: 22px; position: relative; }
.tk-stub { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 28px 26px; border-right: 2px dashed var(--line); }
.tk-stub::before, .tk-stub::after { content: ''; position: absolute; right: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--bx); }
.tk-stub::before { top: -12px; } .tk-stub::after { bottom: -12px; }
.tk-mon { font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bx); }
.tk-big { font-size: 56px; font-weight: 600; line-height: 1; letter-spacing: -.04em; color: var(--bx); }
.tk-small { font-size: 14px; color: var(--muted); }
.tk-small::first-letter { text-transform: uppercase; }
.tk-main { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; padding: 28px 32px; min-width: 0; }
.tk-over { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #8A5F2E; }
.ticket h3 { font-size: clamp(24px, 2.6vw, 32px); color: var(--ink); }
.tk-sub { margin: 4px 0 0; color: var(--muted); font-size: 16px; }
.ticket .badge { border-color: var(--line); color: var(--muted); margin-bottom: 6px; }
.tk-acts { display: flex; align-items: center; gap: 8px 20px; flex-wrap: wrap; }
.ticket .btn { min-height: 48px; }
.band .ticket .btn-bx { background: var(--bx); color: #fff; }
.band .ticket .btn-bx:hover { background: var(--bx-2); color: #fff; }
.tk-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 15px; color: var(--bx); text-decoration: underline;
  text-decoration-thickness: 1.5px; text-underline-offset: 6px; text-decoration-color: transparent; transition: text-decoration-color .2s; }
.tk-link:hover { text-decoration-color: currentColor; }
.ticket :focus-visible { outline-color: var(--bx); }
/* The band shows from the first paint and keeps its height when the event arrives, so nothing below it moves. */
.ticket { min-height: var(--nb-h, 148px); }
.next-band.ready .ticket > * { animation: nb-in .4s var(--ease) both; }
@keyframes nb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .ticket { grid-template-columns: minmax(0, 1fr); --nb-h: 0px; }
  .tk-stub { flex-direction: row; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 22px 22px 20px; border-right: 0; border-bottom: 2px dashed var(--line); }
  .tk-stub::before, .tk-stub::after { top: auto; bottom: -13px; right: auto; }
  .tk-stub::before { left: -12px; } .tk-stub::after { right: -12px; }
  .tk-big { font-size: 44px; }
  .tk-main { padding: 22px; }
}

/* Phone and tablet tap targets: footer links, founder LinkedIn and the sponsor email reach 44px without changing the desktop layout */
@media (pointer: coarse) {
  .foot-grid a { padding-block: 10px; }
  .founder .ln-link { min-height: 44px; }
  .sp-mail a { display: inline-block; padding-block: 12px; }
}

/* ---------- About (home) ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.statement { font-size: clamp(30px, 3.4vw, 46px); margin-bottom: 20px; }
.about .lead { color: var(--muted); }
.pillars { display: grid; gap: 0; border-top: 2px solid var(--bx); }
.pillars > div { padding: 22px 0; border-bottom: 1px solid var(--line); }
.pillars h3 { margin-bottom: 6px; }
.pillars p { margin: 0; color: var(--muted); font-size: 16px; }
@media (max-width: 900px) { .about-grid { grid-template-columns: minmax(0, 1fr); } }
/* With the door scroll, the about line lives inside the door, so this section leads with LSCA's
   own sentence, big, and the three points run in a row under it. */
/* land flush under the header so none of the bordeaux band above shows */
.about { scroll-margin-top: -16px; }
.door-on .about-grid { grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 5vw, 64px); }
.door-on .about .lead { margin: 0; max-width: 22ch; color: var(--ink); font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.025em; font-weight: 600; text-wrap: balance; }
.door-on .pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); border-top: 0; }
.door-on .pillars > div { border-bottom: 0; border-top: 2px solid var(--bx); padding: 22px 0 0; }
@media (max-width: 900px) { .door-on .pillars { grid-template-columns: minmax(0, 1fr); } .door-on .pillars > div { padding-bottom: 24px; } }

/* ---------- Mini case: market sizing (home) ---------- */
.case { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.case h2 { margin-bottom: 18px; }
.case-cta { margin-top: 28px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.case-ask { margin: 0; color: var(--ink); font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.case-board { border: 1px solid var(--line); border-top: 3px solid var(--bx); padding: clamp(20px, 3vw, 36px); background: var(--card); border-radius: 2px; }
.case-board .label { margin: 0 0 8px; }
.case-q { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.3; letter-spacing: -.01em; margin: 0 0 24px; }
.slider { margin-bottom: 0; }
.slider .row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 0; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.slider .inp { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.slider .inp input { width: 110px; padding: 9px 10px; border: 1px solid #CFC2AE; border-radius: 2px; background: #FFFDF9; font: inherit; font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.slider .inp input:focus { outline: none; border-color: var(--bx); box-shadow: 0 0 0 3px rgba(56, 18, 30, .14); }
.slider .inp input::placeholder { color: #B8AA97; font-weight: 500; }
.slider .inp .unit { color: var(--muted); font-weight: 600; }
.tree { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin: 24px 0 0; padding-top: 20px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.tree b { color: var(--ink); font-weight: 600; background: var(--card); padding: 4px 10px; border-radius: 2px; }
.case-result { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; flex-wrap: wrap; }
.case-result .n { font-size: clamp(48px, 5.6vw, 72px); font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--bx); font-variant-numeric: tabular-nums; text-decoration: none; }
@media (max-width: 900px) { .case { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sponsors (home) ---------- */
.sponsors { border-bottom: 1px solid var(--line); }
.sp-head { display: flex; justify-content: space-between; align-items: end; gap: 16px 40px; flex-wrap: wrap; margin-bottom: 28px; }
.sp-head > p { max-width: 40ch; margin: 0; }
/* Moving logo strip: two copies of the set slide left to right in a seamless loop */
.sp-strip { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; padding: 28px 0;
  margin: 0 calc(-1 * var(--gutter)); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sp-track { display: flex; width: max-content; animation: sp-move 40s linear infinite; }
.sp-strip:hover .sp-track { animation-play-state: paused; }
.sp-set { display: flex; align-items: center; flex: none; }
.sp-logo { flex: none; display: flex; align-items: center; justify-content: center; padding: 0 48px; border-radius: 2px; color: var(--muted); text-decoration: none; }
.sp-logo img { height: 52px; width: auto; max-width: 170px; max-height: 56px; object-fit: contain; transition: filter .2s, opacity .2s; }
.sp-logo.text { font-weight: 700; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; }
@keyframes sp-move { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .sp-track { animation: none; } }
.sp-cta { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 20px; padding: 24px 28px; background: var(--soft); border-left: 3px solid var(--bx); }
.sp-cta h3 { margin-bottom: 4px; }
.sp-cta p { margin: 0; max-width: 60ch; }
.sp-mail { margin: 8px 0 0; font-weight: 600; }
.sp-mail a { color: var(--bx); }

/* ---------- Apply band and LinkedIn follow row ---------- */
.cta-band .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px 40px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(30px, 4vw, 52px); }
.cta-band.section { padding: clamp(40px, 5vw, 64px) 0; }
.follow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 20px; align-items: center; padding-block: 32px; }
.follow .ln { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--bx); color: #fff; border-radius: 2px; }
.follow .ln svg { width: 20px; height: 20px; }
.follow h3 { font-size: 20px; }
.follow p { margin: 2px 0 0; }
.follow-btns { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 720px) { .follow { grid-template-columns: auto minmax(0, 1fr); } .follow-btns { grid-column: 1 / -1; } }

/* ---------- Footer ---------- */
.site-footer { background: var(--bx-deep); color: var(--on-bx); padding: 64px 0 32px; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; }
.foot-grid .brand { width: 180px; margin-bottom: 16px; }
.foot-grid h4 { font-size: 14px; font-weight: 600; margin: 0 0 14px; color: #fff; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 0; }
.foot-grid a { display: inline-block; padding-block: 6px; text-decoration: none; color: var(--on-bx-muted); }
.foot-grid a:hover { color: #fff; }
.foot-tag { font-weight: 600; margin: 0 0 4px; }
.site-footer .muted { color: var(--on-bx-muted); }
.foot-base { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-bx); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--on-bx-muted); font-size: 13px; }
.foot-base a { color: var(--on-bx-muted); }
.foot-base a:hover { color: #fff; }
.foot-legal { display: inline-flex; gap: 18px; flex-wrap: wrap; }
.foot-legal a { display: inline-block; padding-block: 10px; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
@media (max-width: 600px) { .foot-grid > :last-child { grid-column: 1 / -1; } }

/* ---------- Team: founders ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }
.team-founders.section { padding: 32px 0 48px; }
.team-founders h2 { font-size: clamp(26px, 2.6vw, 34px); }
.team-founders .split > p { margin: 0; color: var(--ink); font-size: clamp(19px, 1.7vw, 23px); line-height: 1.4; letter-spacing: -.01em; }
.founders { display: grid; grid-template-columns: repeat(3, minmax(0, 180px)); justify-content: center; gap: 32px; margin-top: 28px; }
.founder { text-align: center; }
.founder.below { grid-column: auto; justify-self: stretch; width: auto; }
.founder .portrait { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.founder h3 { font-size: 18px; }
.founder .role { font-size: 12.5px; margin: 2px 0 6px; }
.founder .ln-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--bx); text-decoration: none; }
.founder .ln-link svg { width: 16px; height: 16px; }
@media (max-width: 600px) { .founders { gap: 10px; } .founder h3 { font-size: 14px; } .founder .role { font-size: 11px; } }

/* Values */
.values-h { margin: 48px 0 14px; font-size: 18px; }
.values { display: flex; flex-wrap: wrap; gap: 10px; }
.values span { padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; font-weight: 500; font-size: 15px; }

/* ---------- Team: organigram ---------- */
.org { margin-top: 40px; display: flex; flex-direction: column; align-items: center; }
.o-tier { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.o-stem { width: 2px; height: 32px; background: var(--bx); }
.o-node { background: var(--card); border: 1px solid var(--line); color: var(--ink); cursor: pointer; text-align: left; border-radius: 2px; transition: border-color .2s, box-shadow .2s; }
.o-node:hover, .o-node:focus-visible { border-color: var(--bx); box-shadow: 0 6px 18px -10px rgba(56, 18, 30, .4); }
.o-person { display: flex; align-items: center; gap: 14px; padding: 12px 20px 12px 12px; min-width: 260px; }
.o-av { position: relative; width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--soft); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--bx); }
.o-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o-name { display: block; font-weight: 600; font-size: 17px; line-height: 1.25; }
.o-person .label { display: block; font-size: 13px; margin-top: 2px; }
.o-tier-label { margin: 12px 0 10px; font-weight: 600; color: var(--ink); }
.o-depts { width: 100%; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 14px; }
.o-dept { padding: 22px 20px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 120px; border-top: 3px solid var(--bx); }
.o-dept .o-name { font-size: 19px; }
.o-see { font-size: 14px; font-weight: 600; color: var(--bx); }
@media (max-width: 900px) { .o-depts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .o-person { min-width: 0; width: 100%; } .o-tier { width: 100%; } .o-depts { grid-template-columns: minmax(0, 1fr); } .o-dept { min-height: 0; } }

/* Drawer (department and person details) */
.drawer { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; visibility: hidden; }
.drawer.open { visibility: visible; }
.drawer .scrim { position: absolute; inset: 0; background: rgba(29, 16, 19, .5); opacity: 0; transition: opacity .3s; border: 0; padding: 0; cursor: pointer; }
.drawer.open .scrim { opacity: 1; }
.drawer .panel { position: relative; width: min(440px, 100%); height: 100%; background: var(--card); overflow-y: auto; padding: 32px clamp(20px, 4vw, 40px) 48px; transform: translateX(100%); transition: transform .35s var(--ease); }
.drawer.open .panel { transform: none; }
.drawer .close { background: none; border: 1px solid var(--line); width: 44px; height: 44px; cursor: pointer; font-size: 20px; float: right; border-radius: 999px; }
.drawer h3 { font-size: 28px; margin: 28px 0 6px; clear: both; }
.drawer ul { padding-left: 18px; color: var(--muted); }
.drawer li { margin-bottom: 6px; }
.drawer .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.drawer .roles li b { color: var(--ink); font-weight: 600; }
.drawer .rule { display: block; border: 0; height: 1px; background: var(--line); margin: 20px 0; }

/* ---------- Events ---------- */
.tabs { display: inline-flex; gap: 4px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 14px; font-weight: 600; font-size: 15px; cursor: pointer; color: var(--muted); }
.tabs button[aria-selected="true"] { color: var(--bx); border-bottom-color: var(--bx); }
.ev-list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.ev { display: grid; grid-template-columns: 96px minmax(0, 1fr) 220px auto; gap: clamp(16px, 3vw, 36px); align-items: center; padding: 28px 0; border-bottom: 1px solid var(--line); }
.ev .date .d { font-size: 48px; font-weight: 600; line-height: 1; letter-spacing: -.03em; color: var(--bx); }
.ev .date .m { font-size: 13px; color: var(--muted); text-transform: capitalize; }
.ev h3 { font-size: 21px; margin-bottom: 4px; }
.ev .sum { color: var(--muted); font-size: 15px; margin: 0; }
.ev .facts { font-size: 14.5px; color: var(--muted); display: flex; flex-direction: column; gap: 2px; }
.ev .facts b { color: var(--ink); }
.ev .act { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.ev .act a.small { font-size: 13.5px; color: var(--muted); }
.ev.past { grid-template-columns: 96px minmax(0, 1fr) 220px; }
.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 8px; border: 1px solid var(--line); border-radius: 2px; color: var(--muted); margin-bottom: 8px; }
.badge.sold { color: var(--bx); border-color: var(--bx); }
@media (max-width: 900px) {
  .ev, .ev.past { grid-template-columns: 72px minmax(0, 1fr); }
  .ev .facts { grid-column: 2; }
  .ev .act { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 18px; }
  .ev .date .d { font-size: 38px; }
}
.skeleton { height: 120px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, transparent, var(--soft), transparent); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.empty { padding: 40px 0; border-bottom: 1px solid var(--line); }
.empty h3 { font-size: 24px; margin-bottom: 8px; }
.ev-loading { margin: 0; padding: 28px 0; border-bottom: 1px solid var(--line); }
.preview-note { font-size: 13px; color: var(--muted); background: var(--soft); padding: 10px 14px; margin-bottom: 20px; display: inline-block; border-radius: 2px; }

/* Season plan list */
.plan-note { margin: 10px 0 0; max-width: 40ch; color: var(--muted); font-size: 15px; }
.plan-list { list-style: none; margin: 32px 0 0; padding: 0; border-top: 2px solid var(--bx); }
.plan-list li { display: grid; grid-template-columns: 220px minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(14px, 3vw, 36px); padding: 22px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.plan-list .label { color: var(--bx); font-weight: 600; }
.plan-list h3 { font-size: 19px; }
.plan-list p { margin: 0; font-size: 15.5px; }
.prog-sub { display: block; font-size: 14px; color: var(--muted); margin-top: 2px; }
@media (max-width: 820px) { .plan-list li { grid-template-columns: minmax(0, 1fr); gap: 4px; } }

/* How registration works */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.how > div { border-top: 3px solid var(--brass); padding-top: 18px; }
.how .label { color: var(--brass); font-weight: 600; }
.how h3 { margin: 6px 0 6px; }
@media (max-width: 760px) { .how { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Apply ---------- */
.apply-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.process { list-style: none; margin: 0 0 40px; padding: 0; counter-reset: s; }
.process li { position: relative; padding: 0 0 24px 44px; counter-increment: s; }
.process li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--bx); color: #fff; font-size: 13px; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.process li::after { content: ''; position: absolute; left: 13px; top: 32px; bottom: 4px; width: 2px; background: var(--line); }
.process li:last-child::after { display: none; }
.process b { display: block; font-size: 17px; margin-bottom: 2px; }
.process span { color: var(--muted); font-size: 15px; }
.look { border-top: 1px solid var(--line); padding-top: 24px; }
.look ul { padding-left: 18px; color: var(--muted); font-size: 15.5px; }
@media (max-width: 900px) { .apply-grid { grid-template-columns: minmax(0, 1fr); } .apply-side { order: 2; } }

/* Form card and steps */
.form-card { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--bx); padding: clamp(20px, 4vw, 44px); border-radius: 2px; scroll-margin-top: calc(var(--header-h) + 20px); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 32px; }
.steps button { background: none; border: 0; padding: 10px 0 0; text-align: left; border-top: 3px solid var(--line); color: var(--muted); font-size: 14px; cursor: pointer; }
.steps button .label { display: block; font-size: 12px; }
.steps button[aria-current="step"] { border-top-color: var(--bx); color: var(--ink); font-weight: 600; }
.steps button.done { border-top-color: var(--bx-2); color: var(--ink); }
.steps button:disabled { cursor: default; }
.fstep { display: none; }
.fstep.active { display: block; }
.fstep h2 { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 4px; }
.fstep > p.muted { margin-bottom: 24px; }
.fgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.fgrid .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .fgrid { grid-template-columns: minmax(0, 1fr); } }

/* Fields */
.field label, .field legend { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; background: #fff; border: 1px solid #CFC5C4; border-radius: 2px; padding: 12px 14px; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .2s, box-shadow .2s;
}
.field input[type="text"], .field input[type="email"], .field input[type="url"], .field input[type="tel"] { background: #FFFDF9; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-color: #FFFDF9;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.field input:focus, .field select:focus { outline: none; border-color: var(--bx); box-shadow: 0 0 0 3px rgba(56, 18, 30, .14); }
.field .hint { font-size: 13px; color: var(--muted); margin-top: 6px; }
.field .err { display: none; font-size: 13px; color: #A32638; margin-top: 6px; }
.field.invalid input, .field.invalid select, .field.invalid .drop { border-color: #A32638; }
.field.invalid .err { display: block; }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }

/* File drops */
.drop { border: 1px dashed #BFB3B2; border-radius: 2px; background: var(--soft); padding: 24px 20px; text-align: center; cursor: pointer; position: relative; transition: border-color .2s, background .2s; }
.drop:hover, .drop.over { border-color: var(--bx); background: #F1EAE9; }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop .t { font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.drop .s { font-size: 13px; color: var(--muted); }
.drop svg { width: 24px; height: 24px; margin: 0 auto 8px; color: var(--bx); }
.drop.has-file { border-style: solid; border-color: var(--bx); background: var(--card); text-align: left; display: flex; align-items: center; gap: 14px; }
.drop.has-file svg { margin: 0; flex: none; }
.drop .rm { position: relative; z-index: 2; margin-left: auto; background: var(--card); border: 1px solid var(--line); padding: 6px 10px; font-size: 13px; cursor: pointer; border-radius: 2px; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); font-weight: 400 !important; }
.consent input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--bx); flex: none; }
.form-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); flex-wrap: wrap; }

/* Review, errors, success */
.review { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 8px 16px; font-size: 15px; margin: 0 0 24px; padding: 20px; background: var(--card); border-radius: 2px; }
.review dt { color: var(--muted); }
.review dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .review { grid-template-columns: minmax(0, 1fr); } .review dd { margin-bottom: 8px; } }
.form-error { display: none; background: #FBEDEE; border-left: 3px solid #A32638; padding: 14px 16px; margin-top: 20px; font-size: 14.5px; }
.form-error.show { display: block; }
.form-error.info { background: var(--soft); border-left-color: var(--bx); }
.success { display: none; }
.success.show { display: block; }
.success > svg { width: 48px; height: 60px; margin-bottom: 18px; }
.success h2 { margin-bottom: 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; display: none; }
.sending .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* WhatsApp community card (hidden while no link is set) */
.wa-card { display: flex; gap: 14px; align-items: flex-start; margin-top: 28px; padding: 20px; background: #EEF6F1; border-radius: 2px; }
.wa-card > svg { width: 26px; height: 26px; flex: none; color: #1F7A4D; }
.wa-card h3 { font-size: 17px; margin-bottom: 4px; }
.wa-card p { font-size: 14.5px; }
.wa-card .btn { background: #1F7A4D; color: #fff; }
.wa-card .btn:hover { background: #17633E; }

/* FAQ */
.faq { border-top: 1px solid var(--line); margin-top: 28px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 40px 20px 0; font-size: 18px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; color: var(--bx); font-size: 24px; font-weight: 400; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); max-width: 70ch; padding-bottom: 18px; margin: 0; }
.priv-short { margin-top: 40px; font-size: 15px; }
.priv-short a { color: var(--bx); font-weight: 600; }

/* ---------- Legal page ---------- */
.legal-nav { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.legal-nav a { padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; color: var(--ink); background: var(--card); }
.legal-nav a:hover { border-color: var(--bx); }
.legal-wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.legal article { max-width: 820px; scroll-margin-top: calc(var(--header-h) + 24px); padding: 8px 0 40px; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.legal article:last-child { border-bottom: 0; margin-bottom: 0; }
.legal h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 14px; }
.legal h3 { font-size: 18px; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--muted); font-size: 16px; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: 10px; }
.legal li b { color: var(--ink); }
.legal-id { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px 20px; padding: 20px; background: var(--card); border: 1px solid var(--line); border-radius: 2px; margin: 20px 0; font-size: 15px; }
.legal-id dt { font-weight: 600; }
.legal-id dd { margin: 0; color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 520px) { .legal-id { grid-template-columns: minmax(0, 1fr); } .legal-id dd { margin-bottom: 8px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}