/* svikarr.com inner pages, in the trade showroom's style (same tokens as /home.css and app.svikarr.com):
   Funnel Display (headlines, light, tight) + Funnel Sans (text); porcelain ground, white surfaces,
   crest navy ink, royal blue for action only; soft radii. Variable names are kept from the first design
   so every page keeps working; the overrides at the end of this file soften shapes to match. */

:root {
  --plaster: #f4f5f7;        /* porcelain ground */
  --white: #FFFFFF;
  --graphite: #101b33;       /* crest navy ink (also the dark sections) */
  --graphite-2: #4a5570;
  --container: #2459c9;      /* royal blue: actions */
  --container-deep: #183f94;
  --celadon: #9cc0f5;        /* light crest blue: accents on dark */
  --fog: #e3e7ee;
  --display: "Funnel Display", "Segoe UI", system-ui, sans-serif;
  --text: "Funnel Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --navy: #0d1730;
  --royal-wash: #edf2fc;
  --r-ctl: 10px;
  --r-card: 14px;
  --r-sheet: 20px;
  --shadow-1: 0 1px 2px rgb(16 27 51 / 0.04), 0 1px 1px rgb(16 27 51 / 0.03);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --wrap: 1280px;
  --gutter: clamp(20px, 4vw, 48px);
  --header: 76px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header) + 16px); }
body { font-family: var(--text); font-size: 1.0625rem; line-height: 1.6; color: var(--graphite); background: var(--plaster); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
::selection { background: var(--container); color: var(--white); }
:focus-visible { outline: 2px solid var(--container); outline-offset: 3px; }
.on-dark :focus-visible, .hero :focus-visible, .site-header.over :focus-visible { outline-color: var(--celadon); }

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

/* type scale: 0.875 / 1.0625 / 1.25 / 1.75 / 2.75 / 4.5 / 7.5 */
h1, h2, h3, .display { font-family: var(--display); font-weight: 800; line-height: 0.95; letter-spacing: -0.005em; text-wrap: balance; }
h1 { font-size: clamp(3.4rem, 8.6vw, 7.5rem); }
h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
h3 { font-size: clamp(1.5rem, 2.2vw, 1.75rem); font-weight: 700; line-height: 1.05; }
p { text-wrap: pretty; max-width: 68ch; }
.lead { font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55; color: var(--graphite-2); }
.small { font-size: 0.875rem; }
.muted { color: var(--graphite-2); }

/* buttons and links */
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 1rem/1 var(--text); padding: 1.05rem 1.6rem; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn-blue { background: var(--container); color: var(--white); }
.btn-blue:hover { background: var(--container-deep); }
.btn-white { background: var(--white); color: var(--graphite); }
.btn-white:hover { background: var(--plaster); }
.btn-line { border-color: currentColor; }
.btn-line:hover { background: var(--white); color: var(--graphite); border-color: var(--white); }
.link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; text-decoration-color: var(--celadon); }
.link:hover { text-decoration-color: currentColor; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }

/* header */
.site-header { position: sticky; top: 0; z-index: 50; height: var(--header); background: var(--plaster); border-bottom: 1px solid var(--fog); transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.site-header.over { position: fixed; left: 0; right: 0; background: transparent; border-color: transparent; color: var(--white); }
.site-header.over.solid { background: var(--graphite); }
.header-inner { height: 100%; display: flex; align-items: center; gap: 2rem; }
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.9rem; letter-spacing: 0.01em; text-decoration: none; line-height: 1; }
.nav { display: flex; align-items: center; gap: 2rem; margin-left: auto; }
.nav a { font-size: 0.95rem; font-weight: 500; text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom-color: currentColor; }
.nav .btn { padding: 0.8rem 1.15rem; font-size: 0.92rem; border-bottom: 2px solid transparent; }
.site-header:not(.over) .nav .btn { background: var(--container); color: var(--white); }
.site-header:not(.over) .nav .btn:hover { background: var(--container-deep); }
.site-header.over .nav .btn { background: var(--white); color: var(--graphite); }
.menu-toggle { display: none; margin-left: auto; background: none; color: inherit; border: 2px solid currentColor; padding: 0.5rem 0.9rem; font: 600 0.9rem var(--text); cursor: pointer; }

