/* ==========================================================================
   福建名匠世家名表维修 — Global Stylesheet
   Design language: precision-instrument dark navy + brass/gold accent.
   Edit the tokens below to re-skin the whole site.
   ========================================================================== */

:root {
  /* Brand palette */
  --ink:        #0B1220;
  --ink-2:      #131C2E;
  --ink-3:      #1D2941;
  --gold:       #C9A227;
  --gold-2:     #E3C766;
  --gold-soft:  #F3E9CB;
  /* Gold for TEXT on the light surfaces. --gold measures 2.42:1 on --paper and
     2.22:1 on --paper-2, both well under AA for body text; --gold-2 is only
     correct on the dark bands, where it reads 7.4:1. This is the same dark gold
     .card__icon and the checklist tick already use, so it extends the palette
     rather than adding a colour. Keep --gold itself for decorative fills,
     borders and the button gradient. */
  --gold-ink:   #7A5E0C;
  --paper:      #FFFFFF;
  --paper-2:    #F7F5F0;
  --paper-3:    #EFEBE1;
  --line:       #E2DCCE;
  --line-dark:  rgba(255,255,255,.12);
  --text:       #1B2434;
  --text-soft:  #5A6577;
  --text-inv:   #F4F6FA;
  --text-inv-soft: #A9B4C6;
  /* The savings figure sits on --gold-soft in the price table; the original
     #1F7A5A measured 4.34:1 there, just under AA. */
  --success:    #1B6E50;
  --danger:     #B4322B;

  /* Type */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-ar: "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  /* The wordmark is Chinese in every language, and Playfair Display has no
     CJK glyphs - it would fall straight through to the generic serif. Put a
     song-style face next in the stack so Latin still gets Playfair and the
     Chinese gets a serif of matching weight and colour. */
  --font-brand: "Playfair Display", "SimSun", "Songti SC", "Noto Serif CJK SC", serif;

  /* Layout */
  --wrap: 1180px;
  --wrap-narrow: 820px;
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-sm: 0 1px 2px rgba(11,18,32,.06), 0 1px 3px rgba(11,18,32,.05);
  --shadow:    0 4px 16px rgba(11,18,32,.08);
  --shadow-lg: 0 18px 48px rgba(11,18,32,.14);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------- Reset -- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.18; font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-inline-start: 1.2em; }
