/* ==========================================================================
   PELAGIC MASTER STYLESHEET
   ========================================================================== */

:root,
body,
.is-style-pelagic-page-shell {
    --navy: #071B2B;
    --abyss: #031018;
    --teal: #124B52;
    --glass: #8BB9B5;
    --white: #F4F6F3;
    --mist: #C8D0D0;
    --silver: #AAB6BD;
    --ink: #071B2B;

    --display: "Zodiak", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    --sans: "Switzer", "Helvetica Neue", Arial, sans-serif;
    --mono: "JetBrains Mono", monospace;

    --gutter: max(20px, env(safe-area-inset-left, 0px));
    --gutter-r: max(20px, env(safe-area-inset-right, 0px));
    --step-0: clamp(1rem, .96rem + .2vw, 1.0625rem);
    --step-1: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
    --step-3: clamp(2rem, 1.4rem + 3vw, 3.6rem);
    --step-5: clamp(2.7rem, 1.2rem + 7.2vw, 8.4rem);

    color-scheme: dark;
}

body.digivrse-cartridge-pelagic,
body.digivrse-theme-pelagic,
.is-style-pelagic-page-shell {
    background-color: var(--abyss) !important;
    color: var(--white) !important;
    font-family: var(--sans) !important;
    font-size: var(--step-0) !important;
    line-height: 1.55 !important;
    -webkit-font-smoothing: antialiased;
}

body.digivrse-cartridge-pelagic,
body.digivrse-theme-pelagic {
    overflow-x: hidden;
}

