/* Khang Huy Holiday — built on the Hyer Aviation style reference
   Deep ink + parchment-white, one clay accent, pill actions, architectural type. */

:root {
  --ink: #000d10;
  --white: #ffffff;
  --ash: #8e8e95;
  --pebble: #d5d3d4;
  --hull: #0f0f1c;
  --deck: #151623;
  --clay: #bc7155;

  --sky-top: #3f7fcf;
  --sky-horizon: #dbe9f3;

  --font: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;

  --max: 1200px;
  --gutter: clamp(16px, 4vw, 52px);
  --section: clamp(80px, 12vw, 160px);

  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius-panel: clamp(32px, 4.5vw, 64px); /* rounded top of the panel that rises over the hero */
  --radius-card: clamp(28px, 3.4vw, 50px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; touch-action: pan-x pan-y; } /* nothing may widen the page on phones; no pinch zoom */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.61;
  -webkit-font-smoothing: antialiased;
  /* no overflow clipping here (or on any section holding sticky elements): iOS Safari then positions sticky
     elements on the main thread and they shake while scrolling — the clip on <html> goes to the viewport instead */
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
sup { font-size: .3em; vertical-align: top; position: relative; top: .35em; margin-left: .04em; font-weight: 500; letter-spacing: 0; }
.sr-img { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

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

/* ---------- Type ---------- */
.h-xl, .h-lg, .h-md { font-weight: 700; margin: 0; line-height: 1; }
.h-xl { font-size: clamp(56px, 10vw, 131px); letter-spacing: -0.02em; line-height: .9; }
.h-lg { font-size: clamp(38px, 5vw, 63px); letter-spacing: -0.02em; }
.h-md { font-size: clamp(30px, 3.6vw, 52px); letter-spacing: -0.01em; }
.lead { color: var(--ash); margin: 28px 0 0; max-width: 560px; }
.lead-light { color: rgba(255,255,255,.72); }
.eyebrow { font-size: 17px; line-height: 1; margin: 0; color: var(--ink); display: flex; gap: 10px; }
.eyebrow span { color: var(--ash); }
.eyebrow-light { color: var(--white); }
.eyebrow-light span { color: rgba(255,255,255,.5); }

/* split text helpers */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.w > span { display: inline-block; will-change: transform; }

/* ---------- Pills ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  border-radius: 1000px;
  padding: 15px 22px 16px;
  font-size: 17px; font-weight: 700; line-height: 1;
  transition: background .35s var(--ease), color .35s var(--ease), transform .35s var(--ease);
  white-space: nowrap; text-align: right;
}
:where(button.pill) { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
.pill-dark { background: var(--ink); color: var(--white); }
.pill-dark:hover { background: #1b2a2e; transform: translateY(-2px); }
.pill-ghost { color: var(--white); border: 1px solid rgba(255,255,255,.9); }
.pill-ghost:hover { background: var(--white); color: var(--ink); }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: calc(18px + env(safe-area-inset-top, 0px)) var(--gutter) auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav-mark {
  font-weight: 700; font-size: 20px; letter-spacing: -0.02em;
  height: 48px; display: inline-flex; align-items: center; padding: 0 20px;
  border-radius: 1000px; background: rgba(255,255,255,.0);
  transition: background .4s var(--ease), color .4s var(--ease), opacity .4s var(--ease);
  opacity: 0;
}
.nav-mark { gap: 8px; padding: 0 18px 0 14px; }
.nav-mark svg { height: 28px; width: auto; display: block; }
.nav-mark sup { top: .25em; font-size: .5em; }
/* "Khang Huy / Holiday" lockup: Holiday smaller, right-aligned under "Huy" */
.lockup { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: .9; }
.lockup b { font-weight: 700; font-size: 20px; letter-spacing: -0.035em; }
.lockup i { font-style: normal; font-weight: 400; font-size: 12.5px; letter-spacing: 0; margin-top: 3px; }
.nav-links {
  margin-left: auto; display: flex; gap: 28px; align-items: center;
  height: 48px; padding: 0 26px; border-radius: 1000px;
  font-size: 17px; line-height: 1;
  transition: background .4s var(--ease), color .4s var(--ease);
}
.nav-links a { position: relative; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--ease); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.icon-btn {
  width: 48px; height: 48px; border-radius: 100%; border: 0; cursor: pointer;
  background: var(--ink); display: grid; place-content: center; gap: 6px; padding: 0;
  transition: background .4s var(--ease);
}
.icon-btn span { display: block; width: 18px; height: 1.5px; background: var(--white); transition: transform .4s var(--ease); }
.menu-open .icon-btn span:first-child { transform: translateY(3.75px) rotate(45deg); }
.menu-open .icon-btn span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
.icon-btn:focus-visible, .pill:focus-visible, .nav-links a:focus-visible { outline: 2px solid var(--clay); outline-offset: 3px; }

/* frosted "liquid glass" pills (after 21st.dev liquid-glass-button) — the page blurs behind them and a layered
   inner rim catches the light. The menu has it from the start; the logo pill joins once past the hero */
.nav.is-solid .nav-mark { opacity: 1; }
.nav.is-solid .nav-mark, .nav .nav-links, .nav .icon-btn {
  background: rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(16px) saturate(1.7); backdrop-filter: blur(16px) saturate(1.7);
  box-shadow:
    0 0 6px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3px rgba(0, 0, 0, .9), inset -3px -3px .5px -3px rgba(0, 0, 0, .85),
    inset 1px 1px 1px -.5px rgba(0, 0, 0, .6), inset -1px -1px 1px -.5px rgba(0, 0, 0, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12), inset 0 0 2px 2px rgba(255, 255, 255, .06),
    0 0 12px rgba(255, 255, 255, .15);
  transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease); /* no opacity: the intro fades the menu in */
}
.nav-mark { transition: background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease), opacity .4s var(--ease); }
.nav .icon-btn span { background: var(--ink); }
/* over dark sections the glass turns smoky and its rim lights up */
.nav.on-dark .nav-mark, .nav.on-dark .nav-links, .nav.on-dark .icon-btn {
  background: rgba(20, 24, 44, .38); color: var(--white);
  box-shadow:
    0 0 8px rgba(0, 0, 0, .03), 0 2px 6px rgba(0, 0, 0, .08),
    inset 3px 3px .5px -3.5px rgba(255, 255, 255, .09), inset -3px -3px .5px -3.5px rgba(255, 255, 255, .85),
    inset 1px 1px 1px -.5px rgba(255, 255, 255, .6), inset -1px -1px 1px -.5px rgba(255, 255, 255, .6),
    inset 0 0 6px 6px rgba(255, 255, 255, .12), inset 0 0 2px 2px rgba(255, 255, 255, .06),
    0 0 12px rgba(0, 0, 0, .15);
}
.nav.on-dark .icon-btn span { background: var(--white); }

