/* İKONİK: start page with the choice of field, and the field sites.
   Included after base.css, themes.css and home.css (header, steps, request block). */

/* ---------- brand in the field site header ---------- */
.brand { display: inline-flex; align-items: center; gap: var(--s-3); flex: none; }
.brand__mark { width: 46px; height: 46px; }
.brand__text { display: grid; gap: 3px; line-height: 1; }
.brand__name { font-size: 20px; font-weight: 800; letter-spacing: .08em; color: #14305E; }
.brand__sub { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); white-space: nowrap; }

.back {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  min-height: 34px; padding: 0 var(--s-3);
  border-radius: var(--r-full); border: 1px solid var(--border);
  background: var(--surface-raised); box-shadow: var(--shadow-sm), var(--highlight);
  font-size: 13px; font-weight: 700; color: var(--ink-muted);
  transition: color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.back:hover { color: var(--ink); box-shadow: var(--shadow-md), var(--highlight); }
.back .i { color: var(--primary); }

@media (max-width: 1100px) { .header .back span { display: none; } .header .back { padding: 0; width: 36px; justify-content: center; } }
@media (max-width: 420px) {
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 17px; }
  .brand__sub { font-size: 9.5px; letter-spacing: .1em; }
}

/* ---------- field badge (drawing in DIR_ICON, assets/js/ikonik.js) ---------- */
.badge {
  --badge-size: 56px;
  width: var(--badge-size); height: var(--badge-size); flex: none;
  display: grid; place-items: center;
  border-radius: 28%;
  color: var(--on-primary);
  background: radial-gradient(120% 90% at 30% 15%,
    color-mix(in srgb, var(--primary) 70%, #fff) 0%, var(--primary) 55%, color-mix(in srgb, var(--primary) 80%, #000) 100%);
  box-shadow: 0 2px 4px rgba(74, 52, 24, .08), 0 10px 22px rgba(74, 52, 24, .18),
    inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .12);
}
.badge svg { width: 62%; height: 62%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .18)); }
.badge--sm { --badge-size: 40px; }
@media (prefers-reduced-motion: no-preference) {
  .badge svg { transition: transform var(--t-base) var(--ease); }
  .isle.is-active .badge svg { transform: translateY(-2px) rotate(-4deg); }
}

/* ---------- start page: archipelago ----------
   Six diorama islands on the water. Computer: free composition in a box with fixed proportions,
   tablet: two offset columns, phone: one column with islands alternating left and right. */
