/* ================================================================
   Site skin — the "seen through the camera" look shared by every
   page: header, HUD, focus cursor, buttons, mobile menu, footer and
   page transitions, plus the inner-page treatment of the shared page
   vocabulary. Palette and type are style.css's own tokens.
   ================================================================ */
:root {
  --g: clamp(16px, 3.2vw, 48px);
  --ease: cubic-bezier(.76, 0, .24, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --blue-glow: #9fbcff;
  --film: #0b0d12;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
html:has(body.skin) { scroll-behavior: auto; }
.skin ::selection { background: var(--blue-deep); color: #fff; }

.tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-deep); display: inline-block; }

/* buttons: a shutter closes in from top and bottom on hover */
.bt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 16px 26px; border-radius: 3px; font-family: var(--font-body); font-weight: 600; font-size: 14.5px; line-height: 1; white-space: nowrap; overflow: hidden; isolation: isolate; transition: color .45s var(--ease), border-color .45s; border: 1px solid transparent; }
.bt::before, .bt::after { content: ""; position: absolute; left: 0; right: 0; height: 51%; z-index: -1; transform: scaleY(0); transition: transform .45s var(--ease); }
.bt::before { top: 0; transform-origin: top; }
.bt::after { bottom: 0; transform-origin: bottom; }
.bt:hover::before, .bt:hover::after { transform: scaleY(1); }
.bt .arr { width: 18px; height: 10px; flex: none; transition: transform .45s var(--ease); }
.bt:hover .arr { transform: translateX(4px); }
.bt-blue { background: var(--blue-deep); color: #fff; }
.bt-blue::before, .bt-blue::after { background: var(--ink); }
.bt-ink { background: var(--ink); color: #fff; }
.bt-ink::before, .bt-ink::after { background: var(--blue-deep); }
.bt-ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.bt-ghost::before, .bt-ghost::after { background: #fff; }
.bt-ghost:hover { color: var(--ink); }
.bt-wa { background: #1f9d55; color: #fff; }
.bt-wa::before, .bt-wa::after { background: var(--ink); }

.ln { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); padding-bottom: 6px; position: relative; }
.ln::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.ln:hover::after { transform: scaleX(0); }
.ln .arr { width: 18px; height: 10px; transition: transform .5s var(--ease); }
.ln:hover .arr { transform: translateX(6px); }

/* ================================================================
   HEADER — homepage skin of the shared markup
   ================================================================ */
.skin .site-header { padding: 0; transition: transform .6s var(--ease), background .4s, border-color .4s; border-bottom: 1px solid transparent; }
.skin .site-header.scrolled { background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--line); }
.skin .site-header.hide { transform: translateY(-100%); }
.skin .site-header .wrap { max-width: none; padding-inline: var(--g); }
.skin .site-header .nav-shell { height: 84px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; transition: height .4s var(--ease), color .4s; }
.skin .site-header.scrolled .nav-shell { height: 66px; color: var(--ink); box-shadow: none; }
.skin .brand small { color: inherit; opacity: .65; }
.skin .brand img { background: #fff; }
@media (min-width: 1080px) {
  .skin .main-nav { counter-reset: nav; gap: 26px; }
  .skin .main-nav > li > a { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 400; }
  .skin .main-nav > li > a::before { counter-increment: nav; content: "0" counter(nav); font-size: 9px; color: var(--blue-glow); align-self: flex-start; margin-top: -3px; }
  .skin .site-header.scrolled .main-nav > li > a::before { color: var(--blue); }
  .skin .nav-cta { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 400; padding: 11px 16px; border: 1px solid currentColor; border-radius: 3px; transition: background .3s, color .3s, border-color .3s; }
  .skin .nav-cta:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: #fff; }
}
.skin .nav-burger { color: inherit; }

/* mobile menu: opens like a shutter, from the centre line outwards */
.skin .mobile-nav { background: var(--ink); backdrop-filter: none; opacity: 1; visibility: visible; clip-path: inset(50% 0 50% 0); transition: clip-path .75s var(--ease); pointer-events: none; }
.skin .mobile-nav.open { clip-path: inset(0 0 0 0); pointer-events: auto; }
.skin .mobile-nav-panel { position: relative; width: 100%; height: 100%; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0; transform: none; color: #fff; padding: 24px var(--g) 36px; display: flex; flex-direction: column; }
.skin .mobile-nav-close { color: #fff; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; }
.skin .mobile-nav ul { margin-top: auto; counter-reset: mn; }
.skin .mobile-nav > .mobile-nav-panel > ul > li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.skin .mobile-nav > .mobile-nav-panel > ul > li > a, .skin .mobile-nav .sub-toggle > a { font-family: var(--font-display); font-size: clamp(30px, 8.5vw, 44px); padding: 10px 0; line-height: 1.15; }
.skin .mobile-nav > .mobile-nav-panel > ul > li > a::before, .skin .mobile-nav .sub-toggle > a::before { counter-increment: mn; content: "0" counter(mn) " "; font-family: var(--font-mono); font-size: 11px; color: var(--blue-glow); vertical-align: top; }
.skin .mobile-nav a.is-active { color: var(--blue-glow); }
.skin .mobile-nav .sub-list a { font-family: var(--font-mono); font-size: 13px; color: rgba(255, 255, 255, .65); padding: 9px 0; }
.skin .mobile-nav .contact-row { margin-top: 26px; margin-bottom: auto; }
.skin .mobile-nav .contact-row .btn-solid { background: var(--blue-deep); border-radius: 3px; }
.skin .mobile-nav .contact-row a:last-child { color: var(--blue-glow); }
.skin .mobile-nav .mobile-nav-panel > * { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .7s var(--ease-out); }
.skin .mobile-nav.open .mobile-nav-panel > * { opacity: 1; transform: none; transition-delay: .35s; }

.skin .wa-float { transition: opacity .4s, transform .4s; }
.skin.no-fab .wa-float { opacity: 0; transform: translateY(20px); pointer-events: none; }

/* ================================================================
   HUD — viewfinder corners, frame counter, film-advance progress
   ================================================================ */
.hud-corners { position: fixed; inset: 12px; z-index: 150; pointer-events: none; mix-blend-mode: difference; }
.hud-corners i { position: absolute; width: 20px; height: 20px; border: 0 solid #fff; }
.hud-corners i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.hud-corners i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.hud-corners i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.hud-corners i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.hud { position: fixed; left: 28px; bottom: 24px; z-index: 150; pointer-events: none; mix-blend-mode: difference; color: #fff; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 7px; }
.hud b { font-weight: 400; }
.hud-dot { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(2, start) infinite; }
.hud-name { position: relative; display: inline-block; overflow: hidden; height: 1.3em; min-width: 30ch; vertical-align: bottom; }
.hud-name span { position: absolute; left: 0; top: 0; white-space: nowrap; }
.hud-prog { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 300; pointer-events: none; }
.hud-prog i { position: absolute; inset: 0; background: var(--blue); transform-origin: left; transform: scaleX(0); }
@keyframes blink { to { visibility: hidden; } }
.skin.is-loading .hud, .skin.is-loading .hud-corners { opacity: 0; }
html.no-anim .hud, html.no-anim .hud-corners, html.no-anim .hud-prog { display: none; }

/* focus-bracket cursor: snaps around whatever it's "focusing" on */
.fcur { position: fixed; left: 0; top: 0; width: 28px; height: 28px; z-index: 400; pointer-events: none; color: #fff; mix-blend-mode: difference; opacity: 0; transition: opacity .3s, color .3s; }
.fcur.on { opacity: 1; }
.fcur i { position: absolute; width: 8px; height: 8px; border: 0 solid currentColor; transition: width .3s, height .3s; }
.fcur i:nth-child(1) { left: 0; top: 0; border-width: 1.5px 0 0 1.5px; }
.fcur i:nth-child(2) { right: 0; top: 0; border-width: 1.5px 1.5px 0 0; }
.fcur i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 1.5px 1.5px; }
.fcur i:nth-child(4) { right: 0; bottom: 0; border-width: 0 1.5px 1.5px 0; }
.fcur span { position: absolute; left: 0; top: -17px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; opacity: 0; transition: opacity .3s; }
.fcur.lock { mix-blend-mode: normal; color: var(--blue); }
.fcur.lock i { width: 14px; height: 14px; }
.fcur.lock span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .fcur, .loupe { display: none; } }

.loupe { position: fixed; left: 0; top: 0; width: 190px; height: 190px; border-radius: 50%; z-index: 410; pointer-events: none; background-color: var(--film); background-repeat: no-repeat; border: 4px solid #e9edf5; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 50px rgba(0, 0, 0, .45), inset 0 0 30px rgba(0, 0, 0, .35); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease-out); }
.loupe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)) center / 1px 22px no-repeat, linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .35)) center / 22px 1px no-repeat; }
.loupe.on { opacity: 1; transform: scale(1); }

/* footer: the shared footer, with its stray un-styled list line evened out */
.skin .footer-col li { font-size: .94rem; color: rgba(247, 243, 236, .75); }
.skin .footer-col li span { color: rgba(247, 243, 236, .5); }


/* header stays light on pages without a dark top (journal posts) */
.skin .site-header.is-solid { background: rgba(255, 255, 255, .9); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom-color: var(--line); }
.skin .site-header.is-solid .nav-shell { height: 66px; color: var(--ink); }
.skin .site-header.is-solid .main-nav > li > a::before { color: var(--blue); }
@media (max-width: 1079px) { .skin .site-header .nav-shell { height: 72px; } }
@media (max-width: 700px) { .hud { display: none; } .hud-corners { inset: 8px; } }

/* page transition: the aperture closes on the way out and opens on arrival */
html.pt-in::after { content: ""; position: fixed; inset: 0; z-index: 700; background: var(--ink); }
.pt { position: fixed; inset: 0; z-index: 700; pointer-events: none; display: none; }
.pt.on { display: block; pointer-events: auto; }
.pt .iris-fill { fill: var(--ink); fill-rule: evenodd; }
.pt .iris-lines { fill: none; stroke: rgba(219, 230, 251, .14); stroke-width: 1.4; }

/* ================================================================
   INNER PAGES — the same camera language as the homepage, applied
   to the shared page vocabulary (page-intro, service-banner,
   split-layout, detail-row, tier-card, faq-row, masonry …)
   ================================================================ */
.page-inner main { overflow-x: clip; }
.page-inner .wrap { max-width: 1320px; padding-inline: var(--g); }

.page-inner .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; line-height: 1.6; color: var(--blue-deep); }
.page-inner .eyebrow::before { content: "("; width: auto; height: auto; background: none; }
.page-inner .eyebrow::after { content: ")"; }
.page-inner main h1, .page-inner main h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.03em; }
.page-inner main h2 { font-size: clamp(34px, 4.4vw, 68px); line-height: 1.02; }
.page-inner main h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.015em; }
.page-inner .lede { color: var(--ink-soft); max-width: 56ch; }
.page-inner .section { padding: clamp(80px, 10vw, 150px) 0; }
.page-inner .section-alt { background: var(--paper-dim); }
.page-inner .section-head { max-width: 760px; }

