/* ===================================================================
   Nornica — Academic Writing Service
   Design system: Nornica Navy #032650 / Academic Gold #EF9B04 / White
   No gradients. Navy dominant (~75%), gold selective accents.
   Mobile-first. Typography: Lora (display) + Inter (body).
   =================================================================== */

:root {
  --navy: #032650;
  --navy-700: #062f5e;
  --navy-600: #0a3a72;
  --navy-50: #eef3f8;
  --navy-100: #dde7f1;
  --gold: #EF9B04;
  --gold-600: #d48a00;
  --gold-50: #fdf3e0;
  --white: #FFFFFF;
  --ink: #0b1b2e;
  --muted: #5a6b7e;
  --line: #e3e9f0;
  --line-strong: #c9d4e0;
  --bg-alt: #f6f8fb;
  --danger: #b3261e;
  --success: #1b7a3d;

  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow-sm: 0 1px 2px rgba(3, 38, 80, .06), 0 1px 3px rgba(3, 38, 80, .08);
  --shadow: 0 4px 16px rgba(3, 38, 80, .08);
  --shadow-lg: 0 12px 40px rgba(3, 38, 80, .12);

  --container: 1140px;
  --ff-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ff-display: "Lora", Georgia, "Times New Roman", serif;

  --header-h: 68px;
}

