/* ==========================================================================
   YEV v9.13.0 navigation: the capsule and the dock
   --------------------------------------------------------------------------
   Computer (900px+): a navy capsule with the blueprint grid floats near the
   top. It tucks away while you scroll down to read and comes back the moment
   you scroll up. Services and Portfolio open ONE panel under it that reshapes
   between the two (width, height and content move together).

   Phone (under 900px): a slim capsule at the top (logo + language) and a dock
   at the bottom in the thumb zone: Services, Work, About, and the gold Tech
   Check. Services and Work slide up a bottom sheet holding the same panels.

   Research behind it (2026-09-13): NN/g, hidden navigation roughly halves
   discoverability; persistent headers speed navigation; thumb-zone taps are
   far more accurate; WAI disclosure pattern for site nav (no menu roles).
   Markup: build-nav.js. Behaviour: site.js "Navigation" module.
   Motion sits behind prefers-reduced-motion: no-preference.
   ========================================================================== */

:root {
    --yn-h: 60px;
    --yn-top: 12px;
    --yn-space: 84px;
    --yn-glass: rgba(0, 33, 97, 0.9);
    --yn-line: rgba(255, 255, 255, 0.07);
    --yn-edge: rgba(255, 255, 255, 0.14);
    --yn-ease: cubic-bezier(.2, .8, .2, 1);
}
@media (max-width: 899px) {
    :root { --yn-h: 54px; --yn-top: 10px; --yn-space: 72px; }
}

/* the old in-flow bar is gone: headers start at the very top, under the capsule */
html { scroll-padding-top: calc(var(--yn-space) + 8px); }
.hero { min-height: 100svh; padding-top: calc(var(--yn-space) + clamp(16px, 4vh, 56px)) !important; }
.op-hero, .pg-hero { padding-top: calc(var(--yn-space) + clamp(20px, 5vw, 64px)); }

/* shared glass + grid */
.yn-bar, .yn-stage, .yn-dock, .yn-sheet {
    color: #fff;
    background-color: var(--yn-glass);
    background-image:
        linear-gradient(var(--yn-line) 1px, transparent 1px),
        linear-gradient(90deg, var(--yn-line) 1px, transparent 1px);
    background-size: 22px 22px;
    border: 1px solid var(--yn-edge);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
}
@supports not ((backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px))) {
    .yn-bar, .yn-stage, .yn-dock, .yn-sheet { background-color: var(--yev-navy); }
}

/* ---------- The capsule ---------- */
.yn-bar {
    position: fixed;
    z-index: 1000;
    top: var(--yn-top);
    left: 50%;
    translate: -50% 0;
    width: min(1180px, calc(100% - 24px));
    height: var(--yn-h);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px 0 8px;
    border-radius: 999px;
    box-shadow: 0 16px 40px -20px rgba(0, 17, 51, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
@media (prefers-reduced-motion: no-preference) {
    .yn-bar { transition: translate .45s var(--yn-ease), box-shadow .3s ease; }
}
.yn-bar.is-tucked { translate: -50% calc(-100% - var(--yn-top) - 16px); box-shadow: none; }
/* a short gold line in the middle of the bottom edge, like the grid's registration mark */
.yn-bar::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -1px;
    width: 64px;
    height: 3px;
    translate: -50% 0;
    border-radius: 3px 3px 0 0;
    background: var(--yev-gold);
    opacity: .9;
}

.yn-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 4px 12px 4px 4px;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.yn-brand img { width: 40px; height: 40px; border-radius: 50%; display: block; box-shadow: 0 0 0 2px rgba(254, 212, 42, 0.55); }
.yn-brand:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 2px; }
@media (max-width: 359px) { .yn-brand span { font-size: 0.875rem; } }

.yn-links {
    display: flex;
    align-items: center;
    gap: 2px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.yn-trigger, .yn-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: background-color .2s ease, color .2s ease;
}
.yn-trigger:hover, .yn-link:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.yn-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, 0.14); color: var(--yev-gold); }
.yn-chev { transition: rotate .3s var(--yn-ease); }
.yn-trigger[aria-expanded="true"] .yn-chev { rotate: 180deg; }
.yn-trigger:focus-visible, .yn-link:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 2px; }
.yn-link[aria-current="page"]::after,
.yn-trigger.is-current::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 5px;
    width: 5px;
    height: 5px;
    translate: -50% 0;
    border-radius: 50%;
    background: var(--yev-gold);
}

.yn-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.yn-links + .yn-stage + .yn-actions { margin-left: 0; }
.yn-lang {
    display: flex;
    padding: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
}
.yn-lang button {
    min-width: 40px;
    min-height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.82);
    font: inherit;
    font-weight: 800;
    font-size: 0.8125rem;
    cursor: pointer;
}
.yn-lang button.active { background: var(--yev-gold); color: var(--yev-navy); }
.yn-lang button:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 1px; }
.yn-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--yev-gold);
    color: var(--yev-navy);
    font-weight: 800;
    font-size: 0.9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .25s var(--yn-ease), box-shadow .25s ease;
}
.yn-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(254, 212, 42, 0.8); }
.yn-cta:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