.menu {
  position: fixed; inset: 0; z-index: 40; background: var(--ink); color: var(--white);
  display: flex; align-items: flex-end; padding: 120px var(--gutter) 48px;
  clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease);
}
.menu nav { display: flex; flex-direction: column; gap: 6px; }
.menu a { font-size: clamp(40px, 8vw, 84px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; }
.menu a:hover { color: var(--clay); }
.menu-open .menu { clip-path: inset(0 0 0 0); }
.menu-open .nav-links, .menu-open .nav-mark { opacity: 0; pointer-events: none; }

/* ---------- Hero ---------- */
.hero { position: relative; height: 280vh; background: var(--sky-horizon); margin-bottom: calc(var(--radius-panel) * -1); }
.hero-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background: linear-gradient(180deg, var(--sky-top) 0%, #8fbbe6 32%, var(--sky-horizon) 50%, #1f5a8c 50.2%, #0d3760 100%); }
.hero-poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
#sea { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s var(--ease); }
#sea.is-ready { opacity: 1; }
.hero-ui { position: absolute; inset: 0; pointer-events: none; }
.hero-ui a { pointer-events: auto; }

.hero-ui { --wm: clamp(58px, 12vw, 190px); --wm-top: calc(clamp(76px, 10vh, 110px) + env(safe-area-inset-top, 0px)); }
.wordmark {
  position: absolute; left: calc(var(--gutter) + var(--wm) * .64 + 5px); top: var(--wm-top);
  margin: 0; font-weight: 700; color: var(--ink);
  font-size: var(--wm); line-height: .8; letter-spacing: -0.045em;
  white-space: nowrap; text-align: right;
  display: flex; flex-direction: column; /* no margin collapsing between the two lines */
}

/* Khang Huy bird: logo at rest, takes flight on scroll */
.bird {
  position: absolute; z-index: 3; left: var(--gutter); top: calc(var(--wm-top) - var(--wm) * .06);
  width: calc(var(--wm) * .56); aspect-ratio: 209 / 348;
  pointer-events: auto; cursor: pointer;
}
.bird-fly, .bird-tilt, .bird svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bird-fly { will-change: transform; transform-origin: 60% 40%; }
.bird-tilt { animation: birdFloat 5s ease-in-out infinite; transition: transform .6s var(--ease); }
.bird-wing { transform-box: view-box; transform-origin: 128px 138px; }
.bird-body { transform-box: view-box; transform-origin: 140px 180px; }
.bird.is-flap .bird-wing { animation: flap .52s cubic-bezier(.45,0,.3,1) infinite; }
.bird.is-flying .bird-tilt { animation: none; }
.bird.is-flying .bird-wing { animation: flap .38s cubic-bezier(.45,0,.3,1) infinite; }
.bird.is-flying .bird-body { animation: bob .38s cubic-bezier(.45,0,.3,1) infinite; }
@keyframes flap {
  0%   { transform: rotate(0deg) scale(1, 1); }
  42%  { transform: rotate(-62deg) scale(1, .7); }
  72%  { transform: rotate(-18deg) scale(1, .92); }
  100% { transform: rotate(0deg) scale(1, 1); }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 42% { transform: translateY(-6px); } }
.bird-gl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.bird.is-3d .bird-wing, .bird.is-3d .bird-body { animation: none !important; } /* the 3D bird does the flapping */
.bird.is-3d .bird-tilt { animation: none; }
@keyframes birdFloat { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -6px; rotate: -2deg; } }
/* each line clips its rise-in animation; extra room above and below (pulled back by negative margins, so the
   lines sit where they did) keeps the tall letters (K, h, H), the tails (g, y) and the y's outer stroke uncut */
.wm-line { display: block; overflow: hidden; padding: .16em .12em .3em; margin: -.14em -.12em -.2em; }
.wm-inner { display: inline-block; will-change: transform; }
/* "Holiday" as in the brand lockup: same cap height, light weight, centred under "Khang Huy" (® excluded) */
/* "Holiday" as in the brand lockup: smaller, regular weight, right-aligned under "Huy" */
.wm-sub { font-size: calc(.6em - 3px); font-weight: 400; letter-spacing: -0.01em; margin-top: calc(.02em - .14em - 3px); padding-right: .16em; }
.wordmark sup { font-size: .22em; top: .2em; letter-spacing: 0; }

.hero-headline {
  position: absolute; right: var(--gutter); top: clamp(200px, 25vh, 290px);
  margin: 0; text-align: left;
  font-size: clamp(36px, 4.4vw, 63px); line-height: 1; letter-spacing: -0.02em; font-weight: 700;
}
.hl-line { display: block; overflow: hidden; padding-bottom: .06em; }
.hl-line > span { display: inline-block; will-change: transform; }

.hero-caption {
  position: absolute; left: var(--gutter); bottom: 28px; margin: 0;
  font-size: 17px; line-height: 1.3; max-width: 340px; color: var(--ink);
  transition: color .4s var(--ease);
}
/* hero copy that sits over the sea turns white (and a touch larger on desktop); over the sky it stays ink */
.hero-headline.on-sea, .hero-caption.on-sea { color: var(--white); text-shadow: 0 1px 18px rgba(0, 30, 60, .25); }
@media (min-width: 601px) {
  .hero-headline.on-sea { font-size: calc(clamp(36px, 4.4vw, 63px) + 5px); }
  .hero-caption.on-sea { font-size: 22px; max-width: 420px; }
}
.scroll-cue {
  position: absolute; right: var(--gutter); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); pointer-events: auto;
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; letter-spacing: .02em; color: var(--white); text-shadow: 0 1px 14px rgba(0, 30, 60, .3);
}
.scroll-cue svg { width: 22px; height: 22px; animation: cue 1.6s var(--ease) infinite; }
@keyframes cue { 0%, 100% { transform: translateY(-3px); opacity: .55; } 50% { transform: translateY(4px); opacity: 1; } }