/* ----------------------------- Reset ----------------------------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html:focus-within { scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--gold-600); }
button { font-family: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 600; color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { padding: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.gold { color: var(--gold); }
.gold-text { color: var(--gold); font-weight: 600; }
.eyebrow {
  font-family: var(--ff-body);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--gold-600);
  margin: 0 0 10px;
}

/* ----------------------------- Buttons ----------------------------- */
.btn {
  --bg: var(--white);
  --fg: var(--navy);
  --bd: var(--line-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  font-weight: 600;
  font-size: .95rem;
  line-height: 1;
  transition: transform .12s ease, background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-lg { padding: 15px 28px; font-size: 1.02rem; }
.btn.full { width: 100%; }
.btn-gold { --bg: var(--gold); --fg: var(--navy); --bd: var(--gold); }
.btn-gold:hover { --bg: var(--gold-600); --fg: var(--white); color: var(--white); }
.btn-outline { --bg: transparent; --fg: var(--navy); --bd: var(--navy); }
.btn-outline:hover { --bg: var(--navy); --fg: var(--white); color: var(--white); }
.btn-ghost { --bg: transparent; --fg: var(--navy); --bd: transparent; }
.btn-ghost:hover { --bg: var(--navy-50); }
.wa-icon { width: 18px; height: 18px; fill: currentColor; }

/* ----------------------------- Header ----------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; height: 100%; text-decoration: none; }
.brand:hover { color: var(--white); text-decoration: none; }
.brand-logo {
  height: 100%;
  width: auto;
  max-height: var(--header-h);
  max-width: 100%;
  display: block;
  object-fit: contain;
}

.nav-links { display: none; gap: 26px; }
.nav-links a {
  color: rgba(255,255,255,.82);
  font-size: .94rem;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
}
.nav-links a:hover { color: var(--white); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .18s ease;
}
.nav-links a:hover::after { width: 100%; }

.header-actions { display: flex; align-items: center; gap: 10px; }
.btn-wa-header {
  --bg: rgba(255,255,255,.08);
  --fg: var(--white);
  --bd: rgba(255,255,255,.2);
  color: var(--white);
}
.btn-wa-header:hover { --bg: rgba(255,255,255,.16); color: var(--white); }
.site-header .btn-gold { color: var(--navy); }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 42px; height: 42px;
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 9px;
  padding: 0;
}
.nav-toggle span { display: block; height: 2px; width: 20px; background: var(--white); margin: 0 auto; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 20px 22px;
  background: var(--navy);
  border-top: 1px solid rgba(255,255,255,.08);
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding-top: 0; padding-bottom: 0;
}
.mobile-nav.open { max-height: 520px; padding-top: 14px; padding-bottom: 22px; }
.mobile-nav a { color: rgba(255,255,255,.88); padding: 11px 4px; font-weight: 500; border-bottom: 1px solid rgba(255,255,255,.07); }
.mobile-nav a:hover { color: var(--gold); }
.mobile-nav .btn { margin-top: 12px; border-bottom: 0; }
.mobile-nav .btn.full { width: 100%; }

/* ----------------------------- Hero ----------------------------- */
.hero {
  background: var(--navy);
  color: var(--white);
  padding: 56px 0 64px;
  border-bottom: 3px solid var(--gold);
}
.hero-grid { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
.hero .eyebrow { color: var(--gold); }
.hero-title {
  color: var(--white);
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: .35em;
}
.hero-title .gold { color: var(--gold); }
.hero-sub {
  font-size: 1.08rem;
  color: rgba(255,255,255,.86);
  max-width: 540px;
  margin-bottom: 28px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.hero-cta .btn-outline { --fg: var(--white); --bd: rgba(255,255,255,.4); color: var(--white); }
.hero-cta .btn-outline:hover { --bg: var(--white); --fg: var(--navy); color: var(--navy); }
/* Keep both hero CTAs on a single line on every mobile screen size. */
@media (max-width: 640px) {
  .hero-cta { flex-wrap: nowrap; gap: 8px; }
  .hero-cta .btn { flex: 1 1 0; min-width: 0; padding: 12px 10px; font-size: .82rem; white-space: nowrap; }
  .hero-cta .btn .wa-icon { width: 18px; height: 18px; flex: 0 0 auto; }
}
@media (max-width: 360px) {
  .hero-cta { gap: 6px; }
  .hero-cta .btn { padding: 10px 6px; font-size: .76rem; }
  .hero-cta .btn .wa-icon { width: 16px; height: 16px; }
}
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.hero-trust li { font-size: .92rem; color: rgba(255,255,255,.85); }
.hero-trust strong { color: var(--gold); font-weight: 700; }

/* Hero card (decorative order preview) */
.hero-card {
  background: var(--white);
  color: var(--ink);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 380px;
  margin: 0 auto;
  width: 100%;
}
.hero-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: var(--navy-50);
  border-bottom: 1px solid var(--line);
}
.hero-card-top .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.hero-card-top .dot:nth-child(1) { background: #e06a5a; }
.hero-card-top .dot:nth-child(2) { background: #e6c34a; }
.hero-card-top .dot:nth-child(3) { background: #5cbf7d; }
.hero-card-title { margin-left: 8px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.hero-card-body { padding: 20px; }
.hc-row { display: flex; justify-content: space-between; padding: 9px 0; font-size: .94rem; border-bottom: 1px dashed var(--line); }
.hc-row span:first-child { color: var(--muted); }
.hc-row span:last-child { font-weight: 600; color: var(--navy); }
.hc-divider { height: 1px; background: var(--line); margin: 12px 0; }
.hc-total { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.hc-total span:first-child { color: var(--muted); font-size: .9rem; }
.hc-total .price { font-family: var(--ff-display); font-weight: 700; font-size: 1.5rem; color: var(--navy); }

/* ----------------------------- Sections ----------------------------- */
.section { padding: 64px 0; }
.section-alt { background: var(--bg-alt); }
.section-head { max-width: 680px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: clamp(1.6rem, 4.5vw, 2.4rem); }
.section-lead { color: var(--muted); font-size: 1.05rem; margin-bottom: 0; }

/* ----------------------------- Why / Features ----------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
.feature-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--gold); }
.feature-ico {
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--navy-50);
  color: var(--gold);
  margin-bottom: 16px;
}
.feature-ico svg { width: 26px; height: 26px; fill: currentColor; }
.feature-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.feature-card p { color: var(--muted); margin: 0; font-size: .96rem; }

/* ----------------------------- Services ----------------------------- */
.services-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.svc-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
}
.svc-title { font-size: 1.1rem; margin-bottom: 14px; }
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list li {
  background: var(--navy-50);
  color: var(--navy);
  border: 1px solid var(--navy-100);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 500;
}

/* ----------------------------- How it works ----------------------------- */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  counter-reset: step;
}
.step {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 22px 22px 22px;
  box-shadow: var(--shadow-sm);
}
.step-num {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 14px;
  box-shadow: 0 0 0 6px var(--gold-50);
}
.step h3 { font-size: 1.12rem; margin-bottom: 6px; }
.step p { color: var(--muted); margin: 0; font-size: .95rem; }

/* ----------------------------- Pricing ----------------------------- */
.price-table {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  max-width: 720px;
  margin: 0 auto;
}
.price-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.1fr;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  font-size: .96rem;
}
.price-row:last-child { border-bottom: 0; }
.price-head { background: var(--navy); color: var(--white); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
.price-head div { color: var(--white); }
.price-row > div:first-child { font-weight: 600; color: var(--navy); }
.price-note { text-align: center; color: var(--muted); font-size: .9rem; margin: 18px auto 0; max-width: 560px; }
.price-cta { text-align: center; margin-top: 24px; }

/* ----------------------------- Testimonials (seamless marquee) ----------------------------- */
.testi-marquee {
  overflow: hidden;
  /* Break out of the container padding so cards slide edge to edge. */
  margin-inline: -20px;
  width: calc(100% + 40px);
  /* Soft fade at the edges so the clip is invisible. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.testi-track {
  display: flex;
  width: max-content;
  /* Constant, slow, linear scroll. The set is duplicated in the markup, so
     translating by -50% loops back exactly to the start with no visible seam. */
  animation: testiScroll 70s linear infinite;
  will-change: transform;
}
.testi-marquee:hover .testi-track { animation-play-state: paused; }
@keyframes testiScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}
.testi-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px;
  margin: 0;
  margin-right: 18px;   /* trailing gap keeps the -50% loop perfectly seamless */
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 auto;
  width: 300px;
}
.stars { display: flex; gap: 2px; }
.star { color: var(--gold); font-size: 1.1rem; line-height: 1; }
.testi-card blockquote { margin: 0; font-size: .98rem; line-height: 1.6; color: var(--ink); }
.testi-card figcaption { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--line); padding-top: 14px; }
.testi-name { font-weight: 700; color: var(--navy); }
.testi-role { font-size: .85rem; color: var(--muted); }
@media (min-width: 768px) { .testi-card { width: 340px; } }
@media (min-width: 992px) { .testi-card { width: 360px; } }
@media (prefers-reduced-motion: reduce) { .testi-track { animation: none; } }

/* ----------------------------- Order Form ----------------------------- */
.order-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  max-width: 820px;
  margin: 0 auto;
}
.form-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 26px;
  counter-reset: p;
}
.form-progress li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.form-progress li span {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy-50);
  color: var(--navy);
  font-size: .8rem;
  flex-shrink: 0;
}
.form-progress li.active { color: var(--navy); border-bottom-color: var(--gold); }
.form-progress li.active span { background: var(--gold); color: var(--navy); }
.form-progress li.done span { background: var(--navy); color: var(--white); }

/* Active-step heading: hidden on desktop (labels are inline), shown on mobile
   where only the number circles fit. */
.form-step-title { display: none; }
@media (max-width: 767px) {
  .form-step-title {
    display: block;
    margin: 0 0 10px;
    font-size: .95rem;
    font-weight: 700;
    color: var(--navy);
    text-align: center;
  }
  .step-label { display: none; }
  .form-progress li { justify-content: center; padding-bottom: 10px; }
}

.form-group { padding: 4px 0 8px; }
.form-group legend {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--navy);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
  width: 100%;
  max-width: 220px;
}
.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field-full { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .9rem; color: var(--navy); }
.req { color: var(--gold); }
.field input, .field select, .field textarea {
  font: inherit;
  font-size: .96rem;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; min-height: 110px; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--navy-50);
}
.field input.invalid, .field select.invalid { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,38,30,.12); }
.field .err { color: var(--danger); font-size: .8rem; min-height: 1em; }
.field .err:empty { min-height: 0; }

/* File drop */
.file-drop {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 22px;
  text-align: center;
  background: var(--bg-alt);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.file-drop:hover, .file-drop.drag { border-color: var(--gold); background: var(--gold-50); }
.file-drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.file-drop { position: relative; }
.file-drop-text { margin: 0; font-weight: 600; color: var(--navy); font-size: .92rem; }
.file-drop-hint { margin: 4px 0 0; font-size: .78rem; color: var(--muted); }
.file-list { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.file-list li {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navy-50);
  border: 1px solid var(--navy-100);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: .85rem;
}
.file-list li button { background: none; border: 0; color: var(--danger); font-size: 1.1rem; line-height: 1; padding: 0 4px; }

/* Live quote */
.live-quote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 22px 0;
}
.lq-left { display: flex; flex-direction: column; }
.lq-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); }
.lq-price { font-family: var(--ff-display); font-weight: 700; font-size: 1.9rem; color: var(--gold); }
.lq-right { font-size: .88rem; color: rgba(255,255,255,.82); max-width: 360px; text-align: right; }

/* Group nav */
.group-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

/* Payment instructions */
.pay-instructions {
  background: var(--gold-50);
  border: 1px solid #f0d99a;
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  margin-top: 18px;
}
.pay-instructions h4 { margin: 0 0 8px; font-size: 1rem; color: var(--navy); }
.pay-instructions p { margin: 0 0 6px; font-size: .92rem; color: var(--ink); }
.pay-instructions .pay-key { font-weight: 700; color: var(--navy); }
.pay-instructions .pay-val { font-family: monospace; font-size: 1.05rem; color: var(--navy); }
.pay-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pay-row .pay-val { flex: 1 1 auto; }
.copy-btn {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--navy-100);
  border-radius: 8px;
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.copy-btn:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }
.copy-btn:active { transform: scale(.94); }
.copy-btn.copied { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.copy-btn svg { width: 16px; height: 16px; fill: currentColor; }
.copy-toast {
  flex: 0 0 auto;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}
.copy-toast.show { opacity: 1; transform: translateY(0); }

/* Form status */
.form-status {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .95rem;
}
.form-status.ok { background: #e7f5ec; color: var(--success); border: 1px solid #bfe3c9; }
.form-status.err { background: #fdecea; color: var(--danger); border: 1px solid #f5c6c2; }

/* ----------------------------- About ----------------------------- */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: start; }
.about-copy h2 { font-size: clamp(1.6rem, 4.5vw, 2.2rem); margin-bottom: 16px; }
.about-copy p { color: var(--ink); }
.about-mission { border-left: 4px solid var(--gold); padding: 8px 0 8px 16px; background: var(--navy-50); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.stat {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
}
.stat-num { display: block; font-family: var(--ff-display); font-weight: 700; font-size: 1.9rem; color: var(--gold); }
.stat-label { display: block; font-size: .82rem; color: rgba(255,255,255,.8); margin-top: 4px; }

/* ----------------------------- Contact ----------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.contact-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.contact-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--gold); }
.wa-card { background: var(--navy); border-color: var(--navy); }
.wa-card h3, .wa-card p { color: var(--white); }
.wa-card .contact-action { color: var(--gold); }
.contact-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 11px;
  background: var(--navy-50);
  color: var(--navy);
  flex-shrink: 0;
}
.wa-card .contact-ico { background: rgba(255,255,255,.12); color: var(--gold); }
.contact-ico svg { width: 24px; height: 24px; fill: currentColor; }
.contact-card h3 { font-size: 1.05rem; margin: 0 0 4px; }
.contact-card p { margin: 0; color: var(--muted); font-size: .95rem; }
.contact-action { display: inline-block; margin-top: 8px; font-weight: 600; font-size: .88rem; color: var(--gold-600); }

/* ----------------------------- Footer ----------------------------- */
.site-footer { background: var(--navy); color: rgba(255,255,255,.8); padding: 48px 0 0; }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.1); }
.footer-brand .brand-logo-footer { max-height: 56px; }
.footer-tag { color: rgba(255,255,255,.7); margin: 14px 0 0; font-size: .95rem; max-width: 280px; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.footer-nav a { color: rgba(255,255,255,.78); font-size: .92rem; }
.footer-nav a:hover { color: var(--gold); }
.footer-cta { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.footer-wa { color: var(--gold); font-weight: 600; }
.footer-bottom { display: flex; flex-direction: column; gap: 6px; padding: 20px 20px; text-align: center; }
.footer-bottom p { margin: 0; font-size: .82rem; color: rgba(255,255,255,.6); }
.footer-conf { color: var(--gold) !important; }

/* Mobile footer: centered, structured, predictable. */
@media (max-width: 767px) {
  .footer-inner { text-align: center; gap: 24px; }
  .footer-brand { display: flex; flex-direction: column; align-items: center; }
  .footer-brand .brand-logo-footer { margin: 0 auto; max-height: 44px; }
  .footer-tag { margin: 10px auto 0; text-align: center; max-width: 320px; }
  .footer-nav {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 16px;
    max-width: 360px;
    margin: 0 auto;
  }
  .footer-nav a { font-size: .9rem; padding: 4px 0; }
  .footer-nav a:last-child { grid-column: 1 / -1; } /* center the odd 7th link */
  .footer-cta { align-items: center; gap: 14px; }
  .footer-cta .btn-gold { width: 100%; max-width: 320px; text-align: center; }
  .footer-wa { text-align: center; }
  .footer-bottom { flex-direction: column; gap: 6px; text-align: center; padding: 18px 20px; }
}

/* ----------------------------- Floating WhatsApp ----------------------------- */
.wa-float {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: #25D366;
  color: var(--white);
  border: 2px solid var(--white);
  border-radius: 999px;
  padding: 14px;
  box-shadow: var(--shadow-lg);
  transition: transform .15s ease, box-shadow .15s ease;
  overflow: hidden;
}
.wa-float:hover { transform: translateY(-2px) scale(1.02); color: var(--white); }
.wa-float .wa-icon { width: 28px; height: 28px; }
.wa-float-label {
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 700;
  font-size: .92rem;
  transition: max-width .25s ease, margin .25s ease, opacity .2s ease;
  opacity: 0;
}
.wa-float:hover .wa-float-label { max-width: 140px; margin-left: 8px; opacity: 1; }

/* ----------------------------- Chat widget (AI drawer) ----------------------------- */
/* Overlay + bottom drawer pattern (adapted from JetCityJourney). On mobile the
   drawer is full-width and full-height so the soft keyboard never hides the
   input; body scroll is locked while open. */

.chat-overlay {
  position: fixed;
  inset: 0;
  background: rgba(3, 38, 80, .45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
  z-index: 1040;
}
.chat-overlay.active { opacity: 1; visibility: visible; }

.chat-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 420px;
  height: 100%;
  max-height: 720px;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -8px 32px rgba(3, 38, 80, .18);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  visibility: hidden;
  transition: transform .35s cubic-bezier(.32, .72, 0, 1), visibility .35s;
  z-index: 1050;
}
.chat-drawer.active { transform: translateY(0); visibility: visible; }

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--navy);
  color: var(--white);
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}
.chat-header__info { display: flex; align-items: center; gap: 10px; }
.chat-header__avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: 1rem;
}
.chat-header__title { font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--white); }
.chat-header__subtitle { font-size: .75rem; opacity: .85; }
.chat-header__close {
  background: none; border: 0; color: var(--white);
  padding: 4px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}
.chat-header__close svg { width: 20px; height: 20px; fill: currentColor; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-alt);
  -webkit-overflow-scrolling: touch;
}

.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 85%;
  animation: chatFadeIn .25s ease;
}
.chat-message.user { align-self: flex-end; align-items: flex-end; }
.chat-message.bot { align-self: flex-start; align-items: flex-start; }

.chat-bubble {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: .9rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.chat-message.user .chat-bubble { background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; }
.chat-message.bot .chat-bubble { background: var(--white); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 4px; }

/* Quick replies */
.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
}
.chat-quick button {
  border: 1px solid var(--navy-100);
  background: var(--navy-50);
  color: var(--navy);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.chat-quick button:hover { background: var(--navy); color: var(--white); }

/* Input footer */
.chat-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
  margin: 0;
}
.chat-input {
  flex: 1 1 auto;
  font: inherit;
  font-size: .92rem;
  color: var(--ink);
  border: 1.5px solid var(--line-strong);
  border-radius: 24px;
  padding: 10px 16px;
  min-width: 0;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.chat-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--navy-50); }
.chat-send {
  flex: 0 0 auto;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--gold);
  color: var(--navy);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .15s ease, transform .12s ease;
}
.chat-send:hover { background: var(--gold-600); color: var(--white); }
.chat-send:active { transform: scale(.95); }
.chat-send:disabled { background: var(--line-strong); color: var(--muted); cursor: not-allowed; }
.chat-send svg { width: 20px; height: 20px; fill: currentColor; }

.chat-wa-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px 12px;
  background: var(--white);
  font-size: .8rem; font-weight: 600;
  color: var(--muted);
  flex-shrink: 0;
}
.chat-wa-link:hover { color: var(--gold-600); }
.chat-wa-link .wa-icon { width: 16px; height: 16px; fill: currentColor; }

/* Typing indicator */
.chat-typing { display: inline-flex; align-items: center; gap: 5px; padding: 14px 16px; }
.chat-typing span {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
  animation: chatTyping 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatTyping {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-5px); opacity: 1; }
}
@keyframes chatFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Markdown content inside bot bubbles */
.chat-message.bot .chat-bubble a { color: var(--gold-600); font-weight: 600; text-decoration: underline; }
.chat-message.bot .chat-bubble a:hover { color: var(--navy); }
.chat-message.bot .chat-bubble strong { color: var(--navy); font-weight: 600; }
.chat-message.bot .chat-bubble .chat-md-h { font-weight: 700; color: var(--navy); margin: 2px 0 4px; }
.chat-message.bot .chat-bubble .chat-md-ul { margin: 4px 0; padding-left: 18px; list-style: disc; }
.chat-message.bot .chat-bubble .chat-md-ul li { margin: 2px 0; }
.chat-message.bot .chat-bubble .chat-md-gap { height: 6px; }

/* Floating chat button (sits above the WhatsApp float) */
.chat-float-btn {
  position: fixed;
  bottom: 5.5rem;
  right: 1.125rem;
  z-index: 1030;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  border: 2px solid var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(3, 38, 80, .35);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: chatFloatPulse 2.5s infinite ease-in-out;
}
.chat-float-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 20px rgba(3, 38, 80, .45); }
.chat-float-btn svg { width: 26px; height: 26px; fill: currentColor; }
.chat-float-btn .close-icon { display: none; }
.chat-float-btn.active .chat-icon { display: none; }
.chat-float-btn.active .close-icon { display: block; }
.chat-float-btn.active { animation: none; background: var(--gold); color: var(--navy); }
@keyframes chatFloatPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

/* Desktop: drawer becomes a floating card */
@media (min-width: 640px) {
  .chat-drawer {
    bottom: 1.5rem;
    right: 1.5rem;
    height: 640px;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    border-radius: 16px;
  }
  .chat-header { border-radius: 16px 16px 0 0; }
}

/* While the chat drawer is open, hide the WhatsApp float so it doesn't crowd
   the screen (it remains reachable from inside the drawer). */
body.chat-open .wa-float { display: none !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .chat-float-btn { animation: none; }
  .chat-typing span { animation: none; opacity: .6; }
  .chat-message { animation: none; }
}

/* ----------------------------- Responsive ----------------------------- */
/* Below desktop: header shows only logo + hamburger so the logo can fill
   the whole nav bar (no margin) and stay big and clear. Place Order and
   WhatsApp remain reachable via the mobile menu, hero and floating button. */
@media (max-width: 1199px) {
  .site-header .btn-wa-header,
  .site-header .btn-gold { display: none; }
  .site-header { gap: 28px; }
  .brand-logo { max-width: calc(100vw - 112px); }
  .footer-brand .brand-logo-footer { max-height: 48px; }
}

/* ----------------------------- Mobile cards (<= 599px) -----------------------------
   Approach adapted from NewWorldConsulting "How we work": 2-per-line grids break
   out of the container padding (full-bleed) so two cards get the full viewport
   width, with a tight 6px gap and reduced padding/radius/font sizes so content
   fits comfortably. The "What we cover" grid stays one-per-line but shrinks. */
@media (max-width: 599px) {
  /* 1) Why Nornica — 2 cards per line */
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-inline: -20px;
    width: calc(100% + 40px);
  }
  .feature-card { padding: 14px; border-radius: 8px; }
  .feature-ico { width: 34px; height: 34px; border-radius: 8px; margin-bottom: 10px; }
  .feature-ico svg { width: 18px; height: 18px; }
  .feature-card h3 { font-size: .92rem; margin-bottom: 4px; line-height: 1.25; }
  .feature-card p { font-size: .8rem; line-height: 1.45; }

  /* 2) What we cover — 1 card per line, reduced margin/padding */
  .services-grid { grid-template-columns: 1fr; gap: 12px; }
  .svc-block { padding: 16px; border-radius: 8px; }
  .svc-title { font-size: 1rem; margin-bottom: 10px; }
  .chip-list { gap: 6px; }
  .chip-list li { padding: 5px 11px; font-size: .8rem; }

  /* 3) How it works — 2 cards per line */
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-inline: -20px;
    width: calc(100% + 40px);
  }
  .step { padding: 14px; border-radius: 8px; }
  .step-num { width: 30px; height: 30px; font-size: .9rem; margin-bottom: 10px; box-shadow: 0 0 0 4px var(--gold-50); }
  .step h3 { font-size: .92rem; margin-bottom: 4px; line-height: 1.25; }
  .step p { font-size: .8rem; line-height: 1.45; }

  /* 4) Contact — 2 cards per line */
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-inline: -20px;
    width: calc(100% + 40px);
  }
  .contact-card { padding: 14px; border-radius: 8px; gap: 10px; flex-direction: column; }
  .contact-ico { width: 34px; height: 34px; border-radius: 8px; }
  .contact-ico svg { width: 18px; height: 18px; }
  .contact-card h3 { font-size: .9rem; margin: 0 0 2px; line-height: 1.25; }
  .contact-card p { font-size: .78rem; line-height: 1.4; }
  .contact-action { margin-top: 6px; font-size: .8rem; }
}

@media (min-width: 600px) {
  .feature-grid, .services-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .hero { padding: 80px 0 90px; }
  .hero-grid { grid-template-columns: 1.15fr .85fr; gap: 50px; }
  .hero-card { margin: 0 0 0 auto; }
  .section { padding: 84px 0; }
  .order-form { padding: 36px; }
  .form-progress li { font-size: .9rem; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 1.4fr .9fr; gap: 48px; }
  .footer-inner { grid-template-columns: 1.2fr 1.4fr .8fr; align-items: start; text-align: left; }
  .footer-brand { align-items: flex-start; }
  .footer-tag { text-align: left; margin-left: 0; }
  .footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; max-width: none; }
  .footer-nav a:last-child { grid-column: auto; }
  .footer-cta { align-items: flex-end; }
  .footer-cta .btn-gold { width: auto; max-width: none; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 992px) {
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .contact-grid { grid-template-columns: repeat(4, 1fr); }
  .about-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; gap: 22px; }
}

/* ----------------------------- Motion / a11y ----------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.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;
}