.arch {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: calc(100dvh - 72px);
  display: grid; align-items: center;
  padding-block: var(--s-6) var(--s-12);
  --px: 0; --py: 0; --wx: 50%; --wy: 45%;
}
/* sea at the horizon: a soft turquoise bottom and slow ripples */
.arch__sea {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(60% 45% at 18% 12%, var(--surface-raised) 0%, transparent 70%),
    linear-gradient(180deg, transparent 38%, rgba(126, 190, 196, .16) 62%, rgba(92, 168, 178, .28) 100%);
}
.arch__sea::after {
  content: ""; position: absolute; inset: 52% 0 0;
  background:
    repeating-linear-gradient(179deg, transparent 0 26px, rgba(255, 255, 255, .5) 26px 27.5px, transparent 27.5px 54px),
    repeating-linear-gradient(181deg, transparent 0 41px, rgba(255, 255, 255, .28) 41px 42px, transparent 42px 83px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
  opacity: .7;
}
/* the active field colour spreads from the cursor */
.arch__wash {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 65% at var(--wx) var(--wy), color-mix(in srgb, var(--wash, #F5EDE2) 34%, transparent), transparent 74%);
  opacity: 0; transition: opacity 600ms var(--ease);
}
.arch.has-active .arch__wash { opacity: 1; }
.arch.is-leaving .arch__wash {
  opacity: 1; transition-duration: 480ms;
  background: color-mix(in srgb, var(--wash, #F5EDE2) 30%, var(--bg));
}

.arch__box { position: relative; container-type: inline-size; }
.arch__head { display: grid; gap: var(--s-4); max-width: 34rem; }
.arch__title { font-size: clamp(34px, 5.3cqw, 66px); line-height: 1.02; text-wrap: balance; }
.arch__lead { font-size: clamp(15px, 1.5cqw, 19px); line-height: 1.5; color: var(--ink-muted); max-width: 42ch; }

.arch__isles { position: relative; }
.isle__link { display: block; color: inherit; }
.isle__body { position: relative; display: block; }
.isle__lift, .isle__float { display: block; }
.isle__img { display: block; width: 100%; height: auto; }
/* island shadow on the water */
.isle__shadow {
  position: absolute; left: 14%; right: 14%; bottom: 2%; height: 10%; z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(52, 78, 74, .30), transparent);
  filter: blur(6px);
}

/* island label */
.isle__card {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px var(--s-3);
  margin-top: var(--s-2); padding: 8px 10px 8px 8px;
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm), var(--highlight);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease);
}
.isle__badge { --badge-size: 38px; }
.isle__name { font-size: clamp(15px, 1.45cqw, 19px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.isle__go {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep);
  transition: transform var(--t-base) var(--ease), background-color var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
/* the description opens on the active island; the card width is set by the title, not the description */
.isle__more { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; width: 0; min-width: 100%; transition: grid-template-rows 420ms var(--ease); }
.isle__more > span { overflow: hidden; }
.isle__text { display: block; padding: 2px 4px 4px; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.isle.is-active .isle__more { grid-template-rows: 1fr; }
.isle.is-active .isle__card { box-shadow: var(--shadow-lg), var(--highlight); background: var(--surface); }
.isle.is-active .isle__go { background: var(--primary); color: var(--on-primary); transform: translateX(3px); }
.isle__link:focus-visible { outline: none; }
.isle__link:focus-visible .isle__card { outline: 2px solid var(--primary); outline-offset: 3px; }
@media (hover: none) { .isle .isle__more { grid-template-rows: 1fr; } }

/* ----- computer: free composition ----- */
@media (min-width: 1101px) {
  .arch__box { aspect-ratio: 1.62; width: min(100%, calc((100dvh - 150px) * 1.62)); margin-inline: auto; }
  .arch__head { position: absolute; left: 0; top: 7%; width: 42%; z-index: 2; }
  /* islands sit a little lower than the heading: shifted by 6% of the composition height, there is room below on every screen */
  .arch__isles { position: absolute; inset: 0; translate: 0 6%; }
  .isle { position: absolute; z-index: 1; }
  .isle.is-active { z-index: 3; }
  /* on top tourism (large) and logistics, below four islands in a wave (higher, lower, higher, lower)
     so that neighbouring labels are not on one line */
  .isle--tourism      { left: 42%;  top: 0;   width: 33%; }
  .isle--logistics    { left: 77%;  top: 9%;  width: 23%; }
  .isle--business     { left: -1%;  top: 47%; width: 23%; }
  .isle--projects     { left: 24%;  top: 57%; width: 24%; }
  .isle--construction { left: 50%;  top: 48%; width: 23%; }
  /* the medical island is almost square (taller than the others), so it is a little smaller and higher */
  .isle--medical      { left: 77%;  top: 50%; width: 21%; }
  /* the label under an island is slightly narrower than the image and centred on it */
  .isle__card { width: max-content; max-width: min(360px, 31cqw); margin-left: 50%; transform: translateX(-50%); margin-top: -4%; }
  .isle--business .isle__card, .isle--projects .isle__card, .isle--construction .isle__card, .isle--medical .isle__card { max-width: min(320px, 25cqw); }
  .isle__name { text-wrap: balance; }
  .isle--tourism .isle__card { margin-top: -6%; }
}

/* placeholder instead of a diorama while there is no image: a soft spot in the field colour with its badge */
.art-ph { display: none; }
.no-art > .art-ph {
  display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 2;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--primary) 26%, var(--surface-raised)) 0%, color-mix(in srgb, var(--primary-soft) 92%, transparent) 58%, transparent 100%);
}
.art-ph__badge { width: 22%; height: auto; aspect-ratio: 1; box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .3); }
.svc-stage__art.no-art { place-items: center; }
.svc-stage__art.no-art > .art-ph { width: 86%; }

/* ----- tablet: two columns, the right one shifted down ----- */
@media (min-width: 761px) and (max-width: 1100px) {
  .arch { min-height: 0; padding-block: var(--s-12) var(--s-16); }
  .arch__head { margin-bottom: var(--s-8); }
  .arch__title { font-size: clamp(40px, 6cqw, 60px); }
  .arch__isles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-8); }
  .isle:nth-child(even) { margin-top: var(--s-16); margin-bottom: calc(-1 * var(--s-16)); }
  .isle__card { margin-top: -2%; }
}