/* hero */
.hero { position: relative; min-height: max(640px, 100svh); color: var(--white); display: flex; flex-direction: column; justify-content: flex-end; background: var(--graphite); overflow: hidden; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,20,26,0.78) 0%, rgba(14,20,26,0.5) 38%, rgba(14,20,26,0) 68%), linear-gradient(180deg, rgba(14,20,26,0.5) 0%, rgba(14,20,26,0) 22%, rgba(14,20,26,0) 60%, rgba(14,20,26,0.8) 100%); }
.hero-body { width: 100%; position: relative; z-index: 1; padding-top: calc(var(--header) + 4rem); padding-bottom: clamp(2rem, 4vw, 3rem); }
.hero h1 { max-width: 11ch; margin-bottom: 1.6rem; }
.hero .lead { color: rgba(255,255,255,0.88); max-width: 46ch; margin-bottom: 2.2rem; }
.hero .link { text-decoration-color: rgba(255,255,255,0.5); }

/* the route: sea freight times from Foshan */
.route { width: 100%; position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.28); }
.route .wrap { display: grid; grid-template-columns: auto repeat(4, 1fr); gap: 0; align-items: stretch; }
.route-label { padding: 1.1rem 2rem 1.2rem 0; font-size: 0.875rem; color: rgba(255,255,255,0.75); align-self: center; max-width: 13ch; line-height: 1.35; }
.route-stop { padding: 1.1rem 1.4rem 1.2rem; border-left: 1px solid rgba(255,255,255,0.28); }
.route-stop b { display: block; font-family: var(--display); font-weight: 700; font-size: 1.5rem; line-height: 1.1; }
.route-stop span { font-size: 0.875rem; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }

/* load sequence: the one orchestrated moment */
@media (prefers-reduced-motion: no-preference) {
  .hero-img { animation: settle 1.6s cubic-bezier(.2,.7,.2,1) both; }
  .hero h1, .hero .lead, .hero .actions, .route { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
  .hero .lead { animation-delay: .12s; }
  .hero .actions { animation-delay: .22s; }
  .route { animation-delay: .4s; }
}
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* sections */
.section { padding-block: clamp(80px, 11vw, 144px); }
.section.white { background: var(--white); }
.section.dark { background: var(--graphite); color: var(--white); }
.section.blue { background: var(--container); color: var(--white); }
.on-dark .lead, .on-dark p { color: rgba(255,255,255,0.82); }
.head { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.head.single { grid-template-columns: 1fr; max-width: 52rem; }
.head h2 { max-width: 14ch; }

/* intro statement */
.intro { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.intro h2 { max-width: 15ch; }
.intro .lead + .lead { margin-top: 1.2rem; }

/* material strip: a sample board, full bleed */
.materials { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; gap: 6px; margin-top: clamp(3.5rem, 7vw, 6rem); }
.materials figure { margin: 0; position: relative; }
.materials img { width: 100%; height: clamp(220px, 30vw, 420px); object-fit: cover; }
.materials figcaption { font-size: 0.875rem; padding: 0.7rem var(--gutter) 0 0.1rem; color: var(--graphite-2); }
.materials figure:first-child figcaption { padding-left: var(--gutter); }

/* what we buy: photo cards */
.buy { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
.buy figure { margin: 0; }
.buy img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: 1.1rem; }
.buy h3 { margin-bottom: 0.45rem; }
.buy p { color: var(--graphite-2); font-size: 1rem; }

/* sequence: how a project runs */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); counter-reset: step; position: relative; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 2px; background: rgba(255,255,255,0.25); }
.steps li { counter-increment: step; position: relative; padding: 3.4rem 1.6rem 0 0; }
.steps li::before { content: counter(step); position: absolute; top: 0; left: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--celadon); color: var(--graphite); font: 700 1.05rem/1 var(--display); border-radius: 50%; }
.steps .when { display: block; font-size: 0.875rem; color: var(--celadon); margin-bottom: 0.5rem; font-variant-numeric: tabular-nums; }
.steps h3 { margin-bottom: 0.6rem; }
.steps p { font-size: 0.98rem; }
.steps-note { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.2); display: flex; flex-wrap: wrap; gap: 1rem 3rem; justify-content: space-between; align-items: center; }