/* buttons + links */
.skin .btn-solid { position: relative; overflow: hidden; isolation: isolate; border-radius: 3px; padding: 17px 28px; background: var(--blue-deep); color: #fff; font-weight: 600; transition: color .45s var(--ease); }
.skin .btn-solid::before, .skin .btn-solid::after { content: ""; position: absolute; left: 0; right: 0; height: 51%; z-index: -1; background: var(--ink); transform: scaleY(0); transition: transform .45s var(--ease); }
.skin .btn-solid::before { top: 0; transform-origin: top; }
.skin .btn-solid::after { bottom: 0; transform-origin: bottom; }
.skin .btn-solid:hover { background: var(--blue-deep); transform: none; }
.skin .btn-solid:hover::before, .skin .btn-solid:hover::after { transform: scaleY(1); }
.page-inner main .link-arrow { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 0; padding-bottom: 6px; position: relative; gap: 12px; }
.page-inner main .link-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform-origin: right; transition: transform .6s var(--ease); }
.page-inner main .link-arrow:hover::after { transform: scaleX(0); }

/* ---------- intro band: a dark viewfinder ---------- */
.page-inner main > .page-intro:first-child { position: relative; overflow: hidden; background: var(--ink); color: #fff; padding: clamp(150px, 17vw, 230px) 0 clamp(80px, 9vw, 130px); }
.page-inner main > .page-intro:first-child::before { content: ""; position: absolute; width: 70vw; height: 70vw; right: -20vw; top: -30vw; border-radius: 50%; background: radial-gradient(circle, rgba(78, 127, 224, .28) 0%, rgba(78, 127, 224, 0) 65%); pointer-events: none; }
.page-inner .page-intro .wrap.section-head { max-width: 1320px; position: relative; z-index: 2; }
.page-inner .page-intro h1 { max-width: 17ch; }
.page-inner main > .page-intro:first-child .eyebrow { color: var(--blue-glow); }
.page-inner main > .page-intro:first-child h1 { color: #fff; font-size: clamp(46px, 7vw, 116px); line-height: .96; margin-top: 22px; }
.page-inner main > .page-intro:first-child .lede { color: rgba(255, 255, 255, .72); margin-top: 26px; font-size: clamp(16px, 1.3vw, 19px); }
.page-inner main > .page-intro:first-child .link-arrow { color: #fff !important; }

/* viewfinder chrome injected by site.js into the intro band and banners */
.vfx { position: absolute; inset: 96px var(--g) 22px; pointer-events: none; z-index: 1; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.vfx i { position: absolute; width: 26px; height: 26px; border: 0 solid rgba(255, 255, 255, .75); }
.vfx i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.vfx i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.vfx i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.vfx i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.vfx-t, .vfx-b { position: absolute; left: 40px; right: 40px; display: flex; justify-content: space-between; gap: 20px; }
.vfx-t { top: 14px; }
.vfx-b { bottom: 12px; }
.vfx .rec { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-glow); margin-right: 8px; animation: blink 1.2s steps(2, start) infinite; }

/* ---------- service banner: the viewfinder hero ---------- */
.page-inner .service-banner { height: min(92vh, 980px); min-height: 520px; background: var(--ink); }
.page-inner .service-banner img { width: 100%; height: 100%; object-fit: cover; }
.page-inner .service-banner picture { display: contents; }
.page-inner .service-banner::after { background: linear-gradient(180deg, rgba(18, 22, 31, .55) 0%, rgba(18, 22, 31, 0) 30%, rgba(18, 22, 31, .1) 60%, rgba(18, 22, 31, .7) 100%); }
.page-inner .service-banner .service-banner-caption { display: none; }
.page-inner .service-banner .vfx-grid { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .12) calc(33.33% - .5px), rgba(255, 255, 255, .12) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .12) calc(66.66% - .5px), rgba(255, 255, 255, .12) calc(66.66% + .5px), transparent calc(66.66% + .5px)),
  linear-gradient(180deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .12) calc(33.33% - .5px), rgba(255, 255, 255, .12) calc(33.33% + .5px), transparent calc(33.33% + .5px), transparent calc(66.66% - .5px), rgba(255, 255, 255, .12) calc(66.66% - .5px), rgba(255, 255, 255, .12) calc(66.66% + .5px), transparent calc(66.66% + .5px)); }
