/* =========================================================================
   ARABESQUE — Arabic Language Institute, Prague
   Design system & global styles
   Palette derived from the original site (deep burgundy, gold, brand green)
   ========================================================================= */

/* ---------- Design tokens ---------- */
:root{
  /* Brand palette — Barbie Pink · Sage Green · Sunflower Gold · Sky Blue
     Barbie Pink #ff0092 is the brand colour and carries every surface:
     buttons, the hero wash, page headers, glows and shadows.
     It has two limits, and the darker steps below exist because of them:
       - it cannot hold WHITE text (3.71), so bright-pink fills take a dark
         label, exactly as .btn--gold does for Sunflower Gold;
       - on paper it measures 3.59 — fine for large display headings
         (large-text AA is 3.0) but under the 4.5 small text needs, so
         captions, links and nav use --muted #a8005f (7.19) instead.
     Sunflower Gold / Sky Blue are background-only, always with dark text. */
  --burgundy-900:#6b003d;   /* deepest pink — body text, footer */
  --burgundy-800:#d6007b;   /* deep pink — headings, dark surfaces */
  --burgundy-700:#ff0092;   /* Barbie Pink — buttons, interactive */
  --burgundy-600:#ff0092;   /* gradient partner */
  --red-accent:#ff0092;     /* Barbie Pink — errors / "wrong" state */
  --gold:#ffc355;           /* Sunflower Gold */
  --gold-light:#ffc355;
  --gold-deep:#a8005f;      /* eyebrows / nav hover — small text, needs 4.5 */
  --green:#66a03d;          /* Sage Green — categorical chips */
  /* The same three tones as raw RGB triplets. Every gradient, veil and shadow
     is built from these, so re-toning the whole brand means changing only the
     numbers here. */
  --c700-rgb:255,0,146;      /* Barbie Pink — buttons, gradients, glows */
  --c800-rgb:214,0,123;      /* deep pink   — headings, dark surfaces */
  --c900-rgb:138,0,79;       /* deepest     — card veils, shadows */
  --green-deep:#66a03d;

  /* Named palette */
  --rusty:#ff0092;
  --rusty-dark:#d6007b;
  --rusty-darker:#6b003d;
  --pink:#ff0092;           /* Barbie Pink — vivid non-text accent */
  --sage:#66a03d;           /* Sage Green */
  --sunflower:#ffc355;      /* Sunflower Gold */
  --sky:#76c8f5;            /* Sky Blue */
  --crimson:#ff0092;
  --amethyst:#76c8f5;       /* CTA band is Sky Blue now (with dark text) */
  --amethyst-deep:#5fbdf3;
  --space:#d6007b;          /* footer / deep bands */
  --space-900:#6b003d;
  --apricot:#ffc355;
  --ok:#66a03d;             /* Sage Green — "correct" state */

  /* Warm "gold" whites — tints of Sunflower Gold instead of flat white, plus a
     metallic gradient used for the big headings. */
  --ivory:#fffaf1;          /* panels / cards */
  --ivory-lift:#fffdf8;     /* top of the card sheen */
  --warm-white:#fff6e8;     /* text on dark surfaces */
  --gold-shine:linear-gradient(105deg,#ffc355 0%,#fff1d2 30%,#ffc355 50%,#e8a83f 74%,#ffc355 100%);

  /* Neutrals — white + soft tints of Sky Blue */
  --paper:#f8fcff;          /* near-white, a whisper of Sky Blue */
  --cream:#eef7fe;
  --cream-2:#dceffb;
  --ink:#6b003d;            /* body text — 12.0:1 on paper */
  --ink-soft:#a8005f;
  --muted:#a8005f;
  --line:rgba(var(--c700-rgb),.18);

  /* Semantic */
  --bg:var(--paper);
  --text:var(--ink);

  /* Type — three families, no more:
       serif  = headings (elegant, gives the brand its character)
       sans   = body / UI
       arabic = Arabic script only */
  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --arabic:'Amiri','Noto Naskh Arabic',serif;

  /* Type sizes — three roles, no more:
     heading: the h-elements / display bits; scales a little per level
     body:    --fs-body  — paragraphs, buttons, inputs, nav
     small:   --fs-small — labels, captions, chips, meta */
  --fs-body:1rem;
  --fs-small:.82rem;

  /* Shared height for the header's Apply button + language switcher */
  --control-h:44px;
  /* Height reserved for the trust strip so it lands above the fold (set by JS) */
  --trust-h:0px;

  /* Spacing / shape */
  --container:1200px;
  --radius:14px;
  --radius-lg:22px;
  --shadow-sm:0 2px 10px rgba(var(--c900-rgb),.06);
  --shadow:0 18px 50px -22px rgba(var(--c900-rgb),.45);
  --shadow-lg:0 40px 90px -40px rgba(var(--c900-rgb),.6);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{
  font-family:var(--sans);
  background:transparent; /* the fixed photo layer below shows through */
  color:var(--text);
  line-height:1.7;
  font-size:var(--fs-body); /* single body size everywhere; headings scale on their own */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* ---------- Full-page photo texture ----------
   One straight photograph per page — never tiled or mirrored — sitting behind
   the content at 60%, so it reads as a real photograph rather than a tint.
   Note it composites against the near-white --paper canvas, so the number here
   is roughly how much photo you see: at .12 it was 88% white, which looked like
   a thick white sheet laid over the picture.
   This single opacity governs the background on every page — raise or lower it
   here and all six move together.
   position:fixed gives a calm parallax feel (and behaves better on iOS than
   background-attachment:fixed). z-index:-3 keeps it behind the hero photo too. */
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  opacity:.60;
}
body[data-page="home"]::before     {background-image:url("../assets/img/bg-home.jpg?v=3")}
body[data-page="courses"]::before  {background-image:url("../assets/img/bg-kurzy.jpg?v=3")}
body[data-page="shop"]::before     {background-image:url("../assets/img/bg-shop.jpg")}
body[data-page="gallery"]::before  {background-image:url("../assets/img/bg-galerie.jpg?v=3")}
body[data-page="apply"]::before    {background-image:url("../assets/img/bg-prihlaska.jpg?v=3")}
body[data-page="test"]::before     {background-image:url("../assets/img/bg-test.jpg?v=3")}
/* Respect users who ask for less motion — drop the parallax, keep the texture. */
@media (prefers-reduced-motion:reduce){body::before{position:absolute}}

img,picture,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:4px}
button,input,select,textarea{font:inherit;color:inherit}
ul{list-style:none;padding:0}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.12;letter-spacing:-.01em;color:var(--burgundy-800)}