/* Page shell container: strict encapsulation for both frontend and editor canvas */
.is-style-pelagic-page-shell {
    min-height: 100vh;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

/* 
   BACKEND EDITOR ISOLATION FIX:
   Styles apply to the editor canvas ONLY when the Pelagic page shell or theme is active.
   Zero bleed into standard posts, default pages, or other cartridges.
*/
.editor-styles-wrapper:has(.is-style-pelagic-page-shell),
.editor-styles-wrapper:has(.is-style-pelagic-page-shell) .is-root-container,
.editor-styles-wrapper.digivrse-theme-pelagic,
.editor-styles-wrapper.digivrse-cartridge-pelagic,
body.digivrse-theme-pelagic .editor-styles-wrapper {
    background-color: var(--abyss) !important;
    color: var(--white) !important;
    font-family: var(--sans) !important;
}

.editor-styles-wrapper:has(.is-style-pelagic-page-shell) .editor-post-title__input,
.editor-styles-wrapper.digivrse-theme-pelagic .editor-post-title__input {
    color: var(--white) !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
}

.editor-styles-wrapper:has(.is-style-pelagic-page-shell) .editor-post-title__input::placeholder,
.editor-styles-wrapper.digivrse-theme-pelagic .editor-post-title__input::placeholder {
    color: rgba(200, 208, 208, 0.45) !important;
}

::selection {
    background: var(--teal);
    color: var(--white);
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #031018; }
::-webkit-scrollbar-thumb { background: #124B52; }
::-webkit-scrollbar-thumb:hover { background: #8BB9B5; }

:focus-visible {
    outline: 2px solid var(--glass) !important;
    outline-offset: 3px !important;
}

.wrap {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r) !important;
    box-sizing: border-box !important;
}

.label {
    font-size: .78rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 500;
}

.num {
    font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   NAVBAR
   -------------------------------------------------------------------------- */
.nav {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 40 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    padding: calc(36px + env(safe-area-inset-top, 0px)) var(--gutter-r) 28px var(--gutter) !important;
    color: #fff !important;
    mix-blend-mode: difference !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

body.admin-bar .nav { top: 32px !important; }
@media (max-width: 782px) {
    body.admin-bar .nav { top: 46px !important; }
}

.editor-styles-wrapper .nav {
    position: relative !important;
    top: auto !important;
    mix-blend-mode: normal !important;
    background-color: var(--navy) !important;
    padding: 28px var(--gutter) !important;
}

.wordmark {
    font-family: var(--display) !important;
    font-weight: 700 !important;
    letter-spacing: .32em !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    color: inherit !important;
}

.nav ul {
    display: flex !important;
    gap: 28px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: .92rem !important;
}

.nav ul a {
    text-decoration: none !important;
    opacity: .85 !important;
    color: inherit !important;
}

.nav ul a:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
    text-underline-offset: 5px !important;
}

.nav .cta-link {
    border: 1px solid currentColor !important;
    padding: 9px 16px !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    font-size: .92rem !important;
    color: inherit !important;
    white-space: nowrap !important;
}

@media (max-width: 900px) {
    .nav ul { display: none !important; }
}

.gauge {
    position: fixed !important;
    right: var(--gutter-r) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 39 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #fff !important;
    mix-blend-mode: difference !important;
    pointer-events: none !important;
}

.gauge__scale {
    width: 10px !important;
    height: 180px !important;
    position: relative !important;
    background: repeating-linear-gradient(to bottom, currentColor 0 1px, transparent 1px 18px) !important;
    opacity: .55 !important;
}

.gauge__mark {
    position: absolute !important;
    right: -6px !important;
    width: 22px !important;
    height: 2px !important;
    background: currentColor !important;
    top: 0 !important;
    transition: top .15s linear !important;
}

.gauge__read {
    font-size: .82rem !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    letter-spacing: .08em !important;
    font-family: var(--mono) !important;
}

@media (max-width: 700px) {
    .gauge__scale { height: 110px !important; }
}

/* --------------------------------------------------------------------------
   01 SURFACE HERO
   -------------------------------------------------------------------------- */
.surface {
    position: relative !important;
    background: var(--abyss) !important;
    width: 100% !important;
}

.stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}

.editor-styles-wrapper:has(.is-style-pelagic-page-shell) .stage {
    height: 640px;
    min-height: 640px;
}

.layer {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.layer img,
.layer video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.above img { object-position: 50% 62% !important; }
.above .mobile-only { display: none !important; }
.below { background: var(--navy) !important; }
.below video { filter: saturate(.85) contrast(1.05) brightness(.62) hue-rotate(-8deg) !important; transform: scale(1.12) !important; }
.below::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to bottom, rgba(18,75,82,.35), rgba(3,16,24,.75) 70%, var(--abyss)) !important;
}

.waterline {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    pointer-events: none !important;
    z-index: 3 !important;
}

.surface__copy {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    pointer-events: none !important;
}

.hl {
    position: absolute !important;
    left: var(--gutter) !important;
    right: var(--gutter-r) !important;
    font-size: var(--step-5) !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
    line-height: .98 !important;
    letter-spacing: -.012em !important;
    margin: 0 !important;
    text-wrap: balance !important;
}

.hl--top {
    bottom: calc(100% - var(--wl, 56%) + .14em) !important;
    color: var(--white) !important;
    text-shadow: 0 2px 30px rgba(3,16,24,.35) !important;
}

.hl--bot {
    top: calc(var(--wl, 56%) + .1em) !important;
    color: var(--glass) !important;
    padding-left: min(18vw, 240px) !important;
}

.surface__meta {
    position: absolute !important;
    left: var(--gutter) !important;
    right: var(--gutter-r) !important;
    bottom: calc(36px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
    gap: 24px !important;
    pointer-events: auto !important;
    flex-wrap: wrap !important;
    box-sizing: border-box !important;
}

.surface__meta p {
    max-width: 34ch !important;
    color: var(--mist) !important;
    font-size: var(--step-1) !important;
    line-height: 1.4 !important;
    font-family: var(--sans) !important;
    margin: 0 !important;
}

.btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: var(--white) !important;
    color: var(--navy) !important;
    border: 0 !important;
    cursor: pointer !important;
    padding: 16px 24px !important;
    font: 500 1rem var(--sans) !important;
    text-decoration: none !important;
    transition: background .25s, color .25s !important;
    border-radius: 0 !important;
}

.btn:hover { background: var(--glass) !important; }
.btn svg { width: 16px !important; height: 16px !important; }

@media (max-width: 700px) {
    .above .desk-only { display: none !important; }
    .above .mobile-only { display: block !important; }
    .hl--bot { padding-left: 0 !important; text-align: right !important; }
    .surface__meta p { font-size: 1rem !important; }
}

/* --------------------------------------------------------------------------
   02 DEPTHS & MASONRY GRID
   -------------------------------------------------------------------------- */
.is-style-pelagic-section-dark {
    background-color: var(--abyss) !important;
    color: var(--white) !important;
    padding-block: clamp(90px, 14vw, 180px) clamp(80px, 10vw, 140px) !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.is-style-pelagic-section-title {
    font-family: var(--display) !important;
    font-size: var(--step-3) !important;
    font-weight: 500 !important;
    line-height: .98 !important;
    letter-spacing: -.012em !important;
    color: var(--white) !important;
    margin: 0 !important;
}

.is-style-pelagic-lead {
    font-family: var(--sans) !important;
    font-size: var(--step-1) !important;
    line-height: 1.45 !important;
    color: var(--mist) !important;
    margin: 0 !important;
}

.is-style-pelagic-specimens-grid {
    display: grid !important;
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 28px) !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.is-style-pelagic-spec-wide {
    grid-column: 1 / -1 !important;
    aspect-ratio: 21 / 9 !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--navy) !important;
    margin: 0 !important;
}

.is-style-pelagic-spec-tall {
    grid-column: 1 / 8 !important;
    aspect-ratio: 4 / 3.4 !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--navy) !important;
    margin: 0 !important;
}

.is-style-pelagic-spec-side {
    grid-column: 8 / -1 !important;
    aspect-ratio: 3 / 4 !important;
    margin-top: clamp(40px, 10vw, 160px) !important;
    position: relative !important;
    overflow: hidden !important;
    background-color: var(--navy) !important;
    margin-bottom: 0 !important;
}

.is-style-pelagic-crop-wide img,
.is-style-pelagic-crop-tall img,
.is-style-pelagic-crop-side img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    filter: saturate(.8) brightness(.78) contrast(1.08) !important;
}