@media (max-width: 899px) {
    .yn-links, .yn-cta, .yn-stage { display: none !important; }
    .yn-bar { padding-right: 6px; }
}
@media (min-width: 900px) and (max-width: 1080px) {
    .yn-brand span { display: none; }
    .yn-trigger, .yn-link { padding: 0 12px; }
}

/* ---------- The panel that reshapes (computer) ---------- */
.yn-stage {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: var(--yn-sw, 760px);
    height: var(--yn-sh, 320px);
    translate: -50% 0;
    border-radius: 26px;
    overflow: hidden;
    border-top: 3px solid var(--yev-gold);
    box-shadow: 0 30px 70px -30px rgba(0, 17, 51, 0.75);
    opacity: 0;
    visibility: hidden;
    scale: .97;
    transform-origin: 50% 0;
    pointer-events: none;
}
.yn.is-open .yn-stage { opacity: 1; visibility: visible; scale: 1; pointer-events: auto; }
@media (prefers-reduced-motion: no-preference) {
    .yn-stage { transition: opacity .2s ease, scale .25s var(--yn-ease), visibility 0s linear .25s, width .4s var(--yn-ease), height .4s var(--yn-ease); }
    .yn.is-open .yn-stage { transition: opacity .2s ease, scale .3s var(--yn-ease), visibility 0s, width .4s var(--yn-ease), height .4s var(--yn-ease); }
}
/* a hover bridge across the gap between the capsule and the panel */
.yn.is-open .yn-stage::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }

.yn-stage .yn-panel {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--yn-pw, 760px);
    padding: 22px;
}
.yn-stage .yn-panel[data-yn-panel="services"] { --yn-pw: min(820px, calc(100vw - 48px)); }
.yn-stage .yn-panel[data-yn-panel="work"] { --yn-pw: min(720px, calc(100vw - 48px)); }
.yn-panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
    .yn-panel.is-entering { animation: ynIn .38s var(--yn-ease) both; }
    .yn-panel.from-left { --yn-dx: -18px; }
    .yn-panel.from-right { --yn-dx: 18px; }
    @keyframes ynIn { from { opacity: 0; transform: translateX(var(--yn-dx, 0)) translateY(6px); } to { opacity: 1; transform: none; } }
}

.yn-panel-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 14px; padding: 0 4px; }
.yn-kicker { margin: 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--yev-gold); }
.yn-lede { margin: 0; font-size: 0.9375rem; color: rgba(255, 255, 255, 0.78); }
.yn-panel-body { display: grid; gap: 12px; }
@media (min-width: 900px) {
    .yn-panel-body { grid-template-columns: 1fr 230px; align-items: stretch; }
}
.yn-tiles { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 900px) { .yn-tiles { grid-template-columns: 1fr 1fr; } }

.yn-tile {
    --mark: 0px;
    position: relative;
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: start;
    gap: 4px 10px;
    height: 100%;
    padding: 14px 14px 14px 12px;
    border-radius: 16px;
    color: #fff;
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.04);
    background-image: linear-gradient(var(--yev-gold), var(--yev-gold)), linear-gradient(var(--yev-gold), var(--yev-gold));
    background-size: var(--mark) 2px, 2px var(--mark);
    background-position: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color .2s ease, border-color .2s ease, background-size .4s var(--yn-ease), transform .3s var(--yn-ease);
}
.yn-tile:hover, .yn-tile:focus-visible, .yn-tile[aria-current="page"] {
    --mark: 22px;
    background-color: rgba(255, 255, 255, 0.09);
    border-color: rgba(254, 212, 42, 0.45);
}
.yn-tile:hover { transform: translateY(-2px); }
.yn-tile:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 2px; }
.yn-num { font-size: 0.75rem; font-weight: 800; color: var(--yev-gold); padding-top: 3px; font-variant-numeric: tabular-nums; }
.yn-tile .yev-ico { width: 20px; height: 20px; color: var(--yev-gold); margin-top: 1px; }
.yn-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yn-tile strong { font-size: 1rem; font-weight: 800; line-height: 1.25; }
.yn-tile small { font-size: 0.8125rem; line-height: 1.4; color: rgba(255, 255, 255, 0.72); }
.yn-tile[aria-current="page"] strong::after { content: " ·"; color: var(--yev-gold); }

