/* ============================================================
   I.C. Saraidaris — site styles
   (design system ported from ICS Verification)
   ============================================================ */

/* Self-hosted fonts (SIL Open Font License) — no requests to Google, so visitor IPs are not shared with a third party. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
    src: url("fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300 800; font-display: swap;
    src: url("fonts/inter-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: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("fonts/space-grotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap;
    src: url("fonts/space-grotesk-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; }


:root {
    /* brand constants (theme-invariant) */
    --navy-900: #061427;
    --navy-800: #0a1d3a;
    --navy-700: #0f2a52;
    --navy-600: #173a6b;
    --navy-500: #1e4d8a;
    --sky-500: #2ec4ff;
    --sky-600: #12a9ea;
    --sky-700: #0a75aa; /* darker, for text on light backgrounds */
    /* call-to-action buttons: neon light blue */
    --cta: var(--sky-500);
    --cta-hover: var(--sky-600);
    --cta-ink: #03121f;
    --cta-glow: 46, 196, 255; /* rgb of --cta, for the soft glow */
    --accent: #3aa6ff;
    --warn: #ffb547;
    --danger: #ff5d6c;
    --radius: 14px;
    --container: 1200px;

    /* light theme (default) */
    --ink: #0c1729;
    --ink-soft: #2a3b55;
    --muted: #6b7a90;
    --line: #e6ebf2;
    --bg: #f6f8fb;
    --card: #ffffff;
    --section-contact-bg: #ffffff;
    --service-card-tag-bg: var(--bg);
    --form-bg: #ffffff;
    --form-input-bg: var(--bg);
    --section-eyebrow: var(--sky-700);
    --section-band-bg: #eef3f9;
    /* navy panels (figures column, CTA band): light tint in light mode, navy in dark mode */
    --panel-bg: linear-gradient(165deg, #e4edf8 0%, #d2e0f0 100%);
    --panel-border: rgba(10, 30, 60, .10);
    --panel-fg: var(--ink);
    --panel-fg-soft: var(--ink-soft);
    --shadow-sm: 0 1px 2px rgba(10, 30, 60, .06), 0 1px 1px rgba(10, 30, 60, .04);
    --shadow-md: 0 10px 30px -12px rgba(10, 30, 60, .18), 0 4px 8px -4px rgba(10, 30, 60, .08);
    --shadow-lg: 0 30px 60px -20px rgba(10, 30, 60, .25);

    --hero-bg:
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(58, 166, 255, .14), transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(46, 196, 255, .08), transparent 60%),
        linear-gradient(180deg, #ffffff 0%, #eaf3fb 55%, #b6d6ee 100%);
    --hero-fg: var(--ink);
    --hero-fg-soft: var(--ink-soft);
    --hero-chip-bg: #ffffff;
    --hero-chip-border: rgba(10, 23, 41, .14);
    --hero-chip-fg: rgba(10, 23, 41, .88);
    --sea-top: #6fa8d6;
    --sea-top-opacity: 0.95;
    --sea-bot: #2a5a8a;
    --sea-bot-opacity: 1;
    --ghost-bg: rgba(255, 255, 255, .7);
    --ghost-fg: var(--ink);
    --ghost-border: rgba(10, 23, 41, .25);
    --ghost-bg-hover: #ffffff;
    --ghost-border-hover: rgba(10, 23, 41, .55);
    --hero-ship-filter: drop-shadow(0 6px 14px rgba(10, 30, 60, .12));
    --hero-ship-reflection-opacity: 0;
}

