/* Narrow Sea — marketing pages (builder A). Reusable patterns use generic m-* / card-- names and are shared
   with the other marketing builders; page-only rules are namespaced (.p-home, .p-solutions, .p-zones).
   Tokens come from ns.css; nothing here redefines them. */

/* Google's Inter subsets omit ↔ ● used verbatim in the copy; this tiny Inter subset (OFL) fills just those code points. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-glyphs.woff2") format("woff2"); unicode-range: U+2194, U+25CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-glyphs.woff2") format("woff2"); unicode-range: U+2194, U+25CF; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-glyphs.woff2") format("woff2"); unicode-range: U+2194, U+25CF; }

/* ---------- section rhythm: 72px desktop / 48px mobile, 32px between blocks ---------- */
.m-sec { padding-top: 72px; padding-bottom: 72px; }
.m-sec > .wrap { display: flex; flex-direction: column; gap: 32px; }
.m-sec > .wrap > .btn, .m-sec > .wrap > .m-actions { align-self: flex-start; }
.m-sec .body { color: var(--ink); }
.m-sec.sec--navy .body { color: var(--mist); }
@media (max-width: 600px) { .m-sec { padding-top: 48px; padding-bottom: 48px; } }

/* section heading: small label, 12px, serif h2 */
.m-head { display: flex; flex-direction: column; gap: 26px; }
.sec--navy .m-head .kicker, .on-navy .m-head .kicker { color: var(--gold); }
@media (max-width: 600px) { .m-head { gap: 24px; } .m-head .h2, .m-sec .h2 { font-size: 36px; } }

/* ---------- copy cards (label · serif title · text) ---------- */
.m-cards { align-items: start; }
ol.m-cards, ul.m-cards { list-style: none; margin: 0; padding: 0; }
.card--copy { gap: 0; min-height: 210px; }
.card--copy .card__num { font-size: 10px; margin-bottom: 16px; }
.card--copy .card__title { font-size: 30px; }
.card--copy .card__text { margin-top: 32px; }
.card--ocean { background: var(--ocean); border-color: var(--ocean); color: var(--white); }
.card--ocean .card__title { color: var(--white); }
.card--ocean .card__text, .card--ocean .card__num { color: var(--mist); }
@media (max-width: 600px) { .card--copy { min-height: 210px; } .card--copy .card__title { font-size: 30px; } }

/* ---------- cinematic hero (full-bleed photo + left-to-right navy scrim) ---------- */
.m-hero { position: relative; background: var(--navy); color: var(--white); min-height: 720px; overflow: hidden; isolation: isolate; }
.m-hero__media, .m-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.m-hero__media img { object-fit: cover; object-position: center; }
.m-hero__media { z-index: -2; }
.m-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(7,28,43,.96) 0%, rgba(7,28,43,.19) 100%); }
.m-hero__in { padding-top: 96px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 28px; }
.m-hero__msg { max-width: 720px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.m-hero .display { color: var(--white); }
.m-hero .lead { color: var(--white); }
.m-hero .body { color: var(--mist); }
.m-hero__fine { font: 400 10px/1.6 var(--sans); color: var(--mist); }
.m-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
@media (max-width: 600px) {
  .m-hero { min-height: 0; }
  .m-hero__in { padding-top: 64px; }
  .m-hero .display { font-size: 52px; }
}

/* ---------- page introduction with optional photograph ---------- */
.m-intro { background: var(--navy); color: var(--mist); }
.m-intro__in { padding-top: 64px; padding-bottom: 64px; display: grid; grid-template-columns: minmax(0, 690px); gap: 48px; align-items: start; }
.m-intro__in--photo { grid-template-columns: minmax(0, 690px) minmax(0, 494px); justify-content: start; }
.m-intro__copy { display: flex; flex-direction: column; align-items: flex-start; }
.m-intro__label { font: 400 11px/1.6 var(--sans); color: var(--gold); margin-bottom: 24px; }
.m-intro .h1 { color: var(--white); line-height: 1.05; margin-bottom: 63px; }
.m-intro__lead { font: 400 17px/1.6 var(--sans); color: var(--mist); margin-bottom: 22px; }
.m-intro__fine { font: 400 10px/1.6 var(--sans); color: var(--mist); }
.m-intro__photo { width: 100%; aspect-ratio: 494 / 330; object-fit: cover; }
@media (max-width: 1100px) {
  .m-intro__in--photo { grid-template-columns: minmax(0, 1fr); }
  .m-intro .h1 { margin-bottom: 48px; }
  .m-intro__photo { max-width: 494px; }
}
@media (max-width: 600px) {
  .m-intro__in { padding-top: 64px; padding-bottom: 64px; }
  .m-intro .h1 { font-size: 44px; margin-bottom: 40px; }
  .m-intro__lead { font-size: 15px; }
}

/* ---------- corridor chart (schematic, not for navigation) ---------- */
.corridor { position: relative; margin: 0; background: var(--ocean); color: var(--white); height: 440px; padding: 24px;
  display: flex; flex-direction: column; gap: 20px; overflow: hidden; }
.corridor__label { font: 600 11px/1.2 var(--sans); color: var(--gold); position: relative; }
.corridor__grid { position: absolute; left: 0; top: 0; width: 100%; height: 440px; pointer-events: none; }
.corridor__grid img { position: absolute; top: 18.18%; left: 5.56%; width: 77.77%; height: 72.73%; max-width: none; }
.corridor__routes { position: relative; height: 220px; display: flex; gap: 24px; align-items: center; }
.corridor__route { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.corridor__name { font: 400 38px/1.08 var(--serif); color: var(--white); }
.corridor__via { font: 400 12px/1.6 var(--sans); color: var(--mist); }
.corridor__line { display: block; height: 2px; background: var(--gold); }
.corridor__point { font: 400 13px/1.6 var(--sans); color: var(--gold); }
.corridor__note { position: relative; font: 400 11px/1.6 var(--sans); color: var(--mist); }
@media (max-width: 600px) {
  .corridor { height: 340px; }
  .corridor__name { font-size: 24px; }
}

/* ---------- closing band: serif sub-line under the heading ---------- */
.m-subline { font: 400 44px/1.08 var(--serif); color: var(--mist); }
@media (max-width: 600px) { .m-subline { font-size: 32px; } }

/* ---------- FAQ accordion (ns.js .acc behaviour, open by default) ---------- */
.m-faq .acc { border-top: 1px solid var(--line); }
.m-faq .acc + .acc { margin-top: 32px; }
.m-faq .acc:last-child { border-bottom: 0; }
.m-faq .acc > button { display: block; padding: 16px 0 0; font: 600 18px/1.6 var(--sans); color: var(--ink); min-height: 44px; }
.m-faq .acc > button::after { display: inline; margin-left: .3em; font-size: inherit; line-height: inherit; color: var(--ink); }
.m-faq .acc__body { padding: 16px 0 0; font: 400 16px/1.6 var(--sans); color: var(--slate); max-width: none; }

/* ---------- search field with glyph ---------- */
.m-search { position: relative; }
.m-search__box { position: relative; }
.m-search .input { padding: 14px; }
.m-search .input::placeholder { color: transparent; }
/* visible placeholder: the design's text with its search glyph drawn inline (the glyph is missing from most fonts) */
.m-search__ph { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none;
  display: inline-flex; align-items: center; gap: 8px; font: 400 14px/1.6 var(--sans); color: var(--ink); }
.m-search__ph svg { width: 12px; height: 12px; flex: none; }
.m-search .input:not(:placeholder-shown) + .m-search__ph { display: none; }
.m-search__status { font: 400 12px/1.6 var(--sans); color: var(--slate); min-height: 0; }

/* ---------- anchors under the sticky-less nav ---------- */
[id].m-anchor { scroll-margin-top: 24px; }
.m-search__status:empty { display: none; }