.is-style-pelagic-specimen-caption {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: clamp(18px, 2.4vw, 32px) !important;
    background: linear-gradient(to top, rgba(3,16,24,.92), rgba(3,16,24,0)) !important;
    display: grid !important;
    gap: 6px !important;
    box-sizing: border-box !important;
}

.is-style-pelagic-depth-tag {
    color: var(--glass) !important;
    font-family: var(--mono) !important;
    font-size: .78rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-variant-numeric: tabular-nums !important;
    margin: 0 !important;
}

.is-style-pelagic-card-title {
    font-size: clamp(1.6rem, 1.1rem + 2vw, 2.8rem) !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
    margin: 0 !important;
    color: var(--white) !important;
}

.is-style-pelagic-specimen-desc {
    color: var(--mist) !important;
    max-width: 44ch !important;
    font-size: .98rem !important;
    font-family: var(--sans) !important;
    margin: 0 !important;
}

@media (max-width: 760px) {
    .is-style-pelagic-specimens-grid { grid-template-columns: 1fr !important; }
    .is-style-pelagic-spec-wide { grid-column: 1 / -1 !important; aspect-ratio: 4 / 5 !important; }
    .is-style-pelagic-spec-tall { grid-column: 1 / -1 !important; aspect-ratio: 4 / 5 !important; }
    .is-style-pelagic-spec-side { grid-column: 1 / -1 !important; margin-top: 0 !important; aspect-ratio: 4 / 5 !important; }
}

/* --------------------------------------------------------------------------
   03 RESTORATION SLIDER
   -------------------------------------------------------------------------- */