/* ----- phone: islands stacked, alternating left and right ----- */
@media (max-width: 760px) {
  .arch { min-height: 0; padding-block: var(--s-8) var(--s-12); }
  .arch__title { font-size: clamp(34px, 10cqw, 44px); }
  .arch__lead { font-size: 16px; }
  .arch__head { margin-bottom: var(--s-6); }
  .arch__isles { display: grid; gap: var(--s-8); }
  .isle__body { width: 88%; }
  .isle:nth-child(even) .isle__body { margin-left: auto; }
  .isle__card { margin-top: -3%; }
  .arch__sea { background: linear-gradient(180deg, transparent 10%, rgba(126, 190, 196, .14) 45%, rgba(92, 168, 178, .22) 100%); }
  .arch__sea::after { inset: 20% 0 0; }
}

/* ----- motion ----- */
@media (prefers-reduced-motion: no-preference) {
  /* bobbing on the water: each island has its own rhythm */
  .isle__float { animation: isle-bob 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
  .isle__shadow { animation: isle-shadow 6s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -1.7s); }
  .isle:nth-child(2) .isle__float, .isle:nth-child(2) .isle__shadow { animation-duration: 6.8s; }
  .isle:nth-child(3) .isle__float, .isle:nth-child(3) .isle__shadow { animation-duration: 5.6s; }
  .isle:nth-child(4) .isle__float, .isle:nth-child(4) .isle__shadow { animation-duration: 7.2s; }
  .isle:nth-child(5) .isle__float, .isle:nth-child(5) .isle__shadow { animation-duration: 6.4s; }
  @keyframes isle-bob { from { transform: translateY(-1.2%) rotate(-0.6deg); } to { transform: translateY(1.2%) rotate(0.5deg); } }
  @keyframes isle-shadow { from { transform: scale(.9); opacity: .75; } to { transform: scale(1.04); opacity: 1; } }
  .arch__sea::after { animation: sea-drift 14s linear infinite; }
  @keyframes sea-drift { to { background-position: 0 92px; } }

  /* parallax and lift on hover */
  .isle__body { transform: translate3d(calc(var(--px) * var(--d) * 1px), calc(var(--py) * var(--d) * 0.6px), 0); transition: transform 700ms cubic-bezier(.16, 1, .3, 1); }
  .isle__lift { transition: transform 600ms cubic-bezier(.16, 1, .3, 1), opacity 500ms var(--ease), filter 500ms var(--ease); transform-origin: 50% 70%; }
  .isle.is-active .isle__lift { transform: translateY(-4%) scale(1.06); }
  .arch.has-active .isle:not(.is-active) .isle__lift { opacity: .55; transform: scale(.96); }
  .arch.has-active .isle:not(.is-active) .isle__card { opacity: .7; }
  .isle__card { transition: opacity 500ms var(--ease), box-shadow var(--t-base) var(--ease), background-color var(--t-base) var(--ease); }

  /* transition to the field site */
  .isle.is-leaving .isle__lift { transform: translateY(-8%) scale(1.7); opacity: 0; transition-duration: 520ms; transition-timing-function: cubic-bezier(.7, 0, .84, 0); }
  .arch.is-leaving .isle:not(.is-leaving), .arch.is-leaving .arch__head, .arch.is-leaving .isle.is-leaving .isle__card { opacity: 0; transition: opacity 300ms var(--ease); }

  /* entrance: the heading, then the islands float up one by one */
  .arch.is-pending .arch__head, .arch.is-pending .isle { opacity: 0; }
  .arch.is-ready .arch__head { animation: arch-in 800ms cubic-bezier(.16, 1, .3, 1) both; }
  .arch.is-ready .isle { animation: isle-in 1100ms cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(var(--i) * 120ms + 200ms); }
  @keyframes arch-in { from { opacity: 0; transform: translateY(18px); } }
  @keyframes isle-in { from { opacity: 0; transform: translateY(70px) scale(.94); } }
  /* on a phone the islands float up while scrolling */
  @media (max-width: 760px) {
    .arch.is-ready .isle { animation: none; }
    .isle { opacity: 0; transform: translateY(48px); transition: opacity 800ms var(--ease), transform 900ms cubic-bezier(.16, 1, .3, 1); }
    .isle.is-in { opacity: 1; transform: none; }
    .isle__body { transform: none; }
  }
}

