/*
Theme Name: Yiwu Agent
Theme URI: https://sourcingagentyiwu.com
Author: Sourcing Agent Yiwu
Description: Bilingual (EN/RU) theme for a Yiwu sourcing and buying agency. Self-contained SEO layer, Services custom post type, built-in quote form. No page builder, no external services.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: yiwuagent
*/

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */
:root {
  --brand:      #0b3a5d;
  --brand-700:  #0a3050;
  --brand-300:  #3d7ba8;
  --accent:     #d97316;
  --accent-700: #b45c0c;
  --ink:        #101828;
  --body:       #3f4a5a;
  --muted:      #667085;
  --line:       #e2e8f0;
  --soft:       #f6f8fa;
  --soft-2:     #eef3f7;
  --white:      #ffffff;
  --ok:         #0f7b52;

  --wrap: 1180px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --shadow-md: 0 4px 8px -2px rgba(16,24,40,.08), 0 12px 24px -6px rgba(16,24,40,.10);
  --shadow-lg: 0 12px 28px -8px rgba(16,24,40,.16), 0 32px 64px -16px rgba(16,24,40,.16);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------ *
 * Reset / base
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--body);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--accent-700); text-decoration: underline; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 700; line-height: 1.22; margin: 0 0 .6em; letter-spacing: -.015em; }
h1 { font-size: clamp(2rem, 1.25rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.1rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); }
p  { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.3em; padding-left: 1.35em; }
li { margin-bottom: .5em; }
strong { color: var(--ink); font-weight: 650; }
blockquote {
  margin: 1.8em 0; padding: 1.1em 1.4em;
  border-left: 4px solid var(--accent);
  background: var(--soft); border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 1.03em; color: var(--ink);
}
blockquote p:last-child { margin-bottom: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
code { background: var(--soft-2); padding: .12em .4em; border-radius: 5px; font-size: .9em; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

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

/* ------------------------------------------------------------------ *
 * Layout primitives
 * ------------------------------------------------------------------ */
.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 2.5rem, 760px); margin-inline: auto; }
.section { padding: clamp(3rem, 2rem + 4vw, 5.5rem) 0; }
.section-sm { padding: clamp(2.2rem, 1.6rem + 2.5vw, 3.5rem) 0; }
.section.soft { background: var(--soft); }
.section.ink { background: var(--brand); color: #d8e6f0; }
.section.ink h2, .section.ink h3 { color: #fff; }

.grid { display: grid; gap: 1.6rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Grid/flex children must be allowed to shrink or long words force a wider
   page than the viewport, which body overflow-x:hidden then clips. */
.grid > *, .split > *, .footer-top > *, .stats > *, .hero-inner > * { min-width: 0; }

.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.8rem, 1rem + 3vw, 3.5rem); align-items: center; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: .8rem;
}
.section.ink .eyebrow { color: #f6b878; }
.lead { font-size: 1.12rem; color: var(--body); }
.center { text-align: center; }
.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 1.4rem + 2vw, 3rem); text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.6rem; border-radius: 10px; font-weight: 650; font-size: 1rem;
  border: 1.5px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  line-height: 1.3;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--accent-700); color: #fff; box-shadow: var(--shadow-md); }
.btn-dark { background: var(--brand); color: #fff; }
.btn-dark:hover { background: var(--brand-700); color: #fff; }
.btn-ghost { background: transparent; color: var(--brand); border-color: var(--line); }
.btn-ghost:hover { background: var(--soft); color: var(--brand); border-color: var(--brand-300); }
.btn-on-dark { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.btn-on-dark:hover { background: rgba(255,255,255,.2); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
@media (max-width: 520px) { .btn-row { flex-direction: column; } .btn-row .btn { width: 100%; } }

/* ------------------------------------------------------------------ *
 * Header
 * ------------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 1.2rem; min-height: 74px; }
.brand { display: flex; align-items: center; gap: .65rem; font-weight: 800; color: var(--ink); font-size: 1.12rem; letter-spacing: -.02em; flex: none; }
.brand:hover { text-decoration: none; color: var(--ink); }
/* Three letters, so slightly tighter than a two-letter mark would need. */
.brand-mark { width: 40px; height: 40px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: .82rem; font-weight: 800; letter-spacing: .02em; flex: none; }
.brand-mark span { line-height: 1; }
.brand small { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; }

.nav { margin-left: auto; }
.nav ul { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav li { margin: 0; position: relative; }
/* nowrap matters for Russian: labels like "Как работаем" would otherwise break
   mid-label and push the header to two ragged lines. */
.nav a { display: block; padding: .55rem .62rem; border-radius: 8px; font-size: .93rem; font-weight: 550; color: var(--body); white-space: nowrap; }
.nav a:hover { background: var(--soft); color: var(--brand); text-decoration: none; }
.nav .current-menu-item > a, .nav .current_page_item > a { color: var(--brand); font-weight: 650; }

/* dropdown */
.nav ul ul {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: .45rem; flex-direction: column; align-items: stretch;
  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .16s ease;
}
.nav li:hover > ul, .nav li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); }
.nav ul ul a { padding: .5rem .7rem; font-size: .92rem; white-space: normal; }

.header-cta { display: flex; align-items: center; gap: .6rem; flex: none; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1.5px solid var(--line);
  border-radius: 9px; width: 44px; height: 42px; cursor: pointer; padding: 0;
  place-items: center; color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }

/* Russian labels run roughly a third longer than English, so the bar is
   collapsed to the menu button earlier than an English-only site would need. */
@media (max-width: 1220px) {
  .nav-toggle { display: grid; }
  .header-cta .btn { display: none; }
  .nav {
    position: fixed; inset: 74px 0 auto 0; background: #fff; margin: 0;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    max-height: calc(100vh - 74px); overflow-y: auto; padding: .8rem 1.25rem 1.6rem;
    display: none;
  }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav a { padding: .8rem .3rem; border-bottom: 1px solid var(--line); border-radius: 0; }
  .nav ul ul {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; padding: 0 0 0 1rem; min-width: 0; display: block;
  }
}

/* ------------------------------------------------------------------ *
 * Hero
 * ------------------------------------------------------------------ */
.hero {
  position: relative; color: #e8f0f6; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(1100px 520px at 82% -8%, rgba(217,115,22,.30), transparent 62%),
    radial-gradient(900px 480px at 8% 108%, rgba(61,123,168,.34), transparent 60%),
    linear-gradient(158deg, #06243c 0%, #0b3a5d 46%, #10496f 100%);
}
/* Photographic layer. The image sits behind a deep gradient so the headline
   keeps a real contrast ratio no matter how bright the photo is. */
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  transform: scale(1.04);
  filter: saturate(.85);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(4,22,38,.95) 0%, rgba(6,32,54,.88) 42%, rgba(8,42,68,.62) 72%, rgba(10,50,80,.45) 100%),
    linear-gradient(180deg, rgba(4,20,34,.55) 0%, transparent 35%, rgba(4,20,34,.75) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 78%);
}
.hero-inner { position: relative; z-index: 1; padding: clamp(3.8rem, 2.4rem + 6vw, 7.5rem) 0 clamp(3rem, 2rem + 4vw, 5rem); }
.hero h1 { text-wrap: balance; text-shadow: 0 2px 24px rgba(0,20,40,.45); }
.hero h1 .hl {
  background: linear-gradient(96deg, #ffb765, #f79433 55%, #ffcf9a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero h1 { color: #fff; max-width: 17ch; margin-bottom: .55em; }
.hero h1 .hl { color: #f9b370; }
.hero .lead { color: #c5dae8; font-size: clamp(1.03rem, .98rem + .35vw, 1.2rem); max-width: 58ch; margin-bottom: 1.9rem; }
.hero .eyebrow { color: #f6b878; }
.hero-badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.7rem; }
.hero-badge {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; font-weight: 600;
  padding: .42rem .85rem; border-radius: 100px;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.20); color: #dbe9f3;
}
.hero-badge svg { width: 15px; height: 15px; color: #f9b370; flex: none; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1.2rem; margin-top: clamp(2.4rem, 1.8rem + 2vw, 3.4rem); padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.16); }
.stat-t { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: .2rem; display: flex; align-items: center; gap: .45rem; }
.stat-t svg { width: 17px; height: 17px; color: #f9b370; flex: none; }
.stat-d { font-size: .88rem; color: #a9c6d9; line-height: 1.55; }

/* Page hero (inner pages) */
.page-hero { background: linear-gradient(160deg, #0a3050, #0d4267); color: #dce9f2; padding: clamp(2.6rem, 2rem + 3vw, 4.2rem) 0 clamp(2.2rem, 1.8rem + 2.5vw, 3.4rem); }
.page-hero h1 { color: #fff; margin-bottom: .35em; }
.page-hero p { color: #b8d1e2; max-width: 66ch; margin-bottom: 0; font-size: 1.06rem; }

/* ------------------------------------------------------------------ *
 * Breadcrumbs
 * ------------------------------------------------------------------ */
.crumbs { font-size: .84rem; color: #9fbdd2; margin-bottom: 1rem; }
.crumbs a { color: #cfe2ee; }
.crumbs span { opacity: .6; margin: 0 .4rem; }

/* ------------------------------------------------------------------ *
 * Cards
 * ------------------------------------------------------------------ */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1.65rem; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #cfe0ec; }
.card h3 { margin-bottom: .45em; font-size: 1.14rem; }
.card p { color: var(--muted); font-size: .96rem; margin-bottom: 1em; }
.card p:last-of-type { margin-bottom: 0; }
/* .more is used in service cards, post cards and sidebars, so style the class
   itself rather than scoping it to one parent. */
.more { font-weight: 650; font-size: .93rem; color: var(--accent-700); display: inline-flex; align-items: center; gap: .35rem; }
.more svg { width: 15px; height: 15px; flex: none; transition: transform .15s ease; }
.card .more, .post-card .more { margin-top: auto; padding-top: .9rem; }
.card:hover .more svg, .post-card:hover .more svg { transform: translateX(3px); }
.card-ico {
  width: 46px; height: 46px; border-radius: 11px; display: grid; place-items: center;
  background: var(--soft-2); color: var(--brand); margin-bottom: 1.1rem; flex: none;
}
.card-ico svg { width: 23px; height: 23px; }
.card.accent .card-ico { background: #fdf1e5; color: var(--accent-700); }

.step { display: flex; gap: 1.1rem; align-items: flex-start; }
.step-n {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 750; font-size: .98rem; flex: none;
}
.step h3 { font-size: 1.08rem; margin-bottom: .3em; }
.step p { color: var(--muted); font-size: .95rem; margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Content typography (post + page bodies)
 * ------------------------------------------------------------------ */
.entry { font-size: 1.06rem; line-height: 1.78; }
.entry > h2 { margin-top: 2.2em; padding-top: .2em; }
.entry > h2:first-child { margin-top: 0; }
.entry > h3 { margin-top: 1.8em; }
.entry ul, .entry ol { padding-left: 1.4em; }
.entry li { margin-bottom: .6em; }
.entry a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: #b9d2e2; }
.entry a:hover { text-decoration-color: var(--accent); }
.entry table { width: 100%; border-collapse: collapse; margin: 1.8em 0; font-size: .95rem; }
.entry th, .entry td { border: 1px solid var(--line); padding: .7rem .85rem; text-align: left; vertical-align: top; }
.entry th { background: var(--soft); color: var(--ink); font-weight: 650; }
.entry-wrap { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: clamp(2rem,1.4rem+2.5vw,3.5rem); align-items: start; }
@media (max-width: 960px) { .entry-wrap { grid-template-columns: 1fr; } }
.table-scroll { overflow-x: auto; }

.sidebar { position: sticky; top: 96px; display: grid; gap: 1.2rem; }
.side-card { background: var(--soft); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.4rem; }
.side-card h3 { font-size: 1.05rem; margin-bottom: .5em; }
.side-card p { font-size: .93rem; color: var(--muted); margin-bottom: 1rem; }
.side-card ul { list-style: none; padding: 0; margin: 0; }
.side-card li { margin-bottom: .55rem; font-size: .93rem; }
.side-card .btn { width: 100%; }

/* ------------------------------------------------------------------ *
 * Post list
 * ------------------------------------------------------------------ */
.post-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.5rem; display: flex; flex-direction: column; transition: transform .15s ease, box-shadow .2s ease; }
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.post-card h3 { font-size: 1.1rem; margin-bottom: .4em; }
.post-card h3 a { color: var(--ink); }
.post-card h3 a:hover { color: var(--brand); text-decoration: none; }
.post-card p { font-size: .94rem; color: var(--muted); margin-bottom: 1em; }
.post-meta { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; margin-bottom: .7rem; }
.post-card .more { margin-top: auto; }

.entry-head { margin-bottom: 2rem; }
.entry-head .post-meta { margin-bottom: .8rem; }

.pagination { display: flex; flex-wrap: wrap; gap: .45rem; justify-content: center; margin-top: 3rem; }
.pagination .page-numbers {
  display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 .8rem;
  border: 1px solid var(--line); border-radius: 9px; font-weight: 600; font-size: .95rem; color: var(--body);
}
.pagination .page-numbers:hover { background: var(--soft); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ------------------------------------------------------------------ *
 * FAQ
 * ------------------------------------------------------------------ */
.faq-list { display: grid; gap: .75rem; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  padding: 1.1rem 3rem 1.1rem 1.3rem; font-size: 1.01rem; font-weight: 650; color: var(--ink);
  font-family: inherit; position: relative; line-height: 1.5;
}
.faq-q::after {
  content: ""; position: absolute; right: 1.3rem; 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-item.open .faq-q::after { transform: translateY(-25%) rotate(225deg); }
.faq-a { padding: 0 1.3rem; max-height: 0; overflow: hidden; transition: max-height .28s ease, padding .28s ease; }
.faq-item.open .faq-a { padding: 0 1.3rem 1.2rem; max-height: 1200px; }
.faq-a p { color: var(--body); font-size: .98rem; margin-bottom: .8em; }
.faq-a p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Quote form
 * ------------------------------------------------------------------ */
.quote-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); box-shadow: var(--shadow-md); }
.field { margin-bottom: 1.05rem; }
.field label { display: block; font-size: .88rem; font-weight: 650; color: var(--ink); margin-bottom: .38rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: .78rem .9rem; border: 1.5px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 1rem; color: var(--ink); background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--brand-300); box-shadow: 0 0 0 3px rgba(61,123,168,.16);
}
.field textarea { min-height: 128px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field-row > * { min-width: 0; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.form-note { font-size: .82rem; color: var(--muted); margin: .9rem 0 0; }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice { padding: .95rem 1.15rem; border-radius: 10px; margin-bottom: 1.3rem; font-size: .96rem; border: 1px solid; }
.notice-ok { background: #eafaf3; border-color: #a8e0c8; color: #0b5f40; }
.notice-err { background: #fdeeee; border-color: #f3c0c0; color: #97231f; }

/* ------------------------------------------------------------------ *
 * CTA band
 * ------------------------------------------------------------------ */
.cta-band {
  background: linear-gradient(150deg, #0a3050, #0e4770 60%, #12547f);
  color: #d9e8f2; border-radius: var(--radius-lg); padding: clamp(2rem, 1.5rem + 2.5vw, 3.4rem);
  position: relative; overflow: hidden;
}
.cta-band h2 { color: #fff; max-width: 22ch; }
.cta-band p { color: #b6d2e4; max-width: 62ch; }
.cta-band .btn-row { margin-top: 1.6rem; }

/* ------------------------------------------------------------------ *
 * Footer
 * ------------------------------------------------------------------ */
.site-footer { background: #08283f; color: #9fbdd2; padding: clamp(2.8rem, 2rem + 3vw, 4.2rem) 0 1.8rem; font-size: .94rem; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.4rem; border-bottom: 1px solid rgba(255,255,255,.11); }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer-top { grid-template-columns: 1fr; gap: 1.6rem; } }
.site-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .6rem; }
.site-footer a { color: #9fbdd2; overflow-wrap: anywhere; }
.site-footer a:hover { color: #fff; }
.footer-brand { display: flex; align-items: center; gap: .6rem; color: #fff; font-weight: 800; font-size: 1.1rem; margin-bottom: .9rem; }
.footer-brand .brand-mark { background: rgba(255,255,255,.13); }
.footer-about { color: #8fb0c7; line-height: 1.65; max-width: 42ch; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-top: 1.6rem; font-size: .87rem; color: #7fa2bb; }
.footer-legal { max-width: 78ch; font-size: .82rem; color: #6f93ad; line-height: 1.6; margin-top: 1.4rem; }
.lang-switch { display: inline-flex; align-items: center; gap: .5rem; }
.lang-switch a {
  padding: .3rem .7rem; border-radius: 7px; border: 1px solid rgba(255,255,255,.2);
  font-weight: 650; font-size: .85rem; color: #b9d3e5;
}
.lang-switch a.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.lang-switch a:hover { text-decoration: none; border-color: rgba(255,255,255,.5); }
.lang-switch span { display: none; }

/* Header language switch variant */
.site-header .lang-switch a { color: var(--muted); border-color: var(--line); }
.site-header .lang-switch a.on { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ------------------------------------------------------------------ *
 * Floating WhatsApp
 * ------------------------------------------------------------------ */
.wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(0,0,0,.24);
  transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.07); color: #fff; }
.wa-float svg { width: 30px; height: 30px; }

/* ------------------------------------------------------------------ *
 * Misc
 * ------------------------------------------------------------------ */
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.tag {
  font-size: .82rem; padding: .32rem .75rem; border-radius: 100px;
  background: var(--soft-2); color: var(--brand); font-weight: 600;
}
a.tag:hover { background: var(--brand); color: #fff; text-decoration: none; }

/* ------------------------------------------------------------------ *
 * Image components
 * ------------------------------------------------------------------ */
.thumb {
  position: relative; display: block; overflow: hidden;
  background: var(--soft-2); aspect-ratio: 16 / 9;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.6,.2,1); }
.thumb::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(8,40,63,.30));
  opacity: 0; transition: opacity .3s ease;
}
.card:hover .thumb img, .post-card:hover .thumb img { transform: scale(1.05); }
.card:hover .thumb::after, .post-card:hover .thumb::after { opacity: 1; }

/* Cards that lead with a picture lose their own padding at the top. */
.card.has-media, .post-card.has-media { padding: 0; overflow: hidden; }
.card.has-media .card-body, .post-card.has-media .card-body { padding: 1.45rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.card.has-media .card-ico {
  position: absolute; top: 1rem; left: 1rem; margin: 0; z-index: 2;
  background: rgba(255,255,255,.92); backdrop-filter: blur(8px); box-shadow: var(--shadow-sm);
}
.card.has-media .thumb { aspect-ratio: 3 / 2; }
.card.has-media { position: relative; }

/* Article lead image */
.entry-media {
  margin: 0 0 2.2rem; border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 16 / 9; background: var(--soft-2);
}
.entry-media img { width: 100%; height: 100%; object-fit: cover; }

/* Hero for inner pages, with an optional photographic band behind it */
.page-hero { position: relative; overflow: hidden; isolation: isolate; }
.page-hero-media {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
}
.page-hero-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,28,46,.95) 0%, rgba(8,38,62,.90) 50%, rgba(10,52,82,.72) 100%);
}
.page-hero h1 { text-wrap: balance; }

/* Alternating picture + text band */
.feature-media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); aspect-ratio: 3 / 2; }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.split.reverse .feature-media { order: -1; }
@media (max-width: 880px) { .split.reverse .feature-media { order: 0; } }

/* Trust row: plain statements, no invented numbers */
.trust-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.4rem; padding: 1.6rem 0;
}
.trust-row > * { min-width: 0; }
.trust-item { display: flex; gap: .8rem; align-items: flex-start; }
.trust-item svg { width: 21px; height: 21px; color: var(--accent); flex: none; margin-top: .18rem; }
.trust-item strong { display: block; color: var(--ink); font-size: .97rem; margin-bottom: .12rem; }
.trust-item span { font-size: .89rem; color: var(--muted); line-height: 1.55; }

/* Section heading rule */
.section-head .eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px;
  background: var(--accent); vertical-align: middle; margin-right: .6rem;
}

/* Quiet reveal on scroll.
   Content is visible by DEFAULT. It is only hidden once the inline head script
   has confirmed scripting is alive (html.js), and that flag is withdrawn if
   app.js never initialises. Content must never be invisible because a script
   failed to load. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.6,.2,1); }
.js .reveal.in { opacity: 1; transform: none; }

/* The header carries a language switch for desktop; the one inside the mobile
   panel is a duplicate and must only appear when that panel is in use. */
.nav-lang { display: none; }
@media (max-width: 1220px) {
  .nav-lang { display: flex; margin-top: 1rem; }
  .header-cta > .lang-switch { display: none; }
}

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