.restore {
    background: var(--navy) !important;
    position: relative;
    width: 100% !important;
}

.restore .stage {
    --y: 50%;
    position: relative;
    height: 100vh;
    height: 100svh;
    min-height: 560px;
    overflow: hidden;
    width: 100%;
}

.hull {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hull img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 50% 55% !important;
    display: block !important;
}

.hull--clean img {
    filter: saturate(1.08) contrast(1.06) brightness(1.03) !important;
}

.hull--worn {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    clip-path: inset(0 0 calc(100% - var(--y)) 0) !important;
    -webkit-clip-path: inset(0 0 calc(100% - var(--y)) 0) !important;
    will-change: clip-path;
}

.hull--worn img {
    filter: saturate(.42) contrast(.78) brightness(.9) sepia(.42) hue-rotate(28deg) !important;
}

.hull--worn .scale {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    mix-blend-mode: multiply !important;
    opacity: .38 !important;
}

.hull--worn::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(200,208,208,.22) !important;
    mix-blend-mode: screen !important;
}

.restore__head {
    position: absolute !important;
    z-index: 5 !important;
    left: var(--gutter) !important;
    top: calc(96px + env(safe-area-inset-top, 0px)) !important;
    max-width: min(560px, 70vw) !important;
    pointer-events: none !important;
}

.restore__head h2 {
    font-size: var(--step-3) !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
    color: var(--white) !important;
    text-shadow: 0 2px 24px rgba(3,16,24,.5) !important;
    margin: 0 !important;
}

.tag {
    position: absolute !important;
    z-index: 5 !important;
    left: var(--gutter) !important;
    font-size: .78rem !important;
    letter-spacing: .14em !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
    background: rgba(3,16,24,.72) !important;
    color: var(--white) !important;
    font-family: var(--mono) !important;
    pointer-events: none !important;
}

.tag--worn { top: calc(var(--y, 50%) - 42px) !important; }
.tag--clean { top: calc(var(--y, 50%) + 14px) !important; background: var(--white) !important; color: var(--navy) !important; }

.handle {
    position: absolute !important;
    z-index: 6 !important;
    left: 50% !important;
    top: var(--y, 50%) !important;
    transform: translate(-50%, -50%) !important;
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    background: var(--white) !important;
    color: var(--navy) !important;
    border: 0 !important;
    cursor: ns-resize !important;
    display: grid !important;
    place-items: center !important;
    touch-action: none !important;
    box-shadow: 0 6px 24px rgba(3,16,24,.35) !important;
}

.handle svg { width: 22px !important; height: 22px !important; }
.hit { position: absolute !important; inset: 0 !important; z-index: 4 !important; cursor: ns-resize !important; touch-action: pan-x !important; }

.steps {
    position: absolute !important;
    z-index: 5 !important;
    right: var(--gutter-r) !important;
    bottom: calc(32px + env(safe-area-inset-bottom, 0px)) !important;
    width: min(380px, calc(100% - 40px)) !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    gap: 2px !important;
}

.steps li {
    display: grid !important;
    grid-template-columns: 96px 1fr !important;
    gap: 14px !important;
    padding: 12px 16px !important;
    background: rgba(3,16,24,.6) !important;
    color: var(--mist) !important;
    transition: background .35s, color .35s !important;
    font-family: var(--sans) !important;
}

.steps li strong { font-family: var(--display) !important; font-weight: 500 !important; font-size: 1.25rem !important; color: var(--white) !important; }
.steps li span { font-size: .9rem !important; line-height: 1.35 !important; }
.steps li.on { background: var(--white) !important; color: var(--navy) !important; }
.steps li.on strong { color: var(--navy) !important; }

.restore__hint {
    position: absolute !important;
    z-index: 5 !important;
    right: var(--gutter-r) !important;
    top: calc(100px + env(safe-area-inset-top, 0px)) !important;
    color: var(--white) !important;
    font-size: .85rem !important;
    text-shadow: 0 1px 10px rgba(3,16,24,.8) !important;
    pointer-events: none !important;
    font-family: var(--sans) !important;
}

