/* Meridian OPC — landing page
 *
 * One idea, held throughout: this is a business of precision inside a heavy,
 * physical world. So the photography runs full-bleed and uncropped by
 * ornament, and everything laid over it is quiet — an editorial serif at
 * scale, a tight grotesque for reading, and monospace reserved strictly for
 * real coordinates and reference numbers.
 *
 * No decorative marks. Colour comes from the photographs alone.
 */

:root {
    /* Sampled from the logo: navy #00296c and teal #019196. */
    --navy-900: #00122c;
    --navy-850: #001a3f;
    --navy-800: #002153;
    --navy-700: #00296c;
    --navy-600: #0a3d8f;
    --teal-600: #017278;
    --teal-500: #019196;
    --teal-400: #16b0b2;
    --teal-300: #6ccfcd;

    --ink: var(--navy-900);
    --ink-soft: var(--navy-850);
    --ink-lift: var(--navy-800);
    --paper: #f2f6f8;
    --paper-soft: #e4ecf1;
    --sea: var(--teal-400);

    --on-dark: #e9f1f6;
    --on-dark-mute: #8fa8c1;
    --on-light: #04162e;
    --on-light-mute: #46607c;

    --rule-dark: rgba(233, 241, 246, 0.16);
    --rule-light: rgba(4, 22, 46, 0.14);

    --display: "Instrument Serif", "Times New Roman", serif;
    --sans: "Inter Tight", -apple-system, "Segoe UI", Arial, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

    --gutter: clamp(22px, 4.6vw, 76px);
    --measure: 1560px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    color: var(--on-light);
    background: var(--paper);
    font-family: var(--sans);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 400; }
figure, dl, dd, ol, ul { margin: 0; }

::selection { color: var(--ink); background: var(--sea); }

:focus-visible {
    outline: 2px solid var(--sea);
    outline-offset: 4px;
}

.wrap {
    width: 100%;
    max-width: var(--measure);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: fixed;
    z-index: 200;
    top: 14px;
    left: 14px;
    padding: 12px 20px;
    color: var(--ink);
    background: var(--on-dark);
    font-family: var(--mono);
    font-size: 12px;
    transform: translateY(-200%);
}

.skip-link:focus { transform: none; }

/* ------------------------------------------------------------------ type */

.display {
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: -0.018em;
    line-height: 0.98;
    text-wrap: balance;
}

.display em { font-style: italic; }

.h-hero { font-size: clamp(46px, 7.8vw, 118px); letter-spacing: -0.024em; }
.h-major { font-size: clamp(34px, 4.6vw, 68px); }
.h-section { font-size: clamp(30px, 3.6vw, 52px); }

.tag {
    display: block;
    color: var(--on-light-mute);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lede {
    max-width: 46ch;
    font-size: clamp(17px, 1.35vw, 20px);
    font-weight: 300;
    line-height: 1.55;
}

.body-copy {
    max-width: 62ch;
    color: var(--on-light-mute);
    font-weight: 300;
}

.body-copy + .body-copy { margin-top: 1.15em; }

/* ------------------------------------------------------------------- nav */

.nav {
    position: absolute;
    z-index: 60;
    top: 0;
    right: 0;
    left: 0;
    color: var(--on-dark);
}

.nav-inner {
    display: flex;
    min-height: 96px;
    align-items: center;
    gap: 32px;
}

.brand { margin-right: auto; }
.brand img { height: 30px; width: auto; filter: brightness(0) invert(1); }

.nav-menu {
    display: flex;
    align-items: center;
    gap: 38px;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.nav-menu a { position: relative; padding: 6px 0; opacity: 0.78; transition: opacity 0.3s ease; }
.nav-menu a:hover { opacity: 1; }

.nav-menu a::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-menu a:hover::after,
.nav-menu a.is-active::after { width: 100%; }

.nav-portal {
    padding: 11px 20px;
    border: 1px solid rgba(233, 241, 246, 0.32);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.08em;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.nav-portal:hover { color: var(--ink); background: var(--on-dark); border-color: var(--on-dark); }

.nav-menu .nav-portal { display: none; }

.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(233, 241, 246, 0.32);
    background: none;
    cursor: pointer;
}

.nav-toggle span:not(.sr-only) {
    display: block;
    width: 18px;
    height: 1px;
    margin: 4px auto;
    background: currentColor;
}

/* ------------------------------------------------------------------ hero */

.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 760px;
    height: 100svh;
    max-height: 1100px;
    overflow: hidden;
    color: var(--on-dark);
    background: var(--ink);
}

.hero-media { position: absolute; inset: 0; }

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 46%;
    filter: saturate(0.85) contrast(1.1) brightness(0.94);
}

.hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to top, rgba(0, 18, 44, 0.88) 0%, rgba(0, 18, 44, 0.5) 30%, rgba(0, 18, 44, 0.12) 62%, rgba(0, 18, 44, 0.42) 100%),
        linear-gradient(to right, rgba(0, 18, 44, 0.72) 0%, rgba(0, 18, 44, 0.1) 58%, rgba(0, 18, 44, 0) 100%);
}

.hero-body { position: relative; z-index: 2; width: 100%; margin-top: auto; padding-bottom: clamp(46px, 6vw, 88px); }

.hero .tag { margin-bottom: clamp(20px, 2.4vw, 34px); color: rgba(233, 241, 246, 0.62); }

.hero h1 { max-width: 15ch; margin-bottom: clamp(24px, 2.6vw, 40px); }

.hero .lede { color: rgba(233, 241, 246, 0.8); }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(30px, 3.2vw, 46px);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 17px 34px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: color 0.35s ease, background 0.35s ease, border-color 0.35s ease;
}

.btn-solid { color: var(--ink); background: var(--on-dark); border-color: var(--on-dark); }
.btn-solid:hover { color: #ffffff; background: var(--teal-500); border-color: var(--teal-500); }

.btn-line { border-color: rgba(233, 241, 246, 0.34); color: var(--on-dark); }
.btn-line:hover { border-color: var(--on-dark); background: rgba(233, 241, 246, 0.08); }

.btn-dark { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.btn-dark:hover { background: var(--ink-lift); border-color: var(--ink-lift); }

/* Single quiet nod to the company's namesake, as data rather than ornament. */
.hero-meta {
    position: relative;
    z-index: 2;
    border-top: 1px solid rgba(233, 241, 246, 0.18);
}

.hero-meta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 30px;
    padding: 17px 0;
    color: rgba(233, 241, 246, 0.6);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------- sections */

.band { padding: clamp(88px, 11vw, 176px) 0; }
.band-dark { color: var(--on-dark); background: var(--ink); }
.band-soft { background: var(--paper-soft); }

.band-dark .tag { color: var(--on-dark-mute); }
.band-dark .body-copy { color: var(--on-dark-mute); }

.section-mark {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
    margin-bottom: clamp(48px, 6vw, 88px);
    border-bottom: 1px solid var(--rule-light);
}

.band-dark .section-mark { border-bottom-color: var(--rule-dark); }

/* ------------------------------------------------------------- statement */

.statement { padding: clamp(96px, 12vw, 190px) 0; }

.statement-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(40px, 6vw, 110px);
    align-items: start;
}

.statement h2 { margin-bottom: 0; }
.statement-aside { padding-top: 10px; }

/* -------------------------------------------------------------- services */

.svc-list { border-top: 1px solid var(--rule-dark); }

.svc { position: relative; border-bottom: 1px solid var(--rule-dark); }

.svc-head {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1.05fr) minmax(0, 1.1fr) 60px;
    align-items: baseline;
    width: 100%;
    padding: clamp(28px, 3vw, 44px) 0;
    border: 0;
    background: none;
    text-align: left;
    cursor: pointer;
}

.svc::before {
    content: "";
    position: absolute;
    inset: 0 calc(var(--gutter) * -0.5);
    background: rgba(233, 241, 246, 0.045);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc:hover::before,
.svc:has(.svc-head:focus-visible)::before { opacity: 1; }

.svc-head > * { position: relative; }

.svc-no {
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.1em;
}

.svc-name {
    font-family: var(--display);
    font-size: clamp(24px, 2.5vw, 38px);
    letter-spacing: -0.015em;
    line-height: 1.06;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc:hover .svc-name { transform: translateX(12px); }

.svc-note {
    max-width: 46ch;
    color: var(--on-dark-mute);
    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;
}

.svc-go {
    justify-self: end;
    color: var(--on-dark-mute);
    font-size: 20px;
    line-height: 1;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.svc:hover .svc-go,
.svc-head:focus-visible .svc-go { color: var(--sea); opacity: 1; transform: none; }

/* ----------------------------------------------------------------- ports */

.ports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 0 clamp(24px, 3vw, 56px);
    border-top: 1px solid var(--rule-light);
}

.port {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 0;
    border-bottom: 1px solid var(--rule-light);
}

.port-name { font-size: 16px; font-weight: 400; }

.port-coord {
    color: var(--on-light-mute);
    font-family: var(--mono);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.ports-note { margin-top: 28px; max-width: 60ch; color: var(--on-light-mute); font-size: 14px; font-weight: 300; }

/* --------------------------------------------------------------- process */

.process { position: relative; overflow: hidden; color: var(--on-dark); background: var(--ink); }

.process-media { position: absolute; inset: 0; }

.process-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.3) contrast(1.05) brightness(0.62);
    opacity: 0.42;
}

.process-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, var(--ink) 6%, rgba(0, 18, 44, 0.72) 52%, rgba(0, 18, 44, 0.44) 100%);
}

.process > .wrap { position: relative; z-index: 1; }

.steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--rule-dark);
}

.step { padding: clamp(28px, 3vw, 42px) clamp(20px, 2vw, 34px) 8px 0; }
.step + .step { padding-left: clamp(20px, 2vw, 34px); border-left: 1px solid var(--rule-dark); }

.step-no {
    display: block;
    margin-bottom: 18px;
    font-family: var(--display);
    font-size: clamp(38px, 4vw, 60px);
    line-height: 1;
    color: rgba(233, 241, 246, 0.28);
}

.step h3 { margin-bottom: 10px; font-family: var(--sans); font-size: 17px; font-weight: 500; }
.step p { color: var(--on-dark-mute); font-size: 14.5px; font-weight: 300; line-height: 1.6; }

/* ----------------------------------------------------------------- about */

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(40px, 5.5vw, 96px);
    align-items: center;
}

.about-figure { position: relative; width: 100%; overflow: hidden; aspect-ratio: 4 / 3; background: var(--paper-soft); }

.about-figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.82) contrast(1.04);
    transform: scale(1.06);
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.about-figure.in-view img { transform: scale(1); }

.about-figure figcaption {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 46px 22px 18px;
    background: linear-gradient(to top, rgba(0, 18, 44, 0.8), rgba(0, 18, 44, 0));
    color: rgba(233, 241, 246, 0.82);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about h2 { margin-bottom: clamp(22px, 2.4vw, 34px); }

.principles { margin: clamp(34px, 4vw, 52px) 0 0; }

.principle {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr);
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--rule-light);
}

.principle dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-light-mute); }
.principle dd { margin: 0; font-size: 15.5px; font-weight: 300; }

/* --------------------------------------------------------------- contact */

.contact { color: var(--on-dark); background: var(--ink); }

.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(44px, 6vw, 110px);
    align-items: start;
}

.contact h2 { margin-bottom: 24px; }

.contact-direct { margin-top: clamp(34px, 4vw, 52px); padding-top: 24px; border-top: 1px solid var(--rule-dark); }
.contact-direct .tag { margin-bottom: 12px; }

.contact-direct a {
    font-family: var(--display);
    font-size: clamp(21px, 2vw, 29px);
    border-bottom: 1px solid rgba(233, 241, 246, 0.3);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.contact-direct a:hover { color: var(--sea); border-color: var(--sea); }

.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 26px; }

.field { margin-bottom: 26px; }

.field label {
    display: block;
    margin-bottom: 9px;
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--rule-dark);
    border-radius: 0;
    background: none;
    color: var(--on-dark);
    font-size: 16px;
    font-weight: 300;
    transition: border-color 0.3s ease;
}

.field select { padding-right: 20px; }
.field select option { color: var(--on-light); background: var(--paper); }
.field textarea { min-height: 104px; resize: vertical; }

.field input:focus,
.field select:focus,
.field textarea:focus { border-bottom-color: var(--sea); outline: none; }

.field input.is-invalid,
.field select.is-invalid,
.field textarea.is-invalid { border-bottom-color: #c4705c; }

.field-error { display: none; margin-top: 7px; color: #d08a76; font-family: var(--mono); font-size: 11px; }
.is-invalid ~ .field-error { display: block; }

.honey { position: absolute; left: -9999px; }

.submit {
    width: 100%;
    margin-top: 6px;
    padding: 18px 34px;
    border: 0;
    color: var(--ink);
    background: var(--on-dark);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.35s ease;
}

.submit:hover:not(:disabled) { color: #ffffff; background: var(--teal-500); }
.submit:disabled { cursor: progress; opacity: 0.6; }

.form-note { margin-top: 18px; color: var(--on-dark-mute); font-size: 13px; font-weight: 300; line-height: 1.55; }

.form-done {
    display: none;
    padding: 18px 20px;
    margin-bottom: 26px;
    border-left: 2px solid var(--sea);
    background: rgba(127, 178, 166, 0.1);
    font-size: 15px;
}

.form-done.is-shown { display: block; }
.form-done strong { display: block; font-weight: 500; }
.form-done span { color: var(--on-dark-mute); font-size: 14px; }

/* ---------------------------------------------------------------- footer */

.footer { padding-top: clamp(64px, 7vw, 104px); color: var(--on-dark); background: var(--ink-soft); }

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
    gap: 44px 32px;
    padding-bottom: clamp(48px, 5vw, 72px);
}

.footer-brand img { height: 30px; margin-bottom: 22px; filter: brightness(0) invert(1); }
.footer-brand p { max-width: 32ch; color: var(--on-dark-mute); font-size: 14px; font-weight: 300; line-height: 1.65; }

.footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14.5px; font-weight: 300; }
.footer-col strong { margin-bottom: 6px; color: var(--on-dark); font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; }
.footer-col a { color: var(--on-dark-mute); transition: color 0.3s ease; }
.footer-col a:hover { color: var(--on-dark); }

.footer-legal { padding: 26px 0; border-top: 1px solid var(--rule-dark); color: var(--on-dark-mute); font-size: 12.5px; font-weight: 300; line-height: 1.7; }
.footer-legal p { max-width: 92ch; }
.footer-legal p + p { margin-top: 12px; }
.footer-legal a { border-bottom: 1px solid var(--rule-dark); }
.footer-legal a:hover { color: var(--on-dark); }

.footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 22px 0;
    border-top: 1px solid var(--rule-dark);
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
}

