/* ==========================================================================
   Luma Tales site — site.css v4 (2026-11-05): ink on paper, approved logo
   Two themes from one set of tokens: paper (default, light) and ink (dark, review
   only: ?theme=ink). Mobile first (320 / 375 / 768 / 1280). No build step.
   1 tokens · 2 base · 3 logo · 4 header, nav, language switch
   5 buttons and link slots · 6 home (two doors + CSS scenes) · 7 inner pages
   8 films · 9 business · 10 about · 11 contact form · 12 footer · 13 motion
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {                              /* paper: cream sheet, black ink, gold; the logo carries the one amber dot */
  color-scheme: light;
  --bg: #F3EFE6;                     /* the sheet */
  --bg-alt: #EAE4D6;                 /* deeper paper: alternating sections, poster grounds */
  --card: #FAF7F0;                   /* lighter paper: cards, doors, form fields */
  --fg: #141414;                     /* ink */
  --fg-soft: #403C36;                /* thinned ink: secondary text (7:1 or better on every paper) */
  --line: rgba(20, 20, 20, .16);     /* hairlines */
  --line-strong: rgba(20, 20, 20, .52);
  --gold: #C6A24C;                   /* fills only on paper: gold text on cream fails contrast */
  --gold-hover: #D3B25F;
  --gold-line: #8F6F1E;              /* rules, borders, underlines (3:1 or better on paper) */
  --gold-stroke: #B08C34;            /* painted gold strokes inside scenes and posters */
  --on-gold: #141414;
  --gold-rgb: 198, 162, 76;
  --accent: #F2A33A;                 /* amber: the dot inside the logo's moon carries it. Not used by the page itself. (Alternate, unused: vermilion #B8322A.) */
  --accent-text: #403C36;            /* small numerals and labels: ink here, light gold on the ink theme */
  --wash: 20, 20, 20;                /* ink-wash colour as r, g, b for rgba() */
  --focus: #141414;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .07 0 0 0 0 .05 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23141414' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --font-display: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1080px;
  --horizon: 68%;                    /* where sky meets water inside a door (64% from tablet up) */
  --light-x: 80%;                    /* where the moon / sun sits inside a door (76% from tablet up) */
}
[data-theme="ink"] {                 /* ink: warm charcoal, never pure black; same accents */
  color-scheme: dark;
  --bg: #1C1917;
  --bg-alt: #151311;
  --card: #262220;
  --fg: #F3EFE6;
  --fg-soft: #CFC8BA;
  --line: rgba(243, 239, 230, .16);
  --line-strong: rgba(243, 239, 230, .5);
  --gold: #D4B25E;
  --gold-hover: #E2C478;
  --gold-line: #C9A552;
  --gold-stroke: #D4B25E;
  --gold-rgb: 212, 178, 94;
  --accent: #F2A33A;
  --accent-text: #E3C77E;
  --wash: 243, 239, 230;
  --focus: #E3C77E;
  --grain: none;
  --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23F3EFE6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--grain), var(--bg);       /* a little paper tooth; none on the ink theme */
  color: var(--fg);
  font: 400 1.0625rem/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;         /* the display face defaults to old-style figures; prices need lining ones */
  overflow-wrap: break-word;
}
::selection { background: var(--gold); color: var(--on-gold); }
svg, img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 9vw, 4.25rem); letter-spacing: .005em; }
h2 { font-size: clamp(1.85rem, 5.5vw, 2.6rem); }
h3 { font-size: 1.5rem; }
p { margin: 0 0 1em; }
/* Links: ink text, gold underline. Gold is never the text colour on paper. */
a { color: var(--fg); text-decoration-line: underline; text-decoration-color: var(--gold-line); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { text-decoration-color: var(--fg); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: .75rem; top: -4rem; z-index: 10; background: var(--fg); color: var(--bg); padding: .7rem 1rem; border-radius: 8px; font-weight: 600; text-decoration: none; }
.skip:focus { top: .75rem; }
.eyebrow { display: block; margin-bottom: .9rem; font: 600 .75rem/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--fg-soft); }
.lead { font-size: 1.16rem; color: var(--fg-soft); max-width: 36em; }
.rule { width: 4rem; height: 2px; margin: 1.4rem 0; background: var(--gold-line); border: 0; }