/* ---------- fields in the start page header, next to the logo ---------- */
/* six fields: tighter spacing so all items fit next to the logo in every language */
.nav--dirs { margin-left: var(--s-6); padding-left: var(--s-6); gap: 2px; border-left: 1px solid var(--border); align-items: center; }
.dnav {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 10px 5px 5px; border-radius: var(--r-full);
  color: var(--ink-muted);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dnav__badge { --badge-size: 28px; border-radius: 30%; box-shadow: 0 2px 6px rgba(74, 52, 24, .14), inset 0 1px 0 rgba(255, 255, 255, .3); }
.dnav:hover, .dnav:focus-visible { color: var(--primary-deep); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@media (max-width: 1240px) {
  .nav--dirs { margin-left: var(--s-4); padding-left: var(--s-4); gap: 0; }
  .dnav { padding: 4px 8px 4px 4px; gap: 6px; }
  .dnav__badge { --badge-size: 24px; }
}

/* ---------- one team: text on the left, facts on the right ---------- */
.team { padding-block: var(--s-24) var(--s-16); }
.team__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-12); align-items: start; }
.team__text { display: grid; gap: var(--s-4); max-width: 30rem; }
.team__facts { display: grid; }
.fact { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; padding-block: var(--s-5); }
.fact + .fact { border-top: 1px solid var(--border); }
.fact:first-child { padding-top: 0; }
.fact__icon {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-size: 21px; color: #14305E; background: color-mix(in srgb, #14305E 9%, var(--surface));
}
.fact h3 { margin-bottom: 2px; }
@media (max-width: 860px) {
  .team { padding-block: var(--s-12) var(--s-8); }
  .team__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
}

.gw-help { padding-bottom: var(--s-24); }

/* ---------- field site: first screen ---------- */
.svc-hero { padding-block: var(--s-12); }
.svc-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-12); align-items: center; }
.svc-hero__text { display: grid; gap: var(--s-5); align-content: center; }
.svc-hero__kicker { display: flex; align-items: center; gap: var(--s-3); }
.svc-hero__lead { font-size: 18px; line-height: 1.55; color: var(--ink-muted); max-width: 48ch; }
.svc-hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; margin-top: var(--s-2); }

.svc-stage {
  position: relative; aspect-ratio: 6 / 5;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 55% 40%, var(--surface-raised) 0%, transparent 70%),
    linear-gradient(170deg, var(--tint), var(--primary-soft));
  box-shadow: var(--shadow-md), var(--highlight);
}
/* the grid matches the stage exactly: a tall (almost square) diorama fits in instead of stretching the row */
.svc-stage__art { position: absolute; inset: 4% 3% 8% 6%; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.svc-stage__img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 22px 26px rgba(74, 52, 24, .22)); }
/* "How we help": a separate strip below the first screen */
.help { padding-bottom: var(--s-16); }
.help-strip {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: var(--s-4) var(--s-8);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-xl); box-shadow: var(--shadow-md), var(--highlight);
  padding: var(--s-5) var(--s-8);
}
/* columns sized to their text and spread across the strip, every item centred on the row */
.help-strip ul { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); }
.help-strip a {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--s-2); align-items: center;
  font-size: 14px; font-weight: 700; line-height: 1.35;
  transition: color var(--t-fast) var(--ease);
}
.help-strip a:hover { color: var(--primary); }
.help-strip .i {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep); font-size: 13px;
}
@media (max-width: 1100px) {
  .help-strip { grid-template-columns: 1fr; padding: var(--s-5) var(--s-6); }
  .help-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
}
@media (max-width: 520px) {
  .help { padding-bottom: var(--s-12); }
  .help-strip ul { grid-template-columns: 1fr; gap: var(--s-3); }
}

@media (max-width: 1024px) {
  .svc-hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-8); }
  .svc-stage { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
  .svc-hero { padding-block: var(--s-8) var(--s-12); }
  .svc-hero__lead { font-size: 16px; }
  .svc-stage { aspect-ratio: 4 / 3; }
}

/* ---------- services ---------- */
.svc-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.svc {
  display: grid; gap: var(--s-3); align-content: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm), var(--highlight);
  padding: var(--s-3) var(--s-3) var(--s-6);
  transition: box-shadow var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.svc:hover { box-shadow: var(--shadow-md), var(--highlight); transform: translateY(-2px); }
.svc > h3, .svc > p { padding-inline: var(--s-3); }
/* service photo, the icon overlaps its bottom edge */
.svc__media {
  display: block; aspect-ratio: 3 / 2; overflow: hidden;
  border-radius: calc(var(--r-lg) - 6px); background: var(--tint);
  margin-bottom: calc(-1 * var(--s-8));
}
.svc__img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
/* a large service icon under the photo: visible while the photo loads or before it exists */
.svc__media { position: relative; isolation: isolate; } /* photo above the placeholder but below the service icon */
.svc__ph {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  font-size: 64px; color: color-mix(in srgb, var(--primary) 32%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .svc__img { transition: transform 700ms var(--ease); }
  .svc:hover .svc__img { transform: scale(1.04); }
}
.svc__icon {
  position: relative; margin-left: var(--s-3);
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center; margin-bottom: var(--s-1);
  background: var(--surface-raised); color: var(--primary-deep);
  border: 1px solid var(--border); box-shadow: var(--shadow-md), var(--highlight);
}
.svc .t-small { line-height: 1.55; }

/* ---------- gallery: one large photo and two smaller ones ---------- */
.gallery { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--s-5); }
.gal { position: relative; margin: 0; overflow: hidden; border-radius: var(--r-xl); background: var(--tint); box-shadow: var(--shadow-md), var(--highlight); }
.gal--big { grid-row: span 2; }
.gal__img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
/* no photo yet: a tinted plate of the same size with the caption */
.gal.no-art {
  aspect-ratio: 3 / 2;
  background: radial-gradient(70% 60% at 50% 40%, var(--surface-raised), transparent 75%), linear-gradient(170deg, var(--tint), var(--primary-soft));
}
.gal__cap {
  position: absolute; left: var(--s-4); bottom: var(--s-4);
  padding: 8px 14px; border-radius: var(--r-full);
  background: rgba(28, 22, 16, .58); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: #FFF8EE; font-size: 14px; font-weight: 700; line-height: 1.2;
}
@media (max-width: 1024px) and (min-width: 761px) {
  /* on a tablet the large photo is on top, the two smaller below it */
  .gallery { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gal--big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 760px) {
  /* on a phone the photos scroll sideways */
  .gallery {
    grid-template-columns: none; grid-template-rows: none; grid-auto-flow: column; grid-auto-columns: 86%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3);
    margin-inline: calc(-1 * var(--gutter, 16px)); padding: 0 var(--gutter, 16px) var(--s-3);
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gal { scroll-snap-align: center; border-radius: var(--r-lg); }
  .gal--big { grid-row: auto; }
  .gal__cap { font-size: 13px; left: var(--s-3); bottom: var(--s-3); }
}

/* ---------- medical: countries and their strengths ---------- */
.country-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* specialty picker: a row of round icons in one capsule, with a caption next to it */
.sp-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); margin-bottom: var(--s-6); }
.sp-pick__icons {
  display: flex; gap: 4px; padding: 6px; max-width: 100%;
  border-radius: var(--r-full); background: var(--surface);
  border: 1px solid var(--border); box-shadow: var(--shadow-sm), var(--highlight);
  overflow-x: auto; scrollbar-width: none;
}
.sp-pick__icons::-webkit-scrollbar { display: none; }
.sp-btn {
  position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--primary-deep);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.sp-btn .i { font-size: 21px; }
.sp-btn:hover, .sp-btn.is-preview { background: var(--primary-soft); }
.sp-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-md); }
.sp-btn:active { transform: scale(.94); }
.sp-btn--all { margin-right: 9px; }
.sp-btn--all::after { content: ""; position: absolute; right: -7px; top: 10px; bottom: 10px; width: 1px; background: var(--border); }
.sp-pick__caption { display: flex; align-items: baseline; gap: 10px; min-height: 1.5em; font-size: 15px; line-height: 1.4; }
.sp-pick__caption b { font-weight: 800; color: var(--ink); }
.sp-pick__caption span { color: var(--ink-muted); }
.sp-pick__caption b + span { padding-left: 10px; border-left: 1px solid var(--border); font-weight: 700; color: var(--primary-deep); }

/* country card: name, description, a row of icons at the bottom; large country code in the corner */
.country {
  position: relative; display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm), var(--highlight);
  padding: var(--s-5) var(--s-5) var(--s-5);
  transition: opacity 350ms var(--ease), filter 350ms var(--ease), transform 350ms var(--ease), box-shadow 350ms var(--ease), border-color 350ms var(--ease);
}
.country h3 { padding-right: 3.2em; }
.country .t-small { line-height: 1.55; }
.country__code {
  position: absolute; top: 12px; right: 16px;
  font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.03em;
  color: color-mix(in srgb, var(--primary) 13%, transparent);
  transition: color 350ms var(--ease);
}
.country__sp { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: var(--s-3); }
.sp-ico {
  position: relative; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep);
  transition: background-color 250ms var(--ease), color 250ms var(--ease), transform 250ms var(--ease);
}
.sp-ico .i { font-size: 16px; }
.sp-ico:hover { transform: translateY(-2px); }
/* icon label on hover */
.sp-ico::after {
  content: attr(data-label); position: absolute; left: -2px; bottom: calc(100% + 8px); z-index: 3;
  translate: 0 4px; white-space: nowrap; pointer-events: none;
  padding: 5px 10px; border-radius: var(--r-sm);
  background: var(--ink); color: var(--surface-raised);
  font-size: 12px; font-weight: 700; line-height: 1.3;
  opacity: 0; transition: opacity var(--t-fast) var(--ease), translate var(--t-fast) var(--ease);
}
.sp-ico:hover::after, .sp-ico:focus-visible::after { opacity: 1; translate: 0 0; }
/* a specialty is selected: matching countries rise, the others fade */
.country-grid.is-filtered .country:not(.is-match) { opacity: .36; filter: saturate(.3); }
.country-grid.is-filtered .country.is-match {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--primary) 40%, var(--border));
  box-shadow: var(--shadow-md), var(--highlight);
}
.country-grid.is-filtered .country.is-match .country__code { color: color-mix(in srgb, var(--primary) 30%, transparent); }
.sp-ico.is-on { background: var(--primary); color: var(--on-primary); transform: scale(1.12); }
@media (prefers-reduced-motion: reduce) {
  .country, .country__code, .sp-ico, .sp-btn { transition: none; }
  .country-grid.is-filtered .country.is-match { transform: none; }
}
@media (max-width: 1100px) { .country-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  /* on a phone the countries scroll sideways, like the gallery */
  .country-grid {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%;
    overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s-3);
    margin-inline: calc(-1 * var(--gutter, 16px)); padding: var(--s-1) var(--gutter, 16px) var(--s-4);
    scroll-padding-inline: var(--gutter, 16px); scrollbar-width: none;
  }
  .country-grid::-webkit-scrollbar { display: none; }
  .country { scroll-snap-align: start; }
}