/* Arabic / RTL */
html[dir="rtl"] body{font-family:var(--arabic)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,html[dir="rtl"] h4{font-family:var(--arabic)}
html[dir="rtl"] .eyebrow{letter-spacing:.06em}
[dir="rtl"] .reveal{transform:translateY(26px)}

/* ---------- Layout helpers ---------- */
.container{width:min(100% - 2.4rem,var(--container));margin-inline:auto}
.section{padding:clamp(4rem,9vw,8rem) 0;position:relative}
.section--tight{padding:clamp(3rem,6vw,5rem) 0}
.center{text-align:center}
.grid{display:grid;gap:1.6rem}

.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-small);
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);
  margin-bottom:1rem;
}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--gold)}
.center .eyebrow::after{content:"";width:26px;height:1px;background:var(--gold)}

.title{font-size:clamp(2rem,4.4vw,3.4rem);margin-bottom:1rem}
.subtitle{color:var(--ink-soft);max-width:62ch;font-size:var(--fs-body)}
.center .subtitle{margin-inline:auto}
.lead{font-size:var(--fs-body);color:var(--ink-soft)}

/* Decorative star divider */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.4rem 0;color:var(--pink)}
.ornament::before,.ornament::after{content:"";height:1px;width:min(120px,18vw);background:linear-gradient(90deg,transparent,var(--pink))}
.ornament::after{background:linear-gradient(270deg,transparent,var(--pink))}
.ornament svg{width:22px;height:22px}

/* ---------- Buttons ---------- */
.btn{
  --c:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.92em 1.7em;border-radius:999px;border:1px solid transparent;
  font-family:var(--sans);font-weight:600;font-size:var(--fs-body);letter-spacing:.01em;
  cursor:pointer;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
  position:relative;white-space:nowrap;
}
.btn svg{width:1.1em;height:1.1em}
.btn--primary{
  color:#fff;
  background:linear-gradient(135deg,#7a1257,#94206b);
  box-shadow:0 14px 30px -14px rgba(122,18,87,.55);
}
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 22px 40px -16px rgba(122,18,87,.62)}
.btn--gold{color:var(--ink);background:var(--sunflower)}
.btn--gold:hover{transform:translateY(-3px);box-shadow:0 20px 34px -16px rgba(var(--c700-rgb),.7)}
.btn--ghost{color:var(--burgundy-800);border-color:var(--line);background:rgba(255,255,255,.4)}
.btn--ghost:hover{border-color:var(--gold);background:var(--ivory);transform:translateY(-3px)}
.btn--light{color:var(--burgundy-800);background:var(--paper)}
.btn--light:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.btn--outline-light{color:#fff;border-color:rgba(255,255,255,.4)}
.btn--outline-light:hover{background:rgba(255,255,255,.12);border-color:#fff;transform:translateY(-3px);box-shadow:0 20px 34px -16px rgba(0,0,0,.55)}

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);
  padding:.5rem 0;
}
.site-header.scrolled{
  background:rgba(255,250,241,.92);backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line),0 18px 40px -34px rgba(var(--c900-rgb),.6);
}
.nav{display:flex;align-items:center;gap:1.4rem;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.7rem;flex-shrink:0}
.brand img{height:46px;width:auto;background:#fff;border-radius:8px;padding:3px 6px;box-shadow:var(--shadow-sm)}
/* Scales a little with the viewport so it can grow on desktop without crowding
   the hamburger on a narrow phone. */
.brand .brand-name{font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,.85rem + .8vw,1.42rem);color:var(--burgundy-800);line-height:1}
.brand .brand-sub{display:block;font-family:var(--sans);font-size:var(--fs-small);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.site-header:not(.scrolled) .brand-name{color:#fff}
/* Over the hero the header is transparent, so the brand sits straight on the
   photo and its gradient. Both lines need a tight dark shadow to carve them
   out, plus a wider soft one to lift the whole lockup — a single blurred
   shadow just makes them hazy.
   The sub-line previously kept --gold-deep here, which is a DARK tone meant
   for the ivory header: on a coloured hero it disappeared entirely. It now
   takes the light gold, the same colour the hero eyebrow already uses. */
.site-header:not(.scrolled):not(.solid) .brand-name{
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.45);
}
.site-header:not(.scrolled):not(.solid) .brand-sub{
  color:var(--gold-light);
  text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 10px rgba(0,0,0,.45);
}

.nav-links{display:flex;align-items:center;gap:.3rem}
.nav-links a{
  position:relative;padding:.55rem .85rem;border-radius:8px;font-weight:500;font-size:var(--fs-body);
  color:var(--ink-soft);transition:color .25s;
}
.site-header:not(.scrolled):not(.solid) .nav-links a{color:rgba(255,255,255,.86)}
.nav-links a::after{
  content:"";position:absolute;left:.85rem;right:.85rem;bottom:.32rem;height:1.5px;
  background:var(--pink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease);
}
.nav-links a:hover,.nav-links a.active{color:var(--gold-deep)}
.site-header:not(.scrolled):not(.solid) .nav-links a:hover{color:#fff}
.nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1)}