@media (max-width: 700px) {
    .steps li { grid-template-columns: 78px 1fr !important; padding: 9px 12px !important; }
    .steps li span { font-size: .82rem !important; }
    .restore__hint { display: none !important; }
    .handle { left: auto !important; right: 28px !important; transform: translate(0, -50%) !important; width: 52px !important; height: 52px !important; }
}

/* --------------------------------------------------------------------------
   DETAIL BAND
   -------------------------------------------------------------------------- */
.is-style-pelagic-detail-section {
    background: var(--navy) !important;
    padding-block: clamp(70px, 10vw, 140px) !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.is-style-pelagic-detail-grid {
    display: grid !important;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
    gap: clamp(28px, 5vw, 80px) !important;
    align-items: center !important;
    width: 100% !important;
}

.is-style-pelagic-crop-4-5 img {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    width: 100% !important;
    display: block !important;
}

.is-style-pelagic-detail-title {
    font-size: var(--step-3) !important;
    font-family: var(--display) !important;
    font-weight: 500 !important;
    line-height: .98 !important;
    color: var(--white) !important;
    margin: 0 0 24px 0 !important;
}

.is-style-pelagic-detail-desc {
    color: var(--mist) !important;
    max-width: 46ch !important;
    font-family: var(--sans) !important;
    font-size: var(--step-0) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

.is-style-pelagic-detail-desc + .is-style-pelagic-detail-desc {
    margin-top: 14px !important;
}

@media (max-width: 760px) {
    .is-style-pelagic-detail-grid { grid-template-columns: 1fr !important; }
    .is-style-pelagic-crop-4-5 img { aspect-ratio: 4 / 3 !important; }
}

/* --------------------------------------------------------------------------
   04 THE STANDARD (LIGHT SURFACE INVERSION + BUTTON BACKGROUND)
   -------------------------------------------------------------------------- */
.is-style-pelagic-section-standard {
    background-color: var(--white) !important;
    color: var(--ink) !important;
    padding-block: clamp(90px, 12vw, 170px) !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r) !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.is-style-pelagic-section-standard h2,
.is-style-pelagic-section-standard h3,
.is-style-pelagic-section-standard p,
.is-style-pelagic-section-standard .service h3 {
    color: var(--ink) !important;
}

.is-style-pelagic-section-standard .standard__lede {
    color: #3c4e58 !important;
    max-width: 48ch !important;
    margin-top: 20px !important;
    font-family: var(--sans) !important;
    font-size: var(--step-0) !important;
}

.standard__grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr) !important;
    gap: clamp(30px, 5vw, 80px) !important;
    margin-top: clamp(48px, 6vw, 80px) !important;
    align-items: start !important;
}

.zones {
    position: sticky !important;
    top: 90px !important;
    margin: 0 !important;
    aspect-ratio: 4 / 5 !important;
    overflow: hidden !important;
    background: var(--navy) !important;
}

.zones img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.zone { position: absolute !important; left: 0 !important; right: 0 !important; height: 0 !important; border-top: 1.5px solid rgba(244,246,243,.55) !important; transition: border-color .3s, opacity .3s !important; }
.zone span {
    position: absolute !important; right: 14px !important; top: 8px !important; font-size: .72rem !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--white) !important; background: rgba(3,16,24,.55) !important; padding: 4px 8px !important; font-family: var(--mono) !important;
}
.zone::before { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: 0 !important; height: var(--band, 0px) !important; background: rgba(139,185,181,0) !important; transition: background .3s !important; }
.zones.has-focus .zone { opacity: .35 !important; }
.zones .zone.on { opacity: 1 !important; border-top-color: var(--white) !important; }
.zones .zone.on span { background: var(--white) !important; color: var(--navy) !important; }
.zones .zone.on::before { background: rgba(139,185,181,.28) !important; }

.services { list-style: none !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid #b9c3c5 !important; }
.service { border-bottom: 1px solid #b9c3c5 !important; }
.service button { all: unset !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: 1fr auto !important; gap: 8px 20px !important; width: 100% !important; padding: 28px 0 !important; cursor: pointer !important; }
.service h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) !important; font-weight: 500 !important; font-family: var(--display) !important; color: var(--ink) !important; margin: 0 !important; line-height: .98 !important; }
.service .label { color: var(--teal) !important; align-self: center !important; font-family: var(--mono) !important; }
.service p { grid-column: 1 / -1 !important; color: #3c4e58 !important; max-width: 44ch !important; max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; transition: max-height .45s ease, opacity .35s !important; font-family: var(--sans) !important; margin: 0 !important; }
.service.on p { max-height: 9em !important; opacity: 1 !important; margin-top: 10px !important; }

.standard__cta { display: flex !important; flex-wrap: wrap !important; gap: 16px !important; align-items: center !important; margin-top: 36px !important; }
.standard__cta p { color: #3c4e58 !important; font-family: var(--sans) !important; margin: 0 !important; }

.standard__cta .btn,
.is-style-pelagic-section-standard .btn {
    background-color: var(--navy) !important;
    background: var(--navy) !important;
    color: var(--white) !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 16px 24px !important;
    font: 500 1rem var(--sans) !important;
    text-decoration: none !important;
    transition: background-color .25s, color .25s !important;
}

.standard__cta .btn:hover,
.is-style-pelagic-section-standard .btn:hover {
    background-color: var(--teal) !important;
    background: var(--teal) !important;
    color: var(--white) !important;
}

@media (max-width: 860px) {
    .standard__grid { grid-template-columns: 1fr !important; }
    .zones { position: relative !important; top: 0 !important; aspect-ratio: 4 / 3 !important; }
}

/* --------------------------------------------------------------------------
   05 EVIDENCE TRACK
   -------------------------------------------------------------------------- */
.evidence { background: var(--abyss) !important; overflow: hidden !important; width: 100% !important; }
.evidence__pin { min-height: 100vh !important; min-height: 100svh !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding-block: 96px 48px !important; box-sizing: border-box !important; }
.evidence__head { display: flex !important; justify-content: space-between !important; align-items: end !important; gap: 20px !important; flex-wrap: wrap !important; margin-bottom: clamp(28px, 4vw, 48px) !important; }
.evidence__head h2 { font-size: var(--step-3) !important; font-family: var(--display) !important; color: var(--white) !important; margin: 0 !important; }
.evidence__head p { color: var(--mist) !important; max-width: 36ch !important; font-family: var(--sans) !important; margin: 0 !important; }
.track { display: flex !important; gap: clamp(16px, 2.5vw, 36px) !important; padding-left: var(--gutter) !important; padding-right: var(--gutter-r) !important; will-change: transform !important; box-sizing: border-box !important; }
.vessel { --sub: 100; flex: 0 0 min(70vw, 980px) !important; position: relative !important; margin: 0 !important; cursor: zoom-in !important; box-sizing: border-box !important; outline: none !important; }

.vessel__caption-top {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    gap: 6px 18px !important;
    align-items: baseline !important;
    padding-bottom: 14px !important;
    font-family: var(--sans) !important;
    box-sizing: border-box !important;
}

.vessel__caption-top h3 { font-size: clamp(1.4rem, 1rem + 1.3vw, 2.1rem) !important; font-family: var(--display) !important; color: var(--white) !important; margin: 0 !important; }
.vessel__caption-top .where { color: var(--mist) !important; font-size: .95rem !important; }
.vessel__caption-top .work { color: var(--glass) !important; font-size: .9rem !important; text-align: right !important; font-family: var(--mono) !important; }

.vessel__frame { position: relative !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: var(--navy) !important; width: 100% !important; }
.vessel__frame img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1) !important; display: block !important; }
.vessel:hover .vessel__frame img { transform: scale(1.03) !important; }
.vessel__sea { position: absolute !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(var(--sub) * 1%) !important; background: rgba(18,75,82,.55) !important; backdrop-filter: blur(6px) saturate(.6) !important; border-top: 1.5px solid rgba(244,246,243,.8) !important; pointer-events: none !important; }