/* ---------------------------------------------------------------- motion */

.js .rise {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .rise.in-view { opacity: 1; transform: none; }

.js .rise-1 { transition-delay: 0.09s; }
.js .rise-2 { transition-delay: 0.18s; }
.js .rise-3 { transition-delay: 0.27s; }

/* Hero opening: the photograph settles while each line of the headline
   clears its own mask. */
.line { display: block; overflow: hidden; }
.line > span { display: block; }

.js .line > span {
    transform: translateY(105%);
    transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .hero-media img {
    transform: scale(1.09);
    transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.js .hero .tag,
.js .hero .lede,
.js .hero-actions,
.js .hero-meta,
.js .nav {
    opacity: 0;
    transition: opacity 1.1s ease;
}

body.is-ready .hero-media img { transform: scale(1); }
body.is-ready .line > span { transform: none; }
body.is-ready .hero .tag { opacity: 1; transition-delay: 0.25s; }
body.is-ready .nav { opacity: 1; transition-delay: 0.45s; }
body.is-ready .hero .lede { opacity: 1; transition-delay: 0.75s; }
body.is-ready .hero-actions { opacity: 1; transition-delay: 0.9s; }
body.is-ready .hero-meta { opacity: 1; transition-delay: 1.05s; }

body.is-ready .line:nth-of-type(1) > span { transition-delay: 0.35s; }
body.is-ready .line:nth-of-type(2) > span { transition-delay: 0.45s; }
body.is-ready .line:nth-of-type(3) > span { transition-delay: 0.55s; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
    .statement-grid,
    .about-grid,
    .contact-grid { grid-template-columns: 1fr; }
    .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .step:nth-child(odd) { padding-left: 0; border-left: 0; }
    .step:nth-child(3) { border-top: 1px solid var(--rule-dark); }
    .step:nth-child(4) { border-top: 1px solid var(--rule-dark); }
    .svc-head { grid-template-columns: 62px minmax(0, 1fr) 40px; }
    .svc-note { display: none; }
    .svc-points, .svc-ask { margin-left: 62px; }
}

@media (max-width: 860px) {
    body { font-size: 16px; }

    .nav-toggle { display: block; }

    .nav-menu {
        position: fixed;
        z-index: 90;
        inset: 96px 0 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 12px var(--gutter) 40px;
        background: var(--ink);
        font-size: 22px;
        overflow-y: auto;
    }

    .nav-menu.is-open { display: flex; }
    .nav-menu a { width: 100%; padding: 20px 0; border-bottom: 1px solid var(--rule-dark); opacity: 1; }
    .nav-menu a::after { display: none; }

    .nav-inner > .nav-portal { display: none; }
    .nav-menu .nav-portal { display: inline-flex; margin-top: 26px; font-size: 12px; }

    .hero { min-height: 620px; }
    .hero h1 { max-width: none; }

    /* The copy block reaches much higher on a narrow screen, so the scrim has
       to follow it up. */
    .hero-media::after {
        background: linear-gradient(to top, rgba(0, 18, 44, 0.96) 0%, rgba(0, 18, 44, 0.86) 42%, rgba(0, 18, 44, 0.5) 72%, rgba(0, 18, 44, 0.62) 100%);
    }
    .hero-meta-inner { font-size: 10px; letter-spacing: 0.09em; }

    .steps { grid-template-columns: 1fr; }
    .step,
    .step + .step { padding-left: 0; padding-right: 0; border-left: 0; border-top: 1px solid var(--rule-dark); }
    .step:first-child { border-top: 0; }

    .form-row { grid-template-columns: 1fr; gap: 0; }
    .principle { grid-template-columns: 1fr; gap: 4px; }
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
    .svc-head { grid-template-columns: 46px minmax(0, 1fr); }
    .svc-go { display: none; }
    .svc-points, .svc-ask { margin-left: 0; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .js .rise,
    .js .hero .tag,
    .js .hero .lede,
    .js .hero-actions,
    .js .hero-meta,
    .js .nav { opacity: 1; transform: none; }
    .js .line > span { transform: none; }
    .js .hero-media img { transform: none; }
    .about-figure img { transform: none; }
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ========================================================= brand treatment
 *
 * The photographs are graded toward the logo navy so they read as part of the
 * identity rather than as stock dropped into a layout. The grade is a blend
 * layer over the untouched file, so the licensed originals stay intact.
 */

/* No position here: every graded element is already positioned, and a blanket
   `relative` overrode .hero-media's `absolute` and collapsed the full-bleed. */
.graded::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--navy-700);
    mix-blend-mode: color;
    opacity: 0.4;
    pointer-events: none;
}

.hero-media::after { z-index: 2; }

/* A fine grain keeps the large dark fields from banding on wide screens. */
.grain::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.5;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.band-dark, .process, .contact, .footer { position: relative; }
.band-dark > .wrap, .contact > .wrap, .footer > .wrap { position: relative; z-index: 2; }

/* ------------------------------------------------------------ sticky nav */

.nav { position: fixed; transition: background 0.5s ease, backdrop-filter 0.5s ease, box-shadow 0.5s ease; }

.nav.is-stuck {
    background: rgba(0, 18, 44, 0.82);
    backdrop-filter: blur(14px) saturate(1.2);
    box-shadow: 0 1px 0 var(--rule-dark);
}

.nav.is-stuck .nav-inner { min-height: 74px; }
.nav-inner { transition: min-height 0.45s cubic-bezier(0.22, 1, 0.36, 1); }

/* ------------------------------------------------------ services, expanded */

.svc-detail {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
    opacity: 0;
}

.svc.is-open .svc-detail { grid-template-rows: 1fr; opacity: 1; }

.svc-detail-inner { overflow: hidden; }

.svc-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0 6px;
    margin: 0 0 0 86px;
    list-style: none;
}

.svc-points li {
    padding: 8px 15px;
    border: 1px solid var(--rule-dark);
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.05em;
}

.svc-ask {
    margin-left: 86px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 13px 24px;
    border: 0;
    color: #ffffff;
    background: var(--teal-500);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.svc-ask:hover { background: var(--teal-400); }

.svc-go { transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease; }
.svc.is-open .svc-go { color: var(--teal-400); opacity: 1; transform: rotate(90deg); }
.svc.is-open .svc-name { transform: translateX(12px); color: var(--on-dark); }

/* ------------------------------------------------------------- port map */

.network { color: var(--on-dark); background: var(--navy-900); }







.isle {
    fill: #06326f;
    stroke: rgba(125, 195, 235, 0.45);
    stroke-width: 1;
    stroke-linejoin: round;
    transition: fill 0.6s ease;
}

.map-svg:hover .isle { fill: #073b83; }

.pin { cursor: pointer; }

/* Belt and braces: nothing inside the drawing should ever paint a focus ring
   around its bounding box, which for a pin group spans the halo and label. */
.map-svg g:focus,
.map-svg g:focus-visible { outline: none; }

.pin-halo {
    fill: var(--teal-400);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.4);
    transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-dot {
    fill: #a8d6e8;
    stroke: var(--navy-900);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
    /* These must live on the base rule, not only on .is-lit. transform-box is
       a discrete property: dropping the class reverts it to the SVG viewport
       immediately while `transform` is still animating out, so the circle
       scales about the viewport centre and appears to leap. */
    transform-box: fill-box;
    transform-origin: center;
    transition: fill 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pin-major .pin-dot { fill: var(--teal-400); }

/* White rather than teal: the halo has to read over the navy sea in the world
   view and over the teal landmass when zoomed. */
.pin.is-lit .pin-halo { fill: #ffffff; opacity: 0.24; transform: scale(1); }
.pin.is-lit .pin-dot { fill: #ffffff; transform: scale(1.35); }

.pin-label {
    /* No font-size or r here: CSS geometry and font properties override the
       SVG attributes, and the script owns those so markers hold a constant
       on-screen size as the view zooms. */
    fill: var(--on-dark);
    stroke: var(--navy-900);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke-width: 4px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pin.is-lit .pin-label { opacity: 1; }

.js .pin { opacity: 0; transition: opacity 0.5s ease; }
.map-panel.in-view .pin { opacity: 1; }

.port-rows { border-top: 1px solid var(--rule-dark); }

.port-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 16px;
    width: 100%;
    padding: 14px 0;
    border: 0;
    border-bottom: 1px solid var(--rule-dark);
    background: none;
    text-align: left;
    cursor: pointer;
    transition: padding-left 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.port-row:hover, .port-row.is-lit { padding-left: 12px; }

.port-row .name { color: var(--on-dark); font-size: 16px; transition: color 0.3s ease; }
.port-row .kind { display: block; margin-top: 2px; color: var(--on-dark-mute); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; }
.port-row .coord { color: var(--on-dark-mute); font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; transition: color 0.3s ease; }

.port-row:hover .name, .port-row.is-lit .name,
.port-row:hover .coord, .port-row.is-lit .coord { color: var(--teal-300); }

.map-note { margin-top: 26px; max-width: 62ch; color: var(--on-dark-mute); font-size: 13.5px; font-weight: 300; }



@media (max-width: 860px) {
    .svc-points li { font-size: 11px; padding: 7px 12px; }
    .nav.is-stuck .nav-inner { min-height: 68px; }
}

/* ------------------------------------------------------ international / domestic

   Both scopes are true of the business: every port shown is a Bureau of Customs
   port of entry, and the same team moves cargo onward domestically. The switch
   changes emphasis and copy rather than hiding ports, because none of them are
   exclusive to one scope.
*/

.scope-switch {
    display: inline-flex;
    gap: 0;
    margin-bottom: clamp(32px, 4vw, 54px);
    border: 1px solid var(--rule-dark);
}

.scope-btn {
    padding: 12px 26px;
    border: 0;
    background: none;
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 11.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.35s ease, background 0.35s ease;
}

.scope-btn + .scope-btn { border-left: 1px solid var(--rule-dark); }
.scope-btn:hover { color: var(--on-dark); }
.scope-btn.is-on { color: #ffffff; background: var(--teal-500); }

.scope-copy[hidden] { display: none; }

/* Ring marks the gateways that also carry international air freight. */
.pin-ring {
    fill: none;
    stroke: var(--teal-300);
    stroke-width: 1.6;
    stroke-dasharray: 3 4;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.network[data-scope="international"] .pin-ring { opacity: 0.75; }

/* Domestic view levels the emphasis: no gateway is privileged inland. */
.network[data-scope="domestic"] .pin-major .pin-dot { fill: #a8d6e8; }
.network[data-scope="domestic"] .pin-dot { transition: fill 0.45s ease, transform 0.45s ease; }
.network[data-scope="domestic"] .mode-air { opacity: 0.35; }

.mode {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 7px;
    border: 1px solid var(--rule-dark);
    color: var(--on-dark-mute);
    font-size: 9.5px;
    letter-spacing: 0.1em;
    transition: opacity 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.mode-air { border-color: rgba(108, 207, 205, 0.5); color: var(--teal-300); }
.mode-kind { color: var(--on-dark-mute); opacity: 0.7; }

@media (max-width: 520px) {
    .scope-switch { width: 100%; }
    .scope-btn { flex: 1; padding: 12px 10px; font-size: 10.5px; letter-spacing: 0.08em; }
    .mode { font-size: 9px; padding: 2px 5px; margin-right: 5px; }
}

/* ================================================================ world map
 *
 * One drawing, one projection. The scope switch moves the SVG viewBox between
 * the whole world and the archipelago, so the two views are the same map at
 * different magnifications rather than two separate graphics.
 */

.net-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.net-head .scope-switch { margin-bottom: 0; }
.net-head h2 { margin-bottom: 16px; }
.net-head .body-copy { color: var(--on-dark-mute); max-width: 66ch; }
.scope-copy[hidden] { display: none; }

.map-panel {
    position: relative;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    border: 1px solid var(--rule-dark);
    background:
        radial-gradient(120% 90% at 50% 40%, rgba(10, 61, 143, 0.35) 0%, rgba(0, 18, 44, 0) 70%),
        var(--navy-900);
}

.map-svg { display: block; width: 100%; height: 100%; }

.land {
    fill: #072a5c;
    stroke: rgba(125, 195, 235, 0.28);
    stroke-width: 1.2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: fill 0.6s ease, opacity 0.9s ease;
}

.land-home { fill: var(--teal-600); stroke: rgba(108, 207, 205, 0.75); }

/* Neighbours are simplified for the world view, so let them recede rather than
   show their facets when the map zooms to the archipelago. */
.world .land { transition: opacity 0.9s ease; }
.network[data-scope="domestic"] .world .land { opacity: 0.42; }

/* Markets highlight once config/ports.php names them. */
.land-market { fill: #0a4a9c; stroke: rgba(160, 215, 245, 0.5); }

.map-hint {
    position: absolute;
    right: 18px;
    bottom: 14px;
    color: var(--on-dark-mute);
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    pointer-events: none;
}

.map-hint[hidden] { display: none; }

/* Pins are re-sized by script as the view zooms, so they stay legible at both
   magnifications. Labels only earn their space up close. */
.pin-label { opacity: 0; }
.network[data-scope="domestic"] .pin.is-lit .pin-label,
.network[data-scope="domestic"] .pin-major .pin-label { opacity: 1; }
.network[data-scope="international"] .pin-label { opacity: 0; }

.network[data-scope="international"] .pin-ring { opacity: 0; }
.network[data-scope="domestic"] .pin-ring { opacity: 0.7; }

.port-rows {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0 clamp(24px, 3vw, 56px);
    margin-top: clamp(34px, 4vw, 56px);
    border-top: 0;
}

.port-row { border-top: 1px solid var(--rule-dark); border-bottom: 0; }

@media (max-width: 900px) {
    .net-head { grid-template-columns: 1fr; }
    .map-panel { aspect-ratio: 3 / 2; }
}

@media (max-width: 900px) {
    .hub-label { display: none; }
}

/* ----------------------------------------------------------------- lanes
 *
 * Routes are drawn from plain coordinates in config/ports.php, so the lanes
 * can be corrected without touching geometry. Sea runs low and solid; air
 * bows higher and dotted, which keeps both legible where they share an origin.
 */

.lane {
    fill: none;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    opacity: 0;
    transition: opacity 0.8s ease, stroke 0.4s ease;
    transition-delay: calc(var(--i) * 0.045s);
}

/* Base: the route itself, always legible. */
.lane-base.lane-sea { stroke: rgba(140, 200, 240, 0.42); stroke-width: 1.4; }
.lane-base.lane-air { stroke: rgba(108, 207, 205, 0.4); stroke-width: 1.2; stroke-dasharray: 6 8; }

/* Flow: the traffic running along it. */
.lane-flow { stroke-width: 2.4; }
.flow-sea { stroke: rgba(190, 228, 255, 0.95); stroke-dasharray: 2 46; }
.flow-air { stroke: var(--teal-300); stroke-dasharray: 2 34; }

.map-panel.in-view .lane { opacity: 1; }

/* Traffic flows along each route; the dash pattern carries the motion so
   nothing per-frame runs on the main thread. */
@keyframes lane-run { to { stroke-dashoffset: -480; } }

.map-panel.in-view .flow-sea {
    animation: lane-run 11s linear infinite;
    animation-delay: calc(var(--i) * -0.9s);
}

.map-panel.in-view .flow-air {
    animation: lane-run 7s linear infinite;
    animation-delay: calc(var(--i) * -0.65s);
}

.hub {
    opacity: 0;
    transition: opacity 0.7s ease;
    transition-delay: calc(0.3s + var(--i) * 0.045s);
}

.network[data-scope="international"] .map-panel.in-view .hub { opacity: 1; }
.network[data-scope="domestic"] .hub { opacity: 0; transition-delay: 0s; }

.hub-dot {
    fill: var(--navy-900);
    stroke: rgba(160, 215, 245, 0.85);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.hub-air .hub-dot { stroke: var(--teal-300); }

.hub-label {
    fill: rgba(200, 224, 240, 0.85);
    font-family: var(--mono);
    letter-spacing: 0.04em;
    paint-order: stroke;
    stroke: var(--navy-900);
    stroke-width: 3px;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
}

.map-legend {
    position: absolute;
    top: 16px;
    left: 18px;
    display: flex;
    gap: 20px;
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--on-dark-mute);
    pointer-events: none;
}

.map-legend[hidden] { display: none; }

.legend-item { display: inline-flex; align-items: center; gap: 8px; }

.legend-item::before {
    content: "";
    width: 22px;
    height: 0;
    border-top: 1.5px solid currentColor;
}

.legend-sea { color: rgba(140, 200, 240, 0.9); }
.legend-air { color: var(--teal-300); }
.legend-air::before { border-top-style: dashed; }

@media (max-width: 560px) {
    .map-legend { gap: 12px; font-size: 9px; letter-spacing: 0.08em; }
    .legend-item::before { width: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .map-panel.in-view .flow-sea,
    .map-panel.in-view .flow-air { animation: none; }
    .lane-flow { opacity: 0; }
}


/* ------------------------------------------------ marker scale from one var
 *
 * --mk is user-units-per-CSS-pixel, published by the script. Everything below
 * is quoted in the pixels it should occupy on screen, so markers hold their
 * size at either magnification and on any panel width -- without the script
 * touching a single element.
 */

/* The zoom: one composited transform, not a repainted viewBox. */
.zoomer {
    transform-box: view-box;
    transform-origin: 0 0;
    transition: transform 1.15s cubic-bezier(0.62, 0, 0.2, 1);
    will-change: transform;
}

.network[data-scope="domestic"] .zoomer { transform: var(--zoom); }

/* --upp is world-units-per-CSS-pixel, published once by the script. Dividing
   by the zoom scale keeps markers the same on-screen size once magnified. */
.map-panel { --upp: 3; }
.map-svg { --mk: var(--upp); }
.network[data-scope="domestic"] .map-svg { --mk: calc(var(--upp) / var(--zoom-scale) * 1.35); }

.pin-dot, .pin-major .pin-dot, .pin-halo, .pin-ring, .hub-dot {
    transition: r 1.15s cubic-bezier(0.62, 0, 0.2, 1), fill 0.3s ease;
}

.pin-label, .hub-label {
    transition: font-size 1.15s cubic-bezier(0.62, 0, 0.2, 1),
                transform 1.15s cubic-bezier(0.62, 0, 0.2, 1),
                opacity 0.3s ease;
}

.pin-dot { r: calc(var(--mk) * 3.6px); }
.pin-major .pin-dot { r: calc(var(--mk) * 5px); }
.pin-halo { r: calc(var(--mk) * 13px); }
.pin-ring { r: calc(var(--mk) * 10px); }
.hub-dot { r: calc(var(--mk) * 3.2px); }

.pin-label {
    font-size: calc(var(--mk) * 11px);
    transform: translateX(calc(var(--mk) * 9px));
}

.hub-label {
    font-size: calc(var(--mk) * 9.5px);
    transform: translate(calc(var(--mk) * 7px), calc(var(--mk) * 3.5px));
}

.hub-label[data-side="end"] {
    transform: translate(calc(var(--mk) * -7px), calc(var(--mk) * 3.5px));
}

/* Park the flowing dashes while the view is zooming. */
.network.is-zooming .lane-flow { animation-play-state: paused; }
.network.is-zooming .land { transition: none; }

/* --------------------------------------------------------- domestic legs */

.dom-sea { stroke: rgba(165, 214, 245, 0.72); stroke-width: 1.7; }
.dom-road { stroke: rgba(150, 226, 214, 0.66); stroke-width: 1.6; stroke-dasharray: 7 6; }

.domflow-sea { stroke: rgba(200, 232, 255, 0.95); stroke-dasharray: 2 30; }
.domflow-road { stroke: var(--teal-300); stroke-dasharray: 2 22; }

.map-panel.in-view .domflow-sea {
    animation: lane-run 8s linear infinite;
    animation-delay: calc(var(--i) * -0.5s);
}

.map-panel.in-view .domflow-road {
    animation: lane-run 6s linear infinite;
    animation-delay: calc(var(--i) * -0.35s);
}

/* Each scope shows only its own network. */
.lanes-dom { opacity: 0; transition: opacity 0.6s ease; }
.lanes-intl { transition: opacity 0.6s ease; }

.network[data-scope="domestic"] .lanes-dom { opacity: 1; }
.network[data-scope="domestic"] .lanes-intl { opacity: 0; }
.network[data-scope="international"] .lanes-dom { opacity: 0; }

.legend-road { color: var(--teal-300); }
.legend-road::before { border-top-style: dashed; }

/* ------------------------------------------------------------- vessels
 *
 * A hull on each sea leg, a delta on each air leg, a box body on each road
 * leg, riding the very path the lane is drawn from via offset-path. Behind
 * @supports so unsupported browsers show the lanes alone rather than a heap
 * of glyphs stacked at the origin.
 */

.vessel { display: none; }

@supports (offset-path: path("M0,0 L1,1")) {
    .vessel {
        display: block;
        offset-path: var(--path);
        offset-rotate: auto;
        offset-distance: 0%;
        animation: sail 26s linear infinite;
        animation-delay: calc(var(--i) * -1.9s);
    }

    .vessel-air { animation-duration: 17s; }
    .vessel-road { animation-duration: 13s; }
    .lanes-dom .vessel-sea { animation-duration: 15s; }
}

@keyframes sail {
    from { offset-distance: 0%; }
    to { offset-distance: 100%; }
}

.craft {
    transform-box: fill-box;
    transform-origin: center;
    /* --mk cancels the viewBox scale, so this multiplier is very nearly the
       glyph's width in CSS pixels: a ~24-unit hull lands around 18px. */
    transform: scale(calc(var(--mk) * 0.78));
    stroke: var(--navy-900);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    paint-order: stroke;
    transition: transform 1.15s cubic-bezier(0.62, 0, 0.2, 1);
}

.craft-plane { transform: scale(calc(var(--mk) * 0.62)); }
.craft-boat { transform: scale(calc(var(--mk) * 0.85)); }

.vessel-sea .craft { fill: #dcefff; }
.vessel-air .craft { fill: var(--teal-300); }
.vessel-road .craft { fill: #b9ead9; }

/* Only the scope on screen animates. */
.network[data-scope="domestic"] .lanes-intl .vessel,
.network[data-scope="international"] .lanes-dom .vessel,
.network.is-zooming .vessel { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .vessel { display: none; }
}