/* ---------- 3. Logo ---------- */
/* The approved logo, used as given. Two forms:
   - header (inner pages, 404): the wordmark image, assets/logo-wordmark.svg (ink).
     Ink theme: site.js swaps in assets/logo-wordmark-dark.svg (cream); until it has,
     the ink file is shown inverted, so the mark is never invisible.
   - Home hero: the full logo as two layers in one square box, assets/moon.webp below and
     assets/wordmark-overlay.svg on top (both drawn in the same square frame). */
.wordmark { display: block; flex: none; height: 46px; width: auto; }
[data-theme="ink"] .wordmark[data-logo]:not(.is-ink) { filter: invert(.93); }
.hero-logo { position: relative; width: var(--hero); aspect-ratio: 1 / 1; margin: 0 auto 4px; }
.hero-logo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }

/* ---------- 4. Header, nav, language switch ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header__row { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding-top: .5rem; }
.brand { display: inline-flex; align-items: center; min-height: 46px; justify-self: start; color: var(--fg); text-decoration: none; }
.nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; margin-inline: -.5rem; }
.nav a, .foot-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem;
  color: var(--fg-soft); text-decoration: none; font-size: .92rem; font-weight: 500; letter-spacing: .02em;
}
.nav a:hover, .foot-nav a:hover { color: var(--fg); text-decoration: underline; text-decoration-color: var(--gold-line); text-decoration-thickness: 2px; }
.nav a[aria-current="page"] { color: var(--fg); font-weight: 600; box-shadow: inset 0 -2px 0 var(--gold-line); }
.lang-toggle { display: inline-flex; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: var(--card); }
.lang-toggle button {
  min-width: 44px; min-height: 44px; padding: 0 .6rem; border: 0; background: transparent; color: var(--fg-soft);
  font: 600 .78rem/1 var(--font-body); letter-spacing: .1em; cursor: pointer;
}
.lang-toggle button:hover { color: var(--fg); background: rgba(var(--wash), .07); }
.lang-toggle button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
.lang-toggle button:focus-visible { outline-offset: -4px; border-radius: 999px; }
.lang-toggle button[aria-pressed="true"]:focus-visible { outline-color: var(--bg); }
@media (max-width: 359px) {
  .nav a { padding: 0 .3rem; font-size: .86rem; }
}
/* Tablets keep the two-row header (three languages + four links do not fit one row at 768 in VI / ES). */
@media (min-width: 600px) {
  .nav { justify-content: flex-start; gap: 1rem; }
}
@media (min-width: 900px) {
  .site-header__row { grid-template-columns: auto 1fr auto; column-gap: 1.5rem; padding-block: .75rem; }
  .nav { grid-column: 2; grid-row: 1; justify-content: flex-end; gap: .75rem; margin: 0; }
  .lang-toggle { grid-column: 3; }
  .wordmark { height: 56px; }
}

/* ---------- 5. Buttons and link slots ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: .6rem 1.4rem;
  border: 1px solid transparent; border-radius: 999px; font: 600 .95rem/1.2 var(--font-body); letter-spacing: .01em;
  text-decoration: none; text-align: center; cursor: pointer;
}
.btn--primary { background: var(--gold); border-color: var(--gold-line); color: var(--on-gold); }   /* gold fill, ink label */
.btn--primary:hover { background: var(--gold-hover); }
.btn--ink { background: var(--fg); border-color: var(--fg); color: var(--bg); }                     /* ink fill, paper label */
.btn--ink:hover { background: var(--fg-soft); border-color: var(--fg-soft); }
.btn--ghost { border-color: var(--line-strong); color: var(--fg); background: transparent; }
.btn--ghost:hover { border-color: var(--fg); box-shadow: inset 0 -2px 0 var(--gold-line); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* An empty link slot: quiet, visibly not a link, not focusable. */
.btn--soon { border: 1px dashed var(--line-strong); color: var(--fg-soft); font-weight: 500; cursor: default; }
.arrow-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }

/* ---------- 6. Home: a five-second fork ---------- */
.home-screen { position: relative; }
/* --hero is the side of the square logo box. It follows the height of the screen, so the
   logo is as large as it can be while both doors stay inside the first screen (375 x 812),
   and it gives way on shorter phones. The language switch sits above it (54px). */
.home-main { --hero: min(68vw, clamp(170px, 30vh, 250px)); display: grid; grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; padding: 0 12px 12px; }
@supports (height: 1svh) { .home-main { --hero: min(68vw, clamp(170px, 30svh, 250px)); } }
.home-top { position: absolute; top: 8px; right: 12px; z-index: 2; }
.home-brand { padding: 54px 0 12px; text-align: center; }
.home-line { margin: 0; font: italic 500 1.2rem/1.3 var(--font-display); color: var(--fg-soft); text-wrap: balance; }
.doors { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 0; }
.door {
  position: relative; isolation: isolate; display: flex; min-height: 184px; overflow: hidden;
  border: 1px solid rgba(var(--wash), .34); border-radius: 18px; background: var(--card); color: var(--fg); text-decoration: none;
}
.door:hover { border-color: var(--fg); }
.door--biz { border-color: var(--gold-line); }
.door--biz:hover { border-color: var(--gold-line); box-shadow: 0 0 0 1px var(--gold-line); }
.door--films:hover { box-shadow: 0 0 0 1px var(--fg); }
.door:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 18px; }
.door__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: 16px 20px 18px; text-shadow: 0 0 8px var(--card), 0 0 2px var(--card); }
.door__title { display: block; max-width: 66%; font: 700 1.55rem/1.22 var(--font-display); letter-spacing: .22em; text-transform: uppercase; }
.door__sub { display: block; max-width: 60%; margin-top: .25rem; font-size: .94rem; line-height: 1.4; }
.door__go { display: inline-block; margin-top: auto; padding-bottom: 5px; border-bottom: 2px solid var(--fg); font: 600 .78rem/1 var(--font-body); letter-spacing: .16em; text-transform: uppercase; }
.door--biz .door__go { border-bottom-color: var(--gold-line); }
@media (max-width: 359px) {
  .home-top { right: 8px; }
  .home-line { font-size: 1.08rem; }
  .door__title { font-size: 1.32rem; letter-spacing: .18em; }
  .door__sub { max-width: 64%; font-size: .9rem; }
}
@media (min-width: 700px) {
  .home-main { --hero: clamp(220px, 36vh, 300px); grid-template-rows: auto auto; align-content: center; padding: 0 24px 24px; }
  @supports (height: 1svh) { .home-main { --hero: clamp(220px, 36svh, 300px); } }
  .home-top { top: 16px; right: 24px; }
  .home-brand { padding: 20px 0 22px; }
  .home-line { font-size: 1.4rem; }
  /* doors fill what is left of the first screen under the brand block (logo + about 112px), within sane limits */
  .doors { grid-template: none / 1fr 1fr; gap: 20px; width: 100%; max-width: 1160px; height: clamp(340px, calc(100vh - var(--hero) - 112px), 600px); height: clamp(340px, calc(100svh - var(--hero) - 112px), 600px); margin-inline: auto; }
  .door__body { padding: 26px 30px 28px; }
  .door__title { max-width: none; font-size: 2.1rem; }
  .door__sub { font-size: 1.02rem; }
  .door { --light-x: 76%; --horizon: 64%; }
}

/* The scenes: ink on paper, pure CSS, no images. Both doors share one horizon and the
   three reflection strokes. Films: a brushed ink moon (an open ring), grey wash mist and a
   far ridge. Business: a gold sun on the ink horizon with a quiet gold line.
   Everything is painted from --wash and the gold tokens, so the ink theme inverts by itself. */
.scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.scene i { position: absolute; display: block; }
.mist { border-radius: 50%; }
.door--films .m1 { left: -30%; top: 34%; width: 120%; height: 22%; background: radial-gradient(closest-side, rgba(var(--wash), .12), rgba(var(--wash), .045) 60%, transparent); transform: rotate(-3deg); }
.door--films .m2 { right: -40%; top: 47%; width: 115%; height: 19%; background: radial-gradient(closest-side, rgba(var(--wash), .1), rgba(var(--wash), .04) 60%, transparent); transform: rotate(-2deg); }
.m3 { left: -10%; right: -10%; top: calc(var(--horizon) - 16%); height: 16%; border-radius: 0; background: linear-gradient(180deg, transparent, rgba(var(--wash), .09)); }
.door--biz .m1 { left: -30%; top: 30%; width: 110%; height: 34%; background: radial-gradient(closest-side, rgba(var(--wash), .07), rgba(var(--wash), .03) 60%, transparent); transform: rotate(-5deg); }
/* far ridge: low, long hills of wash, firm along the crest and thinning out towards the water */
.ridge { left: 0; right: 0; top: calc(var(--horizon) - 13%); height: 13%; overflow: hidden; }
.ridge::before, .ridge::after { content: ""; position: absolute; bottom: 0; }
.ridge::before { left: 22%; width: 50%; height: 62%; border-radius: 58% 42% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, rgba(var(--wash), .15), rgba(var(--wash), .02)); }
.ridge::after { left: 52%; width: 70%; height: 100%; border-radius: 38% 62% 0 0 / 100% 100% 0 0; background: linear-gradient(180deg, rgba(var(--wash), .2), rgba(var(--wash), .03)); }
.orb { left: var(--light-x); width: clamp(44px, 15%, 92px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); }
/* the ink moon: one turn of a loaded brush. The hole is cut off-centre, so the stroke swells
   and thins; the paint runs dry near the end and the circle is left open. */
.door--films .orb {
  top: 30%; width: clamp(50px, 17%, 104px);
  background: conic-gradient(from 150deg, rgba(var(--wash), .95), rgba(var(--wash), .9) 56%, rgba(var(--wash), .7) 76%, rgba(var(--wash), .28) 87%, rgba(var(--wash), 0) 91%, rgba(var(--wash), 0) 96.5%, rgba(var(--wash), .95) 97.5%);
  -webkit-mask: radial-gradient(circle closest-side at 46% 54%, transparent 80%, #000 85%);
          mask: radial-gradient(circle closest-side at 46% 54%, transparent 80%, #000 85%);
}
.halo { left: var(--light-x); top: var(--horizon); width: 90%; aspect-ratio: 1; margin: -45% 0 0 -45%; border-radius: 50%; background: radial-gradient(closest-side, rgba(var(--gold-rgb), .2), rgba(var(--gold-rgb), .06) 52%, transparent 74%); }
.door--biz .orb { top: var(--horizon); background: var(--gold); }
.water { left: 0; right: 0; top: var(--horizon); bottom: 0; background: linear-gradient(180deg, rgba(var(--wash), .06), rgba(var(--wash), 0) 70%), var(--card); }
/* the horizon: one ink stroke, full on the left, running dry to the right */
.horizon { left: 4%; right: 4%; top: var(--horizon); height: 2px; margin-top: -1px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(var(--wash), .9) 8%, rgba(var(--wash), .85) 62%, rgba(var(--wash), .3) 90%, transparent); }
.goldline { left: calc(var(--light-x) - 22%); width: 44%; top: calc(var(--horizon) + 5px); height: 1px; background: linear-gradient(90deg, transparent, var(--gold-stroke) 25%, var(--gold-stroke) 75%, transparent); }
.refl { left: var(--light-x); height: 3px; border-radius: 3px; background: var(--fg); opacity: .8; }
.door--biz .refl { background: var(--gold-stroke); opacity: 1; }
.r1 { top: calc(var(--horizon) + 14px); width: 62px; margin-left: -31px; }
.r2 { top: calc(var(--horizon) + 27px); width: 38px; margin-left: -19px; }
.r3 { top: calc(var(--horizon) + 40px); width: 16px; margin-left: -8px; }
@media (min-width: 700px) {
  .refl { height: 4px; }
  .r1 { top: calc(var(--horizon) + 22px); width: 96px; margin-left: -48px; }
  .r2 { top: calc(var(--horizon) + 42px); width: 60px; margin-left: -30px; }
  .r3 { top: calc(var(--horizon) + 62px); width: 24px; margin-left: -12px; }
  .goldline { top: calc(var(--horizon) + 8px); }
}

/* ---------- 7. Inner pages ---------- */
.page-hero { padding: clamp(2.75rem, 9vw, 5.5rem) 0 clamp(1.5rem, 5vw, 3rem); }
.page-hero h1 { margin-bottom: 0; }
.page-hero .btn-row { margin-top: 1.6rem; }
.section { padding: clamp(2.5rem, 7vw, 4.5rem) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section--alt { background: var(--grain), var(--bg-alt); }
.page-hero + .section { padding-top: clamp(.5rem, 2vw, 1.5rem); }
.section-head { max-width: 40em; margin-bottom: 2rem; }
.section-head p { color: var(--fg-soft); }
.panel { padding: 1.5rem; border: 1px solid var(--line); border-radius: 16px; background: var(--card); }
.note { font-size: .92rem; color: var(--fg-soft); }
.strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; }
.strip p { margin: 0; font: italic 500 1.45rem/1.3 var(--font-display); }

/* ---------- 8. Films ---------- */
.films { display: grid; gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.film { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); }
.film__poster { aspect-ratio: 16 / 9; background: var(--bg-alt); border-bottom: 1px solid var(--line); }
.film__poster svg { width: 100%; height: 100%; }
/* poster paint: classes instead of colour attributes, so the posters follow the theme */
.p-ground { fill: var(--bg-alt); }
.p-wash { fill: rgb(var(--wash)); }
.p-ink { stroke: var(--fg); fill: none; stroke-linecap: round; }
.p-inkfill { fill: var(--fg); }
.p-gold { fill: var(--gold); }
.p-goldline { stroke: var(--gold-stroke); fill: none; stroke-linecap: round; }
.film__body { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1.25rem 1.25rem 1.4rem; flex: 1; }
.film__body h2 { margin: 0; font-size: 1.7rem; }
.film__tag { margin: 0; font: 600 .78rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.film__body .btn { margin-top: auto; }
.film__body h2 + .btn, .film__tag + .btn { margin-top: .6rem; }
.channels { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 640px) { .films { grid-template-columns: 1fr 1fr; gap: 1.75rem; } }

/* ---------- 9. Business ---------- */
.packages { display: grid; gap: 1.25rem; margin: 0 0 1.75rem; padding: 0; list-style: none; }
.pkg { display: flex; flex-direction: column; }
.pkg__tier { margin: 0; font: 600 .78rem/1.2 var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-text); }
.pkg__price { margin: .35rem 0 1rem; font: 500 2.9rem/1 var(--font-display); }
.pkg__price small { margin-left: .5rem; font: 500 .82rem/1 var(--font-body); letter-spacing: .02em; color: var(--fg-soft); }
.pkg ul { margin: 0; padding: 0; list-style: none; font-size: .97rem; }
.pkg li { position: relative; padding: .55rem 0 .55rem 1.2rem; border-top: 1px solid var(--line); }
.pkg li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: .55rem; height: 2px; background: var(--gold-line); }
.services { display: grid; gap: 1.25rem; }
.service { display: flex; flex-direction: column; align-items: flex-start; }
.service__no { font: italic 500 1.3rem/1 var(--font-display); color: var(--accent-text); margin-bottom: .6rem; }
.service p { color: var(--fg-soft); }
.service .btn { margin-top: auto; }
.cta { padding: clamp(1.75rem, 6vw, 3rem); border: 1px solid var(--gold-line); border-radius: 18px; background: var(--card); }
.cta h2 { margin-bottom: .35em; }
.cta p { max-width: 34em; color: var(--fg-soft); }
.cta .btn { margin-top: .5rem; min-height: 52px; padding-inline: 1.9rem; font-size: 1.02rem; }
.cta .note { margin: 1rem 0 0; }
@media (min-width: 640px) { .packages { grid-template-columns: 1fr 1fr; } .services { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .packages { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 10. About ---------- */
.prose { max-width: 38em; }
.steps { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; margin-bottom: .6rem; font: italic 500 1.3rem/1 var(--font-display); color: var(--accent-text); }
.steps p { margin: 0; color: var(--fg-soft); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 11. Contact form ---------- */
.form { display: grid; gap: 1.15rem; max-width: 36rem; }
.field { display: grid; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 600; letter-spacing: .02em; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 50px; padding: .7rem .9rem; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--card); color: var(--fg); font: 400 1rem/1.4 var(--font-body);
}
.field textarea { min-height: 9rem; resize: vertical; }
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 2.6rem;
  background-image: var(--select-arrow); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px 8px;
}
.field ::placeholder { color: var(--fg-soft); opacity: .85; }
/* No red on the page: an invalid field gets a heavy ink border instead. */
.field [aria-invalid="true"] { border-color: var(--fg); border-width: 2px; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--fg); border-radius: 10px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: start; }
.form-note { margin: 0; padding: .7rem .9rem; border: 1px dashed var(--line-strong); border-radius: 10px; font-size: .9rem; color: var(--fg-soft); }
.form-status { margin: 0; font-size: .97rem; }
.form-status:empty { display: none; }
.form-status.is-demo, .form-status.is-ok, .form-status.is-err { padding: .85rem 1rem; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--card); }
.form-status.is-demo { border-color: var(--gold-line); border-left-width: 4px; }
.form-status.is-ok { border-color: var(--fg); border-left-width: 4px; }
.form-status.is-err { border: 2px solid var(--fg); font-weight: 600; }

