/* STUD Entertainments site. Tokens and components come from the STUD design kit
   (https://claude.ai/artifact/1DNvd65AuZDqcwuQjHFzC8). Change values there first, then here. */

@font-face {
  font-family: "Bricolage Grotesque Variable";
  src: url("fonts/BricolageGrotesque-Variable.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

/* ---------- Tokens: White (light) first, Night (dark) follows the device until the visitor picks ---------- */
:root {
  --page: #ffffff; --surface: #f3f6f5; --raised: #e6edeb;
  --text: #004741; --muted: #56706c; --line: rgba(0,71,65,0.12);
  --btn: #004741; --btn-on: #ffffff;
  --highlight-bg: #ffc6a8; --highlight-text: #004741;
  --green: #1a7f45; --amber: #a35f00;
  --strip: #004741; --strip-on: #f0ede4; /* the film strip: pine with bone labels in White */
  --pine: #004741; --night: #0c1614; --bone: #f0ede4; --peach: #ffc6a8;
  --icon-moon: block; --icon-sun: none;
  --portrait-bg: #f3f6f5;
  --hairline-plate: #ffffff; --hairline-hi: #004741; --hairline-edge: #2d5d57; --hairline-mid: #7d9592; --hairline-lo: #cddad7; --hairline-stroke: 1;

  --font-brand: "Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ease-stud: cubic-bezier(0.16, 1, 0.3, 1);
  --radius-pill: 9999px; --radius-card: 18px; --radius-row: 12px;
  --gutter: 20px; --section-gap: 56px; --content-max: 1600px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --page: #0c1614; --surface: #15221f; --raised: #1d2e2a;
    --text: #f0ede4; --muted: #93a8a4; --line: rgba(240,237,228,0.10);
    --btn: #f0ede4; --btn-on: #0c1614;
    --highlight-bg: #ffc6a800; --highlight-text: #ffc6a8;
    --green: #59c749; --amber: #f2b84b;
    --strip: #15221f; --strip-on: #93a8a4;
    --icon-moon: none; --icon-sun: block;
    --portrait-bg: radial-gradient(ellipse 70% 60% at 55% 30%, #3d5a53 0%, #22362f 50%, #15221f 85%);
    --hairline-plate: #0c1614; --hairline-hi: #f0ede4; --hairline-edge: #b7c6c2; --hairline-mid: #5d726e; --hairline-lo: #25362f;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --page: #0c1614; --surface: #15221f; --raised: #1d2e2a;
  --text: #f0ede4; --muted: #93a8a4; --line: rgba(240,237,228,0.10);
  --btn: #f0ede4; --btn-on: #0c1614;
  --highlight-bg: #ffc6a800; --highlight-text: #ffc6a8;
  --green: #59c749; --amber: #f2b84b;
  --strip: #15221f; --strip-on: #93a8a4;
  --icon-moon: none; --icon-sun: block;
  --portrait-bg: radial-gradient(ellipse 70% 60% at 55% 30%, #3d5a53 0%, #22362f 50%, #15221f 85%);
  --hairline-plate: #0c1614; --hairline-hi: #f0ede4; --hairline-edge: #b7c6c2; --hairline-mid: #5d726e; --hairline-lo: #25362f;
  color-scheme: dark;
}
@media (min-width: 700px) { :root { --gutter: 40px; } }
@media (min-width: 1200px) { :root { --gutter: 64px; --section-gap: 88px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 96px; }
/* Lenis smooth scroll (vendor/lenis.min.js) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
body {
  margin: 0; background: var(--page); color: var(--text);
  font: 400 16px/1.55 var(--font-brand); -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--content-max); margin: 0 auto; padding-inline: var(--gutter); }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 10; background: var(--page); padding: 8px 14px; border-radius: var(--radius-pill); }

.display {
  font-size: clamp(38px, 5.6vw, 76px); font-weight: 680; line-height: 0.98;
  letter-spacing: -0.04em; font-variation-settings: "opsz" 96;
}
@media (min-width: 1800px) { .display { font-size: 92px; } }
.section-heading { font-size: clamp(30px, 3.4vw, 44px); font-weight: 650; line-height: 1.05; letter-spacing: -0.03em; }
.card-title { font-size: 24px; font-weight: 650; line-height: 1.2; letter-spacing: -0.03em; }
.item-title { font-size: 19px; font-weight: 620; line-height: 1.3; }
.lead { font-size: 17px; color: var(--muted); max-width: 60ch; }
.meta { font-size: 13px; color: var(--muted); line-height: 1.4; }

section { padding-block: var(--section-gap); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 12px; margin-bottom: 32px; }

/* ---------- Wordmark: stud! as live text, letters lift once per hover ---------- */
.stud-wordmark { display: inline-flex; font-weight: 750; font-size: 22px; letter-spacing: -0.04em; font-variation-settings: "opsz" 96; line-height: 1; }
.stud-wordmark > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .stud-wordmark:hover > span { animation: stud-letter 420ms var(--ease-stud) calc(var(--i) * 55ms) 1 both; }
}
@keyframes stud-letter { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-0.18em); } }

/* ---------- Highlight + FilmWord: the one peach moment on the page ---------- */
.stud-mark {
  background: var(--highlight-bg); color: var(--highlight-text);
  border-radius: 0.12em; padding: 0 0.1em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.stud-film { position: relative; display: inline-block; }
.stud-film-letter { display: inline-block; }
.stud-film-strip {
  pointer-events: none; position: absolute; left: 0; right: 0; height: 0.08em; opacity: 0.4;
  background: repeating-linear-gradient(90deg, currentColor 0 0.13em, transparent 0.13em 0.28em);
}
.stud-film-strip[data-edge="top"] { top: 0.07em; }
.stud-film-strip[data-edge="bottom"] { bottom: 0.05em; }
.stud-film-sparkle {
  pointer-events: none; position: absolute; width: 0.3em; height: 0.3em;
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
}
@media (prefers-reduced-motion: no-preference) {
  :is(.stud-film:hover, .stud-film[data-intro]) .stud-film-strip { animation: stud-film-roll 900ms var(--ease-stud) both; }
  :is(.stud-film:hover, .stud-film[data-intro]) .stud-film-strip[data-edge="bottom"] { animation-name: stud-film-roll-back; }
  :is(.stud-film:hover, .stud-film[data-intro]) .stud-film-letter { animation: stud-film-frame 480ms steps(4, end) calc(var(--i) * 70ms) both; }
  :is(.stud-film:hover, .stud-film[data-intro]) .stud-film-sparkle { animation: stud-film-sparkle 800ms ease-out calc(120ms + var(--i) * 110ms) both; }
}
@keyframes stud-film-roll { from { opacity: 0; transform: translateX(-0.5em); } to { opacity: 0.4; transform: translateX(0); } }
@keyframes stud-film-roll-back { from { opacity: 0; transform: translateX(0.5em); } to { opacity: 0.4; transform: translateX(0); } }
@keyframes stud-film-frame {
  0% { transform: translateY(0); opacity: 1; } 25% { transform: translateY(-0.07em); opacity: 0.55; }
  50% { transform: translateY(0.04em); opacity: 1; } 75% { transform: translateY(-0.03em); opacity: 0.8; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes stud-film-sparkle {
  0% { opacity: 0; transform: scale(0) rotate(0deg); } 50% { opacity: 1; transform: scale(1.35) rotate(45deg); }
  100% { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* ---------- Buttons: pill, pine on White, bone at Night ---------- */
.stud-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  border: 0; border-radius: var(--radius-pill); background: var(--btn); color: var(--btn-on);
  font: 600 15px/1.2 var(--font-brand); padding: 12px 20px; cursor: pointer; text-decoration: none;
  transition: transform 150ms var(--ease-stud), filter 150ms var(--ease-stud);
}
.stud-btn:hover { filter: brightness(0.97); }
.stud-btn:active { transform: scale(0.98); }
.stud-btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1.5px var(--line); }
.stud-btn--icon { width: 44px; padding: 0; }
.stud-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-moon { display: var(--icon-moon); }
.icon-sun { display: var(--icon-sun); }

/* Film button: a strip of film rolls through and a projector light sweeps across, once per hover */
.stud-film-btn { position: relative; overflow: hidden; isolation: isolate; }
.stud-film-btn::before, .stud-film-btn::after { content: ""; pointer-events: none; position: absolute; top: 0; bottom: 0; z-index: -1; opacity: 0; }
.stud-film-btn::before {
  left: 0; width: 200%;
  background-image: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 13px), repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 13px);
  background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 3px, 0 calc(100% - 3px);
}
.stud-film-btn::after { left: 0; right: 0; background: linear-gradient(100deg, transparent 30%, currentColor 50%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .stud-film-btn:hover::before { animation: stud-btn-film 900ms linear both; }
  .stud-film-btn:hover::after { animation: stud-btn-light 700ms ease-out both; }
}
@keyframes stud-btn-film { from { opacity: 0; transform: translateX(-50%); } 25% { opacity: 0.35; } to { opacity: 0.3; transform: translateX(0); } }
@keyframes stud-btn-light { from { opacity: 0.22; transform: translateX(-100%); } to { opacity: 0.22; transform: translateX(100%); } }

/* ---------- Status chip (amber = in progress, always with a word) ---------- */
.stud-chip {
  display: inline-flex; align-items: center; gap: 6px; font: 600 13px/1.3 var(--font-brand);
  padding: 5px 10px; border-radius: var(--radius-pill); background: var(--surface); color: var(--muted); white-space: nowrap;
}
.stud-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.stud-chip--production { color: var(--amber); }
.stud-chip--brand { color: var(--text); }

/* ---------- Floating header ---------- */
.site-header { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 12px); z-index: 5; padding-top: 12px; }
.stud-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 56px; padding: 0 8px 0 20px; border-radius: var(--radius-card);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), 0 8px 24px rgba(12, 22, 20, 0.08);
}
.stud-header > a { text-decoration: none; }
.stud-header-links { display: none; gap: 28px; font-size: 15px; }
.stud-header-links a { color: var(--muted); text-decoration: none; }
.stud-header-links a:hover, .stud-header-links a[aria-current] { color: var(--text); }
.stud-header-right { display: flex; align-items: center; gap: 8px; }
.header-link { font-size: 15px; font-weight: 600; text-decoration: none; padding: 10px 12px; border-radius: var(--radius-pill); }
.header-link:hover, .header-link[aria-current] { background: var(--page); }
@media (min-width: 820px) { .stud-header { height: 64px; padding: 0 10px 0 24px; } }
@media (min-width: 1100px) { .stud-header-links { display: flex; } }

/* ---------- Reveal: small things rise into place ---------- */
@media (prefers-reduced-motion: no-preference) {
  .stud-reveal { animation: stud-reveal 320ms var(--ease-stud) both; animation-delay: var(--d, 0ms); }
}
@keyframes stud-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- White/Night switch: the new mode opens as a circle from the click ---------- */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
  ::view-transition-new(root) { animation: stud-theme-reveal 520ms var(--ease-stud); }
}
@keyframes stud-theme-reveal {
  from { clip-path: circle(0 at var(--stud-vt-x, 100%) var(--stud-vt-y, 0)); }
  to { clip-path: circle(150vmax at var(--stud-vt-x, 100%) var(--stud-vt-y, 0)); }
}