.nav-right{display:flex;align-items:center;gap:.8rem}
.nav-cta-mobile{display:none}

/* Language switcher */
.lang{position:relative}
.lang-btn{
  display:flex;align-items:center;gap:.4rem;background:transparent;border:1px solid var(--line);
  padding:.45rem .7rem;border-radius:999px;cursor:pointer;font-size:var(--fs-body);font-weight:600;color:var(--ink-soft);
  transition:border-color .25s,color .25s,background .25s;
}
.site-header:not(.scrolled):not(.solid) .lang-btn{border-color:rgba(255,255,255,.35);color:#fff}
.lang-btn:hover{border-color:var(--gold)}
/* Apply button + language switcher: same size (not same styling) */
.nav-apply,.lang-btn{min-height:var(--control-h);padding-block:0}
.lang-btn svg{width:1em;height:1em;transition:transform .3s}
.lang.open .lang-btn svg{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + .5rem);inset-inline-end:0;min-width:150px;
  background:var(--ivory);border-radius:12px;box-shadow:var(--shadow);border:1px solid var(--line);
  padding:.4rem;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.28s var(--ease);z-index:5;
}
.lang.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu button{
  width:100%;display:flex;align-items:center;gap:.6rem;background:transparent;border:0;
  padding:.55rem .7rem;border-radius:8px;cursor:pointer;font-size:var(--fs-body);font-weight:500;text-align:start;color:var(--ink-soft)
}
.lang-menu button .flag{font-size:var(--fs-body)}
.lang-menu button:hover{background:var(--cream)}
.lang-menu button[aria-current="true"]{color:var(--muted);font-weight:700;background:var(--cream)}

/* Mobile toggle */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:transparent;border:0;cursor:pointer;padding:.4rem;z-index:70}
.nav-toggle span{width:26px;height:2px;background:var(--burgundy-800);border-radius:2px;transition:.3s var(--ease)}
.site-header:not(.scrolled):not(.solid) .nav-toggle span{background:#fff}
body.nav-open .nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span:nth-child(2){opacity:0}
body.nav-open .nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--trust-h));display:flex;align-items:center;color:#fff;overflow:hidden}
.hero__media{position:absolute;inset:0;z-index:-2}
/* The source photo carries a dead strip of dark background down its right edge.
   On wide screens `cover` crops vertically only, so the whole photo width shows
   and that strip reads as an empty band beside her — overflowing the image a few
   percent past the hero clips it off and brings her up to the edge. */
.hero__media img{width:106%;max-width:none;height:100%;object-fit:cover;object-position:30% center}
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(105deg,rgba(var(--c800-rgb),.70) 0%,rgba(var(--c700-rgb),.40) 40%,rgba(var(--c700-rgb),.10) 66%,rgba(var(--c700-rgb),0) 90%),
    linear-gradient(0deg,rgba(var(--c800-rgb),.42),transparent 40%);
}
/* Arabic is simply the LTR hero mirrored. Flipping the whole media layer takes
   the photo and its scrim together, so the composition matches the other
   languages exactly instead of needing its own hand-tuned framing. */
html[dir="rtl"] .hero__media{transform:scaleX(-1)}
.hero__inner{padding-top:7rem;padding-bottom:3rem;max-width:680px;position:relative}
.hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1.04;margin-bottom:1.3rem}
/* Shiny gold display headings. The flat colour is the fallback for browsers
   that do not support background-clip:text. */
.hero h1,.page-hero h1{
  color:var(--sunflower);
  background:var(--gold-shine);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1 .accent{-webkit-text-fill-color:transparent;font-style:italic}
.hero h1 .accent{color:var(--gold-light);font-style:italic}
.hero .eyebrow{color:var(--gold-light)}
.hero .eyebrow::before{background:var(--gold-light)}
.hero p.lead{color:var(--warm-white);max-width:54ch;margin-bottom:2rem}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.hero__arabic{
  font-family:var(--arabic);font-size:2.4rem;color:var(--gold-light);opacity:.92;
  margin-bottom:.4rem;direction:rtl;
}
.hero__stats{display:flex;gap:2.4rem;margin-top:3rem;flex-wrap:wrap}
.hero__stats .num{font-family:var(--serif);font-size:2.2rem;color:var(--gold-light);font-weight:700;line-height:1}
.hero__stats .lbl{font-size:var(--fs-small);color:rgba(255,255,255,.75);letter-spacing:.04em}
.scroll-cue{position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:var(--fs-small);letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.5rem}
.scroll-cue .mouse{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.5);border-radius:14px;position:relative}
.scroll-cue .mouse::after{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:3px;height:7px;background:var(--gold-light);border-radius:2px;animation:scrollDot 1.8s var(--ease) infinite}
@keyframes scrollDot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,10px)}}

/* Arabesque pattern background
   The tiled SVG overlay this class once drew was replaced by the full-page
   photo texture; only the stacking context is still needed. */
.pattern-bg{position:relative}
.pattern-bg>*{position:relative;z-index:1}

/* ---------- Trust strip ---------- */
.trust{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));color:var(--ink-soft);border-block:1px solid var(--line)}
.trust .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1.4rem 2rem;align-items:center;padding:1.6rem 0}
.trust .item{display:flex;align-items:center;gap:.7rem;font-size:var(--fs-body)}
.trust .item svg{width:1.5rem;height:1.5rem;color:var(--rusty);flex-shrink:0}
.trust .item strong{font-family:var(--serif);font-size:1.05rem;color:var(--ink)}