@media (max-width: 760px) {
    .evidence__pin { min-height: 0 !important; }
    .track { overflow-x: auto !important; scroll-snap-type: x mandatory !important; padding-bottom: 12px !important; scrollbar-width: none !important; }
    .vessel { flex-basis: 84vw !important; scroll-snap-align: center !important; }
    .vessel__caption-top { grid-template-columns: 1fr !important; }
    .vessel__caption-top .work { text-align: left !important; }
}

.lightbox { position: fixed !important; inset: 0 !important; z-index: 60 !important; background: rgba(3,16,24,.94) !important; display: grid !important; place-items: center !important; }
.lightbox[hidden] { display: none !important; }
.lightbox__img { position: fixed !important; object-fit: cover !important; }
.lightbox__cap {
    position: fixed !important;
    left: var(--gutter) !important;
    right: var(--gutter-r) !important;
    bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    flex-wrap: wrap !important;
    align-items: end !important;
    opacity: 0 !important;
    color: var(--white) !important;
}

.lightbox__cap h3 { font-size: var(--step-3) !important; font-family: var(--display) !important; margin: 0 !important; }
.lightbox__cap p { color: var(--mist) !important; max-width: 44ch !important; font-family: var(--sans) !important; margin: 0 !important; }
.lightbox__close { position: fixed !important; top: calc(18px + env(safe-area-inset-top, 0px)) !important; right: var(--gutter-r) !important; z-index: 2 !important; }

/* --------------------------------------------------------------------------
   06 RETURN TO STILLNESS & INQUIRY FORM
   -------------------------------------------------------------------------- */
.still { position: relative !important; background: var(--abyss) !important; width: 100% !important; }
.still .stage { min-height: 720px !important; }
.still__sky, .still__mirror { position: absolute !important; left: 0 !important; right: 0 !important; overflow: hidden !important; }
.still__sky { top: 0 !important; height: 50% !important; }
.still__mirror { bottom: 0 !important; height: 50% !important; }
.still__sky img, .still__mirror img { position: absolute !important; left: 0 !important; width: 100% !important; height: 200% !important; object-fit: cover !important; object-position: 50% 50% !important; display: block !important; }
.still__sky img { top: 0 !important; }
.still__mirror img { bottom: 0 !important; transform: scaleY(-1) !important; transform-origin: center !important; filter: url(#ripple) brightness(.5) saturate(.85) !important; }
.still__mirror::after { content: "" !important; position: absolute !important; inset: 0 !important; background: linear-gradient(to bottom, rgba(7,27,43,.45), rgba(3,16,24,.95)) !important; }
.still__copy { position: absolute !important; inset: 0 !important; z-index: 4 !important; }
.still__copy h2 { position: absolute !important; left: var(--gutter) !important; right: var(--gutter-r) !important; bottom: calc(50% + .18em) !important; font-size: var(--step-5) !important; text-shadow: 0 2px 34px rgba(3,16,24,.35) !important; font-family: var(--display) !important; color: var(--white) !important; margin: 0 !important; }

.inquiry {
    position: absolute !important;
    left: var(--gutter) !important;
    right: var(--gutter-r) !important;
    top: calc(50% + 28px) !important;
    box-sizing: border-box !important;
    background: rgba(3, 16, 24, 0.94) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    padding: 28px !important;
    border: 1px solid rgba(139, 185, 181, 0.35) !important;
}

.inquiry__intro { color: var(--white) !important; margin-bottom: 18px !important; max-width: 52ch !important; font-family: var(--sans) !important; font-size: 1.05rem !important; }
.fields { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) auto !important; gap: 0 !important; border-top: 1px solid rgba(244,246,243,.45) !important; width: 100% !important; box-sizing: border-box !important; }
.field { display: grid !important; gap: 6px !important; padding: 14px 16px 14px 0 !important; border-bottom: 1.5px solid rgba(244,246,243,.4) !important; box-sizing: border-box !important; }
.field label { font-size: .72rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--glass) !important; font-weight: 600 !important; font-family: var(--mono) !important; }

.field input,
.field select {
    all: unset !important;
    box-sizing: border-box !important;
    width: 100% !important;
    color: #FFFFFF !important;
    font: 500 1.1rem var(--sans) !important;
    padding: 4px 0 !important;
    min-height: 32px !important;
    background-color: transparent !important;
}

.field select { cursor: pointer !important; }
.field select option { color: #FFFFFF !important; background: var(--navy) !important; }
.field input::placeholder { color: #AAB6BD !important; opacity: 1 !important; }
.field input:focus-visible,
.field select:focus-visible { outline: none !important; box-shadow: inset 0 -2px 0 var(--glass) !important; }

.fields .btn { align-self: center !important; margin-left: 8px !important; white-space: nowrap !important; }
.form-error { color: #f2c6b8 !important; font-size: .9rem !important; margin-top: 10px !important; min-height: 1.4em !important; font-family: var(--sans) !important; }
.done { max-width: 56ch !important; }
.done h3 { font-size: var(--step-3) !important; margin-bottom: 12px !important; font-family: var(--display) !important; color: var(--white) !important; }
.done p { color: var(--mist) !important; font-family: var(--sans) !important; }

@media (max-width: 1100px) {
    .fields { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .fields .btn { grid-column: 1 / -1 !important; margin: 18px 0 0 !important; justify-content: center !important; }
}

@media (max-width: 560px) {
    .fields { grid-template-columns: 1fr !important; }
    .still .stage { min-height: 980px !important; }
    .inquiry { top: calc(50% + 18px) !important; }
}

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.foot,
footer.foot {
    background: var(--abyss) !important;
    background-color: var(--abyss) !important;
    padding-top: clamp(80px, 10vw, 140px) !important;
    padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px)) !important;
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter-r) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.foot__mark {
    position: relative !important;
    font-family: var(--display) !important;
    font-weight: 700 !important;
    font-size: clamp(4rem, 19vw, 22rem) !important;
    line-height: .8 !important;
    letter-spacing: .02em !important;
    text-align: center !important;
    user-select: none !important;
}

.foot__mark .up { display: block !important; color: var(--white) !important; }
.foot__mark .down { display: block !important; color: var(--white) !important; transform: scaleY(-1) !important; opacity: .14 !important; -webkit-mask-image: linear-gradient(to top, #000, transparent 70%) !important; mask-image: linear-gradient(to top, #000, transparent 70%) !important; margin-top: .04em !important; filter: blur(.6px) !important; }
.foot__line { height: 1.5px !important; background: var(--glass) !important; opacity: .8 !important; margin: 0 auto !important; }

.foot__row {
    display: flex !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 24px 48px !important;
    margin-top: clamp(48px, 6vw, 72px) !important;
    margin-bottom: 40px !important;
    color: var(--mist) !important;
    font-size: 0.95rem !important;
    font-family: var(--sans) !important;
}

.foot__row div { display: grid !important; gap: 4px !important; }
.foot__row .label { color: var(--glass) !important; margin-bottom: 4px !important; font-family: var(--mono) !important; }
.foot__row a { text-decoration: none !important; color: inherit !important; }
.foot__row a:hover { text-decoration: underline !important; }
.foot__credit { margin-top: 48px !important; padding-top: 24px !important; border-top: 1px solid rgba(244, 246, 243, 0.08) !important; color: #6f8287 !important; font-size: .82rem !important; font-family: var(--sans) !important; }