[data-theme="dark"] {
    --ink: #e6ecf5;
    --ink-soft: #b4c0d2;
    --muted: #7a8aa3;
    --line: #1a2a44;
    --bg: #050d1a;
    --card: #0e1a30;
    --section-contact-bg: #08152a;
    --service-card-tag-bg: #050d1a;
    --form-bg: #0e1a30;
    --form-input-bg: #050d1a;
    --section-eyebrow: var(--sky-500);
    --section-band-bg: #0c1d37;
    --panel-bg: linear-gradient(165deg, var(--navy-700) 0%, var(--navy-900) 100%);
    --panel-border: rgba(255, 255, 255, .08);
    --panel-fg: #ffffff;
    --panel-fg-soft: rgba(255, 255, 255, .72);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 1px rgba(0, 0, 0, .2);
    --shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .55), 0 4px 8px -4px rgba(0, 0, 0, .35);
    --shadow-lg: 0 30px 60px -20px rgba(0, 0, 0, .7);

    --hero-bg:
        radial-gradient(ellipse 80% 60% at 70% 30%, rgba(58, 166, 255, .18), transparent 60%),
        radial-gradient(ellipse 60% 50% at 20% 80%, rgba(46, 196, 255, .12), transparent 60%),
        linear-gradient(180deg, #061427 0%, #0a1d3a 60%, #0c2444 100%);
    --hero-fg: #ffffff;
    --hero-fg-soft: rgba(255, 255, 255, .78);
    --hero-chip-bg: rgba(255, 255, 255, .05);
    --hero-chip-border: rgba(255, 255, 255, .12);
    --hero-chip-fg: rgba(255, 255, 255, .82);
    --sea-top: #0a2244;
    --sea-top-opacity: 0.9;
    --sea-bot: #050f1f;
    --sea-bot-opacity: 1;
    --ghost-bg: rgba(255, 255, 255, .04);
    --ghost-fg: #ffffff;
    --ghost-border: rgba(255, 255, 255, .25);
    --ghost-bg-hover: rgba(255, 255, 255, .1);
    --ghost-border-hover: rgba(255, 255, 255, .5);
    --hero-ship-filter: drop-shadow(0 12px 30px rgba(0, 0, 0, .45));
    --hero-ship-reflection-opacity: 0.18;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

.ics-app { overflow-x: clip; }

/* ============================================================
   Buttons
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
    text-decoration: none;
}

.btn--cta {
    background: var(--cta);
    color: var(--cta-ink);
    box-shadow: 0 6px 14px -4px rgba(var(--cta-glow), .55);
}
.btn--cta:hover {
    background: var(--cta-hover);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -6px rgba(var(--cta-glow), .7);
}

.btn--ghost {
    background: var(--ghost-bg);
    color: var(--ghost-fg);
    border-color: var(--ghost-border);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover {
    background: var(--ghost-bg-hover);
    border-color: var(--ghost-border-hover);
}

.btn--lg { padding: 14px 26px; font-size: 15px; }

/* ============================================================
   Navbar
   ============================================================ */
.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(6, 20, 39, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.nav__inner {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 76px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
}
.brand__mark {
    width: 48px; height: 48px;
    display: inline-block;
    object-fit: contain;
}
.brand__mark--lg { width: 64px; height: 64px; }
.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1;
}
.brand__text strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    letter-spacing: .02em;
}
.brand__text em {
    font-style: normal;
    font-size: 10px;
    color: #8fb7e6;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin-top: 4px;
}

.nav__links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    margin-right: 12px;
}
.nav__links a {
    color: rgba(255, 255, 255, .78);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    transition: color .15s ease, background .15s ease;
}
.nav__links a:hover {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}

.theme-toggle {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    color: rgba(255, 255, 255, .9);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease, color .2s ease, border-color .2s ease;
}
.theme-toggle:hover {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .3);
    transform: rotate(15deg);
}
.theme-toggle svg { display: block; }

.nav__burger {
    display: none;
    background: transparent;
    border: 0;
    width: 40px; height: 40px;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.nav__burger span {
    width: 22px; height: 2px;
    background: #fff;
    display: block;
    border-radius: 2px;
}

.nav__mobile {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 16px 24px 24px;
    background: rgba(6, 20, 39, .98);
    border-top: 1px solid rgba(255, 255, 255, .08);
}
.nav__mobile a {
    color: #fff;
    padding: 12px 14px;
    border-radius: 10px;
}
.nav__mobile a:hover { background: rgba(255, 255, 255, .06); }
.nav__mobile .btn--cta { margin-top: 8px; justify-content: center; }
.nav__mobile-group {
    margin: 10px 14px 2px;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #8fb7e6;
    font-weight: 600;
}
.nav__mobile-group:first-child { margin-top: 0; }

/* --- top bar (phone / email / LinkedIn) --- */
.topbar {
    background: rgba(3, 12, 26, .9);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    font-size: 13px;
}
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 22px;
    height: 36px;
}
.topbar__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .72);
    transition: color .15s ease;
    white-space: nowrap;
}
.topbar__item:hover { color: #fff; }
.topbar__item svg { flex: none; color: var(--sky-500); }
.topbar__item--icon { color: rgba(255, 255, 255, .85); }
.topbar__item--icon svg { color: inherit; }
.topbar__item--icon:hover { color: var(--sky-500); }

/* --- dropdowns --- */
.nav__dd { position: relative; }
.nav__dd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 0;
    font: inherit;
    color: rgba(255, 255, 255, .78);
    padding: 10px 16px;
    border-radius: 999px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}
.nav__dd-btn svg { transition: transform .2s ease; }
.nav__dd:hover .nav__dd-btn,
.nav__dd.is-open .nav__dd-btn,
.nav__dd:focus-within .nav__dd-btn {
    color: #fff;
    background: rgba(255, 255, 255, .06);
}
.nav__dd:hover .nav__dd-btn svg,
.nav__dd.is-open .nav__dd-btn svg { transform: rotate(180deg); }

.nav__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 260px;
    max-width: 360px;
    padding: 8px;
    background: rgba(8, 21, 42, .98);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
    z-index: 60;
}
/* keep the hover bridge alive between button and menu */
.nav__menu::before {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: -8px;
    height: 8px;
}
.nav__dd:hover .nav__menu,
.nav__dd.is-open .nav__menu,
.nav__dd:focus-within .nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__menu a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: rgba(255, 255, 255, .82);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    transition: background .15s ease, color .15s ease;
}
.nav__menu a:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

@media (max-width: 900px) {
    .nav__links, .nav__inner > .btn--cta { display: none; }
    .nav__burger { display: flex; }
    .nav__mobile { display: flex; }
    .topbar__inner { justify-content: center; gap: 16px; }
    .topbar__item span { display: none; }
    .topbar__item svg { width: 16px; height: 16px; }
}

/* ============================================================
   Sub-pages (services / about)
   ============================================================ */
.page-hero {
    position: relative;
    color: var(--ink);
    background: var(--section-contact-bg);
    overflow: hidden;
    transition: background .25s ease, color .25s ease;
}
.page-hero__inner {
    padding: 72px 24px 8px;
}
.page-hero__title {
    margin: 0 0 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 4vw, 48px);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.page-hero__lead {
    margin: 0;
    color: var(--muted);
    font-size: 18px;
    line-height: 1.6;
    max-width: 720px;
}

.section.section--page {
    padding: 32px 0 80px;
    overflow: visible;
    background: var(--section-contact-bg);
    transition: background .25s ease;
}

.service-page {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 32px;
    align-items: start;
}
.service-page__icon {
    width: 72px; height: 72px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
}
.service-page__icon svg { width: 36px; height: 36px; }
.service-page__body .section__title { font-size: clamp(24px, 3vw, 32px); }
.service-page__body .section__lead { margin: 0 0 28px; }
.service-page__tags {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.service-page__tags li {
    font-size: 13px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--service-card-tag-bg);
    border: 1px solid var(--line);
    color: var(--ink-soft);
}
.service-page--single { grid-template-columns: 1fr; }
.service-page__text {
    margin: 0 0 18px;
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.65;
    max-width: 780px;
}
.service-page__subtitle { margin-top: 36px; }

/* split page: sticky intro column + register list (Technical Shipboard Manuals) */
.split-page {
    display: grid;
    grid-template-columns: minmax(300px, 5fr) 7fr;
    gap: 64px;
    padding-top: 40px;
}
.split-page__intro {
    align-self: start;
    position: sticky;
    top: 132px; /* top bar + header + breathing room */
}
h1:focus, h1:focus-visible { outline: none; }

.split-page__title {
    margin: 10px 0 22px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(30px, 3.6vw, 44px);
    letter-spacing: -.02em;
    line-height: 1.08;
    text-wrap: balance;
}
.split-page__lead p {
    margin: 0 0 14px;
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.65;
    max-width: 60ch;
}

.facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0 28px;
    margin: 26px 0 30px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
}
.facts div { padding: 6px 0; }
.facts strong {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 26px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.facts span {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.register__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--ink);
}
.register__head h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    letter-spacing: -.01em;
}
.register__head small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.register__list { list-style: none; margin: 0; padding: 0; }
.register__list li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 12px;
    align-items: start;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14.5px;
    line-height: 1.45;
    color: var(--ink);
    transition: color .15s ease;
}
.register__list li svg { width: 16px; height: 16px; color: var(--sky-600); margin-top: 3px; }
.register__list li:hover { color: var(--sky-700); }
[data-theme="dark"] .register__list li svg,
[data-theme="dark"] .register__list li:hover { color: var(--sky-500); }
.register__list .register__item--detailed { padding: 14px 0; }
.register__list .register__item--detailed strong { display: block; font-weight: 600; }
.register__list .register__item--detailed small {
    display: block;
    margin-top: 3px;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--muted);
}

@media (max-width: 900px) {
    .split-page { grid-template-columns: 1fr; gap: 36px; }
    .split-page__intro { position: static; }
}
@media (max-width: 600px) {
    .service-page { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
    position: relative;
    color: var(--hero-fg);
    background: var(--hero-bg);
    overflow: hidden;
    isolation: isolate;
    transition: background .25s ease, color .25s ease;
    min-height: min(100vh, 900px);
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero__waves {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .05) 1px, transparent 0);
    background-size: 28px 28px;
    mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}

.hero__ship .sea-stop-top { stop-color: var(--sea-top); stop-opacity: var(--sea-top-opacity); }
.hero__ship .sea-stop-bot { stop-color: var(--sea-bot); stop-opacity: var(--sea-bot-opacity); }

.hero__ship {
    position: absolute;
    right: -60px;
    bottom: -10px;
    width: 1500px;
    max-width: 120%;
    opacity: .95;
    filter: var(--hero-ship-filter);
    transition: filter .25s ease;
}
.hero__ship .ship-reflection {
    opacity: var(--hero-ship-reflection-opacity);
    transition: opacity .25s ease;
}

@media (max-width: 1100px) {
    .hero__ship { width: 1200px; right: -100px; opacity: .55; }
}

.hero__inner {
    position: relative;
    z-index: 1;
    padding: 80px 24px 120px;
}

.hero__content {
    max-width: 760px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: var(--hero-chip-bg);
    border: 1px solid var(--hero-chip-border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--hero-chip-fg);
    text-transform: uppercase;
    transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.eyebrow__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--sky-500);
    box-shadow: 0 0 0 4px rgba(46, 196, 255, .25);
    animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(46, 196, 255, .25); }
    50%      { box-shadow: 0 0 0 8px rgba(46, 196, 255, .08); }
}

.hero__title {
    margin: 24px 0 18px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(36px, 5.6vw, 68px);
    line-height: 1.05;
    letter-spacing: -.02em;
    font-weight: 700;
}
.grad {
    background: linear-gradient(120deg, #2ec4ff 0%, #1e6fd9 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero__lead {
    max-width: 620px;
    font-size: 17px;
    line-height: 1.65;
    color: var(--hero-fg-soft);
    margin: 0 0 32px;
    transition: color .25s ease;
}

/* ============================================================
   Sections
   ============================================================ */
.section {
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
@media (max-width: 760px) {
    .section { padding: 64px 0; }
}

.section::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("logo.png");
    background-repeat: no-repeat;
    /* fixed to the viewport: every section shows its slice of one logo, so it never gets cut per section.
       Offset down by roughly half the sticky header so it sits in the middle of the visible content. */
    background-attachment: fixed;
    background-position: center calc(50% + 55px);
    background-size: min(64vw, 580px);
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
/* Touch devices (iOS ignores fixed backgrounds) and phones: skip the watermark rather than show it cut per section. */
@media (hover: none), (max-width: 760px) {
    .section::before { display: none; }
}

.section > .container {
    position: relative;
    z-index: 1;
}


/* ============================================================
   Home page sections + Who We Are (redesign 2026-09-23)
   ============================================================ */
.section--plain { background: var(--section-contact-bg); transition: background .25s ease; }
.section--band { background: var(--section-band-bg); transition: background .25s ease; }
.section__title--left { text-align: left; }

.home-lead {
    color: var(--ink-soft);
    font-size: 17px;
    line-height: 1.7;
    max-width: 62ch;
    margin: 0 0 22px;
}

.home-intro {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 64px;
    align-items: center;
}
.home-intro .section__eyebrow { margin-bottom: 14px; }
@media (max-width: 900px) { .home-intro { grid-template-columns: 1fr; gap: 36px; } }
.home-intro--center { display: block; text-align: center; }
.home-intro--center .home-lead { margin: 0 auto; max-width: 68ch; }
/* inline highlight inside a sentence (same look as an eyebrow label, but no block spacing) */
.iso-mark {
    color: var(--section-eyebrow);
    font-weight: 700;
    font-size: .8em;
    letter-spacing: .12em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* services as rows */
.svc-rows {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--line);
}
.svc-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 18px;
    row-gap: 6px;
    align-content: start;
    padding: 28px 28px 28px 0;
    border-bottom: 1px solid var(--line);
}
.svc-row:nth-child(odd) { border-right: 1px solid var(--line); }
.svc-row:nth-child(even) { padding-left: 28px; }
.svc-row__icon {
    grid-row: span 3;
    width: 44px; height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--accent-color);
}
.svc-row__icon svg { width: 22px; height: 22px; }
.svc-row h3 {
    margin: 2px 0 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--ink);
    transition: color .15s ease;
}
.svc-row p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; }
.svc-row small { font-size: 13px; font-weight: 600; color: var(--section-eyebrow); }
.svc-row small::after { content: " \2192"; }
.svc-row:hover h3 { color: var(--section-eyebrow); }
@media (max-width: 760px) {
    .svc-rows { grid-template-columns: 1fr; }
    .svc-row:nth-child(odd) { border-right: 0; }
    .svc-row:nth-child(even) { padding-left: 0; }
}