/* ---------- Layout helpers ---------- */
.eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.split { display: grid; gap: 40px; }
@media (min-width: 1100px) { .split { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } }
.prose { display: grid; gap: 16px; max-width: 62ch; }
.prose p:not(.lead):not(.eyebrow) { color: var(--text); }
.stud-chip--open { color: var(--green); }

/* ---------- Hero: the headline, and the slate of everything STUD makes ---------- */
.hero { display: grid; gap: 48px; padding-block: 64px var(--section-gap); border-top: 0; }
@media (min-width: 1100px) { .hero { grid-template-columns: 1.1fr 0.9fr; align-items: end; gap: 64px; padding-top: 96px; } }
.hero-copy { display: grid; gap: 24px; min-width: 0; }
.hero .display { max-width: 12ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* The slate: a strip of film with sprocket holes down both edges, one title per frame */
.slate {
  background-color: var(--strip); border-radius: var(--radius-card); padding: 14px 36px;
  display: grid; gap: 6px; min-width: 0;
  background-image:
    repeating-linear-gradient(180deg, transparent 0 10px, var(--page) 10px 22px, transparent 22px 34px),
    repeating-linear-gradient(180deg, transparent 0 10px, var(--page) 10px 22px, transparent 22px 34px);
  background-size: 10px 100%; background-repeat: no-repeat; background-position: 13px 0, calc(100% - 13px) 0;
}
.slate-head { display: flex; justify-content: space-between; gap: 12px; padding: 6px 4px 8px; color: var(--strip-on); font-size: 13px; font-weight: 600; }
@media (max-width: 520px) { .slate-head span + span { display: none; } }
.slate-row {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px;
  background: var(--page); border-radius: var(--radius-row); padding: 14px 16px; text-decoration: none;
  transition: transform 200ms var(--ease-stud);
}
.slate-row:hover { transform: translateX(4px); }
.slate-row b { font-size: 17px; font-weight: 620; line-height: 1.25; }
.slate-row .meta { grid-column: 1; }
.slate-row .stud-chip, .slate-row .go { grid-column: 2; grid-row: 1 / span 2; }
.go { color: var(--muted); font-size: 18px; }
.product-more { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line); }