/* ---------- Cards / Courses ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.6rem}
.card{
  background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;
  display:flex;flex-direction:column;box-shadow:var(--shadow-sm);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
  position:relative;
}
.card:hover{transform:translateY(-8px);box-shadow:var(--shadow);border-color:rgba(201,162,74,.5)}
.card__media{aspect-ratio:16/10;overflow:hidden;position:relative}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.card:hover .card__media img{transform:scale(1.07)}
.card__icon{
  width:54px;height:54px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--cream),#fff);border:1px solid var(--line);color:var(--burgundy-700);
}
.card__icon svg{width:26px;height:26px}
.card__body{padding:1.6rem;display:flex;flex-direction:column;gap:.7rem;flex:1}
.card__body h3{font-size:1.4rem;color:var(--burgundy-800)}
.card__tag{position:absolute;top:1rem;inset-inline-start:1rem;background:rgba(var(--c900-rgb),.82);color:#fff;font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;backdrop-filter:blur(4px)}
/* Gold badge with dark text — white on Sunflower Gold is unreadable (1.6:1). */
.card__tag--gold{background:var(--sunflower);color:var(--ink)}
.card p{color:var(--ink-soft);font-size:var(--fs-body)}
.card__link{margin-top:auto;display:inline-flex;align-items:center;gap:.45rem;color:var(--muted);font-weight:600;font-size:var(--fs-body)}
.card__link svg{width:1em;height:1em;transition:transform .3s}
[dir="rtl"] .card__link svg{transform:scaleX(-1)}
.card:hover .card__link svg{transform:translateX(4px)}
[dir="rtl"] .card:hover .card__link svg{transform:scaleX(-1) translateX(4px)}

/* Course-style cards (icon header, no image) */
.course-card{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;display:flex;flex-direction:column;gap:1rem;box-shadow:var(--shadow-sm);transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;position:relative;overflow:hidden}
.course-card::before{content:"";position:absolute;top:0;inset-inline-start:0;height:4px;width:100%;background:linear-gradient(90deg,var(--pink),var(--sunflower));transform:scaleX(0);transform-origin:inline-start;transition:transform .5s var(--ease)}
.course-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(201,162,74,.4)}
.course-card:hover::before{transform:scaleX(1)}
/* Cormorant is a high-contrast serif — its thin strokes disappear against a
   photo, so course titles carry the heaviest weight the family is loaded at. */
.course-card h3{font-size:1.35rem;font-weight:700}

/* ---------- Course cards with a photograph ----------
   The photo fills the card and a warm Rusty veil sits over it so the white
   text keeps its contrast whatever the picture looks like. The veil deepens
   toward the bottom, where the chips, price and link sit. */
.course-card--photo{
  /* Light enough that the photograph is genuinely visible, deepening toward the
     bottom where the chips and link sit. The text carries its own soft shadow
     so it stays crisp over whatever part of the picture falls behind it. */
  /* the image + veil are set inline by js/data.js (path must resolve against
     the page, not this stylesheet) */
  background-size:cover;background-position:center;
  border-color:transparent;
}
.course-card--photo h3,
.course-card--photo p,
.course-card--photo .course-price,
.course-card--photo .course-times,
.course-card--photo .card__link{text-shadow:0 1px 4px rgba(40,16,0,.55)}
/* The title needs a heavier halo than the body copy: a tight dark shadow to
   carve the letterforms off the photo, plus a wider soft one to lift the whole
   word. Overrides the shared .course-card--photo text-shadow above. */