.yn-feature {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    padding: 18px;
    border-radius: 18px;
    text-decoration: none;
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(254, 212, 42, 0.35);
    min-height: 150px;
    transition: transform .3s var(--yn-ease), box-shadow .3s ease;
}
.yn-feature:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6); }
.yn-feature:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.yn-feature-kick { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--yev-gold); }
.yn-feature strong { font-size: 1.25rem; font-weight: 900; line-height: 1.15; color: var(--yev-gold); }
.yn-feature small { font-size: 0.875rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); }
.yn-feature--gold {
    background-color: var(--yev-gold);
    background-image:
        linear-gradient(rgba(0, 33, 97, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 33, 97, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    border-color: transparent;
    color: var(--yev-navy);
}
.yn-feature--gold .yn-feature-kick, .yn-feature--gold strong { color: var(--yev-navy); }
.yn-feature--gold small { color: rgba(0, 33, 97, 0.85); }
.yn-feature-f10 { font-size: 0.875rem; color: var(--yev-navy); padding-top: 6px; border-top: 1px solid rgba(0, 33, 97, 0.2); }
.yn-feature-f10:empty { display: none; }
.yn-feature--gold:focus-visible { outline-color: #fff; }

/* ---------- The dock (phone) ---------- */
.yn-dock {
    position: fixed;
    z-index: 1001;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    translate: -50% 0;
    width: min(480px, calc(100% - 20px));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.4fr;
    gap: 4px;
    padding: 6px;
    border-radius: 26px;
    box-shadow: 0 18px 44px -18px rgba(0, 17, 51, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.yn-dock-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 4px 2px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: rgba(255, 255, 255, 0.88);
    font: inherit;
    font-weight: 700;
    font-size: 0.75rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.yn-dock-btn .yn-ico { width: 22px; height: 22px; }
.yn-dock-btn[aria-expanded="true"], .yn-dock-btn[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--yev-gold); }
.yn-dock-btn:focus-visible, .yn-dock-cta:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 1px; }
.yn-dock-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 0 10px;
    border-radius: 20px;
    background: var(--yev-gold);
    color: var(--yev-navy);
    font-weight: 800;
    font-size: 0.875rem;
    text-decoration: none;
    text-align: center;
    line-height: 1.15;
}
@media (min-width: 900px) {
    .yn-dock, .yn-sheet, .yn-scrim { display: none !important; }
}
@media (max-width: 899px) {
    /* keep the page end clear of the dock */
    .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ---------- The bottom sheet (phone) ---------- */
.yn-scrim {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 10, 30, 0.5);
    opacity: 0;
    transition: opacity .3s ease;
}
.yn-scrim.is-open { opacity: 1; }
.yn-scrim[hidden], .yn-sheet[hidden] { display: none; }
.yn-sheet {
    position: fixed;
    z-index: 1002;
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: calc(100svh - 24px);
    overflow: auto;
    overscroll-behavior: contain;
    border-radius: 28px;
    border-top: 3px solid var(--yev-gold);
    padding: 8px 14px 14px;
    box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, 0.6);
    translate: 0 calc(100% + 24px);
}
.yn-sheet.is-open { translate: 0 0; }
@media (prefers-reduced-motion: no-preference) {
    .yn-sheet { transition: translate .45s var(--yn-ease); }
}
.yn-sheet-top { position: relative; display: flex; justify-content: flex-end; align-items: center; min-height: 40px; }
.yn-grip { position: absolute; left: 50%; top: 6px; translate: -50% 0; width: 44px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, 0.35); }
.yn-sheet-close {
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}
.yn-sheet-close:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 2px; }
.yn-sheet .yn-panel { padding: 4px 2px 10px; }
.yn-sheet .yn-panel-head { flex-direction: column; gap: 4px; }
.yn-sheet .yn-lede { font-size: 1rem; }
.yn-sheet .yn-tile { padding: 14px; }
.yn-sheet .yn-feature { min-height: 0; }
.yn-sheet-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    margin-top: 6px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}
.yn-sheet-contact .yn-ico { width: 20px; height: 20px; color: var(--yev-gold); }
.yn-sheet-contact:focus-visible { outline: 3px solid var(--yev-gold); outline-offset: 2px; }
html.yn-locked { overflow: hidden; }

@media (forced-colors: active) {
    .yn-bar, .yn-stage, .yn-dock, .yn-sheet { border: 2px solid CanvasText; }
    .yn-trigger[aria-expanded="true"], .yn-dock-btn[aria-expanded="true"] { outline: 2px solid Highlight; }
}

/* contrast: the capsule needs an edge over dark headers, and the panel and sheet
   must never let page text show through behind the links */
.yn-bar {
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow: 0 0 0 1px rgba(0, 12, 40, 0.45), 0 16px 40px -18px rgba(0, 12, 40, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.yn-stage, .yn-sheet { background-color: rgba(0, 29, 86, 0.985); }
.yn-dock { background-color: rgba(0, 29, 86, 0.94); }
@media (max-width: 899px) {
    .yn-actions, .yn-links + .yn-stage + .yn-actions { margin-left: auto; }
}
.yn-dock-cta { white-space: nowrap; font-size: 0.8125rem; gap: 6px; padding: 0 8px; }
.yn-dock-btn span { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }