/* ==========================================================================
   Easy China Services
   Deep blue, white, gold. Mobile first. One accent, used with discipline.
   ========================================================================== */

:root {
  /* surfaces and ink */
  --navy-900: #0a2342;
  --navy-800: #0e2c53;
  --navy-700: #143a63;
  --navy-600: #1d4d80;
  --paper: #ffffff;
  --mist: #f4f6f9;
  --slate: #46536b;
  /* Dark enough to clear 4.5:1 on --mist, not just on white. */
  --slate-soft: #5f6b82;
  --line: #dde3ec;
  --line-navy: rgba(232, 196, 92, 0.22);

  /* the single accent */
  --gold: #c9a227;
  --gold-lift: #e8c45c;
  --gold-ink: #7a5f12;
  --gold-wash: rgba(201, 162, 39, 0.08);

  /* type */
  --display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --body: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --han: "Noto Sans SC", var(--body);

  /* measure and rhythm */
  --wrap: 1180px;
  --gut: 20px;
  --section-y: 64px;
  --radius: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(10, 35, 66, 0.06), 0 2px 8px rgba(10, 35, 66, 0.04);
  --shadow-md: 0 4px 12px rgba(10, 35, 66, 0.08), 0 12px 32px rgba(10, 35, 66, 0.07);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (min-width: 768px) {
  :root { --gut: 32px; --section-y: 92px; }
}
@media (min-width: 1100px) {
  :root { --section-y: 116px; }
}

/* --------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 76px;
}

body {
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--slate);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--navy-900); color: #fff; }

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.on-navy :focus-visible,
.hero :focus-visible,
.footer :focus-visible,
.csca :focus-visible {
  outline-color: var(--gold-lift);
}

.skip {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 12px 22px;
  border-radius: 0 0 10px 10px;
  font-weight: 600;
  transition: transform 0.18s var(--ease);
}
.skip:focus { transform: translate(-50%, 0); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------------- layout pieces */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band { padding-block: var(--section-y); }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy-900); color: rgba(255, 255, 255, 0.78); }

.head { max-width: 60ch; }
.head--center { margin-inline: auto; text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
.head--center .eyebrow { justify-content: center; }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  flex: none;
}
.head--center .eyebrow::before { display: none; }
.eyebrow .han {
  font-family: var(--han);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--slate-soft);
  font-size: 0.74rem;
}
.band--navy .eyebrow { color: var(--gold-lift); }
.band--navy .eyebrow::before { background: var(--gold-lift); }
.band--navy .eyebrow .han { color: rgba(255, 255, 255, 0.5); }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: -0.015em;
  color: var(--navy-900);
}
.band--navy h2, .band--navy h3, .band--navy h4 { color: #fff; }

.head h2 {
  margin-top: 14px;
  font-size: clamp(1.85rem, 5.6vw, 2.9rem);
  text-wrap: balance;
}
.head p {
  margin-top: 16px;
  font-size: 1.06rem;
  max-width: 62ch;
}
.head--center p { margin-inline: auto; }
.band--navy .head p { color: rgba(255, 255, 255, 0.72); }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border-radius: 999px;
  font-size: 0.97rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
              border-color 0.18s var(--ease), transform 0.18s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-lift); }

.btn--navy { background: var(--navy-900); color: #fff; }
.btn--navy:hover { background: var(--navy-700); }

.btn--outline { border-color: var(--line); color: var(--navy-900); background: var(--paper); }
.btn--outline:hover { border-color: var(--navy-900); }

.btn--ghost { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn--wa { background: #1eb35a; color: #fff; }
.btn--wa:hover { background: #17a04f; }

.btn--wide { width: 100%; }
@media (min-width: 560px) { .btn--wide { width: auto; } }

/* ------------------------------------------------------------------ nav */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.nav__in {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 14px var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.nav.is-stuck {
  background: rgba(10, 35, 66, 0.94);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 1px 0 var(--line-navy);
}

.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; }
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.12; }
.brand__name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.brand__sub {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lift);
}

.nav__links { display: none; }
.nav__links a {
  font-size: 0.92rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
  padding-block: 7px;
  transition: color 0.18s var(--ease);
}
.nav__links a:hover { color: #fff; }
/* `.nav__links a` and `.nav__panel a` both out-specify `.btn--gold`, which left
   white text on the gold fill at roughly 2:1. Put the navy back. */
.nav__links a.btn--gold,
.nav__links a.btn--gold:hover,
.nav__panel a.btn--gold { color: var(--navy-900); }

/* Raised from 1000px: with the Import and Export link the row wraps at 1000. */
@media (min-width: 1100px) {
  .nav__links { display: flex; align-items: center; gap: 26px; }
}

/* All three bars share one centre and are offset by transform alone, so the
   open state collapses to a true X instead of depending on row heights. */
.nav__toggle {
  position: relative;
  display: block;
  width: 44px; height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
/* Must sit after the base rule above, which also sets display. */
@media (min-width: 1100px) {
  .nav__toggle { display: none; }
}
.nav__toggle span {
  position: absolute;
  top: 50%; left: 50%;
  width: 19px; height: 1.5px;
  margin: -0.75px 0 0 -9.5px;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.22s var(--ease), opacity 0.16s var(--ease);
}
.nav__toggle span:nth-child(1) { transform: translateY(-6px); }
.nav__toggle span:nth-child(3) { transform: translateY(6px); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--navy-900);
  padding: 96px var(--gut) 40px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  /* visibility flips instantly on open and is delayed only on close. Putting it
     in the timed transition leaves it computing as hidden while the panel fades
     in, which makes focus() on the first link silently fail. */
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0s linear 0.24s;
  overflow-y: auto;
}
.nav__panel[hidden] { display: none; }
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease),
              visibility 0s linear 0s;
}
.nav__panel a {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #fff;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nav__panel .btn { margin-top: 26px; }
@media (min-width: 1100px) { .nav__panel { display: none; } }

body.is-locked { overflow: hidden; }

/* ----------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-end;
  padding-top: 130px;
  padding-bottom: 0;
  background: var(--navy-900);
  isolation: isolate;
}
@media (min-width: 768px) { .hero { min-height: min(88vh, 820px); padding-top: 150px; } }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
/* Narrow screens crop most of the width away, so bias the focal point toward
   the flag at 64% rather than showing the middle of the frame. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 42%; }
@media (min-width: 900px) {
  .hero__media img { object-position: center 42%; }
}
/* Dark enough under the copy to hold white text, open enough in the upper
   band that the campus still reads as a photograph. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 35, 66, 0.72) 0%,
    rgba(10, 35, 66, 0.50) 26%,
    rgba(10, 35, 66, 0.68) 55%,
    rgba(10, 35, 66, 0.88) 78%,
    rgba(10, 35, 66, 0.97) 100%
  );
}

/* Wide screens put the copy in the left half, so weight the scrim there and
   let the right side of the campus stay bright. */
/* The flag now sits at about 64% across, clear of the copy column, so the left
   can simply be darkened for the text while the right stays open for the flag. */
@media (min-width: 900px) {
  .hero__media::after {
    background:
      linear-gradient(95deg, rgba(10, 35, 66, 0.80) 0%, rgba(10, 35, 66, 0.56) 38%,
                             rgba(10, 35, 66, 0.14) 66%, rgba(10, 35, 66, 0.04) 100%),
      linear-gradient(180deg, rgba(10, 35, 66, 0.40) 0%, rgba(10, 35, 66, 0.20) 34%,
                              rgba(10, 35, 66, 0.46) 74%, rgba(10, 35, 66, 0.86) 100%);
  }
}

.hero__in { width: 100%; padding-bottom: 44px; }
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  /* White, not gold. At 11px over open sky the gold cannot clear 4.5:1, and the
     rule below still carries the accent. */
  color: #fff;
}
.hero__eyebrow::before { content: ""; width: 30px; height: 2px; background: var(--gold-lift); }

.hero h1 {
  margin-top: 20px;
  max-width: 15ch;
  color: #fff;
  font-size: clamp(2.4rem, 9.2vw, 4.4rem);
  line-height: 1.04;
  letter-spacing: -0.028em;
}
.hero__sub {
  margin-top: 20px;
  max-width: 52ch;
  font-size: clamp(1.02rem, 3.4vw, 1.2rem);
  color: rgba(255, 255, 255, 0.82);
}
.hero__cta {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 560px) { .hero__cta { flex-direction: row; flex-wrap: wrap; } }

.hero__tracks {
  margin-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}
.hero__tracks li {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero__tracks li::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
  flex: none;
}

/* ------------------------------------------------------------ who we are */

.about__grid { display: grid; gap: 36px; }
@media (min-width: 900px) {
  .about__grid { grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
}

.about__figure { position: relative; }
.about__figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.about__figure::after {
  content: "";
  position: absolute;
  inset: 14px -14px -14px 14px;
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-lg);
  z-index: -1;
}

.about__body .head { margin-bottom: 18px; }
.about__body p + p { margin-top: 15px; }
.about__body p { font-size: 1.05rem; }

.about__mission {
  margin-top: 26px;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.about__mission p {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.4;
}

.about__proof {
  margin-top: 30px;
  display: grid;
  gap: 18px 22px;
}
@media (min-width: 560px) { .about__proof { grid-template-columns: repeat(3, 1fr); } }
.about__proof > div { padding-top: 14px; border-top: 2px solid var(--gold); }
.about__proof dt {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy-900);
}
.about__proof dd {
  margin-top: 3px;
  font-size: 0.83rem;
  line-height: 1.4;
  color: var(--slate-soft);
}

/* ------------------------------------------------------------- services */

.cards { display: grid; gap: 18px; margin-top: 42px; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); gap: 20px; } }
@media (min-width: 1000px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px 30px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s var(--ease);
}
.card:hover { border-color: #c9d3e2; box-shadow: var(--shadow-md); transform: translateY(-3px); }
.card:hover::before { transform: scaleX(1); }

.card__icon {
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--gold);
  border-radius: 11px;
  color: var(--gold-ink);
  margin-bottom: 18px;
}
.card__icon svg { width: 21px; height: 21px; }

.card h3 { font-size: 1.24rem; }
.card__list { margin-top: 14px; display: grid; gap: 8px; }
.card__list li {
  position: relative;
  padding-left: 20px;
  font-size: 0.93rem;
  line-height: 1.5;
}
.card__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.58em;
  width: 7px; height: 7px;
  border: 1.5px solid var(--gold);
  border-radius: 2px;
}

/* -------------------------------------------------------------- pricing */

.card--price { display: flex; flex-direction: column; }
.price__step {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.price__figure {
  margin-top: 6px;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.card--price h3 { margin-top: 12px; font-size: 1.12rem; }
.card--price .card__list { margin-top: 12px; }
.price__note {
  margin-top: auto;
  padding-top: 16px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--slate-soft);
}
.price__foot {
  margin-top: 26px;
  padding: 20px 24px;
  border-left: 3px solid var(--gold);
  background: var(--gold-wash);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.98rem;
  max-width: 78ch;
}
.price__foot strong { color: var(--navy-900); font-weight: 600; }

/* ------------------------------------------- how it works, the gold rail */

.rail { margin-top: 48px; position: relative; padding-left: 52px; }
@media (min-width: 768px) { .rail { padding-left: 74px; } }

.rail__line {
  position: absolute;
  left: 20px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.5s var(--ease);
}
@media (min-width: 768px) { .rail__line { left: 29px; } }
.rail.is-drawn .rail__line { transform: scaleY(1); }

.step { position: relative; padding-bottom: 34px; }
.step:last-child { padding-bottom: 0; }

.step__marker {
  position: absolute;
  left: -52px;
  top: -2px;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 1.5px solid var(--gold);
  border-radius: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--navy-900);
}
@media (min-width: 768px) {
  .step { padding-bottom: 42px; }
  .step__marker { left: -74px; width: 58px; height: 58px; font-size: 1.4rem; top: -8px; }
}
.band--mist .step__marker { background: var(--mist); }

.step__head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.step h3 { font-size: 1.2rem; }
@media (min-width: 768px) { .step h3 { font-size: 1.4rem; } }
.step__han {
  font-family: var(--han);
  font-size: 0.86rem;
  color: var(--slate-soft);
  letter-spacing: 0.06em;
}
.step p { margin-top: 7px; font-size: 0.97rem; max-width: 58ch; }

@media (min-width: 1000px) {
  .step__body { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 34px; align-items: start; }
  .step p { margin-top: 0; }
}

/* -------------------------------------------------------- why choose us */

.reasons { display: grid; gap: 14px; margin-top: 42px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .reasons { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1000px) { .reasons { grid-template-columns: repeat(4, 1fr); } }

.reason {
  padding: 22px 20px 24px;
  border: 1px solid var(--line-navy);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.03);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.reason:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(232, 196, 92, 0.45); }
