/* Shared finishing layer: readable navigation, photo-first layouts, restrained motion. */
body:not(.journey-page) .container { width:min(1400px,calc(100% - 96px)); margin-inline:auto; }
.header-inner > .wordmark { margin-right:auto; }
.header-inner .motion-toggle { margin-left:0; }
.section { scroll-margin-top:20px; }
.service-grid { gap:20px; }
.service-grid article { position:relative; min-height:0; padding:30px; transition:transform .3s,border-color .3s; }
.service-grid article:hover { transform:translateY(-5px); border-color:#91efe67a; }
.service-grid h3 { margin:24px 0 14px; font:400 clamp(25px,2.5vw,36px)/1.2 var(--sans); letter-spacing:-1px; max-width:16ch; }
.service-grid article > span { color:#a3e9e5; }
.service-grid .craft-symbol { display:block; width:56px; height:56px; margin-bottom:24px; }
.craft-symbol svg { display:block; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.service-grid article > span:not(.craft-symbol) { font:500 11px/1.4 var(--sans); letter-spacing:.12em; }
.service-grid p { font-size:15px; }
@media(min-width:761px) {
  body:not(.journey-page) .container { --page-gutter:clamp(24px,2.8vw,56px); width:min(1680px,calc(100% - var(--page-gutter)*2 - 88px)); margin-left:max(var(--page-gutter),calc((100% - 1768px)/2)); margin-right:auto; }
  .header .focus-dial { z-index:40; }
  .header .focus-dial.active { width:min(380px,calc(100vw - 40px)); }
  .focus-dial:not(.active) .dial-track { transition:transform .6s cubic-bezier(.22,1,.36,1); }
  .focus-dial:not(.active) a { transition:opacity .5s,transform .5s,color .25s; }
  .focus-dial.active .dial-window { min-height:0; }
  .focus-dial.active a { height:64px; min-height:64px; }
  .focus-dial.active .dial-footer { padding:12px 0 0; }
  .focus-dial.active { overflow:hidden; }
  .focus-dial.active .dial-window { overflow-y:auto; overflow-x:hidden; scrollbar-width:none; overscroll-behavior:contain; }
  .focus-dial.active .dial-window::-webkit-scrollbar { display:none; width:0; height:0; }
  .focus-dial.active .dial-track,.focus-dial.active a { min-width:0; }
}
@media(min-width:761px) and (max-width:1024px) {
  body:not(.journey-page) .container { width:calc(100% - 48px); margin-inline:auto; }
  /* On tablet-width layouts, keep the narrow scroll dial out of the content.
     The header button still opens the full section menu. */
  .focus-dial:not(.active) { opacity:0; visibility:hidden; pointer-events:none; }
}
.journey-page .container { width:min(1320px,calc(100% - 96px)); margin-inline:auto; }
.journey-page main { overflow:visible; }
.journey-intro { padding-top:48px; }
.journey-opening { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:16px 0 52px; }
.journey-opening h1 { font-size:clamp(48px,5.8vw,88px); line-height:1.05; }
.journey-opening-copy { color:var(--muted); max-width:460px; margin:26px 0 20px; font-size:17px; }
.journey-medium { display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.journey-medium span { padding:6px 12px; border:1px solid var(--line); border-radius:30px; font-size:11px; color:#b4f5ed; }
.journey-opening .journey-hero img { height:auto; aspect-ratio:1.1; border-radius:100px 8px 8px 8px; }
.journey-hero figcaption { margin-top:0; gap:6px; flex-direction:column; align-items:start; font-size:12px; border:0; }
.journey-hero figcaption span:first-child { font-size:10px; }
.journey-page .journey-nav { display:flex; width:min(1320px,calc(100% - 96px)); flex-wrap:wrap; gap:8px 28px; }
.journey-section { padding-top:68px; }
.journey-section-heading { align-items:center; }
.journey-section h2 { font-size:clamp(36px,4vw,60px); }
.journey-tools { display:flex; justify-content:space-between; gap:20px; align-items:start; margin:30px 0 16px; }
.journey-filters { display:flex; flex-wrap:wrap; gap:8px; }
.journey-tools button { min-height:44px; border:1px solid var(--line); border-radius:30px; padding:10px 16px; background:transparent; color:var(--muted); font-size:13px; }
.journey-tools button[aria-pressed=true],.journey-tools button:hover { background:#b4f5ed; color:#101b30; border-color:#b4f5ed; }
.journey-notes-toggle { flex-shrink:0; }
.journey-result { color:var(--muted); font:11px/1.5 monospace; margin-bottom:26px; }
.journey-moments { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start; gap:38px 24px; }
.journey-page .journey-moments figure:nth-child(n) { grid-column:auto; padding:0; min-width:0; scroll-margin-top:190px; }
.journey-page .journey-moments figure:nth-child(n) img { aspect-ratio:4/3; height:auto; width:100%; border-radius:10px; }
.journey-moments .journey-image-link { border-radius:10px; }
.journey-moments figcaption { display:flex; flex-direction:column; gap:4px; margin-top:16px; }
.journey-moments figcaption span:first-child { color:var(--ink); font-size:18px; }
.journey-moments figcaption span:last-child { font:10px/1.5 monospace; text-transform:uppercase; letter-spacing:1px; }
.journey-frame-note { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); font-size:14px; color:var(--muted); }
.journey-frame-note details { margin-top:12px; }
.journey-frame-note summary { cursor:pointer; min-height:44px; display:flex; align-items:center; justify-content:space-between; color:#b4f5ed; list-style:none; }
.journey-frame-note summary::-webkit-details-marker { display:none; }
.journey-frame-note details[open] summary span { transform:rotate(45deg); }
.journey-frame-note details p { padding:8px 0; font-family:Georgia,serif; font-style:italic; font-size:18px; color:var(--ink); }
.notes-hidden .journey-frame-note { display:none; }
.journey-now { margin-top:70px; padding-block:50px; border-block:1px solid var(--line); }
.journey-now dl div { min-width:0; }
.journey-page .journey-nav a { white-space:normal; }
@media(max-width:1000px) {
  .journey-opening { gap:30px; }
  .journey-moments { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:760px) {
  /* The header Menu remains available throughout mobile browsing. */
  .mobile-lens:not(.is-minimized):not(.is-open) { opacity:0; pointer-events:none; visibility:hidden; }
  .mobile-lens.is-at-contact:not(.is-open) { opacity:0; pointer-events:none; visibility:hidden; }
  .nav-open-btn { opacity:1; pointer-events:auto; visibility:visible; }
  body:not(.journey-page) .container,.journey-page .container,.journey-page .journey-nav { width:calc(100% - 40px); margin-inline:auto; }
  body:not(.journey-page) .header-inner { gap:8px; flex-wrap:nowrap; min-height:76px; padding-block:12px; }
  .header-inner .motion-toggle { font-size:10px; min-width:0; padding:8px; }
  .services .section-heading > div,.selected-work .section-heading > div { flex-basis:auto; }
  .services .section-heading { margin-bottom:0; }
  .service-grid { margin-top:28px; }
  .mosaic-grid .photo-card:nth-child(n) { grid-column:span 1; }
  .mosaic-grid .photo-card:nth-child(n) .photo-view img { aspect-ratio:1; }
  .gallery-pagination { margin-top:24px; }
  .service-grid { gap:14px; }
  .service-grid article { padding:24px; }
  .service-grid .craft-symbol { float:right; margin:0; text-align:right; }
  .service-grid h3 { margin-top:20px; }
  .journey-intro { padding-top:32px; }
  .journey-intro-top { gap:12px; }
  .journey-intro-top .journey-meta { font-size:9px; letter-spacing:1px; }
  .journey-opening { grid-template-columns:1fr; gap:32px; padding-bottom:20px; }
  .journey-opening h1 { font-size:clamp(46px,10vw,70px); }
  .journey-opening-copy { font-size:15px; margin-top:20px; }
  .journey-opening .journey-hero img { aspect-ratio:1.5; border-radius:50px 8px 8px 8px; }
  .journey-page .journey-nav { gap:8px 18px; }
  .journey-nav a { font-size:11px; }
  .journey-section-heading { display:block; }
  .journey-section-heading > p { margin-top:20px; }
  .journey-tools { flex-direction:column; gap:12px; }
  .journey-tools button { padding:8px 12px; font-size:12px; }
  .journey-moments { gap:32px 16px; }
  .journey-moments figcaption span:first-child { font-size:16px; }
  .journey-now { margin-top:48px; }
}

@media(max-width:480px) {
  .journey-moments { grid-template-columns:1fr; }
  body:not(.journey-page) .header-inner .wordmark { font-size:clamp(18px,5.5vw,24px); letter-spacing:-1px; }
  body:not(.journey-page) .header-inner .brand-dot { font-size:20px; margin-left:3px; }
  body:not(.journey-page) .header-inner .motion-toggle { width:auto; min-height:44px; padding:8px; }
  body:not(.journey-page) .nav-open-btn { padding:8px; gap:6px; font-size:11px; flex-shrink:0; }
  .journey-now dl div { grid-template-columns:100px minmax(0,1fr); }
}
@media(prefers-reduced-motion:reduce) { .service-grid article:hover { transform:none; } }
.motion-paused .service-grid article:hover { transform:none; }
/* A numbered trail and tactile trip folders. */
.trip-trail { position:static; padding:0; border:0; background:none; box-shadow:none; align-items:start; gap:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:42px 0 54px; }
.trip-trail > * { padding:0; position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; color:var(--muted); min-width:0; }
.trip-trail > *::before { content:''; position:absolute; top:22px; left:0; width:100%; height:1px; background:var(--line); }
.trip-trail > *:last-child::before { display:none; }
.trip-trail > * > span { position:relative; display:grid; place-items:center; width:44px; height:44px; border:1px solid #709c9e; border-radius:50%; background:#142a39; font:12px monospace; transition:background .3s,transform .3s; }
.trip-trail strong { color:var(--ink); font-weight:400; font-size:16px; }
.trip-trail small { font-size:11px; }
.trip-trail a:hover > span,.trip-trail a[data-open] > span { background:#b4f5ed; color:#101b30; transform:translateY(-3px); }
.trip-next { opacity:.55; }
.trip-folders { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:start; }
.trip-folder { min-width:0; position:relative; border:1px solid #b4f5ed30; border-radius:0 18px 18px 18px; background:linear-gradient(140deg,#26445088,#14283b); scroll-margin-top:170px; transition:border-color .3s,box-shadow .3s; }
.trip-folder::after { content:''; position:absolute; inset:-16px; z-index:-1; border-radius:28px; background:radial-gradient(circle at 50% 30%,#6effdd22,transparent 68%); opacity:0; filter:blur(16px); transition:opacity .35s; pointer-events:none; }
.trip-folder:hover::after,.trip-folder[open]::after { opacity:1; }
.trip-folder:hover,.trip-folder[open] { border-color:#b4f5ed80; box-shadow:0 18px 40px #0002; }
.trip-folder summary { list-style:none; cursor:pointer; padding:18px; }
.trip-folder summary::-webkit-details-marker { display:none; }
.trip-tab { display:block; position:absolute; bottom:100%; left:-1px; padding:8px 18px; border:1px solid #b4f5ed30; border-bottom:0; background:#243b46; border-radius:10px 10px 0 0; font:10px monospace; letter-spacing:2px; }
.trip-cover { display:block; position:relative; z-index:2; overflow:hidden; border-radius:6px 10px 6px 6px; }
.trip-peek { position:absolute; z-index:1; top:-30px; right:18px; width:72%; height:90px; pointer-events:none; }
.trip-peek span { position:absolute; right:calc(var(--peek,0) * 36px); top:calc(var(--peek,0) * 2px); width:82px; height:76px; padding:4px 4px 14px; border-radius:4px; background:#eef3ef; box-shadow:0 8px 20px #02081766; transform:translateY(20px) rotate(calc((var(--peek,0) - 1) * 7deg)); transition:transform .45s cubic-bezier(.16,1,.3,1); }
.trip-peek span:nth-child(1) { --peek:0; }
.trip-peek span:nth-child(2) { --peek:1; }
.trip-peek span:nth-child(3) { --peek:2; }
.trip-peek img { width:100%; height:100%; object-fit:cover; }
.trip-folder:not([open]):hover .trip-peek span { transform:translateY(7px) rotate(calc((var(--peek,0) - 1) * 9deg)); }
.trip-folder[open] .trip-peek { opacity:0; }
.trip-cover img { width:100%; height:auto; aspect-ratio:1.45; object-fit:cover; transition:transform .65s cubic-bezier(.22,1,.36,1),filter .65s; filter:saturate(.8); }
.trip-folder summary:hover img,.trip-folder[open] .trip-cover img { transform:scale(1.045); filter:saturate(1); }
.trip-stamp { position:absolute; bottom:12px; left:12px; font:9px monospace; letter-spacing:2px; padding:6px 8px; background:#102337dd; border:1px solid #ffffff40; }
.trip-folder-title { display:flex; align-items:center; justify-content:space-between; margin-top:20px; gap:12px; }
.trip-folder-title strong { font:32px/1.2 Georgia,serif; }
.trip-plus { font-size:26px; color:#b4f5ed; transition:transform .4s; }
.trip-folder[open] .trip-plus { transform:rotate(45deg); }
.trip-region { display:block; margin-top:10px; color:var(--muted); font-size:12px; }
.trip-open-label { display:block; margin-top:24px; color:#b4f5ed; font-size:11px; }
.trip-folder-content { padding:0 18px 18px; overflow:hidden; }
.trip-folder-content > p { border-top:1px solid var(--line); padding-top:18px; color:var(--muted); font-size:12px; }
.trip-frames { position:relative; height:390px; margin-top:18px; }
.trip-media-window { position:absolute; left:50%; top:12px; width:var(--window-width,70%); margin:0; padding:7px 7px 28px; border:1px solid #fff9; border-radius:8px; background:#e9eeea; box-shadow:0 22px 45px #02081780; transform:translate(calc(-50% + var(--window-x)),var(--window-y)) rotate(var(--window-rotate)); transform-origin:center; transition:opacity .3s,transform .5s cubic-bezier(.16,1,.3,1); }
.trip-media-window:hover,.trip-media-window:focus-within { z-index:5; transform:translate(calc(-50% + var(--window-x)),calc(var(--window-y) - 8px)) rotate(0deg) scale(1.035); }
.trip-media-window.is-closed { opacity:0; transform:translate(calc(-50% + var(--window-x)),calc(var(--window-y) + 24px)) rotate(var(--window-rotate)) scale(.82); pointer-events:none; }
.trip-frames img { width:100%; height:auto; aspect-ratio:1.2; object-fit:cover; border-radius:4px; }
.trip-frames figcaption { font-size:10px; color:var(--muted); margin-top:8px; }
.trip-media-window figcaption { color:#263a42; margin:8px 4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.trip-window-close { position:absolute; z-index:3; top:12px; right:12px; width:30px; height:30px; border:1px solid #fff8; border-radius:50%; color:white; background:#071728b8; font-size:18px; line-height:1; }
@media(max-width:760px) {
  .trip-folders { grid-template-columns:1fr; gap:54px; }
  .trip-trail { margin-block:30px 54px; }
  .trip-trail strong { font-size:12px; }
  .trip-trail small { font-size:10px; }
  .trip-trail > * { padding-right:8px; }
  .trip-frames { height:340px; }
  .trip-media-window { width:min(var(--window-width,78%),270px); }
  .lens-toggle { transition:width .35s,height .35s; }
}
@media(prefers-reduced-motion:reduce) {
  .trip-folder *,.trip-trail *, .focus-dial,.focus-dial *,.mobile-lens * { animation:none!important; transition:none!important; }
}
.motion-paused .trip-folder *,.motion-paused .trip-trail *, .motion-paused .focus-dial,.motion-paused .focus-dial *,.motion-paused .mobile-lens * { animation:none!important; transition:none!important; }

#trips { scroll-margin-top:150px; }

/* Mobile camera HUD: a compact, tactile navigation panel with a real
   hierarchy instead of six disconnected floating buttons. */
@media(max-width:760px) {
  body.lens-menu-open { overflow:hidden; }
  .mobile-lens {
    --lens-panel:#0a1729f5;
    --lens-edge:#b9fff33d;
    --lens-glow:#52ead8;
    transition:width .46s cubic-bezier(.16,1,.3,1),height .46s cubic-bezier(.16,1,.3,1),left .46s cubic-bezier(.16,1,.3,1),right .46s cubic-bezier(.16,1,.3,1),opacity .3s;
  }
  .mobile-lens::before {
    content:'';
    position:fixed;
    inset:0;
    z-index:-2;
    background:linear-gradient(180deg,#07111c4d,#020916d9);
    opacity:0;
    pointer-events:none;
    transition:opacity .35s;
  }
  .mobile-lens.is-open {
    width:min(370px,calc(100vw - 20px));
    height:min(390px,calc(100dvh - 100px));
    left:50%;
    right:auto;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    transform:translateX(-50%);
  }
  .mobile-lens.is-open::before { opacity:1; }
  .lens-fan {
    inset:0;
    overflow:hidden;
    border:1px solid var(--lens-edge);
    border-radius:28px;
    background:
      linear-gradient(145deg,#19344df2 0%,var(--lens-panel) 46%,#06111ff7 100%);
    box-shadow:0 30px 80px #000c,inset 0 1px 0 #eaffff26,inset 0 -40px 80px #02081499;
    opacity:0;
    transform:translateY(34px) scale(.9);
    transform-origin:50% 100%;
    clip-path:inset(72% 38% 4% round 28px);
    transition:opacity .25s,transform .5s cubic-bezier(.16,1,.3,1),clip-path .5s cubic-bezier(.16,1,.3,1);
  }
  .lens-fan::before {
    content:'';
    position:absolute;
    inset:-46% 12% 28%;
    border:1px solid #87fff225;
    border-radius:50%;
    background:
      repeating-radial-gradient(circle at 50% 100%,transparent 0 21px,#8bf9ed0c 22px 23px),
      conic-gradient(from 225deg at 50% 100%,transparent,#53e2d719,transparent 30%);
    filter:drop-shadow(0 0 24px #43e0d51c);
  }
  .lens-fan::after {
    content:'FOCUS / QUICK NAVIGATION  ·  06 SECTIONS';
    position:absolute;
    top:24px;
    left:24px;
    color:#c8dedf;
    font:600 8px/1.4 monospace;
    letter-spacing:1.4px;
  }
  .is-open .lens-fan {
    opacity:1;
    transform:none;
    clip-path:inset(0 round 28px);
  }
  .lens-options {
    inset:64px 18px 96px;
    z-index:2;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-content:center;
    gap:10px;
  }
  .lens-options a {
    position:relative;
    left:auto;
    bottom:auto;
    width:auto;
    min-height:62px;
    padding:11px 12px;
    flex-direction:row;
    justify-content:flex-start;
    gap:10px;
    overflow:hidden;
    border:1px solid #d8ffff20;
    border-radius:12px;
    background:linear-gradient(135deg,#eaffff0f,#eaffff05);
    box-shadow:inset 0 1px 0 #fff0;
    color:#d8e7ef;
    text-align:left;
    font:500 13px/1.15 var(--sans);
    visibility:hidden;
    opacity:0;
    transform:translateY(22px) scale(.96);
    transition:opacity .24s,transform .46s cubic-bezier(.16,1,.3,1),border-color .25s,background .25s,box-shadow .25s;
  }
  .lens-options a::before {
    content:'';
    position:absolute;
    inset:0 auto 0 0;
    width:2px;
    background:var(--lens-glow);
    opacity:0;
  }
  .lens-options a::after {
    content:'↗';
    margin-left:auto;
    color:#9bb5c5;
    font-size:12px;
    transform:translate(-3px,3px);
    opacity:.55;
    transition:transform .25s,opacity .25s;
  }
  .lens-options a span {
    display:grid;
    flex:0 0 27px;
    width:27px;
    height:27px;
    place-items:center;
    border:1px solid #c6ffff2b;
    border-radius:50%;
    color:#91aebb;
    background:#06111e80;
    font:600 9px/1 monospace;
    letter-spacing:0;
  }
  .lens-options a[aria-current] {
    border-color:#83f6e268;
    background:linear-gradient(135deg,#55dfcf2b,#5ce4d808);
    box-shadow:inset 0 1px 0 #d8fff22e,0 8px 24px #00101f55;
    color:#dffff9;
  }
  .lens-options a[aria-current]::before { opacity:1; box-shadow:0 0 15px var(--lens-glow); }
  .lens-options a[aria-current] span { border-color:#8ff9e5a8; color:#dffff8; background:#42cdbc24; }
  .lens-options a:is(:hover,:focus-visible) {
    border-color:#a3fff078;
    background:linear-gradient(135deg,#68e7d837,#73e6d70d);
    box-shadow:inset 0 1px 0 #e8fff53d,0 10px 26px #00101f73;
  }
  .lens-options a:is(:hover,:focus-visible)::after { opacity:1; transform:none; }
  .is-open .lens-options a {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:none;
    transition-delay:calc(80ms + var(--lens-order)*42ms);
  }
  .lens-toggle {
    width:74px;
    height:74px;
    bottom:16px;
    border:1px solid #d8ffff6b;
    background:radial-gradient(circle at 38% 28%,#426779,#0b1d30 48%,#050c17 100%);
    box-shadow:0 14px 34px #000b,inset 0 0 0 3px #375064,inset 0 0 0 7px #061321,0 0 0 1px #07101a;
    transition:width .35s,height .35s,transform .45s cubic-bezier(.16,1,.3,1),box-shadow .35s;
  }
  .lens-ring {
    inset:-8px;
    background:repeating-conic-gradient(from 0deg,#c9ffff9c 0deg 1deg,#173047 1deg 6deg);
    mask-image:radial-gradient(transparent 60%,black 62%);
    filter:drop-shadow(0 0 5px #020811);
    transition:transform .7s cubic-bezier(.16,1,.3,1);
  }
  .lens-glass {
    inset:10px;
    background:radial-gradient(circle at 34% 24%,#c3fff68a,transparent 25%),radial-gradient(circle at 62% 72%,#285886,#07101e 72%);
    box-shadow:inset 0 0 18px #000d,0 0 18px #4adccb1f;
    transition:box-shadow .35s,transform .45s cubic-bezier(.16,1,.3,1);
  }
  .lens-iris {
    inset:7px;
    background:repeating-conic-gradient(from 20deg,#4c98a5 0 39deg,#122c46 40deg 60deg);
    clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
    transition:transform .65s cubic-bezier(.16,1,.3,1),filter .35s;
  }
  .lens-iris::after {
    inset:10px;
    background:radial-gradient(circle,#020711 0 48%,#0b2038 52% 100%);
    box-shadow:0 0 10px #5ff5e84f;
  }
  .lens-button-label {
    color:#eafffb;
    font:700 9px/1 monospace;
    letter-spacing:1px;
    text-transform:uppercase;
  }
  .lens-section-label {
    bottom:0;
    border-color:#bafff033;
    background:#07182bea;
    color:#c8fff7;
    box-shadow:0 7px 18px #0006;
    font-size:9px;
    transition:opacity .2s,transform .3s;
  }
  .is-open .lens-toggle {
    transform:translateX(-50%) scale(1.06);
    box-shadow:0 17px 40px #000d,inset 0 0 0 3px #47697e,inset 0 0 0 7px #061321,0 0 28px #54e2d738;
  }
  .is-open .lens-ring { transform:rotate(calc(var(--lens-rotation,0deg) + 145deg)); }
  .is-open .lens-glass { transform:scale(.94); box-shadow:inset 0 0 22px #000,0 0 28px #57ebda42; }
  .is-open .lens-iris { transform:rotate(calc(var(--lens-rotation,0deg)*-.5 + 105deg)) scale(.72); filter:saturate(1.25); }
  .is-open .lens-section-label { opacity:0; transform:translateX(-50%) translateY(4px); }
}

@media(max-width:760px) and (max-height:500px) {
  .mobile-lens.is-open { height:calc(100dvh - 10px); bottom:5px; }
  .lens-fan::after { top:14px; }
  .lens-options { inset:40px 16px 78px; gap:7px; }
  .lens-options a { min-height:54px; padding:8px 10px; }
  .lens-toggle { width:58px; height:58px; bottom:10px; }
  .lens-button-label { font-size:8px; }
}

/* Flowing lens navigation: the controls travel out of the aperture and settle
   on one continuous orbit instead of forming a conventional app grid. */
@media(max-width:760px) {
  .mobile-lens.is-open {
    width:min(360px,calc(100vw - 16px));
    height:334px;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
  }
  .lens-fan {
    inset:4px 0 18px;
    border-color:#bdfff22e;
    border-radius:180px 180px 30px 30px;
    background:
      radial-gradient(ellipse at 50% 105%,#22606b80 0%,#112d42ef 42%,#081627f5 72%),
      linear-gradient(145deg,#24465eed,#06111ff7);
    box-shadow:0 26px 70px #000b,inset 0 1px 0 #efffff24,inset 0 -45px 75px #0208148f;
    clip-path:inset(78% 42% 2% round 50%);
  }
  .lens-fan::before {
    inset:38px 22px -126px;
    border:1px solid #8ffbea22;
    border-bottom-color:transparent;
    border-radius:50% 50% 0 0;
    background:
      repeating-radial-gradient(ellipse at 50% 100%,transparent 0 41px,#99fff00a 42px 43px),
      conic-gradient(from 228deg at 50% 100%,transparent 0 20%,#64e6d619 28%,transparent 36% 64%,#64e6d619 72%,transparent 80%);
  }
  .lens-fan::after {
    content:'QUICK FOCUS  /  06 SECTIONS';
    top:38px;
    left:50%;
    width:max-content;
    transform:translateX(-50%);
    color:#bcd4dc;
    letter-spacing:1.25px;
  }
  .is-open .lens-fan { clip-path:inset(0 round 180px 180px 30px 30px); }
  .lens-options {
    inset:0;
    display:block;
    overflow:visible;
  }
  .lens-options::before {
    content:'';
    position:absolute;
    left:23px;
    right:23px;
    bottom:53px;
    height:210px;
    border:1px solid #87f5e621;
    border-bottom-color:transparent;
    border-radius:50% 50% 0 0;
    opacity:0;
    transform:scale(.72,.55) translateY(54px);
    transform-origin:50% 100%;
    transition:opacity .32s,transform .62s cubic-bezier(.16,1,.3,1);
  }
  .is-open .lens-options::before { opacity:1; transform:none; }
  .lens-options a {
    --lens-tilt:0deg;
    position:absolute;
    left:calc(50% + var(--lens-x));
    bottom:calc(31px + var(--lens-rise));
    width:70px;
    min-height:52px;
    padding:7px 5px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    overflow:visible;
    border:1px solid #d8ffff25;
    border-radius:24px;
    background:linear-gradient(145deg,#dfffff13,#a9e9ef08);
    box-shadow:inset 0 1px 0 #ffffff12,0 9px 25px #0004;
    color:#d8e8ee;
    text-align:center;
    font:600 11px/1.08 var(--sans);
    visibility:hidden;
    opacity:0;
    transform:translate(-50%,calc(var(--lens-rise)*.72)) scale(.3) rotate(0deg);
    transform-origin:50% 115%;
    transition:opacity .24s,transform .62s cubic-bezier(.12,.82,.22,1),border-color .25s,background .25s,box-shadow .25s;
  }
  .lens-options a:nth-child(1) { --lens-tilt:-8deg; }
  .lens-options a:nth-child(2) { --lens-tilt:-5deg; }
  .lens-options a:nth-child(3) { --lens-tilt:-2deg; }
  .lens-options a:nth-child(4) { --lens-tilt:2deg; }
  .lens-options a:nth-child(5) { --lens-tilt:5deg; }
  .lens-options a:nth-child(6) { --lens-tilt:8deg; }
  .lens-options a::before {
    inset:auto auto -8px 50%;
    width:4px;
    height:4px;
    border-radius:50%;
    background:#8bf9e8;
    box-shadow:0 0 12px #61eadb;
    opacity:.24;
    transform:translateX(-50%);
  }
  .lens-options a::after {
    content:'';
    position:absolute;
    left:50%;
    bottom:-5px;
    width:1px;
    height:5px;
    margin:0;
    background:#8bf9e85c;
    opacity:.45;
    transform:none;
  }
  .lens-options a span {
    display:block;
    width:auto;
    height:auto;
    flex:0 0 auto;
    border:0;
    border-radius:0;
    background:none;
    color:#84a8b6;
    font:600 8px/1 monospace;
    letter-spacing:1px;
  }
  .lens-options a[aria-current] {
    border-color:#9affebb0;
    background:linear-gradient(145deg,#62e2d333,#71e7da12);
    box-shadow:inset 0 1px 0 #effffb42,0 10px 28px #00101f73,0 0 22px #4be0d12d;
    color:#effffb;
  }
  .lens-options a[aria-current]::before { opacity:1; }
  .lens-options a[aria-current] span { color:#b9fff3; background:none; }
  .lens-options a:is(:hover,:focus-visible) {
    border-color:#a3fff095;
    background:linear-gradient(145deg,#6ce7da3d,#73e6d713);
    box-shadow:inset 0 1px 0 #effffb42,0 12px 30px #00101f80,0 0 20px #4be0d126;
  }
  .is-open .lens-options a {
    visibility:visible;
    opacity:1;
    pointer-events:auto;
    transform:translate(-50%,0) scale(1) rotate(var(--lens-tilt));
    transition-delay:calc(70ms + var(--lens-order)*48ms);
  }
  .is-open .lens-options a:is(:hover,:focus-visible) { transform:translate(-50%,-5px) scale(1.04) rotate(0deg); }
  .lens-toggle {
    width:72px;
    height:72px;
    bottom:14px;
  }
  .is-open .lens-toggle { transform:translateX(-50%) scale(1.02); }
}

@media(max-width:350px) {
  .lens-options a { width:64px; font-size:10px; }
  .lens-options a:nth-child(1) { --lens-x:-108px!important; }
  .lens-options a:nth-child(2) { --lens-x:-84px!important; }
  .lens-options a:nth-child(3) { --lens-x:-32px!important; }
  .lens-options a:nth-child(4) { --lens-x:32px!important; }
  .lens-options a:nth-child(5) { --lens-x:84px!important; }
  .lens-options a:nth-child(6) { --lens-x:108px!important; }
}

@media(max-width:760px) and (max-height:500px) {
  .mobile-lens.is-open { height:334px; bottom:5px; }
  .lens-fan::after { top:38px; }
  .lens-options { inset:0; }
  .lens-options a { min-height:50px; padding:6px 5px; }
  .lens-toggle { width:62px; height:62px; bottom:10px; }
}

/* Stable iPhone layout: an opaque header and native vertical page scrolling. */
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.deck-stage { touch-action:pan-y pinch-zoom; }
.deck-card { -webkit-backface-visibility:hidden; }
@media(max-width:760px) {
  .header,.is-ios .header { background:#101b30; -webkit-backdrop-filter:none; backdrop-filter:none; }
  .header-inner { padding-top:max(12px,env(safe-area-inset-top,0px)); height:auto; }
  .section { scroll-margin-top:16px; }
  .deck-card { transition:transform .32s cubic-bezier(.22,.75,.15,1),opacity .2s; }
  .deck-stage.dragging .deck-card { transition:none; }
  .deck-hint { font:11px/1.7 var(--sans); letter-spacing:0; }
  #deck-category { font-size:10px; letter-spacing:1px; overflow-wrap:anywhere; }
  /* The persistent header already provides Menu; keep photographs unobstructed. */
  .mobile-lens:not(.is-open) { display:none; }
  .mobile-lens.is-open { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
  .journey-preview-intro,.chapter-copy,.contact > div { min-width:0; }
  .journey-preview-cta,.hero-actions a { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) { .deck-card { transition:none!important; } }
/* Carousel transitions remain useful on iOS; decorative effects stay simplified. */
@media(prefers-reduced-motion:no-preference) {
  .is-ios #archive-deck .deck-card { transition-duration:.32s,.2s!important; transition-delay:0s!important; }
  .is-ios #archive-deck .deck-stage.dragging .deck-card { transition:none!important; }
}
@media(max-width:760px) {
  #archive-deck[data-mode=dna] .deck-card { transition:transform .32s cubic-bezier(.22,.75,.15,1),opacity .2s; }
  #archive-deck[data-mode=dna] .deck-stage.dragging .deck-card { transition:none; }
  #archive-deck[data-mode=dna] .deck-stage::before { filter:none; }
}

/* Keep action icons attached to their labels. */
.text-link,.journey-text-link,.chapter-open,.journey-preview-cta,.btn,.deck-open,.card-btn { gap:8px; justify-content:flex-start; }
.text-link .ui-icon,.journey-text-link .ui-icon,.chapter-open .ui-icon,.btn .ui-icon { margin-left:0; }

/* A compact focus barrel, seen from the side, with a fixed selection pointer. */
@media(min-width:761px) {
  .header .focus-dial:not(.active) { width:66px; height:min(304px,calc(100dvh - 48px)); right:14px; padding:14px 5px; border:1px solid #b8e8ed24; border-radius:16px; background:repeating-linear-gradient(0deg,transparent 0 3px,#c1edee0c 3px 4px),linear-gradient(90deg,#07121d,#1b3442 48%,#081520); background-position:0 var(--tick-offset,0),0 0; box-shadow:inset 2px 0 4px #bafaff14,inset -6px 0 14px #0009,0 10px 28px #0005; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .focus-dial:not(.active) .dial-caption { display:none; }
  .focus-dial:not(.active) .dial-window { height:100%; flex:1; mask-image:linear-gradient(transparent,#000 20%,#000 80%,transparent); }
  .focus-dial:not(.active) .dial-track { top:calc(50% - 38px); }
  .focus-dial:not(.active) a { height:76px; min-height:76px; color:#bebfc3; }
  .focus-dial:not(.active) a[aria-current] { color:#fff; background:none; }
  .focus-dial:not(.active) .dial-label { font-size:9px; font-weight:700; letter-spacing:1.8px; margin-left:30px; }
  .focus-dial:not(.active) .dial-stop { color:#77797d; left:11px; font-size:7px; }
  .focus-dial:not(.active) .dial-marker { left:4px; right:4px; height:56px; border-block:1px solid #b5ede529; background:linear-gradient(90deg,#8aeee714,transparent); }
  .focus-dial:not(.active) .dial-marker::before { top:24px; left:0; border-left:7px solid white; border-top:5px solid transparent; border-bottom:5px solid transparent; filter:drop-shadow(0 0 3px #fff6); }
  .focus-dial:not(.active) .dial-marker::after { content:none; }
  .header .focus-dial.active { width:min(288px,calc(100vw - 40px)); height:min(470px,calc(100dvh - 40px)); padding:20px; border-radius:16px; border-color:#b8e8ed24; background:linear-gradient(125deg,#193144,#101d2c); }
  .focus-dial.active a { height:52px; min-height:52px; gap:12px; }
  .focus-dial.active .dial-label { font-size:21px; }
  .focus-dial.active a::after { margin-left:0; font-size:18px; }
}

/* Fill the desktop canvas while keeping prose comfortable to read. */
@media(min-width:1025px) {
  .section { padding-block:68px; }
  .archive-section { padding-top:52px; }
  .journey-preview { padding-block:60px; margin-block:24px; gap:40px; }
  .about { grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:clamp(40px,5vw,80px); }
  .portrait-wrap { max-width:560px; width:100%; }
  .contact { padding-block:56px; }
  .journey-page .container,.journey-page .journey-nav { width:min(1480px,calc(100% - 80px)); }
}