li { margin-bottom: .4em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
::selection { background: var(--gold-2); color: var(--ink); }

/* Arabic / RTL adjustments */
html[dir="rtl"] body { font-family: var(--font-ar); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { font-family: var(--font-ar); letter-spacing: 0; }
html[dir="rtl"] .eyebrow { letter-spacing: .04em; }

/* -------------------------------------------------------------- Layout -- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 22px; }
.wrap-narrow { max-width: var(--wrap-narrow); }
section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint  { background: var(--paper-2); }
.section--dark  { background: var(--ink); color: var(--text-inv); }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.grid { display: grid; gap: 26px; }
.g-2 { grid-template-columns: repeat(2, 1fr); }
.g-3 { grid-template-columns: repeat(3, 1fr); }
.g-4 { grid-template-columns: repeat(4, 1fr); }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* ------------------------------------------------------------ Typography */
.eyebrow {
  display: inline-block;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: .9rem;
}
html[dir="rtl"] .eyebrow { text-transform: none; }
/* The dark bands keep the bright gold - that is the correct choice there, and
   it is where the accent is meant to glow. */
.section--dark .eyebrow,
.section--dark .course__tier { color: var(--gold-2); }
.lede { font-size: clamp(1.02rem, 1.6vw, 1.16rem); color: var(--text-soft); max-width: 62ch; }
.section--dark .lede { color: var(--text-inv-soft); }
.center .lede { margin-inline: auto; }
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.muted { color: var(--text-soft); font-size: .92rem; }
.section--dark .muted { color: var(--text-inv-soft); }

/* --------------------------------------------------------------- Header */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(11,18,32,.94);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .wrap {
  display: flex; align-items: center; gap: 20px;
  min-height: 72px;
}
/* The brand is the one item in the header that is allowed to give ground: a
   ten-character Chinese wordmark is wide, the nav and tools beside it are not,
   and if the web font fails to load the fallback face renders it wider still -
   enough to push the burger past the viewport edge and put a horizontal
   scrollbar on the whole page. Let it shrink and ellipsise instead of shoving. */
.brand { display: flex; align-items: center; gap: 11px; color: var(--text-inv); flex: 0 1 auto; min-width: 0; }
.brand__mark { width: 34px; height: 34px; flex: 0 0 auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand__name {
  font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700; letter-spacing: .01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__sub {
  font-size: .62rem; letter-spacing: .15em; text-transform: uppercase; color: var(--gold-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[dir="rtl"] .brand__sub { text-transform: none; letter-spacing: .04em; }

.nav { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--text-inv-soft);
  font-size: .9rem; font-weight: 500;
  padding: 9px 13px; border-radius: var(--radius);
  transition: color .18s var(--ease), background .18s var(--ease);
  white-space: nowrap;
}
.nav a:hover { color: var(--text-inv); background: rgba(255,255,255,.07); }
.nav a.is-active { color: var(--gold-2); }

.header-tools { display: flex; align-items: center; gap: 10px; margin-inline-start: 8px; }
.lang-switch { position: relative; }
.lang-switch__btn {
  display: flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--line-dark);
  color: var(--text-inv);
  padding: 7px 11px; border-radius: var(--radius);
  font-size: .84rem; font-weight: 600; cursor: pointer;
  transition: background .18s var(--ease);
}
.lang-switch__btn:hover { background: rgba(255,255,255,.14); }
.lang-switch__btn svg { width: 12px; height: 12px; opacity: .7; }
.lang-menu {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  min-width: 178px; padding: 6px;
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none; z-index: 80;
}
.lang-menu.is-open { display: block; }
.lang-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%;
  background: none; border: 0; cursor: pointer;
  color: var(--text-inv-soft);
  padding: 9px 11px; border-radius: var(--radius);
  font-size: .88rem; text-align: start;
}
.lang-menu button:hover { background: rgba(255,255,255,.08); color: var(--text-inv); }
.lang-menu button.is-current { color: var(--gold-2); }
.lang-menu .flag { font-size: 1.05rem; line-height: 1; }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-dark);
  border-radius: var(--radius); padding: 8px 9px; cursor: pointer;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--text-inv); margin: 4px 0; transition: .2s; }

/* --------------------------------------------------------------- Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--radius);
  font-size: .93rem; font-weight: 650; letter-spacing: .01em;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s var(--ease), box-shadow .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: linear-gradient(180deg, var(--gold-2), var(--gold)); color: #241B02; box-shadow: 0 6px 20px rgba(201,162,39,.28); }
.btn--gold:hover { box-shadow: 0 10px 28px rgba(201,162,39,.38); }
.btn--ghost { border-color: rgba(255,255,255,.28); color: var(--text-inv); background: transparent; }
.btn--ghost:hover { background: rgba(255,255,255,.09); }
.btn--outline { border-color: var(--line); color: var(--text); background: var(--paper); }
.btn--outline:hover { border-color: var(--ink); }
.btn--dark { background: var(--ink); color: var(--text-inv); }
.btn--dark:hover { background: var(--ink-3); }
.btn--sm { padding: 9px 16px; font-size: .85rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 13px; }

/* ----------------------------------------------------------------- Hero */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(201,162,39,.20), transparent 62%),
    radial-gradient(760px 520px at 4% 108%, rgba(58,96,160,.24), transparent 60%),
    linear-gradient(168deg, var(--ink) 0%, var(--ink-2) 58%, #0A101C 100%);
  color: var(--text-inv);
  padding: clamp(62px, 9vw, 118px) 0 clamp(56px, 7vw, 92px);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.55), transparent 72%);
}
.hero .wrap { position: relative; z-index: 2; }
.hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(30px, 5vw, 62px); align-items: center; }
.hero h1 { margin-bottom: 1rem; }
.hero h1 em { font-style: normal; color: var(--gold-2); }
.hero__sub { font-size: clamp(1.02rem, 1.7vw, 1.2rem); color: #C8D2E2; max-width: 54ch; margin-bottom: 1.9rem; }
.hero .btn-row { margin-bottom: 1.5rem; }
.hero__note { font-size: .84rem; color: var(--text-inv-soft); display: flex; align-items: center; gap: 8px; }

.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: var(--radius-lg); overflow: hidden; }
.hero-stat { background: rgba(255,255,255,.035); padding: 22px 20px; }
.hero-stat__v { font-family: var(--font-serif); font-size: clamp(1.5rem, 2.6vw, 2rem); color: var(--gold-2); line-height: 1.1; }
.hero-stat__l { font-size: .8rem; color: var(--text-inv-soft); margin-top: 5px; }

