/* ══════════════════════════════════════════════════════════════════════════
   Academia TG Tours — main site
   BETA. Not deployed. Built 20 Sep 2026 for review.

   Relationship to the landing page: same brandbook, different job.
   `intensiv.tg.tours` is one long conversion page for a €15 tripwire.
   This is the Academy's front door and catalogue: the place a YouTube bio,
   an Instagram profile and an email signature point at. So it is calmer,
   more editorial, and it carries the whole ladder rather than one rung.

   Colours are the brandbook values, taken from build/landing/site/css/styles.css
   which in turn took them from brandbook-mini.pdf. Nothing invented.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────────────────── */
:root{
  /* brandbook */
  --plum:#4C1F3C;
  --mauve:#784566;
  --cream:#FEF0E7;
  --gold-lt:#F1D087;
  --gold:#F0B760;
  --coral:#DD5A5F;
  --violet:#593283;

  /* derived, from the landing build */
  --plum-d:#38152B;
  --gold-d:#C88F3E;
  --gold-ink:#9A630F;     /* the only gold that clears 4.5:1 on cream */
  --ink:#2E1128;
  --body:#5A4453;
  --quiet:#7A6272;
  --white:#fff;

  /* dark surfaces */
  --bg-d:#230F1B;
  --panel-d:#2C1726;
  --band-d:#4A2038;
  --txt-d:#F4EAE6;
  --txt-d-mut:rgba(244,234,230,.74);
  --line-d:rgba(255,255,255,.14);

  --line:rgba(76,31,60,.13);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Raleway",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;

  /* ONE radius scale, applied everywhere: cards 16, small 10, pills full */
  --r:16px;
  --r-s:10px;

  --wrap:1180px;
  --pad:24px;
  --lift:0 2px 4px rgba(56,21,43,.05), 0 16px 40px rgba(56,21,43,.09);
  --lift-d:0 2px 4px rgba(0,0,0,.3), 0 18px 44px rgba(0,0,0,.36);
}

/* ── base ────────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* 🔴 THE PALETTE HAS ROLES, AND THEY DO NOT SWAP.
   From the brain, lessons/one-colour-cannot-command-and-belong:
   «The hue is the room. The near-white is the voice.»

     PLUM   is the room  — identity, atmosphere, the ground. It NEVER commands.
     CREAM  is the voice — reserved for what must be read and believed.
     GOLD   is the command — buttons, and almost nothing else.

   The same lesson: «Reserve a high-value accent for rare, earned states only.
   Scarcity is what gives it meaning; using it for ordinary emphasis spends
   it.» The first build spent gold on eyebrows, bullets, numbers, labels and
   the wordmark at once. Rationed here — if you add a gold element, take one
   away. */
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--txt-d-mut);
  background:var(--bg-d);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,picture,svg,video{max-width:100%;display:block}
a{color:inherit}
/* 🔴 DEFAULT HEADING COLOUR IS LIGHT, because the page is dark.
   This used to say `color: var(--ink)` with a lighter override added above
   it — same specificity, earlier in the file, so the override never won and
   every bare <h3> rendered --ink on --bg-d at **1.06:1**. Invisible. It read
   as "the colour looks grey", which is how a contrast failure usually
   arrives.
   The one cream section flips it back, below. */
h1,h2,h3,h4{margin:0;font-family:var(--serif);color:var(--txt-d);line-height:1.12;font-weight:500;letter-spacing:-.012em}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:200;background:var(--plum);color:#fff;padding:10px 16px;border-radius:var(--r-s)}

/* ── shared type ─────────────────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans);
  font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;
  color:var(--gold);margin:0 0 18px;
}
.eyebrow--d{color:var(--gold)}
/* Grandeur is scale CONTRAST, not uniform bigness. One or two huge moments,
   everything else deliberately quiet. Vetrino is light and wide — it wants
   to be large, and at 46px it was merely polite. */
/* 🔴 GRANDEUR IS CONTRAST, NOT UNIFORM BIGNESS.
   These three steps are a ladder and the gaps between them are the effect.
   Raising the section default back toward the display size flattens the
   ladder and the page goes loud instead of grand. If you enlarge .h2, you
   must enlarge the other two or the whole device stops working. */
.h2{font-size:clamp(29px,4.4vw,52px);margin:0 0 22px;text-wrap:balance;line-height:1.06}
.h2--xl{font-size:clamp(40px,8.6vw,108px);line-height:.96;letter-spacing:-.024em}
.h2--held{font-size:clamp(46px,11.5vw,152px);line-height:.92;letter-spacing:-.03em}
.h3{font-size:clamp(20px,2.4vw,25px);margin:0 0 12px;text-wrap:balance}
.lede{font-size:clamp(17px,2vw,20px);line-height:1.66;max-width:62ch;color:var(--txt-d-mut)}
.lede--d{color:var(--txt-d-mut)}
/* brandbook specimen sets the subheading in italic */
.lede--sub{font-style:italic;font-size:clamp(18px,2.1vw,22px);color:var(--mauve)}
.sec--dark .lede--sub,.sec--plum .lede--sub,.prac .lede--sub{color:var(--gold-lt)}
/* Macro-whitespace. A grand page breathes; a cramped one reads as a template
   however good the type is. */