/* ---------- 12. Footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1.5rem; padding-block: 1.25rem 1.75rem; }
.site-footer__copy { margin: 0; font-size: .9rem; color: var(--fg-soft); }
.foot-nav { display: flex; flex-wrap: wrap; margin-inline: -.5rem; }

/* The `font` shorthand resets font-variant, so restate lining figures where it is used with numbers. */
.pkg__price, .service__no, .steps li::before, .door__title, .home-line, .strip p { font-variant-numeric: lining-nums; }

/* ---------- 13. Motion: transform and opacity only, off under reduced motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .door--films .m1 { animation: lt-drift-a 19s ease-in-out infinite alternate; }
  .door--films .m2 { animation: lt-drift-b 25s ease-in-out infinite alternate; }
  .door--biz .m1 { animation: lt-drift-c 23s ease-in-out infinite alternate; }
  .m3 { animation: lt-fade 12s ease-in-out infinite alternate; }
  .halo { animation: lt-breathe 9s ease-in-out infinite alternate; }
  .r1 { animation: lt-shimmer 4.2s ease-in-out infinite; }
  .r2 { animation: lt-shimmer 5.1s ease-in-out -1.3s infinite; }
  .r3 { animation: lt-shimmer 6.3s ease-in-out -2.6s infinite; }
  /* Home logo entrance: the moon rises first, the lettering follows half a second later */
  .hero-logo__moon { animation: lt-moon-in .9s ease-out both; }
  .hero-logo__word { animation: lt-word-in .7s ease-out .5s both; }
  .door, .btn, .lang-toggle button, .nav a { transition: border-color .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease; }
}
@keyframes lt-drift-a { from { transform: translate3d(-6%, 3%, 0) rotate(-3deg) scale(1); } to { transform: translate3d(12%, -4%, 0) rotate(-1deg) scale(1.1); } }
@keyframes lt-drift-b { from { transform: translate3d(6%, -4%, 0) rotate(-2deg) scale(1.06); opacity: .7; } to { transform: translate3d(-12%, 4%, 0) rotate(-4deg) scale(1); opacity: 1; } }
@keyframes lt-drift-c { from { transform: translate3d(-4%, 3%, 0) rotate(-5deg); opacity: .7; } to { transform: translate3d(10%, -4%, 0) rotate(-2deg); opacity: 1; } }
@keyframes lt-moon-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lt-word-in { from { opacity: 0; transform: translate3d(0, 4px, 0); } to { opacity: 1; transform: none; } }
@keyframes lt-fade { from { opacity: .45; } to { opacity: 1; } }
@keyframes lt-breathe { from { transform: scale(.94); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }
@keyframes lt-shimmer { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.62); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}