/* ---------- Cinergia ---------- */
.big-name { font-size: clamp(44px, 7vw, 104px); font-weight: 700; line-height: 0.95; letter-spacing: -0.045em; font-variation-settings: "opsz" 96; }
.sketch { background: var(--surface); border-radius: var(--radius-card); padding: 20px; display: grid; gap: 14px; min-width: 0; }
@media (min-width: 1100px) { .sketch { position: sticky; top: 104px; padding: 28px; } }
.search {
  display: flex; align-items: center; gap: 10px; background: var(--page); border-radius: var(--radius-pill);
  padding: 12px 18px; font-size: 15px; box-shadow: inset 0 0 0 1px var(--line);
}
.search svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips .stud-chip { background: var(--page); color: var(--text); }
.stud-card { background: var(--page); border-radius: var(--radius-card); padding: 20px; display: grid; gap: 14px; }
.stud-card-who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.stud-card-av { width: 38px; height: 38px; border-radius: 50%; background: var(--raised); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.stud-card-who b { display: block; font-weight: 600; }
.stud-card-who small { color: var(--muted); font-size: 13px; }
.stud-card-who time { margin-left: auto; color: var(--muted); font-size: 13px; }
.stud-card-roles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.stud-card-roles li { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: var(--surface); border-radius: var(--radius-row); padding: 10px 12px; font-size: 15px; }
.stud-card-roles .stud-chip { background: var(--page); }
.sketch-note { text-align: center; }

.invite { margin-top: 32px; padding: clamp(24px, 3vw, 36px); border-radius: var(--radius-card); background: var(--surface); display: grid; gap: 12px; }
.invite .actions { margin-top: 4px; }
@media (min-width: 1100px) { .invite { grid-template-columns: 1fr auto; align-items: center; column-gap: 48px; } .invite .item-title, .invite p { grid-column: 1; } .invite .actions { grid-column: 2; grid-row: 1 / span 3; margin: 0; } }

/* ---------- Cinergia: what it does ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
      }
}
.tiles { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cin-all { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 1100px) {
  /* the tiles grow so the column ends level with the design preview */
  #cinergia .split { align-items: stretch; }
  #cinergia .prose { display: flex; flex-direction: column; }
  #cinergia .cin-all { flex: 1; grid-template-rows: auto 1fr; margin-top: 16px; }
  #cinergia .tiles { grid-auto-rows: 1fr; margin: 0; }
  #cinergia .sketch { align-self: start; }
}
.tiles li { background: var(--surface); border-radius: var(--radius-row); padding: 14px; display: grid; gap: 4px; align-content: start; }
.tiles svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.tiles b { font-size: 16px; font-weight: 620; }
.tiles span { color: var(--muted); font-size: 14px; line-height: 1.45; }