/* columns under a heavy top rule (Why Us on home, ISO scopes) */
.rule-row {
    display: grid;
    border-top: 2px solid var(--ink);
}
.rule-row--4 { grid-template-columns: repeat(4, 1fr); }
.rule-row > div { padding: 24px 32px 0 0; }
.rule-row > div + div { padding-left: 32px; border-left: 1px solid var(--line); }
.rule-row h3 {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 18px;
    line-height: 1.3;
    color: var(--ink);
}
.rule-row p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 900px) {
    .rule-row--4 { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
    .rule-row--4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 520px) {
    .rule-row--4 { grid-template-columns: 1fr; }
    .rule-row > div + div { padding-left: 0; border-left: 0; }
}

/* closing call-to-action */
.cta-band { background: var(--panel-bg); color: var(--panel-fg); border-top: 1px solid var(--panel-border); padding: 64px 0; transition: background .25s ease, color .25s ease; }
.cta-band__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.cta-band h2 {
    margin: 0;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(24px, 3vw, 34px);
    letter-spacing: -.02em;
    max-width: 22ch;
}
.cta-band p { margin: 10px 0 0; color: var(--panel-fg-soft); }

/* Who We Are content (home page) */
.wwa-story { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; margin-top: 64px; }
.wwa-story h3 { margin: 0 0 12px; font-family: 'Space Grotesk', sans-serif; font-size: 22px; color: var(--ink); }
.wwa-story p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.wwa-story__heritage { border-left: 3px solid var(--sky-500); padding-left: 28px; }
.wwa-story__big {
    font: 700 56px/1 'Space Grotesk', sans-serif;
    letter-spacing: -.03em;
    color: var(--ink);
    margin-bottom: 10px;
}
.wwa-story__big small { font-size: 16px; font-weight: 600; letter-spacing: 0; color: var(--muted); margin-left: 8px; }
.iso-row__label { display: block; margin: 56px 0 0; }
@media (max-width: 900px) { .wwa-story { grid-template-columns: 1fr; gap: 40px; } }

/* company figures: first starts at the left edge, last ends at the right edge, equal gaps with a divider centred in each */
.figure-row {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-top: 2px solid var(--ink);
    padding-top: 24px;
}
.figure-row__rule {
    width: 1px;
    margin-top: -24px; /* run the divider up to the top rule, like the ISO scopes row */
    background: var(--line);
}
.figure-row strong {
    display: block;
    margin-bottom: 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(38px, 4vw, 52px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--sky-500); /* trial 2026-10-07: neon blue figures (was var(--ink)) */
}
.figure-row > div > span { font-size: 14px; color: var(--muted); }
/* count-up: invisible final value and live value share one cell, so the width never changes mid-count */
.count-box { display: inline-grid; }
.figure-row .count-box { display: grid; justify-content: start; }
.count-box > span { grid-area: 1 / 1; }
.count-box__ghost { visibility: hidden; }
@media (max-width: 520px) {
    .figure-row { flex-direction: column; }
    .figure-row__rule { width: auto; height: 1px; margin: 20px 0; }
}

.iso-row { margin-top: 40px; }
.iso-row i {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    background: color-mix(in srgb, var(--sky-500) 16%, transparent);
    color: var(--sky-700);
}
[data-theme="dark"] .iso-row i { color: var(--sky-500); }
.iso-row h3 { font-size: 15px; font-family: 'Inter', sans-serif; font-weight: 600; }

/* one equal column per link (the current page is left out), stacking on narrow screens */
.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.next-links a {
    display: grid;
    gap: 6px;
    padding: 24px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    transition: border-color .15s ease;
}
.next-links a:hover { border-color: var(--section-eyebrow); }
.next-links strong { font: 600 18px 'Space Grotesk', sans-serif; color: var(--ink); }
.next-links span { font-size: 13.5px; color: var(--muted); }


.section--why {
    background: var(--section-contact-bg);
    transition: background .25s ease;
}

.section--team {
    background: var(--section-contact-bg);
    color: var(--ink);
    transition: background .25s ease, color .25s ease;
}

.section--contact {
    background: var(--section-contact-bg);
    transition: background .25s ease;
}

.section__head {
    max-width: 720px;
    margin: 0 auto 60px;
    text-align: center;
}
.section__head--light .section__title { color: #fff; }
.section__head--light .section__eyebrow { color: #8fb7e6; }

.section__eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--section-eyebrow);
    font-weight: 600;
    margin-bottom: 12px;
}

.section__title {
    margin: 0 0 16px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 3.6vw, 44px);
    letter-spacing: -.02em;
    line-height: 1.1;
}

.section__lead {
    color: var(--muted);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}
.section__lead--light { color: rgba(255, 255, 255, .7); }

/* ============================================================
   Why grid
   ============================================================ */
/* two by two: the cards need the width for the ISO list (standard chip + full certificate name on one line) */
.why-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}
@media (max-width: 640px) {
    .why-grid { grid-template-columns: 1fr; }
}

.why-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 28px 24px;
    text-align: left;
    transition: box-shadow .2s ease, transform .2s ease, background .25s ease;
}
.why-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.why-card__shield {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0a2540 0%, #173a6b 100%);
    color: var(--sky-500);
    margin-bottom: 18px;
}
.why-card__shield svg { width: 26px; height: 26px; }

.why-card h4 {
    margin: 0 0 8px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 17px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.why-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.6;
}
/* ISO card: the standard number as a chip, the certified scope beside it; the chip column keeps the lines aligned */
.why-card__list {
    margin: 0;
    display: grid;
    gap: 10px;
}
.why-card__list div {
    display: grid;
    grid-template-columns: 82px 1fr;
    align-items: center;
    gap: 10px;
}
.why-card__list dt {
    margin: 0;
    padding: 6px 0;
    border-radius: 999px;
    text-align: center;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--sky-700);
    background: color-mix(in srgb, var(--sky-500) 14%, transparent);
}
[data-theme="dark"] .why-card__list dt { color: var(--sky-500); }
.why-card__list dd {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.35;
}

/* ============================================================
   Team
   ============================================================ */
.team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.team-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px 28px;
    box-shadow: var(--shadow-sm);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease, background .25s ease;
}
.team-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: rgba(46, 196, 255, .5);
}
.team-card__icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--sky-500) 0%, var(--accent) 100%);
    color: #04130a;
    margin-bottom: 18px;
}
.team-card__icon svg { width: 26px; height: 26px; }
.team-card h4 {
    margin: 0 0 10px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: -.01em;
}
.team-card p {
    margin: 0;
    color: var(--ink-soft);
    font-size: 14.5px;
    line-height: 1.65;
}

/* ============================================================
   Contact
   ============================================================ */
.contact {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 13fr);
    gap: 60px;
    align-items: stretch;
}
@media (max-width: 900px) {
    .contact { grid-template-columns: 1fr; gap: 40px; }
}

.contact__copy .section__title { margin-bottom: 14px; }
.contact__copy > p {
    color: var(--ink-soft);
    font-size: 16px;
    line-height: 1.65;
}

.contact__info {
    margin-top: 32px;
    display: grid;
    gap: 20px;
}
.contact__info > div {
    border-left: 3px solid var(--sky-500);
    padding-left: 14px;
}
.contact__info span {
    display: block;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.contact__info p {
    margin: 0;
    color: var(--ink);
    font-size: 15px;
    line-height: 1.55;
}
.contact__info a {
    color: var(--sky-500);
    font-weight: 500;
}
.contact__info a:hover { text-decoration: underline; }

.contact__form {
    background: var(--form-bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 32px;
    box-shadow: var(--shadow-md);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-content: stretch;
    gap: 18px;
    transition: background .25s ease, border-color .25s ease;
}
.contact__form label {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-soft);
}
.contact__form label.full { grid-column: 1 / -1; min-height: 0; }
.contact__form label.full textarea { flex: 1; min-height: 110px; resize: vertical; }
/* contact form states: honeypot (never visible), status line, thank-you panel */
.contact__form .contact__hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.contact__status { grid-column: 1 / -1; margin: 0; font-size: 14px; line-height: 1.5; }
.contact__status--error, .contact__status--error li { color: #d14343; }
.contact__status--error ul { margin: 0; padding-left: 18px; }
.validation-message { color: #d14343; font-size: 12.5px; }
.contact__form--done { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.contact__done-title { font-family: 'Space Grotesk', sans-serif; font-size: 24px; margin: 0 0 4px; color: var(--ink); }
.contact__form--done p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.contact__form--done .btn { align-self: flex-start; margin-top: 8px; }
.contact__form span { font-size: 12px; letter-spacing: .04em; }
.contact__form input,
.contact__form select,
.contact__form textarea {
    width: 100%;
    min-width: 0;
    font: inherit;
    font-weight: 400;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: var(--form-input-bg);
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.contact__form input::placeholder,
.contact__form textarea::placeholder { color: var(--muted); }
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus {
    outline: none;
    border-color: var(--sky-500);
    background: var(--card);
    box-shadow: 0 0 0 4px rgba(46, 196, 255, .15);
}
.contact__form button {
    grid-column: 1 / -1;
    justify-content: center;
    margin-top: 6px;
}

@media (max-width: 600px) {
    .contact__form { grid-template-columns: 1fr; padding: 24px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
    background: rgba(6, 20, 39, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .8);
}

.footer__inner {
    display: grid;
    grid-template-columns: 1.6fr 1.2fr 1fr 1fr;
    gap: 40px;
    padding: 60px 24px 40px;
}
@media (max-width: 800px) {
    .footer__inner { grid-template-columns: 1fr; gap: 30px; }
}

.footer__brand {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.footer__brand strong {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    color: #fff;
    display: block;
}
.footer__brand small {
    display: block;
    color: #8fb7e6;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin: 4px 0 12px;
}
.footer__brand p {
    margin: 0;
    color: rgba(255, 255, 255, .65);
    font-size: 14px;
    line-height: 1.6;
    max-width: 360px;
}

.footer__col h5 {
    margin: 0 0 14px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 14px;
    color: #fff;
    letter-spacing: .04em;
}
.footer__col p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .7);
}
.footer__col a { color: var(--sky-500); }
.footer__col a:hover { color: #fff; }
.footer__links {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 8px;
}
.footer__links a { color: rgba(255, 255, 255, .7); font-size: 14px; }
.footer__links a:hover { color: #fff; }

.footer__bar {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: 20px 24px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
    flex-wrap: wrap;
    gap: 10px;
}

.contact__privacy {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 12.5px;
    color: var(--muted);
}
.contact__privacy a,
.footer__bar a { text-decoration: underline; text-underline-offset: 2px; }
.footer__bar a:hover { color: #fff; }

/* long-form legal text (Privacy Policy) */
.prose > * { max-width: 760px; }
.prose__updated { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.prose h2 {
    margin: 40px 0 12px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 22px;
    letter-spacing: -.01em;
    color: var(--ink);
}
.prose h3 { margin: 24px 0 8px; font-size: 16px; color: var(--ink); }
.prose p, .prose li { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li + li { margin-top: 6px; }
.prose a { color: var(--section-eyebrow); text-decoration: underline; text-underline-offset: 2px; }
.prose__facts { display: grid; grid-template-columns: max-content 1fr; gap: 8px 28px; margin: 0 0 14px; font-size: 15.5px; line-height: 1.6; }
.prose__facts dt { color: var(--muted); }
.prose__facts dd { margin: 0; color: var(--ink); }
@media (max-width: 560px) { .prose__facts { grid-template-columns: 1fr; gap: 2px 0; } .prose__facts dd { margin-bottom: 10px; } }

/* ============================================================
   Blazor error UI (kept minimal so it stays out of the way)
   ============================================================ */
.blazor-error-boundary {
    background: #b32121;
    color: white;
    padding: 1rem 1rem 1rem 3.7rem;
    border-radius: 8px;
    margin: 1rem;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================================
   First-load curtain (IntroCurtain.razor + intro.js), modelled on telion-solutions.com.
   Hidden unless App.razor's head script stamped html.intro-play (first page of the session).
   ============================================================ */
.intro { display: none; }
html.intro-play:not(.intro-out) { overflow: hidden; }
html.intro-play .intro {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 22px;
    background: var(--navy-900);
    transition: transform .8s cubic-bezier(.7, 0, .3, 1), border-radius .8s cubic-bezier(.7, 0, .3, 1);
}
html.intro-out .intro {
    transform: translateY(-100%);
    border-radius: 0 0 50% 50% / 0 0 5vw 5vw;
    pointer-events: none;
}
.intro__logo {
    width: clamp(84px, 10vw, 120px);
    height: auto;
    opacity: 0;
    transform: scale(.85);
    animation: intro-logo .7s cubic-bezier(.2, .7, .2, 1) forwards;
}
@keyframes intro-logo { to { opacity: 1; transform: none; } }
.intro__word {
    overflow: hidden;
    padding-bottom: .08em;
    font-family: 'Space Grotesk', sans-serif;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: .04em;
    color: #fff;
    white-space: nowrap;
}
.intro__word span {
    display: inline-block;
    white-space: pre; /* keep the space between "I.C." and "SARAIDARIS" */
    transform: translateY(125%);
    animation: intro-up .7s cubic-bezier(.2, .7, .2, 1) forwards;
    animation-delay: calc(150ms + var(--li, 0) * 30ms);
}
@keyframes intro-up { to { transform: none; } }
.intro__rule {
    width: 0;
    height: 2px;
    background: var(--sky-500);
    animation: intro-rule .8s cubic-bezier(.2, .7, .2, 1) .45s forwards;
}
@keyframes intro-rule { to { width: clamp(120px, 18vw, 240px); } }