.vfx-shutter i { position: absolute; left: 0; right: 0; height: 50.5%; background: #05070b; z-index: 3; transform-origin: top; }
.vfx-shutter i:first-child { top: 0; }
.vfx-shutter i:last-child { bottom: 0; transform-origin: bottom; }
.page-inner .service-banner + .page-intro { padding: clamp(70px, 8vw, 120px) 0 0; }
.page-inner .service-banner + .page-intro h1 { font-size: clamp(42px, 6vw, 96px); line-height: .98; margin-top: 18px; }
.page-inner .service-banner + .page-intro .lede { margin-top: 24px; font-size: clamp(16px, 1.3vw, 19px); }

/* ---------- split layout: photographs as framed prints ---------- */
.page-inner .split-layout { gap: clamp(40px, 6vw, 100px); }
.page-inner .split-media { padding: 10px; background: #fff; box-shadow: 0 30px 60px -34px rgba(30, 45, 90, .45); }
.page-inner .split-media img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; }
.page-inner .split-media::before, .page-inner .split-media::after { content: ""; position: absolute; width: 28px; height: 28px; border: 0 solid var(--blue-deep); z-index: 2; pointer-events: none; }
.page-inner .split-media::before { left: -12px; top: -12px; border-width: 2px 0 0 2px; }
.page-inner .split-media::after { right: -12px; bottom: -12px; border-width: 0 2px 2px 0; }
.page-inner .split-media:has(iframe) { padding: 0; }
.page-inner .split-media iframe { filter: grayscale(.4) contrast(1.05); }

/* ---------- numbered detail rows ---------- */
.page-inner .detail-list { margin-top: 26px; }
.page-inner .detail-row { display: grid; grid-template-columns: 100px 1fr; gap: 20px; align-items: start; padding: 28px 0; border-top: 1px solid var(--line); position: relative; transition: padding .5s var(--ease); }
.page-inner .detail-row:last-child { border-bottom: 1px solid var(--line); }
.page-inner .detail-row::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--blue-deep); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease); }
.page-inner .detail-row:hover::before { transform: scaleX(1); }
.page-inner .detail-row:hover { padding-left: 14px; }
.page-inner .num-mark { font-family: var(--font-display); font-size: 54px; line-height: .9; color: var(--blue-deep); -webkit-text-stroke: 0; min-width: 0; }
.page-inner .detail-row h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.15; }
.page-inner .detail-row p { margin-top: 8px; color: var(--ink-soft); line-height: 1.7; }