/* ------------------------------------------------------------ Trust bar */
.trustbar { background: var(--ink-2); border-top: 1px solid var(--line-dark); padding: 18px 0; }
.trustbar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(18px, 4vw, 46px); }
.trustbar__item { display: flex; align-items: center; gap: 9px; color: var(--text-inv-soft); font-size: .84rem; font-weight: 500; }
.trustbar__item svg { width: 17px; height: 17px; color: var(--gold-2); flex: 0 0 auto; }

/* ---------------------------------------------------------------- Cards */
.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--paper-3); }
.card__icon {
  width: 46px; height: 46px; border-radius: var(--radius);
  background: var(--gold-soft); color: #7A5E0C;
  display: grid; place-items: center; margin-bottom: 18px;
}
.card__icon svg { width: 23px; height: 23px; }
.card h3 { margin-bottom: .5rem; }
/* The FAQ prompt is an <h2> so the page outline does not skip a
   level, but it is a small inline CTA, not a section title - hold
   it at the h3 scale it was designed at. */
.card--prompt h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------- Course cards */
.course {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.course--featured { border-color: var(--gold); box-shadow: 0 14px 40px rgba(201,162,39,.18); }
.course__flag {
  position: absolute; inset-inline-end: 18px; top: 18px;
  background: var(--gold); color: #241B02;
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px;
}
html[dir="rtl"] .course__flag { text-transform: none; letter-spacing: .02em; }
.course__head { padding: 28px 28px 20px; border-bottom: 1px solid var(--line); }
.course__tier { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink); }
html[dir="rtl"] .course__tier { text-transform: none; letter-spacing: .03em; }
.course__name { font-family: var(--font-serif); font-size: 1.5rem; margin: 6px 0 8px; }
/* The three names run to different lengths - "Watch Repair — Advanced" fits on
   one line while the other two wrap to two - and the uneven title pushed the
   middle card's price 23px above its neighbours in what is a side-by-side price
   comparison. Reserve two lines so the price row lines up across all three.
   Only while the cards are side by side: .g-3 stacks them below 880px, and the
   reserve would then be dead space under a one-line title.
   `2lh` is the exact used line-height twice; the `em` value is the fallback for
   browsers without `lh` and matches h3's 1.18 at this font size. */
@media (min-width: 881px) {
  .course__name { min-height: 2.36em; min-height: 2lh; }
}
.course__meta { font-size: .87rem; color: var(--text-soft); }
.course__price { margin-top: 16px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.course__price strong { font-family: var(--font-serif); font-size: 2.15rem; color: var(--ink); }
.course__price span { font-size: .86rem; color: var(--text-soft); }
.course__body { padding: 22px 28px 28px; display: flex; flex-direction: column; flex: 1; }
.course__list { list-style: none; padding: 0; margin: 0 0 22px; }
.course__list li { position: relative; padding-inline-start: 25px; font-size: .92rem; margin-bottom: 10px; color: #3A4557; }
.course__list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .52em;
  width: 13px; height: 8px; border-inline-start: 2px solid var(--gold); border-bottom: 2px solid var(--gold);
  transform: rotate(-45deg); border-radius: 1px;
}
html[dir="rtl"] .course__list li::before { transform: rotate(45deg); }
.course__body .btn { margin-top: auto; }

/* ------------------------------------------------------------ Data table */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
/* .table-scroll paints a light surface, and index.html puts the table inside a
   .section--dark. Without an explicit colour every body cell inherits the
   band's light text and renders light-on-light - the price table measured
   1.12:1. The header sets its own colours and is unaffected. */
table.data { width: 100%; border-collapse: collapse; min-width: 620px; color: var(--text); }
table.data th, table.data td { padding: 15px 20px; text-align: start; border-bottom: 1px solid var(--line); font-size: .92rem; }
table.data thead th {
  background: var(--ink); color: var(--text-inv);
  font-size: .76rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 0; white-space: nowrap;
}
html[dir="rtl"] table.data thead th { text-transform: none; letter-spacing: .02em; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--paper-2); }
table.data tr.is-highlight td { background: var(--gold-soft); font-weight: 650; }
table.data td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data .save { color: var(--success); font-weight: 700; }

/* ------------------------------------------------------------ Two-column */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split--rev > :first-child { order: 2; }
.checklist { list-style: none; padding: 0; }
.checklist li { position: relative; padding-inline-start: 32px; margin-bottom: 14px; }
.checklist li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .35em;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--gold-soft);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A5E0C' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size: 12px 12px; background-position: center; background-repeat: no-repeat;
}
/* The tick is drawn as a background-image with a dark-gold stroke, which was
   picked for a light background. On the dark band a 22% gold disc under a
   dark-gold tick measured about 1.8:1 - the mark all but vanished. Use the
   band's own accent gold (the same one the eyebrow uses) as the disc: 3.7:1
   against the tick, and 10.8:1 against the band. */
.section--dark .checklist li::before { background-color: var(--gold-2); }
/* A light .card dropped into a dark band inherits the band's light text colour
   and renders white-on-white. Restore the normal text colour inside the card,
   and put the checklist tick back on its light-background colours - the
   override directly above is only right for a list sitting on the dark band
   itself (enrollment.html), not for one inside a white card (courses.html). */
.section--dark .card { color: var(--text); }
.section--dark .card .checklist li::before { background-color: var(--gold-soft); }

/* ------------------------------------------------------------- Timeline */
.steps { display: grid; gap: 0; counter-reset: step; }
.step { display: grid; grid-template-columns: 62px 1fr; gap: 22px; padding-bottom: 34px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step::before {
  counter-increment: step; content: counter(step);
  grid-column: 1; grid-row: 1;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--paper); border: 2px solid var(--gold-ink);
  color: var(--gold-ink); font-family: var(--font-serif); font-weight: 700; font-size: 1.15rem;
  display: grid; place-items: center; z-index: 1;
}
.step:not(:last-child)::after {
  content: ""; position: absolute; inset-inline-start: 22px; top: 46px; bottom: 0;
  width: 2px; background: var(--line);
}
.step__body { grid-column: 2; padding-top: 6px; }
.step__body h3 { font-size: 1.08rem; margin-bottom: .35rem; }
.step__body p { margin: 0; color: var(--text-soft); font-size: .94rem; }

/* -------------------------------------------------------------- Pricing */
.price-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.price-strip > div { background: var(--paper); padding: 26px 22px; text-align: center; }
.price-strip strong { display: block; font-family: var(--font-serif); font-size: 1.7rem; color: var(--ink); }
.price-strip span { font-size: .84rem; color: var(--text-soft); }



/* --------------------------------------------------------- Photo gallery */
/* Every photograph on the site, whatever the section: competition, workshop,
   certificates. Cropping is done in CSS with object-fit rather than baked
   into the files, so the same asset can be a wide band on desktop and a 4:3
   tile on a phone. Every img carries width/height attributes, and the
   aspect-ratio below reserves the box, so nothing reflows as photos arrive. */
.shot { margin: 0; }
.shot img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background: var(--paper-3);   /* placeholder tint while the photo loads */
}
.shot figcaption {
  margin-top: 10px;
  font-size: .86rem;
  line-height: 1.5;
  color: var(--text-soft);
}
.shot--wide img { aspect-ratio: 16 / 7; }
.shot-grid { margin-top: 26px; }
.shot-grid .shot img { aspect-ratio: 4 / 3; }
/* Some folders are shot on a phone held upright, so the tiles are portrait.
   A 4:3 box would crop most of the frame away - give them a 3:4 box instead. */
.shot-grid--portrait .shot img { aspect-ratio: 3 / 4; }
/* A sub-heading that splits a section into two groups - the rooms above and the
   instruments below, or the intermediate calibres and the advanced ones. It sits
   closer to the tiles it introduces than to the ones it follows, so the grouping
   reads without needing a second section head. */
.sub-head { margin: clamp(40px, 4.6vw, 58px) 0 0; }
/* Directly under a section head the gap is already set by .section-head's own
   bottom margin; adding to it reads as a break rather than a grouping. */
.section-head + .sub-head { margin-top: 0; }

/* ------------------------------------------------------- Movement list */
.mv-grid { margin-top: 26px; }
.mv {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.mv strong { display: block; font-size: .95rem; line-height: 1.3; }
.mv span { display: block; font-size: .8rem; line-height: 1.4; color: var(--text-soft); margin-top: 3px; }
/* The three the advanced course adds get the same tile with a gold edge, so the
   step from everyday calibres to chronographs and a tourbillon is visible at a
   glance rather than only in the copy. */
.mv-grid--adv .mv { border-color: var(--gold); background: var(--gold-soft); }

/* ------------------------------------------------------------------ FAQ */
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 4px; text-align: start;
  font-size: 1.02rem; font-weight: 620; color: var(--text);
}
.faq-q:hover { color: var(--gold-ink); }
.faq-q__mark { flex: 0 0 auto; width: 22px; height: 22px; position: relative; margin-top: 3px; }
.faq-q__mark::before, .faq-q__mark::after {
  content: ""; position: absolute; background: var(--gold); border-radius: 2px; transition: transform .22s var(--ease), opacity .22s var(--ease);
}
.faq-q__mark::before { inset-inline: 0; top: 10px; height: 2px; }
.faq-q__mark::after  { top: 0; bottom: 0; inset-inline-start: 10px; width: 2px; }
.faq-item.is-open .faq-q__mark::after { transform: scaleY(0); opacity: 0; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
.faq-a__inner { padding: 0 4px 24px; color: var(--text-soft); font-size: .95rem; max-width: 78ch; }
.faq-a__inner p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ CTA */
.cta-band {
  background:
    radial-gradient(720px 400px at 12% 0%, rgba(201,162,39,.20), transparent 60%),
    linear-gradient(140deg, var(--ink) 0%, var(--ink-3) 100%);
  color: var(--text-inv); text-align: center;
}
.cta-band h2 { color: var(--text-inv); }
.cta-band .lede { color: #C3CEDF; margin-inline: auto; margin-bottom: 1.8rem; }
.cta-band .btn-row { justify-content: center; }

/* ----------------------------------------------------------------- Forms */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 620; color: var(--text); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--paper); font-size: .94rem;
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { resize: vertical; min-height: 118px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--gold-ink);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.field .hint { font-size: .78rem; color: var(--text-soft); }
.form-note { font-size: .8rem; color: var(--text-soft); margin-top: 14px; }
.form-alert { display: none; margin-top: 18px; padding: 14px 16px; border-radius: var(--radius); font-size: .9rem; }
.form-alert.is-ok { display: block; background: #E8F5EF; color: var(--success); border: 1px solid #B9DFCE; }
.form-alert.is-err { display: block; background: #FCEDEC; color: var(--danger); border: 1px solid #F0C7C4; }

/* --------------------------------------------------------------- Footer */
.site-footer { background: var(--ink); color: var(--text-inv-soft); padding: 62px 0 30px; font-size: .9rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
.site-footer h3 { color: var(--text-inv); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 1rem; }
html[dir="rtl"] .site-footer h3 { text-transform: none; letter-spacing: .03em; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a:hover { color: var(--gold-2); }
.footer-brand .brand { margin-bottom: 14px; }
.footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .8rem; }

/* --------------------------------------------------------------- Utility */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(227,199,102,.14); border: 1px solid rgba(227,199,102,.34);
  color: var(--gold-2); font-size: .76rem; font-weight: 650;
  padding: 6px 13px; border-radius: 999px; margin-bottom: 1.1rem;
}
.badge--dark { background: var(--gold-soft); border-color: transparent; color: #6B5209; }
.badge--solid { background: var(--gold); border-color: transparent; color: #241B02; }
.pill-row { display: flex; flex-wrap: wrap; gap: 9px; }
.pill { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 15px; font-size: .84rem; color: #3A4557; }
.note-box { background: var(--paper-2); border-inline-start: 3px solid var(--gold); padding: 18px 22px; border-radius: 0 var(--radius) var(--radius) 0; font-size: .9rem; color: var(--text-soft); }
.note-box p:last-child { margin-bottom: 0; }
.page-hero { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--text-inv); padding: clamp(52px, 7vw, 86px) 0; }
.page-hero h1 { color: var(--text-inv); margin-bottom: .6rem; }
.page-hero .lede { color: #C3CEDF; }
.crumbs { font-size: .8rem; color: var(--text-inv-soft); margin-bottom: 1rem; }
.crumbs a:hover { color: var(--gold-2); }

/* Floating contact */
.float-cta { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column; gap: 10px; }
.float-cta a {
  width: 50px; height: 50px; border-radius: 50%;
  display: grid; place-items: center;
  box-shadow: var(--shadow-lg);
  transition: transform .18s var(--ease);
}
.float-cta a:hover { transform: scale(1.07); }
.float-cta svg { width: 24px; height: 24px; }
.float-cta .wa { background: #25D366; color: #fff; }
.float-cta .mail { background: var(--ink); color: var(--gold-2); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------- Movement decoration (bg) ----
   Watch parts laid into the background of the bands that already existed,
   rather than a section of their own. Generated by tools/build-deco.py; the
   gears use the same real geometry as the homepage animation, so every pair
   genuinely meshes and the driven gear turns the other way at a tooth-count
   ratio (30t+18t -> 50s/30s, 22t+14t -> 44s/28s).

   The parts sit in a layer that is aria-hidden, pointer-events:none and
   z-index:0, so they are pure texture and can never intercept a click or be
   read out by a screen reader. */
.deco-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* position:relative makes the band the containing block for its layer.
   Deliberately NOT overflow:hidden as well - .bg-deco already clips its own
   contents, and a second clip on the section would silently swallow any
   content that is meant to bleed, and turn the band into a scroll container. */
.has-deco { position: relative; }
.has-deco > .wrap { position: relative; z-index: 1; }

.bg-deco {
  position: absolute; inset: 0; overflow: hidden;
  pointer-events: none; user-select: none; z-index: 0;
}
.dgw { position: absolute; height: auto; }
.dgw use { fill: url(#dGold); }

/* Parts that are drawn as lines rather than silhouettes - the hairspring, the
   concentric turning marks, the balance rim, the jewel and screw rings - carry
   fill="none" on their definitions, so the fill above never reaches them.
   That leaves their stroke unset, and stroke defaults to none: they would
   vanish entirely on the dark bands. Give the dark-ground bands a gold stroke;
   each definition keeps its own stroke-width, so this only supplies the paint.
   Light bands override both further down (different selector, no conflict). */
.bg-deco--hero use,
.bg-deco--pagehero use,
.bg-deco--dark use,
.bg-deco--cta use { stroke: url(#dGold); stroke-width: 1.4; }

.dg {
  transform-box: fill-box; transform-origin: 50% 50%;
  animation: dg-spin 60s linear infinite;
  will-change: transform;
}
.dg--rev { animation-direction: reverse; }
@keyframes dg-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* How loud each band is. Deliberately faint - body copy has to win, and on a
   dark ground anything much above 15% turns into a muddy gold wash. The pale
   bands can take a little more because an outline carries far less ink than a
   filled silhouette of the same size. */
.bg-deco--hero     { opacity: .13; }
.bg-deco--pagehero { opacity: .13; }
.bg-deco--dark     { opacity: .13; }
.bg-deco--cta      { opacity: .13; }
.bg-deco--light,
.bg-deco--light2   { opacity: .16; }

/* On pale paper a filled gold gear reads as a stain, so outline it instead:
   same silhouette, technical-drawing feel, and the gold stays legible.

   stroke-width is 1.3 and stays 1.3 however far the part is scaled, because
   every definition in the sprite carries vector-effect="non-scaling-stroke".
   It has to live there: vector-effect is not inherited, and document CSS
   cannot reach inside a <use> shadow tree. Without it a 440px-wide gear would
   draw a 4px slab of gold instead of a hairline. */
.bg-deco--light use,
.bg-deco--light2 use {
  fill: none; stroke: var(--gold); stroke-width: 1.3;
  stroke-linejoin: round;
}
.bg-deco--light .dgw,
.bg-deco--light2 .dgw { opacity: .85; }

/* The hero paints a dot grid in ::after; keep it above the parts, and the
   copy above both. */
.hero::after { z-index: 1; }
.hero .wrap { z-index: 2; }

/* Narrow screens: the parts are already scaled down by their clamps, so they
   cover proportionally more of a small band - pull the opacity back. */
@media (max-width: 880px) {
  .bg-deco--hero, .bg-deco--pagehero,
  .bg-deco--dark, .bg-deco--cta { opacity: .09; }
  .bg-deco--light, .bg-deco--light2 { opacity: .11; }
}
@media (prefers-reduced-motion: reduce) {
  .dg { animation: none; }
}
@media print {
  .bg-deco { display: none; }
}

.hero-a { top:-96px; right:-70px; width:clamp(190px,24vw,340px); }
.hero-b { bottom:-90px; left:-64px; width:clamp(150px,19vw,270px); }
.hero-c { top:-132px; left:14%; width:clamp(140px,17vw,240px); }
.hero-d { bottom:-62px; right:5%; width:clamp(110px,13vw,190px); }
.hero-e { bottom:-92px; right:30%; width:clamp(115px,14vw,200px); }
.hero-f { top:-168px; right:26%; width:clamp(170px,21vw,300px); }
.hero-g { top:31%; left:2.5%; width:20px; }
.hero-h { top:63%; right:30%; width:16px; }
.hero-i { bottom:9%; left:45%; width:13px; }
.hero-j { bottom:15%; left:37%; width:18px; }
.hero-k { top:17%; right:35%; width:15px; }
.hero-l { bottom:33%; right:3%; width:16px; }
.hero-m { top:44%; right:8%; width:15px; }

.light-a { top:-150px; right:-120px; width:clamp(240px,31vw,440px); }
.light-b { bottom:-230px; left:-140px; width:clamp(230px,29vw,430px); }
.light-c { top:24px; left:-124px; width:clamp(150px,18vw,260px); }
.light-d { bottom:16%; right:12%; width:22px; }
.light-e { top:31%; right:7%; width:18px; }
.light-f { bottom:38%; left:16%; width:14px; }

.light2-a { bottom:-140px; left:-110px; width:clamp(210px,27vw,390px); }
.light2-b { top:-230px; right:-150px; width:clamp(230px,29vw,430px); }
.light2-c { bottom:-100px; right:-112px; width:clamp(140px,17vw,240px); }
.light2-d { top:22%; left:9%; width:20px; }
.light2-e { top:48%; right:14%; width:15px; }
.light2-f { bottom:26%; left:23%; width:13px; }

.dark-a { top:-110px; left:-82px; width:clamp(210px,26vw,380px); }
.dark-b { bottom:-200px; right:-92px; width:clamp(230px,29vw,420px); }
.dark-c { top:-70px; right:12%; width:clamp(120px,15vw,220px); }
.dark-d { bottom:-100px; left:22%; width:clamp(130px,16vw,230px); }
.dark-e { top:-160px; left:30%; width:clamp(170px,21vw,300px); }
.dark-f { top:24%; right:6%; width:20px; }
.dark-g { bottom:26%; right:31%; width:17px; }
.dark-h { top:58%; left:7%; width:14px; }

.cta-a { top:-120px; left:-60px; width:clamp(190px,23vw,330px); }
.cta-b { bottom:-120px; right:-60px; width:clamp(190px,23vw,330px); }
.cta-c { top:26%; right:15%; width:24px; }
.cta-d { bottom:22%; left:16%; width:20px; }
.cta-e { top:31%; left:29%; width:16px; }
.cta-f { bottom:30%; right:27%; width:15px; }

.pagehero-a { top:-110px; right:-50px; width:clamp(160px,19vw,270px); }
.pagehero-b { bottom:-72px; left:3%; width:clamp(100px,12vw,170px); }
.pagehero-c { bottom:-70px; right:16%; width:clamp(105px,13vw,180px); }
.pagehero-d { top:34%; left:19%; width:18px; }
.pagehero-e { top:62%; left:8%; width:15px; }

/* -------------------------------------------------------------- Responsive */
@media (max-width: 1024px) {
  .g-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero-stats { max-width: 520px; }
}
/* Between the burger breakpoint and full desktop width the six nav items and the
   ten-character wordmark still compete for the same row, and in the widest
   languages the nav alone is ~595px (Spanish: "Inscripcion y visado", "Preguntas
   frecuentes"). Tighten the nav here rather than let the wordmark ellipsise. */
@media (min-width: 1081px) and (max-width: 1240px) {
  .nav a { padding: 9px 10px; font-size: .86rem; }
}
/* The header collapses to a burger well before the rest of the layout does.
   Six nav items, in five languages, next to a ten-character Chinese wordmark and
   a language switcher, need about 1050px. .brand has min-width:0 while .nav's
   items are nowrap, so anything tighter is absorbed entirely by the wordmark,
   which then ellipsises. A burger is the better trade. The layout rules that
   used to share the 880px query stay there. */
@media (max-width: 1080px) {
  .nav {
    position: fixed; inset: 72px 0 auto 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line-dark);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 10px 18px 18px; margin: 0;
    display: none; box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: 13px 10px; border-bottom: 1px solid var(--line-dark); border-radius: 0; }
  .nav-toggle { display: block; margin-inline-start: auto; }
  .header-tools { margin-inline-start: 0; }
}
@media (max-width: 880px) {
  .split, .split--rev { grid-template-columns: 1fr; }
  .split--rev > :first-child { order: 0; }
  .g-3 { grid-template-columns: 1fr; }
  .price-strip { grid-template-columns: 1fr; }
  /* A 16:7 band of a phone-width image is only about 150px tall, which reads
     as a sliver rather than a photograph. Give the feature its height back. */
  .shot--wide img { aspect-ratio: 4 / 3; }
  /* Four certificate tiles across a tablet is roughly 155px each - too small
     to read as a document. Two across below 880px, one across below 640px
     (which .g-4 already handles). */
  .shot-grid--certs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .header-cta { display: none; }
  .g-2, .g-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .step { grid-template-columns: 48px 1fr; gap: 16px; }
  .step::before { width: 38px; height: 38px; font-size: 1rem; }
  .step:not(:last-child)::after { inset-inline-start: 18px; top: 38px; }
  .float-cta { inset-inline-end: 14px; bottom: 14px; }
}
/* A phone header is down to roughly 330px of usable width. Ten Chinese
   characters, the logo mark, a language switcher and a burger do not fit, and
   .brand is the only item that can give. Step the wordmark down first; below
   400px the mark steps aside so the company name can still be shown in full -
   a truncated name reads as a bug, a missing glyph does not. */
@media (max-width: 560px) {
  .brand__name { font-size: .9rem; }
  .brand__sub  { font-size: .56rem; letter-spacing: .06em; }
}
@media (max-width: 400px) {
  .brand__mark { display: none; }
  .brand__name { font-size: .86rem; }
}

/* ------------------------------------------------------------- Print ---- */
@media print {
  .site-header, .float-cta, .cta-band, .nav-toggle { display: none !important; }
  body { color: #000; }
}