/* ---------- Products ---------- */
.products { display: grid; gap: 16px; }
.product { background: var(--surface); border-radius: var(--radius-card); padding: 28px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.product .stud-chip { justify-self: start; background: var(--page); }
.product > p:not(.eyebrow) { max-width: 56ch; }
.pipeline { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .pipeline { grid-template-columns: repeat(5, 1fr); } .pipeline--4 { grid-template-columns: repeat(4, 1fr); } }
.stat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-block: 8px; }
.stat-from, .stat-to { font-size: clamp(32px, 4.4vw, 56px); font-weight: 680; letter-spacing: -0.04em; line-height: 1; font-variation-settings: "opsz" 96; }
.stat-from { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.stat-arrow { font-size: 28px; color: var(--muted); }
.stat-note { flex-basis: 100%; margin-top: 8px; }
.pipeline li { background: var(--page); border-radius: var(--radius-row); padding: 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.pipeline b { font-size: 16px; font-weight: 620; }
.pipeline .meta { font-variant-numeric: tabular-nums; }
.pipeline .how { color: var(--muted); font-size: 14px; line-height: 1.45; }

.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tags .stud-chip { background: var(--surface); }
.product-head { display: grid; gap: 12px; }
.product-head p { max-width: 64ch; }
.feature-grid { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-grid li { background: var(--page); border-radius: var(--radius-row); padding: 16px; display: grid; gap: 6px; align-content: start; min-width: 0; }
.feature-grid b { font-size: 16px; font-weight: 620; }
.feature-grid span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* ---------- Community: photo beside the story ---------- */
.community { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1100px) { .community { grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center; } }
@media (max-width: 1099px) { .community .photo { order: 2; } }
.photo { margin: 0; display: grid; gap: 12px; min-width: 0; }
.photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-card); background: var(--surface); }
.facts { margin: 8px 0 0; display: grid; }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding-block: 12px; border-top: 1px solid var(--line); }
.facts div:last-child { border-bottom: 1px solid var(--line); }
.facts dd { margin: 0; font-weight: 600; text-align: right; }

