/* ============================================================
   Selene · inner pages · shared stylesheet
   Loads after scrollcraft.css, which supplies the reset, the
   spacing scale and the type scale. No scroll engine here.
   Pages: about · services · who · insights · contact
   ============================================================ */

/* ---------- tokens (identical to index.html) ---------- */
:root {
  --sc-canvas:      #0B0A09;
  --sc-surface:     #14120F;
  --sc-ink:         #F2EEE6;
  --sc-ink-soft:    #A9A39A;
  --sc-accent:      #E10600;
  --sc-accent-ink:  #FFFFFF;
  --sc-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sc-font-text:    Helvetica, "Helvetica Neue", Arial, system-ui, sans-serif;
  --sc-shadow-color: 30 10% 2%;
  --gold: #A88A4F;
  --silver: #8A8D8F;
  --sc-r-sm: 6px; --sc-r-md: 10px; --sc-r-lg: 14px;

  /* inner page layout */
  --sc-gutter: clamp(1rem, 5vw, 5.5rem);      /* 16px on phones */
  --measure:   62ch;
  --page-max:  74rem;
  --col-gap:   clamp(2rem, 6vw, 6rem);
  --sect-pad:  clamp(3rem, 6vw, 5.5rem);
}
html { scroll-padding-top: 6rem; }
body { background: var(--sc-canvas); color: var(--sc-ink); }
.sc-display { font-weight: 500; letter-spacing: -0.01em; }
.sc-body { font-weight: 400; letter-spacing: 0.005em; line-height: 1.66; }
main { display: block; }

/* ---------- top bar (markup copied from index.html) ---------- */
.bar { position: fixed; inset-inline: 0; top: 0; z-index: var(--sc-z-chrome); display: flex; align-items: flex-end; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + max(var(--sc-gutter) - 16px, 1.25rem)) var(--sc-gutter) 14px; pointer-events: none; }
.bar > * { pointer-events: auto; }
[data-sc-progress] { z-index: calc(var(--sc-z-chrome) + 1); }
.bar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 90px); background: linear-gradient(to bottom, rgba(11,10,9,0.78) 0%, rgba(11,10,9,0.76) 10%, rgba(11,10,9,0.70) 20%, rgba(11,10,9,0.61) 30%, rgba(11,10,9,0.51) 40%, rgba(11,10,9,0.39) 50%, rgba(11,10,9,0.27) 60%, rgba(11,10,9,0.17) 70%, rgba(11,10,9,0.08) 80%, rgba(11,10,9,0.02) 90%, rgba(11,10,9,0.00) 100%); z-index: -1; pointer-events: none; } /* a long, eased scrim so the menu stays legible over a bright moon, with no visible step */
/* text pages need a soft ground behind the bar once the page scrolls */
.bar::before { content: ""; position: absolute; inset: 0 0 -1.25rem; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 96%, transparent) 58%, transparent); }
.bar__logo { position: relative; z-index: 2; }
.bar__logo img { height: 40px; width: auto; display: block; translate: 0 -3px; } /* optical lift: the heavy red script reads lower than the thin menu text */
.bar__nav { display: flex; gap: var(--sc-6); align-items: flex-end; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); letter-spacing: 0.01em; line-height: 1; translate: 0 0.18em; } /* menu baseline sits about 3px under the logo base; the heavy script needs that optical lift */ /* text baseline sits on the logo's bottom edge */
.bar__nav a { text-decoration: none; color: var(--sc-ink); opacity: 0.86; }
.bar__nav a:hover { opacity: 1; }
.bar__nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 0.5em; }
.lang { position: relative; display: inline-flex; }
.lang__btn { width: 32px; height: 24px; margin-right: -4px; padding: 0; background: transparent; border: 0; color: var(--gold); cursor: pointer; display: grid; place-items: end center; translate: 0 -0.08em; } /* circle bottom on the menu baseline, with a hair of overshoot */
.lang__btn svg { width: 24px; height: 24px; display: block; }
.lang__menu { position: absolute; top: calc(100% + 4px); right: 0; min-width: 9.5rem; background: color-mix(in oklab, var(--sc-canvas) 96%, transparent); border: 1px solid var(--sc-hairline-strong); border-radius: var(--sc-r-sm); padding: 6px; display: grid; opacity: 0; translate: 0 -4px; pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out), translate var(--sc-d-base) var(--sc-ease-out); }
.lang.open .lang__menu { opacity: 1; translate: 0 0; pointer-events: auto; }
.lang__menu button { background: transparent; border: 0; text-align: left; padding: 8px 10px; font-family: var(--sc-font-text); font-size: var(--sc-t-sm); letter-spacing: 0.02em; color: var(--sc-ink-soft); cursor: pointer; border-radius: 3px; display: flex; align-items: center; gap: 10px; }
.lang__menu button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: transparent; flex: 0 0 auto; } /* only the chosen language gets a dot; the other stays blank */
.lang__menu button[aria-checked="true"] { color: var(--sc-ink); }
.lang__menu button[aria-checked="true"]::before { background: var(--gold); }
.lang__menu button:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
@media (max-width: 860px) { .lang__menu { right: auto; left: 50%; translate: -50% -4px; } .lang.open .lang__menu { translate: -50% 0; } }
.bar__toggle { display: none; position: relative; z-index: 2; width: 44px; height: 40px; margin-right: -8px; padding: 0; background: transparent; border: 0; cursor: pointer; }
.bar__toggle span { position: absolute; left: 8px; width: 28px; height: 2.5px; background: var(--gold, #A88A4F); border-radius: 1.5px; transition: transform var(--sc-d-base) var(--sc-ease-out), opacity var(--sc-d-base) var(--sc-ease-out); }
.bar__toggle span:nth-child(1) { top: 15px; } .bar__toggle span:nth-child(2) { top: 24px; } .bar__toggle span:nth-child(3) { top: 33px; } /* the three bars centre on the body of the logo's final e, not on its baseline (Selen, 1 Oct 2026) */
.bar.open .bar__toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.bar.open .bar__toggle span:nth-child(2) { opacity: 0; }
.bar.open .bar__toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
@media (max-width: 860px) {
  .bar { padding-top: calc(env(safe-area-inset-top, 0px) + 32px); }
  .bar__logo img { translate: 0 0; }
  .bar__toggle { display: block; }
  .bar__nav { position: fixed; inset: 0; background: color-mix(in oklab, var(--sc-canvas) 94%, transparent); flex-direction: column; justify-content: center; align-items: center; gap: var(--sc-6); font-size: var(--sc-t-xl); font-family: var(--sc-font-text); letter-spacing: -0.01em; line-height: 1; translate: 0 0; opacity: 0; pointer-events: none; transition: opacity var(--sc-d-base) var(--sc-ease-out); }
  .bar.open .bar__nav { opacity: 1; pointer-events: auto; }
  /* the toggle stays above the full-screen overlay so a second press closes it */
  .bar__nav .lang { margin-top: var(--sc-6); font-family: var(--sc-font-text); }
  .bar__nav a[aria-current="page"] { text-underline-offset: 0.3em; }
}

/* ---------- hero band ---------- */
.hero { padding: calc(env(safe-area-inset-top, 0px) + clamp(7rem, 16vh, 11rem)) var(--sc-gutter) clamp(3rem, 7vw, 6rem); }
.hero__grid { max-width: var(--page-max); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__copy { max-width: 38rem; }
.eyebrow { display: block; font-family: var(--sc-font-text); font-size: var(--sc-t-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--sc-4); }
.hero h1 { font-family: var(--sc-font-text); font-weight: 400; font-size: clamp(2rem, 1rem + 2.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0; text-wrap: balance; }
.tagline { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-xl); line-height: 1.2; letter-spacing: 0; margin: var(--sc-4) 0 0; color: var(--sc-ink); }
.lede { margin: var(--sc-5) 0 0; color: var(--sc-ink-soft); max-width: var(--measure); line-height: 1.66; }
.lede + .lede { margin-top: var(--sc-3); }
.lede--strong { color: var(--sc-ink); }

/* illustration slots: charcoal box holds the layout until the file exists */
.ill-slot { position: relative; margin: 0; width: 100%; aspect-ratio: 16 / 9; background: var(--sc-surface); border-radius: var(--sc-r-lg); overflow: hidden; }
.ill-slot--3x4  { aspect-ratio: 3 / 4;  max-width: 24rem; justify-self: end; }
.ill-slot--9x16 { aspect-ratio: 9 / 16; max-width: 17rem; justify-self: end; }
.ill { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }

@media (max-width: 860px) {
  .hero { padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--sc-6); }
  .hero__ill { order: -1; }
  .ill-slot--3x4, .ill-slot--9x16 { justify-self: start; }
  .ill-slot--3x4  { max-width: min(100%, 16rem); }
  .ill-slot--9x16 { max-width: min(100%, 12rem); }
}
@media (max-width: 700px) {
  .hero h1 { font-size: var(--sc-t-2xl); }
  .tagline { font-size: var(--sc-t-lg); }
}

/* ---------- reading sections ---------- */
.page { padding-inline: var(--sc-gutter); }
.page__inner { max-width: var(--page-max); margin-inline: auto; }
.sect { padding-block: var(--sect-pad); border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, var(--measure)); gap: var(--sc-5) var(--col-gap); align-items: start; }
.sect h2, .pillar h2, .teaser h2, .cta-band h2 { font-family: var(--sc-font-text); font-weight: 500; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.sect__body { color: var(--sc-ink-soft); max-width: var(--measure); line-height: 1.66; min-width: 0; }
.sect__body p { margin: 0 0 var(--sc-4); }
.sect__body p:last-child { margin-bottom: 0; }
.sect__body strong, .list strong { color: var(--sc-ink); font-weight: 500; }
.sect__body a { color: var(--sc-ink); }
.sect__note { font-size: var(--sc-t-sm); margin-top: var(--sc-6); padding-top: var(--sc-4); border-top: 1px solid var(--sc-hairline); }
.sect__aside { color: var(--sc-ink-soft); font-size: var(--sc-t-sm); line-height: 1.6; }
.sect__aside .eyebrow { margin-bottom: var(--sc-2); }
.sect__aside p { margin: 0 0 var(--sc-5); max-width: 32ch; }
.sect__aside strong { color: var(--sc-ink); font-weight: 500; }

/* ruled lists: no bullets, no icons */
.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: var(--sc-4) 0; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.list li:first-child { border-top: 0; padding-top: 0; }
.list li:last-child { padding-bottom: 0; }

/* the only numbered list on the site */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { position: relative; counter-increment: s; padding: var(--sc-4) 0 var(--sc-4) 3rem; border-top: 1px solid var(--sc-hairline); color: var(--sc-ink-soft); }
.steps li:first-child { border-top: 0; padding-top: 0; }
.steps li:last-child { padding-bottom: 0; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: var(--sc-4); font-family: var(--sc-font-text); font-size: var(--sc-t-lg); line-height: 1.2; color: var(--gold); font-variant-numeric: tabular-nums; }
.steps li:first-child::before { top: 0; }
.steps strong { display: block; color: var(--sc-ink); font-weight: 500; margin-bottom: 2px; }

/* ---------- services: six pillars as an editorial list ---------- */
.pillar { padding-block: var(--sect-pad); border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sc-5) var(--col-gap); align-items: start; }
.pillar__num { display: block; font-family: var(--sc-font-text); font-weight: 400; font-size: var(--sc-t-lg); line-height: 1; color: var(--gold); margin-bottom: var(--sc-3); font-variant-numeric: tabular-nums; }
.pillar h2 { font-size: var(--sc-t-2xl); line-height: 1.04; }
.pillar__promise { font-family: var(--sc-font-display); font-weight: 500; font-size: var(--sc-t-lg); line-height: 1.25; color: var(--sc-ink); margin: var(--sc-3) 0 0; }
.pillar__desc { color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; max-width: 42ch; line-height: 1.66; }
.svc { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--sc-6); }
.svc li { break-inside: avoid; padding: var(--sc-3) 0; border-bottom: 1px solid var(--sc-hairline); color: var(--sc-ink); font-size: var(--sc-t-sm); line-height: 1.45; }
.model { display: inline-block; margin-left: 0.55em; font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--sc-ink-soft); white-space: nowrap; }
.pillar__count { display: block; margin-top: var(--sc-4); font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }

/* ---------- insights: teasers ---------- */
.teaser { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--sc-hairline); display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, var(--measure)); gap: var(--sc-3) var(--col-gap); align-items: start; }
.teaser__meta { font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); line-height: 1.7; }
.teaser__meta span { display: block; color: var(--sc-ink-soft); }
.teaser h2 { font-size: var(--sc-t-2xl); line-height: 1.04; }
.teaser p { color: var(--sc-ink-soft); margin: var(--sc-4) 0 0; line-height: 1.66; }
.read { display: inline-block; margin-top: var(--sc-5); font-size: var(--sc-t-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-ink); text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 3px; }
.read:hover { border-bottom-color: var(--sc-ink); }

/* ---------- forms (same idiom as the homepage) ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sc-4); max-width: 36rem; }
.form .field--wide, .form .consent, .form .actions, .form .form-note { grid-column: 1 / -1; }
.field { display: grid; gap: 5px; margin-bottom: var(--sc-4); min-width: 0; }
.field label { font-size: var(--sc-t-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sc-ink-soft); }
.field input, .field select, .field textarea { background: color-mix(in oklab, var(--sc-ink) 5%, transparent); border: 1px solid var(--sc-hairline-strong); color: var(--sc-ink); padding: 11px 14px; border-radius: var(--sc-r-md); min-width: 0; width: 100%; transition: border-color var(--sc-d-fast) var(--sc-ease-out), background-color var(--sc-d-fast) var(--sc-ease-out); }
.field select { color-scheme: dark; -webkit-appearance: none; appearance: none; padding-right: 44px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23A88A4F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; } /* our own arrow, set 16px inside the field: the native one sat on the far edge (Selen, 30 Sep 2026) */
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: color-mix(in oklab, var(--sc-ink) 8%, transparent); }
.field input::placeholder, .field textarea::placeholder { color: color-mix(in oklab, var(--sc-ink-soft) 70%, transparent); }
.consent { display: flex; gap: var(--sc-3); align-items: flex-start; margin: var(--sc-2) 0 var(--sc-5); font-size: var(--sc-t-xs); color: var(--sc-ink-soft); line-height: 1.55; max-width: 52ch; }
.consent input { flex: none; width: 1rem; height: 1rem; margin-top: 0.15em; accent-color: var(--gold); }
.consent a { color: var(--sc-ink); }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sc-4) var(--sc-5); }
.cta { display: inline-block; background: var(--sc-accent); color: var(--sc-accent-ink); padding: 14px 26px; text-decoration: none; font-size: var(--sc-t-sm); letter-spacing: 0.08em; text-transform: uppercase; border: 0; cursor: pointer; border-radius: var(--sc-r-md); }
.cta:hover { filter: brightness(1.08); }
.alt-link { display: inline-block; color: var(--sc-ink-soft); font-size: var(--sc-t-sm); }
.alt-link:hover { color: var(--sc-ink); }
.form-note { margin: var(--sc-4) 0 0; font-size: var(--sc-t-xs); color: var(--sc-ink-soft); max-width: 44ch; }
.form-note a { color: var(--sc-ink); }
.nl-form { display: flex; flex-wrap: wrap; gap: var(--sc-3); align-items: end; max-width: 32rem; margin-top: var(--sc-5); }
.nl-form .field { flex: 1 1 15rem; margin: 0; }
@media (max-width: 560px) { .form { grid-template-columns: 1fr; } }

/* ---------- closing band ---------- */
.cta-band { border-top: 1px solid var(--sc-hairline); padding: clamp(4rem, 9vw, 8rem) var(--sc-gutter); }
.cta-band__inner { max-width: var(--page-max); margin-inline: auto; display: grid; gap: var(--sc-5); }
.cta-band h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem); line-height: 1.05; max-width: 24ch; }
.cta-band p { margin: 0; color: var(--sc-ink-soft); max-width: 52ch; line-height: 1.66; }
.cta-band .actions { margin-top: var(--sc-2); }


/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sect, .pillar, .teaser { grid-template-columns: 1fr; gap: var(--sc-4); }
  .cta-band h2 { max-width: none; }
}
@media (max-width: 700px) {
  .svc { columns: 1; }
  .pillar h2, .teaser h2 { font-size: var(--sc-t-xl); }
}
@media (prefers-reduced-motion: reduce) {
  .bar__nav, .field input, .field select, .field textarea { transition: none; }
}

/* closing band: one quiet link instead of a second red button */
.cta-band .quiet-link { display: inline-block; font-size: var(--sc-t-base); color: var(--sc-ink); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: var(--gold, #A88A4F); }

/* ---------- inner pages: every page opens on its own painted ground (Selen, 1 Oct 2026) ----------
   About: the surface of the moon. Services: papers drifting off the top right. Who's behind: a charcoal lapel with a gold crescent pin.
   Sharp on arrival; the soft copy and the dim layer follow --soft from bar.js as the reader scrolls. */
.ground { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ground-pos, center); }
.ground--soft { opacity: var(--soft, 0); transform: scale(1.02); }
.ground-dim { position: absolute; inset: 0; pointer-events: none; background: #0B0A09; opacity: calc(var(--soft, 0) * 0.35); }
@media (prefers-reduced-motion: reduce) { .ground--soft, .ground-dim { opacity: 0; } }