/* Cinematic art direction and optional interaction layer. */
body {
  background: radial-gradient(ellipse at 3% 14%, #13446988, transparent 38%),
    radial-gradient(ellipse at 94% 53%, #0c6f7333, transparent 36%), #101b30;
}
.header { background: #101b30cc; }
.header-note { font-size: 8px; letter-spacing: 1.4px; }
.header-inner { gap: 24px; }
.motion-toggle, .nav-open-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1px solid #d2f6ff30; background: #d2f6ff09; border-radius: 30px;
  min-height: 44px; padding: 10px 19px; font-size: 11px; white-space: nowrap;
  transition: background .25s, border-color .25s;
}
.motion-toggle { font-size: 9px; border-color: transparent; padding: 9px 0; }
.motion-toggle:hover, .nav-open-btn:hover { border-color: #7effec; background: #0bd1d112; }
.menu-icon { width: 18px; height: 15px; position: relative; }
.menu-icon i { position: absolute; width: 18px; height: 1px; background: #affff2; left: 0; top: 4px; transition: transform .4s, top .4s; }
.menu-icon i:last-child { top: 10px; width: 12px; left: auto; right: 0; }
[aria-expanded=true] .menu-icon i { top: 7px; transform: rotate(45deg); }
[aria-expanded=true] .menu-icon i:last-child { width: 18px; transform: rotate(-45deg); }
.focus-dial { transition: width .55s cubic-bezier(.22,1,.36,1), height .55s cubic-bezier(.22,1,.36,1), border-radius .5s, box-shadow .4s; }
@media (min-width: 761px) {
  .focus-dial:hover { box-shadow: 0 0 40px #0bd1d119, inset 0 0 24px #0bd1d10d; }
  .focus-dial.active {
    width: 380px; height: min(590px,calc(100dvh - 120px)); padding: 26px;
    border-radius: 26px; background: linear-gradient(125deg,#25435eef,#10233af5);
    box-shadow: 0 32px 100px #030b22b3, inset 0 1px 0 #c4fffb30;
  }
  .focus-dial.active .dial-window { height: auto; flex: 1; mask-image: none; overflow: auto; }
  .focus-dial.active .dial-track { position: static; transform: none; }
  .focus-dial.active .dial-marker { opacity: 0; }
  .focus-dial.active .dial-caption { text-align: left; width: 100%; font-size: 9px; padding-bottom: 20px; }
  .focus-dial.active a { height: 80px; min-height: 64px; transform: none; opacity: 1; justify-content: start; gap: 18px; border-bottom: 1px solid #ffffff20; border-radius: 0; }
  .focus-dial.active .dial-label { writing-mode: horizontal-tb; transform: none; font-size: 30px; letter-spacing: -1px; text-transform: none; font-weight: 400; }
  .focus-dial.active .dial-stop { position:static; writing-mode: horizontal-tb; transform: none; font-size: 10px; }
  .focus-dial.active a::after { content: '↗︎'; margin-left: auto; font-size: 24px; opacity: 0; transform: translate(-8px,8px); transition: opacity .3s,transform .3s; }
  .focus-dial.active a:hover::after, .focus-dial.active a:focus-visible::after { opacity: 1; transform: none; }
}
.focus-dial.active a { animation: menu-arrive .65s both cubic-bezier(.16,1,.3,1); }
.focus-dial.active a:nth-child(2) { animation-delay: 50ms; }
.focus-dial.active a:nth-child(3) { animation-delay: 100ms; }
.focus-dial.active a:nth-child(4) { animation-delay: 150ms; }
.focus-dial.active a:nth-child(5) { animation-delay: 200ms; }
@keyframes menu-arrive { from { opacity: 0; translate: 24px 0; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
.cinematic-hero { border-radius: 6px 6px 64px 6px; height: min(850px,calc(100svh - 105px)); min-height: 720px; }
.cinematic-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(340px circle at var(--light-x,-400px) var(--light-y,-400px), #adfff514, transparent 80%); pointer-events: none; z-index: -1; }
.cinematic-hero .hero-frame:after { background: linear-gradient(90deg,#081b32c9,#0b28424d 80%),linear-gradient(0deg,#071a30f5,transparent 50%); }
.cinematic-hero .hero-heading { top: 17%; left: 6%; }
.cinematic-hero h1 { font-size: clamp(64px,8.1vw,118px); line-height: .9; letter-spacing: -6px; font-weight: 650; }
.title-line { display: block; overflow: hidden; padding-bottom: .1em; }
.title-line > * { display: block; }
.cinematic-hero h1 em { font-style: italic; font-family: Georgia,serif; font-weight: 400; color: #a5fff0; letter-spacing: -5px; }
.cinematic-intro { font-size: 16px; margin-top: 23px; max-width: 380px; }
.hero-cta { border-radius: 8px; padding: 15px 23px; }
.hero-cta span { transition: transform .25s; }
.hero-cta:hover span { transform: translate(3px,-3px); }
.hero-edition { position: absolute; right: 5%; top: 40%; writing-mode: vertical-rl; color: #d2eeeead; font: 9px/2 monospace; letter-spacing: 2px; }
.quiet-view .hero-edition { opacity: 0; }
.scene-selector { background: #adf9f411; border-color: #d4fff945; border-radius: 12px; box-shadow: 0 8px 36px #05132755; }
.scene-choice { border-radius: 3px; height: 64px; width: 63px; }
.scene-word { position:absolute; z-index:-1; right:15%; bottom:112px; width:50%; margin:0; text-align:right; text-transform:uppercase; white-space:nowrap; font:650 clamp(30px,3.6vw,54px)/.9 'Segoe UI',Arial,sans-serif; letter-spacing:-.055em; color:#efffff; opacity:.28; text-shadow:0 16px 60px #031226cc; pointer-events:none; }
@media(min-width:1101px) {
  .scene-selector { right:4%; bottom:auto; top:50%; translate:0 -50%; flex-direction:column; gap:7px; padding:9px; }
  .scene-choice { width:52px; height:52px; }
  .scene-step { min-height:28px; width:52px; }
}
.quiet-toggle { border-radius: 8px; }
.frame-ribbon { font-size: 10px; padding-block: 32px; }
.frame-ribbon b { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.frame-ribbon:hover b { transform: rotate(180deg); }
.section-heading h2 { font-size: clamp(42px,5.3vw,76px); letter-spacing: -3px; font-weight: 400; }
.section-heading h2 em { font-family: Georgia,serif; font-style: italic; }
.collection-view { display: flex; gap: 8px; margin-bottom: 22px; }
.collection-view .filter-btn { border-radius: 7px; }
.photo-card { border: 0; box-shadow: none; background: transparent; backdrop-filter: none; padding: 0; border-radius: 0; }
.photo-view { position: relative; border-radius: 6px; }
.photo-view::after { content: 'VIEW FRAME ↗︎'; position: absolute; left: 18px; bottom: 18px; padding: 12px 18px; background: #122b45ad; color: white; border: 1px solid #ffffff55; backdrop-filter: blur(14px); font: 9px/1.5 'Segoe UI',sans-serif; letter-spacing: 2px; border-radius: 5px; opacity: 0; transform: translateY(10px); transition: transform .4s,opacity .4s; }
.photo-view:is(:hover,:focus-visible)::after { opacity: 1; transform: none; }
.photo-info { border-bottom: 1px solid #d5edff26; padding: 21px 75px 22px 0; }
.photo-info h3 { font-size: 21px; font-weight: 400; }
.photo-info p { color: #a9c6d6; }
.photo-grid { gap: 38px 26px; }
.editorial-grid { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 60px 38px; align-items: start; }
.editorial-grid .photo-card { grid-column: span 5; }
.editorial-grid .photo-card:nth-child(4n+1), .editorial-grid .photo-card:nth-child(4n+4) { grid-column: span 7; }
.editorial-grid .photo-card:nth-child(even) { margin-top: 110px; }
.editorial-grid .photo-view img { aspect-ratio: 1.2; }
.editorial-grid .photo-card:nth-child(4n+2) .photo-view img, .editorial-grid .photo-card:nth-child(4n+3) .photo-view img { aspect-ratio: .84; }
.photo-card:hover { transform: none; box-shadow: none; }
.photo-view:hover img { transform: scale(1.06); }
.stories { background: linear-gradient(120deg,#0e2e47aa,#14223f55); }
.feature-card { padding: 0; background: #afedff06; border-radius: 8px; overflow: hidden; }
.feature-card > img { border-radius: 0; }
.story-copy { padding: 30px; }
.story-copy h3 { font-family: Georgia,serif; font-size: 35px; font-weight: 400; }
.contact { border-radius: 8px; padding-block: 72px; }
.contact h2 { font-size: clamp(36px,5vw,70px); font-weight: 400; }
.contact-flower { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
.contact:hover .contact-flower { transform: rotate(90deg); }
.media-trail { position:relative; isolation:isolate; width:100%; max-width:none; min-height:560px; padding-inline:clamp(20px,5vw,72px); display:grid; place-items:center; overflow:hidden; border-block:1px solid #d5edff26; background:radial-gradient(circle at 50% 45%,#1d536b45,transparent 48%); }
.media-trail::before { content:''; position:absolute; inset:0; z-index:-2; opacity:.15; background-image:radial-gradient(#b6fff0 1px,transparent 1px); background-size:18px 18px; mask-image:radial-gradient(circle,#000,transparent 72%); }
.media-trail-copy { position:relative; z-index:2; text-align:center; max-width:1080px; pointer-events:none; }
.media-trail-copy h2 { font-size:clamp(54px,8.5vw,126px); line-height:.92; letter-spacing:-.065em; font-weight:450; color:#eefaff; }
.media-trail-copy > p:last-child { max-width:520px; margin:28px auto 0; color:#a8c1d1; font-size:14px; }
.media-hover-word { display:inline-flex; align-items:center; gap:0; pointer-events:auto; color:#a5fff0; outline:none; }
.inline-media { display:inline-block; width:0; height:.72em; margin-inline:0; overflow:hidden; border-radius:.12em; vertical-align:middle; opacity:0; transform:scale(.75) rotate(-4deg); transition:width .55s cubic-bezier(.16,1,.3,1),margin .55s,opacity .3s,transform .55s; }
.inline-media img { width:clamp(82px,10vw,160px); height:100%; object-fit:cover; }
.media-hover-word:is(:hover,:focus-visible) .inline-media { width:clamp(82px,10vw,160px); margin-inline:.12em; opacity:1; transform:none; }
.cursor-trail { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.trail-sticker { position:absolute; left:0; top:0; width:clamp(92px,10vw,150px); max-height:180px; object-fit:cover; border:0; border-radius:8px; box-shadow:0 16px 36px #02081770; will-change:transform,opacity; animation:trail-sticker-out 1.25s both cubic-bezier(.2,.7,.2,1); }
@keyframes trail-sticker-out { 0% { opacity:0; transform:translate3d(var(--trail-x),var(--trail-y),0) rotate(var(--trail-rotate)) scale(.7); } 18% { opacity:1; transform:translate3d(var(--trail-x),var(--trail-y),0) rotate(var(--trail-rotate)) scale(1); } 100% { opacity:0; transform:translate3d(calc(var(--trail-x) + var(--trail-drift)),calc(var(--trail-y) - 26px),0) rotate(var(--trail-rotate)) scale(.86); } }
@media (max-width: 1100px) and (min-width: 761px) {
  .header-note { display: none; }
  .motion-toggle { margin-left: auto; }
  .cinematic-hero { min-height: 820px; }
  .cinematic-hero h1 { font-size: 8vw; }
  .cinematic-hero .hero-heading { top: 16%; }
  .scene-caption { bottom: 190px; }
}
@media (max-width: 760px) {
  .header-inner { gap: 12px; }
  .motion-toggle { margin-left: auto; font-size: 8px; gap: 5px; }
  .nav-open-btn { padding: 10px 14px; }
  .focus-dial { display: flex; flex-direction: column; visibility: hidden; opacity: 0; transform: translateY(-14px); clip-path: inset(0 0 100% 0 round 0 0 22px 22px); transition: clip-path .5s cubic-bezier(.22,1,.36,1),transform .5s,opacity .35s,visibility .5s; }
  .focus-dial.active { visibility: visible; opacity: 1; transform: none; clip-path: inset(0 0 0 0 round 0 0 22px 22px); }
  .focus-dial .dial-label { font-size: 24px; font-weight: 400; letter-spacing: -.6px; }
  .focus-dial a { min-height: 62px; }
  .cinematic-hero { min-height: 750px; max-height: none; border-radius: 5px 5px 36px 5px; }
  .cinematic-hero .hero-heading { top: 19%; left: 7%; }
  .cinematic-hero h1 { font-size: clamp(42px,10.8vw,77px); letter-spacing: -2px; }
  .cinematic-hero h1 em { letter-spacing: -2.5px; }
  .cinematic-hero .hero-heading .eyebrow { max-width: 220px; line-height: 1.8; }
  .cinematic-intro { font-size: 14px; max-width: 210px; }
  .cinematic-intro br { display: block; }
  .hero-edition { display: none; }
  .scene-caption { bottom: 185px; }
  .scene-choice { height: 55px; width: 49px; }
  .quiet-toggle { top: 25px; right: 25px; }
  .scene-word { display:none; }
  .media-trail { min-height:430px; }
  .media-trail-copy h2 { font-size:clamp(48px,14vw,82px); }
  .cursor-trail { display:none; }
  .section-heading h2 { font-size: 46px; letter-spacing: -2px; }
  .editorial-grid { grid-template-columns: 1fr 1fr; gap: 32px 18px; }
  .editorial-grid .photo-card, .editorial-grid .photo-card:nth-child(4n+1), .editorial-grid .photo-card:nth-child(4n+4) { grid-column: auto; }
  .editorial-grid .photo-card:nth-child(even) { margin-top: 55px; }
  .photo-info { padding: 16px 0 40px; }
  .photo-info h3 { font-size: 18px; }
  .save-photo { bottom: 0; }
  .story-copy { padding: 24px; }
  .story-copy h3 { font-size: 29px; }
}
@media (max-width: 380px) {
  .wordmark { font-size: 22px; }
  .brand-dot { font-size: 23px; margin-left: 6px; }
  .motion-toggle { font-size: 0; }
  .motion-toggle span { font-size: 13px; }
  .header-inner { gap: 10px; }
  .cinematic-hero h1 { font-size: 39px; }
  .section-heading h2 { font-size: 39px; }
}
/* A manual pause is honored everywhere, alongside the operating-system setting. */
.motion-paused { scroll-behavior: auto; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after { animation: none!important; transition: none!important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; }
  .cursor-trail { display:none; }
}

/* A growing photo wall with calm, deliberate pacing. */
.mosaic-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 32px 20px; align-items: start; }
.mosaic-grid .photo-card { grid-column: span 2; margin: 0; }
.mosaic-grid .photo-card:nth-child(12n+1), .mosaic-grid .photo-card:nth-child(12n+2) { grid-column: span 3; }
.mosaic-grid .photo-view img { aspect-ratio: 1; }
.mosaic-grid .photo-card:nth-child(12n+1) .photo-view img, .mosaic-grid .photo-card:nth-child(12n+2) .photo-view img { aspect-ratio: 1.45; }
.mosaic-grid .photo-card:nth-child(12n+7) .photo-view img, .mosaic-grid .photo-card:nth-child(12n+8) .photo-view img, .mosaic-grid .photo-card:nth-child(12n+9) .photo-view img { aspect-ratio: .82; }
.gallery-pagination { display: flex; flex-direction: column; align-items: center; gap: 13px; margin-top: 45px; }
#load-more { min-width: 190px; padding: 14px 25px; border-color: #8dffef60; background: #9df9ec0c; color: #c8fff6; }
#collection-progress { font: 10px/1.6 monospace; color: #a5bfd4; letter-spacing: 2px; }
.gallery-reset { grid-column: 1 / -1; justify-self: start; }
.dialog-filmstrip { position: relative; display: flex; gap: 9px; overflow-x: auto; max-width: 100%; padding: 10px 3px; margin-top: 14px; scrollbar-width: thin; scrollbar-color: #3b8393 transparent; }
.filmstrip-thumb { flex: 0 0 62px; width: 62px; height: 50px; padding: 0; overflow: hidden; border: 1px solid #ffffff38; border-radius: 5px; background: #173148; opacity: .6; }
.filmstrip-thumb img { width: 100%; height: 100%; object-fit: cover; }
.filmstrip-thumb[aria-pressed=true] { opacity: 1; outline: 2px solid #8affed; outline-offset: 1px; }
.filmstrip-thumb:is(:hover,:focus-visible) { opacity: 1; }
#dialog-image { width: auto; height: auto; max-width: 100%; max-height: 53dvh; margin: auto; touch-action: pan-y pinch-zoom; }
#photo-position { position: absolute; top: 34px; left: 23px; font-size: 9px; color: #a9d1df; }
#photo-dialog { width: min(1050px,94vw); }
#photo-caption { font-size: clamp(18px,2.5vw,27px); }
#photo-dialog .dialog-controls { margin-top: 12px; }
@media (max-width: 760px) {
  .mosaic-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 16px; }
  .mosaic-grid .photo-card, .mosaic-grid .photo-card:nth-child(12n+1), .mosaic-grid .photo-card:nth-child(12n+2) { grid-column: span 1; }
  .mosaic-grid .photo-card:nth-child(6n+1) { grid-column: 1 / -1; }
  .mosaic-grid .photo-card:nth-child(6n+1) .photo-view img { aspect-ratio: 1.5; }
  .mosaic-grid .photo-view img, .mosaic-grid .photo-card:nth-child(12n+2) .photo-view img { aspect-ratio: 1; }
  #photo-dialog { padding: 16px; }
  #photo-position { left: 18px; top: 30px; font-size: 8px; }
  #dialog-image { max-height: 44dvh; }
  .collection-view { gap: 6px; flex-wrap: wrap; }
}