/* 160px top AND bottom put 320px of nothing between every section. With the
   colour steps gone as well, short sections — the path especially — floated
   in empty space, which is what «why is the layout so bad» was pointing at.
   Generous, not vacant. */
.sec{padding:clamp(56px,7vw,104px) 0;position:relative}

/* 🔴 ONE GROUND, NOT THREE.
   These were three plum depths alternating down the page, which produced a
   visible horizontal edge at almost every section boundary — ten of them.
   The founder's words: «it looks like a book full of pages, the website
   doesn't flow.» He was right; depth steps are not the same thing as depth.

   Everything now shares `--bg-d`. Variation comes from the masked glows,
   which have no edges, instead of from flat colour, which is all edge.

   ⚠️ Three transitions are left, and they are deliberate:
       1. the hero photograph meeting the ground
       2. the ONE cream room (Tatiana)
       3. the practice photograph
   Reintroduce a fourth and all three get cheaper. */
/* ⚠️ REVISED AGAIN, 20 Sep. Collapsing ALL of these to one ground went too
   far the other way: the page stopped being a book of pages and became one
   long corridor with nothing to mark progress. He asked for four boundaries
   back, by name, and only those.

   So the classes below are not three depths any more — they are
   "the ground" and "a band". Only four sections carry a band:

       facts strip · the path · Tatiana (cream) · the practice photograph

   Everything else sits on `--bg-d` and flows. If you give a fifth section a
   band, the four stop meaning anything. */
.sec--dark,.sec--deep{background:var(--bg-d)}
.sec--plum{background:var(--panel-d)}

/* ✨ THE ONE LIT ROOM. Exactly one cream section on the page, and it is
   Tatiana's — the brand's own research says 70% of leads came from one video
   of her on camera, so she is what the light is for. Adding a second cream
   section halves the value of this one. */
/* The one cream room. Hard edges on both sides, by request — the ramps that
   were here softened it into the page instead of announcing it. */
.sec--lit{background:var(--cream)}
.sec--lit h1,.sec--lit h2,.sec--lit h3,.sec--lit h4,.sec--lit .h2,.sec--lit .h3{color:var(--ink)}
.sec--lit .lede,.sec--lit p{color:var(--body)}
.sec--lit .eyebrow{color:var(--gold-ink)}
.sec--lit .lede{color:var(--body)}
.sec--lit .claims li{color:var(--body);border-color:var(--line)}
.sec--lit .claims b{color:var(--ink)}
.sec--lit .claims .dot{background:var(--gold-d);box-shadow:none}
.sec--lit .lede--sub{color:var(--mauve)}

.sec--dark .h2,.sec--dark .h3,.sec--plum .h2,.sec--plum .h3,.sec--deep .h2,.sec--deep .h3{color:var(--txt-d)}
.sec--white,.sec--cream{background:var(--bg-d)}   /* legacy hooks, same ground */

/* ── atmosphere ─────────────────────────────────────────────
   A flat dark fill is not atmosphere, it is just dark. Aura is light that
   implies a source outside the frame.

   🔴 THE TRAP, from the brain: lessons/a-gradient-clipped-by-its-own-box-
   reads-as-a-line. «A soft gradient clipped by the edge of its own box
   produces a sharp line on screen. How gentle the gradient is does not
   matter.» Its first fix made things four times worse by softening the ramp
   instead of masking the cut-off.

   🔴 CORRECTION, 20 Sep. The paragraph that used to sit here claimed every
   glow «stops at 60-70% of its own box» and was therefore safe. That was
   wrong, and it shipped a visible seam across the page which the founder
   spotted immediately.

   The error: `radial-gradient(44% 40% at 88% 94%, …, transparent 68%)` — the
   68% is a fraction of the GRADIENT'S OWN RADIUS, not of the box. A glow
   centred at y=94% with a 40% radius is only 15% of the way through its ramp
   when the box ends at y=100%. It gets cut at near-full opacity.

   Enumerated rather than guessed, which is the brain's actual instruction:
   **13 of 13 glows on this page were clipping.** The worst was at 0.09 —
   sliced at 9% of its radius.

   The fix is the one the lesson gives and the one I skipped: **mask the edge
   to transparent.** Not "soften the gradient" — that is the move the lesson
   records as making it four times worse. The mask below is unconditional, so
   it does not matter where a future gradient is centred or how wide it is.
   Add a glow, it is safe by construction. */
.glow::before,.glow--gold::before,.held::before{
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
}
.glow{position:relative;isolation:isolate}
.glow::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52% 44% at 18% 8%,  rgba(120,69,102,.55), rgba(120,69,102,0) 66%),
    radial-gradient(44% 40% at 88% 94%, rgba(89,50,131,.42),  rgba(89,50,131,0)  68%);
}
.glow--gold::before{
  background:
    radial-gradient(48% 42% at 82% 10%, rgba(240,183,96,.16), rgba(240,183,96,0) 64%),
    radial-gradient(56% 48% at 12% 92%, rgba(120,69,102,.48), rgba(120,69,102,0) 68%);
}

/* Film grain. The cheapest thing that stops a dark gradient reading as a flat
   CSS fill. FIXED and pointer-events:none, per both the brain and soft-skill:
   on a scrolling container it forces continuous GPU repaints and kills
   mid-range Android, which is a large part of this audience. */
body::after{
  content:"";position:fixed;inset:0;z-index:40;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (prefers-reduced-transparency:reduce){ body::after{display:none} }

/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:16px;font-weight:700;line-height:1;
  padding:17px 30px;border-radius:999px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background .18s, color .18s;
}
.btn:active{transform:translateY(1px)}
/* gold on plum ink: 8.1:1. The brand gold is only safe as a BACKGROUND, never
   as text on cream, which is why every gold button carries dark ink. */
.btn--gold{background:var(--gold);color:var(--plum-d);box-shadow:0 8px 22px rgba(240,183,96,.3)}
.btn--gold:hover{background:var(--gold-lt);box-shadow:0 12px 30px rgba(240,183,96,.42)}
/* «Give the response as light instead of movement.»
   lessons/integration-belongs-to-the-surroundings-not-the-object. On a dark
   ground a surface that brightens reads as more expensive than one that
   moves, and it costs no layout. */
.btn--ghost{
  background:rgba(120,69,102,.26);color:var(--txt-d);border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.btn--ghost:hover{
  background:rgba(255,255,255,.09);border-color:rgba(240,183,96,.5);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 34px rgba(240,183,96,.12);
}
.btn--ink{background:var(--plum);color:#fff}
.btn--ink:hover{background:var(--plum-d)}
.btn--lg{font-size:17px;padding:19px 36px}

/* ── nav ─────────────────────────────────────────────────────────────────── */
/* 68px tall. A front door does not need a 100px agency header. */
.nav{
  position:sticky;top:0;z-index:60;
  background:rgba(35,15,27,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid var(--line-d);
}
/* 64px, not 68: tg.tours' band centres at y=32 (measured), and 64 puts ours
   there too. The two bars now share a centre line, so nothing shifts
   vertically across the crossing. */
.nav__in{display:flex;align-items:center;gap:26px;height:64px}
/* The lockup, per brand/visual.md: the wave mark, then ACADEMIA over
   TG TOURS in serif caps with wide tracking, top line larger. The mark is
   one continuous line with no fill and no gradient inside it — it is
   supplied that way and must not be boxed, tinted or filled. */
.lockup{display:inline-flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.lockup__mark{width:38px;height:38px;flex:none}
.lockup__txt{display:block;font-family:var(--serif);text-transform:uppercase;line-height:1}
.lockup__a{display:block;font-size:15px;font-weight:600;letter-spacing:.17em;color:var(--gold)}
.lockup__b{display:block;font-size:10.5px;font-weight:600;letter-spacing:.3em;margin-top:5px;color:var(--txt-d)}
.lockup--ink .lockup__a{color:var(--plum)}
.lockup--ink .lockup__b{color:var(--ink)}
.nav__brand{color:var(--txt-d)}
.nav__links{display:flex;gap:24px;margin-left:auto}
.nav__links a{font-size:14.5px;font-weight:600;color:var(--txt-d-mut);text-decoration:none;transition:color .16s}
.nav__links a:hover{color:var(--gold-lt)}
.nav__cta{flex:none;padding:12px 22px;font-size:14.5px}
@media (max-width:980px){
  .nav__links{display:none}
  .nav__cta{margin-left:auto}
}
/* At 375px the brand lockup plus the CTA overflowed the viewport by ~27px and
   gave the whole page a horizontal scrollbar. Measured, not guessed:
   `scrollWidth > clientWidth` with `.nav__cta` the only offending box.
   The descriptor line is the first thing to go — it is the least useful
   pixel in the header on a phone. */
@media (max-width:430px){
  .nav__in{gap:10px}
  /* Scale the lockup down rather than hide half of it. The mark and the two
     lines are one logo; dropping "TG TOURS" would leave a different brand. */
  .nav__brand .lockup__mark{width:31px;height:31px}
  .nav__brand .lockup__a{font-size:12.5px;letter-spacing:.13em}
  .nav__brand .lockup__b{font-size:8.5px;letter-spacing:.24em;margin-top:4px}
  .nav__brand{gap:9px}
  .nav__cta{padding:11px 14px;font-size:13px}
}

/* ── hero ────────────────────────────────────────────────────────────────── */
/* Left-aligned, not centred: the landing page already owns the centred hero,
   and an asymmetric composition reads as a brand home rather than a funnel. */
.hero{position:relative;min-height:min(84vh,780px);display:flex;align-items:center;overflow:hidden;background:var(--bg-d)}
/* The hero's bottom edge is transition #1 and stays dramatic, but it still
   lands on the ground colour rather than on a cut. */
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:120px;z-index:1;pointer-events:none;
  background:linear-gradient(0deg, var(--plum-d), rgba(56,21,43,0));
}
.hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%}
/* Plum duotone. The brandbook prints every photograph under a plum/magenta
   wash rather than a neutral darkener, and that wash is what makes a stock
   beach read as this brand. Two layers: a colour multiply over the whole
   frame, then a directional scrim so the type has something to sit on. */
.hero__bg{filter:saturate(.72) contrast(1.06)}
.hero__scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(94deg, rgba(56,21,43,.94) 0%, rgba(76,31,60,.84) 40%, rgba(120,69,102,.52) 74%, rgba(120,69,102,.44) 100%),
    linear-gradient(0deg, rgba(35,15,27,.78) 0%, transparent 46%);
  mix-blend-mode:normal;
}
.hero__in{position:relative;padding:clamp(72px,9vw,104px) 0;max-width:750px}
.hero h1{
  font-size:clamp(38px,6.8vw,80px);
  color:#fff;margin:0 0 22px;line-height:1.06;text-wrap:balance;
}
.hero h1 em{font-style:italic;color:var(--gold-lt);line-height:1.12;display:inline-block;padding-bottom:2px}
.hero__lede{font-size:clamp(17px,2.1vw,20px);line-height:1.62;color:rgba(255,255,255,.88);max-width:56ch;margin:0 0 34px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero__note{margin:20px 0 0;font-size:14px;color:rgba(255,255,255,.6)}
.hero__motto{
  margin:0 0 20px;font-family:var(--serif);font-style:italic;
  font-size:clamp(15px,1.7vw,18px);color:var(--gold);letter-spacing:.02em;
}

/* ── facts strip ─────────────────────────────────────────────────────────── */
.facts{background:var(--plum-d);border-top:1px solid var(--line-d)}
.facts__in{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-d)}
.facts__i{background:var(--plum-d);padding:30px 28px}
.facts__n{font-family:var(--serif);font-size:clamp(26px,3.4vw,38px);color:var(--gold);line-height:1;margin:0 0 8px}
.facts__t{font-size:14.5px;line-height:1.5;color:var(--txt-d-mut);margin:0}
@media (max-width:760px){
  .facts__in{grid-template-columns:1fr}
  .facts__i{padding:22px 24px}
}

/* ── split: image one side, text the other ───────────────────────────────── */
.split__in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,72px);align-items:center}
.split--flip .split__in{direction:rtl}
.split--flip .split__fig,.split--flip .split__txt{direction:ltr}
.split__fig{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--lift)}
/* 🔴 NO FORCED ASPECT RATIO ON A PORTRAIT.
   Both photographs are portrait — tatiana-paint is 700×1081 (0.65) and
   tatiana-teide 900×1200 (0.75). This rule forced them into 4/3.2 (1.25,
   landscape) with object-fit:cover, so `cover` threw away roughly half of
   each frame. On the author section that half contained her face.

   A portrait of a person is the one image you must not crop blind. Natural
   ratio, no cover, nothing lost. The column simply becomes as tall as the
   photograph, which the grid centres against the text. */
.split__fig img{width:100%;height:auto;display:block}
/* A 0.65-ratio portrait at full column width is very tall on a phone, so cap
   it by height there and let it centre. Capping HEIGHT crops nothing; it is
   forcing a WIDE ratio onto a tall image that crops. */
@media (max-width:860px){
  .split__fig{max-width:min(100%,420px);margin-inline:auto}
}
.sec--dark .split__fig,.sec--plum .split__fig{box-shadow:var(--lift-d)}
.split__txt p:last-child{margin-bottom:0}
@media (max-width:860px){
  .split__in,.split--flip .split__in{grid-template-columns:1fr;direction:ltr}
  .split__fig{order:-1}
  /* and never 16/10 on mobile either — that was cropping even harder */
  .split__fig img{aspect-ratio:auto}
}

/* a short list of plain claims, hairline separated. Not cards: these are
   statements, and a card around each one would add weight they do not need. */
.claims{margin:28px 0 0;display:grid;gap:0}
.claims li{
  display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;
  padding:15px 0;border-top:1px solid var(--line-d);font-size:16px;line-height:1.6;
  color:var(--txt-d-mut);
}
.claims li:last-child{border-bottom:1px solid var(--line-d)}
.sec--dark .claims li,.sec--plum .claims li,.prac .claims li{border-color:var(--line-d);color:var(--txt-d-mut)}
.claims b{color:var(--txt-d);font-weight:700}
.sec--dark .claims b,.sec--plum .claims b,.prac .claims b{color:var(--txt-d)}
.claims .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:.62em;box-shadow:0 0 12px rgba(240,183,96,.45)}
.sec--dark .claims .dot,.sec--plum .claims .dot,.prac .claims .dot{background:var(--gold)}

/* 🔴 WHY THESE TINTS ARE MAUVE AND NOT WHITE
   `rgba(255,255,255,.03)` over a saturated plum does not lighten it, it
   DESATURATES it — white carries every hue equally, so it drags the surface
   toward grey. The founder's note on the first build was literally «why is
   it grey?» and that was the cause.

   Lighten a saturated ground with a lighter tint OF ITS OWN HUE. Here that
   is --mauve #784566, the brandbook's own second colour. Reach for
   rgba(255,255,255,…) on this page and the plum dies. */
/* ── modules ─────────────────────────────────────────────────────────────── */
.mods{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-d);border:1px solid var(--line-d);border-radius:var(--r);overflow:hidden;margin-top:52px}
.mods__i{background:rgba(120,69,102,.16);padding:clamp(26px,3.2vw,38px);display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  transition:background .4s cubic-bezier(.32,.72,0,1)}
.mods__i:hover{background:rgba(120,69,102,.3)}   /* light, not movement */
.mods__n{
  font-family:var(--serif);font-size:34px;line-height:1;color:rgba(240,183,96,.55);
  min-width:48px;
}
.mods__i h3{font-size:19px;line-height:1.3;margin:0 0 8px;letter-spacing:-.01em}
.mods__i p{font-size:15px;line-height:1.6;margin:0;color:var(--txt-d-mut)}
@media (max-width:860px){ .mods{grid-template-columns:1fr} }

/* ── included ────────────────────────────────────────────────────────────── */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:40px}
.incl li{
  background:rgba(120,69,102,.22);border:1px solid var(--line-d);
  border-radius:var(--r-s);padding:18px 20px;font-size:15.5px;line-height:1.5;color:var(--txt-d);
}
.incl li b{color:var(--gold-lt);font-weight:700}
@media (max-width:860px){ .incl{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .incl{grid-template-columns:1fr} }

/* ── quotes ──────────────────────────────────────────────────────────────── */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,32px);margin-top:44px;align-items:start}
.quote{
  background:linear-gradient(180deg, rgba(76,31,60,.6) 0%, rgba(44,23,38,.88) 100%);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r);padding:clamp(28px,3.4vw,42px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 70px rgba(20,6,14,.5);
}
.quote::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,240,215,.45) 50%,rgba(255,255,255,0))}
.quote{position:relative}
.quote__t{font-family:var(--serif);font-size:clamp(20px,2.3vw,26px);line-height:1.38;color:#fff;margin:0 0 20px}
.quote__b{font-size:15.5px;line-height:1.72;color:var(--txt-d-mut);margin:0 0 20px}
.quote__by{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line-d);font-size:14.5px}
.quote__by b{color:var(--txt-d)}
.quote__tag{
  margin-left:auto;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-lt);background:rgba(240,183,96,.14);border:1px solid rgba(240,183,96,.3);padding:5px 11px;border-radius:999px;
}
@media (max-width:860px){ .quotes{grid-template-columns:1fr} }

/* ── tariffs ─────────────────────────────────────────────────────────────── */
.tar{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:44px;align-items:stretch}
.tar__i{
  display:flex;flex-direction:column;
  background:linear-gradient(180deg, rgba(76,31,60,.5) 0%, rgba(44,23,38,.85) 100%);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
  padding:30px 26px 28px;
  transition:border-color .4s cubic-bezier(.32,.72,0,1), box-shadow .4s cubic-bezier(.32,.72,0,1);
}
.tar__i::before{content:"";position:absolute;left:16%;right:16%;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,240,215,.4) 50%,rgba(255,255,255,0));
  transition:opacity .4s cubic-bezier(.32,.72,0,1)}
.tar__i{position:relative}
.tar__i--hero::before{
  background:linear-gradient(90deg,rgba(240,183,96,0),rgba(241,208,135,.85) 50%,rgba(240,183,96,0))}
.tar__i:hover{border-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 0 44px rgba(120,69,102,.4)}
.tar__i--hero{
  background:linear-gradient(180deg, rgba(120,69,102,.62) 0%, rgba(76,31,60,.94) 100%);
  border-color:rgba(240,183,96,.38);position:relative;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 34px 80px rgba(20,6,14,.6), 0 0 64px rgba(240,183,96,.1);
}
.tar__i--hero .tar__name,.tar__i--hero .tar__price{color:#fff}
.tar__i--hero .tar__slog{color:var(--gold-lt)}
.tar__i--hero .tar__list li{color:var(--txt-d-mut);border-color:var(--line-d)}
.tar__i--hero .tar__list b{color:#fff}
.tar__flag{
  position:absolute;top:-11px;left:24px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;background:var(--gold);color:var(--plum-d);
  padding:5px 12px;border-radius:999px;
}
.tar__name{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 10px}
.tar__slog{font-family:var(--serif);font-size:18px;line-height:1.3;color:#fff;margin:0 0 18px;min-height:2.6em}
.tar__price{font-family:var(--serif);font-size:46px;line-height:1;color:#fff;margin:0 0 4px}
.tar__was{font-size:13.5px;color:var(--txt-d-mut);margin:0 0 20px}
.tar__i--hero .tar__was{color:var(--txt-d-mut)}
.tar__list{margin:0 0 24px;display:grid;gap:0}
.tar__list li{font-size:14.5px;line-height:1.55;padding:10px 0;border-top:1px solid var(--line-d);color:var(--txt-d-mut)}
.tar__list li:first-child{border-top:0}
.tar__list b{color:var(--txt-d);font-weight:700}
.tar__doc{
  margin-top:auto;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:9px 0 0;border-top:1px solid var(--line-d);color:var(--gold-lt);
}
.tar__i--hero .tar__doc{border-color:var(--line-d);color:var(--gold-lt)}
@media (max-width:1080px){ .tar{grid-template-columns:1fr 1fr} .tar__slog{min-height:0} }
@media (max-width:620px){ .tar{grid-template-columns:1fr} }

.tar__note{
  margin:34px auto 0;max-width:760px;text-align:center;
  background:rgba(240,183,96,.1);border:1px solid rgba(240,183,96,.32);
  border-radius:var(--r);padding:26px 30px;font-size:16px;line-height:1.62;color:var(--txt-d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 0 60px rgba(240,183,96,.07);
}
.tar__note b{color:#fff}

/* ── docs: certificate vs diploma ────────────────────────────────────────── */
.docs{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.docs__i{border:1px solid var(--line-d);border-radius:var(--r);padding:28px 26px;background:rgba(120,69,102,.2)}
.docs__i h3{font-size:20px;margin:0 0 10px;color:var(--txt-d)}
.docs__i p{font-size:15.5px;line-height:1.6;color:var(--txt-d-mut);margin:0 0 14px}
.docs__who{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--gold);margin:0}
@media (max-width:760px){ .docs{grid-template-columns:1fr} }

/* ── practice band ───────────────────────────────────────────────────────── */
.prac{position:relative;overflow:hidden;background:var(--bg-d)}
.prac__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prac__bg{filter:saturate(.72) contrast(1.06)}
.prac__scrim{position:absolute;inset:0;background:linear-gradient(92deg,rgba(56,21,43,.95) 0%,rgba(76,31,60,.87) 44%,rgba(120,69,102,.55) 100%)}
.prac__in{position:relative;padding:clamp(64px,8vw,110px) 0;max-width:680px}
.prac .h2,.prac .h3{color:#fff}
.prac .lede{color:var(--txt-d-mut)}

/* ── faq ─────────────────────────────────────────────────────────────────── */
.faq__l{margin-top:48px;border-top:1px solid var(--line-d)}
.faq__i{border-bottom:1px solid var(--line-d)}
.faq__i summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-family:var(--serif);font-size:clamp(18px,2.1vw,23px);color:var(--txt-d);line-height:1.35;
  transition:color .3s cubic-bezier(.32,.72,0,1);
}
.faq__i summary:hover{color:var(--gold-lt)}
.faq__i summary::-webkit-details-marker{display:none}
.faq__i summary::after{
  content:"";position:absolute;right:8px;top:50%;width:11px;height:11px;
  border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .2s;
}
.faq__i[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq__i > div{padding:0 0 26px;font-size:16px;line-height:1.7;max-width:70ch;color:var(--txt-d-mut)}
.faq__i > div p:last-child{margin-bottom:0}

/* ── footer ──────────────────────────────────────────────────────────────── */
.ftr{background:var(--bg-d);color:var(--txt-d-mut);padding:clamp(52px,6vw,78px) 0 34px}
.ftr__top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,56px);padding-bottom:40px;border-bottom:1px solid var(--line-d)}
.ftr h4{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--gold);margin:0 0 16px}
.ftr a{color:var(--txt-d-mut);text-decoration:none;transition:color .16s}
.ftr a:hover{color:var(--gold-lt);text-decoration:underline;text-underline-offset:3px}
.ftr__l{display:grid;gap:10px;font-size:15px}
.ftr__brand{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ftr__brand img{width:40px;height:40px;border-radius:var(--r-s)}
.ftr__brand b{font-size:16px;color:var(--txt-d);display:block}
.ftr__brand span{font-size:12px;color:var(--gold);letter-spacing:.06em}
.ftr__legal{padding-top:26px;font-size:13.5px;line-height:1.7;display:grid;gap:8px}
.ftr__legal p{margin:0}
@media (max-width:860px){ .ftr__top{grid-template-columns:1fr;gap:34px} }

/* ── the double bezel ────────────────────────────────────────
   A card sitting flat on the ground is a div. A card sitting in a tray reads
   as machined hardware. Outer shell: hairline + padding + large radius.
   Inner core: its own surface, an inset top highlight (light falls from
   above), and a concentric smaller radius.

   The shadow is plum-tinted, never black — lessons/the-shadow-belongs-to-the-
   surface: a shadow is what the object does to the surface, and this surface
   is plum. A black shadow on a dark plum ground does nothing at all. */
.bezel{
  background:rgba(120,69,102,.2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:calc(var(--r) + 7px);
  padding:7px;
  box-shadow:0 30px 70px rgba(20,6,14,.5);
}
.bezel__core{
  background:linear-gradient(180deg, rgba(76,31,60,.72) 0%, rgba(44,23,38,.9) 100%);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
  height:100%;
}
.bezel--hero .bezel__core{
  background:linear-gradient(180deg, rgba(120,69,102,.6) 0%, rgba(76,31,60,.92) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.bezel--hero{
  border-color:rgba(240,183,96,.34);
  box-shadow:0 34px 80px rgba(20,6,14,.6), 0 0 60px rgba(240,183,96,.09);
}

/* ── 9 · lit edges ───────────────────────────────────────────────
   A uniform 1px border says "div". A hairline that is bright in the middle
   and fades at both ends says "a curved surface catching a light source",
   which is the whole illusion. The light is warm at the top because the
   glows above it are warm.

   Same rule as every other gradient here: it fades to transparent well
   inside its own box, so there is no cut edge to read as a line. */
.lit{position:relative}
.lit::before{
  content:"";position:absolute;left:12%;right:12%;top:0;height:1px;
  pointer-events:none;border-radius:1px;
  background:linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.34) 32%,
    rgba(255,240,215,.5) 50%,
    rgba(255,255,255,.34) 68%,
    rgba(255,255,255,0) 100%);
}
.lit--gold::before{
  background:linear-gradient(90deg,
    rgba(240,183,96,0) 0%,
    rgba(240,183,96,.5) 34%,
    rgba(241,208,135,.8) 50%,
    rgba(240,183,96,.5) 66%,
    rgba(240,183,96,0) 100%);
}

/* ── 6 · the held moment ───────────────────────────────────────
   A section that sells nothing. It exists so the page has somewhere to
   breathe before it asks for anything, and because the confidence to spend
   a whole screen on a motto is itself the signal.

   ⚠️ It only works while it is the ONLY one. Add a second and both become
   padding. Do not put a button in here. */
.held{
  position:relative;overflow:hidden;
  min-height:min(82vh,760px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--bg-d);
}
.held__in{position:relative;z-index:1;padding:clamp(80px,12vw,150px) var(--pad);max-width:1000px}
.held__mark{
  width:clamp(60px,8vw,96px);height:auto;margin:0 auto clamp(30px,4vw,48px);
  opacity:.9;filter:drop-shadow(0 0 40px rgba(240,183,96,.35));
}
.held__motto{
  font-family:var(--serif);font-style:italic;color:#fff;
  margin:0 0 clamp(22px,3vw,34px);
}
.held__ru{
  font-size:clamp(14px,1.7vw,19px);letter-spacing:.14em;text-transform:uppercase;
  color:rgba(244,234,230,.62);margin:0;font-weight:600;
}
/* 8 · the sunset, washed in behind the darkness. Fades out at 62% of its own
   box, so nothing is ever clipped. */
.held::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 112%, rgba(240,183,96,.3), rgba(240,183,96,0) 62%),
    radial-gradient(52% 46% at 16% -8%, rgba(89,50,131,.55), rgba(89,50,131,0) 64%),
    radial-gradient(48% 44% at 86% 4%, rgba(221,90,95,.3), rgba(221,90,95,0) 62%);
}

/* ── 8 · the sunset as an event ───────────────────────────────────
   violet → coral → gold, from the brandbook. Used exactly ONCE on the page,
   on the last button, because a thing that appears three times is wallpaper.

   🔴 It is the HALO, not the fill, and that is an accessibility decision
   rather than a stylistic one. White label text measures ~8:1 on the violet
   end but **1.9:1 on the gold end** — a fill would be unreadable at exactly
   the point the eye lands. The button keeps gold-on-plum-ink at 8.1:1 and
   the gradient becomes the aura around it. Do not "simplify" this into a
   background. */
/* 🔴 The halo lives on a WRAPPER, not on the button, and that is a paint-
   order fact rather than a preference. `isolation:isolate` on the button
   makes it a stacking context, and inside one a `z-index:-1` child paints
   ON TOP of that element's own background — so the gradient covered the gold
   fill and the button came out pink. Caught on screen, not in the source.

   On a wrapper it works: the wrapper isolates, its pseudo-elements sit
   behind its content, and the <a> paints over them with its gold intact. */
.event{position:relative;isolation:isolate;display:inline-block;border-radius:999px}
.event::before{
  content:"";position:absolute;inset:-3px;z-index:-1;border-radius:999px;
  background:linear-gradient(135deg,var(--violet) 0%,var(--coral) 52%,var(--gold) 100%);
  opacity:.95;transition:opacity .45s cubic-bezier(.32,.72,0,1);
}
.event::after{
  content:"";position:absolute;inset:-18px;z-index:-2;border-radius:999px;
  background:linear-gradient(135deg,var(--violet) 0%,var(--coral) 52%,var(--gold) 100%);
  opacity:.38;filter:blur(22px);transition:opacity .45s cubic-bezier(.32,.72,0,1);
}
.event:hover::before{opacity:1}
.event:hover::after{opacity:.66}
.event .btn{position:relative}

/* ── the gold wave rule ───────────────────────────────────────────────────
   A brand device off the brandbook sheet, not an invented flourish: a single
   hand-drawn gold wave. Used once per page as a section divider so it stays
   a signature instead of becoming wallpaper. */
.wave{display:block;width:100%;max-width:520px;height:auto;margin:0 0 26px;overflow:visible}
.wave path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wave--c{margin-left:auto;margin-right:auto}

/* The sunset gradient, straight off the brandbook: violet -> coral -> gold.
   One of the three approved logo grounds. */
.sunset{background:linear-gradient(135deg,var(--violet) 0%,var(--coral) 52%,var(--gold) 100%)}

/* ── the path ─────────────────────────────────────────────────────────────
   brand/visual.md prescribes the narrative in so many words: «человек должен
   видеть не абстрактное "обучение", а путь». Five steps, shown as a path. */
.path{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:44px;counter-reset:p}
.path li{position:relative;padding:0 18px 0 0}
.path li::before{
  counter-increment:p;content:counter(p);
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;margin:0 0 16px;
  font-family:var(--serif);font-size:17px;color:var(--plum-d);background:var(--gold);
}
/* the connecting rule, stopping before the last step */
.path li:not(:last-child)::after{
  content:"";position:absolute;left:40px;top:19px;right:0;height:2px;
  background:linear-gradient(90deg,var(--gold) 0%,rgba(240,183,96,.25) 100%);
}
.path b{display:block;font-size:17px;line-height:1.35;color:#fff;margin-bottom:6px}
.path span{display:block;font-size:14.5px;line-height:1.5;color:var(--txt-d-mut)}
.sec--dark .path b,.sec--plum .path b{color:#fff}
.sec--dark .path span,.sec--plum .path span{color:var(--txt-d-mut)}
@media (max-width:900px){
  .path{grid-template-columns:1fr;gap:22px}
  .path li{padding:0 0 0 56px}
  .path li::before{position:absolute;left:0;top:0;margin:0}
  .path li:not(:last-child)::after{left:19px;top:44px;right:auto;bottom:-22px;width:2px;height:auto;
    background:linear-gradient(180deg,var(--gold) 0%,rgba(240,183,96,.25) 100%)}
}

/* ── reveal ──────────────────────────────────────────────────────────────── */
/* One effect, applied once per section. It communicates "there is more below"
   and nothing else, which is the only job it has here. */
/* 🔴 The `.js-reveal` gate is load-bearing, not decoration.
   Nothing is hidden until js/main.js has run and confirmed it can also
   un-hide. Drop the gate and a missed observer notification, a script error
   or a blocked file leaves whole sections at opacity 0 forever. That
   happened in the first build of this page and was caught in review: three
   of nine sections stayed invisible after a full scroll. Read the comment in
   js/main.js before changing either half of this. */
@media (prefers-reduced-motion:no-preference){
  .js-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .js-reveal [data-reveal].is-in{opacity:1;transform:none}
}