.reason svg { width: 24px; height: 24px; color: var(--gold-lift); margin-bottom: 14px; }
.reason h3 { font-size: 1.02rem; line-height: 1.3; }
.reason p { margin-top: 7px; font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.62); }

.why__figure { margin-top: 46px; border-radius: var(--radius-lg); overflow: hidden; }
.why__figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* ----------------------------------------------------------------- csca */

.csca { background: var(--navy-900); position: relative; overflow: hidden; }
.csca__panel {
  position: relative;
  border: 1.5px solid var(--line-navy);
  border-radius: var(--radius-lg);
  padding: 34px 24px 38px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
}
@media (min-width: 768px) { .csca__panel { padding: 52px 48px 56px; } }
@media (min-width: 1000px) {
  .csca__grid { display: grid; grid-template-columns: 1fr 0.82fr; gap: 54px; align-items: center; }
}

.csca__figure { margin-top: 32px; border-radius: var(--radius); overflow: hidden; }
.csca__figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1000px) { .csca__figure { margin-top: 0; } }

.csca__features { margin-top: 26px; display: grid; gap: 11px; }
@media (min-width: 620px) { .csca__features { grid-template-columns: repeat(2, 1fr); gap: 12px 26px; } }
.csca__features li {
  position: relative;
  padding-left: 27px;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}
.csca__features svg {
  position: absolute;
  left: 0; top: 0.3em;
  width: 17px; height: 17px;
  color: var(--gold-lift);
}
.csca .btn { margin-top: 32px; }

/* --------------------------------------------------------- testimonials */

.quotes { margin-top: 40px; position: relative; }
.quotes__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 88%;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.quotes__track::-webkit-scrollbar { display: none; }
@media (min-width: 700px) { .quotes__track { grid-auto-columns: 46%; gap: 20px; } }
@media (min-width: 1050px) { .quotes__track { grid-auto-columns: 31.6%; } }

.quote {
  scroll-snap-align: start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.quote__mark {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 0.8;
  color: var(--gold);
  margin-bottom: 12px;
}
.quote blockquote {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--slate);
  flex: 1;
}
.quote figcaption {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 13px;
}
.quote__monogram {
  width: 42px; height: 42px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--gold-lift);
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.98rem;
}
.quote__who { font-weight: 600; color: var(--navy-900); font-size: 0.93rem; }
.quote__meta { font-size: 0.81rem; color: var(--slate-soft); }

.quotes__nav { margin-top: 22px; display: flex; align-items: center; gap: 12px; }
.quotes__btn {
  width: 44px; height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--navy-900);
  background: var(--paper);
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
.quotes__btn:hover:not(:disabled) { border-color: var(--navy-900); }
.quotes__btn:disabled { opacity: 0.35; cursor: default; }
.quotes__btn svg { width: 17px; height: 17px; }
.quotes__dots { display: flex; gap: 7px; margin-left: auto; }
.quotes__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s var(--ease), width 0.2s var(--ease);
}
.quotes__dot[aria-current="true"] { background: var(--gold); width: 22px; border-radius: 4px; }

/* ------------------------------------------------------------------ faq */

.faq__list { margin-top: 38px; max-width: 860px; margin-inline: auto; }
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 2px;
  cursor: pointer;
  font-family: var(--display);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-900);
  line-height: 1.35;
  list-style: none;
  transition: color 0.18s var(--ease);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--navy-600); }
@media (min-width: 768px) { .faq__item summary { font-size: 1.18rem; } }

.faq__sign {
  position: relative;
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
}
.faq__sign::before, .faq__sign::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  background: var(--gold-ink);
  transform: translate(-50%, -50%);
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease);
}
.faq__sign::before { width: 13px; height: 1.8px; }
.faq__sign::after { width: 1.8px; height: 13px; }
.faq__item[open] .faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.faq__answer { padding: 0 2px 24px; max-width: 70ch; }
.faq__answer p { font-size: 0.99rem; }
.faq__answer p + p { margin-top: 12px; }

/* -------------------------------------------------------------- contact */

.contact__grid { display: grid; gap: 40px; }
@media (min-width: 980px) {
  .contact__grid { grid-template-columns: 1fr 0.72fr; gap: 60px; align-items: start; }
}

.form { display: grid; gap: 16px; }
.form__row { display: grid; gap: 16px; }
@media (min-width: 620px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

.field { display: grid; gap: 7px; }
.field label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--navy-900);
  letter-spacing: 0.01em;
}
.field label .req { color: var(--gold-ink); }

.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 15px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.97rem;
  color: var(--navy-900);
  transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.field textarea { resize: vertical; min-height: 116px; }
.field input::placeholder, .field textarea::placeholder { color: #9aa5b8; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #c2ccdb; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.16);
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2346536b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__note { font-size: 0.83rem; color: var(--slate-soft); }
.form__submit { justify-self: start; }
@media (max-width: 559px) { .form__submit { justify-self: stretch; } }

.form__status {
  display: none;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.form__status.is-shown { display: block; }
.form__status.is-ok { background: #ecf6ef; border: 1px solid #bcdcc6; color: #1f6135; }
.form__status.is-bad { background: #fdf0ee; border: 1px solid #f0c9c2; color: #96331f; }
.form__handoff { margin-top: 14px; padding: 11px 20px; font-size: 0.92rem; }
.form__status .form__handoff svg { width: 17px; height: 17px; }

.reach { display: grid; gap: 14px; }
.reach__item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
a.reach__item:hover { border-color: var(--navy-900); box-shadow: var(--shadow-sm); }
.reach__icon {
  width: 40px; height: 40px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--navy-900);
  color: var(--gold-lift);
}
.reach__icon svg { width: 19px; height: 19px; }
.reach__label, .reach__value, .reach__hint { display: block; }
.reach__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-soft);
}
.reach__value {
  margin-top: 3px;
  font-family: var(--display);
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--navy-900);
  word-break: break-word;
}
.reach__hint { font-size: 0.84rem; color: var(--slate-soft); margin-top: 2px; }

/* --------------------------------------------------------------- footer */

.footer { background: var(--navy-900); color: rgba(255, 255, 255, 0.66); padding-top: 60px; }
.footer__grid { display: grid; gap: 34px; }
@media (min-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); gap: 40px; } }
@media (min-width: 1000px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 44px; } }

.footer__about p { margin-top: 16px; font-size: 0.9rem; max-width: 34ch; color: rgba(255, 255, 255, 0.6); }
.footer h4 {
  font-family: var(--body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lift);
  margin-bottom: 15px;
}
/* Padding rather than gap, so the touch target is ~38px while the spacing
   between links looks the same as a 10px gap. */
.footer__links { display: grid; gap: 0; }
.footer__links a {
  font-size: 0.91rem;
  color: rgba(255, 255, 255, 0.66);
  padding-block: 7px;
  transition: color 0.18s var(--ease);
}
.footer__links a:hover { color: #fff; }

.footer__social { display: flex; gap: 10px; margin-top: 16px; }
.footer__social a {
  width: 38px; height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.8);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.footer__social a:hover { border-color: var(--gold-lift); color: var(--gold-lift); background: rgba(232, 196, 92, 0.1); }
.footer__social svg { width: 17px; height: 17px; }

.footer__base {
  margin-top: 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-block: 22px 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}

/* -------------------------------------------------- floating whatsapp */

.wa-float {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 90;
  width: 54px; height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #1eb35a;
  color: #fff;
  box-shadow: 0 6px 20px rgba(10, 35, 66, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s;
}
.wa-float.is-shown { opacity: 1; visibility: visible; transform: none; }
.wa-float:hover { background: #17a04f; }
.wa-float svg { width: 28px; height: 28px; }
@media (min-width: 768px) { .wa-float { right: 24px; bottom: 24px; width: 58px; height: 58px; } }
@media print { .wa-float, .nav { display: none; } }

/* ------------------------------------------------------------- reveal */

/* Scoped to .js so that if the script never runs, nothing is left invisible. */
.js .reveal { opacity: 0; transform: translateY(12px); }
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.js .reveal.is-in[data-delay="1"] { transition-delay: 0.07s; }
.js .reveal.is-in[data-delay="2"] { transition-delay: 0.14s; }
.js .reveal.is-in[data-delay="3"] { transition-delay: 0.21s; }
.js .reveal.is-in[data-delay="4"] { transition-delay: 0.28s; }
.js .reveal.is-in[data-delay="5"] { transition-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .rail__line { transform: scaleY(1); }
}