.course-card--photo h3{
  color:var(--sunflower);
  text-shadow:0 1px 2px rgba(40,16,0,.9),0 3px 12px rgba(40,16,0,.75);
}
.course-card--photo p{color:var(--warm-white)}
.course-card--photo .course-price{color:var(--sunflower)}
.course-card--photo .course-times{color:rgba(255,255,255,.85)}
.course-card--photo .card__link{color:var(--sunflower)}
.course-card--photo .card__link:hover{color:#fff}
/* Chips need to read on the photo instead of on white */
.course-card--photo .chip{
  background:rgba(255,255,255,.16);color:#fff;border-color:rgba(255,255,255,.42);
  backdrop-filter:blur(2px);
}
.course-card--photo .chip--gold{background:rgba(255,195,85,.30);border-color:rgba(255,195,85,.75);color:#fff}
.course-card--photo .chip--green{background:rgba(102,160,61,.34);border-color:rgba(102,160,61,.8);color:#fff}
/* Lift a little more on hover so the photo feels alive */
.course-card--photo:hover{box-shadow:var(--shadow-lg)}
/* No margin-top:auto here — .card__link already pushes itself to the bottom,
   and price/times now sit between the chips and the link. */
.course-card .meta{display:flex;flex-wrap:wrap;gap:.5rem}

/* Price + times on a course card (both optional — hidden when empty) */
.course-price{font-weight:700;color:var(--burgundy-800);font-size:1.05rem}
.course-times{font-size:var(--fs-small);color:var(--ink-soft)}

.chip{font-size:var(--fs-small);font-weight:600;letter-spacing:.03em;padding:.32rem .7rem;border-radius:999px;background:rgba(118,200,245,.22);color:var(--ink);border:1px solid rgba(118,200,245,.5)}
.chip--green{background:rgba(102,160,61,.20);color:var(--ink);border-color:rgba(102,160,61,.5)}
.chip--gold{background:rgba(255,195,85,.35);color:var(--ink);border-color:rgba(255,195,85,.7)}

/* ---------- Feature list ---------- */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.6rem}
.feature{display:flex;gap:1rem;align-items:flex-start}
.feature .ic{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex-shrink:0;background:linear-gradient(135deg,var(--burgundy-700),var(--gold));color:#fff}
.feature .ic svg{width:24px;height:24px}
.feature h3{font-size:1.2rem;margin-bottom:.3rem}
.feature p{font-size:var(--fs-body);color:var(--ink-soft)}

/* ---------- Split / About ---------- */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.split--reverse{direction:rtl}
.split--reverse>*{direction:ltr}
html[dir="rtl"] .split--reverse{direction:ltr}
html[dir="rtl"] .split--reverse>*{direction:rtl}
.split__media{position:relative}
.split__media img{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:100%;aspect-ratio:4/5;object-fit:cover}
.split__media .badge{
  position:absolute;inset-inline-end:-1.2rem;bottom:-1.2rem;background:var(--ivory);border-radius:var(--radius);
  padding:1.1rem 1.4rem;box-shadow:var(--shadow);border:1px solid var(--line);max-width:230px;
}
.split__media .badge .num{font-family:var(--serif);font-size:1.9rem;color:var(--muted);font-weight:700;line-height:1}
.split__media .badge .lbl{font-size:var(--fs-small);color:var(--ink-soft)}
.split__media::before{content:"";position:absolute;inset:-1.2rem auto auto -1.2rem;width:120px;height:120px;border:2px solid var(--gold);border-radius:var(--radius-lg);z-index:-1}

.check-list{display:grid;gap:.9rem;margin-top:1.4rem}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;color:var(--ink-soft)}
.check-list svg{width:1.4rem;height:1.4rem;color:var(--green);flex-shrink:0;margin-top:.15rem}

/* ---------- Dark section ---------- */
.dark{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));color:var(--ink-soft);position:relative;overflow:hidden;border-block:1px solid var(--line)}
.dark h2,.dark h3{color:var(--burgundy-800)}
.dark .subtitle,.dark p{color:var(--ink-soft)}
.dark .eyebrow{color:var(--rusty)}
.dark .eyebrow::before,.dark .center .eyebrow::after{background:var(--sunflower)}
.dark::after{
  content:"";position:absolute;inset:0;opacity:.06;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='%23ffc355' stroke-width='1'%3E%3Cpath d='M40 0l40 40-40 40L0 40z'/%3E%3Cpath d='M40 16l24 24-24 24-24-24z'/%3E%3C/g%3E%3C/svg%3E");
}
.dark .container{position:relative;z-index:1}

/* Stat blocks on dark */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1.4rem;text-align:center}
.stats-row .stat .num{font-family:var(--serif);font-size:clamp(2.4rem,5vw,3.4rem);color:var(--gold-light);font-weight:700;line-height:1}
.stats-row .stat .lbl{font-size:var(--fs-small);color:rgba(255,255,255,.78);margin-top:.4rem}

/* ---------- Testimonials ---------- */
.quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.quote{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.8rem;box-shadow:var(--shadow-sm);position:relative}
.quote .stars{color:var(--gold);letter-spacing:2px;margin-bottom:.7rem}
.quote p{font-family:var(--serif);font-size:1.18rem;font-style:italic;color:var(--ink);line-height:1.5}
.quote .who{display:flex;align-items:center;gap:.8rem;margin-top:1.2rem}
.quote .av{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--burgundy-700),var(--gold));color:#fff;display:grid;place-items:center;font-weight:700;font-family:var(--serif)}
.quote .who .name{font-weight:600;color:var(--burgundy-800);font-size:var(--fs-body)}
.quote .who .role{font-size:var(--fs-small);color:var(--muted)}

/* ---------- Gallery ---------- */
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;grid-auto-flow:dense}
.gallery-grid .g-item{position:relative;overflow:hidden;border-radius:var(--radius);cursor:pointer;background:var(--cream-2)}
.gallery-grid .g-item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gallery-grid .g-item::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(var(--c800-rgb),.5),transparent 55%);opacity:0;transition:opacity .4s}
.gallery-grid .g-item:hover img{transform:scale(1.08)}
.gallery-grid .g-item:hover::after{opacity:1}
.gallery-grid .g-item .zoom{position:absolute;inset-inline-end:.8rem;bottom:.8rem;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.9);display:grid;place-items:center;color:var(--burgundy-700);opacity:0;transform:translateY(8px);transition:.35s var(--ease)}
.gallery-grid .g-item:hover .zoom{opacity:1;transform:translateY(0)}
.gallery-grid .tall{grid-row:span 2}
.gallery-grid .wide{grid-column:span 2}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:120;background:rgba(28,9,9,.94);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.35s var(--ease);padding:2rem}
.lightbox.open{opacity:1;visibility:visible}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:10px;box-shadow:var(--shadow-lg);transform:scale(.96);transition:transform .4s var(--ease)}
.lightbox.open img{transform:scale(1)}
.lightbox .lb-close,.lightbox .lb-nav{position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .25s}
.lightbox .lb-close:hover,.lightbox .lb-nav:hover{background:rgba(255,255,255,.28)}
.lightbox .lb-close{top:1.4rem;inset-inline-end:1.4rem}
.lightbox .lb-nav.prev{inset-inline-start:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox .lb-nav.next{inset-inline-end:1.4rem;top:50%;transform:translateY(-50%)}
.lightbox svg{width:22px;height:22px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));color:var(--ink);border-radius:var(--radius-lg);padding:clamp(2.6rem,5vw,4rem);text-align:center;position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
/* A single fine line of colour instead of a slab of paint. */
.cta-band::after{content:"";position:absolute;top:0;inset-inline:0;height:3px;
  background:linear-gradient(90deg,var(--sunflower),var(--pink),var(--sky),var(--sage));border-radius:0}