/* split: photo and text */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 640px; }
.split-img { position: relative; min-height: 360px; }
.split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split-body { padding: clamp(56px, 8vw, 112px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; justify-content: center; }
.split-body h2 { margin-bottom: 1.5rem; max-width: 13ch; }
.split-body .lead { margin-bottom: 2rem; }
.tasks { list-style: none; padding: 0; border-top: 2px solid var(--graphite); }
.tasks li { display: grid; grid-template-columns: 11rem 1fr; gap: 1.25rem; padding: 0.95rem 0; border-bottom: 1px solid var(--fog); font-size: 0.98rem; }
.tasks b { font-weight: 600; }
.tasks span { color: var(--graphite-2); }

/* countries */
.countries { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 2vw, 1.5rem); }
.country { background: var(--white); display: flex; flex-direction: column; }
.country-img { position: relative; }
.country-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.country-img::after { content: ""; position: absolute; inset: 45% 0 0 0; background: linear-gradient(180deg, rgba(14,20,26,0), rgba(14,20,26,0.7)); }
.country-img h3 { z-index: 1; position: absolute; left: 1.5rem; bottom: 1.2rem; color: var(--white); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 800; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
.country-body { padding: 1.75rem 1.5rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; flex: 1; }
.country dl { border-top: 2px solid var(--graphite); }
.country dl div { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--fog); font-size: 0.96rem; }
.country dt { color: var(--graphite-2); }
.country .link { margin-top: auto; align-self: flex-start; }

/* prices */
.prices { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.prices h2 { max-width: 12ch; margin-bottom: 1.4rem; }
.tabs { display: inline-flex; border: 2px solid var(--white); margin-bottom: 1.75rem; }
.tabs button { font: 600 0.95rem var(--text); background: transparent; color: var(--white); border: 0; padding: 0.7rem 1.25rem; cursor: pointer; }
.tabs button[aria-selected="true"] { background: var(--white); color: var(--container); }
.price-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.price-table th { text-align: left; font-weight: 500; font-size: 0.875rem; padding: 0 0 0.8rem; border-bottom: 2px solid currentColor; }
.price-table td { padding: 1.05rem 0; border-bottom: 1px solid rgba(255,255,255,0.22); }
.price-table th:not(:first-child), .price-table td:not(:first-child) { text-align: right; padding-left: 1.5rem; }
.price-table td:nth-child(2) { opacity: 0.72; }
.price-table td:last-child { font-family: var(--display); font-weight: 700; font-size: 1.45rem; }
.price-note { font-size: 0.875rem; margin-top: 1.1rem; opacity: 0.8; }
.light .price-table td { border-bottom-color: var(--fog); }
[hidden] { display: none !important; }

/* founder and questions */
.people { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.founder { background: var(--white); padding: clamp(1.75rem, 3vw, 2.5rem); }
.founder .mono { width: 4rem; height: 4rem; border-radius: 50%; background: var(--container); color: var(--white); display: grid; place-items: center; font: 800 2rem/1 var(--display); margin-bottom: 1.4rem; }
.founder h3 { font-size: 2rem; }
.founder .role { display: block; color: var(--graphite-2); margin: 0.2rem 0 1rem; }
.founder p { color: var(--graphite-2); margin-bottom: 1.25rem; }
.faq { border-top: 2px solid var(--graphite); }
.faq details { border-bottom: 1px solid var(--fog); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 2rem; align-items: center; padding: 1.25rem 0; font-weight: 600; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 1.6rem/1 var(--display); color: var(--container); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 1.4rem; color: var(--graphite-2); }

/* closing */
.closing { position: relative; color: var(--white); background: var(--graphite); overflow: hidden; }
.closing > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; opacity: 0.45; }
.closing .wrap { position: relative; padding-block: clamp(96px, 13vw, 168px); display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 3rem; align-items: end; }
.closing h2 { font-size: clamp(3rem, 7vw, 6rem); max-width: 10ch; }
.closing p { color: rgba(255,255,255,0.85); margin-bottom: 1.8rem; }
.closing .link { text-decoration-color: rgba(255,255,255,0.5); }

/* inner page banner */
.banner { position: relative; color: var(--white); background: var(--graphite); min-height: clamp(460px, 62vh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,20,26,0.8) 0%, rgba(14,20,26,0.5) 40%, rgba(14,20,26,0.05) 72%), linear-gradient(180deg, rgba(14,20,26,0.55) 0%, rgba(14,20,26,0) 30%, rgba(14,20,26,0.6) 100%); }
.banner .wrap { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--header) + 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.banner h1 { font-size: clamp(3rem, 7.2vw, 6.25rem); max-width: 13ch; margin-bottom: 1.25rem; }
.banner .lead { color: rgba(255,255,255,0.88); max-width: 52ch; }
.banner .actions { margin-top: 2rem; }
.crumbs { font-size: 0.875rem; margin-bottom: 1.25rem; color: rgba(255,255,255,0.8); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.plain-head { padding-block: clamp(64px, 9vw, 120px) clamp(40px, 5vw, 64px); }
.plain-head .crumbs { color: var(--graphite-2); }
.plain-head h1 { font-size: clamp(3rem, 7vw, 6rem); max-width: 14ch; margin-bottom: 1.25rem; }

/* service rows (inner page) */
.service { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--fog); }
.service:first-child { border-top: 0; padding-top: 0; }
.service:nth-child(even) .service-img { order: 2; }
.service-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.service h2 { font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: 1rem; }
.service .lead { margin-bottom: 1.4rem; }
.ticks { list-style: none; padding: 0; display: grid; gap: 0.5rem; }
.ticks li { padding-left: 1.6rem; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.8rem; height: 2px; background: var(--container); }

/* standards (country pages) */
.standards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--fog); border: 2px solid var(--fog); }
.standards > div { background: var(--white); padding: 1.75rem 1.6rem 1.9rem; }
.standards h3 { font-size: 1.5rem; margin-bottom: 0.6rem; }
.standards p { font-size: 0.98rem; color: var(--graphite-2); }
.standards .codes { display: block; margin-top: 1rem; font-size: 0.875rem; font-weight: 600; color: var(--container); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--graphite); }
.facts > div { padding: 1.4rem 1.5rem 0 0; }
.facts > div + div { padding-left: 1.5rem; border-left: 1px solid var(--fog); }
.facts strong { display: block; font: 800 clamp(2.5rem, 4.5vw, 3.75rem)/1 var(--display); margin-bottom: 0.4rem; }
.facts span { font-size: 0.95rem; color: var(--graphite-2); }
.cols { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.cols h2 { max-width: 13ch; }
.cols .prose p + p { margin-top: 1rem; }
.cols .prose p { color: var(--graphite-2); font-size: 1.08rem; }
.ports { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.5rem; }
.ports span { background: var(--white); border: 1px solid var(--fog); padding: 0.45rem 0.8rem; font-size: 0.92rem; }

/* list rows (who we work with, rules) */
.rows { border-top: 2px solid var(--graphite); }
.rows > div { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 1.5rem 3rem; padding: 1.75rem 0; border-bottom: 1px solid var(--fog); }
.rows h3 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.rows p { color: var(--graphite-2); }
.rows p + p { margin-top: 0.6rem; font-size: 0.95rem; }

/* contact */
.contact { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.form { display: grid; gap: 1.35rem; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.35rem; }
.field label, .field legend { display: block; font-size: 0.92rem; font-weight: 600; margin-bottom: 0.45rem; }
.field input, .field select, .field textarea { width: 100%; font: 1rem/1.5 var(--text); color: var(--graphite); background: var(--white); border: 1px solid var(--fog); border-bottom: 2px solid var(--graphite); padding: 0.85rem 0.95rem; border-radius: 0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--container); outline-offset: 0; }
.field .hint { font-size: 0.875rem; color: var(--graphite-2); margin-top: 0.45rem; }
fieldset.field { border: 0; padding: 0; }
.checks { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.checks label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 400; font-size: 0.95rem; background: var(--white); border: 1px solid var(--fog); padding: 0.55rem 0.85rem; margin: 0; cursor: pointer; }
.checks label:has(input:checked) { border-color: var(--container); background: #E4ECF3; }
.checks input { accent-color: var(--container); }
.form-note { font-size: 0.9rem; color: var(--graphite-2); }
.aside { background: var(--white); padding: clamp(1.75rem, 3vw, 2.5rem); }
.aside h2 { font-size: 2.25rem; margin-bottom: 1.25rem; }
.next { list-style: none; padding: 0; counter-reset: n; }
.next li { counter-increment: n; position: relative; padding: 1rem 0 1rem 2.75rem; border-top: 1px solid var(--fog); color: var(--graphite-2); }
.next li::before { content: counter(n); position: absolute; left: 0; top: 0.95rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--container); color: var(--white); display: grid; place-items: center; font: 700 1rem/1 var(--display); }
.next b { display: block; color: var(--graphite); font-weight: 600; }

/* legal */
.prose-page { max-width: 46rem; }
.prose-page h2 { font-size: 2.25rem; margin: 2.5rem 0 0.75rem; }
.prose-page h2:first-child { margin-top: 0; }
.prose-page p { color: var(--graphite-2); }

/* footer */
.site-footer { background: var(--graphite); color: rgba(255,255,255,0.78); padding-block: 72px 36px; font-size: 0.95rem; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
.footer-grid .wordmark { color: var(--white); display: inline-block; margin-bottom: 1rem; font-size: 2.4rem; }
.footer-grid h4 { color: var(--white); font: 600 0.95rem var(--text); margin-bottom: 1rem; }
.footer-grid ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--white); text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.6rem; border-top: 1px solid rgba(255,255,255,0.15); font-size: 0.875rem; }
.footer-base a { text-decoration: none; }
.footer-base a:hover { text-decoration: underline; }

.notfound { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-block: 120px; }
.notfound h1 { margin-bottom: 1.25rem; max-width: 12ch; }
.notfound .lead { margin-bottom: 2rem; }

/* responsive */
@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr; gap: 0; }
  .steps::before { left: 1.05rem; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .steps li { padding: 0 0 2.2rem 3.6rem; }
  .route .wrap { grid-template-columns: repeat(2, 1fr); }
  .route-label { grid-column: 1 / -1; max-width: none; padding-bottom: 0.4rem; }
  .route-stop:nth-child(2), .route-stop:nth-child(4) { border-left: 0; padding-left: 0; }
  .standards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .head, .intro, .split, .countries, .prices, .people, .closing .wrap, .service, .cols, .contact, .rows > div { grid-template-columns: 1fr; }
  .service:nth-child(even) .service-img { order: 0; }
  .buy { grid-template-columns: 1fr 1fr; }
  .materials { grid-template-columns: repeat(3, 1fr); }
  .materials figure:nth-child(n+4) { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; row-gap: 1.5rem; }
  .facts > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .split-img { min-height: 420px; }
}
@media (max-width: 760px) {
  .hero::after, .banner::after { background: linear-gradient(180deg, rgba(14,20,26,0.6) 0%, rgba(14,20,26,0.55) 40%, rgba(14,20,26,0.88) 100%); }
  .menu-toggle { display: block; }
  .nav { display: none; }
  .site-header.open { background: var(--graphite); color: var(--white); }
  .site-header.open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; position: absolute; top: var(--header); left: 0; right: 0; background: var(--graphite); color: var(--white); padding: 1.5rem var(--gutter) 2rem; }
  .site-header.open .nav .btn { background: var(--white); color: var(--graphite); }
  .buy, .standards, .pair { grid-template-columns: 1fr; }
  .materials { grid-template-columns: 1fr 1fr; }
  .materials figure:nth-child(n+3) { display: none; }
  .tasks li, .country dl div { grid-template-columns: 1fr; gap: 0.15rem; }
  .footer-grid, .facts { grid-template-columns: 1fr; }
  .facts > div, .facts > div + div { padding-left: 0; border-left: 0; }
  .price-table th:nth-child(2), .price-table td:nth-child(2) { display: none; }
}
/* luxury feature on the homepage */
.feature { position: relative; color: var(--white); background: var(--graphite); overflow: hidden; min-height: clamp(560px, 80vh, 820px); display: flex; align-items: center; }
.feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,20,26,0.82) 0%, rgba(14,20,26,0.55) 38%, rgba(14,20,26,0) 68%); }
.feature .wrap { position: relative; z-index: 1; width: 100%; padding-block: clamp(80px, 10vw, 128px); }
.feature-body { max-width: 34rem; }
.feature h2 { margin-bottom: 1.4rem; }
.feature .lead { color: rgba(255,255,255,0.88); margin-bottom: 2rem; }

/* luxury specification grid */
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid rgba(255,255,255,0.25); }
.specs > div { padding: 1.75rem 2rem 2rem 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
.specs > div:not(:nth-child(3n+1)) { padding-left: 2rem; border-left: 1px solid rgba(255,255,255,0.15); }
.specs h3 { color: var(--celadon); margin-bottom: 0.6rem; }
.specs p { font-size: 1rem; }

@media (max-width: 1200px) and (min-width: 761px) {
  .nav { gap: 1.25rem; }
  .nav a { font-size: 0.9rem; }
  .header-inner { gap: 1.25rem; }
}
@media (max-width: 900px) {
  .specs { grid-template-columns: 1fr 1fr; }
  .specs > div:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .specs > div:nth-child(even) { padding-left: 1.5rem; border-left: 1px solid rgba(255,255,255,0.15); }
}
@media (max-width: 860px) and (min-width: 761px) {
  .nav a:not(.btn) { font-size: 0.84rem; }
  .nav { gap: 0.9rem; }
}
@media (max-width: 760px) {
  .feature::after { background: linear-gradient(180deg, rgba(14,20,26,0.55), rgba(14,20,26,0.85)); }
  .specs { grid-template-columns: 1fr; }
  .specs > div, .specs > div:nth-child(even) { padding-left: 0; border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ======================================================================
   v3 overrides: the trade showroom's shapes and type on every inner page
   ====================================================================== */
body { font-size: 1rem; line-height: 1.65; }
h1, h2, h3, .display { font-weight: 400; letter-spacing: -0.04em; line-height: 1.02; }
h1 { font-size: clamp(2.75rem, 6.4vw, 5.25rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.7; }

/* wordmark: crest + classical capitals, as in the app */
.wordmark { display: inline-flex; align-items: center; gap: 12px; font: 600 1.125rem/1 "Cinzel", "Trajan Pro", Georgia, serif; letter-spacing: 0.14em; }
.wordmark .crest { width: 36px; height: 36px; flex: none; background: currentColor; -webkit-mask: url(/brand/crest.png) center / contain no-repeat; mask: url(/brand/crest.png) center / contain no-repeat; }
.site-header:not(.over) .wordmark .crest { background: var(--container-deep); }
.footer-grid .wordmark { font-size: 1.25rem; }
.footer-grid .wordmark .crest { width: 40px; height: 40px; }

/* header */
.site-header { background: color-mix(in srgb, var(--plaster) 86%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); border-bottom-color: var(--fog); }
.site-header.over { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.over.solid { background: color-mix(in srgb, var(--navy) 92%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.nav { gap: 4px; }
.nav a { padding: 8px 12px; border-radius: 999px; border-bottom: 0; opacity: .82; transition: background .2s, opacity .2s; }
.nav a:hover, .nav a[aria-current="page"] { border-bottom: 0; opacity: 1; background: color-mix(in srgb, currentColor 9%, transparent); }
.nav .btn { margin-left: 8px; opacity: 1; }
.menu-toggle { border-radius: 999px; border-width: 1px; }

/* buttons: pills */
.btn { border-radius: 999px; border-width: 1px; padding: 0 1.5rem; height: 48px; font-size: 0.9375rem; transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }
.nav .btn { height: 40px; padding: 0 1.1rem; font-size: 0.875rem; }
.btn-blue, .site-header:not(.over) .nav .btn { background: var(--graphite); color: #fff; box-shadow: 0 8px 20px -10px rgb(16 27 51 / 0.55); }
.btn-blue:hover, .site-header:not(.over) .nav .btn:hover { background: var(--container); transform: translateY(-1px); }
.link { text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }

/* photo banners and dark panels: navy instead of graphite */
.hero, .banner, .closing, .feature, .section.dark, .site-footer { background-color: var(--navy); }
.hero::after { background: linear-gradient(90deg, rgb(13 23 48 / 0.8) 0%, rgb(13 23 48 / 0.5) 38%, rgb(13 23 48 / 0) 68%), linear-gradient(180deg, rgb(13 23 48 / 0.5) 0%, rgb(13 23 48 / 0) 22%, rgb(13 23 48 / 0) 60%, rgb(13 23 48 / 0.82) 100%); }
.banner::after { background: linear-gradient(90deg, rgb(13 23 48 / 0.82) 0%, rgb(13 23 48 / 0.5) 40%, rgb(13 23 48 / 0.05) 72%), linear-gradient(180deg, rgb(13 23 48 / 0.55) 0%, rgb(13 23 48 / 0) 30%, rgb(13 23 48 / 0.62) 100%); }
.feature::after { background: linear-gradient(90deg, rgb(13 23 48 / 0.84) 0%, rgb(13 23 48 / 0.55) 38%, rgb(13 23 48 / 0) 68%); }
.section.blue { background: var(--container-deep); }
.banner h1, .plain-head h1 { font-size: clamp(2.75rem, 6vw, 4.75rem); }
.closing h2 { font-size: clamp(2.5rem, 5.6vw, 4.5rem); }

/* photos and cards: soft corners */
.buy img, .service-img img, .materials img { border-radius: var(--r-card); }
.country, .founder, .aside { border-radius: var(--r-sheet); border: 1px solid var(--fog); box-shadow: var(--shadow-1); overflow: hidden; }
.country dl, .tasks, .faq, .rows, .facts { border-top-width: 1px; border-top-color: var(--fog); }
.standards { gap: 12px; background: none; border: 0; }
.standards > div { border: 1px solid var(--fog); border-radius: var(--r-card); }
.ports span, .checks label { border-radius: 999px; }
.checks label { white-space: nowrap; padding: 0.55rem 1rem; }
.steps li::before { font-family: var(--text); font-weight: 600; font-size: 0.875rem; }
.next li::before { font-family: var(--text); font-weight: 600; font-size: 0.8125rem; }
.facts strong { font-weight: 400; letter-spacing: -0.04em; }
.price-table td:last-child { font-weight: 500; letter-spacing: -0.02em; }
.tabs { border: 0; background: rgb(255 255 255 / 0.12); padding: 4px; border-radius: 999px; gap: 4px; }
.tabs button { border-radius: 999px; }
.faq summary { font-family: var(--display); font-weight: 400; font-size: 1.125rem; letter-spacing: -0.015em; }
.faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #cfd5e0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' stroke='%23101b33' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat; transition: transform .3s var(--ease); }

/* forms: rounded fields with a royal focus ring */
.field input, .field select, .field textarea { border: 1px solid #cfd5e0; border-radius: var(--r-ctl); background: var(--white); transition: border-color .2s, box-shadow .2s; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--container); box-shadow: 0 0 0 3px var(--royal-wash); }
.checks label:has(input:checked) { background: var(--royal-wash); }

/* footer */
.site-footer { color: rgb(255 255 255 / 0.7); }
.footer-grid h4 { font-size: 0.8125rem; }

/* contact form: hidden bot trap and result message */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note.ok { color: #2f7a4f; }
.form-note.err { color: #b3261e; }

/* ======================================================================
   Guide films: /guides/ (the player is /guides.js; its look matches the homepage's in home.css)
   ====================================================================== */
.guides-top { color: var(--white); background: var(--navy) radial-gradient(900px 420px at 0% 0%, rgb(58 132 227 / 0.24), transparent 65%); padding: calc(var(--header) + clamp(32px, 6vw, 72px)) 0 clamp(56px, 8vw, 104px); }
.guides-top .crumbs { color: rgb(255 255 255 / 0.75); }
.guides-top h1 { max-width: 16ch; margin-bottom: 1.25rem; }
.guides-top .lead { color: rgb(255 255 255 / 0.82); max-width: 56ch; }
.guides-film { margin-top: clamp(2rem, 4vw, 3rem); }
.guides-film video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sheet); background: #000; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7); }
.guides-film figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem; margin-top: 1rem; font-size: 0.9375rem; color: rgb(255 255 255 / 0.72); }
.guides-film figcaption b { color: var(--white); font-weight: 500; }

.guide-grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.guide-card, .guide-ask { height: 100%; border-radius: var(--r-sheet); text-decoration: none; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease); }
.guide-card { display: grid; grid-template-rows: auto auto 1fr; gap: 0.4rem; padding: 10px 10px 1.25rem; background: var(--white); border: 1px solid var(--fog); color: var(--graphite); }
.guide-card:hover, .guide-ask:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(16 27 51 / 0.04), 0 22px 48px -24px rgb(16 27 51 / 0.32); }
.guide-card:hover { border-color: var(--container); }
.guide-poster { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: 0.5rem; border-radius: var(--r-card); overflow: hidden; background: var(--navy); }
.guide-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.guide-card:hover .guide-poster img { transform: scale(1.04); }
.guide-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgb(255 255 255 / 0.94); color: var(--graphite); box-shadow: 0 8px 24px -8px rgb(0 0 0 / 0.5); transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); }
.guide-card:hover .guide-play { background: var(--container); color: var(--white); transform: scale(1.06); }
.guide-len { position: absolute; right: 8px; bottom: 8px; padding: 3px 8px; border-radius: 999px; background: rgb(13 23 48 / 0.78); color: var(--white); font-size: 0.75rem; font-weight: 600; line-height: 1.4; font-variant-numeric: tabular-nums; }
.guide-card h3 { padding-inline: 6px; font-size: 1.25rem; }
.guide-card p { padding-inline: 6px; font-size: 0.9375rem; color: var(--graphite-2); }
.guide-ask { display: grid; align-content: space-between; gap: 1rem; padding: 1.5rem; border: 1px solid var(--navy); background: var(--navy) radial-gradient(500px 260px at 100% 0%, rgb(58 132 227 / 0.3), transparent 70%); color: var(--white); }
.guide-ask-k { font-family: var(--display); font-size: 1.375rem; letter-spacing: -0.02em; line-height: 1.2; }
.guide-ask-t { color: rgb(255 255 255 / 0.72); font-size: 0.9375rem; }
.guide-ask-go { font-weight: 600; color: var(--celadon); }
@media (max-width: 1080px) { .guide-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .guide-grid { grid-template-columns: minmax(0, 1fr); } }

/* the player (same as home.css, with this sheet's names) */
html.gl-open { overflow: hidden; }
.gl { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--gutter); border: 0; background: transparent; color: var(--white); }
.gl[open] { display: grid; place-items: center; }
.gl::backdrop { background: rgb(13 23 48 / 0.84); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.gl :focus-visible { outline-color: var(--white); }
.gl-panel { width: min(1080px, 100%, calc((100vh - 200px) * 16 / 9)); width: min(1080px, 100%, calc((100dvh - 200px) * 16 / 9)); min-width: min(320px, 100%); display: grid; gap: 14px; }
.gl-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.gl-title { font-family: var(--display); font-size: clamp(1.125rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; }
.gl-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.3); background: rgb(255 255 255 / 0.08); color: var(--white); cursor: pointer; transition: background .2s var(--ease); }
.gl-close:hover { background: rgb(255 255 255 / 0.2); }
.gl-frame { aspect-ratio: 16 / 9; border-radius: var(--r-card); overflow: hidden; background: #000; box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.7); }
.gl-frame video { display: block; width: 100%; height: 100%; background: #000; }
.gl-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.gl-text { font-size: 0.9375rem; color: rgb(255 255 255 / 0.72); }
.gl-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--white); color: var(--graphite); font: 600 0.875rem/1.2 var(--text); text-decoration: none; cursor: pointer; transition: background .2s var(--ease); }
.gl-go b { font-weight: 600; }
.gl-go:hover { background: var(--royal-wash); }
@media (max-width: 480px) {
  .gl { padding: 12px; }
  .gl-next, .gl-go { width: 100%; justify-content: center; }
}

/* header: the full menu needs about 1180px. Below that the links wrapped onto two lines and, under 860px,
   pushed "Talk to us" off the screen, so tablets get the Menu button like phones (the open menu is the phone one) */
.nav a { white-space: nowrap; }
@media (max-width: 1180px) {
  .menu-toggle { display: block; }
  .nav { display: none; }
  .site-header.open { background: var(--navy); color: var(--white); }
  .site-header.open .nav { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; position: absolute; top: var(--header); left: 0; right: 0; background: var(--navy); color: var(--white); padding: 1.25rem var(--gutter) 2rem; box-shadow: 0 24px 40px -24px rgb(0 0 0 / 0.5); }
  #siteHeader.open .nav .btn { margin: 0.6rem 0 0; background: var(--white); color: var(--graphite); }
}
#siteHeader.open .wordmark .crest { background: currentColor; }