@charset "UTF-8";

/* ==========================================================================
   Wulo — site stylesheet
   --------------------------------------------------------------------------
   Hand-written rather than Bootstrap. The previous site loaded Bootstrap,
   Animate.css, WOW.js and LineIcons — around 250 KB of CSS and 75 KB of JS to
   render a brochure. None of it is needed here, and dropping it means the
   whole site works offline from a file:// URL with no network requests at all.

   Every colour below is lifted from the Android apps' colors.xml rather than
   picked to look similar, so a screenshot of the app and a section of this
   site put side by side are the same blue. Buyer-facing surfaces use the buyer
   palette; seller-facing surfaces use the seller app's deeper "space blue",
   which is exactly how the two apps distinguish themselves from each other.
   ========================================================================== */

/* --- Fonts. Self-hosted TTFs; no request ever leaves the machine. --------- */
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/firasans-300.ttf") format("truetype"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/firasans-400.ttf") format("truetype"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/firasans-500.ttf") format("truetype"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/firasans-600.ttf") format("truetype"); }
@font-face { font-family: "Fira Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/firasans-700.ttf") format("truetype"); }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/heebo-400.ttf") format("truetype"); }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/heebo-500.ttf") format("truetype"); }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/heebo-600.ttf") format("truetype"); }
@font-face { font-family: "Heebo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/heebo-700.ttf") format("truetype"); }

:root {
  /* Buyer app palette — colors.xml, verbatim. */
  --cyan:        #36C3EF;   /* blue_36C3EF  — the brand colour, shared with the old site */
  --blue:        #3F71FA;   /* blue_3F71FA  — buyer primary */
  --blue-deep:   #005CAC;   /* blue_005CAC */
  --blue-tint:   #EAF9FE;   /* blue_EAF9FE */

  /* Seller app palette — deliberately deeper, same as in the app. */
  --seller:      #1E88B8;   /* shelf_selected */
  --seller-dark: #16698D;   /* shelf_selected_dark */
  --seller-deep: #00426F;
  --seller-tint: #E2EFF7;

  /* Paid placement + verification, straight from the buyer app. */
  --gold:        #B8860B;   /* sponsored_accent */
  --gold-surface:#FFFCF2;   /* sponsored_surface */
  --gold-text:   #7A5A08;   /* sponsored_text */

  /* Neutrals — the seller app's shelf scale, which is the more considered one. */
  --bg:      #F7F6F3;       /* shelf_background */
  --surface: #FFFFFF;       /* shelf_surface */
  --border:  #D7DCE2;       /* shelf_border */
  --heading: #1E293B;       /* shelf_heading */
  --body:    #374151;       /* shelf_body */
  --muted:   #6B7280;       /* shelf_muted */
  --ink:     #0F1B2A;

  --radius:    14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --shadow:    0 1px 2px rgba(15,27,42,.04), 0 8px 24px rgba(15,27,42,.06);
  --shadow-lg: 0 2px 4px rgba(15,27,42,.04), 0 18px 48px rgba(15,27,42,.10);
  --wrap: 1140px;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  font-family: "Heebo", "Fira Sans", system-ui, sans-serif;
  color: var(--heading);
  line-height: 1.2;
  margin: 0 0 .5em;
  letter-spacing: -.02em;
}
h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem);  font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem);   font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }
p  { margin: 0 0 1rem; }
a  { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .4rem; }
strong { color: var(--heading); font-weight: 600; }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5rem 0; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint    { background: var(--bg); }
.section--blue    { background: var(--blue-tint); }
.section--seller  { background: var(--seller-tint); }

.section-head { max-width: 720px; margin: 0 auto clamp(32px, 5vw, 56px); text-align: center; }
.section-head p { color: var(--muted); font-size: 1.075rem; margin-bottom: 0; }
.section-head--left { margin-left: 0; text-align: left; }

.eyebrow {
  display: inline-block; font-family: "Heebo", sans-serif; font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--blue-deep);
  background: var(--blue-tint); border-radius: 100px; padding: .4rem .9rem; margin-bottom: 1rem;
}
.eyebrow--seller { color: var(--seller-deep); background: var(--seller-tint); }
.eyebrow--gold   { color: var(--gold-text);   background: var(--gold-surface); }

/* Grid and flex children default to min-width:auto, which means they refuse to
   shrink below their content's intrinsic minimum. A single nowrap table cell
   inside a column is then enough to push the whole track wider than the screen
   and give the page a horizontal scrollbar on a phone — which is exactly what
   happened to the legal pages before this rule existed. Overriding it lets the
   track shrink and hands the overflow to .table-scroll, where it belongs. */
.grid > *, .split > *, .legal-layout > *, .footer-grid > * { min-width: 0; }
.table-scroll { max-width: 100%; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.split {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 72px); align-items: center;
}
.split--narrow-left { grid-template-columns: .85fr 1.15fr; }
@media (max-width: 900px) {
  .split, .split--narrow-left { grid-template-columns: 1fr; }
  .split__media { order: -1; }
}

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: "Heebo", sans-serif; font-weight: 600; font-size: 1rem; line-height: 1;
  padding: .95rem 1.6rem; border-radius: 100px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; text-align: center;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--primary { background: var(--blue); color: #fff; box-shadow: 0 6px 18px rgba(63,113,250,.28); }
.btn--primary:hover { background: #2f61e8; color: #fff; }
.btn--seller  { background: var(--seller); color: #fff; box-shadow: 0 6px 18px rgba(30,136,184,.28); }
.btn--seller:hover { background: var(--seller-dark); color: #fff; }
.btn--ghost   { background: transparent; color: var(--blue-deep); border-color: var(--border); }
.btn--ghost:hover { background: var(--surface); border-color: var(--blue); color: var(--blue-deep); }
.btn--light   { background: #fff; color: var(--blue-deep); }
.btn--light:hover { background: #f2f7ff; color: var(--blue-deep); }
.btn--block   { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: 1.05rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.btn-row--center { justify-content: center; }

/* --- Store badge ----------------------------------------------------------
   The apps are not on Play yet. Rather than a dead "Download" button or a
   greyed-out placeholder, the badge states the real status and links to the
   notify form. Swap the href for the Play listing when it goes live and the
   component needs no other change.                                           */
.store-badge {
  display: inline-flex; align-items: center; gap: .8rem;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  padding: .8rem 1.4rem .8rem 1.15rem; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 22px rgba(15,27,42,.18);
}
.store-badge:hover { transform: translateY(-2px); text-decoration: none; color: #fff; box-shadow: 0 12px 28px rgba(15,27,42,.24); }
.store-badge svg { flex: 0 0 auto; }
.store-badge__text { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge__small { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; opacity: .72; }
.store-badge__big { font-family: "Heebo", sans-serif; font-size: 1.05rem; font-weight: 600; }

/* --- Header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header__inner { display: flex; align-items: center; gap: 20px; height: 74px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 38px; width: auto; }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-nav a {
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .96rem;
  color: var(--body); padding: .5rem .85rem; border-radius: 100px;
}
.site-nav a:hover { background: var(--bg); color: var(--heading); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--blue-deep); background: var(--blue-tint); }
.site-nav .btn { margin-left: 8px; padding: .7rem 1.25rem; font-size: .95rem; }
.site-nav .btn:hover { background: #2f61e8; }

.nav-toggle {
  display: none; margin-left: auto; background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); width: 44px; height: 44px; cursor: pointer;
  align-items: center; justify-content: center; padding: 0;
}
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--heading); position: relative; }
.nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: var(--heading);
}
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 74px; flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 24px 20px;
    gap: 2px; display: none; box-shadow: var(--shadow);
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: .8rem .5rem; }
  .site-nav .btn { margin: 8px 0 0; }
}

/* --- Hero ----------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1100px 460px at 88% -8%, rgba(54,195,239,.20), transparent 62%),
    radial-gradient(760px 380px at 4% 8%, rgba(63,113,250,.11), transparent 60%),
    var(--surface);
  padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 104px);
  overflow: hidden;
}
.hero h1 { margin-bottom: 1rem; }
.hero h1 .accent {
  background: linear-gradient(102deg, var(--blue) 8%, var(--cyan) 92%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--blue);
}
.hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.2rem); color: var(--body); max-width: 33ch; margin-bottom: 1.75rem; }
.hero__note { font-size: .92rem; color: var(--muted); margin-top: 1.1rem; margin-bottom: 0; }
.hero__media { position: relative; }
.hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* Floating proof chips over the hero image. */
.chip {
  position: absolute; display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,255,255,.97); border: 1px solid var(--border); border-radius: 100px;
  padding: .6rem 1rem; box-shadow: var(--shadow); font-size: .88rem; font-weight: 500;
  color: var(--heading); font-family: "Heebo", sans-serif; white-space: nowrap;
}
.chip svg { flex: 0 0 auto; }
.chip--tl { top: 7%;  left: -14px; }
.chip--br { bottom: 9%; right: -10px; }
@media (max-width: 900px) { .chip--tl { left: 6px; } .chip--br { right: 6px; } }
@media (max-width: 480px) { .chip { font-size: .8rem; padding: .5rem .8rem; } }

/* --- Cards ---------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 28px; box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(63,113,250,.4); }
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card__icon {
  width: 52px; height: 52px; border-radius: var(--radius-sm); background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem;
}
.card__icon img { width: 26px; height: 26px; }
.card__icon--seller { background: var(--seller-tint); }
.card__icon--gold   { background: var(--gold-surface); }

/* Numbered steps */
.step { position: relative; padding-left: 62px; }
.step__num {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue); color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: "Heebo", sans-serif; font-weight: 700; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(63,113,250,.3);
}
.step__num--seller { background: var(--seller); box-shadow: 0 4px 12px rgba(30,136,184,.3); }
.step h3 { margin-bottom: .35rem; }
.step p:last-child { margin-bottom: 0; }

/* Category pills — the nine real categories from the app */
.cats { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cat {
  display: inline-flex; align-items: center; gap: .55rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 100px; padding: .7rem 1.25rem;
  font-family: "Heebo", sans-serif; font-weight: 500; font-size: .96rem; color: var(--heading);
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: var(--shadow); }
.cat img { width: 20px; height: 20px; opacity: .9; }

/* Order-status rail, mirroring Constants.ORDER_STATUS in both apps */
.rail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; margin-top: 8px; }
.rail__item { position: relative; padding: 0 10px; text-align: center; }
.rail__dot {
  width: 18px; height: 18px; border-radius: 50%; background: var(--blue); margin: 0 auto 14px;
  box-shadow: 0 0 0 5px rgba(63,113,250,.16); position: relative; z-index: 2;
}
.rail__item:last-child .rail__dot { background: #16A34A; box-shadow: 0 0 0 5px rgba(22,163,74,.16); }
.rail__item::before {
  content: ""; position: absolute; top: 8px; left: -50%; width: 100%; height: 3px;
  background: linear-gradient(90deg, rgba(63,113,250,.22), rgba(63,113,250,.5)); z-index: 1;
}
.rail__item:first-child::before { display: none; }
.rail__label { font-family: "Heebo", sans-serif; font-weight: 600; font-size: .92rem; color: var(--heading); }
.rail__sub { font-size: .82rem; color: var(--muted); }
@media (max-width: 780px) {
  .rail { grid-template-columns: 1fr; gap: 22px; }
  .rail__item { text-align: left; padding-left: 40px; }
  .rail__dot { position: absolute; left: 0; top: 2px; margin: 0; }
  .rail__item::before { left: 8px; top: -22px; width: 3px; height: 22px; background: rgba(63,113,250,.35); }
}

/* Listing card mock — mirrors item_home_popular.xml, gold sponsored treatment included */
.mock {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); max-width: 300px;
}
.mock--sponsored { border-color: rgba(184,134,11,.5); background: var(--gold-surface); }
.mock__img { position: relative; aspect-ratio: 4/3; background: linear-gradient(135deg, var(--blue-tint), var(--seller-tint)); }
.mock__tag {
  position: absolute; top: 10px; left: 10px; background: var(--gold); color: #fff;
  font-family: "Heebo", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; padding: .28rem .6rem; border-radius: 100px;
}
.mock__body { padding: 14px 16px 18px; }
.mock__title { font-family: "Heebo", sans-serif; font-weight: 600; color: var(--blue); display: flex; align-items: center; gap: .35rem; font-size: 1rem; }
.mock__price { font-weight: 600; color: var(--heading); margin-top: .2rem; }
.mock__seller { font-size: .85rem; color: var(--muted); }

/* --- Accordion (FAQ) ------------------------------------------------------ */
.faq { max-width: 820px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: rgba(63,113,250,.45); box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; padding: 20px 56px 20px 22px; position: relative; list-style: none;
  font-family: "Heebo", sans-serif; font-weight: 600; color: var(--heading); font-size: 1.03rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 9px; height: 9px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq__body { padding: 0 22px 20px; }
.faq__body p:last-child, .faq__body ul:last-child { margin-bottom: 0; }

/* --- Callout / notice ----------------------------------------------------- */
.notice {
  border-radius: var(--radius); padding: 20px 24px; border: 1px solid var(--border);
  background: var(--bg); margin: 0 0 1.5rem;
}
.notice--warn { background: var(--gold-surface); border-color: rgba(184,134,11,.42); }
.notice--warn strong { color: var(--gold-text); }
.notice--info { background: var(--blue-tint); border-color: rgba(63,113,250,.32); }
.notice p:last-child { margin-bottom: 0; }
.notice h4 { margin-bottom: .35rem; }

/* --- CTA band ------------------------------------------------------------- */
.cta {
  background: linear-gradient(118deg, var(--blue-deep) 0%, var(--blue) 52%, var(--cyan) 100%);
  color: #fff; border-radius: var(--radius-lg); padding: clamp(36px, 6vw, 64px);
  text-align: center; box-shadow: var(--shadow-lg);
}
.cta h2 { color: #fff; }
.cta p { color: rgba(255,255,255,.92); max-width: 56ch; margin-left: auto; margin-right: auto; }

/* --- Legal / prose pages -------------------------------------------------- */
.page-head {
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: clamp(44px, 6vw, 76px) 0 clamp(36px, 5vw, 56px);
}
.page-head h1 { margin-bottom: .5rem; }
.page-head p { color: var(--muted); margin-bottom: 0; }
.page-head .meta { font-size: .92rem; color: var(--muted); margin-top: .85rem; }

.prose { max-width: 780px; }
.prose h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: 2.75rem; padding-top: .25rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin-top: 1.75rem; }
.prose ul { padding-left: 1.35rem; }
.prose li { margin-bottom: .55rem; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.25rem 0 1.75rem; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: .8rem .9rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-family: "Heebo", sans-serif; font-weight: 600; color: var(--heading); background: var(--bg); }
.prose td:first-child { font-weight: 500; color: var(--heading); white-space: nowrap; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.toc {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px 26px; margin-bottom: 2.5rem;
}
.toc h4 { margin-bottom: .6rem; }
.toc ol { margin-bottom: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .3rem; }

.legal-layout { display: grid; grid-template-columns: 1fr 280px; gap: 56px; align-items: start; }
@media (max-width: 980px) { .legal-layout { grid-template-columns: 1fr; gap: 36px; } }
.aside-card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; position: sticky; top: 98px;
}
.aside-card h4 { margin-bottom: .5rem; }
.aside-card p { font-size: .93rem; color: var(--muted); }
.aside-card p:last-child { margin-bottom: 0; }

/* --- Forms ---------------------------------------------------------------- */
.form-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(24px, 4vw, 36px); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-family: "Heebo", sans-serif; font-weight: 600; font-size: .93rem;
  color: var(--heading); margin-bottom: .4rem;
}
.field .hint { font-size: .86rem; color: var(--muted); margin: .35rem 0 0; }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--heading);
  padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(63,113,250,.16);
}
.field textarea { min-height: 130px; resize: vertical; }
.checkbox { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: 1.25rem; }
.checkbox input { width: 18px; height: 18px; margin-top: .28rem; flex: 0 0 auto; accent-color: var(--blue); }
.checkbox label { font-weight: 400; font-family: inherit; font-size: .95rem; color: var(--body); margin: 0; }

/* --- Contact rows --------------------------------------------------------- */
.contact-row {
  display: flex; align-items: flex-start; gap: 1rem; padding: 1.15rem 0;
  border-bottom: 1px solid var(--border);
}
.contact-row:last-child { border-bottom: 0; }
.contact-row__icon {
  width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--blue-tint);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; color: var(--blue-deep);
}
.contact-row__body { min-width: 0; }
.contact-row h4 { margin-bottom: .15rem; }
.contact-row p { margin-bottom: 0; font-size: .95rem; color: var(--muted); word-break: break-word; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #C3CBD6; padding: clamp(48px, 6vw, 76px) 0 0; }
.site-footer a { color: #C3CBD6; }
.site-footer a:hover { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h5 {
  font-family: "Heebo", sans-serif; color: #fff; font-size: .82rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 1.1rem;
}
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .6rem; }
.footer-links a { font-size: .95rem; }
.site-footer__brand img { height: 40px; filter: brightness(0) invert(1); margin-bottom: 1.1rem; }
.site-footer__brand p { font-size: .95rem; max-width: 34ch; color: #97A3B2; }
.site-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.10); margin-top: clamp(36px, 5vw, 56px);
  padding: 24px 0 32px; display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between; font-size: .9rem; color: #8A97A6;
}
.site-footer__bottom p { margin: 0; }
.legal-line { font-size: .86rem; color: #7C8896; }

/* --- Utilities ------------------------------------------------------------ */
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: .92rem; }
.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;
}