/* ---------- audiences ---------- */
.for-grid { display: grid; gap: var(--s-6); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .for-grid { grid-template-columns: 1fr; gap: var(--s-4); } }
.for {
  display: grid; gap: var(--s-2); align-content: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm), var(--highlight);
  padding: var(--s-6);
}
.for__icon {
  width: 48px; height: 48px; border-radius: 50%; margin-bottom: var(--s-2);
  display: grid; place-items: center; font-size: 22px;
  color: var(--on-primary); background: var(--primary);
}
.for .t-small { line-height: 1.55; }

/* ---------- FAQ ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s-12); align-items: start; }
.faq-head { display: grid; gap: var(--s-4); justify-items: start; position: sticky; top: 110px; }
.faq { display: grid; gap: var(--s-3); }
.qa {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm), var(--highlight);
}
.qa summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); font-size: 17px; font-weight: 700; line-height: 1.35;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .i {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-deep);
  transition: transform var(--t-base) var(--ease);
}
.qa[open] summary .i { transform: rotate(45deg); }
.qa summary:hover { color: var(--primary-deep); }
.qa p { padding: 0 var(--s-6) var(--s-6); font-size: 15px; line-height: 1.6; color: var(--ink-muted); max-width: 62ch; }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .faq-head { position: static; }
}
@media (max-width: 520px) {
  .qa summary { padding: var(--s-4) var(--s-5); font-size: 16px; }
  .qa p { padding: 0 var(--s-5) var(--s-5); }
}

/* ---------- steps: four of them ---------- */
.steps--4::before { right: 25%; }
@media (min-width: 1001px) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1000px) and (min-width: 761px) {
  .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps--4::before { display: none; }
}

/* ---------- why us ---------- */
.why-grid { display: grid; gap: var(--s-6) var(--s-8); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .why-grid { grid-template-columns: 1fr; } }
.why { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-4); align-items: start; }
.why > .i {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-size: 20px; color: var(--on-primary); background: var(--primary);
}
.why h3 { margin-bottom: var(--s-1); }

.section--tint { background: color-mix(in srgb, var(--tint) 70%, var(--bg)); }

/* ---------- request with a form ---------- */
.contact--form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.contact--form .contact__text { padding-top: var(--s-4); }
.contact__list { display: grid; gap: var(--s-3); margin-top: var(--s-4); }
.req {
  background: var(--surface); color: var(--ink);
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg), var(--highlight);
  padding: var(--s-8);
}
.req .t-h3 { margin-bottom: var(--s-4); }
.req .done .t-h2 { color: var(--ink); }
@media (max-width: 760px) {
  .contact--form { grid-template-columns: minmax(0, 1fr); }
  .req .form__row { grid-template-columns: minmax(0, 1fr); }
  .contact--form { padding: var(--s-6) var(--s-4) var(--s-4); }
  .contact--form .contact__text { padding: 0 var(--s-2); }
  .req { padding: var(--s-6) var(--s-5); }
}

/* field site header: navigation and CTA */
.header--svc .header__inner { gap: var(--s-6); }
.header--svc .nav { gap: var(--s-5); }
.header--svc .header__lang { margin-left: 0; }
@media (max-width: 860px) {
  .header--svc .header__lang { margin-left: auto; }
}
@media (max-width: 520px) {
  .header--svc .header__inner { gap: var(--s-3); }
}
/* on the narrowest screens the "All fields" button only exists at the bottom (Home), it does not fit in the header */
@media (max-width: 400px) {
  .header--svc .back { display: none; }
}