/* ---------- paired cards ---------- */
.page-inner .pair-grid { counter-reset: pair; gap: 18px; margin-top: 36px; }
.page-inner .pair-grid > div { counter-increment: pair; position: relative; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 30px 28px 28px; transition: transform .5s var(--ease-out), box-shadow .5s; }
.page-inner .pair-grid > div::before { content: "0" counter(pair); display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--blue-deep); margin-bottom: 14px; }
.page-inner .pair-grid > div:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(30, 45, 90, .4); }
.page-inner .pair-grid h3 { font-size: clamp(22px, 2vw, 28px); }
.page-inner .pair-grid p { color: var(--ink-soft); line-height: 1.7; }
.page-inner .section-alt .pair-grid > div { background: var(--paper); }

.page-inner .dash-list { gap: 12px; }
.page-inner .dash-list li { padding-left: 24px; line-height: 1.6; }
.page-inner .dash-list li::before { content: "+"; font-family: var(--font-mono); color: var(--blue); }

/* ---------- FAQ rows (turned into an accordion by site.js) ---------- */
.page-inner .faq-list { counter-reset: faq; margin-top: 30px; }
.page-inner .faq-row { counter-increment: faq; padding: 0; }
.page-inner .faq-row h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.3; padding: 24px 0 8px; display: grid; grid-template-columns: 64px 1fr 36px; gap: 14px; align-items: center; }
.page-inner .faq-row h3::before { content: "Q." counter(faq, decimal-leading-zero); font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--blue-deep); }
.page-inner .faq-row p { padding: 0 50px 24px 78px; line-height: 1.7; }
.page-inner .faq-row.acc h3 { cursor: pointer; padding-bottom: 24px; }
.page-inner .faq-row.acc .pm { position: relative; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 3px; transition: background .4s, border-color .4s, color .4s; }
.page-inner .faq-row.acc .pm::before, .page-inner .faq-row.acc .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: currentColor; transition: transform .5s var(--ease); }
.page-inner .faq-row.acc .pm::after { transform: rotate(90deg); }
.page-inner .faq-row.acc.open .pm { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-inner .faq-row.acc.open .pm::after { transform: rotate(0); }
.page-inner .faq-row .ans { height: 0; overflow: hidden; transition: height .55s var(--ease); }
@media (max-width: 700px) {
  .page-inner .faq-row h3 { grid-template-columns: 48px 1fr 32px; }
  .page-inner .faq-row p { padding: 0 0 22px 62px; }
}

/* ---------- packages ---------- */
.page-inner .filter-row { display: inline-flex; flex-wrap: wrap; gap: 0; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper-dim); margin-bottom: 40px; }
.page-inner .filter-btn { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; padding: 12px 18px; border: 0; border-radius: 3px; color: var(--ink-soft); transition: background .4s, color .4s; }
.page-inner .filter-btn.is-active { background: var(--ink); color: #fff; }
.page-inner .filter-btn:hover { color: var(--ink); }
.page-inner .filter-btn.is-active:hover { color: #fff; }
.page-inner .tier-row { gap: 22px; align-items: start; perspective: 1400px; }
.page-inner .tier-card { border-radius: 6px; padding: 32px 28px 28px; box-shadow: 0 30px 60px -38px rgba(30, 45, 90, .4); background: var(--paper); }
.page-inner .tier-card.is-dark { transform: translateY(-16px); }
.page-inner .tier-badge { top: 16px; right: 16px; left: auto; transform: none; background: var(--blue-deep); color: #fff; font-family: var(--font-mono); font-weight: 400; font-size: 10px; letter-spacing: .14em; padding: 6px 10px; border-radius: 0; }
.page-inner .tier-name { font-family: var(--font-mono); font-weight: 400; font-size: 12px; letter-spacing: .2em; color: var(--blue-deep); }
.page-inner .tier-card.is-dark .tier-name { color: var(--blue-glow); }
.page-inner .tier-price { font-size: clamp(44px, 4vw, 58px); line-height: 1; letter-spacing: -.02em; margin-top: 12px; padding-bottom: 20px; }
.page-inner .tier-price .tier-currency { font-size: 18px; color: var(--blue); align-self: flex-start; margin-top: .3em; }
.page-inner .tier-list { gap: 10px; margin: 20px 0 26px; }
.page-inner .tier-list li { padding-left: 22px; font-size: 15px; }
.page-inner .tier-list li::before { content: "+"; width: auto; height: auto; background: none; border-radius: 0; transform: none; top: 0; font-family: var(--font-mono); color: var(--blue); }
.page-inner .tier-cta { border-radius: 3px; font-size: 14px; letter-spacing: 0; text-transform: none; padding: 16px; transition: background .4s, color .4s; }
.page-inner .tier-cta.is-solid { background: var(--blue-deep); color: #fff; }
.page-inner .tier-cta.is-solid:hover { background: #fff; color: var(--ink); }
.page-inner .tier-cta.is-outline { background: var(--ink); border-color: var(--ink); color: #fff; }
.page-inner .tier-cta.is-outline:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
@media (max-width: 900px) { .page-inner .tier-card.is-dark { transform: none; } }

/* ---------- gallery grids: frames on a strip of film ---------- */
.page-inner .masonry { counter-reset: fr; background: var(--film); padding: clamp(12px, 1.6vw, 22px); column-gap: 12px; box-shadow: 0 40px 80px -30px rgba(30, 45, 90, .45); }
.page-inner .masonry-item { counter-increment: fr; margin-bottom: 30px; border-radius: 0; overflow: visible; cursor: zoom-in; }
.page-inner .masonry-item img { display: block; }
.page-inner .masonry-item::before { content: "\25B8  " counter(fr) "   " counter(fr) "A"; position: absolute; left: 0; bottom: -20px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .1em; color: #6f7a8f; white-space: pre; }
.page-inner .masonry-item::after { border-radius: 0; }
.page-inner .masonry-view { border-radius: 3px; }
@media (hover: hover) and (pointer: fine) { .page-inner .masonry, .page-inner .masonry-item { cursor: none; } }
.page-inner .empty-note { border: 1px dashed var(--line); border-radius: 6px; }

/* ---------- related sessions ---------- */
.page-inner .related-row { gap: 10px; margin-top: 26px; }
.page-inner .related-row .link-arrow { color: var(--ink) !important; padding: 13px 18px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper); transition: background .4s, color .4s, border-color .4s; }
.page-inner .related-row .link-arrow::after { display: none; }
.page-inner .related-row .link-arrow:hover { background: var(--ink); color: #fff !important; border-color: var(--ink); }

/* ---------- quote: a note pinned up ---------- */
.page-inner .quote-section { background-color: var(--paper); background-image: linear-gradient(var(--blue-mist) 1px, transparent 1px), linear-gradient(90deg, var(--blue-mist) 1px, transparent 1px); background-size: 32px 32px; }
.page-inner .quote-section .wrap { position: relative; max-width: 760px; background: #fff; background-image: repeating-linear-gradient(transparent 0 39px, var(--blue-pale) 39px 40px); padding: 60px clamp(26px, 5vw, 64px) 40px; box-shadow: 0 30px 60px -30px rgba(30, 45, 90, .4); transform: rotate(-1.2deg); text-align: left; }
.page-inner .quote-section .wrap::before { content: ""; position: absolute; left: 50%; top: -14px; width: 110px; height: 28px; margin-left: -55px; background: rgba(219, 230, 251, .9); border: 1px solid rgba(78, 127, 224, .18); transform: rotate(-3deg); }
.page-inner .quote-mark { display: none; }
.page-inner .quote-text { font-family: var(--font-display); font-style: italic; font-size: clamp(24px, 2.6vw, 36px); line-height: 40px; color: var(--ink); }
.page-inner .quote-cite { margin-top: 22px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- closing call to action: frame 36 ---------- */
.page-inner .cta-band { position: relative; overflow: hidden; background: var(--ink) !important; color: #fff; text-align: center; padding: clamp(110px, 14vw, 200px) 0 !important; }
.page-inner .cta-band .wrap { position: relative; z-index: 2; }
.page-inner .cta-band::before { content: "(Frame 36)"; position: relative; z-index: 2; display: block; margin-bottom: 18px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--blue-glow); }
.page-inner .cta-band h2 { color: #fff; font-size: clamp(42px, 6.4vw, 104px) !important; }
.page-inner .cta-band .lede { color: rgba(255, 255, 255, .72); }
.page-inner .cta-band .link-arrow { color: #fff !important; }
.page-inner .cta-band .cta-iris { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; opacity: .9; }
.page-inner .cta-band .cta-iris path { fill: none; stroke: rgba(159, 188, 255, .16); stroke-width: 1.2; }

/* ---------- contact: the form becomes an order slip on a dark table ---------- */
.page-inner .section:has(.contact-layout) { background: var(--ink); color: #fff; }
.page-inner .contact-layout { gap: clamp(40px, 6vw, 90px); }
.page-inner .contact-form.glass-panel { position: relative; background: #fbfaf6; color: var(--ink); border: 0; border-radius: 2px; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .6); padding: clamp(26px, 3.4vw, 48px); }
.page-inner .contact-form.glass-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 16px; background: radial-gradient(circle at 10px 8px, var(--ink) 6px, transparent 6.5px) repeat-x; background-size: 20px 16px; }
.page-inner .contact-form form::before { content: "35 FRAMES \00B7  ENQUIRY SLIP"; display: block; padding-bottom: 12px; margin-bottom: 26px; border-bottom: 1px dashed rgba(18, 22, 31, .25); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--ink-faint); }
.page-inner .field label { font-family: var(--font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.page-inner .field input, .page-inner .field select, .page-inner .field textarea { background: transparent; border: 0; border-bottom: 1px solid rgba(18, 22, 31, .22); border-radius: 0; padding: 10px 0; font-size: 16.5px; }
.page-inner .field input:focus, .page-inner .field select:focus, .page-inner .field textarea:focus { background: transparent; border-color: var(--blue-deep); }
.page-inner .contact-form .btn-solid { width: 100%; justify-content: center; margin-top: 10px; }
.page-inner .form-note { margin-top: 14px; font-size: 13px; color: var(--ink-faint); text-align: center; }
.page-inner .alert { border-radius: 3px; }
.page-inner .info-row { border-color: rgba(255, 255, 255, .14); display: grid; grid-template-columns: 140px 1fr; gap: 14px; }
.page-inner .info-row h4 { color: var(--blue-glow); font-size: 10.5px; letter-spacing: .14em; margin: 3px 0 0; }
.page-inner .info-row p, .page-inner .info-row a { color: rgba(255, 255, 255, .85); }
.page-inner .info-row a:hover { color: var(--blue-pale); }
.page-inner .section:has(.contact-layout) .footer-map { border-color: rgba(255, 255, 255, .14) !important; border-radius: 4px; }
@media (max-width: 600px) { .page-inner .info-row { grid-template-columns: 1fr; gap: 6px; } }

/* ---------- journal: prints on the wall ---------- */
.page-inner .journal-grid { gap: 70px 32px; }
.page-inner .journal-card { background: #fff; padding: 12px 12px 20px; box-shadow: 0 24px 44px -26px rgba(30, 45, 90, .45); }
.page-inner .journal-card:nth-child(odd) { transform: rotate(-1deg); }
.page-inner .journal-card:nth-child(even) { transform: rotate(1deg); }
.page-inner .journal-card:hover { transform: rotate(0) translateY(-8px); }
.page-inner .journal-media { border-radius: 0; }
.page-inner .journal-date-chip { border-radius: 0; font-family: var(--font-mono); }
.page-inner .journal-card-body { padding: 0 6px; }
.page-inner .journal-card h3 { font-size: 24px; line-height: 1.2; }
.page-inner .post-meta h1 { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; }
.page-inner .post-body > p:first-child::first-letter { float: left; font-family: var(--font-display); font-size: 4.4em; line-height: .85; padding: 6px 12px 0 0; color: var(--blue-deep); }
.page-inner .post-body h3 { font-size: clamp(24px, 2.4vw, 32px); }