/* ---------- Founder ---------- */
.founder { display: grid; gap: 32px; align-items: center; }
@media (min-width: 820px) { .founder { grid-template-columns: 1.2fr minmax(260px, 0.8fr); gap: 64px; } .portrait { justify-self: end; width: 100%; } }
.portrait {
  background: var(--portrait-bg); border-radius: var(--radius-card); overflow: hidden;
  display: flex; justify-content: flex-end; align-items: flex-end; padding-top: 32px; max-width: 420px;
}
/* the photo is cut out; its own cropped edges sit flush on the card's right and bottom edges */
.portrait img { display: block; width: 78%; height: auto; }

.full-name { font-size: 15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); margin-top: -4px; }

/* ---------- Hairline figures (figures.js): line drawings that answer the pointer ---------- */
.figure { width: 100%; max-width: 340px; }
.product .figure, .job .figure { --hairline-plate: var(--surface); }
.product-top { display: grid; gap: 16px; }
@media (min-width: 900px) { .product-top { grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); gap: 24px; align-items: center; } .product-top .figure { max-width: 440px; } }
.figure-wrap { display: grid; justify-items: center; gap: 4px; }
.figure-read { font-variant-numeric: tabular-nums; min-height: 1.4em; }

/* ---------- Closing ---------- */
.closing { display: grid; gap: 24px; }
.closing .big-name { max-width: 14ch; text-wrap: balance; }
.closing-text, .closing-contact { display: grid; gap: 16px; min-width: 0; }
.closing-contact .email { font-size: clamp(22px, 2.3vw, 34px); }
@media (min-width: 1100px) { .closing { grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: end; } }
@media (max-width: 1099px) { #cinergia .sketch { order: -1; } }

/* ---------- Contact ---------- */
.contact { display: grid; gap: 24px; }
.email {
  font-size: clamp(22px, 3.2vw, 40px); font-weight: 650; letter-spacing: -0.03em; line-height: 1.1;
  overflow-wrap: anywhere; user-select: all;
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 40px 56px; }
.footer-row { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.site-footer .meta { margin-top: 16px; }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 8px; }
@media (min-width: 1100px) { .faq { grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; } }
.faq-list { display: grid; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding-block: 20px; cursor: pointer; list-style: none; font-size: 19px; font-weight: 620; line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 24px; font-weight: 400; color: var(--muted); flex: none; transition: transform 200ms var(--ease-stud); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding-bottom: 20px; max-width: 62ch; color: var(--muted); }

/* ---------- Careers ---------- */
.careers { padding-block: 56px var(--section-gap); display: grid; gap: 40px; }
@media (min-width: 1100px) { .careers { grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; } .careers-side { position: sticky; top: 104px; } }
.careers-side { display: grid; gap: 16px; justify-items: center; min-width: 0; }
.careers-side .job, .careers-side .notice { justify-self: stretch; }
.careers-intro { display: grid; gap: 40px; min-width: 0; }
.careers .big-name { max-width: 14ch; text-wrap: balance; }
.job { background: var(--surface); border-radius: var(--radius-card); padding: clamp(24px, 4vw, 40px); display: grid; gap: 24px; min-width: 0; }
.job-head { display: grid; gap: 8px; }
.job-head .stud-chip { justify-self: start; background: var(--page); }
.job-skills { display: grid; gap: 12px; }
.job .chips { list-style: none; margin: 0; padding: 0; }
.apply { display: grid; gap: 16px; padding-block: 0; border-top: 0; }
.apply > p:not(.email) { max-width: 62ch; }
.notice { padding: 20px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1.5px var(--line); display: grid; gap: 8px; }
.notice p { color: var(--muted); }

/* ---------- Legal pages ---------- */
.legal { padding-block: 56px var(--section-gap); display: grid; gap: 40px; }
.legal article { max-width: 68ch; display: grid; gap: 14px; }
.legal h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; margin-top: 24px; }
.legal ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }