/* Silvia Lavy, Beauty Educator.
   Two themes from her own mockups: cream and gold (light) and black and gold (dark).
   The page follows the visitor's device setting; the header button overrides it.
   Shapes are square throughout (buttons, cards, photos), as in the mockups. */

:root {
  --bg: #faf7f1;
  --surface: #ffffff;
  --surface-2: #f2ece1;
  --line: #e4dccd;
  --ink: #16130f;
  --ink-soft: #5c544a;
  --gold: #85621f;          /* text-safe gold on cream */
  --gold-bright: #c9a24f;   /* rules, icons, fills */
  --btn: #16130f;
  --btn-ink: #faf7f1;
  --hero-scrim: rgb(250 247 241 / 0);
  --wrap: 1280px;
  --space: 64px;   /* the one gap used between every section */
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --display: "Playfair Display", "Times New Roman", serif;
  --serif: "EB Garamond", Georgia, serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0f0e0c;
  --surface: #171512;
  --surface-2: #1d1a16;
  --line: #322d26;
  --ink: #f4efe6;
  --ink-soft: #bfb6a8;
  --gold: #d1ad62;
  --gold-bright: #c9a24f;
  --btn: #c9a24f;
  --btn-ink: #16130f;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f0e0c;
    --surface: #171512;
    --surface-2: #1d1a16;
    --line: #322d26;
    --ink: #f4efe6;
    --ink-soft: #bfb6a8;
    --gold: #d1ad62;
    --gold-bright: #c9a24f;
    --btn: #c9a24f;
    --btn-ink: #16130f;
    color-scheme: dark;
  }
}

/* Theme-specific images (logo, portrait): .on-light shows in the light theme, .on-dark in the dark one */
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .on-light { display: none !important; }
  :root:not([data-theme="light"]) .on-dark { display: block !important; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 18px; line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background 0.3s, color 0.3s; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
::selection { background: var(--gold-bright); color: #16130f; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 8px; z-index: 100; background: var(--btn); color: var(--btn-ink); padding: 8px 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Type ---------- */
h1, h2, h3 { margin: 0; font-weight: 500; }
.display, .h2, .h3d { font-family: var(--display); letter-spacing: -0.025em; line-height: 1.04; font-weight: 500; }
.display { font-size: clamp(2.6rem, 4.6vw, 4.3rem); letter-spacing: -0.035em; }
.h2 { font-size: clamp(2.1rem, 4vw, 3.4rem); }
.h3d { font-size: clamp(1.45rem, 2vw, 1.75rem); letter-spacing: -0.015em; line-height: 1.12; }
.display em, .h2 em { font-style: italic; color: var(--gold); }
.lead { font-size: clamp(1.2rem, 1.6vw, 1.45rem); color: var(--ink); max-width: 40ch; margin: 24px 0 0; line-height: 1.45; }
.body { color: var(--ink-soft); max-width: 62ch; }
.eyebrow { display: flex; align-items: center; gap: 18px; font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold); margin: 0 0 22px; }
.eyebrow::after { content: ""; height: 1px; width: min(180px, 22vw); background: var(--gold-bright); opacity: 0.8; }
@media (max-width: 600px) { .eyebrow { letter-spacing: 0.2em; font-size: 12px; gap: 12px; } .eyebrow::after { width: 40px; } }

/* ---------- Buttons (square, as in the mockups) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 28px;
  background: var(--btn); color: var(--btn-ink); border: 1px solid var(--btn);
  font-family: var(--serif); font-size: 18px; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease);
}
.btn:hover { background: var(--gold-bright); border-color: var(--gold-bright); color: #16130f; }
.btn:active { transform: translateY(1px) scale(0.98); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn i { font-size: 17px; transition: transform 0.25s var(--ease); }
.btn:hover i.ph-arrow-right { transform: translateX(3px); }
.textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold-bright); padding-bottom: 3px; }
.textlink:hover { color: var(--gold); }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 96px; }
.brand { display: block; flex: none; }
.brand img { height: 74px; width: auto; }
.nav { display: flex; align-items: center; gap: 30px; }
.nav a:not(.btn) { text-decoration: none; font-size: 17px; position: relative; padding: 6px 0; color: var(--ink); white-space: nowrap; }
.nav a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold-bright); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease); }
.nav a:not(.btn):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { padding: 10px 26px; font-size: 17px; }
.header-tools { display: flex; align-items: center; gap: 6px; }
.theme-toggle, .menu-toggle { background: none; border: 0; width: 42px; height: 42px; display: grid; place-items: center; font-size: 21px; cursor: pointer; color: var(--ink); }
.theme-toggle:hover { color: var(--gold); }
.theme-toggle .ph-moon { display: block; }
.theme-toggle .ph-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .ph-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .ph-sun { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .ph-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .ph-sun { display: block; }
}
.menu-toggle { display: none; font-size: 26px; }
@media (max-width: 1060px) {
  .menu-toggle { display: grid; }
  .site-header .wrap { height: 72px; }
  .brand img { height: 50px; }
  .nav { position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gutter) 24px; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s; }
  .nav.is-open { transform: none; opacity: 1; visibility: visible; }
  .nav a:not(.btn) { padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 19px; }
  .nav a:not(.btn)::after { display: none; }
  .nav .btn { margin-top: 20px; padding: 14px 22px; }
}
@media (min-width: 1061px) { .header-tools { order: 3; } }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero .wrap { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.hero__copy { padding: clamp(40px, 6vw, 88px) 0 clamp(36px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 36px; }
.hero__sign { display: flex; align-items: center; gap: 28px; margin-top: clamp(32px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); max-width: 520px; }
.hero__sign span { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; }
.sa-logo { height: 46px; width: auto; }
:root[data-theme="dark"] .sa-logo { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sa-logo { filter: invert(1); } }
.hero__media { position: relative; align-self: end; }
.hero__media img { width: 100%; height: 100%; max-height: 660px; object-fit: cover; object-position: center top; }
@media (max-width: 880px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero__media { order: -1; margin: 0 calc(var(--gutter) * -1); }
  .hero__media img { max-height: 520px; aspect-ratio: 4 / 5; }
  .hero__copy { padding-top: 32px; }
}

/* ---------- Schools marquee ---------- */
.schools { overflow: hidden; padding: 26px 0; border-bottom: 1px solid var(--line); }
.schools__track { display: flex; width: max-content; animation: schools 110s linear infinite; will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; }
.schools__track span { -webkit-font-smoothing: antialiased; font-family: var(--display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-style: italic; white-space: nowrap; color: var(--ink-soft); display: inline-flex; align-items: center; }
.schools__track span::after { content: ""; width: 34px; height: 1px; margin: 0 clamp(20px, 2.5vw, 34px); background: var(--gold-bright); }
@keyframes schools { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ---------- Sections ---------- */
/* Every section adds the same gap above itself and none below, so all gaps match.
   The section right after a page title starts flush, and the last one before the
   closing band (or the end of the page) adds the same gap below. */
.section, .section--tight, .quote { padding: var(--space) 0 0; }
.page-head + .section { padding-top: 0; }
.section:has(+ .cta), main > .section:last-child { padding-bottom: var(--space); }
.section-head { margin-bottom: clamp(36px, 4vw, 56px); }
.section-head .body { margin: 18px 0 0; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::before { content: ""; height: 1px; width: min(120px, 18vw); background: var(--gold-bright); opacity: 0.8; }
.center .eyebrow::after { width: min(120px, 18vw); }
.center .body { margin-left: auto; margin-right: auto; }

/* Story teaser: image + copy */
.story { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.story__media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.story .body + .body { margin-top: 14px; }
.story .textlink { margin-top: 24px; }
@media (max-width: 880px) { .story { grid-template-columns: 1fr; } }

/* Quote band */

.quote blockquote { margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 28px; }
.quote blockquote::before, .quote blockquote::after { content: ""; height: 1px; background: var(--gold-bright); }
.quote p { margin: 0; font-family: var(--display); font-style: italic; font-size: clamp(1.5rem, 2.8vw, 2.25rem); line-height: 1.25; color: var(--gold); text-align: center; max-width: 30ch; }
@media (max-width: 700px) { .quote blockquote { grid-template-columns: 1fr; } .quote blockquote::before, .quote blockquote::after { display: none; } }

/* Three feature cards */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feature { display: grid; grid-template-columns: 0.95fr 1.05fr; background: var(--surface); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.3s var(--ease); }
.feature:hover { border-color: var(--gold-bright); }
.feature img { width: 100%; height: 100%; min-height: 200px; object-fit: cover; }
.feature div { padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.feature p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.feature .textlink { margin-top: auto; align-self: flex-start; font-size: 16px; }
@media (max-width: 1060px) { .features { grid-template-columns: 1fr; } .feature { grid-template-columns: 0.8fr 1.2fr; } }

/* Video reel */
.reel { display: grid; grid-template-columns: 1fr 1fr 1.1fr; gap: 18px; align-items: stretch; }
.reel figure { margin: 0; overflow: hidden; background: var(--surface-2); position: relative; }
.reel video { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 9 / 14; }
.reel__copy { display: flex; flex-direction: column; justify-content: center; padding: clamp(8px, 2vw, 24px); }
.reel__copy .body { margin: 18px 0 30px; }
.sound { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: rgb(15 14 12 / 0.7); color: #faf7f1; display: grid; place-items: center; font-size: 20px; cursor: pointer; }
.sound:hover { background: var(--gold-bright); color: #16130f; }
@media (max-width: 880px) { .reel { grid-template-columns: 1fr 1fr; } .reel__copy { grid-column: 1 / -1; order: -1; padding: 0 0 8px; } }

/* Product rail + cards */
.rail-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 23%); gap: 18px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; padding-bottom: 14px; scrollbar-color: var(--line) transparent; }
.rail > * { scroll-snap-align: start; }
@media (max-width: 760px) { .rail { grid-auto-columns: 76%; } }
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); transition: transform 0.4s var(--ease), border-color 0.4s var(--ease); }
.card:hover { transform: translateY(-4px); border-color: var(--gold-bright); }
.card__media { position: relative; aspect-ratio: 1 / 1; background: #ffffff; overflow: hidden; border-bottom: 1px solid var(--line); }
.card__media img { position: absolute; top: 6%; left: 6%; width: 88%; height: 88%; object-fit: contain; transition: transform 0.8s var(--ease); }
.card__badge { z-index: 1; }
.card:hover .card__media img { transform: scale(1.05); }
.card__badge { position: absolute; top: 12px; left: 12px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; background: #16130f; color: #f4efe6; padding: 5px 10px; }
.card__body { padding: 18px 20px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__cat { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.card__name { font-family: var(--display); font-size: 1.3rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
.card__desc { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.5; }
.card__foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.card__link { font-size: 16px; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--gold-bright); padding-bottom: 2px; white-space: nowrap; }
.card__link:hover { color: var(--gold); }
.card__ext { width: 38px; height: 38px; border: 1px solid var(--line); display: grid; place-items: center; text-decoration: none; color: var(--ink-soft); font-size: 17px; transition: all 0.2s var(--ease); }
.card__ext:hover { border-color: var(--gold-bright); color: var(--gold); }

/* CTA band */
.cta { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; padding: 56px 0; }
.cta .h2 { margin-bottom: 14px; }
.cta .body { margin: 0 auto 30px; }

/* ---------- Inner pages ---------- */
.page-head { padding: clamp(40px, 5vw, 72px) 0 clamp(32px, 3.5vw, 48px); }
.page-head .lead { max-width: 56ch; }

/* About: long story */
.bio { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.bio__media { position: sticky; top: 110px; display: grid; gap: 18px; }
.bio__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 20%; }
.bio__text p { color: var(--ink-soft); margin: 0 0 20px; max-width: 62ch; }
.bio__text p:first-child::first-letter { font-family: var(--display); float: left; font-size: 4.2rem; line-height: 0.85; padding: 6px 12px 0 0; color: var(--gold); }
.bio__text h2:not(:first-child), .bio__text h3 { margin: 40px 0 16px; }
.pull { margin: 36px 0; padding: 26px 0; border-top: 1px solid var(--gold-bright); border-bottom: 1px solid var(--gold-bright); font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.3; color: var(--gold); }
@media (max-width: 880px) { .bio { grid-template-columns: 1fr; } .bio__media { position: static; grid-template-columns: 1fr 1fr; } }

/* Topic list (education / about) */
.topics { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(32px, 6vw, 96px); }
.topics > div { padding: 30px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 16px; }
.topics i { color: var(--gold-bright); font-size: 30px; }
.topics h3 { font-family: var(--display); font-size: 1.45rem; line-height: 1.15; }
.topics p { margin: 8px 0 0; color: var(--ink-soft); }
@media (max-width: 760px) { .topics { grid-template-columns: 1fr; } }

/* Offer bento (education page) */
.offer { display: grid; grid-template-columns: 1.25fr 1fr 1fr; grid-template-rows: repeat(2, minmax(260px, auto)); gap: 18px; }
.cell { position: relative; overflow: hidden; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; justify-content: flex-end; min-height: 260px; background: var(--surface); border: 1px solid var(--line); text-decoration: none; }
.cell h2, .cell h3 { font-family: var(--display); font-size: clamp(1.6rem, 2.4vw, 2.1rem); line-height: 1.08; }
.cell p { margin: 10px 0 0; color: var(--ink-soft); max-width: 38ch; }
.cell i { font-size: 34px; color: var(--gold-bright); margin-bottom: auto; padding-bottom: 28px; }
.cell--photo { border: 0; color: #faf7f1; }
.cell--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.cell--photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgb(12 11 9 / 0.86)); z-index: 1; }
.cell--photo > *:not(img) { position: relative; z-index: 2; }
.cell--photo p { color: rgb(250 247 241 / 0.86); }
.cell--photo:hover img { transform: scale(1.04); }
.cell--gold { background: var(--gold-bright); border-color: var(--gold-bright); color: #16130f; }
.cell--gold p, .cell--gold i { color: rgb(22 19 15 / 0.8); }
.offer .cell:nth-child(1) { grid-row: span 2; }
.offer .cell:nth-child(4) { grid-column: span 2; }
@media (max-width: 880px) {
  .offer { grid-template-columns: 1fr; grid-template-rows: none; }
  .offer .cell:nth-child(1) { grid-row: auto; min-height: 420px; }
  .offer .cell:nth-child(4) { grid-column: auto; min-height: 320px; }
}

/* Collaborations: photo mosaic, pillars, logo sheets */
.mosaic { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(150px, 17vw, 240px); gap: 8px; }
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic img:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.mosaic img:nth-child(2) { grid-column: span 3; grid-row: span 2; }
.mosaic img:nth-child(3) { grid-column: span 3; grid-row: span 2; }
.mosaic img:nth-child(4) { grid-column: span 3; grid-row: span 2; }
.mosaic img:nth-child(5) { grid-column: span 3; grid-row: span 2; }
.mosaic img:nth-child(6) { grid-column: span 3; grid-row: span 2; }
.mosaic img:nth-child(7) { grid-column: span 3; grid-row: span 2; }
@media (max-width: 760px) {
  .mosaic { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .mosaic img:nth-child(n) { grid-column: span 1; grid-row: span 1; }
  .mosaic img:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.pillars > div { padding: 8px clamp(16px, 3vw, 40px); }
.pillars > div + div { border-left: 1px solid var(--gold-bright); }
.pillars i { font-size: 40px; color: var(--gold-bright); }
.pillars h2, .pillars h3 { font-family: var(--display); font-size: 1.6rem; margin: 10px 0 6px; }
.pillars p { margin: 0; color: var(--ink-soft); }
@media (max-width: 760px) { .pillars { grid-template-columns: 1fr; gap: 28px; } .pillars > div + div { border-left: 0; border-top: 1px solid var(--line); padding-top: 28px; } }
.sheet { background: #fdfbf6; border: 1px solid var(--line); padding: clamp(12px, 3vw, 40px); }
.sheet img { width: 100%; max-width: 1100px; margin: 0 auto; }
.sheet--narrow img { max-width: 820px; }

/* Recognition pair */
.honours { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.honours figure { margin: 0; }
.honours img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.honours figcaption { margin-top: 16px; }
.honours figcaption strong { display: block; font-family: var(--display); font-weight: 500; font-size: 1.5rem; line-height: 1.15; }
.honours figcaption span { display: block; color: var(--ink-soft); margin-top: 6px; max-width: 48ch; }
.honours--3 { grid-template-columns: repeat(3, 1fr); }
.honours__video { position: relative; background: var(--surface-2); }
.honours__video video { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (max-width: 960px) { .honours--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .honours, .honours--3 { grid-template-columns: 1fr; } }

/* Partner (Straight Ahead) */
.partner { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 3vw, 40px); }
.partner .body { margin: 18px 0 28px; }
@media (max-width: 880px) { .partner { grid-template-columns: 1fr; } }

/* Products page */
.toolbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 36px; position: sticky; top: 96px; z-index: 10; background: var(--bg); }
@media (max-width: 1060px) { .toolbar { top: 72px; } }
.pills { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pills::-webkit-scrollbar { display: none; }
.pill { padding: 9px 16px; border: 1px solid var(--line); background: transparent; font-size: 16px; cursor: pointer; white-space: nowrap; color: var(--ink-soft); transition: all 0.2s var(--ease); }
.pill:hover { border-color: var(--ink); color: var(--ink); }
.pill[aria-pressed="true"] { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.pill .count { margin-left: 6px; font-size: 0.85em; }
.search { position: relative; flex: 1 1 240px; max-width: 320px; }
.search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); }
.search input { width: 100%; padding: 11px 14px 11px 42px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; }
.search input:focus { border-color: var(--gold-bright); outline: none; }
.search input::placeholder { color: var(--ink-soft); }
@media (max-width: 760px) { .search { max-width: none; } }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 18px; }
.result-note { color: var(--ink-soft); font-size: 15px; margin: -16px 0 24px; min-height: 1px; }
.empty { text-align: center; padding: 64px 16px; border: 1px dashed var(--line); }
.empty i { font-size: 40px; color: var(--gold-bright); }
.empty h3 { margin: 14px 0 8px; font-family: var(--display); font-size: 1.7rem; }
.empty p { color: var(--ink-soft); margin: 0 auto 24px; max-width: 44ch; }
.notice { display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px; border: 1px solid var(--gold-bright); margin-bottom: 36px; background: var(--surface); }
.notice i { color: var(--gold-bright); font-size: 26px; flex: none; }
.notice p { margin: 0; color: var(--ink-soft); }
.notice strong { color: var(--ink); font-weight: 600; }

/* Contact */
.contact { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__info { display: grid; gap: 26px; }
.contact__info h2, .contact__info h3 { font-size: 13px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; font-family: var(--serif); }
.contact__info a, .contact__info p { margin: 0; font-family: var(--display); font-size: 1.5rem; text-decoration: none; line-height: 1.2; overflow-wrap: anywhere; }
.contact__info a:hover { color: var(--gold); }
@media (max-width: 880px) { .contact { grid-template-columns: 1fr; } }
.form { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 4vw, 48px); display: grid; gap: 22px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; }
.field label, .checks legend { font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; }
.field label .opt { text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.field input, .field select, .field textarea { width: 100%; padding: 13px 15px; border: 1px solid var(--line); background: var(--bg); font-size: 17px; border-radius: 0; transition: border-color 0.2s var(--ease); }
.field select option { background: var(--surface); }
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold-bright); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); }
.field .help { font-size: 15px; color: var(--ink-soft); margin: 0; }
.field .error { font-size: 15px; color: #b3261e; margin: 0; display: none; }
:root[data-theme="dark"] .field .error { color: #f2a196; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .field .error { color: #f2a196; } }
.field.has-error input, .field.has-error textarea { border-color: currentColor; }
.field.has-error .error { display: block; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.checks legend { margin-bottom: 10px; padding: 0; }
.checks label { position: relative; }
.checks input { position: absolute; opacity: 0; inset: 0; }
.checks span { display: inline-block; padding: 8px 15px; border: 1px solid var(--line); font-size: 16px; cursor: pointer; transition: all 0.2s var(--ease); }
.checks input:checked + span { background: var(--btn); color: var(--btn-ink); border-color: var(--btn); }
.checks input:focus-visible + span { outline: 2px solid var(--gold-bright); outline-offset: 2px; }
.form__status { margin: 14px 0 0; font-size: 16px; min-height: 1.6em; }
.form__status.is-error { color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--gold-bright); padding: 36px 0 28px; }
.footer__main { display: grid; grid-template-columns: auto 1fr auto auto; gap: clamp(20px, 4vw, 48px); align-items: center; }
.footer__logo { height: 80px; width: auto; }
.footer__words { text-align: center; color: var(--ink); }
.footer__words span + span::before { content: "\00B7"; margin: 0 12px; color: var(--gold); }
.footer__sa { padding: 0 clamp(16px, 3vw, 32px); border-left: 1px solid var(--gold-bright); border-right: 1px solid var(--gold-bright); }
.footer__social { display: flex; gap: 6px; }
.footer__social a { width: 40px; height: 40px; display: grid; place-items: center; font-size: 21px; text-decoration: none; }
.footer__social a:hover { color: var(--gold); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.footer__bottom nav { display: flex; gap: 18px; flex-wrap: wrap; }
.footer__bottom a { text-decoration: none; }
.footer__bottom a:hover { color: var(--gold); }
@media (max-width: 880px) {
  .footer__main { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .footer__sa { border: 0; padding: 0; }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js .reveal.is-in { opacity: 1; transform: none; }
  .hero__copy > * { animation: rise 1s var(--ease) both; }
  .hero__copy > :nth-child(2) { animation-delay: 0.08s; }
  .hero__copy > :nth-child(3) { animation-delay: 0.16s; }
  .hero__copy > :nth-child(4) { animation-delay: 0.24s; }
  .hero__copy > :nth-child(5) { animation-delay: 0.32s; }
  .hero__media { animation: fade 1.4s 0.1s var(--ease) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .schools__track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 0 var(--gutter); row-gap: 8px; }
  .schools__track span:nth-child(n+18) { display: none; }
}

/* ---------- Home: edge-to-edge hero, stats, photo tiles ---------- */
.hero-edge { position: relative; min-height: min(880px, calc(100dvh - 96px)); display: flex; align-items: center; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-edge__media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.hero-edge__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.hero-edge__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 22%, transparent 55%), linear-gradient(0deg, var(--bg) 0%, transparent 18%); pointer-events: none; }
.hero-edge .wrap { position: relative; z-index: 2; width: 100%; }
.hero-edge__copy { max-width: 780px; padding: clamp(48px, 7vw, 96px) 0; }
.mega { font-family: var(--display); font-weight: 500; font-size: clamp(2.9rem, 5.6vw, 5.3rem); line-height: 0.98; letter-spacing: -0.04em; }
.mega em { display: inline-block; font-style: italic; color: var(--gold); padding-bottom: 0.06em; }
.hero-edge .lead { color: var(--ink-soft); max-width: 36ch; }
@media (max-width: 880px) {
  .hero-edge { display: block; min-height: 0; }
  .hero-edge__media { position: relative; width: 100%; height: 72vh; max-height: 620px; }
  .hero-edge__media::after { background: linear-gradient(0deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 40%, transparent) 30%, transparent 60%); }
  .hero-edge__copy { padding: 0 0 48px; margin-top: -120px; }
}

.stats { border-bottom: 1px solid var(--line); }
.stats .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats .wrap > div { align-content: end; padding: clamp(28px, 4vw, 48px) clamp(12px, 2vw, 28px); display: grid; gap: 6px; }
.stats .wrap > div + div { border-left: 1px solid var(--line); }
.stats strong { font-family: var(--display); font-weight: 500; font-size: clamp(3rem, 6vw, 5.2rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--gold); font-variant-numeric: lining-nums; }
.stats strong small { display: block; font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.stats span { min-height: 3.2em; line-height: 1.6; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink); }
@media (max-width: 760px) { .stats .wrap { grid-template-columns: 1fr 1fr; } .stats .wrap > div:nth-child(3) { border-left: 0; } .stats .wrap > div:nth-child(n+3) { border-top: 1px solid var(--line); } }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.tile { position: relative; display: flex; align-items: flex-end; min-height: clamp(380px, 38vw, 560px); overflow: hidden; text-decoration: none; color: #f4efe6; background: #16130f; }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35) contrast(1.05); transition: transform 1.1s var(--ease), filter 0.6s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgb(12 11 9 / 0.05) 30%, rgb(12 11 9 / 0.9)); }
.tile::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; background: var(--gold-bright); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.tile:hover img { transform: scale(1.05); filter: none; }
.tile:hover::after { transform: scaleX(1); }
.tile > div { position: static; padding: clamp(22px, 3vw, 36px); display: grid; gap: 10px; width: 100%; }
.tile > div > * { position: relative; z-index: 2; }
.tile h3 { font-family: var(--display); font-weight: 500; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.02; letter-spacing: -0.02em; }
.tile p { margin: 0; color: rgb(244 239 230 / 0.8); font-size: 17px; max-width: 32ch; }
.tile > div > .tile__go { position: absolute; z-index: 2; top: clamp(18px, 2.4vw, 28px); right: clamp(18px, 2.4vw, 28px); width: 46px; height: 46px; border: 1px solid rgb(244 239 230 / 0.5); display: grid; place-items: center; font-size: 20px; transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s; }
.tile:hover .tile__go { background: var(--gold-bright); border-color: var(--gold-bright); color: #16130f; }
@media (max-width: 880px) { .tiles { grid-template-columns: 1fr; } .tile { min-height: 380px; } }

/* ---------- Language switch ---------- */
.lang { display: flex; align-items: center; border: 1px solid var(--line); margin-right: 4px; }
.lang a { min-width: 40px; height: 34px; display: grid; place-items: center; padding: 0 8px; font-size: 13px; letter-spacing: 0.14em; text-decoration: none; color: var(--ink-soft); transition: color 0.2s, background 0.2s; }
.lang a + a { border-left: 1px solid var(--line); }
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] { background: var(--gold-bright); color: #16130f; }

/* ---------- Seminars (education page) ---------- */
.seminar { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.seminar__intro .body { margin: 18px 0 0; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 32px 0 0; border-top: 1px solid var(--line); }
.facts > div { padding: 18px 16px 18px 0; border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.facts dd { margin: 0; font-family: var(--display); font-size: 1.2rem; line-height: 1.3; }
.seminar__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.steps { background: var(--surface); border: 1px solid var(--line); padding: clamp(24px, 3.5vw, 44px); }
.steps ol { list-style: none; margin: 24px 0 0; padding: 0; counter-reset: step; display: grid; gap: 26px; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 54px 1fr; column-gap: 16px; }
.steps li::before { content: counter(step); grid-row: span 2; font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--gold); font-variant-numeric: lining-nums; }
.steps strong { font-family: var(--display); font-weight: 500; font-size: 1.3rem; }
.steps span { color: var(--ink-soft); }
.faq { margin-top: clamp(48px, 6vw, 80px); }
.faq > * { max-width: 880px; }
.faq h3 { margin-bottom: 18px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; font-family: var(--display); font-size: 1.25rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--serif); font-size: 1.6rem; color: var(--gold); transition: transform 0.3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0 0 22px; color: var(--ink-soft); max-width: 68ch; }
@media (max-width: 880px) { .seminar { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; } }

/* ---------- Simple text pages (privacy) ---------- */
.prose { max-width: 760px; }
.prose h2 { margin: 36px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--ink-soft); margin: 0 0 14px; }
.prose a { color: var(--ink); text-decoration-color: var(--gold-bright); }
.prose .small { font-size: 15px; margin-top: 32px; }
.faq .h2 { margin-bottom: 28px; }
.section > .faq:first-child { margin-top: 0; }
/* A section that only holds the one-line pricing note sits close to what is above it */
.section:has(> .wrap > .notice:only-child) { padding-top: clamp(28px, 3vw, 40px); }
.section > .wrap > .notice:only-child { margin-bottom: 0; }

/* ---------- Motion controls (pause buttons) ---------- */
.schools { position: relative; }
.schools.is-paused .schools__track { animation-play-state: paused; }
.motion-toggle { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; cursor: pointer; }
.motion-toggle:hover, .playpause:hover { border-color: var(--gold-bright); color: var(--gold); }
.playpause { position: absolute; left: 12px; bottom: 12px; z-index: 2; width: 44px; height: 44px; border: 0; background: rgb(15 14 12 / 0.7); color: #faf7f1; display: grid; place-items: center; font-size: 18px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }
/* Visible keyboard focus everywhere, including over photos */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; box-shadow: 0 0 0 5px rgb(15 14 12 / 0.55); }
.footer__bottom nav { row-gap: 8px; }
/* Very narrow screens (small phones, 400% zoom): keep the header within the width */
@media (max-width: 400px) {
  .site-header .wrap { gap: 8px; }
  .brand img { height: 40px; }
  .header-tools { gap: 2px; }
  .lang a { min-width: 32px; padding: 0 5px; }
  .theme-toggle, .menu-toggle { width: 36px; }
}

/* Home page row: keep cards compact (two-line description) */
.rail .card__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rail .card__body { gap: 6px; }
/* Eyebrow labels stay on one line; the gold rule shrinks instead */
.eyebrow { white-space: nowrap; }
.eyebrow::after { flex: 0 1 180px; width: auto; min-width: 24px; }
@media (max-width: 600px) { .eyebrow { white-space: normal; } }

/* Best sellers row: steady (no hover jump or zoom), arrow buttons to move through it */
.rail .card, .rail .card:hover { transform: none; }
.rail .card:hover .card__media img { transform: none; }
.rail .card { transition: border-color 0.3s var(--ease); }
.rail.reveal-done .card.reveal, .rail .card.reveal { transition-delay: 0s; }
.rail-nav { display: flex; align-items: center; gap: 10px; }
.rail-btn { width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 18px; cursor: pointer; transition: border-color 0.2s, color 0.2s, opacity 0.2s; }
.rail-btn:hover:not(:disabled) { border-color: var(--gold-bright); color: var(--gold); }
.rail-btn:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 760px) { .rail-btn { display: none; } }
@media (prefers-reduced-motion: reduce) { .rail { scroll-behavior: auto; } }

/* Product photo tiles. A photo with its own backdrop fills the whole tile. In both
   themes every tile is the same soft gray as that backdrop, and white photo backgrounds
   blend into it (multiply turns white into the tile colour). */
.card__media--fill img { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.card__media { background: #e0d9dc; }
.card__media img { mix-blend-mode: multiply; }
.card__media--fill img { mix-blend-mode: normal; filter: brightness(.937); }