/* Nexia.ge front-end — Nexia Website Guidelines 2023 tokens + Variant 4 chrome */

/* Self-hosted Georgian face (Noto Sans Georgian, OFL) — guarantees consistent Georgian rendering
   across OSes so glyphs no longer collapse into each other (bug-012). Variable weight 400–700;
   unicode-range gates it to Georgian codepoints, so Latin/digits still fall through to the Latin
   stack. Calibri/Segoe remain fallbacks for Windows parity. */
@font-face {
  font-family: 'Noto Sans Georgian';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-sans-georgian.woff2') format('woff2');
  unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

:root {
  --teal-dark: #00323C;   /* text, headings, dark grounds */
  --teal: #00B9B9;        /* accent, fills, footer banner */
  --grey-light: #F4F4F4;  /* section backgrounds */
  --white: #FFFFFF;
  --grey: #5F7378;        /* muted body text */
  --on-dark: #FFFFFF;             /* body/heading text on a dark teal ground */
  --on-dark-muted: rgba(255, 255, 255, .78);  /* secondary copy on a dark teal ground */
  --line: #E2E8E8;
  --error: #b3261e;       /* form validation: error text and flagged field borders */
  --radius-card: 40px 0 40px 0;
  --shadow: 0 3px 10px rgba(0, 50, 60, .10);
  --container: 1280px;
  --font-latin: 'Effra', Tahoma, Verdana, sans-serif;
  --font-geo: 'Noto Sans Georgian', 'Calibri', 'Carlito', 'Segoe UI', Sylfaen, sans-serif;
}
:lang(ka) { font-family: var(--font-geo); }
:lang(en) { font-family: var(--font-latin); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--teal-dark); background: var(--white); line-height: 1.55; font-family: var(--font-latin); }
h1, h2, h3, h4 { margin: 0; color: var(--teal-dark); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
/* Georgian glyphs collide under the Latin-tuned negative tracking — reset it for ka headings (bug-012). */
:lang(ka) h1, :lang(ka) h2, :lang(ka) h3, :lang(ka) h4 { letter-spacing: normal; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
main { min-height: 40vh; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--teal-dark); color: #fff; padding: 10px 16px; z-index: 200; }
.skip-link:focus { left: 8px; top: 8px; }
/* Text for assistive technology only — kept in the accessibility tree (so it is announced) while
   taking no visual space. Unlike .skip-link it never becomes visible on focus. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem;
  padding: 14px 26px; border: 1px solid transparent; cursor: pointer; border-radius: var(--radius-card); }
.btn--teal { background: var(--teal); color: #00262e; }
.btn--dark { background: var(--teal-dark); color: #fff; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

/* header */
.brand { display: inline-flex; align-items: center; }
.brand__logo { display: block; height: 34px; width: auto; }
.site-header .brand__logo { height: 26px; }
.site-header { border-bottom: 1px solid var(--line); background: #fff; position: sticky; top: 0; z-index: 50; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.nav { display: flex; gap: 24px; font-size: .9rem; color: var(--grey); }
.nav a.active { color: var(--teal-dark); font-weight: 600; }
.site-header__utils { display: flex; align-items: center; gap: 14px; }
.intl-chip { font-size: .68rem; color: var(--teal-dark); border: 1px solid var(--line); border-radius: 40px; padding: 6px 12px; font-weight: 600; white-space: nowrap; }
.lang-switch { font-size: .78rem; font-weight: 700; letter-spacing: .08em; color: var(--teal-dark); }
.nav__footer { display: none; }  /* mobile-only menu footer; desktop uses .site-header__utils */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 24px; height: 2px; background: var(--teal-dark); display: block; }

/* Dark brand ground — Nexia Dark Teal, optionally carrying an uploaded background image behind a
   legibility overlay. Shared by the homepage hero and every inner-page title band, so the two
   surfaces can never drift apart. The image is supplied per page (Page.banner_image) or per site
   (the hero_image setting); with none set the band is a plain Dark Teal ground. */
.dark-ground { background-color: var(--teal-dark); color: var(--on-dark); }
.dark-ground h1 { color: var(--on-dark); }
.dark-ground--image { position: relative; background-size: cover; background-position: center; }
.dark-ground--image::before { content: ""; position: absolute; inset: 0; background: rgba(0, 50, 60, .55); }
.dark-ground--image > * { position: relative; }

/* hero band (Variant 4) — dark brand ground since imp-021 */
.hero { position: relative; }
.hero__container { position: relative; }
.hero__inner { padding: 72px 0 64px; max-width: 680px; }
.hero .eyebrow { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--teal); font-weight: 700; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800; margin-top: 18px; }
.hero__sub { color: var(--on-dark-muted); font-size: 1.05rem; margin-top: 18px; max-width: 52ch; }
.hero .btn { margin-top: 28px; }
/* Hero over an uploaded photo: editors choose the image, so the legibility floor has to hold for a
   worst-case white one. The shared .55 overlay is enough for the band's lone large <h1>, but the
   hero also carries small copy — a --teal eyebrow measures ~1.4:1 and --on-dark-muted ~2.8:1 over a
   pale photo, both below WCAG AA. Hence a heavier overlay (white text 5.8:1 over white artwork,
   clearing AA) and solid --on-dark for the two small-text elements. The imageless hero keeps the
   teal eyebrow: on solid --teal-dark it is 5.7:1 and already passes. */
.hero.dark-ground--image::before { background: rgba(0, 50, 60, .72); }
.hero.dark-ground--image .eyebrow,
.hero.dark-ground--image .hero__sub { color: var(--on-dark); }

/* credibility band — takes the light grey the hero gave up (imp-021) */
.credibility { background: var(--grey-light); border-bottom: 1px solid var(--line); text-align: center; }
.credibility p { padding: 20px 0; color: var(--teal-dark); }
.credibility b { color: var(--teal-dark); }
.about-teaser h2 { margin-bottom: 14px; }
.about-teaser p { margin-bottom: 18px; color: var(--grey); line-height: 1.7; max-width: 640px; }

/* footer banner */
.footer-banner { background: var(--teal); }
.footer-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 34px 24px; }
.footer-banner h2 { color: #00323C; font-size: 1.5rem; }
.footer-banner p { color: #013b40; font-size: .95rem; margin-top: 4px; }

/* footer */
.site-footer { background: var(--teal-dark); color: #bcd7d7; }
.site-footer__inner { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 40px 24px 24px; }
.site-footer .disclaimer { font-size: .74rem; color: #89aaaa; margin-top: 12px; max-width: 46ch; }
.site-footer__links { display: flex; gap: 18px; flex-wrap: wrap; font-size: .86rem; color: #b7d2d2; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 24px 32px; font-size: .76rem; color: #7fa0a0; border-top: 1px solid rgba(255,255,255,.08); }

/* cookie consent */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 100; margin: 0 auto; max-width: 720px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; flex-wrap: wrap; }
.consent[hidden] { display: none; }
.consent__text { font-size: .84rem; color: var(--grey); flex: 1 1 280px; }
.consent__actions { display: flex; align-items: center; gap: 14px; }
.consent__more { font-size: .82rem; color: var(--teal-dark); text-decoration: underline; }
.consent__decline { font-size: .82rem; color: var(--grey); background: none; border: 0; cursor: pointer; text-decoration: underline; }

/* error page */
.error-page { text-align: center; padding: 80px 0; }
.error-page .code { font-size: 4rem; font-weight: 800; color: var(--teal); }
.error-page h1 { margin-top: 8px; }
.error-page p { color: var(--grey); margin: 14px 0 24px; }

/* responsive */
@media (max-width: 900px) {
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; gap: 0; padding: 8px 24px 16px; display: none; }
  .nav.open { display: flex; }
  .nav > a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-toggle { display: flex; margin-left: auto; }
  .site-header__utils { display: none; }
  /* Language switch + Nexia International, centered at the foot of the open menu (bug-009 r2). */
  .nav__footer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 6px; padding-top: 16px; }
  .nav__footer .nav__lang { font-weight: 700; letter-spacing: .08em; color: var(--teal-dark); }
  .nav__footer .nav__intl { font-size: .8rem; color: var(--teal-dark); border: 1px solid var(--line); border-radius: 40px; padding: 8px 16px; font-weight: 600; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Phase 2: sections, grids, cards, tabs, forms ---- */
.section { padding: 56px 0; }
.section--cards { padding-top: 30px; }
/* A breadcrumb already sits above the content, so drop the section's full top padding when it
   directly follows one — otherwise the crumb is stranded in ~110px of dead space (imp-019). */
.crumbs + .section { padding-top: 24px; }
.card-grid__intro { margin-bottom: 34px; }
.section--tint { background: var(--grey-light); }
.section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 26px; }
.link { color: var(--teal-dark); font-weight: 600; border-bottom: 2px solid var(--teal); padding-bottom: 2px; }
.lead { font-size: 1.15rem; color: var(--teal-dark); margin-bottom: 22px; max-width: 82ch; }
.muted { color: var(--grey); }
.prose { max-width: 82ch; }
/* Non-tabbed pages: content fills the frame flush-left, no reserved vertical-tab column (bug-011). */
.prose--full { max-width: none; }
.prose h2 { font-size: 1.5rem; margin: 28px 0 10px; }
.prose h3 { font-size: 1.2rem; margin: 22px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 20px; }
.prose li { margin-bottom: 6px; }

/* Inner-page title band: the shared dark ground (imp-022, superseding the light default of
   imp-005). Colour, image variant and overlay all come from .dark-ground — the band only adds its
   own geometry here. */
.banner .container { padding-top: 34px; padding-bottom: 34px; }
.banner h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }

.crumbs { font-size: .82rem; color: var(--grey); padding-top: 18px; }
.crumbs a { color: var(--grey); } .crumbs b { color: var(--teal-dark); }

.grid { display: grid; gap: 16px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--team { grid-template-columns: repeat(4, 1fr); margin-top: 26px; max-width: 90%; margin-inline: auto; }

.card-svc { display: block; background: var(--grey-light); border: 1px solid var(--line); border-radius: var(--radius-card);
  padding: 24px 24px 42px; min-height: 140px; transition: transform .16s, box-shadow .16s; position: relative; }
.card-svc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.card-svc__ic { width: 60px; height: 60px; border-radius: 50%; background: var(--white); color: var(--teal-dark);
  border: 1px solid var(--line); display: grid; place-items: center; }
.card-svc__svg { width: 28px; height: 28px; }
.card-svc h3 { font-size: 1.12rem; margin: 16px 0 0; }
.card-svc__desc { color: var(--grey); font-size: .9rem; margin: 8px 0 0; }
.card-svc__go { position: absolute; right: 24px; bottom: 20px; color: var(--teal); font-size: 1.2rem; }

.card-banner { position: relative; display: flex; align-items: flex-end; min-height: 160px; border-radius: var(--radius-card); overflow: hidden;
  padding: 20px; color: #fff; background: linear-gradient(140deg, #0a4a54, #00323C); background-size: cover; background-position: center; }
/* Dark scrim so the white title stays legible over any photo (an inline background-image
   overrides the fallback gradient above, removing its contrast). */
.card-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 50, 60, .82), rgba(0, 50, 60, .05) 60%, transparent); }
.card-banner--tall { min-height: 220px; }
.card-banner h3 { position: relative; color: #fff; }

.card-post { display: block; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }
.card-post:hover { box-shadow: var(--shadow); }
.card-post__img { display: block; aspect-ratio: 16 / 10; background: linear-gradient(140deg, #0a4a54, #00323C); background-size: cover; background-position: center top; }
.card-post__body { display: block; padding: 16px 18px 20px; }
.card-post .eyebrow { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.card-post h3 { font-size: 1rem; margin: 6px 0; }
.card-post__date { font-size: .74rem; color: var(--grey); }

.card-team { text-align: center; }
.card-team__ph { display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: var(--radius-card); background: linear-gradient(140deg, #99adb1, #00323C); background-size: cover; background-position: top center; transition: transform .25s ease; }
.card-team:hover .card-team__ph { transform: scale(1.03); }
.card-team h3 { font-size: .98rem; margin: 12px 0 2px; } .card-team p { font-size: .78rem; color: var(--grey); }
.card-team__ln { display: inline-block; margin-top: 6px; font-size: .72rem; color: var(--teal-dark); font-weight: 700; }

/* Hierarchy pages (ftr-039): vertical sibling-link rail on the left, content on the right. Each
   item is a real link to a real subpage; the active one is a non-link current-page marker. */
.subnav { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 30px; align-items: start; }
.subnav__bar { display: flex; flex-direction: column; gap: 10px; }
.subnav__link { display: block; text-align: left; background: var(--grey-light); border: 1px solid var(--line);
  border-radius: 14px 0 14px 0; padding: 16px 18px; color: var(--teal-dark);
  font-weight: 600; transition: background .15s, color .15s, border-color .15s; }
a.subnav__link:hover { border-color: var(--teal); }
.subnav__link.is-active { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }
.subnav__content { line-height: 1.6; max-width: none; }
/* The content column must start level with the first rail item (imp-027). A grid item is its own
   block-formatting-context root, so a first child's top margin cannot collapse away and instead
   pushes the whole column down. About's panels handle their own case below; this covers a rich-text
   body that opens on a heading. Only the rail branch needs it — `.prose--full` has no rail to line
   up with. */
.subnav__content > :first-child { margin-top: 0; }
@media (max-width: 768px) {
  .subnav { grid-template-columns: 1fr; gap: 18px; }
  .subnav__bar { flex-direction: row; flex-wrap: wrap; }
  .subnav__link { flex: 1 1 auto; }
}

.news-filter { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; }
.news-filter__fields { display: flex; flex: 1 1 auto; flex-wrap: wrap; gap: 12px; }
.news-filter__q { flex: 1 1 240px; min-width: 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.news-filter__cat { flex: 0 1 220px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; font: inherit; background: #fff; }
.news-filter__submit { flex: 0 0 auto; }

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 30px; }
.pager a, .pager b { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; font-variant-numeric: tabular-nums; }
.pager b { background: var(--teal-dark); color: #fff; border-color: var(--teal-dark); }

.contact { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; }
.contact__info { background: var(--grey-light); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 34px 30px; align-self: start; }
.contact__info-title { font-size: 1.25rem; margin-bottom: 22px; }
.contact__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.contact__item { display: flex; gap: 14px; align-items: flex-start; line-height: 1.5; }
/* Light Teal glyph on the plain white disc (imp-023 r2). The icons are decorative — aria-hidden,
   with the same information in the adjacent text — so the accent colour carries no meaning. */
.contact__ic { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); display: grid; place-items: center; color: var(--teal); }
.contact__ic svg { width: 20px; height: 20px; }
.contact__item a { color: var(--teal-dark); word-break: break-word; }
.contact__item a:hover { color: var(--teal); }
.contact__form form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field, .field--full { display: flex; flex-direction: column; }
.field--full { grid-column: 1 / -1; }
/* Field-label and text-input chrome, both scoped away from the consent checkbox. Each of these
   selectors out-specifies a plain block class ((0,1,1) vs (0,1,0)), so without the exclusions the
   label's 12.8px semibold + 6px margin and the input's 12px/14px padding would win over `.checkbox`
   and `.checkbox__input` — the padding alone inflated the 16px box to roughly 42x40. */
.field label:not(.checkbox) { font-size: .8rem; font-weight: 600; margin-bottom: 6px; }
.field input:not([type="checkbox"]), .field select, .field textarea { padding: 12px 14px; border: 1px solid var(--grey); border-radius: 8px; font: inherit; }
.field input:not([type="checkbox"]):focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.field--error input:not([type="checkbox"]) { border-color: var(--error); }
.field .err { color: var(--error); font-size: .74rem; margin-top: 5px; }
/* Consent checkbox (imp-026). The native input *is* the visual box — `appearance: none` lets it be
   styled directly, so keyboard operation, focus and the :checked state stay native and no JS or
   duplicate faux-box element is needed. `.checkbox` rather than `.consent`: that block name already
   belongs to the cookie banner. */
.checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; margin-bottom: 0;
  font-weight: 400; font-size: .85rem; color: var(--grey); cursor: pointer; }
/* A true 16px square: `padding: 0` and `aspect-ratio` are explicit so no inherited field padding or
   flex stretching can turn it back into a rectangle (imp-026 r3). The 3px top offset optically
   centres it on the first line of the 13.6px consent copy. */
.checkbox__input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 16px; height: 16px;
  aspect-ratio: 1; padding: 0; margin: 3px 0 0; border: 1px solid var(--teal); border-radius: 4px;
  background: var(--white); cursor: pointer; display: grid; place-content: center;
  transition: background-color .15s ease, border-color .15s ease; }
/* The tick is drawn from a clipped square — no SVG asset and no data-URI to whitelist in the CSP. */
.checkbox__input::before { content: ""; width: 9px; height: 9px; background: var(--white);
  transform: scale(0); transition: transform .12s ease-in-out;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.checkbox__input:checked { background: var(--teal); border-color: var(--teal); }
.checkbox__input:checked::before { transform: scale(1); }
.checkbox__input:hover { border-color: var(--teal-dark); }
.checkbox__input:focus-visible { outline: 2px solid var(--teal-dark); outline-offset: 2px; }
.checkbox__text a { color: var(--teal-dark); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.checkbox__text a:hover { color: var(--teal); }
.field--error .checkbox__input { border-color: var(--error); }
/* News article (bug-004): the article fills the full page frame — the .container gives the 1280
   frame, .post-article fills it, and the body's default .prose reading cap is removed here (a
   descendant selector so it beats .prose regardless of source order). The cover floats into a left
   column so the body wraps to its right and continues full-width below; the photo keeps its ratio
   (width set, height auto). Clearfix stops a short article overlapping the next section. */
.post-article::after { content: ""; display: block; clear: both; }
.post-article .prose { max-width: none; }
/* Responsive title: scales down on phones (the default 2em never shrank there — imp-019 C). */
.post-article h1 { font-size: clamp(1.4rem, 4vw, 1.95rem); }
.post-cover { float: left; width: 38%; max-width: 420px; height: auto; margin: 10px 32px 22px 0; border-radius: var(--radius-card); }
/* margin-top separates the date from the flush title above (imp-019 D). */
.post-date { display: block; color: var(--grey); font-size: .8rem; margin-top: 12px; margin-bottom: 16px; }
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; }
.flash--success { background: rgba(0,185,185,.12); color: #046a63; }

@media (max-width: 900px) {
  .grid--3, .grid--team, .contact, .contact__form form { grid-template-columns: 1fr; }
  /* minmax(0, 1fr), not 1fr: a grid item's automatic minimum is its min-content width, so a column
     refuses to shrink below the longest unbreakable word it contains. Georgian surnames run long
     and have no break opportunities (მეგრელიშვილი), which floored each column at ~139px and pushed
     the grid past a 320px viewport (bug-014). The breaking rule below is the other half — without
     it the name would overflow its own card instead of the grid. */
  .grid--team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Last-resort break so a name can never spill out of its own card. `break-word`, not `anywhere`:
     it leaves min-content sizing alone (minmax above already handles that) and only breaks a word
     that genuinely cannot fit, rather than chopping every long one. */
  .card-team h3, .card-team p { overflow-wrap: break-word; }
  .section__head { flex-direction: column; align-items: flex-start; gap: 8px; }
  /* Home teaser sections (imp-017): the "view all" link drops below the card grid on mobile.
     display:contents promotes the head's h2 + link into the container's flex flow so the single
     link can be ordered after the grid — no duplicate link, no JS. */
  .section--home-teaser .container { display: flex; flex-direction: column; }
  .section--home-teaser .section__head { display: contents; }
  .section--home-teaser .section__head h2 { margin-bottom: 12px; }
  .section--home-teaser .grid { order: 2; }
  .section--home-teaser .section__head .link { order: 3; margin-top: 18px; }
  .news-filter { flex-direction: column; align-items: stretch; }
  .news-filter__q, .news-filter__cat { flex-basis: 100%; }
  .news-filter__submit { width: 100%; }
  /* Narrow screens: cover un-floats to a full-width block above the article text (bug-004). */
  .post-cover { float: none; width: 100%; max-width: none; margin: 0 0 18px; }
}

/* One-page About (ftr-039 r2): anchor sections clear the sticky header on jump + breathe apart.
   The panels are tab-toggled with [hidden] by front.js, so "the first one" is a runtime state, not
   a document position — a blanket top margin would indent every tab except the default one
   (imp-027 r2). Separation is therefore declared between *visible* siblings: whichever panel is
   shown sits flush with the rail, and with JS off, where all panels render stacked, the rhythm
   between them is preserved. */
.about-section { margin-top: 0; scroll-margin-top: 90px; }
/* Second selector covers a tabs-hub root that has its own intro/body: those render before the
   panels, so the visible panel needs separating from them. It uses `~`, not `+` — with `+` only
   the panel adjacent to the intro would match, and every other tab (adjacently preceded by a
   *hidden* panel) would sit flush, which is the default-tab-only bug all over again. */
.about-section:not([hidden]) ~ .about-section:not([hidden]),
.subnav__content > :not(.about-section) ~ .about-section { margin-top: 40px; }
.about-section > :first-child { margin-top: 0; }

/* Very narrow phones: two team columns leave ~108px per name, which is narrower than a single
   Georgian surname — the only way it "fits" is to chop the word. One column gives the name a full
   line and the photo more room (bug-014). */
@media (max-width: 380px) {
  .grid--team { grid-template-columns: 1fr; }
}