.hero-caption, .scroll-cue { animation: fadeUp 1.1s var(--ease) .8s backwards; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes fadeUpCue { from { opacity: 0; transform: translate(-50%, 16px); } }

/* ---------- Bands ---------- */
.band { position: relative; padding: var(--section) 0; }
.band-tight { padding-top: 0; }
.band-white { background: var(--white); }
.band-dark { background: var(--hull); color: var(--white); }
.band-deck { background: var(--deck); color: var(--white); }

.grid-right { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.grid-right .col { grid-column: 2; }
.grid-right .eyebrow { position: sticky; top: 110px; }

/* stats */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 64px 0 24px; }
.stat { display: flex; flex-direction: column; gap: 10px; }
.stat-num { font-size: clamp(44px, 5vw, 63px); font-weight: 700; letter-spacing: -0.03em; line-height: .9; }
.stat-label { font-size: 17px; color: var(--ash); line-height: 1.3; }

.hairline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--pebble); transform-origin: left; }

/* partners */
.row-head { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: end; padding-top: 24px; border-top: 1px solid var(--pebble); }
.marquee { margin-top: 72px; overflow: hidden; border-top: 1px solid var(--pebble); border-bottom: 1px solid var(--pebble); padding: 22px 0; }
.marquee-track { display: flex; gap: 64px; width: max-content; animation: marquee 34s linear infinite; }
.marquee-track span { font-size: clamp(30px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.marquee-track span:nth-child(even) { color: var(--ash); }
@keyframes marquee { to { transform: translateX(-50%); } }


/* news */
.news { padding: 0; }
.news-pin { padding: var(--section) 0; overflow: hidden; }
@media (min-width: 761px) {
  /* pinned: the whole frame (heading, square images and the titles under them) fits one screen */
  .news-pin {
    min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
    padding: clamp(88px, 11vh, 120px) 0 clamp(150px, 20vh, 200px); /* roomy gap before Our profile rises */
  }
  .news-head { grid-template-columns: auto 1fr; } /* the heading stays on one line so the frame fits */
  .news-head .h-lg { white-space: nowrap; }
}
.news-head { display: grid; grid-template-columns: 1fr 1fr; column-gap: 80px; row-gap: 24px; align-items: end; }
.news-head .eyebrow { grid-column: 1 / -1; }
.news-lead { margin: 0; justify-self: end; }
.news-progress { grid-column: 1 / -1; height: 1px; background: var(--pebble); position: relative; margin-top: 24px; }
.news-progress i { position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: left; }
.news-track { display: flex; gap: clamp(22px, 2.4vw, 32px); padding: clamp(32px, 5vh, 48px) var(--gutter) 0; width: max-content; }
.card { width: clamp(220px, min(28vw, 100svh - 520px), 380px); flex: none; }
/* square, like the original post images — the whole picture shows */
.card-img { overflow: hidden; aspect-ratio: 1; background: #eef0f1; border-radius: 14px; }
.card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.card:hover .card-img img { transform: scale(1.04); }
.card time { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--pebble); font-size: 15px; color: var(--ash); line-height: 1; }
.card h3 { margin: 12px 0 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.15; letter-spacing: -0.01em; transition: color .3s var(--ease); }
/* the whole card opens the story; its title turns the logo's navy on hover */
a.card { display: block; cursor: pointer; }
a.card:hover h3, a.card:focus-visible h3 { color: #000068; }
.card-more { aspect-ratio: 1; border-radius: 14px; align-self: flex-start; background: var(--ink); color: var(--white); display: flex; flex-direction: column; justify-content: space-between; padding: 31px; }
.card-more span { font-size: clamp(37px, 3.4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.card-more i { font-style: normal; font-size: 52px; align-self: flex-end; transition: transform .5s var(--ease); }
.card-more:hover i { transform: translateX(10px); }


/* profile */
.company { margin: 40px 0 0; display: flex; flex-direction: column; gap: 6px; }
.company strong { font-size: 23px; line-height: 1.2; letter-spacing: -0.01em; }
.company span { color: rgba(255,255,255,.6); }
.facts { margin: 48px 0 0; }
.facts div { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.14); }
.facts div:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.facts dt { color: rgba(255,255,255,.55); font-size: 17px; }
.facts dd { margin: 0; }

/* footer */
.footer { background: var(--ink); color: var(--white); padding-top: var(--section); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; }
.footer-title { font-size: clamp(37px, 4vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1; margin: 0 0 32px; }
.footer-nav { display: flex; flex-direction: column; gap: 13px; font-size: 20px; color: var(--ash); line-height: 1.2; }
.footer-nav a:hover { color: var(--white); }
.footer-side { display: flex; flex-direction: column; gap: 40px; }
.footer-contact { display: flex; flex-direction: column; gap: 12px; font-style: normal; font-size: 16px; line-height: 1.4; color: var(--ash); max-width: 32ch; }
.footer-contact p { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.footer-contact svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--white); opacity: .8; }
.footer-contact a:hover { color: var(--white); }
.footer-mark { margin-top: clamp(80px, 12vw, 160px); padding: 0 var(--gutter); line-height: .78; }
.footer-mark span { display: block; font-weight: 700; font-size: 17.6vw; letter-spacing: -0.05em; white-space: nowrap; will-change: transform; }
/* the same lockup as the hero: "Holiday" smaller, regular weight, right-aligned under "Huy" */
.footer-mark span { display: flex; flex-direction: column; align-items: flex-end; width: max-content; }
.footer-mark b { font-weight: 700; }
.footer-mark i { font-style: normal; font-size: .6em; font-weight: 400; letter-spacing: -0.01em; margin-top: calc(.02em - .14em + 10px); padding-right: .04em; }
.footer-legal { display: flex; justify-content: space-between; gap: 16px; padding-top: 28px; padding-bottom: 28px; border-top: 1px solid rgba(255,255,255,.12); margin-top: 24px; font-size: 15px; color: var(--ash); }
.footer-legal a:hover { color: var(--white); }

/* ---------- Responsive ---------- */
/* wide screens show the menu inline, so the round menu button only appears once the links fold away (≤960px) */
@media (min-width: 961px) {
  .nav .icon-btn { display: none; }
}
@media (max-width: 960px) {
  .nav-links { display: none; }
  .grid-right, .row-head, .news-head { grid-template-columns: 1fr; gap: 32px; }
  .grid-right .col { grid-column: 1; }
  .grid-right .eyebrow { position: static; }
  .news-lead { justify-self: start; }
  .footer-top { grid-template-columns: 1fr; }
  .hero-headline { top: auto; bottom: 120px; right: auto; left: var(--gutter); }
}
@media (max-width: 600px) {
  body { font-size: 17px; }
  .stats { grid-template-columns: 1fr; }
  .facts div { grid-template-columns: 1fr; gap: 4px; }
  .hero-caption { bottom: 74px; }
  .hero-headline { bottom: auto; top: 30vh; left: auto; right: var(--gutter); text-align: right; }
  /* the bird + "Khang Huy / Holiday" lockup sits centred, with a little more air between bird and words
     (--wm-w is the wordmark's width, measured in js/main.js) */
  .hero-ui { --wm-gap: calc(var(--wm) * .08 + 14px); --lockup-x: calc((100% - var(--wm) * .56 - var(--wm-gap) - var(--wm-w, 260px)) / 2); }
  .bird { left: var(--lockup-x); }
  .wordmark { left: calc(var(--lockup-x) + var(--wm) * .56 + var(--wm-gap)); }
  .scroll-cue { right: auto; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); white-space: nowrap; animation-name: fadeUpCue; }
}
/* phones & small tablets: no pinning — the news is a swipeable carousel that keeps the page gutter */
@media (max-width: 760px) {
  .news-track {
    overflow-x: auto; width: auto; padding: 32px var(--gutter) 8px;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .news-track::-webkit-scrollbar { display: none; }
  .news-track::after { content: ""; flex: 0 0 calc(var(--gutter) - 22px); } /* right-hand gutter after the last card */
  .card { scroll-snap-align: start; width: 74vw; }
  .news-pin { padding-bottom: calc(var(--section) * 1.6); } /* roomy gap before Our profile rises */
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- 01 Who we are: rounded panel + scroll & stack cards (after mindmarket.com) ---------- */
.about {
  position: relative; z-index: 5; background: var(--white);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  --stack-top: 104px;
}
.about-grid { display: grid; grid-template-columns: 1fr; gap: 56px; }
.about-sticky { display: flex; flex-direction: column; gap: 28px; }
.about-sticky .lead, .about-sticky .stats { margin: 0; }
.about-title {
  margin: 0; font-weight: 600; font-size: clamp(42px, 5.6vw, 84px);
  line-height: 1.06; letter-spacing: -0.05em; max-width: 12ch;
}
/* "10 years" with a moving wave underline */
.about-title strong {
  position: relative; display: inline-block; font-weight: inherit; white-space: nowrap;
  --wave-h: clamp(10px, 1.3vw, 18px); --wave-w: calc(var(--wave-h) * 3.2);
}
.about-title strong::after {
  content: ""; position: absolute; left: .04em; right: -.02em; bottom: calc(var(--wave-h) * -.45); height: var(--wave-h);
  background: var(--clay);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'><path d='M0,5.7c16,0,16,8.8,32.1,8.8s16-8.8,32.1-8.8' fill='none' stroke='black' stroke-width='9'/></svg>") repeat-x 0 0 / var(--wave-w) var(--wave-h);
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 20'><path d='M0,5.7c16,0,16,8.8,32.1,8.8s16-8.8,32.1-8.8' fill='none' stroke='black' stroke-width='9'/></svg>") repeat-x 0 0 / var(--wave-w) var(--wave-h);
  animation: wave 3s linear infinite;
}
@keyframes wave { to { -webkit-mask-position: calc(var(--wave-w) * -1) 0; mask-position: calc(var(--wave-w) * -1) 0; } }

.stack { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 24px; }
.stack-item { position: sticky; top: calc(var(--stack-top) + var(--i) * 18px); }
.stack-card {
  --bg: var(--white); --fg: var(--ink);
  background: var(--bg); color: var(--fg);
  border-radius: var(--radius-card); padding: clamp(24px, 2.6vw, 36px);
  min-height: 420px; display: flex; flex-direction: column; gap: 20px;
  transform-origin: 50% 100%; will-change: transform;
  box-shadow: 0 -1px 0 rgba(255,255,255,.08) inset;
}
.stack-card.-deck { --bg: var(--deck); --fg: var(--white); }
.stack-card.-clay { --bg: var(--clay); --fg: var(--white); }
.stack-card.-sky { --bg: var(--sky-top); --fg: var(--white); }
.stack-card.-paper { --bg: #f1ece3; --fg: var(--ink); }
.stack-card header { display: flex; justify-content: flex-end; align-items: flex-start; font-size: 17px; opacity: .9; }
.stack-icon {
  width: 60px; height: 60px; border-radius: 100%; display: grid; place-items: center;
  background: var(--fg); color: var(--bg);
}
.stack-icon svg { width: 26px; height: 26px; }
.stack-card h3 {
  margin: auto 0 0; font-weight: 500; font-size: clamp(44px, 5.4vw, 80px);
  line-height: .95; letter-spacing: -0.055em;
}
.stack-card p { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; max-width: 30ch; opacity: .88; text-wrap: balance; }

@media (min-width: 1000px) {
  .about-grid { grid-template-columns: 7fr 5fr; gap: clamp(40px, 6vw, 96px); } /* stretch: the intro column runs the full height so its content can stay sticky */
  .about-sticky { position: sticky; top: calc(var(--stack-top) + 4vh); min-height: 50vh; }
  .stack { padding-top: 18vh; margin-bottom: 8vh; }
  .stack-card { min-height: 0; aspect-ratio: 450 / 540; }
}
@media (max-width: 760px) {
  .stack-card { will-change: auto; } /* no scrubbed transform on phones (see main.js) */
}
@media (max-width: 600px) {
  .about { --stack-top: 84px; }
  .stack-card { min-height: 380px; }
  .stack-card p { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-title strong::after { animation: none; }
}

/* "Learn more": a glass pill, label always shown (after 21st.dev jahed/glass-button, the "Submit" style) —
   a soft drop shadow ring, a conic rim highlight that turns on hover, a light sweep across the face, and a
   tilt back when pressed */
@property --glass-a1 { syntax: "<angle>"; inherits: false; initial-value: -75deg; }
@property --glass-a2 { syntax: "<angle>"; inherits: false; initial-value: -45deg; }
.glass-btn-hold { align-self: flex-start; margin-top: 10px; }
.glass-btn-wrap {
  --t: .4s; --e: cubic-bezier(.25, 1, .5, 1); --bw: clamp(1px, .0625em, 4px);
  --fg: 0, 13, 16; --bg: 255, 255, 255; /* ink and white as rgb triplets */
  position: relative; z-index: 2; display: inline-block; border-radius: 9999px; font-size: 18px; /* the "Submit" size */
  transform-style: preserve-3d; transition: transform var(--t) var(--e);
}
.glass-btn-wrap:has(.glass-btn:active) { transform: rotateX(25deg); }
.glass-btn {
  position: relative; isolation: isolate; display: block; border-radius: 9999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-backdrop-filter: blur(clamp(1px, .125em, 4px)); backdrop-filter: blur(clamp(1px, .125em, 4px));
  background: linear-gradient(-75deg, rgba(var(--bg), .05), rgba(var(--bg), .2), rgba(var(--bg), .05));
  box-shadow:
    inset 0 .125em .125em rgba(var(--fg), .05), inset 0 -.125em .125em rgba(var(--bg), .5),
    0 .25em .125em -.125em rgba(var(--fg), .2), 0 0 .1em .25em inset rgba(var(--bg), .2), 0 0 0 rgba(var(--bg), 1);
  transition: all var(--t) var(--e);
}
.glass-btn:hover {
  -webkit-backdrop-filter: blur(.01em); backdrop-filter: blur(.01em); transform: scale(.975);
  box-shadow:
    inset 0 .125em .125em rgba(var(--fg), .05), inset 0 -.125em .125em rgba(var(--bg), .5),
    0 .15em .05em -.1em rgba(var(--fg), .25), 0 0 .05em .1em inset rgba(var(--bg), .5), 0 0 0 rgba(var(--bg), 1);
}
.glass-btn:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }
/* the rim: a conic highlight masked to a thin ring */
.glass-btn::after {
  content: ""; position: absolute; z-index: 1; border-radius: 9999px; box-sizing: border-box; pointer-events: none;
  top: calc(0% - var(--bw) / 2); left: calc(0% - var(--bw) / 2);
  width: calc(100% + var(--bw)); height: calc(100% + var(--bw)); padding: var(--bw);
  background:
    conic-gradient(from var(--glass-a1) at 50% 50%, rgba(var(--fg), .5) 0%, transparent 5% 40%, rgba(var(--fg), .5) 50%, transparent 60% 95%, rgba(var(--fg), .5) 100%),
    linear-gradient(180deg, rgba(var(--bg), .5), rgba(var(--bg), .5));
  box-shadow: inset 0 0 0 calc(var(--bw) / 2) rgba(var(--bg), .5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: all var(--t) var(--e), --glass-a1 .5s ease;
}
.glass-btn:hover::after { --glass-a1: -125deg; }
.glass-btn:active::after { --glass-a1: -75deg; }
.glass-btn-text {
  position: relative; display: block; padding: 18px 36px; /* Submit's 16/32px, a touch roomier */
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; white-space: nowrap; user-select: none;
  color: rgba(var(--fg), .9); text-shadow: 0 .25em .05em rgba(var(--fg), .1);
  transition: all var(--t) var(--e);
}
.glass-btn:hover .glass-btn-text { text-shadow: .025em .025em .025em rgba(var(--fg), .12); }
/* the light sweep across the face */
.glass-btn-text::after {
  content: ""; position: absolute; z-index: 3; display: block; border-radius: 9999px; box-sizing: border-box; overflow: clip;
  top: calc(0% + var(--bw) / 2); left: calc(0% + var(--bw) / 2);
  width: calc(100% - var(--bw)); height: calc(100% - var(--bw)); pointer-events: none;
  background: linear-gradient(var(--glass-a2), transparent 0%, rgba(var(--bg), .5) 40% 50%, transparent 55%);
  background-size: 200% 200%; background-position: 0% 50%; mix-blend-mode: screen;
  transition: background-position calc(var(--t) * 1.25) var(--e), --glass-a2 calc(var(--t) * 1.25) var(--e);
}
.glass-btn:hover .glass-btn-text::after { background-position: 25% 50%; }
.glass-btn:active .glass-btn-text::after { --glass-a2: -15deg; background-position: 50% 15%; }
/* the soft shadow ring under the button */
.glass-btn-shadow {
  --cut: 2em; position: absolute; pointer-events: none;
  width: calc(100% + var(--cut)); height: calc(100% + var(--cut)); top: calc(0% - var(--cut) / 2); left: calc(0% - var(--cut) / 2);
  filter: blur(clamp(2px, .125em, 12px)); transition: filter var(--t) var(--e);
}
.glass-btn-shadow::after {
  content: ""; position: absolute; box-sizing: border-box; border-radius: 9999px; padding: .125em; opacity: 1;
  width: calc(100% - var(--cut) - .25em); height: calc(100% - var(--cut) - .25em);
  top: calc(var(--cut) - .5em); left: calc(var(--cut) - .875em);
  background: linear-gradient(180deg, rgba(var(--fg), .2), rgba(var(--fg), .1));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  transition: all var(--t) var(--e);
}
.glass-btn-wrap:has(.glass-btn:hover) .glass-btn-shadow { filter: blur(clamp(2px, .0625em, 6px)); }
.glass-btn-wrap:has(.glass-btn:hover) .glass-btn-shadow::after { top: calc(var(--cut) - .875em); }
.glass-btn-wrap:has(.glass-btn:active) .glass-btn-shadow { filter: blur(clamp(2px, .125em, 12px)); }
.glass-btn-wrap:has(.glass-btn:active) .glass-btn-shadow::after { top: calc(var(--cut) - .5em); opacity: .75; }
.glass-btn-wrap:has(.glass-btn:active) .glass-btn-text { text-shadow: .025em .25em .05em rgba(var(--fg), .12); }
.glass-btn-wrap:has(.glass-btn:active) .glass-btn {
  box-shadow:
    inset 0 .125em .125em rgba(var(--fg), .05), inset 0 -.125em .125em rgba(var(--bg), .5),
    0 .125em .125em -.125em rgba(var(--fg), .2), 0 0 .1em .25em inset rgba(var(--bg), .2),
    0 .225em .05em rgba(var(--fg), .05), 0 .25em 0 rgba(var(--bg), .75), inset 0 .25em .05em rgba(var(--fg), .15);
}
/* dark version (Learn more): the same glass, filled with ink — white label, white rim light and sweep */
.glass-btn-wrap.is-dark .glass-btn {
  background: linear-gradient(-75deg, rgba(var(--fg), .94), rgba(38, 52, 58, .9), rgba(var(--fg), .94));
}
.glass-btn-wrap.is-dark .glass-btn-text { color: rgba(var(--bg), .95); text-shadow: 0 .25em .05em rgba(0, 0, 0, .25); }
.glass-btn-wrap.is-dark .glass-btn:hover .glass-btn-text { text-shadow: .025em .025em .025em rgba(0, 0, 0, .3); }
.glass-btn-wrap.is-dark .glass-btn::after {
  background:
    conic-gradient(from var(--glass-a1) at 50% 50%, rgba(var(--bg), .55) 0%, transparent 5% 40%, rgba(var(--bg), .55) 50%, transparent 60% 95%, rgba(var(--bg), .55) 100%),
    linear-gradient(180deg, rgba(var(--bg), .12), rgba(var(--bg), .12));
  box-shadow: inset 0 0 0 calc(var(--bw) / 2) rgba(var(--bg), .15);
}
.glass-btn-wrap.is-dark .glass-btn-text::after { background-image: linear-gradient(var(--glass-a2), transparent 0%, rgba(var(--bg), .22) 40% 50%, transparent 55%); }
.glass-btn-wrap.is-dark .glass-btn-shadow::after { background: linear-gradient(180deg, rgba(var(--fg), .35), rgba(var(--fg), .18)); }
@media (hover: none) and (pointer: coarse) {
  .glass-btn::after, .glass-btn:hover::after, .glass-btn:active::after { --glass-a1: -75deg; }
  .glass-btn .glass-btn-text::after, .glass-btn:active .glass-btn-text::after { --glass-a2: -45deg; }
}

/* rolling digits for the stats */
.odo { display: inline-flex; }
.odo-d { display: inline-block; height: 1.1em; line-height: 1.1; overflow: hidden; vertical-align: top; }
.odo-strip { display: flex; flex-direction: column; will-change: transform; }
.odo-strip span { height: 1.1em; }
.stat-num { line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- 02 Partners: dark rounded panel over "Who we are", infinite logo slider ---------- */
.partners {
  z-index: 6; margin-top: calc(var(--radius-panel) * -1); background: #f3f0ea; color: var(--ink);
  padding-bottom: calc(var(--section) + 10px);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
.partners-head { display: flex; flex-direction: column; gap: 28px; }
.partners-head .about-title { max-width: 18ch; }
.partners-head .lead { margin: 0; max-width: 520px; }
.logo-slider {
  margin-top: clamp(56px, 7vw, 96px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-track { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(64px, 8vw, 128px); width: max-content; will-change: transform; }
/* logos in their own colours; stacked marks get more height so every logo reads at a similar size */
.logo-track li { height: clamp(150px, 15vw, 200px); display: grid; place-items: center; flex: none; }
.logo-track img { height: clamp(52px, 5.6vw, 76px); width: auto; transition: transform .5s var(--ease); }
.logo-track li.-tall img { height: clamp(110px, 11vw, 150px); }
.logo-track li:hover img { transform: scale(1.05); }

/* ---------- 03 Ports: dark rounded panel; glass port cards rise from below into a row (after svz.io) ---------- */
.ports {
  z-index: 7; margin-top: calc(var(--radius-panel) * -1); padding: 0;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0; overflow: hidden;
  background:
    radial-gradient(60% 50% at 18% 85%, rgba(63, 127, 207, .38), transparent 70%),
    radial-gradient(45% 40% at 85% 70%, rgba(188, 113, 85, .26), transparent 70%),
    var(--deck);
}
.ports-stage {
  min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between;
  gap: 48px; padding: clamp(96px, 13vh, 140px) 0 clamp(80px, 13vh, 140px);
}
.ports-head { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.ports-head .about-title { font-size: clamp(40px, 4.8vw, 72px); max-width: 17ch; }
.ports-head .lead { margin: 0; max-width: 560px; }
.port-row {
  list-style: none; margin: 0 auto; padding: 0 var(--gutter); width: 100%; max-width: calc(var(--max) + 2 * var(--gutter));
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
}
.port-card {
  position: relative; aspect-ratio: 3 / 4; margin: 0 -6px; padding: clamp(14px, 1.4vw, 20px);
  display: flex; flex-direction: column; justify-content: space-between; color: var(--white);
  border-radius: 16px; border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .55);
  will-change: transform;
  animation: portFloat 4.6s ease-in-out infinite; /* drifts on its own; GSAP owns transform, this uses translate */
}
.port-card:nth-child(2) { animation-duration: 5.2s; animation-delay: -1.1s; }
.port-card:nth-child(3) { animation-duration: 4.2s; animation-delay: -2.3s; }
.port-card:nth-child(4) { animation-duration: 5.6s; animation-delay: -0.6s; }
.port-card:nth-child(5) { animation-duration: 4.8s; animation-delay: -3.1s; }
.port-card:nth-child(6) { animation-duration: 5.0s; animation-delay: -1.8s; }
@keyframes portFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.port-prov { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .72; line-height: 1.3; max-width: 70%; }
.port-icon { position: absolute; top: clamp(12px, 1.2vw, 18px); right: clamp(12px, 1.2vw, 18px); width: 28px; height: 28px; opacity: .8; }
.port-icon svg { width: 100%; height: 100%; }
.port-name { font-weight: 500; font-size: clamp(22px, 2.3vw, 34px); line-height: .98; letter-spacing: -0.04em; }
.port-name span { display: block; font-weight: 300; opacity: .7; }
@media (max-width: 760px) {
  .ports-stage { min-height: 0; gap: 40px; padding: 88px 0 112px; }
  .port-row { grid-template-columns: repeat(3, 1fr); row-gap: 12px; }
  .port-card { margin: 0 -3px; }
  .port-name { font-size: 20px; }
}

/* News and Profile rise over the section before them as rounded panels, like Who we are / Partners / Ports */
.panel-up {
  position: relative; margin-top: calc(var(--radius-panel) * -1);
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
}
#news.panel-up { z-index: 8; }
#profile.panel-up { z-index: 9; }

/* ---------- Profile: centred, silk background + dotted bird behind ---------- */
.profile { overflow: hidden; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: #0b1024; }
.profile-silk { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.profile-inner { position: relative; z-index: 1; width: 100%; max-width: 860px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.profile-inner .h-lg { margin-top: 24px; }
.profile .company { align-items: center; }
.profile .facts { width: 100%; text-align: left; }
.profile .facts div { grid-template-columns: 1fr 1.4fr; gap: 32px; }
.profile .facts dt { text-align: right; }
@media (max-width: 600px) {
  .profile .facts div { grid-template-columns: 1fr; gap: 4px; text-align: center; }
  .profile .facts dt { text-align: center; }
}

/* ---------- Loader: the flapping bird until the hero is ready ---------- */
html { background: var(--sky-top); } /* what shows behind the iPhone status bar / overscroll at the top */
.loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: linear-gradient(180deg, var(--sky-top) 0%, #8fbbe6 45%, var(--sky-horizon) 100%);
  transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.loader-bird { width: 118px; height: auto; display: block; }
/* "LOADING" filling left to right (after 21st.dev motion-loading-fill-text), in the logo's blues */
.loader-text { position: relative; display: grid; font-size: 22px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; line-height: 1; }
.loader-text > span { grid-area: 1 / 1; }
.loader-text > span:first-child { color: rgba(0, 0, 104, .16); }
.loader-text-fill {
  background: linear-gradient(90deg, #38bbec, #1f91d4 40%, #0e489d 75%, #000068);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  clip-path: inset(0 100% 0 0); animation: loaderFill 1.6s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes loaderFill { 0% { clip-path: inset(0 100% 0 0); } 70%, 100% { clip-path: inset(0 0 0 0); } }
/* the hero's own entrance waits for the loader */
html.is-loading body { overflow: hidden; }
html.is-loading .hero-caption, html.is-loading .scroll-cue { animation-play-state: paused; }
@media (min-width: 761px) {
  .about { overflow-x: clip; } /* the tilted cards must not widen the page (phones tilt them less, see main.js) */
}
/* iPhone: Safari paints the status-bar / Dynamic Island strip with the hero's sky colour (--sky-top, also
   theme-color); this soft band carries that colour down into the rendered sky so the two read as one */
.hero-stage::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; z-index: 1; pointer-events: none;
  height: calc(env(safe-area-inset-top, 0px) + 72px);
  background: linear-gradient(180deg, var(--sky-top) 0%, rgba(63, 127, 207, .55) 40%, rgba(63, 127, 207, 0) 100%);
}

/* the particle bird flies in the open middle of the ports section; the copy and glass cards sit above it */
.ports-bird { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0; opacity: .7; }
.ports-stage { position: relative; z-index: 1; }

/* ---------- Contact dialog (after 21st.dev contact-01) ---------- */
html.has-modal { overflow: hidden; }
.contact {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100svh - 24px); overflow: auto;
  margin: auto; padding: clamp(28px, 5vw, 44px) clamp(18px, 4vw, 36px) clamp(22px, 4vw, 32px);
  border: 0; border-radius: 28px; background: #fafafa; color: var(--ink);
  box-shadow: 0 30px 80px -20px rgba(0, 13, 16, .45);
  animation: contactIn .35s var(--ease);
}
.contact.is-closing { animation: contactOut .22s ease-in forwards; }
.contact::backdrop { background: rgba(8, 14, 32, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fadeIn .3s ease; }
@keyframes contactIn { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes contactOut { to { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes fadeIn { from { opacity: 0; } }
.contact-close {
  position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 100%; border: 0; cursor: pointer;
  background: transparent; color: #737373; display: grid; place-items: center; transition: background .2s, color .2s;
}
.contact-close:hover { background: #ececec; color: var(--ink); }
.contact-close svg { width: 20px; height: 20px; }
.contact-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 26px; }
.contact-icon { width: 40px; height: 40px; border-radius: 100%; background: #ededed; display: grid; place-items: center; }
.contact-icon svg { width: 20px; height: 20px; }
.contact-icon.is-ok { background: #e3f5ea; color: #1f8a4c; width: 52px; height: 52px; }
.contact-icon.is-ok svg { width: 26px; height: 26px; }
.contact-head h2 { margin: 4px 0 0; font-size: clamp(30px, 5vw, 38px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.contact-head p { margin: 0; color: #737373; font-size: 16px; line-height: 1.45; max-width: 36ch; }
.contact-card {
  background: var(--white); border: 1px solid #e5e5e5; border-radius: 18px; padding: clamp(18px, 4vw, 28px);
  display: flex; flex-direction: column; gap: 16px;
}
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-card label { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 500; line-height: 1.2; }
.contact-card input, .contact-card textarea {
  font: inherit; font-size: 16px; font-weight: 400; color: var(--ink); width: 100%;
  padding: 11px 13px; border: 1px solid #e0e0e0; border-radius: 10px; background: var(--white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05); outline: none; transition: border-color .2s, box-shadow .2s;
}
.contact-card textarea { resize: vertical; min-height: 120px; line-height: 1.45; }
.contact-card input::placeholder, .contact-card textarea::placeholder { color: #8a8a8a; }
.contact-card input:focus, .contact-card textarea:focus { border-color: #9a9a9a; box-shadow: 0 0 0 3px rgba(0, 13, 16, .08); }
.contact-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-captcha { display: flex; flex-direction: column; gap: 7px; font-size: 14px; font-weight: 500; }
.contact-captcha-row { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; align-items: center; }
.contact-captcha-img {
  height: 46px; min-width: 132px; border-radius: 10px; border: 1px solid #e0e0e0; background: #f4f6f8;
  display: grid; place-items: center; overflow: hidden; color: #8a8a8a;
}
.contact-captcha-img img { display: block; height: 46px; width: auto; }
.contact-captcha-new {
  width: 40px; height: 40px; border-radius: 100%; border: 1px solid #e0e0e0; background: var(--white); cursor: pointer;
  display: grid; place-items: center; color: #555; transition: transform .4s var(--ease), background .2s;
}
.contact-captcha-new:hover { background: #f2f2f2; transform: rotate(90deg); }
.contact-captcha-new svg { width: 18px; height: 18px; }
.contact-status { margin: 0; min-height: 1.2em; font-size: 14px; color: #555; }
.contact-status.is-error { color: #c0392b; }
.contact-send {
  height: 48px; border: 0; border-radius: 12px; background: #1a1a1a; color: var(--white); cursor: pointer;
  font: inherit; font-size: 16px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .2s, opacity .2s;
}
.contact-send:hover { background: #000; }
.contact-send:disabled { opacity: .6; cursor: progress; }
.contact-send svg { width: 16px; height: 16px; transition: transform .3s var(--ease); }
.contact-send:hover svg { transform: translateX(3px); }
.contact-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 14px; margin-top: 2px;
  border-top: 1px solid #ececec; font-size: 13px; color: #737373;
}
.contact-foot span { display: inline-flex; align-items: center; gap: 6px; }
.contact-foot svg { width: 14px; height: 14px; }
.contact-foot span:last-child svg { color: #1f8a4c; }
.contact-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0 6px; }
.contact-done h3 { margin: 6px 0 0; font-size: 24px; letter-spacing: -0.02em; }
.contact-done p { margin: 0 0 10px; color: #737373; }
.contact-done[hidden], .contact-card[hidden] { display: none; }
@media (max-width: 520px) {
  .contact-row { grid-template-columns: 1fr; }
  .contact-captcha-row { grid-template-columns: auto auto; }
  .contact-captcha-row input { grid-column: 1 / -1; }
}