/* ============================================================
   Velfine Overseas — Front-end stylesheet
   Light premium theme with layered depth.

   The token names kept their dark-theme meaning (--ink is still "the base
   page tone", --text is still "the primary reading colour") even though the
   values inverted — a deep ink-navy that used to be the background is now
   the text colour, and the near-white that used to be text is now closest
   to the card surface. Renaming every token across two stylesheets and a
   couple hundred call sites would have been a much bigger, riskier change
   for no behavioural difference; only the values below moved.

   A handful of elements are deliberately EXCEPTIONS and stay on a dark
   background regardless of this token swap — the footer, the lightbox,
   the mobile nav's scrim-adjacent chrome that sits over photos. Those
   scope their own --text/--muted overrides locally rather than reading
   these global tokens, and are commented at each site.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Authored light. Declaring it stops a browser/OS forced-dark mode from
     inverting an already-light, colour-considered design into a muddy one. */
  color-scheme: light;

  /* surfaces, base (page) to deepest card tone */
  --ink:        #FAF8F3;
  --ink-2:      #F2EEE4;
  --surface:    #FFFFFF;
  --surface-2:  #FDFBF7;
  --surface-3:  #F2EDE3;

  /* accents — the brand gold stays the brand gold; the two text-bearing
     variants (gold-2, emerald-2) are deepened from their dark-theme values
     because those were tuned to read on navy and are unreadable on cream. */
  --gold:       #CE760D;   /* fills, icons and display text: 3.2:1 on the page ground */
  --gold-ink:   #A8600B;   /* the same gold darkened for small text: 4.6:1 */
  --gold-soft:  #FCE2BC;
  --gold-2:     #B8650A;
  --gold-deep:  #7A4407;
  --emerald:    #0A87BD;
  --emerald-2:  #0C6D97;

  /* type */
  --text:       #151A2C;
  --text-2:     #4A5468;
  --muted:      #5E6880;
  --faint:      #6C717F;

  --line:       rgba(21,26,44,.11);
  --line-2:     rgba(21,26,44,.07);
  --glass:      rgba(21,26,44,.035);
  --glass-2:    rgba(21,26,44,.06);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-serif:   "Instrument Serif", Georgia, "Times New Roman", serif;

  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Shadows on a light ground read as heavy far sooner than the same
     numbers on navy did — kept dark (never grey) but much lower opacity,
     so cards still lift off the page rather than looking smudged. */
  --shadow-1: 0 2px 10px rgba(21,26,44,.06);
  --shadow-2: 0 18px 40px -22px rgba(21,26,44,.16), 0 2px 10px rgba(21,26,44,.05);
  --shadow-3: 0 40px 80px -30px rgba(21,26,44,.20), 0 10px 26px rgba(21,26,44,.08);
  --shadow-gold: 0 20px 50px -22px rgba(224,128,15,.35);

  --inner-hl: inset 0 1px 0 rgba(255,255,255,.8);

  --container: 1240px;
  --gutter: 24px;
  --header-h: 86px;
  --topbar-h: 43px;   /* the contact strip above the header; it scrolls away, but it is on screen at rest */
  --strip-h:  64px;   /* the country marquee that sits directly under the hero */

  --ease: cubic-bezier(.22,.68,.28,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h, 86px) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink, #FAF8F3);
  color: var(--text, #151A2C);
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; }

/* Must stay below the rule above, and must be !important.
   `display` set on img/svg in an author stylesheet outranks the browser's
   own `[hidden] { display: none }` — origin beats specificity in the
   cascade — so without this line the hidden attribute silently does
   nothing on any image. That is what painted a broken-image glyph on the
   page: the lightbox holds an <img> that carries no src between openings,
   and it was being laid out as display:block instead of being removed. */
[hidden] { display: none !important; }

/* An <img> with no src can only ever paint the broken-image glyph, so
   never lay one out. srcset-only images are legitimate and excluded. */
img:not([src]):not([srcset]) { display: none; }

/* Inline icon default — component rules override by specificity. */
.ico { width: 18px; height: 18px; flex: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 4.15rem); }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.85rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1.1em; color: var(--text-2, #4A5468); }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold, #E0800F); color: #1A0C00; }

:focus-visible {
  outline: 2px solid var(--gold, #E0800F);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Scrollbar */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink-2, #F2EEE4); }
::-webkit-scrollbar-thumb { background: #D9D2C2; border-radius: 8px; border: 3px solid var(--ink-2, #F2EEE4); }
::-webkit-scrollbar-thumb:hover { background: #C7BCA3; }

/* ---------- 3. Layout utilities ---------- */
.container {
  width: 100%;
  max-width: var(--container, 1240px);
  margin-inline: auto;
  padding-inline: var(--gutter, 24px);
}
.container-wide { max-width: calc(var(--container, 1240px) + 190px); }

/* The measure grows with the screen instead of stopping dead at 1240px.
   On a 1600px display that left roughly 180px of empty page down each side,
   which reads as a narrow site rather than a calm one. It still stops short
   of the edges - full-bleed text is harder to read, and the gutter is what
   makes the content look placed rather than poured in. */
@media (min-width: 1400px) { :root { --container: 1340px; --gutter: 30px; } }
@media (min-width: 1600px) { :root { --container: 1440px; --gutter: 34px; } }
@media (min-width: 1850px) { :root { --container: 1540px; --gutter: 40px; } }
.container-narrow { max-width: 880px; }

/* The decorative .glow spans are 500-650px wide and sit on negative offsets,
   so on a 375px phone they pushed the layout viewport out to 475px — which is
   what makes a phone render the whole page as if zoomed. Sections clip them.
   overflow: clip rather than hidden: it does not create a scroll container, so
   sticky and absolutely positioned children keep working. No clip margin — a
   margin is itself overflow, which is the thing being removed. */
.section, .section-tight {
  position: relative;
  overflow: clip;
}
.section { padding: clamp(72px, 9vw, 128px) 0; }
.section-tight { padding: clamp(56px, 6vw, 88px) 0; }
.section-alt { background: linear-gradient(180deg, var(--ink, #FAF8F3) 0%, var(--ink-2, #F2EEE4) 50%, var(--ink, #FAF8F3) 100%); }

.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;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--gold, #E0800F); color: #1A0C00; padding: 10px 18px;
  border-radius: 0 0 10px 10px; font-weight: 700;
  transition: top .2s;
}
.skip-link:focus { top: 0; }

/* ---------- 4. Section heading kit ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .74rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--gold-ink, #A8600B);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold, #E0800F));
}
.eyebrow-center { justify-content: center; }
.eyebrow-center::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, var(--gold, #E0800F), transparent);
}

.sec-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head p { font-size: 1.06rem; margin-top: 18px; }

.serif-accent {
  font-family: var(--font-serif, "Instrument Serif",Georgia,serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--gold-2, #B8650A);
}

.divider {
  height: 1px; border: 0; margin: 0;
  background: linear-gradient(90deg, transparent, var(--line, rgba(255,255,255,.09)), transparent);
}

/* ---------- 5. Buttons ---------- */
.btn {
  --btn-bg: var(--gold, #E0800F);
  --btn-fg: #1A0C00;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  border: 0; border-radius: 100px;
  background: var(--btn-bg, #E0800F); color: var(--btn-fg, #1A0C00);
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif);
  font-size: .93rem; font-weight: 650; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .35s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s;
  box-shadow: var(--shadow-gold, 0 20px 60px -24px rgba(247,144,33,.45)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
  white-space: nowrap;
}
.btn::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 46%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .75s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.btn:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 26px 60px -20px rgba(247,144,33,.6), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }
.btn:hover::after { transform: translateX(120%); }
.btn:active { transform: translateY(-1px) scale(.995); }
.btn svg { width: 17px; height: 17px; flex: none; }

.btn-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--text, #151A2C);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  background: var(--glass, rgba(255,255,255,.035));
}
.btn-ghost:hover {
  background: var(--glass-2, rgba(21,26,44,.06));
  border-color: rgba(224,128,15,.5);
  box-shadow: 0 18px 40px -22px rgba(21,26,44,.14), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.8));
}

.btn-emerald { --btn-bg: var(--emerald, #0A87BD); --btn-fg: #00131F; box-shadow: 0 20px 60px -24px rgba(10,162,227,.45), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }
.btn-emerald:hover { box-shadow: 0 26px 60px -20px rgba(10,162,227,.55), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }

.btn-sm { padding: 11px 22px; font-size: .85rem; }
.btn-lg { padding: 18px 38px; font-size: 1rem; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: .92rem; color: var(--gold-ink, #A8600B);
  transition: gap .3s var(--ease, cubic-bezier(.22,.68,.28,1)), color .3s;
}
.link-arrow svg { width: 16px; height: 16px; transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)); }
.link-arrow:hover { gap: 14px; color: var(--gold-2, #B8650A); }

/* ---------- 6. Decorative backdrops ---------- */
/* No filter: blur() here on purpose. These are 500–650px elements, and a 90px
   blur forces each one onto its own GPU layer; on some drivers the section
   washed out to white a second or two after load, once the hero canvas started
   animating and the compositor re-laid the layers. The gradients already fade
   to transparent well before their edge, so the blur was adding cost and a
   rendering hazard for almost no visual difference. */
.glow {
  position: absolute; border-radius: 50%;
  opacity: .5; pointer-events: none; z-index: 0;
}
.glow-gold    { background: radial-gradient(circle closest-side, rgba(247,144,33,.40), rgba(247,144,33,.14) 45%, transparent 78%); }
.glow-emerald { background: radial-gradient(circle closest-side, rgba(10,162,227,.28), rgba(10,162,227,.10) 45%, transparent 78%); }
.glow-blue    { background: radial-gradient(circle closest-side, rgba(72,120,255,.26), rgba(72,120,255,.09) 45%, transparent 78%); }

/* Likewise no mix-blend-mode. `overlay` blends against whatever backdrop the
   compositor hands it, which is not stable while canvases are starting up —
   the same white-out. At 3.5% opacity the texture reads the same painted
   normally. isolation keeps any future blending inside the section. */
.noise { isolation: isolate; }
.noise::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Perspective grid floor — cheap, convincing depth */
.grid-floor {
  position: absolute; left: -20%; right: -20%; bottom: -10%; height: 46vh;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(to top, transparent 18%, #FAF8F3 82%),
    linear-gradient(rgba(247,144,33,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247,144,33,.14) 1px, transparent 1px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  /* Flattened: the perspective/rotateX version put a permanent 3D layer
     inside the hero. A plain vertical fade reads much the same on a light
     ground and composites for free. */
  opacity: .4;
}

/* ---------- 7. Top bar ---------- */
.topbar {
  position: relative; z-index: 60;
  background: linear-gradient(90deg, var(--ink-2, #F2EEE4), var(--surface, #FFFFFF) 50%, var(--ink-2, #F2EEE4));
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .82rem;
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; min-height: 42px; flex-wrap: wrap;
}
.topbar-list { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.topbar a, .topbar span.tb-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--text-2, #4A5468); transition: color .25s;
}
.topbar a:hover { color: var(--gold-ink, #A8600B); }
.topbar svg { width: 14px; height: 14px; color: var(--gold, #E0800F); flex: none; }

.social-row { display: flex; align-items: center; gap: 8px; }
.social-row a {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s;
}
.social-row a:hover {
  transform: translateY(-2px);
  background: rgba(247,144,33,.16);
  border-color: rgba(247,144,33,.45);
}
.social-row svg { width: 14px; height: 14px; }

/* ---------- 8. Header & navigation ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,253,248,.97);
  /* No backdrop-filter. It keeps a live blurred copy of everything
     scrolling underneath, permanently composited, directly on top of the
     hero. On a light theme a near-opaque background is visually the same
     thing for a fraction of the cost. */
  border-bottom: 1px solid var(--line-2, rgba(21,26,44,.07));
  transition: background .35s, box-shadow .35s, border-color .35s;
}
.site-header.scrolled {
  background: rgba(255,253,248,.99);
  box-shadow: 0 12px 34px -20px rgba(21,26,44,.14);
  border-bottom-color: var(--line, rgba(21,26,44,.11));
}
.header-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: var(--header-h, 86px);
}

.brand { display: inline-flex; align-items: center; gap: 13px; flex: none; }
.brand-mark {
  width: 44px; height: 44px; border-radius: 13px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(140deg, var(--gold-2, #B8650A), var(--gold, #E0800F) 45%, var(--gold-deep, #7A4407));
  color: #1A0C00;
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700; font-size: 1.15rem;
  letter-spacing: -.03em;
  box-shadow: var(--shadow-gold, 0 20px 60px -24px rgba(247,144,33,.45)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.brand:hover .brand-mark { transform: rotateY(180deg); }
.brand-mark img { width: 100%; height: 100%; object-fit: contain; border-radius: 13px; }

/* Wordmark logo (used when a logo is uploaded in the admin panel) */
.brand-logo {
  height: 60px; width: auto; max-width: 210px;
  object-fit: contain; flex: none;
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1)), filter .4s;
}
.brand:hover .brand-logo { transform: scale(1.035); filter: brightness(1.08); }
.brand-footer .brand-logo { height: 74px; }

.brand-divider { width: 1px; height: 34px; background: var(--line, rgba(255,255,255,.09)); flex: none; }
.brand-tag {
  font-size: .66rem; line-height: 1.45; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted, #6C7690); font-weight: 550;
  max-width: 130px;
}
@media (max-width: 1180px) { .brand-divider, .brand-tag { display: none; } }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-name {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700; font-size: 1.12rem;
  letter-spacing: -.02em; color: var(--text, #151A2C);
}
.brand-sub {
  font-size: .63rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted, #6C7690); font-weight: 500;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav > li { position: relative; }
.nav > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 15px; border-radius: 100px;
  font-size: .88rem; font-weight: 550; color: var(--text-2, #4A5468);
  transition: color .14s, background .14s;
}
.nav > li > a:hover, .nav > li.current > a { color: var(--text, #151A2C); background: var(--glass, rgba(21,26,44,.035)); }
.nav > li.current > a { color: var(--gold-ink, #A8600B); }
.nav .caret { width: 12px; height: 12px; transition: transform .3s; opacity: .6; }
.nav > li:hover .caret { transform: rotate(180deg); }

/* Dropdown — 3D flip-in */
.dropdown {
  position: absolute; top: calc(100% + 12px); left: 50%;
  min-width: 290px; padding: 10px;
  background: rgba(255,253,248,.99);
  border: 1px solid var(--line, rgba(21,26,44,.09));
  border-radius: var(--r, 16px);
  box-shadow: var(--shadow-3, 0 40px 80px -30px rgba(21,26,44,.20));
  opacity: 0; visibility: hidden;
  transform: translateX(-50%) translateY(-10px) rotateX(-12deg);
  transform-origin: top center;
  transition: opacity .16s var(--ease, cubic-bezier(.22,.68,.28,1)), transform .18s var(--ease, cubic-bezier(.22,.68,.28,1)), visibility .18s;
  z-index: 90;
}
.nav > li:hover .dropdown,
.nav > li:focus-within .dropdown {
  opacity: 1; visibility: visible;
  transform: translateX(-50%) translateY(0) rotateX(0);
}
.dropdown::before {
  content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
}
.dropdown a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px; border-radius: 11px;
  font-size: .88rem; color: var(--text-2, #4A5468);
  transition: background .12s, color .12s, transform .14s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.dropdown a:hover { background: var(--glass-2, rgba(21,26,44,.06)); color: var(--text, #151A2C); transform: translateX(4px); }
.dd-label { display: flex; flex-direction: column; gap: 1px; }
.dd-label small { color: var(--faint, #9AA2B5); font-size: .72rem; line-height: 1.3; }

.header-cta { display: flex; align-items: center; gap: 12px; flex: none; }

.burger {
  display: none; width: 46px; height: 46px; border-radius: 13px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  cursor: pointer; place-items: center; flex-direction: column; gap: 5px;
}
.burger span {
  display: block; width: 19px; height: 2px; border-radius: 2px;
  background: var(--text, #151A2C); transition: transform .2s var(--ease, cubic-bezier(.22,.68,.28,1)), opacity .15s;
}
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
  position: fixed; inset: 0; z-index: 200;
  background: #FFFDF8;
  padding: 24px;
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transform: translateY(-2%);
  transition: opacity .18s var(--ease, cubic-bezier(.22,.68,.28,1)), transform .2s var(--ease, cubic-bezier(.22,.68,.28,1)), visibility .2s;
}
.mobile-nav.open { opacity: 1; visibility: visible; transform: none; }
.mobile-nav-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.mobile-close {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09)); cursor: pointer;
}
.mobile-close svg { width: 20px; height: 20px; }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav > ul > li > a,
.mobile-nav .m-sub a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 15px 16px; border-radius: 13px;
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 600; font-size: 1.05rem;
  border: 1px solid transparent;
  transition: background .12s, border-color .12s;
}
.mobile-nav > ul > li > a:hover { background: var(--glass, rgba(255,255,255,.035)); border-color: var(--line-2, rgba(255,255,255,.055)); }
.mobile-nav .m-sub { padding-left: 14px; margin: 2px 0 8px; border-left: 1px solid var(--line, rgba(255,255,255,.09)); }
.mobile-nav .m-sub a { font-size: .93rem; font-weight: 500; font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif); color: var(--text-2, #4A5468); padding: 11px 14px; }
.mobile-nav .m-actions { margin-top: 24px; display: grid; gap: 12px; }

/* ---------- 9. Hero ---------- */
.hero {
  position: relative;
  /* Header only — the desktop rule further down also makes room for the
     contact strip above and the country marquee below, so that on a computer
     the whole opening, marquee included, lands inside the first screen. */
  min-height: min(880px, calc(100vh - var(--header-h, 86px)));
  display: flex; align-items: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 78% 30%, rgba(224,128,15,.11), transparent 60%),
    radial-gradient(90% 70% at 10% 10%, rgba(10,135,189,.08), transparent 60%),
    linear-gradient(180deg, var(--ink-2, #F2EEE4), var(--ink, #FAF8F3)) , #FAF8F3;
  padding: clamp(56px, 7vw, 96px) 0;
}
/* The first screen holds the whole opening.
   The hero used to subtract only the header from the viewport, so the country
   marquee always began a little below the fold and a visitor had to scroll to
   learn it was there. Subtract the contact strip and the marquee as well, with
   8px to spare against rounding and browser zoom. The floor keeps the copy
   from being crushed on a short laptop window, where the hero simply grows
   again and the marquee goes back under the fold — the alternative is cutting
   the client's own words to fit. */
@media (min-width: 1024px) {
  .hero {
    min-height: min(
      880px,
      max(600px, calc(100vh - var(--header-h, 86px) - var(--topbar-h, 43px) - var(--strip-h, 64px) - 8px))
    );
    /* Small, fixed padding on purpose. The hero is a centred flex box, so
       whatever height min-height gives beyond the content is shared above and
       below anyway — generous on a tall window, tight on a short one, without
       padding fighting the height budget the marquee needs. */
    padding: 40px 0;
  }

  /* The globe is square, so its height follows its width. Cap the width by
     what the viewport can spare and it shrinks with a short window instead of
     pushing the marquee off the screen. */
  .globe-stage {
    /* width:100% first, then the cap. An auto inline margin here would stop
       the grid item stretching, and the stage would collapse to the canvas
       element's intrinsic 300x300 instead of filling its column. */
    width: 100%;
    max-width: min(100%, calc(100vh - 320px));
    justify-self: center;
  }
}

.hero .container { position: relative; z-index: 3; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}

.hero-slide { display: none; }
/* No entrance animation here on purpose. A CSS animation on this class
   (fade + rise, on classList.add) repeatedly got stuck at its from-keyframe
   — opacity 0, forever, confirmed via getComputedStyle/getAnimations —
   whenever the tab's rendering was interrupted at the wrong moment: a
   background/foreground cycle on a phone, or just an unlucky first paint.
   The slide must always be visible the instant it is display:block, so
   nothing here can leave it stuck invisible. */
.hero-slide.active { display: block; }

.hero-title {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
  font-weight: 700;
  font-size: clamp(2.4rem, 5.4vw, 4.15rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0 0 22px;
  color: var(--text, #151A2C);
}
.hero-title .ln { display: block; }
.hero-title .ln:nth-child(2) { color: var(--gold, #E0800F); }
.hero-text {
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  max-width: 560px; color: var(--text-2, #4A5468);
  margin-bottom: 34px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.hero-badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 38px;
  padding-top: 30px; border-top: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 15px; border-radius: 100px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .79rem; color: var(--text-2, #4A5468);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.hero-badge b { color: var(--gold-ink, #A8600B); font-weight: 650; }

/* slider controls */
.hero-nav {
  display: flex; align-items: center; gap: 14px;
  margin-top: 32px;
}
.hero-dots { display: flex; gap: 8px; }
.hero-dot {
  width: 30px; height: 4px; border-radius: 4px; border: 0; padding: 0;
  background: rgba(21,26,44,.16); cursor: pointer; overflow: hidden;
  transition: background .3s;
}
.hero-dot.active { background: rgba(247,144,33,.35); }
.hero-dot i { display: block; height: 100%; width: 0; background: var(--gold, #E0800F); }
.hero-dot.active i { animation: dotFill 7s linear forwards; }
@keyframes dotFill { to { width: 100%; } }
.hero-count { font-size: .78rem; color: var(--faint, #9AA2B5); letter-spacing: .1em; font-variant-numeric: tabular-nums; }

/* Globe stage */
.globe-stage {
  position: relative;
  aspect-ratio: 1;
  display: grid; place-items: center;
  perspective: 1200px;
}
.globe-canvas {
  width: 100%; height: 100%;
  /* No filter here. This canvas repaints ~60 times a second, and a
     drop-shadow makes the compositor re-blur the whole surface on every
     one of those frames — the cost that shows up as the hero washing out
     to white a second after load, once the animation starts. The glow is
     painted inside the canvas instead, where it costs nothing extra. */
}
.globe-ring {
  position: absolute; inset: 6%;
  border: 1px solid rgba(247,144,33,.16);
  border-radius: 50%;
  /* scaleY, not rotateX: same flattened-ellipse look, no 3D layer, and no
     endless animation keeping the compositor busy behind the globe. */
  transform: scaleY(.28);
  pointer-events: none;
}
.globe-ring.r2 { inset: -4%; border-color: rgba(10,162,227,.14); transform: scaleY(.22); }

.globe-chip {
  position: absolute;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 15px; border-radius: 100px;
  background: rgba(255,253,248,.96);
  border: 1px solid var(--line, rgba(21,26,44,.09));
  font-size: .78rem; font-weight: 550; color: var(--text, #151A2C);
  box-shadow: var(--shadow-2, 0 18px 40px -22px rgba(21,26,44,.18)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.8));
  white-space: nowrap;
  animation: floaty 6s ease-in-out infinite;
}
.globe-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald, #0A87BD); box-shadow: 0 0 0 4px rgba(10,162,227,.18); }
.globe-chip.c1 { top: 10%; left: 0; animation-delay: 0s; }
.globe-chip.c2 { top: 46%; right: 0; animation-delay: 1.4s; }
.globe-chip.c3 { bottom: 12%; left: 5%; animation-delay: 2.8s; }
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-11px); }
}

/* ---------- 10. Marquee ---------- */
.marquee {
  position: relative; overflow: hidden;
  padding: 20px 0;
  border-block: 1px solid var(--line-2, rgba(255,255,255,.055));
  background: linear-gradient(90deg, var(--ink-2, #F2EEE4), var(--surface, #FFFFFF) 50%, var(--ink-2, #F2EEE4));
}
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 140px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--ink-2, #F2EEE4), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--ink-2, #F2EEE4), transparent); }
.marquee-track {
  display: flex; gap: 44px; width: max-content;
  animation: marquee 48s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-item {
  display: inline-flex; align-items: center; gap: 11px;
  font-size: .84rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted, #6C7690); font-weight: 550; white-space: nowrap;
}
/* Flags. A hairline border matters: several of these are mostly white, and
   without it Japan or Poland would read as a hole in the row rather than a
   flag. Sized in ems so the two contexts scale from their own type. */
.flag {
  flex: none;
  width: 1.55em; height: 1.18em;
  object-fit: cover;
  border-radius: 2.5px;
  border: 1px solid rgba(21,26,44,.14);
  box-shadow: 0 1px 2px rgba(21,26,44,.09);
  background: var(--surface, #FFFFFF);
}
/* Fallback for a market with no flag in the map — the dot that used to be
   there for every one of them. */
.flag-none {
  width: 5px; height: 5px; border-radius: 50%;
  border: 0; box-shadow: none;
  background: var(--gold, #E0800F); opacity: .7;
}
.flag-lg { width: 1.75em; height: 1.32em; border-radius: 3px; }
.market-pill .flag-none { width: 6px; height: 6px; background: var(--emerald, #0A87BD); opacity: 1; }

/* ---------- 11. 3D card primitive ---------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .55s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .45s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .35s;
}
.tilt-inner { transform-style: preserve-3d; }
.tilt .lift-1 { transform: translateZ(26px); }
.tilt .lift-2 { transform: translateZ(46px); }

.glare {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--gx, 50%) var(--gy, 0%), rgba(21,26,44,.05), transparent 62%);
  opacity: 0; transition: opacity .4s;
}
.tilt:hover .glare { opacity: 1; }

/* ---------- 12. Product cards ---------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 26px;
}
.product-card {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(160deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF) 60%);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
  isolation: isolate;
}
.product-card:hover { border-color: rgba(247,144,33,.35); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), 0 0 0 1px rgba(247,144,33,.12), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08)); }

.pc-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--surface-3, #F2EDE3);
}
.pc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), filter .6s;
}
.product-card:hover .pc-media img { transform: scale(1.07); }
.pc-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(5,8,15,.9));
}
.pc-count {
  position: absolute; bottom: 16px; right: 16px; z-index: 3;
  padding: 6px 13px; border-radius: 100px;
  background: rgba(5,8,15,.82);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .74rem; color: rgba(255,255,255,.88); font-weight: 550;
}
.pc-body { padding: 26px; display: flex; flex-direction: column; flex: 1; position: relative; z-index: 3; }
.pc-body h3 { margin-bottom: 11px; }
.pc-body h3 a { transition: color .25s; }
.product-card:hover .pc-body h3 a { color: var(--gold, #E0800F); }
.pc-body p { font-size: .93rem; color: var(--muted, #6C7690); margin-bottom: 20px; }
.pc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Compact category chip list */
.cat-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cat-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: 100px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .86rem; font-weight: 550; color: var(--text-2, #4A5468);
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s, color .3s;
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.cat-chip:hover, .cat-chip.active {
  transform: translateY(-2px);
  background: rgba(247,144,33,.14);
  border-color: rgba(224,128,15,.45);
  color: var(--text, #151A2C);
}

/* ---------- 13. Stats ---------- */
.stats-strip {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line-2, rgba(255,255,255,.055));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  border-radius: var(--r-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.stat {
  padding: 34px 26px; text-align: center;
  background: linear-gradient(165deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  transition: background .4s;
}
.stat:hover { background: linear-gradient(165deg, var(--surface-3, #F2EDE3), var(--surface-2, #FDFBF7)); }
.stat-value {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700;
  font-size: clamp(2.1rem, 3.6vw, 2.9rem);
  letter-spacing: -.03em; line-height: 1;
  background: linear-gradient(150deg, var(--text, #151A2C), var(--gold, #E0800F) 90%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  margin-top: 11px; font-size: .8rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted, #6C7690); font-weight: 550;
}

/* ---------- 14. Feature / why cards ---------- */
.feature-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px;
}
.feature-card {
  position: relative; padding: 32px 28px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(165deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF) 70%);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
}
.feature-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(247,144,33,.6), transparent);
  opacity: 0; transition: opacity .4s;
}
.feature-card:hover::before { opacity: 1; }
.feature-card:hover { border-color: rgba(247,144,33,.28); }
.feat-icon {
  width: 54px; height: 54px; border-radius: 16px;
  display: grid; place-items: center; margin-bottom: 22px;
  background: linear-gradient(150deg, rgba(247,144,33,.22), rgba(247,144,33,.06));
  border: 1px solid rgba(247,144,33,.28);
  color: var(--gold, #E0800F);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.feature-card:hover .feat-icon { transform: translateZ(24px) rotateY(-14deg) scale(1.06); }
.feat-icon svg { width: 24px; height: 24px; }
.feature-card h3 { font-size: 1.16rem; margin-bottom: 12px; }
.feature-card p { font-size: .93rem; color: var(--muted, #6C7690); margin: 0; }

/* ---------- 15. Process timeline ---------- */
.process-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.step-card {
  position: relative; padding: 30px 26px 28px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(170deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  overflow: hidden;
}
.step-num {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-weight: 700;
  font-size: 3.4rem; line-height: 1; letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(247,144,33,.35);
  position: absolute; top: 16px; right: 20px;
  transition: -webkit-text-stroke-color .4s, transform .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.step-card:hover .step-num { -webkit-text-stroke-color: rgba(247,144,33,.7); transform: translateZ(20px) scale(1.05); }
.step-card h3 { font-size: 1.1rem; margin: 0 90px 12px 0; }
.step-card p { font-size: .91rem; color: var(--muted, #6C7690); margin: 0; }
.step-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold, #E0800F), transparent);
  transition: width .6s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.step-card:hover::after { width: 100%; }

/* ---------- 16. Split feature block ---------- */
.split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
/* ---- Empty media -------------------------------------------------------
   Stands where a photograph has not been uploaded yet. Deliberately plain.
   Abstract artwork used to sit here and it read as either a broken image
   or as stock filler; a quiet panel reads as "nothing here yet", which is
   the truth. It fills in the moment a photo is uploaded from the admin. */
.media-empty {
  width: 100%; height: 100%; min-height: 120px;
  background: linear-gradient(135deg, var(--surface-2, #FDFBF7), var(--surface-3, #F2EDE3));
  display: grid; place-items: center;
}
.media-empty::after {
  content: ""; width: 40px; height: 32px; border-radius: 5px;
  border: 2px solid var(--line, rgba(21,26,44,.11));
  background:
    radial-gradient(circle at 30% 32%, var(--line, rgba(21,26,44,.11)) 0 3px, transparent 3.5px),
    linear-gradient(to top right, transparent 45%, var(--line, rgba(21,26,44,.11)) 45% 55%, transparent 55%);
}

/* The card media box lays a dark gradient over the photo so the count pill
   stays readable. There is no photo to darken here, so the empty panel sits
   above it rather than under a smudge of gradient. */
.pc-media .media-empty { position: relative; z-index: 2; }

.split-media {
  position: relative; perspective: 1100px;
}
.split-media .media-empty {
  height: auto; aspect-ratio: 16 / 10;
  border-radius: var(--r-lg, 24px);
  border: 1px solid var(--line, rgba(21,26,44,.11));
}
.split-media img {
  width: 100%; border-radius: var(--r-lg, 24px);
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
  transform: rotateY(-7deg) rotateX(3deg);
  transition: transform .8s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.split-media:hover img { transform: rotateY(0) rotateX(0); }
.split-media .float-card {
  position: absolute; bottom: 18px; right: 18px;
  padding: 20px 24px; border-radius: var(--r, 16px);
  background: rgba(255,253,248,.98);
  border: 1px solid var(--line, rgba(21,26,44,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -30px rgba(21,26,44,.20)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.8));
  max-width: 250px;
}
.float-card .fc-value {
  font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif); font-size: 1.7rem; font-weight: 700;
  color: var(--gold, #E0800F); line-height: 1;
}
.float-card .fc-label { font-size: .8rem; color: var(--muted, #6C7690); margin-top: 6px; }

.check-list { display: grid; gap: 13px; margin: 26px 0 0; }
.check-list li {
  display: flex; align-items: flex-start; gap: 13px;
  font-size: .95rem; color: var(--text-2, #4A5468);
}
.check-list li svg { width: 21px; height: 21px; flex: none; color: var(--emerald, #0A87BD); margin-top: 1px; }

/* ---------- 17. Gallery ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.gallery-item {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: var(--r, 16px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8));
  cursor: pointer;
  transition: transform .5s var(--ease, cubic-bezier(.22,.68,.28,1)), box-shadow .5s var(--ease, cubic-bezier(.22,.68,.28,1));
}
.gallery-item:nth-child(4n+1) { grid-row: span 2; aspect-ratio: 4 / 6.4; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1)); }
.gallery-item:hover { transform: translateY(-5px) scale(1.012); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)); }
.gallery-item:hover img { transform: scale(1.09); }
.gallery-cap {
  position: absolute; inset: auto 0 0 0; padding: 18px 18px 16px;
  background: linear-gradient(transparent, rgba(5,8,15,.94));
  transform: translateY(8px); opacity: 0;
  transition: transform .45s var(--ease, cubic-bezier(.22,.68,.28,1)), opacity .45s;
}
.gallery-item:hover .gallery-cap { transform: none; opacity: 1; }
.gallery-cap strong { display: block; font-size: .95rem; font-weight: 600; color: #fff; }
.gallery-cap small { color: var(--gold, #E0800F); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: #03050A;
  display: grid; place-items: center; padding: 30px;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1100px, 92vw); max-height: 86vh; object-fit: contain;
  border-radius: var(--r, 16px); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
  transform: scale(.94); transition: transform .4s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.lightbox.open img { transform: scale(1); }
.lightbox-close {
  position: absolute; top: 22px; right: 22px;
  width: 48px; height: 48px; border-radius: 14px; cursor: pointer;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line, rgba(255,255,255,.09));
  display: grid; place-items: center;
}
.lightbox-close svg { width: 22px; height: 22px; }
.lightbox-cap { position: absolute; bottom: 26px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.75); font-size: .9rem; }

/* ---------- 18. Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
.testi-card {
  position: relative; padding: 34px 30px 30px;
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(165deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  display: flex; flex-direction: column;
}
.testi-quote {
  position: absolute; top: 16px; right: 24px;
  font-family: var(--font-serif, "Instrument Serif",Georgia,serif); font-size: 5rem; line-height: 1;
  color: rgba(247,144,33,.16); pointer-events: none;
}
.testi-stars { display: flex; gap: 3px; margin-bottom: 18px; color: var(--gold, #E0800F); }
.testi-stars svg { width: 16px; height: 16px; }
.testi-card p { font-size: .96rem; color: var(--text-2, #4A5468); margin-bottom: 24px; }
.testi-who { display: flex; align-items: center; gap: 14px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line-2, rgba(255,255,255,.055)); }
.testi-avatar {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: grid; place-items: center; overflow: hidden;
  background: linear-gradient(150deg, var(--gold, #E0800F), var(--gold-deep, #7A4407));
  color: #1A0C00; font-weight: 700; font-family: var(--font-display, "Sora","Segoe UI",system-ui,sans-serif);
}
.testi-avatar img { width: 100%; height: 100%; object-fit: cover; }
.testi-who strong { display: block; font-size: .95rem; }
.testi-who small { color: var(--muted, #6C7690); font-size: .81rem; }

/* ---------- 19. Markets / countries ---------- */
.markets-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.market-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 17px; border-radius: 12px;
  background: var(--glass, rgba(255,255,255,.035)); border: 1px solid var(--line-2, rgba(255,255,255,.055));
  font-size: .87rem; color: var(--text-2, #4A5468);
  transition: transform .3s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, border-color .3s;
}
.market-pill:hover { transform: translateY(-2px); background: var(--glass-2, rgba(255,255,255,.06)); border-color: rgba(247,144,33,.32); }
.market-pill .pin { width: 6px; height: 6px; border-radius: 50%; background: var(--emerald, #0A87BD); flex: none; box-shadow: 0 0 0 3px rgba(10,162,227,.16); }

/* ---------- 20. Doc list ---------- */
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.doc-item {
  display: flex; align-items: center; gap: 14px;
  padding: 17px 20px; border-radius: 14px;
  background: linear-gradient(150deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  font-size: .92rem; color: var(--text-2, #4A5468);
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s;
}
.doc-item:hover { transform: translateY(-3px); border-color: rgba(247,144,33,.3); }
.doc-item svg { width: 20px; height: 20px; color: var(--gold, #E0800F); flex: none; }

/* ---------- 21. CTA band ---------- */
.cta-band {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl, 32px);
  padding: clamp(44px, 6vw, 76px);
  background:
    radial-gradient(90% 140% at 88% 12%, rgba(247,144,33,.22), transparent 62%),
    radial-gradient(70% 120% at 8% 92%, rgba(10,162,227,.16), transparent 62%),
    linear-gradient(150deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  text-align: center;
}
.cta-band h2 { margin-bottom: 18px; }
.cta-band p { max-width: 620px; margin-inline: auto; margin-bottom: 32px; font-size: 1.04rem; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ---------- 22. Page hero (inner pages) ---------- */
.page-hero {
  position: relative; overflow: hidden;
  padding: clamp(64px, 8vw, 108px) 0 clamp(52px, 6vw, 76px);
  background:
    radial-gradient(100% 120% at 82% 0%, rgba(247,144,33,.13), transparent 58%),
    linear-gradient(180deg, var(--ink-2, #F2EEE4), var(--ink, #FAF8F3)) , #FAF8F3;
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.page-hero .container { position: relative; z-index: 3; }
.page-hero h1 { margin-bottom: 18px; }
.page-hero p { font-size: 1.08rem; max-width: 660px; }

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: .82rem; color: var(--faint, #9AA2B5); margin-bottom: 22px;
}
.breadcrumb a { color: var(--muted, #6C7690); transition: color .25s; }
.breadcrumb a:hover { color: var(--gold-ink, #A8600B); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb [aria-current] { color: var(--gold-ink, #A8600B); }

/* ---------- 23. Product detail ---------- */
.pd-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4.5vw, 60px); align-items: start;
}
.pd-visual {
  position: sticky; top: calc(var(--header-h, 86px) + 24px);
  border-radius: var(--r-lg, 24px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09)); box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9));
}
.pd-visual img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }

.spec-table {
  width: 100%; border-collapse: collapse;
  border-radius: var(--r, 16px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09));
  background: linear-gradient(160deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.spec-table th, .spec-table td {
  padding: 15px 20px; text-align: left; font-size: .92rem;
  border-bottom: 1px solid var(--line-2, rgba(255,255,255,.055));
}
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { color: var(--muted, #6C7690); font-weight: 550; width: 44%; }
.spec-table td { color: var(--text, #151A2C); font-weight: 500; }
.spec-table tr:hover { background: rgba(21,26,44,.025); }

.variety-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.variety-card {
  padding: 24px 22px; border-radius: var(--r, 16px);
  background: linear-gradient(160deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .4s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s, box-shadow .4s;
}
.variety-card:hover { transform: translateY(-4px); border-color: rgba(247,144,33,.3); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)); }
.variety-card h4 { font-size: 1rem; margin-bottom: 9px; }
.variety-card p { font-size: .89rem; color: var(--muted, #6C7690); margin: 0; }
.variety-card .vc-media { aspect-ratio: 16/10; border-radius: 12px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--line-2, rgba(255,255,255,.055)); }
.variety-card .vc-media img { width: 100%; height: 100%; object-fit: cover; }

.prose { font-size: 1rem; color: var(--text-2, #4A5468); }
.prose p { margin-bottom: 1.15em; }
.prose h3 { margin: 1.7em 0 .7em; color: var(--text, #151A2C); }
.prose ul { display: grid; gap: 10px; margin: 1em 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before {
  content: ""; position: absolute; left: 6px; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold, #E0800F);
}
.prose strong { color: var(--text, #151A2C); font-weight: 600; }
.prose a { color: var(--gold-ink, #A8600B); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 24. Forms ---------- */
.form-card {
  padding: clamp(28px, 4vw, 42px);
  border-radius: var(--r-lg, 24px);
  background: linear-gradient(160deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--shadow-3, 0 40px 80px -32px rgba(0,0,0,.9)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
}
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .82rem; font-weight: 600; letter-spacing: .04em; color: var(--text-2, #4A5468); }
.field label .req { color: var(--gold-ink, #A8600B); }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px;
  background: rgba(21,26,44,.03);
  border: 1px solid var(--line, rgba(21,26,44,.11));
  border-radius: 12px;
  color: var(--text, #151A2C); font-family: inherit; font-size: .94rem;
  transition: border-color .25s, background .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C7690' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 17px;
  padding-right: 42px;
}
.field select option { background: var(--surface, #FFFFFF); color: var(--text, #151A2C); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(224,128,15,.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(224,128,15,.1);
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint, #9AA2B5); }
.field .hint { font-size: .78rem; color: var(--faint, #9AA2B5); }
.field.err input, .field.err select, .field.err textarea { border-color: #E2564E; box-shadow: 0 0 0 4px rgba(226,86,78,.12); }
.field .err-msg { font-size: .78rem; color: #B3362E; }

.checkbox-row { display: flex; align-items: flex-start; gap: 11px; font-size: .87rem; color: var(--muted, #6C7690); }
.checkbox-row input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--gold, #E0800F); flex: none; }

.alert {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 16px 20px; border-radius: 14px; margin-bottom: 24px;
  font-size: .92rem; border: 1px solid;
}
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert-ok   { background: rgba(10,162,227,.1);  border-color: rgba(10,162,227,.35);  color: var(--emerald-2, #0C6D97); }
.alert-err  { background: rgba(226,86,78,.1);   border-color: rgba(226,86,78,.35);   color: #B3362E; }
.alert-info { background: rgba(247,144,33,.09); border-color: rgba(247,144,33,.3);   color: var(--gold-2, #B8650A); }

/* Contact info cards */
.contact-cards { display: grid; gap: 14px; }
.contact-card {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 22px; border-radius: var(--r, 16px);
  background: linear-gradient(160deg, var(--surface-2, #FDFBF7), var(--surface, #FFFFFF));
  border: 1px solid var(--line, rgba(255,255,255,.09));
  box-shadow: var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .4s var(--ease, cubic-bezier(.22,.68,.28,1)), border-color .3s;
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(247,144,33,.3); }
.cc-icon {
  width: 46px; height: 46px; border-radius: 13px; flex: none;
  display: grid; place-items: center; color: var(--gold, #E0800F);
  background: linear-gradient(150deg, rgba(247,144,33,.2), rgba(247,144,33,.05));
  border: 1px solid rgba(247,144,33,.25);
}
.cc-icon svg { width: 21px; height: 21px; }
.contact-card strong { display: block; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #6C7690); font-weight: 600; margin-bottom: 6px; }
.contact-card .cc-value { font-size: 1rem; color: var(--text, #151A2C); font-weight: 500; line-height: 1.5; }
.contact-card .cc-value a:hover { color: var(--gold-ink, #A8600B); }

.map-frame {
  border-radius: var(--r-lg, 24px); overflow: hidden;
  border: 1px solid var(--line, rgba(255,255,255,.09)); box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8));
  aspect-ratio: 16 / 8; background: var(--surface-2, #FDFBF7);
}
.map-frame iframe { width: 100%; height: 100%; border: 0; }

/* ---------- 25. Footer ---------- */
.site-footer {
  position: relative; overflow: hidden;
  /* Deliberately still dark — one rich navy band under an otherwise light
     page reads as premium, not as a leftover. Everything inside reads its
     own local tokens, not the page-wide light ones, so text stays legible
     against this dark background. */
  --ink-2: #0C1830; --text: #F5F2EA; --text-2: #C7CEDD; --muted: #93A0BC; --faint: #78859F;
  --line: rgba(255,255,255,.10); --line-2: rgba(255,255,255,.06);
  background: linear-gradient(180deg, var(--ink-2), #03060C);
  border-top: 1px solid var(--line);
  padding-top: clamp(56px, 6vw, 84px);
  color: var(--text-2);
}
.footer-grid {
  position: relative; z-index: 3;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: 52px;
}
.footer-brand p { font-size: .93rem; color: var(--muted, #6C7690); margin: 20px 0 22px; max-width: 330px; }
.footer-col h4 {
  font-family: var(--font-body, "Inter","Segoe UI",system-ui,sans-serif); font-size: .78rem; font-weight: 650;
  letter-spacing: .15em; text-transform: uppercase; color: var(--gold, #E0800F);
  margin-bottom: 20px;
}
.footer-col ul { display: grid; gap: 11px; }
.footer-col a { font-size: .92rem; color: var(--muted, #6C7690); transition: color .25s, padding-left .25s; }
.footer-col a:hover { color: var(--text, #151A2C); padding-left: 5px; }
.footer-contact li { display: flex; gap: 12px; font-size: .92rem; color: var(--muted, #6C7690); align-items: flex-start; }
.footer-contact svg { width: 17px; height: 17px; color: var(--gold, #E0800F); flex: none; margin-top: 3px; }
.footer-contact a:hover { color: var(--gold, #E0800F); }

.footer-bottom {
  position: relative; z-index: 3;
  border-top: 1px solid var(--line-2, rgba(255,255,255,.055));
  padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  font-size: .84rem; color: var(--faint, #9AA2B5);
}
.footer-bottom a { color: var(--muted, #6C7690); }
.footer-bottom a:hover { color: var(--gold, #E0800F); }
.footer-legal { display: flex; gap: 20px; flex-wrap: wrap; }

/* Floating actions */
.float-actions {
  position: fixed; right: 20px; bottom: 20px; z-index: 120;
  display: flex; flex-direction: column; gap: 12px;
}
.fab {
  width: 52px; height: 52px; border-radius: 16px; cursor: pointer;
  display: grid; place-items: center; border: 1px solid var(--line, rgba(21,26,44,.09));
  background: rgba(255,253,248,.97);
  color: var(--text, #151A2C);
  box-shadow: var(--shadow-2, 0 18px 40px -20px rgba(0,0,0,.8)), var(--inner-hl, inset 0 1px 0 rgba(255,255,255,.08));
  transition: transform .35s var(--ease, cubic-bezier(.22,.68,.28,1)), background .3s, opacity .3s, visibility .3s;
}
.fab:hover { transform: translateY(-3px) scale(1.05); }
.fab svg { width: 23px; height: 23px; }
.fab-wa { background: linear-gradient(150deg, #2AC066, #1E9E52); border-color: rgba(255,255,255,.15); color: #fff; }
.fab-top { opacity: 0; visibility: hidden; }
.fab-top.show { opacity: 1; visibility: visible; }

/* ---------- 26. Reveal on scroll ---------- */
.reveal-on .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)), transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
  /* No will-change here. There are ~74 .reveal elements on the homepage and
     each one would be promoted to its own compositor layer for the whole life
     of the page. Together with the two animating canvases that is enough to
     exhaust layer memory on modest GPUs, which shows up as sections rendering
     white. The transition works fine without it. */
}
.reveal.in { opacity: 1; transform: none; }
.reveal-3d { transform: perspective(900px) translateY(34px) rotateX(9deg); }
.reveal-3d.in { transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
[data-delay="6"] { transition-delay: .48s; }

/* ---------- 26a. Key people ----------
   The shape the client drew: the founder across the full width with the
   words beside the portrait, then the rest in a row underneath with the
   portrait on top. */
.people-stack { display: grid; gap: clamp(18px, 2.2vw, 28px); }

.person {
  position: relative;   /* the glare overlay is absolutely positioned inside */
  background: var(--surface, #FFFFFF);
  border: 1px solid var(--line, rgba(21,26,44,.11));
  border-radius: var(--r-lg, 24px);
  overflow: hidden;
  box-shadow: var(--shadow-2, 0 18px 40px -22px rgba(21,26,44,.16));
  min-width: 0;
}

/* ---- the lead: words left, portrait right ---- */
.person-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 38%);
  align-items: stretch;
}
/* The markup puts the portrait first so a screen reader still meets the name
   before the biography; the column order is a visual matter only. */
.person-lead .person-media { grid-column: 2; grid-row: 1; }
.person-lead .person-body  { grid-column: 1; grid-row: 1; padding: clamp(26px, 2.8vw, 40px); align-content: center; }
.person-lead .person-name  { font-size: clamp(1.35rem, 2.2vw, 1.85rem); }

/* ---- the rest: portrait on top, words under it ---- */
.people-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
}
.person-col { display: flex; flex-direction: column; }
.person-col .person-media { aspect-ratio: 4 / 3.1; }
.person-col .person-body  { padding: clamp(20px, 2vw, 28px); }
.person-col .person-name  { font-size: 1.12rem; }

/* ---- shared parts ---- */
.person-media {
  position: relative;
  background: var(--surface-3, #F2EDE3);
  overflow: hidden;
  min-height: 0;
}
.person-media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Sit the crop high: on a tall card a centred crop cuts the head off. */
  object-position: 50% 18%;
}
.person-initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700;
  color: var(--gold, #CE760D);
  background: linear-gradient(150deg, var(--surface-2, #FDFBF7), var(--surface-3, #F2EDE3));
}

.person-body { display: grid; gap: 4px; align-content: start; min-width: 0; }
.person-role {
  font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink, #A8600B);
}
.person-name {
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-weight: 700; letter-spacing: -.01em; margin: 0;
}

/* Sentences read as sentences. A measure this side of 68 characters keeps
   the lead's column readable even when it is 700px wide. */
.person-bio { display: grid; gap: 11px; margin-top: 15px; max-width: 66ch; }
.person-bio p {
  margin: 0;
  font-size: .95rem; line-height: 1.68;
  color: var(--text-2, #4A5468);
}

/* Short entries stay tags — one or two words does not want a paragraph. */
.person-exp {
  display: flex; flex-wrap: wrap; gap: 7px;
  list-style: none; margin: 14px 0 0; padding: 0;
}
.person-exp li {
  font-size: .78rem; line-height: 1.35;
  color: var(--text-2, #4A5468);
  background: var(--surface-2, #FDFBF7);
  border: 1px solid var(--line-2, rgba(21,26,44,.07));
  border-radius: 100px;
  padding: 5px 11px;
}

@media (max-width: 900px) {
  /* Stacked, and the portrait leads — on a phone the face is the thing that
     makes a stranger read the paragraph under it. */
  .person-lead { grid-template-columns: 1fr; }
  .person-lead .person-media { grid-column: 1; grid-row: 1; aspect-ratio: 4 / 3.1; }
  .person-lead .person-body  { grid-column: 1; grid-row: 2; }
}

/* ---------- 26b. Touch ergonomics ----------
   Measured on a 375px viewport, not guessed. Everything here is scoped to
   pointer:coarse so the desktop design is untouched — a mouse does not need
   a 44px target and the extra padding would loosen the layout. */
@media (pointer: coarse) {
  /* iOS Safari zooms the whole page in when a focused field's text is under
     16px. The field is 15px by design, so bump it only where that rule
     applies; the visual difference at this size is negligible next to a
     viewport that jumps on every tap. */
  .field input, .field select, .field textarea { font-size: 16px; }

  /* The hero pagination bar is 30x4 — right to look at, impossible to hit.
     The bar stays 4px; the other 40px is transparent padding, so the target
     becomes 30x44 without the design changing. */
  .hero-dot {
    height: 44px; padding: 20px 0;
    background-clip: content-box;
  }

  /* Contact strip and footer links sat at 18-22px tall. These are the
     mailto: and tel: links a phone visitor actually reaches for. */
  .topbar a { padding: 9px 0; }
  .footer-col a, .footer-legal a, .footer-contact a { display: inline-block; padding: 5px 0; }
  .link-arrow { padding: 6px 0; }
  .breadcrumb a { display: inline-block; padding: 5px 0; }
  .pc-body h3 a { display: inline-block; padding: 4px 0; }
}

/* ---------- 27. Responsive ---------- */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; }
  /* width:100% before the cap, and justify-self rather than an auto inline
     margin. An auto margin stops a grid item stretching, so the stage fell
     back to the canvas element's intrinsic 300x300 - on a 768px tablet that
     was a 300px globe in a 768px column. */
  .globe-stage { width: 100%; max-width: 460px; justify-self: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .pd-grid { grid-template-columns: 1fr; }
  .pd-visual { position: static; }
}

@media (max-width: 980px) {
  .nav, .header-cta .btn { display: none; }
  .burger { display: grid; }
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --header-h: 68px; }
  .brand-logo { height: 42px; }
  .brand-footer .brand-logo { height: 56px; }
  .topbar-list .tb-hide-sm { display: none; }
  .topbar-list .tb-phone { display: block; }
  .topbar-in { justify-content: center; }
  .topbar-list { gap: 8px 18px; justify-content: center; }
  .hero { min-height: auto; }
  .globe-chip { display: none; }
  .gallery-item:nth-child(4n+1) { grid-row: auto; aspect-ratio: 4/3; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band { padding: 36px 24px; }
  .hero-actions .btn { flex: 1 1 100%; }
  .step-card h3 { margin-right: 60px; }
  .step-num { font-size: 2.6rem; }
}

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

/* ---------- 28. Print ---------- */
@media print {
  .site-header, .topbar, .site-footer, .float-actions, .hero-canvas, .globe-stage { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding: 20px 0; }
}

/* ---------- 29. Category marks ----------
   Vector marks replaced the emoji that used to sit in these slots. Emoji are
   a different typeface on every operating system, cannot take a brand colour,
   and turn into a blank box where the font is missing. */

.mobile-nav .m-sub a { display: flex; align-items: center; }