/* Self-hosted so the first paint never waits on a third-party origin.
   Loading these from fonts.googleapis.com made the stylesheet a
   render-blocking cross-origin request and put the woff2 files three
   levels deep in the critical chain (Lighthouse render-blocking-insight
   and network-dependency-tree-insight, 2026-09-15).

   Each file is the Google Fonts variable woff2 for one unicode subset,
   carrying the family's full weight axis; the `font-weight: 400 700`
   descriptor below is what clamps it to the two weights the brand uses,
   so one request serves both. Update by re-fetching the subset URLs from
   the fonts.googleapis.com css2 response for the same family. Provenance,
   versions, and licences are in assets/fonts/README.md.

   The subsets are derived from the site's own content, not guessed. Every
   non-ASCII code point in the build, re-runnable from site/:

       grep -rhoP '[^\x00-\x7F]' dist --include='*.html' --include='*.css' | sort -u

   As of 2026-09-16 that prints exactly two characters: © (U+00A9), in the
   footer note of all eight pages, covered by the latin subset; and λ
   (U+03BB), the ornament in the `content` rules below, covered by the
   greek subset. Nothing on the site needs latin-ext, so that subset is
   not shipped. Georgian is shipped ahead of the /ka/ pages. If the scan
   ever prints a third character, add the subset that covers it or the
   glyph will fall through to the system stack. */

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/assets/fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/assets/fonts/roboto-greek.woff2') format('woff2');
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: 'Noto Sans Georgian';
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 100%;
    font-display: swap;
    src: url('/assets/fonts/noto-sans-georgian-georgian.woff2') format('woff2');
    unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31;
}

:root {
    color-scheme: dark light;

    --teal: #0E7A8A;
    --teal-bright: #17B0C4;
    --bg: #0A1416;
    --fg: #F4F6F9;
    --muted: #93A1AD;
    --link: #4FC3D4;
    --accent: #4FC3D4;
    --rule: rgba(244, 246, 249, 0.14);
    --echo: rgba(244, 246, 249, 0.10);
    --glow-opacity: 0.9;
    /* Label colour for text sitting on a teal fill. Deliberately the same in
       both schemes, because the fill is: the brand light on #0E7A8A is
       4.65:1, while the brand ink on it is 3.58:1 and would fail AA. */
    --on-teal: #F4F6F9;

    --font-latin: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
    /* Roboto first: it has no Georgian glyphs, so Georgian text falls
       through to Noto Sans Georgian while Latin words on the same page
       stay in the brand face. */
    --font-georgian: 'Roboto', 'Noto Sans Georgian', 'Noto Sans', system-ui, sans-serif;
}

@media (prefers-color-scheme: light) {
    :root {
        --bg: #F4F6F9;
        --fg: #101720;
        --muted: #55606D;
        --link: #0A5F6B;
        --accent: #0E7A8A;
        --rule: rgba(16, 23, 32, 0.14);
        --echo: rgba(14, 122, 138, 0.18);
        --teal-bright: #0E7A8A;
        --glow-opacity: 0.35;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 2rem clamp(1.5rem, 5vw, 4rem);
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-latin);
    line-height: 1.6;
}

html[lang='ka'] body {
    font-family: var(--font-georgian);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.glow-wrap {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.glow-lambda {
    position: absolute;
    right: -6vw;
    top: 50%;
    width: clamp(380px, 44vw, 760px);
    transform: translateY(-54%);
    opacity: var(--glow-opacity);
}

body:has(main.subpage, main.subpage-wide, main.notfound) .glow-lambda {
    opacity: calc(var(--glow-opacity) * 0.45);
    top: 18%;
}

.glow-lambda .echo {
    stroke: var(--echo);
}

.glow-lambda .halo {
    stroke: var(--teal);
}

.glow-lambda .core {
    stroke: var(--teal-bright);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1;
}

.masthead {
    display: block;
    color: var(--fg);
}

.masthead svg {
    width: 180px;
    height: auto;
    display: block;
}

.lang a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}

.lang a:hover,
.lang a:focus-visible {
    color: var(--fg);
    border-bottom-color: var(--teal);
}

main {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* The hero is a child of <main> so the services grid can share the same
   landmark; the grid rules live on the child, not on main itself. */
.hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 280px;
    gap: clamp(2rem, 6vw, 6rem);
    align-content: center;
    padding: 4.5rem 0 3.5rem;
}

.eyebrow {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 1.5rem;
}

h1 {
    margin: 0 0 1.75rem;
    font-size: clamp(3rem, 8vw, 6.2rem);
    line-height: 1.02;
    letter-spacing: -0.025em;
    font-weight: 400;
    max-width: 11ch;
}

main.subpage h1,
main.subpage-wide h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    max-width: 22ch;
}

h1 strong {
    font-weight: 700;
}

.lede {
    margin: 0;
    font-size: 1.15rem;
    color: var(--muted);
    max-width: 44ch;
}

.crumbs {
    margin: 2.5rem 0 0;
    font-size: 0.85rem;
}

.crumbs ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: var(--muted);
}

.crumbs li + li::before {
    content: '/';
    margin-right: 0.35rem;
    color: var(--muted);
}

.crumbs a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

.crumbs a:hover,
.crumbs a:focus-visible {
    color: var(--fg);
    border-bottom-color: var(--teal);
}

main.subpage {
    padding: 1.5rem 0 3rem;
    max-width: 70ch;
}

/* Same page head as .subpage, but the landmark itself runs full width so
   a services grid inside it is not squeezed to prose measure. The prose
   width moves to the header; the grid carries its own bottom margin, so
   main adds none. */
main.subpage-wide {
    padding: 1.5rem 0 0;
}

main.subpage-wide header.page-head {
    max-width: 70ch;
}

main.subpage header.page-head,
main.subpage-wide header.page-head {
    display: block;
    margin: 1.5rem 0 2.5rem;
}

.prose h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 2.2rem 0 0.6rem;
}

.prose h2::before {
    content: 'λ';
    color: var(--accent);
    font-weight: 400;
    margin-right: 0.55rem;
}

.prose p,
.prose li {
    color: var(--muted);
}

.prose ul {
    margin: 0;
    padding-left: 1.2rem;
}

.prose li {
    margin-bottom: 0.4rem;
}

.prose a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.prose a:hover,
.prose a:focus-visible {
    color: var(--fg);
}

/* Cookie names in the policy tables. font-family: inherit keeps them in
   Roboto: the browser default for <code> is a monospace face the site does
   not ship and the brand does not use. */
.prose code {
    font-family: inherit;
    color: var(--fg);
}

/* The cookie table is the one element that can outgrow the prose measure on
   a narrow screen, so it scrolls inside its own box instead of widening the
   page. */
.table-wrap {
    overflow-x: auto;
    margin: 1rem 0 0.5rem;
}

.prose table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
    color: var(--muted);
}

.prose th,
.prose td {
    text-align: left;
    vertical-align: top;
    padding: 0.55rem 1rem 0.55rem 0;
    border-bottom: 1px solid var(--rule);
}

.prose th {
    color: var(--fg);
    font-weight: 700;
    white-space: nowrap;
    border-bottom-color: var(--teal);
}

/* Durations are two short words and read badly wrapped, so the last column
   holds its line and the purpose column absorbs the width instead. */
.prose td:last-child {
    white-space: nowrap;
}

.faq h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 1.4rem 0 0.3rem;
    color: var(--fg);
}

.facts {
    align-self: end;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
    margin: 0;
    background: color-mix(in srgb, var(--bg) 62%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.3rem 1.4rem;
    border-radius: 14px;
    border: 1px solid var(--rule);
}

.facts div {
    border-top: 2px solid var(--teal);
    padding-top: 0.6rem;
}

.facts dt {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0 0 0.2rem;
}

.facts dd {
    margin: 0;
    font-size: 0.98rem;
}

/* Second and later values in one group (the two locations under "Based")
   read as separate lines rather than a wrapped sentence. */
.facts dd + dd {
    margin-top: 0.35rem;
}

.facts a,
.cta a,
footer a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.facts a:hover,
.facts a:focus-visible,
.cta a:hover,
.cta a:focus-visible,
footer a:hover,
footer a:focus-visible {
    color: var(--fg);
}

.services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    border-top: 1px solid var(--rule);
    padding-top: 2rem;
    margin-bottom: 2.5rem;
    position: relative;
    z-index: 1;
}

.services .card {
    display: block;
    color: inherit;
    text-decoration: none;
}

.services .card h2,
.services .card h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.35rem;
}

.services .card h2::before,
.services .card h3::before {
    content: 'λ';
    color: var(--accent);
    font-weight: 400;
    margin-right: 0.55rem;
}

.services .card p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--muted);
    max-width: 30ch;
}

.services .card:hover h2,
.services .card:focus-visible h2,
.services .card:hover h3,
.services .card:focus-visible h3 {
    color: var(--accent);
}

.services .cta {
    grid-column: 1 / -1;
    margin: 0.5rem 0 0;
    font-size: 0.95rem;
    color: var(--muted);
}

.cta {
    font-size: 0.95rem;
    color: var(--muted);
}

/* 404. The illustration carries the page, so the text sits under it at
   prose measure and the background glow steps back the way it does on the
   subpages (the :has() rule above). */
main.notfound {
    padding: 1.5rem 0 3rem;
    max-width: 70ch;
}

main.notfound h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    max-width: 18ch;
}

main.notfound header.page-head {
    display: block;
    margin: 0 0 2rem;
}

.nf-art {
    display: block;
    width: min(100%, 460px);
    height: auto;
    margin: 2rem 0 2.75rem;
}

.nf-tile {
    fill: var(--teal);
}

.nf-digit {
    stroke: var(--fg);
}

/* The bloom behind the tile is the same teal-bright core the background
   lambda glows with, so it dims with the scheme instead of burning out
   on the light one. */
.nf-bloom {
    fill: var(--teal-bright);
    opacity: calc(var(--glow-opacity) * 0.5);
}

/* The brand's echo motif, but knocked out of register: each digit's echo
   slides away from the stroke it belongs to. It settles into the offset
   once, on load, rather than looping. */
.nf-echo {
    stroke: var(--accent);
    opacity: 0.45;
    transform: translate(-18px, 12px);
    animation: nf-drift 1.4s ease-out 0.3s both;
}

@keyframes nf-drift {
    from { opacity: 0; transform: none; }
    to { opacity: 0.45; transform: translate(-18px, 12px); }
}

.nf-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.75rem;
    border-top: 1px solid var(--rule);
    padding-top: 1.4rem;
}

.nf-links a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.nf-links a:hover,
.nf-links a:focus-visible {
    color: var(--fg);
}

footer {
    font-size: 0.85rem;
    color: var(--muted);
    position: relative;
    z-index: 1;
}

footer p {
    margin: 0;
}

.footnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem;
    border-top: 1px solid var(--rule);
    padding: 1.2rem 0;
    margin-bottom: 0.8rem;
}

.footnav a {
    border-bottom-color: transparent;
    color: var(--muted);
}

.footnav a:hover,
.footnav a:focus-visible {
    color: var(--fg);
}

/* Consent banner. Fixed, so unhiding it moves nothing else on the page, and
   it leaves the moment a choice is made rather than sitting on the footer
   links. The only component in this file that JavaScript touches; `hidden`
   does the hiding, so no rule here may set `display`. */
.consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--rule);
    animation: consent-rise 0.4s ease-out both;
}

/* Same side gutters as the page, text left and buttons right on one row;
   the row wraps on narrow screens and the details panel always takes the
   full width beneath. */
.consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem 2.5rem;
    padding: 1.1rem clamp(1.5rem, 5vw, 4rem) 1.2rem;
}

.consent-text {
    margin: 0;
    flex: 1 1 36ch;
    max-width: 80ch;
    font-size: 1rem;
    color: var(--muted);
}

.consent-text a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
}

.consent-text a:hover,
.consent-text a:focus-visible {
    color: var(--fg);
}

.consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.consent-btn {
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.2;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: transparent;
    color: var(--fg);
    cursor: pointer;
}

.consent-btn:hover {
    border-color: var(--teal);
    color: var(--accent);
}

.consent-btn:focus-visible,
.consent-choice input:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.consent-btn-primary,
.consent-btn-primary:hover {
    background: var(--teal);
    border-color: var(--teal);
    color: var(--on-teal);
}

.consent-btn-primary:hover {
    box-shadow: 0 0 0 3px var(--echo);
}

.consent-details {
    flex-basis: 100%;
    margin-top: 0.2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

.consent-choice {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.consent-choice label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
}

.consent-choice input {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--teal);
}

.consent-note {
    margin: 0 0 1rem;
    max-width: 62ch;
    font-size: 0.9rem;
    color: var(--muted);
}

@keyframes consent-rise {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: none; }
}

.rise {
    animation: rise 0.7s ease-out both;
}

.rise-1 { animation-delay: 0.05s; }
.rise-2 { animation-delay: 0.15s; }
.rise-3 { animation-delay: 0.25s; }
.rise-4 { animation-delay: 0.4s; }

@keyframes rise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .rise, .rise-1, .rise-2, .rise-3, .rise-4 { animation: none; }
    /* The echo keeps its offset; only the drift into it is dropped. */
    .nf-echo { animation: none; }
    /* The banner appears in place instead of sliding up from the edge. */
    .consent { animation: none; }
}

@media (max-width: 860px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 3rem 0;
    }

    .services {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .glow-lambda {
        right: -34vw;
        opacity: calc(var(--glow-opacity) * 0.5);
    }
}