.cta-band h2{color:var(--ink);font-size:clamp(1.9rem,4vw,3rem)}
.cta-band p{color:var(--ink-soft);max-width:55ch;margin:1rem auto 1.8rem}
.cta-band .hero__arabic{margin-inline:auto;font-size:1.8rem;color:var(--rusty)}
/* Ghost buttons on the now-white CTA band / contact section */
.cta-band .btn--outline-light,
.dark .btn--outline-light{color:var(--rusty);border-color:var(--line);background:var(--ivory)}
.cta-band .btn--outline-light:hover,
.dark .btn--outline-light:hover{background:var(--cream);border-color:var(--rusty);color:var(--rusty)}
.dark .hero__arabic{color:var(--rusty)}
/* Contact list icons + check marks were tuned for a dark panel */
.dark .check-list svg{stroke:var(--rusty)}
.dark .check-list span{color:var(--ink-soft)!important}
.dark .check-list strong{color:var(--burgundy-800)!important}
.dark a{color:var(--rusty)}
.cta-band::before{content:none}
/* decorative ring removed — the fine gradient line above is the only accent */
.cta-actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- Forms ---------- */
.form-card{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.6rem);box-shadow:var(--shadow)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.field{display:flex;flex-direction:column;gap:.45rem}
.field.full{grid-column:1/-1}
.field label{font-size:var(--fs-small);font-weight:600;color:var(--burgundy-800)}
.field label .req{color:var(--red-accent)}
.field input,.field select,.field textarea{
  background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:.85rem 1rem;
  font-size:var(--fs-body);color:var(--ink);transition:border-color .25s,box-shadow .25s,background .25s;width:100%;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(201,162,74,.16);background:#fff}
.field input.invalid,.field select.invalid,.field textarea.invalid{border-color:var(--red-accent);box-shadow:0 0 0 4px rgba(178,58,48,.12)}
.field .err{font-size:var(--fs-small);color:var(--red-accent);min-height:1em}
.form-note{font-size:var(--fs-small);color:var(--muted);margin-top:.4rem}
.form-success{display:none;text-align:center;padding:2rem 1rem}
.form-success.show{display:block;animation:fadeUp .5s var(--ease)}
.form-success .ic{width:72px;height:72px;border-radius:50%;background:rgba(63,122,68,.12);color:var(--green);display:grid;place-items:center;margin:0 auto 1.2rem}
.form-success .ic svg{width:38px;height:38px}

/* ---------- Quiz ---------- */
.quiz-card{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden}
.quiz-head{background:linear-gradient(135deg,var(--burgundy-800),var(--burgundy-900));color:#fff;padding:1.6rem clamp(1.4rem,4vw,2.4rem)}
.quiz-head .bar{height:7px;border-radius:999px;background:rgba(255,255,255,.18);margin-top:1rem;overflow:hidden}
.quiz-head .bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-light),var(--gold));border-radius:999px;transition:width .5s var(--ease)}
.quiz-head .q-count{font-size:var(--fs-small);color:rgba(255,255,255,.8);letter-spacing:.05em}
.quiz-body{padding:clamp(1.6rem,4vw,2.6rem)}
.quiz-q{font-family:var(--serif);font-size:clamp(1.4rem,3vw,2rem);color:var(--burgundy-800);margin-bottom:.4rem}
.quiz-q .ar{font-family:var(--arabic);font-size:2.6rem;direction:rtl;display:block;margin:.6rem 0;color:var(--ink)}
.quiz-options{display:grid;gap:.8rem;margin-top:1.4rem}
.quiz-opt{
  display:flex;align-items:center;gap:.9rem;padding:1rem 1.2rem;border:1.5px solid var(--line);border-radius:12px;
  background:var(--paper);cursor:pointer;transition:.25s var(--ease);font-size:var(--fs-body);text-align:start;width:100%;
}
.quiz-opt .key{width:30px;height:30px;border-radius:8px;background:var(--cream);display:grid;place-items:center;font-weight:700;color:var(--burgundy-700);flex-shrink:0;font-size:var(--fs-small);transition:.25s}
.quiz-opt:hover:not(:disabled){border-color:var(--gold);transform:translateX(4px)}
[dir="rtl"] .quiz-opt:hover:not(:disabled){transform:translateX(-4px)}
.quiz-opt.correct{border-color:var(--ok);background:rgba(47,125,79,.08)}
.quiz-opt.correct .key{background:var(--ok);color:#fff}
.quiz-opt.wrong{border-color:var(--red-accent);background:rgba(178,58,48,.07)}
.quiz-opt.wrong .key{background:var(--red-accent);color:#fff}
.quiz-opt .ar-opt{font-family:var(--arabic);direction:rtl;font-size:1.45rem;line-height:1.5;flex:1;text-align:right}
.quiz-foot{display:flex;justify-content:space-between;align-items:center;margin-top:1.6rem;gap:1rem;flex-wrap:wrap}
.quiz-result{text-align:center;padding:1rem}
.quiz-score{font-family:var(--serif);font-size:clamp(3rem,8vw,5rem);color:var(--burgundy-700);font-weight:700;line-height:1}
.score-ring{width:170px;height:170px;margin:0 auto 1.4rem;position:relative}
.score-ring svg{transform:rotate(-90deg)}
.score-ring .label{position:absolute;inset:0;display:grid;place-content:center;text-align:center}

/* ---------- Footer ---------- */
.site-footer{background:var(--space);color:rgba(255,255,255,.72);padding-top:clamp(3rem,6vw,5rem)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.4rem;padding-bottom:3rem}
.site-footer h4{color:var(--sunflower);font-size:1.05rem;margin-bottom:1.1rem;letter-spacing:.02em}
.site-footer a{transition:color .25s}
.site-footer a:hover{color:var(--gold-light)}
/* width:auto is essential here: the markup carries width="210" height="122"
   attributes (they reserve the right space during load), so setting only the
   height left the width pinned at 210px and squashed the logo to 210x54 —
   aspect 3.89 against the artwork's true 1.72. The header logo has always had
   width:auto, which is why it looked right and this one did not. */
.footer-brand img{height:88px;width:auto;background:#fff;border-radius:10px;padding:7px 11px;margin-bottom:1.1rem}
.footer-brand p{font-size:var(--fs-body);max-width:34ch}
.footer-links li{margin-bottom:.6rem;font-size:var(--fs-body)}
.footer-contact li{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.8rem;font-size:var(--fs-body)}
.footer-contact svg{width:1.1rem;height:1.1rem;color:var(--gold);flex-shrink:0;margin-top:.25rem}
.footer-social{display:flex;gap:.7rem;margin-top:1.2rem}
.footer-social a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;transition:.3s}
.footer-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink);transform:translateY(-3px)}
.footer-social svg{width:18px;height:18px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:1.4rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:var(--fs-small);color:rgba(255,255,255,.5)}

/* ---------- Page hero (interior pages) ---------- */
.page-hero{background:linear-gradient(160deg,var(--burgundy-800),var(--burgundy-900));color:#fff;padding:9rem 0 4rem;position:relative;overflow:hidden}

/* ---------- Photo backgrounds for the sub-page headers ----------
   Each page carries its own photo behind the title band. The crimson
   gradient stays ON TOP of the photo so the white heading, breadcrumb and
   lead text keep their contrast no matter how busy the picture is.
   The gradient is strongest on the start edge, where the text sits. */
.page-hero--photo{background-size:cover;background-position:center;background-repeat:no-repeat}
body[data-page="courses"]   .page-hero,
body[data-page="shop"]      .page-hero,
body[data-page="gallery"]   .page-hero,
body[data-page="apply"]     .page-hero,
body[data-page="test"]      .page-hero{
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
body[data-page="courses"] .page-hero{
  background-image:linear-gradient(100deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-kurzy.jpg");
}
body[data-page="shop"] .page-hero{
  background-image:linear-gradient(100deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-shop.jpg");
}
body[data-page="gallery"] .page-hero{
  background-image:linear-gradient(100deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-galerie.jpg");
}
body[data-page="apply"] .page-hero{
  background-image:linear-gradient(100deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-prihlaska.jpg");
}
body[data-page="test"] .page-hero{
  background-image:linear-gradient(100deg,rgba(var(--c800-rgb),.95) 0%,rgba(var(--c700-rgb),.88) 46%,rgba(var(--c800-rgb),.72) 100%),url("../assets/img/hdr-test.jpg");
}
/* In Arabic the text sits on the right, so mirror the gradient. */
html[dir="rtl"] body[data-page="courses"] .page-hero,
html[dir="rtl"] body[data-page="shop"] .page-hero,
html[dir="rtl"] body[data-page="gallery"] .page-hero,
html[dir="rtl"] body[data-page="apply"] .page-hero,
html[dir="rtl"] body[data-page="test"] .page-hero{background-position:center}
html[dir="rtl"] body[data-page="courses"] .page-hero{
  background-image:linear-gradient(260deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-kurzy.jpg");
}
html[dir="rtl"] body[data-page="shop"] .page-hero{
  background-image:linear-gradient(260deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-shop.jpg");
}
html[dir="rtl"] body[data-page="gallery"] .page-hero{
  background-image:linear-gradient(260deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-galerie.jpg");
}
html[dir="rtl"] body[data-page="apply"] .page-hero{
  background-image:linear-gradient(260deg,rgba(var(--c800-rgb),.90) 0%,rgba(var(--c700-rgb),.68) 45%,rgba(var(--c800-rgb),.38) 100%),url("../assets/img/hdr-prihlaska.jpg");
}
html[dir="rtl"] body[data-page="test"] .page-hero{
  background-image:linear-gradient(260deg,rgba(var(--c800-rgb),.95) 0%,rgba(var(--c700-rgb),.88) 46%,rgba(var(--c800-rgb),.72) 100%),url("../assets/img/hdr-test.jpg");
}
/* The header already shows its photograph full-strength — no extra pattern. */
.page-hero::after{content:none}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-size:clamp(2.2rem,5vw,3.6rem)}
.page-hero p{color:rgba(255,246,232,.88);max-width:60ch;margin-top:.8rem}
.breadcrumb{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-small);color:rgba(255,255,255,.6);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--gold-light)}
.breadcrumb svg{width:.9em;height:.9em}
[dir="rtl"] .breadcrumb svg{transform:scaleX(-1)}

/* ---------- Filter pills ---------- */
.filter-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:2.4rem}
.filter-pill{padding:.55rem 1.2rem;border-radius:999px;border:1px solid var(--line);background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));cursor:pointer;font-size:var(--fs-body);font-weight:600;color:var(--ink-soft);transition:.3s var(--ease)}
.filter-pill:hover{border-color:var(--gold)}
.filter-pill.active{background:linear-gradient(135deg,var(--burgundy-700),var(--burgundy-600));color:#fff;border-color:transparent}

/* ---------- Accordion (conditions / FAQ) ---------- */
.accordion{display:grid;gap:.8rem;max-width:820px;margin-inline:auto}
.acc-item{background:linear-gradient(180deg,var(--ivory-lift),var(--ivory));border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.acc-q{display:flex;justify-content:space-between;align-items:center;gap:1rem;width:100%;background:transparent;border:0;padding:1.2rem 1.4rem;cursor:pointer;text-align:start;font-family:var(--serif);font-size:1.2rem;color:var(--burgundy-800);font-weight:600}
.acc-q .pm{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--cream);display:grid;place-items:center;color:var(--burgundy-700);transition:.3s}
.acc-item.open .acc-q .pm{background:var(--burgundy-700);color:#fff;transform:rotate(45deg)}
.acc-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)}
.acc-a .inner{padding:0 1.4rem 1.3rem;color:var(--ink-soft)}

/* ---------- Map ---------- */
.map-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--line);min-height:380px}
.map-wrap iframe{width:100%;height:100%;min-height:380px;border:0;display:block;filter:saturate(.9)}

/* ---------- Reveal animations ---------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
/* Gallery tiles fade in one by one rather than as a single slab. A whole row
   crosses the trigger line together, so the delay ripples across the columns
   (the grid is auto-fit, so the period is the widest column count — on narrower
   screens the tiles simply arrive separately anyway). */
.gallery-grid .g-item:nth-child(5n+2){transition-delay:.06s}
.gallery-grid .g-item:nth-child(5n+3){transition-delay:.12s}
.gallery-grid .g-item:nth-child(5n+4){transition-delay:.18s}
.gallery-grid .g-item:nth-child(5n+5){transition-delay:.24s}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}

/* ---------- Misc ---------- */
.section-head{max-width:680px;margin-bottom:2.8rem}
.center.section-head{margin-inline:auto}

/* ---------- Readability panels on the page photo ----------
   With the full-page photograph at 60%, dark type laid straight onto it loses
   contrast. The three blocks that sit directly on the photo — section headings,
   the text column of a split, and the feature list — get a soft ivory panel:
   the type regains card-level contrast while the photograph stays fully visible
   in the margins, in the gaps between panels and behind every image.
   Sections that carry their own opaque background (#about, .dark) are excluded:
   there is no photo behind them for the type to fight with. */
.section-head,
.split > div:not(.split__media),
.feature{
  background:rgba(255,250,241,.82);
  -webkit-backdrop-filter:blur(8px);
  backdrop-filter:blur(8px);
  border:1px solid rgba(var(--c700-rgb),.10);
  border-radius:var(--radius-lg);
  padding:clamp(1.3rem,2.6vw,2rem);
}
#about .split > div:not(.split__media),
.dark .section-head,
.dark .split > div:not(.split__media),
.dark .feature{
  background:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;
  border:0;padding:0;
}
.text-gold{color:var(--gold-deep)}
.mb0{margin-bottom:0}
.divider-soft{height:1px;background:var(--line);border:0;margin:0}
[hidden]{display:none!important}

/* Toast */
.toast{position:fixed;inset-block-end:1.4rem;inset-inline:0;margin-inline:auto;width:max-content;max-width:90vw;background:var(--ink);color:#fff;padding:.9rem 1.4rem;border-radius:999px;box-shadow:var(--shadow-lg);font-size:var(--fs-body);z-index:200;opacity:0;transform:translateY(20px);transition:.4s var(--ease);pointer-events:none}
.toast.show{opacity:1;transform:none}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:2.4rem}
  .split--reverse{direction:ltr}
  .split__media{max-width:480px;margin-inline:auto;width:100%}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .nav-apply{display:none}
  .nav-cta-mobile{display:block}
  .split[style]{grid-template-columns:1fr!important}
  .nav-links{
    position:fixed;inset:0 0 0 auto;width:min(82vw,360px);height:100dvh;background:var(--paper);
    flex-direction:column;justify-content:flex-start;gap:.3rem;padding:6rem 1.6rem 2rem;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .45s var(--ease);align-items:stretch;
  }
  [dir="rtl"] .nav-links{inset:0 auto 0 0;transform:translateX(-100%)}
  body.nav-open .nav-links{transform:translateX(0)}
  .nav-links a{color:var(--ink-soft);padding:.9rem 1rem;font-size:var(--fs-body);border-bottom:1px solid var(--line)}
  .site-header:not(.scrolled):not(.solid) .nav-links a{color:var(--ink-soft)}
  .nav-links a::after{display:none}
  .nav-overlay{position:fixed;inset:0;background:rgba(28,9,9,.5);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.4s;z-index:55}
  body.nav-open .nav-overlay{opacity:1;visibility:visible}
  .form-grid{grid-template-columns:1fr}
  .hero__stats{gap:1.6rem}
  /* The trust strip wraps to several rows here; trim hero padding so it still
     fits above the fold rather than being pushed off-screen by hero content. */
  .hero__inner{padding-top:6rem;padding-bottom:2rem}
  /* A phone screen is itself portrait, so the photo fills it edge to edge with
     almost no crop — no mask needed, the scrim below carries the text. */
  .hero__media img{
    width:100%;max-width:none;object-fit:cover;object-position:50% 16%;
  }
  .hero__media::after{
    background:
      linear-gradient(0deg,rgba(var(--c800-rgb),.80),rgba(var(--c800-rgb),.30) 46%,transparent 100%),
      linear-gradient(100deg,rgba(var(--c800-rgb),.62),transparent 62%);
  }
}
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .trust .container{justify-content:flex-start}
  .gallery-grid .wide{grid-column:span 1}
  .hero__actions{flex-direction:column;align-items:stretch}
  /* Stacked buttons reach the hero's bottom edge, where the cue would sit on
     top of them — and the trust strip below already shows there's more page. */
  .scroll-cue{display:none}
  /* Narrow phones crop the hero hard horizontally — re-focus on her face */
  /* Narrow screens crop the wide hero hard: pull the framing right so Chima is
     actually in shot, and darken the veil downward so the text over her stays
     readable. */
  .hero__media img{object-position:70% center}
  .hero__media::after{
    background:
      linear-gradient(180deg,rgba(var(--c800-rgb),.30) 0%,rgba(var(--c800-rgb),.66) 42%,rgba(var(--c900-rgb),.86) 100%);
  }
  .hero__actions .btn{width:100%}
}