* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--color-surface-strong); }
body {
margin: 0;
color: var(--color-text);
background: var(--color-canvas);
font-family: var(--type-body);
font-size: var(--p-text-md);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
body.no-scroll { overflow: hidden; }
button, a { font: inherit; }
button { color: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
img { display: block; width: 100%; }
::selection { color: var(--color-text-inverse); background: var(--color-focus); }
.skip-link { position: fixed; top: var(--p-space-2); left: var(--p-space-2); z-index: 1000; padding: var(--p-space-2) var(--p-space-3); color: var(--color-text); background: var(--color-canvas); transform: translateY(calc(-100% - var(--p-space-4))); transition: transform var(--motion-fast) var(--p-ease-enter); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset); }
.topbar {
position: fixed; inset: 0 0 auto; z-index: 100;
height: var(--topbar-height); padding: 0 var(--p-space-3) 0 var(--space-page);
display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--p-space-3);
color: var(--color-text-inverse); border-bottom: 1px solid var(--color-border-inverse);
transition: color var(--motion-standard) var(--motion-ease), background var(--motion-standard) var(--motion-ease), border-color var(--motion-standard) var(--motion-ease);
}
.topbar.is-light { color: var(--color-text); background: var(--topbar-bg-scrolled); border-color: var(--color-border); backdrop-filter: blur(12px); }
.wordmark { color: inherit; text-decoration: none; display: flex; align-items: baseline; gap: 1px; font-family: var(--type-ui); font-weight: 700; line-height: 1; }
.wordmark b { font-size: var(--p-text-xl); letter-spacing: -.08em; }
.wordmark span { font-size: var(--p-text-xs); letter-spacing: .08em; }
.page-status { justify-self: center; display: grid; grid-template-columns: 18px minmax(48px, 19vw) 18px; align-items: center; gap: var(--p-space-2); font: 600 var(--p-text-2xs)/1 var(--type-data); }
.page-status i { height: 1px; background: currentColor; opacity: .32; }
.page-status i em { display: block; width: 100%; height: 1px; background: var(--color-focus); opacity: 1; transform: scaleX(0); transform-origin: left center; }
.topbar-action { height: var(--button-height-sm); padding: 0 var(--p-space-3); border: 1px solid currentColor; border-radius: 0; color: inherit; background: transparent; font-size: var(--p-text-xs); font-weight: 650; cursor: pointer; transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.topbar-action:active { transform: scale(.97); background: var(--button-bg-active); }
@media (hover:hover) and (pointer:fine) {
.topbar-action:hover { color: var(--color-text-inverse); background: var(--button-bg-hover); border-color: var(--button-bg-hover); }
}
.section { position: relative; overflow: clip; }
.section-label { margin: 0; font: 620 var(--p-text-xs)/1.2 var(--type-data); letter-spacing: .04em; text-transform: uppercase; }
.section-label::before { content: ""; display: inline-block; width: var(--p-space-6); height: 1px; margin: 0 var(--p-space-2) 3px 0; background: currentColor; }
.section-title { margin: 0; font-family: var(--type-display); font-weight: 760; letter-spacing: -.075em; }
.ui-caption { font: 600 var(--p-text-2xs)/1.4 var(--type-data); letter-spacing: .04em; text-transform: uppercase; }
/* 01 — Focus hero */
.hero { min-height: 100svh; color: var(--color-text-inverse); background: var(--p-ink-950); isolation: isolate; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { height: 100%; object-fit: cover; object-position: 50% 34%; transform: scale(1.055); filter: saturate(.88) contrast(1.02); transition: transform var(--motion-dramatic) var(--p-ease-enter); }
.ready .hero-media img { transform: scale(1); }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--p-black-a42), transparent 30%, var(--p-black-a18) 50%, var(--p-black-a72)); }
.hero-grid { position: absolute; inset: var(--topbar-height) 0 0; z-index: 2; pointer-events: none; opacity: .28; background-image: linear-gradient(to right, transparent calc(33.333% - .5px), var(--p-white-a18) calc(33.333% - .5px), var(--p-white-a18) calc(33.333% + .5px), transparent calc(33.333% + .5px)), linear-gradient(to right, transparent calc(66.666% - .5px), var(--p-white-a18) calc(66.666% - .5px), var(--p-white-a18) calc(66.666% + .5px), transparent calc(66.666% + .5px)), linear-gradient(to bottom, transparent calc(50% - .5px), var(--p-white-a18) calc(50% - .5px), var(--p-white-a18) calc(50% + .5px), transparent calc(50% + .5px)); }
.hero-data { position: absolute; z-index: 4; top: calc(var(--topbar-height) + var(--p-space-4)); left: var(--space-page); right: var(--space-page); display: flex; justify-content: space-between; font: 600 var(--p-text-2xs)/1.3 var(--type-data); letter-spacing: .05em; }
.hero-data span:last-child { text-align: right; }
.focus-box { position: absolute; z-index: 5; left: 50%; top: 38%; width: 92px; height: 92px; transform: translate(80%, 120%) scale(.78); opacity: 0; }
.focus-box i { position: absolute; width: 22px; height: 22px; border-color: var(--color-focus); border-style: solid; }
.focus-box i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.focus-box i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.focus-box i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.focus-box i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.focus-box::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--color-focus); transform: translate(-50%,-50%) scale(0); }
.ready .focus-box { animation: focus-find-lock 1.8s 180ms var(--p-ease-enter) forwards; }
.ready .focus-box::after { animation: focus-dot 420ms 1.48s var(--motion-ease) forwards; }
@keyframes focus-find-lock { 0% { transform: translate(80%,120%) scale(.78); opacity: 0; } 24% { opacity: 1; } 55% { transform: translate(-72%,-25%) scale(1.12); } 76%,100% { transform: translate(-50%,-50%) scale(1); opacity: 1; } }
@keyframes focus-dot { 0% { transform: translate(-50%,-50%) scale(0); } 55% { transform: translate(-50%,-50%) scale(1.6); } 100% { transform: translate(-50%,-50%) scale(1); } }
.exposure-meter { position: absolute; z-index: 5; top: 31%; right: var(--p-space-2); height: 38%; width: 16px; display: grid; grid-template-rows: repeat(9,1fr); align-items: center; }
.exposure-meter i { justify-self: end; width: 5px; height: 1px; background: var(--p-white-a48); }
.exposure-meter i:nth-child(3n+1) { width: 11px; }
.exposure-meter b { position: absolute; right: 0; top: 50%; width: 16px; height: 2px; background: var(--color-focus); transform: translateY(-50%); }
.hero-copy { position: absolute; z-index: 6; left: var(--space-page); right: var(--space-page); bottom: var(--p-space-6); }
.hero-title { margin: 0 0 var(--p-space-5); max-width: 5.8em; font: 780 var(--p-text-display)/.91 var(--type-display); letter-spacing: -.085em; }
.hero-title span { display: block; overflow: hidden; }
.hero-title span em { display: block; font-style: normal; transform: translateY(112%); transition: transform var(--motion-dramatic) var(--p-ease-enter); }
.ready .hero-title span:first-child em { transform: translateY(0); transition-delay: 420ms; }
.ready .hero-title span:last-child em { transform: translateY(0); transition-delay: 500ms; }
.hero-sub { width: 66%; margin: 0 0 var(--p-space-6) auto; font-size: var(--p-text-sm); line-height: 1.6; }
.camera-row { padding-top: var(--p-space-3); border-top: 1px solid var(--color-border-inverse); display: grid; grid-template-columns: repeat(4,1fr); gap: var(--p-space-2); font: 600 var(--p-text-2xs)/1 var(--type-data); }
.camera-row span:not(:last-child) { border-right: 1px solid var(--color-border-inverse); }
.hero-scroll { position: absolute; z-index: 7; right: var(--space-page); bottom: 128px; display: flex; align-items: center; gap: var(--p-space-2); writing-mode: vertical-rl; font: 600 var(--p-text-2xs)/1 var(--type-data); }
.hero-scroll i { width: 1px; height: var(--p-space-8); background: var(--color-focus); transform-origin: top; animation: scroll-pulse 1.8s ease-in-out infinite; }
@keyframes scroll-pulse { 0%,100% { transform: scaleY(.28); } 50% { transform: scaleY(1); } }
/* 02 — Manifesto */
.manifesto { min-height: 118svh; padding: var(--space-section) var(--space-page) var(--p-space-16); background: var(--color-canvas); display: grid; grid-template-rows: auto 1fr auto; }
.manifesto-visual { align-self: center; margin: var(--p-space-12) calc(var(--space-page) * -1) var(--p-space-8) 19%; position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--color-surface); }
.manifesto-visual img { height: 100%; object-fit: cover; object-position: center 30%; filter: saturate(.78); }
.manifesto-visual::after { content: "FOCUS / SHADOW"; position: absolute; left: var(--p-space-3); bottom: var(--p-space-3); padding: var(--p-space-1) var(--p-space-2); color: var(--color-text-inverse); background: var(--p-black-a72); font: 600 var(--p-text-2xs)/1 var(--type-data); }
.manifesto-copy h2 { margin: 0 0 var(--p-space-6); font-size: clamp(38px, 11.8vw, 54px); line-height: 1.02; font-weight: 730; letter-spacing: -.07em; }
.manifesto-copy h2 em { font-style: normal; color: var(--color-focus); }
.manifesto-copy p { width: 74%; margin: 0 0 0 auto; color: var(--p-ink-800); font-size: var(--p-text-sm); }
/* 03 — Selected modes */
.selected { padding: var(--space-section) 0 var(--p-space-20); color: var(--color-text-inverse); background: var(--color-surface-strong); }
.selected-head { padding: 0 var(--space-page) var(--p-space-12); display: grid; grid-template-columns: .8fr 1.2fr; gap: var(--p-space-3); }
.selected-head h2 { grid-column: 1/-1; margin: var(--p-space-10) 0 0; font-size: clamp(44px, 13vw, 60px); line-height: .98; }
.selected-head p:last-child { grid-column: 2; margin: 0; color: var(--p-white-a48); font-size: var(--p-text-sm); }
.selected-stack { display: grid; gap: var(--p-space-3); padding: 0 var(--p-space-3); }
.selected-card { position: relative; min-height: 76svh; overflow: hidden; background: var(--p-ink-800); }
.selected-card img { position: absolute; inset: 0; height: 100%; object-fit: cover; transition: transform var(--motion-slow) var(--motion-ease), filter var(--motion-slow) var(--motion-ease); }
.selected-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 42%, var(--p-black-a72)); }
.selected-card:nth-child(2) img { object-position: center 32%; }
.selected-card:nth-child(3) img { object-position: center 42%; }
.selected-card-ui { position: absolute; z-index: 2; inset: var(--p-space-3); display: grid; grid-template-rows: auto 1fr auto; pointer-events: none; }
.selected-card-ui .top { display: flex; justify-content: space-between; font: 600 var(--p-text-2xs)/1 var(--type-data); }
.selected-card-ui .lock { align-self: center; justify-self: center; width: 54px; height: 54px; border: 1px solid var(--p-white-a48); position: relative; }
.selected-card-ui .lock::before, .selected-card-ui .lock::after { content: ""; position: absolute; background: var(--color-focus); }
.selected-card-ui .lock::before { width: 12px; height: 1px; left: 20px; top: 26px; }
.selected-card-ui .lock::after { height: 12px; width: 1px; left: 26px; top: 20px; }
.selected-card-ui .bottom { display: grid; grid-template-columns: 1fr auto; gap: var(--p-space-4); align-items: end; }
.selected-card-ui h3 { margin: 0; font-size: var(--p-text-2xl); line-height: 1; letter-spacing: -.06em; }
.selected-card-ui p { margin: var(--p-space-2) 0 0; font-size: var(--p-text-xs); color: var(--p-white-a82); }
.selected-card-ui .frame { font: 600 var(--p-text-xs)/1 var(--type-data); }
/* 04 — Suit sequence */
.case-suit { background: var(--color-surface); }
.case-intro { min-height: 84svh; padding: var(--space-section) var(--space-page) var(--p-space-12); display: flex; flex-direction: column; justify-content: space-between; }
.case-intro h2 { margin: var(--p-space-16) 0 var(--p-space-6); font-size: clamp(45px, 13.6vw, 61px); line-height: .98; }
.case-intro h2 em { display: block; color: var(--color-focus); font-style: normal; }
.case-intro p:last-child { width: 72%; margin: 0 0 0 auto; font-size: var(--p-text-sm); }
.sequence { position: relative; height: 330svh; color: var(--color-text-inverse); background: var(--color-surface-strong); }
.sequence-sticky { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.sequence-stage { position: absolute; inset: 0; }
.sequence-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity var(--motion-fast) linear, transform var(--motion-standard) var(--motion-ease); }
.sequence-frame:first-child { opacity: 1; transform: scale(1); }
.sequence-frame img { height: 100%; object-fit: cover; object-position: 50% 35%; filter: saturate(.82); }
.sequence-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,var(--p-black-a18),transparent 48%,var(--p-black-a72)); }
.sequence-hud { position: absolute; z-index: 4; inset: var(--topbar-height) var(--p-space-3) var(--p-space-4); border: 1px solid var(--color-border-inverse); pointer-events: none; }
.sequence-hud::before, .sequence-hud::after { content: ""; position: absolute; background: var(--color-focus); }
.sequence-hud::before { width: 28px; height: 2px; left: -1px; top: -1px; }
.sequence-hud::after { width: 2px; height: 28px; left: -1px; top: -1px; }
.sequence-meta { position: absolute; z-index: 5; left: var(--p-space-5); right: var(--p-space-5); bottom: var(--p-space-8); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: var(--p-space-4); }
.sequence-meta span { font: 600 var(--p-text-xs)/1 var(--type-data); }
.sequence-meta h3 { margin: var(--p-space-2) 0 0; font-size: clamp(48px, 15vw, 66px); line-height: .82; letter-spacing: -.08em; }
.sequence-meta p { margin: 0; writing-mode: vertical-rl; font: 600 var(--p-text-2xs)/1.4 var(--type-data); letter-spacing: .08em; }
.sequence-progress { position: absolute; z-index: 6; top: calc(var(--topbar-height) + var(--p-space-3)); right: var(--p-space-1); bottom: var(--p-space-4); width: 2px; background: var(--p-white-a18); }
.sequence-progress i { display: block; width: 100%; height: 100%; background: var(--color-focus); transform: scaleY(0); transform-origin: top center; }
/* 05 — Process console */
.process { padding: var(--space-section) var(--space-page) var(--p-space-24); background: var(--color-canvas); }
.process-head { margin-bottom: var(--p-space-12); }
.process-head h2 { margin: var(--p-space-12) 0 var(--p-space-5); font-size: clamp(42px, 12.5vw, 56px); line-height: .98; }
.process-title-line { display: block; }
.process-head p:last-child { width: 66%; margin: 0 0 0 auto; font-size: var(--p-text-sm); color: var(--color-text-muted); }
.process-console { border-top: 1px solid var(--color-text); }
.process-item { border-bottom: 1px solid var(--color-border); }
.process-trigger { width: 100%; min-height: 88px; padding: var(--p-space-4) var(--p-space-2) var(--p-space-4) 0; border: 0; background: transparent; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: var(--p-space-3); align-items: center; text-align: left; cursor: pointer; }
.process-trigger .num { font: 600 var(--p-text-xs)/1 var(--type-data); color: var(--color-focus); }
.process-trigger h3 { margin: 0; font-size: var(--p-text-lg); line-height: 1.25; }
.process-trigger small { display: block; margin-top: var(--p-space-1); color: var(--color-text-muted); font-size: var(--p-text-xs); }
.process-trigger .state { width: 22px; height: 22px; border: 1px solid var(--color-text); display: grid; place-items: center; font: 600 var(--p-text-xs)/1 var(--type-data); transition: color var(--motion-fast) ease, background var(--motion-fast) ease, transform var(--motion-standard) var(--motion-ease); }
.process-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-standard) var(--motion-ease); }
.process-detail > div { overflow: hidden; }
.process-detail p { margin: 0 0 var(--p-space-5) 42px; max-width: 25em; color: var(--p-ink-800); font-size: var(--p-text-sm); }
.process-item.active .process-detail { grid-template-rows: 1fr; }
.process-item.active .state { color: var(--color-text-inverse); background: var(--color-focus); border-color: var(--color-focus); transform: rotate(45deg); }
/* 06 — Night gallery */
.case-night { padding: var(--space-section) 0 var(--p-space-20); color: var(--color-text-inverse); background: var(--color-surface-strong); }
.night-head { padding: 0 var(--space-page) var(--p-space-10); }
.night-head h2 { margin: var(--p-space-12) 0 var(--p-space-5); max-width: 7em; font-size: clamp(42px, 12.5vw, 56px); line-height: 1; }
.night-head p:last-child { width: 70%; margin: 0 0 0 auto; color: var(--p-white-a48); font-size: var(--p-text-sm); }
.gallery-main { margin: 0 var(--p-space-3); position: relative; height: 68svh; overflow: hidden; background: var(--p-ink-800); }
.gallery-main img { height: 100%; object-fit: cover; object-position: 50% 31%; transform: scale(1.01); transition: opacity var(--motion-standard) ease, transform var(--motion-slow) var(--motion-ease); }
.gallery-main.is-changing img { opacity: .15; transform: scale(1.045); }
.gallery-readout { position: absolute; inset: auto var(--p-space-3) var(--p-space-3); padding-top: var(--p-space-3); border-top: 1px solid var(--color-border-inverse); display: flex; justify-content: space-between; align-items: end; }
.gallery-readout h3 { margin: 0; font-size: var(--p-text-xl); letter-spacing: -.04em; }
.gallery-readout p { margin: var(--p-space-1) 0 0; font-size: var(--p-text-xs); color: var(--p-white-a82); }
.gallery-readout span { font: 600 var(--p-text-xs)/1 var(--type-data); }
.filmstrip { display: grid; grid-auto-flow: column; grid-auto-columns: 22%; gap: var(--p-space-2); overflow-x: auto; padding: var(--p-space-3); scrollbar-width: none; }
.filmstrip::-webkit-scrollbar { display: none; }
.film-button { position: relative; padding: 0; border: 1px solid transparent; background: transparent; aspect-ratio: 2/3; cursor: pointer; overflow: hidden; opacity: .48; transition: opacity var(--motion-fast) ease, border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease); }
.film-button img { height: 100%; object-fit: cover; }
.film-button.active { opacity: 1; border-color: var(--color-focus); }
.film-button:active { transform: scale(.96); }
.gallery-grid { display: none; }
/* 07 — About */
.about { min-height: 108svh; padding: var(--space-section) var(--space-page) var(--p-space-16); background: var(--color-surface); display: grid; grid-template-rows: auto 1fr auto; }
.about-center { align-self: center; }
.about h2 { margin: var(--p-space-16) 0 var(--p-space-8); font-size: clamp(43px, 13vw, 58px); line-height: .98; }
.about h2 em { color: var(--color-focus); font-style: normal; }
.about-copy { display: grid; grid-template-columns: 68px 1fr; gap: var(--p-space-4); }
.about-mark { height: 104px; display: grid; place-items: center; color: var(--color-text-inverse); background: var(--color-text); font: 700 66px/.8 var(--type-ui); }
.about-copy p { margin: 0; font-size: var(--p-text-sm); }
.about-note { margin-top: var(--p-space-8); padding: var(--p-space-3) 0 var(--p-space-3) var(--p-space-4); border-left: 3px solid var(--color-focus); font-size: var(--p-text-lg); font-weight: 650; line-height: 1.4; }
.about-footer { display: flex; justify-content: space-between; padding-top: var(--p-space-3); border-top: 1px solid var(--color-border); font: 600 var(--p-text-2xs)/1.3 var(--type-data); }
/* 08 — Studio practice */
.proof { color: var(--color-text-inverse); background: var(--color-surface-strong); padding: var(--space-section) 0 var(--p-space-20); }
.proof-head { padding: 0 var(--space-page) var(--p-space-10); }
.proof h2 { margin: var(--p-space-12) 0 var(--p-space-5); font-size: clamp(42px, 12.8vw, 58px); line-height: .96; }
.proof-head p:last-child { width: 72%; margin: 0 0 0 auto; color: var(--p-white-a48); font-size: var(--p-text-sm); }
.proof-wide { margin: 0; position: relative; aspect-ratio: 3/2; overflow: hidden; }
.proof-wide img { height: 100%; object-fit: cover; object-position: center; filter: saturate(.72) contrast(1.04); }
.proof-wide::after { content: "LIGHT TEST / 001"; position: absolute; left: var(--p-space-3); bottom: var(--p-space-3); font: 600 var(--p-text-2xs)/1 var(--type-data); }
.proof-inset { width: 72%; margin: var(--p-space-6) var(--p-space-3) 0 auto; position: relative; aspect-ratio: 3/4; overflow: hidden; }
.proof-inset img { height: 100%; object-fit: cover; object-position: center 40%; }
.proof-inset figcaption { position: absolute; inset: auto 0 0; padding: var(--p-space-3); color: var(--color-text); background: var(--color-canvas); font-size: var(--p-text-xs); }
/* 09 — Services */
.services { padding: var(--space-section) 0 var(--p-space-20); background: var(--color-canvas); }
.services-head { padding: 0 var(--space-page) var(--p-space-12); }
.services h2 { margin: var(--p-space-12) 0 0; font-size: clamp(42px, 12.8vw, 58px); line-height: .98; }
.service-list { border-top: 1px solid var(--color-text); }
.service-item { border-bottom: 1px solid var(--color-border); }
.service-trigger { width: 100%; padding: var(--p-space-5) var(--space-page); border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 32px 1fr 22px; gap: var(--p-space-3); cursor: pointer; }
.service-trigger .num { padding-top: 3px; font: 600 var(--p-text-xs)/1 var(--type-data); color: var(--color-focus); }
.service-trigger h3 { margin: 0 0 var(--p-space-2); font-size: var(--p-text-xl); line-height: 1; letter-spacing: -.04em; }
.service-trigger p { margin: 0; font-size: var(--p-text-sm); color: var(--color-text-muted); }
.service-trigger .select { width: 22px; height: 22px; border: 1px solid var(--color-text); border-radius: 50%; padding: 4px; }
.service-trigger .select::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: transparent; transition: background var(--motion-fast) ease, transform var(--motion-standard) var(--motion-ease); transform: scale(0); }
.service-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-standard) var(--motion-ease); }
.service-detail > div { overflow: hidden; }
.service-detail ul { margin: 0 0 var(--p-space-5) 64px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--p-space-2); }
.service-detail li { padding: var(--p-space-1) var(--p-space-2); border: 1px solid var(--color-border); font: 600 var(--p-text-xs)/1.4 var(--type-data); }
.service-item.active .service-detail { grid-template-rows: 1fr; }
.service-item.active .select { border-color: var(--color-focus); }
.service-item.active .select::after { background: var(--color-focus); transform: scale(1); }
.services-action { margin: var(--p-space-8) var(--space-page) 0; width: calc(100% - var(--space-page) * 2); height: var(--button-height-lg); padding: 0 var(--p-space-4); border: 0; color: var(--button-fg); background: var(--button-bg); display: flex; align-items: center; justify-content: space-between; cursor: pointer; transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) ease; }
.services-action:active { transform: scale(.985); background: var(--button-bg-active); }
/* 10 — FAQ */
.faq { padding: var(--space-section) var(--space-page) var(--p-space-24); background: var(--color-surface); }
.faq h2 { margin: var(--p-space-12) 0 var(--p-space-10); font: 650 clamp(54px, 17vw, 74px)/.85 var(--type-ui); letter-spacing: -.07em; }
.faq-list { border-top: 1px solid var(--color-text); }
.faq-item { border-bottom: 1px solid var(--color-border); }
.faq-question { width: 100%; padding: var(--p-space-5) 0; border: 0; background: transparent; text-align: left; display: grid; grid-template-columns: 28px 1fr 20px; gap: var(--p-space-2); cursor: pointer; font-size: var(--p-text-md); font-weight: 650; }
.faq-question .num { font: 600 var(--p-text-xs)/1.8 var(--type-data); color: var(--color-focus); }
.faq-question .plus { font-size: var(--p-text-xl); line-height: .75; transition: transform var(--motion-standard) var(--motion-ease); }
.faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--motion-standard) var(--motion-ease); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { margin: 0 0 var(--p-space-5) 36px; color: var(--p-ink-800); font-size: var(--p-text-sm); }
.faq-item.active .faq-answer { grid-template-rows: 1fr; }
.faq-item.active .plus { transform: rotate(45deg); }
/* 11 — Contact */
.contact { min-height: 112svh; color: var(--color-text-inverse); background: var(--p-ink-950); display: flex; align-items: flex-end; }
.contact-media { position: absolute; inset: 0; }
.contact-media img { height: 100%; object-fit: cover; object-position: 50% 42%; }
.contact-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 25%, var(--p-black-a18) 50%, var(--p-black-a72) 86%, var(--p-ink-950)); }
.contact-copy { position: relative; z-index: 2; width: 100%; padding: var(--p-space-20) var(--space-page) var(--p-space-5); }
.contact h2 { margin: var(--p-space-8) 0 var(--p-space-5); max-width: 7em; font-size: clamp(43px, 13vw, 59px); line-height: .98; }
.contact-copy > p:not(.section-label) { width: 70%; margin: 0 0 var(--p-space-6) auto; font-size: var(--p-text-sm); color: var(--p-white-a82); }
.contact-action { width: 100%; height: var(--button-height-lg); padding: 0 var(--p-space-4); border: 0; color: var(--color-text-inverse); background: var(--color-focus); display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-weight: 650; transition: transform var(--motion-fast) var(--motion-ease), background var(--motion-fast) ease; }
.contact-action:active { transform: scale(.985); background: var(--button-bg-active); }
.page-footer { margin-top: var(--p-space-8); padding-top: var(--p-space-3); border-top: 1px solid var(--color-border-inverse); display: grid; grid-template-columns: 1fr auto; gap: var(--p-space-2); font: 600 var(--p-text-2xs)/1.5 var(--type-data); color: var(--p-white-a48); }
.page-footer .rights { grid-column: 1/-1; color: var(--p-white-a48); }
/* Entry choreography */
.reveal,
.motion-entry { opacity: 0; transform: translateY(24px); clip-path: inset(0 0 16%); transition: opacity var(--motion-standard) ease, transform var(--motion-slow) var(--p-ease-enter), clip-path var(--motion-slow) var(--p-ease-enter); }
.reveal.in,
.motion-entry.in { opacity: 1; transform: translateY(0); clip-path: inset(0); }
.gsap-ready .motion-entry.motion-entered { opacity: 1; transform: none; clip-path: inset(0); }
.motion-text,
.motion-text-dialog { opacity: 0; transform: translateY(10px); transition: opacity var(--motion-standard) ease, transform var(--motion-standard) var(--p-ease-enter); }
.motion-text.in,
.motion-text-dialog.in,
.gsap-ready .motion-text.text-entered { opacity: 1; transform: none; }
.reveal.delay { transition-delay: 90ms; }
.gsap-ready .reveal,
.gsap-ready .motion-entry,
.gsap-ready .motion-text,
.gsap-ready .motion-text-dialog,
.gsap-ready .motion-gate-panel,
.gsap-ready .motion-gate-copy,
.gsap-ready .hero-title span em,
.gsap-ready .hero-orbit .orbit-frame img,
.gsap-ready .gallery-main img,
.gsap-ready .enquiry-backdrop,
.gsap-ready .enquiry-panel { transition: none; }
.gsap-ready .process-detail,
.gsap-ready .service-detail,
.gsap-ready .faq-answer { transition: none; }
.gsap-ready .sequence { height: auto; min-height: 100svh; }
.gsap-ready .sequence-sticky { position: relative; }
.gsap-ready .sequence-frame { transition: none; }
/* Enquiry builder */
.enquiry { position: fixed; inset: 0; z-index: 300; visibility: hidden; pointer-events: none; }
.enquiry[aria-hidden="false"] { visibility: visible; pointer-events: auto; }
.enquiry-backdrop { position: absolute; inset: 0; border: 0; background: var(--p-black-a72); opacity: 0; transition: opacity var(--motion-standard) ease; }
.enquiry-panel { position: absolute; inset: auto 0 0; max-height: 92svh; overflow-y: auto; padding: var(--p-space-4) var(--space-page) var(--p-space-8); background: var(--panel-bg); box-shadow: var(--panel-shadow); transform: translateY(100%); transition: transform 520ms var(--p-ease-enter); }
.enquiry[aria-hidden="false"] .enquiry-backdrop { opacity: 1; }
.enquiry[aria-hidden="false"] .enquiry-panel { transform: translateY(0); }
.panel-head { padding-bottom: var(--p-space-3); border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; font: 600 var(--p-text-xs)/1 var(--type-data); }
.panel-head button { min-width: 44px; min-height: 44px; border: 0; background: transparent; display: grid; place-items: center; font-size: var(--p-text-2xl); line-height: .7; cursor: pointer; }
.panel-kicker { margin: var(--p-space-8) 0 var(--p-space-3); color: var(--color-focus); font-weight: 650; }
.enquiry h2 { margin: 0 0 var(--p-space-6); font-size: var(--p-text-2xl); line-height: 1.08; letter-spacing: -.055em; }
.brief-group { padding: var(--p-space-4) 0; border-top: 1px solid var(--color-border); }
.brief-group p { margin: 0 0 var(--p-space-3); font-size: var(--p-text-sm); font-weight: 650; }
.brief-options { display: flex; flex-wrap: wrap; gap: var(--p-space-2); }
.brief-option { min-height: 44px; padding: var(--p-space-2) var(--p-space-3); border: 1px solid var(--color-border); background: transparent; cursor: pointer; font-size: var(--p-text-xs); transition: color var(--motion-fast) ease, background var(--motion-fast) ease, border-color var(--motion-fast) ease; }
.brief-option.active { color: var(--color-text-inverse); background: var(--color-text); border-color: var(--color-text); }
.brief-copy { width: 100%; height: var(--button-height-lg); margin-top: var(--p-space-4); padding: 0 var(--p-space-4); border: 0; color: var(--button-fg); background: var(--button-bg); display: flex; justify-content: space-between; align-items: center; cursor: pointer; }
.enquiry small { display: block; margin-top: var(--p-space-3); color: var(--color-text-muted); font-size: var(--p-text-2xs); }
.noscript { margin: var(--p-space-20) var(--space-page); }
/* Static acceptance mode */
body.static-mode .topbar { position: absolute; }
body.static-mode .focus-box { opacity: 1; transform: translate(-50%,-50%); }
body.static-mode .focus-box::after { transform: translate(-50%,-50%) scale(1); }
body.static-mode .hero-title span em { transform: translateY(0); }
body.static-mode .reveal,
body.static-mode .motion-entry,
body.static-mode .motion-text,
body.static-mode .motion-text-dialog { opacity: 1; transform: none; clip-path: inset(0); }
body.static-mode .sequence { height: auto; padding: var(--p-space-1); }
body.static-mode .sequence-sticky { position: relative; height: auto; overflow: visible; }
body.static-mode .sequence-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-1); }
body.static-mode .sequence-frame { position: relative; inset: auto; opacity: 1; transform: none; aspect-ratio: 2/3; }
body.static-mode .sequence-frame::after { display: none; }
body.static-mode .sequence-hud, body.static-mode .sequence-meta, body.static-mode .sequence-progress { display: none; }
body.static-mode .process-detail, body.static-mode .service-detail, body.static-mode .faq-answer { grid-template-rows: 1fr; }
body.static-mode .process-item .state { color: var(--color-text-inverse); background: var(--color-focus); border-color: var(--color-focus); transform: rotate(45deg); }
body.static-mode .service-item .select { border-color: var(--color-focus); }
body.static-mode .service-item .select::after { background: var(--color-focus); transform: scale(1); }
body.static-mode .faq-item .plus { transform: rotate(45deg); }
body.static-mode .gallery-main, body.static-mode .filmstrip { display: none; }
body.static-mode .gallery-grid { padding: 0 var(--p-space-1); display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-1); }
body.static-mode .gallery-grid figure { margin: 0; position: relative; aspect-ratio: 2/3; overflow: hidden; }
body.static-mode .gallery-grid img { height: 100%; object-fit: cover; }
body.static-mode .gallery-grid figcaption { position: absolute; inset: auto 0 0; padding: var(--p-space-2); color: var(--color-text-inverse); background: var(--p-black-a72); font: 600 var(--p-text-2xs)/1.3 var(--type-data); }
@media (min-width: 431px) {
body { max-width: 560px; margin: 0 auto; box-shadow: 0 0 90px var(--p-black-a42); }
.topbar { left: 50%; width: min(100%,560px); transform: translateX(-50%); }
.enquiry { left: 50%; width: min(100%,560px); transform: translateX(-50%); }
}
@media (max-width: 350px) {
.hero-title { font-size: 46px; }
.hero-sub { width: 72%; }
.selected-card { min-height: 70svh; }
.manifesto-copy h2, .section-title { letter-spacing: -.06em; }
.about-copy { grid-template-columns: 56px 1fr; }
.about-mark { height: 88px; font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,*::before,*::after { animation: none; transition: none; }
.focus-box { opacity: 1; transform: translate(-50%,-50%); }
.focus-box::after { transform: translate(-50%,-50%) scale(1); }
.hero-title span em { transform: translateY(0); }
.reveal,
.motion-entry,
.motion-text,
.motion-text-dialog { opacity: 1; transform: none; clip-path: inset(0); }
}
/* V4 / Moving Studio ---------------------------------------------------- */
.motion-gate { position: fixed; inset: 0; z-index: 500; pointer-events: none; color: var(--p-white); }
.motion-gate-panel { position: absolute; inset: 0; background: var(--p-ink-950); transition: transform 820ms var(--p-ease-orbit); }
.motion-gate-panel.panel-a { right: 50%; transform-origin: left center; }
.motion-gate-panel.panel-b { left: 50%; transform-origin: right center; }
.motion-gate-copy { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; transition: opacity 220ms ease, transform 420ms var(--p-ease-enter); }
.motion-gate-copy span { font: 650 9px/1 var(--type-data); letter-spacing: .18em; }
.motion-gate-copy b { font: 780 clamp(50px,16vw,72px)/.84 var(--type-display); letter-spacing: -.08em; }
.motion-gate-copy i { width: 72px; height: 2px; background: var(--p-signal-500); transform-origin: left; animation: gate-scan 720ms var(--p-ease-enter) both; }
.ready .motion-gate-panel.panel-a { transform: translateX(-100%); transition-delay: 360ms; }
.ready .motion-gate-panel.panel-b { transform: translateX(100%); transition-delay: 360ms; }
.ready .motion-gate-copy { opacity: 0; transform: scale(.96); transition-delay: 250ms; }
@keyframes gate-scan { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.motion-cursor { position: fixed; z-index: 450; left: 0; top: 0; width: 46px; height: 46px; border: 1px solid var(--p-signal-500); border-radius: 50%; display: none; place-items: center; color: var(--p-white); mix-blend-mode: difference; pointer-events: none; transform: translate3d(-100px,-100px,0); transform-origin: center; scale: 1; will-change: transform; transition: scale 160ms ease, background 160ms ease; }
.motion-cursor i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.motion-cursor span { position: absolute; font: 650 7px/1 var(--type-data); letter-spacing: .08em; opacity: 0; }
.motion-cursor.is-active { scale: 1.48; background: var(--p-signal-a18); }
.motion-cursor.is-active i { opacity: 0; }
.motion-cursor.is-active span { opacity: 1; }
@media (hover:hover) and (pointer:fine) { .motion-cursor { display: grid; } }
.topbar { backdrop-filter: saturate(1.1); }
.topbar.is-light { box-shadow: 0 8px 30px rgba(14,20,32,.06); }
.topbar-action { position: relative; overflow: hidden; }
.topbar-action::after { content: ""; position: absolute; inset: 0; background: var(--p-signal-500); transform: translateX(-102%); transition: transform 220ms var(--p-ease-orbit); z-index: -1; }
.section-label::before { width: 44px; transform: scaleX(.55); transform-origin: left; transition: transform 520ms var(--p-ease-orbit), background 220ms ease; }
.section.is-current .section-label::before { transform: scaleX(1); background: var(--color-focus); }
@media (hover:hover) and (pointer:fine) { .topbar-action:hover::after { transform: translateX(0); } }
.hero { min-height: 102svh; background: var(--p-ink-950); cursor: grab; }
.hero.is-dragging { cursor: grabbing; }
.hero-orbit { perspective: 980px; transform-style: preserve-3d; overflow: hidden; touch-action: pan-y; }
.hero-orbit .orbit-frame { position: absolute; inset: 0; margin: 0; opacity: 0; transform: translate3d(14%,4.5%,-30px) rotateY(-8deg) scale(1.09); transform-origin: 50% 58%; pointer-events: none; }
.hero-orbit .orbit-frame.active { opacity: 1; transform: translate3d(0,4.5%,0) rotateY(0) scale(1.075); }
.hero-orbit .orbit-frame img { height: 100%; object-fit: cover; object-position: 50% 50%; filter: saturate(.9) contrast(1.035); transform: translateY(13%) scale(1.06); transition: none; }
.ready .hero-orbit .orbit-frame img { transform: translateY(13%) scale(1.06); }
.hero-orbit::after { z-index: 6; background: linear-gradient(180deg,rgba(14,20,32,.42),transparent 28%,rgba(14,20,32,.08) 52%,rgba(14,20,32,.78)); }
.orbit-floor { position: absolute; z-index: 5; left: 50%; top: 74%; width: 82%; aspect-ratio: 1/.2; border: 1px solid var(--p-signal-a44); border-radius: 50%; transform: translate(-50%,-50%) rotateX(68deg); box-shadow: 0 0 54px var(--p-signal-a18); pointer-events: none; opacity: .58; animation: orbit-floor-breathe 3.4s var(--p-ease-premium) infinite alternate; }
.hero-grid { background-image: linear-gradient(to right,transparent calc(25% - .5px),var(--p-white-a18) calc(25% - .5px),var(--p-white-a18) calc(25% + .5px),transparent calc(25% + .5px)),linear-gradient(to right,transparent calc(75% - .5px),var(--p-white-a18) calc(75% - .5px),var(--p-white-a18) calc(75% + .5px),transparent calc(75% + .5px)),linear-gradient(to bottom,transparent calc(50% - .5px),var(--p-white-a18) calc(50% - .5px),var(--p-white-a18) calc(50% + .5px),transparent calc(50% + .5px)); opacity: .34; }
.hero-data { color: rgba(255,255,255,.9); }
.focus-box i { border-color: var(--p-signal-500); }
.focus-box::after { background: var(--p-warm-500); }
.exposure-meter b { background: var(--p-warm-500); box-shadow: 0 0 18px rgba(255,104,73,.5); }
.hero-copy { bottom: 12px; }
.hero-title { text-shadow: 0 3px 34px rgba(14,20,32,.28); }
.orbit-controller { position: absolute; z-index: 9; top: 112px; left: var(--space-page); width: min(190px,52vw); height: 44px; padding: 0 10px; border: 1px solid var(--p-white-a48); color: var(--p-white); background: rgba(14,20,32,.18); backdrop-filter: blur(10px); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; cursor: ew-resize; touch-action: pan-y; user-select: none; animation: orbit-control-live 2.8s var(--p-ease-premium) infinite; }
.orbit-controller > span, .orbit-controller > b { font: 650 7px/1 var(--type-data); letter-spacing: .08em; white-space: nowrap; }
.orbit-controller > b { min-width: 30px; text-align: right; color: var(--p-warm-500); }
.orbit-track { height: 1px; background: var(--p-white-a48); position: relative; }
.orbit-track i { position: absolute; left: 0; top: 50%; width: 8px; height: 8px; border: 2px solid var(--p-white); border-radius: 50%; background: var(--p-signal-500); transform: translate(-50%,-50%); box-shadow: 0 0 0 4px var(--p-signal-a18); will-change: transform; }
.hero-scroll { bottom: 138px; }
.hero-data span:first-child::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--p-warm-500); box-shadow: 0 0 0 0 rgba(255,104,73,.62); animation: live-dot 1.8s ease-out infinite; }
.hero-scan { position: absolute; z-index: 7; inset: var(--topbar-height) 0 0; pointer-events: none; overflow: hidden; mix-blend-mode: screen; }
.hero-scan i { position: absolute; top: 0; bottom: 0; left: -20%; width: 18%; background: linear-gradient(90deg,transparent,rgba(76,119,255,.03) 38%,rgba(154,181,255,.13) 96%,rgba(255,255,255,.34)); border-right: 1px solid rgba(255,255,255,.46); transform: skewX(-7deg); animation: hero-scan-pass 4.4s var(--p-ease-premium) infinite; }
.hero-scan b { position: absolute; right: 24px; top: 57%; padding: 5px 7px; color: rgba(255,255,255,.74); background: rgba(14,20,32,.34); border-left: 1px solid var(--p-warm-500); font: 650 7px/1 var(--type-data); letter-spacing: .08em; animation: scan-label 2.2s ease-in-out infinite alternate; }
.hero-shutter { position: absolute; z-index: 8; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 12%,rgba(255,255,255,.56) 50%,transparent 88%); opacity: 0; transform: scaleX(.04); mix-blend-mode: screen; }
.hero-shutter.is-pulsing { animation: shutter-pulse 360ms var(--p-ease-enter); }
.hero-grid { animation: hero-grid-drift 8s var(--p-ease-premium) infinite alternate; }
.exposure-meter b { transition: top 420ms var(--p-ease-orbit); }
.ready .hero-title { animation: hero-title-live 4.8s var(--p-ease-premium) 1.6s infinite alternate; }
@keyframes orbit-floor-breathe { to { transform: translate(-50%,-50%) rotateX(68deg) scaleX(1.1); opacity: .82; } }
@keyframes orbit-control-live { 0%,100% { border-color: rgba(255,255,255,.34); } 50% { border-color: rgba(125,157,255,.8); box-shadow: 0 0 0 1px rgba(76,119,255,.16),0 0 30px rgba(76,119,255,.12); } }
@keyframes live-dot { 0% { box-shadow: 0 0 0 0 rgba(255,104,73,.68); } 70%,100% { box-shadow: 0 0 0 8px rgba(255,104,73,0); } }
@keyframes hero-scan-pass { 0%,8% { transform: translateX(-18vw) skewX(-7deg); opacity: 0; } 18% { opacity: 1; } 72% { opacity: .86; } 88%,100% { transform: translateX(132vw) skewX(-7deg); opacity: 0; } }
@keyframes scan-label { to { transform: translateY(18px); opacity: .54; } }
@keyframes shutter-pulse { 0% { opacity: 0; transform: scaleX(.02); } 34% { opacity: .52; } 100% { opacity: 0; transform: scaleX(1.1); } }
@keyframes hero-grid-drift { to { transform: translate3d(0,10px,0); opacity: .22; } }
@keyframes hero-title-live { to { transform: translate3d(0,-4px,0); text-shadow: 0 8px 42px rgba(76,119,255,.32); } }
.motion-rail { height: 46px; overflow: hidden; color: var(--p-white); background: var(--p-signal-500); border-top: 1px solid rgba(255,255,255,.28); border-bottom: 1px solid rgba(255,255,255,.28); }
.motion-rail > div { width: max-content; height: 100%; display: flex; align-items: center; gap: 18px; padding-left: 18px; animation: motion-rail 13s linear infinite; }
.motion-rail span { font: 760 17px/1 var(--type-display); letter-spacing: -.04em; }
.motion-rail i { width: 5px; height: 5px; background: var(--p-warm-500); transform: rotate(45deg); }
@keyframes motion-rail { to { transform: translateX(-50%); } }
.manifesto { background: linear-gradient(180deg,var(--p-paper-050),#e9edf4); }
.manifesto-visual { box-shadow: 18px 22px 0 var(--p-signal-a18); }
.manifesto-visual::before { content: ""; position: absolute; z-index: 2; inset: 0; border: 1px solid var(--p-signal-500); transform: translate(10px,10px); pointer-events: none; }
.manifesto-copy h2 em { color: var(--p-signal-500); }
.selected { background: #0e1420; }
.selected-stack { perspective: 1100px; }
.selected-card { width: 88%; min-height: 74svh; transform-style: preserve-3d; transition: transform 420ms var(--p-ease-orbit), box-shadow 420ms ease; border: 1px solid rgba(255,255,255,.14); }
.selected-card:nth-child(even) { margin-left: auto; }
.selected-card:nth-child(odd) { margin-right: auto; }
.selected-card.is-pointed { box-shadow: 0 30px 70px rgba(0,0,0,.42),0 0 0 1px var(--p-signal-a44); }
.selected-card-ui { transform: translateZ(24px); }
.selected-card-ui .lock { transition: transform 420ms var(--p-ease-orbit), border-color 220ms ease; }
.selected-card.is-pointed .lock { transform: rotate(45deg) scale(.84); border-color: var(--p-warm-500); }
.sequence-sticky { perspective: 900px; }
.sequence-frame { transform-origin: 50% 42%; }
.sequence-progress i { background: var(--p-signal-500); box-shadow: 0 0 14px var(--p-signal-a44); }
.process-item { position: relative; overflow: hidden; }
.process-item::before { content: ""; position: absolute; inset: 0; background: var(--p-signal-a18); transform: translateX(-102%); transition: transform 420ms var(--p-ease-orbit); pointer-events: none; }
.process-item.active::before { transform: translateX(0); }
.process-trigger { position: relative; z-index: 1; }
.process-trigger > .num,
.process-trigger > span:nth-child(2) { transition: transform 260ms var(--p-ease-orbit); }
.process-item.active .process-trigger > .num,
.process-item.active .process-trigger > span:nth-child(2) { transform: translateX(7px); }
.process-trigger .state { border-radius: 50%; }
.gallery-main { border: 1px solid rgba(255,255,255,.18); touch-action: pan-y; cursor: grab; }
.gallery-main.is-dragging { cursor: grabbing; }
.gallery-main > img, .filmstrip img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
.gallery-nav { position: absolute; z-index: 4; left: 12px; right: 12px; top: 12px; display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 8px; }
.gallery-nav button { width: 44px; height: 44px; border: 1px solid var(--p-white-a48); color: var(--p-white); background: rgba(14,20,32,.22); backdrop-filter: blur(9px); cursor: pointer; transition: transform 120ms ease, background 160ms ease; }
.gallery-nav button:active { transform: scale(.96); background: var(--p-signal-500); }
.gallery-nav span { justify-self: center; padding: 5px 8px; color: var(--p-white); background: rgba(14,20,32,.36); font: 650 7px/1 var(--type-data); letter-spacing: .1em; }
.filmstrip { cursor: grab; scroll-snap-type: x mandatory; }
.filmstrip.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.film-button { scroll-snap-align: center; }
.gallery-scan { position: absolute; z-index: 3; left: 0; right: 0; top: 24%; height: 1px; background: var(--p-warm-500); box-shadow: 0 0 20px rgba(255,104,73,.55); pointer-events: none; animation: gallery-scan 3.8s var(--p-ease-premium) infinite alternate; }
@keyframes gallery-scan { to { transform: translateY(48svh); opacity: .48; } }
.about { isolation: isolate; background: #e7eaf0; }
.about-kinetic { position: absolute; z-index: -1; inset: 12% -10% auto; display: grid; gap: 0; overflow: hidden; opacity: .12; pointer-events: none; }
.about-kinetic span { display: block; width: max-content; font: 800 clamp(82px,30vw,144px)/.74 var(--type-ui); letter-spacing: -.1em; color: transparent; -webkit-text-stroke: 1px var(--p-signal-500); }
.about-kinetic span:last-child { justify-self: end; color: var(--p-signal-500); -webkit-text-stroke: 0; opacity: .42; }
.about-mark { background: var(--p-signal-500); box-shadow: 10px 10px 0 var(--p-signal-a18); }
.proof { background: #0e1420; }
.proof-wide,.proof-inset { overflow: hidden; }
.proof-wide { overflow: hidden; }
.proof-scan { position: absolute; z-index: 3; top: 0; bottom: 0; left: 16%; width: 2px; background: var(--p-warm-500); box-shadow: 0 0 20px rgba(255,104,73,.6); animation: proof-scan 3.2s var(--p-ease-premium) infinite alternate; }
.proof-scan::before { content: "SCAN"; position: absolute; left: 7px; top: 10px; font: 650 7px/1 var(--type-data); color: var(--p-white); }
@keyframes proof-scan { to { transform: translateX(62vw); } }
.service-item { position: relative; overflow: hidden; }
.service-item::before { content: ""; position: absolute; inset: 0; background: var(--p-signal-500); transform: translateX(-102%); transition: transform 420ms var(--p-ease-orbit); }
.service-item.active::before { transform: translateX(0); }
.service-trigger,.service-detail { position: relative; z-index: 1; }
.service-item.active .service-trigger,.service-item.active .service-trigger p,.service-item.active .service-trigger .num { color: var(--p-white); }
.service-item.active .service-detail li { color: var(--p-white); border-color: rgba(255,255,255,.42); }
.service-item.active .select { border-color: var(--p-white); }
.service-item.active .select::after { background: var(--p-warm-500); }
.services-action { background: var(--p-ink-950); }
.faq-question { transition: transform 220ms var(--p-ease-orbit), color 160ms ease; }
.faq-item.active .faq-question { color: var(--p-signal-500); transform: translateX(5px); }
.contact { isolation: isolate; }
.contact-pulse { position: absolute; z-index: 1; left: 73%; top: 34%; width: 110px; height: 110px; transform: translate(-50%,-50%); pointer-events: none; }
.contact-pulse i { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.72); border-radius: 50%; animation: contact-pulse 2.4s var(--p-ease-premium) infinite; }
.contact-pulse i:nth-child(2) { animation-delay: .6s; }
.contact-pulse i:nth-child(3) { animation-delay: 1.2s; }
@keyframes contact-pulse { 0% { transform: scale(.18); opacity: 0; } 24% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
.contact-action { background: var(--p-signal-500); overflow: hidden; position: relative; }
.contact-action::before { content: ""; position: absolute; inset: 0; background: var(--p-warm-500); transform: translateX(-102%); transition: transform 320ms var(--p-ease-orbit); }
.contact-action span { position: relative; z-index: 1; }
@media (hover:hover) and (pointer:fine) { .contact-action:hover::before { transform: translateX(0); } }
/* V7 / Chapter dwell system ------------------------------------------- */
/* Ambient motion is paused outside the current chapter to keep the page alive
without paying for every loop across the full document. */
.orbit-floor,
.orbit-controller,
.hero-data span:first-child::before,
.hero-scan i,
.hero-scan b,
.hero-grid,
.ready .hero-title,
.hero-scroll i,
.motion-rail > div,
.gallery-scan,
.proof-scan,
.contact-pulse i { animation-play-state: paused; }
.hero.is-current .orbit-floor,
.hero.is-current .orbit-controller,
.hero.is-current .hero-data span:first-child::before,
.hero.is-current .hero-scan i,
.hero.is-current .hero-scan b,
.hero.is-current .hero-grid,
.ready .hero.is-current .hero-title,
.hero.is-current .hero-scroll i,
body[data-motion-section="01"] .motion-rail > div,
.case-night.is-current .gallery-scan,
.proof.is-current .proof-scan,
.contact.is-current .contact-pulse i { animation-play-state: running; }
.gsap-ready .focus-box { animation: none; }
.manifesto-visual::after { animation: manifesto-focus-live 3.8s var(--p-ease-premium) infinite; animation-play-state: paused; }
.manifesto.is-current .manifesto-visual::after { animation-play-state: running; }
@keyframes manifesto-focus-live {
0%,100% { transform: translate3d(0,0,0); opacity: .72; }
50% { transform: translate3d(5px,0,0); opacity: 1; }
}
.selected-card:first-child .lock { animation: selected-lock-live 3.2s ease-in-out infinite; animation-play-state: paused; }
.selected.is-current .selected-card:first-child .lock { animation-play-state: running; }
@keyframes selected-lock-live {
0%,100% { opacity: .62; border-color: rgba(255,255,255,.38); }
50% { opacity: 1; border-color: var(--p-warm-500); }
}
.sequence-hud::before { transform-origin: left center; animation: sequence-hud-x 2.8s ease-in-out infinite; animation-play-state: paused; }
.sequence-hud::after { transform-origin: center top; animation: sequence-hud-y 2.8s ease-in-out infinite; animation-play-state: paused; }
.case-suit.is-current .sequence-hud::before,
.case-suit.is-current .sequence-hud::after { animation-play-state: running; }
@keyframes sequence-hud-x { 0%,100% { transform: scaleX(.72); opacity: .66; } 50% { transform: scaleX(1.25); opacity: 1; } }
@keyframes sequence-hud-y { 0%,100% { transform: scaleY(.72); opacity: .66; } 50% { transform: scaleY(1.25); opacity: 1; } }
.process-console { animation: process-console-live 3.4s ease-in-out infinite; animation-play-state: paused; }
.process.is-current .process-console { animation-play-state: running; }
.process.is-current .process-item.active .state { animation: process-state-live 2.6s ease-in-out infinite; }
@keyframes process-console-live { 0%,100% { border-color: var(--color-text); } 50% { border-color: var(--color-focus); } }
@keyframes process-state-live { 0%,100% { transform: rotate(45deg) scale(1); } 50% { transform: rotate(45deg) scale(1.06); } }
.about-mark { animation: about-mark-live 3.6s ease-in-out infinite; animation-play-state: paused; transform-origin: center; }
.about.is-current .about-mark { animation-play-state: running; }
@keyframes about-mark-live { 0%,100% { transform: scale(.985); opacity: .88; } 50% { transform: scale(1.015); opacity: 1; } }
.service-item.active .select::after { animation: service-select-live 2.8s ease-in-out infinite; animation-play-state: paused; }
.services.is-current .service-item.active .select::after { animation-play-state: running; }
@keyframes service-select-live { 0%,100% { transform: scale(.82); opacity: .68; } 50% { transform: scale(1); opacity: 1; } }
.faq-item:first-child .plus { --faq-angle: 0deg; animation: faq-plus-live 2.8s ease-in-out infinite; animation-play-state: paused; }
.faq-item:first-child.active .plus { --faq-angle: 45deg; }
.faq.is-current .faq-item:first-child .plus { animation-play-state: running; }
@keyframes faq-plus-live {
0%,100% { transform: rotate(var(--faq-angle)) scale(.94); opacity: .62; }
50% { transform: rotate(var(--faq-angle)) scale(1.04); opacity: 1; }
}
body.static-mode .motion-gate, body.static-mode .motion-cursor, body.static-mode .motion-rail, body.static-mode .hero-scan, body.static-mode .hero-shutter { display: none; }
body.static-mode .hero-orbit .orbit-frame { display: none; opacity: 1; transform: translate3d(0,4.5%,0) scale(1.075); }
body.static-mode .hero-orbit .orbit-frame:first-child { display: block; }
body.static-mode .orbit-controller { display: none; }
body.static-mode .orbit-floor, body.static-mode .hero-grid, body.static-mode .hero-title { animation: none; }
body.static-mode .about-kinetic { opacity: .08; }
body.static-mode .proof-scan, body.static-mode .contact-pulse { display: none; }
body.static-mode .process-item::before, body.static-mode .service-item::before { transform: translateX(-102%); }
body.static-mode .process-item.active .process-trigger > .num,
body.static-mode .process-item.active .process-trigger > span:nth-child(2) { transform: none; }
body.static-mode .service-item.active .service-trigger { color: var(--color-text); }
body.static-mode .service-item.active .service-trigger p { color: var(--color-text-muted); }
body.static-mode .service-item.active .service-trigger .num { color: var(--color-focus); }
body.static-mode .service-item.active .service-detail li { color: var(--color-text); border-color: var(--color-border); }
body.static-mode [data-motion-dwell][data-motion-dwell],
body.static-mode [data-motion-dwell][data-motion-dwell]::before,
body.static-mode [data-motion-dwell][data-motion-dwell]::after,
body.static-mode [data-motion-dwell][data-motion-dwell] * { animation: none; }
@media (max-width:350px) {
.orbit-controller { top: 104px; width: 170px; }
.selected-card { width: 92%; }
}
@media (prefers-reduced-motion:reduce) {
[class][class],
[class][class]::before,
[class][class]::after,
[class][class] *,
[class][class] *::before,
[class][class] *::after { animation: none; transition: none; }
.motion-gate,.motion-cursor,.motion-rail,.proof-scan,.contact-pulse,.hero-scan,.hero-shutter,.gallery-scan { display: none; }
.hero-orbit .orbit-frame { display: none; opacity: 1; transform: translate3d(0,4.5%,0) scale(1.075); }
.hero-orbit .orbit-frame:first-child { display: block; }
.orbit-controller { display: none; }
.orbit-floor,.hero-grid,.hero-title { animation: none; }
.selected-card,.selected-card img,.about-kinetic span,.proof-wide,.proof-inset,.contact-media { transform: none; }
.gsap-ready .sequence { height: auto; padding: var(--p-space-1); }
.gsap-ready .sequence-sticky { position: relative; height: auto; overflow: visible; }
.gsap-ready .sequence-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--p-space-1); }
.gsap-ready .sequence-frame { position: relative; inset: auto; opacity: 1; visibility: visible; transform: none; aspect-ratio: 2/3; }
.gsap-ready .sequence-frame::after { display: none; }
.gsap-ready .sequence-hud,
.gsap-ready .sequence-meta,
.gsap-ready .sequence-progress { display: none; }
}
/* V7 / Portrait service entry ------------------------------------------ */
.topbar { grid-template-columns: minmax(0,1fr) auto; }
.page-status { display: none; }
.wordmark { gap: 4px; white-space: nowrap; }
.wordmark b { font: 760 16px/1 var(--type-display); letter-spacing: .08em; }
.wordmark span { font: 650 11px/1 var(--type-body); letter-spacing: .16em; }
.topbar-action {
isolation: isolate;
min-width: 88px;
height: 38px;
padding: 0 14px;
border-color: rgba(255,255,255,.52);
border-radius: 11px;
color: var(--p-white);
background: linear-gradient(145deg,rgba(255,255,255,.20),rgba(255,255,255,.07));
box-shadow: inset 0 1px 0 rgba(255,255,255,.34),0 8px 24px rgba(4,12,26,.16);
-webkit-backdrop-filter: blur(16px) saturate(1.35);
backdrop-filter: blur(16px) saturate(1.35);
font-size: 11px;
letter-spacing: .04em;
}
.topbar-action::before { content: ""; position: absolute; inset: 1px 8px auto; height: 1px; background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); pointer-events: none; }
.topbar-action::after { border-radius: inherit; }
.topbar.is-light .topbar-action { color: var(--p-ink-950); border-color: rgba(255,255,255,.78); background: linear-gradient(145deg,rgba(255,255,255,.82),rgba(255,255,255,.42)); box-shadow: inset 0 1px 0 rgba(255,255,255,.92),0 7px 20px rgba(14,20,32,.10); }
.hero-data { font-size: 10px; font-weight: 720; line-height: 1.35; letter-spacing: .09em; }
.camera-row { gap: 0; padding-top: 14px; font-size: 11px; font-weight: 680; line-height: 1.25; letter-spacing: .11em; }
.camera-row span { min-width: 0; padding: 0 8px; white-space: nowrap; }
.camera-row span:first-child { padding-left: 0; }
.camera-row span:last-child { padding-right: 0; }
.studio-categories { padding: 20px 12px 22px; background: #fff; }
.studio-category-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px 8px; }
.studio-category { min-width: 0; text-align: center; }
.studio-category figure { position: relative; aspect-ratio: 1/1.02; margin: 0 0 6px; overflow: hidden; border: 1px solid rgba(14,20,32,.05); border-radius: 11px; background: linear-gradient(145deg,#f1f2f3,#e4e7e9); box-shadow: 0 6px 14px rgba(14,20,32,.06); }
.studio-category figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,transparent 68%,rgba(14,20,32,.05)); pointer-events: none; }
.studio-category img { height: 100%; object-fit: cover; filter: saturate(.88) contrast(.98); }
.studio-category h2 { margin: 0; overflow: hidden; color: #3d424b; font-size: 11px; font-weight: 600; line-height: 1.25; letter-spacing: .02em; white-space: nowrap; text-overflow: ellipsis; }
.weekly-picks { padding: 15px 10px 21px; border-top: 1px solid #ece8e2; background: #f7f5f1; }
.weekly-head { height: 22px; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; }
.weekly-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; color: #323237; font-size: 14px; font-weight: 720; letter-spacing: .02em; }
.weekly-head h2::before { content: ""; width: 3px; height: 14px; border-radius: 3px; background: #b9946c; }
.weekly-head button { padding: 4px 0; border: 0; color: #aaa6a1; background: transparent; font-size: 10px; cursor: pointer; }
.weekly-head button span { display: inline-block; margin-left: 2px; font-size: 15px; line-height: 0; transform: translateY(1px); }
.weekly-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.weekly-card { min-width: 0; }
.weekly-card figure { aspect-ratio: 1.25/1; margin: 0 0 7px; overflow: hidden; border-radius: 9px; background: #e8e4de; box-shadow: 0 5px 14px rgba(70,54,39,.08); }
.weekly-card img { height: 100%; object-fit: cover; transition: transform var(--motion-standard) var(--p-ease-orbit); }
.weekly-card h3 { margin: 0; overflow: hidden; color: #585652; font-size: 11px; font-weight: 620; line-height: 1.3; white-space: nowrap; text-overflow: ellipsis; }
.weekly-card p { margin: 2px 0 0; color: #b1845e; font: 650 10px/1.2 var(--type-ui); }
@media (hover:hover) and (pointer:fine) { .weekly-card:hover img { transform: scale(1.045); } }
.studio-browser { scroll-margin-top: var(--topbar-height); color: #0e1420; background: #fff; }
.audience-tabs { height: 100px; display: grid; grid-template-columns: 88px repeat(3,minmax(0,1fr)); background: #0738cf; }
.audience-tab { min-width: 0; padding: 10px 4px 9px; border: 0; color: #fff; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; }
.audience-tab > span { width: 40px; height: 40px; border: 1.5px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: 650 10px/1 var(--type-ui); letter-spacing: -.03em; }
.audience-tab > strong { font-size: 14px; font-weight: 700; line-height: 1; letter-spacing: .08em; }
.audience-tab.active { color: #0738cf; background: #fff; border-radius: 0 12px 12px 0; }
.audience-tab:not(.active) > span { box-shadow: inset 0 0 0 7px rgba(255,255,255,.10); }
.studio-browser-body { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: stretch; }
.studio-side-nav { background: #f1f2f5; }
.studio-nav-item { position: relative; width: 100%; height: 82px; padding: 8px 3px 7px; border: 0; color: #9297a8; background: transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.studio-nav-item svg { width: 29px; height: 29px; }
.studio-nav-item > span { font-size: 12px; line-height: 1.15; white-space: nowrap; }
.studio-nav-item > i { position: absolute; top: 12px; right: 19px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; color: #fff; background: #e72635; font: 700 9px/15px var(--type-ui); font-style: normal; }
.studio-nav-item.active { color: #0738cf; background: #fff; }
.studio-nav-item.active::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 0 3px 3px 0; background: #0738cf; }
.studio-offer-panel { min-width: 0; padding: 13px 10px 20px 15px; background: #fff; }
.studio-offer-panel > h2 { margin: 0 0 10px; color: #0e1420; font-size: 18px; font-weight: 760; line-height: 1.25; letter-spacing: -.04em; }
.studio-offer-list { display: grid; gap: 10px; }
.studio-offer { position: relative; min-height: 104px; overflow: hidden; border: 1px solid #b5badd; background: #fff; display: grid; grid-template-columns: minmax(0,1fr) 86px; isolation: isolate; }
.studio-offer::before { content: ""; position: absolute; z-index: -1; top: -14px; right: -20px; width: 137px; height: 137px; border-radius: 50%; }
.studio-offer-peach::before { background: #ffe9ca; }
.studio-offer-aqua::before { background: #c3fcff; }
.studio-offer-sage::before { background: #d7e1d9; }
.studio-offer-sand::before { background: #fae9c8; }
.studio-offer-copy { min-width: 0; padding: 10px 4px 9px 11px; display: flex; flex-direction: column; align-items: flex-start; }
.studio-offer-copy p,.studio-offer-copy h3,.studio-offer-copy span { position: relative; z-index: 2; }
.studio-offer-copy p { margin: 0; font: 520 14px/1.05 var(--type-ui); letter-spacing: -.03em; }
.studio-offer-copy h3 { margin: 2px 0 0; font-size: 15px; font-weight: 650; line-height: 1.05; }
.studio-offer-copy span { margin-top: auto; color: #8b9099; font-size: 10px; line-height: 1.2; white-space: nowrap; }
.studio-offer figure { position: relative; z-index: 2; align-self: center; width: 68px; height: 88px; margin: 0 9px 0 auto; overflow: hidden; border: 2px solid rgba(255,255,255,.88); box-shadow: 0 4px 14px rgba(14,20,32,.13); background: #eef0f2; }
.studio-offer figure img { height: 100%; object-fit: cover; }
.offer-orbit { position: absolute; z-index: 1; right: 73px; top: 45px; width: 33px; height: 33px; border: 1.5px solid #3157ff; border-radius: 50%; transform: rotate(-20deg); opacity: .94; }
.offer-orbit::before,.offer-orbit::after { content: ""; position: absolute; left: 50%; top: 50%; background: #3157ff; transform: translate(-50%,-50%); }
.offer-orbit::before { width: 45px; height: 1px; }
.offer-orbit::after { width: 4px; height: 4px; border-radius: 50%; }
.offer-spark { position: absolute; z-index: 3; top: 9px; right: 8px; width: 13px; height: 13px; border: 1.5px solid #3157ff; transform: rotate(45deg); }
.studio-offer[hidden] { display: none; }
@media (max-width:350px) {
.wordmark b { font-size: 15px; }
.wordmark span { font-size: 10px; }
.topbar-action { min-width: 82px; padding-inline: 11px; }
.hero-data { font-size: 9px; }
.camera-row { font-size: 10px; letter-spacing: .07em; }
.camera-row span { padding-inline: 5px; }
.studio-categories { padding-inline: 9px; }
.studio-category-grid { gap-inline: 6px; }
.studio-category h2 { font-size: 10px; }
.audience-tabs { grid-template-columns: 78px repeat(3,minmax(0,1fr)); }
.studio-browser-body { grid-template-columns: 78px minmax(0,1fr); }
.studio-offer-panel { padding-left: 11px; padding-right: 8px; }
.studio-offer { grid-template-columns: minmax(0,1fr) 72px; }
.studio-offer figure { width: 60px; height: 82px; margin-right: 7px; }
.offer-orbit { right: 61px; }
.studio-nav-item > i { right: 14px; }
}
/* V8 / Product-first mobile revision ---------------------------------- */
.motion-cursor { display: none !important; }
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }
/* A compact, even wordmark that matches the enquiry action. */
.topbar { padding-inline: 18px; gap: 12px; }
.wordmark { gap: 0; align-items: center; }
.wordmark b,
.wordmark span,
.topbar-action {
font-family: var(--type-body);
font-size: 12px;
font-weight: 720;
line-height: 1;
}
.wordmark b,
.wordmark span { letter-spacing: .08em; }
.topbar-action { min-width: 92px; height: 38px; padding-inline: 14px; }
/* 01 / one true phone viewport */
.hero {
width: 100%;
height: 100svh;
min-height: 100svh;
max-height: 100svh;
}
.hero-copy { left: 18px; right: 18px; bottom: max(12px, env(safe-area-inset-bottom)); }
.hero-title {
width: 100%;
max-width: none;
margin: 0 0 10px;
font-size: clamp(48px, 14.4vw, 60px);
line-height: .98;
letter-spacing: -.07em;
}
.hero-title span { overflow: visible; padding-right: .12em; }
.hero-title span em { display: inline-block; padding: .035em .12em .07em 0; white-space: nowrap; }
.hero-sub {
width: auto;
max-width: 31em;
margin: 0 0 12px;
color: rgba(255,255,255,.9);
font-size: 12px;
line-height: 1.55;
text-align: left;
}
.camera-row { padding-top: 11px; font-size: 10px; line-height: 1.25; letter-spacing: .08em; }
.camera-row span { padding-inline: 7px; }
.hero-scroll { display: none; }
.hero-data { left: 18px; right: 18px; }
.orbit-controller { left: 18px; top: 108px; }
/* 02 / compact product entry icons */
.studio-categories { padding: 27px 18px 30px; }
.studio-category-grid {
grid-template-columns: repeat(4, minmax(0, 66px));
justify-content: space-between;
gap: 21px 10px;
}
.studio-category { width: 100%; justify-self: center; }
.studio-category figure {
width: 64px;
height: 64px;
aspect-ratio: 1;
margin: 0 auto 8px;
border-radius: 10px;
box-shadow: 0 5px 12px rgba(14,20,32,.055);
}
.studio-category h2 { font-size: 11px; letter-spacing: .04em; }
/* 03 / larger editorial recommendation cards */
.weekly-picks { padding: 27px 0 34px; background: #f5f3ef; }
.weekly-head { height: auto; margin: 0 18px 15px; align-items: end; }
.weekly-head > div { display: grid; gap: 3px; }
.weekly-head > div > span { color: #9d8266; font: 650 8px/1 var(--type-data); letter-spacing: .12em; }
.weekly-head h2 { gap: 0; font-size: 21px; font-weight: 760; letter-spacing: -.04em; }
.weekly-head h2::before { display: none; }
.weekly-head button { padding: 8px 0 2px 8px; color: #77736e; font-size: 10px; }
.weekly-head button span { margin-left: 4px; font-size: 11px; transform: none; }
.weekly-grid {
display: grid;
grid-auto-flow: column;
grid-auto-columns: min(78vw, 310px);
grid-template-columns: none;
gap: 12px;
overflow-x: auto;
padding: 0 18px 4px;
scroll-padding-inline: 18px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.weekly-grid::-webkit-scrollbar { display: none; }
.weekly-card {
overflow: hidden;
border: 1px solid rgba(57,48,39,.08);
border-radius: 14px;
background: #fff;
box-shadow: 0 10px 26px rgba(67,54,42,.07);
scroll-snap-align: start;
}
.weekly-card figure { position: relative; aspect-ratio: 1.48/1; margin: 0; border-radius: 0; box-shadow: none; }
.weekly-card figure > span {
position: absolute;
left: 10px;
top: 10px;
padding: 5px 7px;
color: #fff;
background: rgba(14,20,32,.48);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font: 650 8px/1 var(--type-data);
letter-spacing: .08em;
}
.weekly-card-copy { position: relative; padding: 13px 13px 15px; }
.weekly-card h3 { padding-right: 62px; color: #2c2b29; font-size: 16px; font-weight: 730; letter-spacing: -.02em; }
.weekly-card-copy p { margin: 5px 0 0; color: #8d8984; font-size: 10px; font-weight: 500; line-height: 1.4; }
.weekly-card-copy strong { position: absolute; right: 13px; top: 15px; color: #a6764f; font: 700 11px/1 var(--type-ui); }
/* 04 / product catalog: no audience types, side rail, circles or diamonds */
.studio-browser { background: #fff; }
.product-tabs {
min-height: 50px;
padding: 7px 10px;
display: flex;
gap: 4px;
overflow-x: auto;
color: #fff;
background: #1945dc;
scroll-padding-inline: 10px;
scrollbar-width: none;
}
.product-tabs::-webkit-scrollbar { display: none; }
.product-tab {
flex: 0 0 auto;
min-width: 62px;
height: 36px;
padding: 0 12px;
border: 0;
border-radius: 8px;
color: rgba(255,255,255,.74);
background: transparent;
font-size: 11px;
font-weight: 650;
white-space: nowrap;
cursor: pointer;
}
.product-tab.active { color: #1945dc; background: #fff; box-shadow: 0 4px 12px rgba(4,29,112,.15); }
.product-catalog { padding: 34px 18px 46px; }
.product-head { margin-bottom: 23px; }
.product-head > p { margin: 0 0 8px; color: #3157ff; font: 650 8px/1 var(--type-data); letter-spacing: .12em; }
.product-head h2 { margin: 0; font-size: clamp(29px, 8.5vw, 36px); line-height: 1.08; letter-spacing: -.06em; }
.product-head > span { display: block; margin-top: 10px; color: #8b94a3; font-size: 11px; line-height: 1.5; }
.product-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 23px 12px; }
.product-card { min-width: 0; }
.product-card[hidden] { display: none; }
.product-card figure { position: relative; aspect-ratio: 4/5; margin: 0 0 10px; overflow: hidden; border-radius: 5px; background: #e9ecf1; }
.product-card figure img { height: 100%; object-fit: cover; transition: transform 420ms var(--p-ease-orbit), filter 320ms ease; }
.product-card figure > span {
position: absolute;
left: 8px;
bottom: 8px;
padding: 4px 6px;
color: #fff;
background: rgba(14,20,32,.62);
font: 650 7px/1 var(--type-data);
letter-spacing: .08em;
}
.product-card h3 { margin: 0; font-size: 15px; line-height: 1.25; letter-spacing: -.02em; }
.product-card p { min-height: 2.9em; margin: 5px 0 8px; color: #7a8494; font-size: 10px; line-height: 1.45; }
.product-card strong { color: #3157ff; font: 700 10px/1 var(--type-ui); }
@media (hover:hover) and (pointer:fine) { .product-card:hover figure img { transform: scale(1.035); filter: saturate(1.05); } }
/* 05 / aligned process system and a clean plus/minus control */
.process { padding: 78px 18px 82px; }
.process-head { margin-bottom: 36px; }
.process-head h2 { margin: 42px 0 18px; font-size: clamp(40px, 11.5vw, 52px); line-height: 1.02; }
.process-head p:last-child { width: 100%; max-width: 31em; margin: 0; font-size: 13px; line-height: 1.7; text-align: left; }
.process-console { border-color: #aeb5c1; }
.process-item::before { background: rgba(49,87,255,.08); }
.process-trigger {
min-height: 84px;
padding: 16px 0;
grid-template-columns: 34px minmax(0,1fr) 30px;
gap: 10px;
}
.process-trigger .num { align-self: start; padding-top: 6px; font-size: 13px; font-weight: 720; }
.process-trigger h3 { font-size: 18px; line-height: 1.25; }
.process-trigger small { margin-top: 4px; font-size: 11px; line-height: 1.35; }
.process-trigger .state {
position: relative;
width: 30px;
height: 26px;
border-color: #9da5b2;
border-radius: 7px;
color: #0e1420;
background: transparent;
transform: none;
}
.process-trigger .state i,
.process-trigger .state i::before {
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 1.5px;
border-radius: 2px;
background: currentColor;
content: "";
transform: translate(-50%,-50%);
transition: transform 220ms ease, opacity 160ms ease;
}
.process-trigger .state i::before { transform: translate(-50%,-50%) rotate(90deg); }
.process-detail p { margin: 0 30px 20px 44px; max-width: none; font-size: 12px; line-height: 1.65; }
.process-item.active .process-trigger > .num,
.process-item.active .process-trigger > span:nth-child(2) { transform: none; }
.process-item.active .state {
color: #fff;
border-color: #3157ff;
background: #3157ff;
transform: none;
animation: none !important;
}
.process-item.active .state::after { content: none; }
.process-item.active .state i::before { opacity: 0; transform: translate(-50%,-50%) rotate(0); }
/* 06 / two-line gallery heading plus camera HUD */
.case-night { padding: 80px 0 72px; }
.night-head { padding: 0 18px 30px; }
.night-head h2 {
max-width: none;
margin: 42px 0 18px;
font-size: clamp(40px, 11vw, 50px);
line-height: 1;
letter-spacing: -.065em;
}
.night-head p:last-child { width: 100%; max-width: 32em; margin: 0; font-size: 12px; line-height: 1.75; text-align: left; }
.gallery-main { height: 58svh; margin: 0 18px; border-radius: 2px; }
.gallery-main::before {
content: "";
position: absolute;
z-index: 2;
inset: 0;
pointer-events: none;
opacity: .26;
background-image:
linear-gradient(to right, transparent calc(33.333% - .5px), rgba(255,255,255,.32) calc(33.333% - .5px), rgba(255,255,255,.32) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
linear-gradient(to right, transparent calc(66.666% - .5px), rgba(255,255,255,.32) calc(66.666% - .5px), rgba(255,255,255,.32) calc(66.666% + .5px), transparent calc(66.666% + .5px)),
linear-gradient(to bottom, transparent calc(33.333% - .5px), rgba(255,255,255,.32) calc(33.333% - .5px), rgba(255,255,255,.32) calc(33.333% + .5px), transparent calc(33.333% + .5px)),
linear-gradient(to bottom, transparent calc(66.666% - .5px), rgba(255,255,255,.32) calc(66.666% - .5px), rgba(255,255,255,.32) calc(66.666% + .5px), transparent calc(66.666% + .5px));
}
.gallery-focus { position: absolute; z-index: 4; left: 50%; top: 45%; width: 92px; height: 92px; transform: translate(-50%,-50%); pointer-events: none; }
.gallery-focus i { position: absolute; width: 22px; height: 22px; border-color: #3157ff; border-style: solid; }
.gallery-focus i:nth-child(1) { left: 0; top: 0; border-width: 2px 0 0 2px; }
.gallery-focus i:nth-child(2) { right: 0; top: 0; border-width: 2px 2px 0 0; }
.gallery-focus i:nth-child(3) { left: 0; bottom: 0; border-width: 0 0 2px 2px; }
.gallery-focus i:nth-child(4) { right: 0; bottom: 0; border-width: 0 2px 2px 0; }
.gallery-focus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; border-radius: 50%; background: #ff6849; transform: translate(-50%,-50%); }
.gallery-live { position: absolute; z-index: 4; right: 12px; top: 66px; padding: 5px 7px; border-left: 1px solid #ff6849; color: rgba(255,255,255,.86); background: rgba(14,20,32,.42); font: 650 7px/1 var(--type-data); letter-spacing: .08em; }
.gallery-readout { z-index: 4; }
/* 07 / the studio itself, not a personality profile */
.about {
min-height: 0;
padding: 78px 18px 72px;
display: block;
background: #e7eaf0;
}
.about-center { margin-top: 0; }
.about h2 { margin: 44px 0 24px; font-size: clamp(39px, 10.8vw, 48px); line-height: 1.03; }
.about-copy { display: block; max-width: 32em; margin: 0; color: #475161; font-size: 13px; line-height: 1.85; }
.about-facts { margin-top: 34px; border-top: 1px solid rgba(14,20,32,.18); }
.about-fact { min-height: 56px; padding: 13px 0; border-bottom: 1px solid rgba(14,20,32,.14); display: grid; grid-template-columns: 88px minmax(0,1fr); gap: 12px; align-items: center; }
.about-fact span { color: #7a8494; font-size: 10px; }
.about-fact strong { font-size: 13px; font-weight: 650; line-height: 1.45; text-align: right; }
.service-trigger { grid-template-columns: 32px minmax(0,1fr); }
.service-trigger .select { display: none; }
.service-trigger .num { font-size: 12px; }
/* 08 / comprehensive compact studio and product grid */
.proof { padding: 78px 0 76px; }
.proof-head { padding: 0 18px 30px; }
.proof h2 { margin: 42px 0 18px; font-size: clamp(39px, 10.8vw, 49px); line-height: 1.02; }
.proof-head p:last-child { width: 100%; max-width: 31em; margin: 0; font-size: 12px; line-height: 1.7; text-align: left; }
.proof-gallery { padding: 0 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 17px 5px; }
.proof-card { min-width: 0; margin: 0; }
.proof-card img { height: auto; aspect-ratio: 4/5; object-fit: cover; filter: saturate(.8) contrast(1.02); }
.proof-card figcaption { margin-top: 7px; padding-inline: 2px; color: rgba(255,255,255,.78); font-size: 10px; line-height: 1.25; white-space: nowrap; }
.proof-card figcaption span { margin-right: 5px; color: #6f8bff; font: 650 8px/1 var(--type-data); }
/* 11 / product-first close */
.contact-pulse { display: none; }
.contact-copy { padding: 82px 18px max(20px,env(safe-area-inset-bottom)); }
.contact-copy h2 { font-size: clamp(46px, 13vw, 60px); line-height: .98; }
.contact-copy > p:not(.section-label) { width: 100%; max-width: 31em; margin: 0 0 24px; font-size: 12px; line-height: 1.7; text-align: left; }
.page-footer { gap: 8px; }
@media (max-width:350px) {
.topbar { padding-inline: 14px; }
.wordmark b,
.wordmark span,
.topbar-action { font-size: 11px; }
.topbar-action { min-width: 82px; padding-inline: 10px; }
.hero-copy { left: 14px; right: 14px; }
.hero-title { font-size: 46px; line-height: 1; }
.hero-sub { font-size: 11px; }
.camera-row { font-size: 9px; letter-spacing: .05em; }
.camera-row span { padding-inline: 4px; }
.studio-categories { padding-inline: 14px; }
.studio-category-grid { grid-template-columns: repeat(4, minmax(0, 61px)); gap-inline: 7px; }
.studio-category figure { width: 59px; height: 59px; }
.weekly-grid { grid-auto-columns: 82vw; }
.product-catalog { padding-inline: 14px; }
.product-grid { gap-inline: 9px; }
.process,
.about { padding-inline: 14px; }
.night-head,
.proof-head { padding-inline: 14px; }
.gallery-main { margin-inline: 14px; }
}
/* V9 / Browser-comment refinement ------------------------------------ */
/* Keep the hero telemetry anchored while lifting only the headline block. */
.hero-copy-main { transform: translateY(-22px); }
/* The light navigation action stays blue instead of turning into a white chip. */
.topbar.is-light .topbar-action {
color: #fff;
border-color: rgba(49,87,255,.58);
background: linear-gradient(145deg,rgba(49,87,255,.94),rgba(28,61,201,.88));
box-shadow: inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(31,65,205,.22);
-webkit-backdrop-filter: blur(14px) saturate(1.2);
backdrop-filter: blur(14px) saturate(1.2);
}
/* A deliberately tight product shortcut block on both 390px and 560px canvases. */
.studio-categories { padding: 20px 18px 22px; }
.studio-category-grid {
width: 100%;
max-width: 326px;
margin-inline: auto;
grid-template-columns: repeat(4,64px);
justify-content: center;
gap: 12px 10px;
}
.studio-category figure { width: 62px; height: 62px; margin-bottom: 6px; }
.studio-category h2 { font-size: 11px; line-height: 1.25; }
/* Recommendations and products lead with image and use, not arbitrary numbering. */
.weekly-card-copy { padding: 14px 14px 16px; }
.weekly-card h3 { padding-right: 0; font-size: 17px; line-height: 1.25; }
.weekly-card-copy p { margin-top: 6px; font-size: 11px; line-height: 1.5; }
.product-head { margin-bottom: 27px; }
.product-head h2 {
display: grid;
gap: 2px;
font-size: clamp(30px,8.2vw,38px);
line-height: 1.08;
letter-spacing: -.055em;
}
.product-head h2 span { display: block; white-space: nowrap; }
.product-head > span { margin-top: 12px; font-size: 12px; line-height: 1.55; }
.product-grid { gap: 26px 13px; }
.product-card figure { margin-bottom: 12px; }
.product-card h3 { font-size: 17px; line-height: 1.3; }
.product-card p { min-height: 0; margin: 6px 0 0; font-size: 12px; line-height: 1.55; }
/* Large chapter marks: the number, rule and label now read as one true index. */
.chapter-label {
display: flex;
align-items: center;
gap: 10px;
min-height: 24px;
font-family: var(--type-data);
line-height: 1;
letter-spacing: 0;
}
.chapter-label::before { display: none; }
.chapter-label > span {
color: #3157ff;
font: 760 20px/.9 var(--type-data);
letter-spacing: -.06em;
}
.chapter-label > i { width: 52px; height: 2px; flex: 0 0 auto; background: #3157ff; }
.chapter-label > b { font: 680 10px/1 var(--type-data); letter-spacing: .09em; }
.case-night .chapter-label > span,
.proof .chapter-label > span { color: #85a0ff; }
.case-night .chapter-label > i,
.proof .chapter-label > i { background: #85a0ff; }
/* The four ordered steps keep their numbers; copy and state labels share a clean baseline. */
.process-head h2 { margin-top: 30px; }
.process-head p:last-child {
max-width: none;
white-space: nowrap;
font-size: 12.5px;
line-height: 1.6;
}
.process-trigger {
min-height: 88px;
grid-template-columns: 44px minmax(0,1fr) 42px;
gap: 12px;
}
.process-trigger .num {
align-self: stretch;
padding: 0;
display: grid;
place-items: center;
font: 760 18px/1 var(--type-data);
letter-spacing: -.04em;
text-align: center;
}
.process-trigger h3 { font-size: 19px; }
.process-trigger small { font-size: 12px; }
.process-trigger .state {
width: 42px;
height: 28px;
border: 0;
border-radius: 5px;
display: grid;
place-items: center;
color: #3157ff;
background: rgba(49,87,255,.08);
font: 680 10px/1 var(--type-body);
}
.process-trigger .state i { display: none; }
.process-trigger .state::after { content: "展开"; }
.process-item.active .state {
color: #fff;
background: #3157ff;
}
.process-item.active .state::after { content: "收起"; }
.process-detail p { margin-left: 56px; margin-right: 42px; font-size: 13px; }
/* Lookbook: slightly looser title leading and one centered, quiet control group. */
.night-head h2 { margin-top: 30px; line-height: 1.08; letter-spacing: -.055em; }
.gallery-nav {
left: 50%;
right: auto;
top: 14px;
width: max-content;
padding: 4px;
display: flex;
gap: 4px;
border: 1px solid rgba(255,255,255,.34);
border-radius: 999px;
background: rgba(14,20,32,.32);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transform: translateX(-50%);
}
.gallery-nav button {
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: transparent;
font-size: 17px;
}
.gallery-nav button:active { background: rgba(49,87,255,.9); }
/* Studio facts and proof captions are readable without competing with the imagery. */
.about h2,
.proof h2 { margin-top: 30px; }
.about-fact { grid-template-columns: 102px minmax(0,1fr); }
.about-fact span { font-size: 12px; line-height: 1.35; }
.about-fact strong { font-size: 14px; }
.proof-card figcaption { margin-top: 8px; font-size: 12px; line-height: 1.3; }
.proof-card figcaption span { margin-right: 6px; font-size: 10px; }
/* 11 / no-photo booking console: typography, viewfinder grid and one decisive action. */
.contact {
min-height: 100svh;
display: block;
color: #f4f6fb;
background:
radial-gradient(circle at 72% 26%,rgba(49,87,255,.20),transparent 30%),
linear-gradient(155deg,#101b2c 0%,#0d1422 54%,#080d17 100%);
isolation: isolate;
}
.contact-field { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.contact-grid {
position: absolute;
inset: var(--topbar-height) 0 0;
opacity: .32;
background-image:
linear-gradient(to right,transparent calc(33.333% - .5px),rgba(255,255,255,.12) calc(33.333% - .5px),rgba(255,255,255,.12) calc(33.333% + .5px),transparent calc(33.333% + .5px)),
linear-gradient(to right,transparent calc(66.666% - .5px),rgba(255,255,255,.12) calc(66.666% - .5px),rgba(255,255,255,.12) calc(66.666% + .5px),transparent calc(66.666% + .5px)),
linear-gradient(to bottom,transparent calc(50% - .5px),rgba(255,255,255,.1) calc(50% - .5px),rgba(255,255,255,.1) calc(50% + .5px),transparent calc(50% + .5px));
}
.contact-number {
position: absolute;
right: -14px;
top: 92px;
color: transparent;
-webkit-text-stroke: 1px rgba(128,157,255,.24);
font: 760 clamp(168px,52vw,232px)/.78 var(--type-ui);
letter-spacing: -.12em;
user-select: none;
}
.contact-orbit {
position: absolute;
right: 30px;
top: 38%;
width: 104px;
height: 104px;
opacity: .72;
background:
linear-gradient(#6f8bff,#6f8bff) left top/28px 2px no-repeat,
linear-gradient(#6f8bff,#6f8bff) left top/2px 28px no-repeat,
linear-gradient(#6f8bff,#6f8bff) right top/28px 2px no-repeat,
linear-gradient(#6f8bff,#6f8bff) right top/2px 28px no-repeat,
linear-gradient(#6f8bff,#6f8bff) left bottom/28px 2px no-repeat,
linear-gradient(#6f8bff,#6f8bff) left bottom/2px 28px no-repeat,
linear-gradient(#6f8bff,#6f8bff) right bottom/28px 2px no-repeat,
linear-gradient(#6f8bff,#6f8bff) right bottom/2px 28px no-repeat;
animation: contact-focus-drift 5.6s ease-in-out infinite alternate;
}
.contact-orbit i { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #ff6849; transform: translate(-50%,-50%); }
.contact-copy {
position: relative;
z-index: 2;
width: 100%;
min-height: 100svh;
padding: 86px 18px max(20px,env(safe-area-inset-bottom));
display: flex;
flex-direction: column;
}
.contact-copy > p.contact-kicker {
margin: 0;
width: auto;
max-width: none;
display: flex;
align-items: center;
gap: 10px;
color: rgba(255,255,255,.72);
font-size: inherit;
line-height: 1;
text-align: left;
}
.contact-kicker span { color: #85a0ff; font: 760 20px/.9 var(--type-data); letter-spacing: -.06em; }
.contact-kicker i { width: 54px; height: 2px; background: #6f8bff; }
.contact-kicker b { font: 680 10px/1 var(--type-data); letter-spacing: .1em; }
.contact-copy h2 {
max-width: none;
margin: clamp(84px,14svh,126px) 0 22px;
font-size: clamp(48px,13vw,64px);
line-height: 1.02;
letter-spacing: -.075em;
}
.contact-copy > p:not(.contact-kicker) {
width: 100%;
max-width: 31em;
margin: 0 0 26px;
color: rgba(255,255,255,.68);
font-size: 13px;
line-height: 1.75;
text-align: left;
}
.contact-checks {
margin: 0 0 26px;
padding: 13px 0;
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
color: rgba(255,255,255,.82);
font-size: 11px;
font-weight: 650;
text-align: center;
}
.contact-checks span:not(:last-child) { border-right: 1px solid rgba(255,255,255,.16); }
.contact-action {
min-height: 58px;
height: 58px;
padding-inline: 18px;
border: 1px solid rgba(127,154,255,.72);
border-radius: 10px;
background: linear-gradient(135deg,#3157ff,#2446d5);
box-shadow: 0 14px 34px rgba(31,66,220,.24),inset 0 1px 0 rgba(255,255,255,.2);
}
.contact-arrow { font-size: 18px; }
.contact .page-footer { margin-top: auto; padding-top: 15px; gap: 8px; }
@keyframes contact-focus-drift {
from { transform: translate3d(-10px,-6px,0); opacity: .46; }
to { transform: translate3d(8px,10px,0); opacity: .82; }
}
@media (max-width:430px) {
.process-head p:last-child { white-space: normal; }
.contact-copy h2 { margin-top: clamp(66px,11svh,92px); }
}
@media (max-width:350px) {
.hero-copy-main { transform: translateY(-16px); }
.studio-categories { padding-inline: 14px; }
.studio-category-grid { grid-template-columns: repeat(4,61px); gap-inline: 8px; }
.studio-category figure { width: 59px; height: 59px; }
.product-head h2 { font-size: 28px; }
.process-trigger { grid-template-columns: 38px minmax(0,1fr) 40px; gap: 8px; }
.process-trigger .num { font-size: 16px; }
.process-trigger h3 { font-size: 17px; }
.process-detail p { margin-left: 46px; margin-right: 36px; }
.contact-copy { padding-inline: 14px; }
.contact-copy h2 { font-size: 45px; }
}
@media (prefers-reduced-motion:reduce) {
.contact-orbit { animation: none !important; }
.hero-copy-main { transform: translateY(-18px); }
}
/* V10 / Nine annotated refinements ----------------------------------- */
/* Six core shortcuts share one balanced row; the full catalog stays below. */
.studio-categories { padding: 24px 18px 26px; }
.studio-category-grid {
width: 100%;
max-width: 454px;
margin-inline: auto;
grid-template-columns: repeat(6,64px);
justify-content: center;
gap: 0 14px;
}
.studio-category { min-width: 0; }
.studio-category figure {
width: 64px;
height: 64px;
margin: 0 auto 8px;
}
.studio-category h2 {
font-size: 11px;
line-height: 1.25;
letter-spacing: .02em;
white-space: nowrap;
}
/* The process control is now a true, generously sized plus/minus icon. */
.process-trigger {
min-height: 96px;
padding: 18px 0;
grid-template-columns: 50px minmax(0,1fr) 48px;
gap: 14px;
align-items: center;
}
.process-trigger .num {
align-self: stretch;
padding: 0;
display: grid;
place-items: center;
font: 760 20px/1 var(--type-data);
text-align: center;
}
.process-trigger > span:nth-child(2) {
min-width: 0;
display: grid;
gap: 5px;
align-content: center;
}
.process-trigger h3 { font-size: 20px; line-height: 1.2; }
.process-trigger small { margin: 0; font-size: 12px; line-height: 1.45; }
.process-trigger .state {
position: relative;
width: 48px;
height: 48px;
border: 1px solid rgba(49,87,255,.36);
border-radius: 12px;
color: #3157ff;
background: rgba(49,87,255,.07);
box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.process-trigger .state::after { content: none; }
.process-trigger .state i {
display: block;
left: 50%;
top: 50%;
width: 16px;
height: 2px;
border-radius: 3px;
background: currentColor;
transform: translate(-50%,-50%);
}
.process-trigger .state i::before {
width: 16px;
height: 2px;
border-radius: 3px;
background: currentColor;
transform: translate(-50%,-50%) rotate(90deg);
}
.process-item.active .state {
color: #fff;
border-color: #3157ff;
background: #3157ff;
box-shadow: 0 9px 22px rgba(49,87,255,.22),inset 0 1px 0 rgba(255,255,255,.24);
}
.process-item.active .state::after { content: none; }
.process-item.active .state i::before { opacity: 0; transform: translate(-50%,-50%) rotate(0); }
.process-detail p { margin: 0 58px 22px 64px; }
/* Gallery navigation belongs beneath the photograph, before the filmstrip. */
.case-night > .gallery-nav {
position: relative;
z-index: 4;
left: auto;
right: auto;
top: auto;
width: max-content;
margin: 14px auto 16px;
padding: 4px;
transform: none;
background: rgba(255,255,255,.07);
}
.case-night > .gallery-nav button { width: 42px; height: 42px; }
.case-night > .filmstrip { padding-top: 0; }
/* Ordered product choices use larger, vertically centered sequence numbers. */
.services h2,
.contact-copy h2 { letter-spacing: 3px; }
.service-trigger {
min-height: 96px;
padding: 22px 18px;
grid-template-columns: 54px minmax(0,1fr);
gap: 12px;
align-items: stretch;
}
.service-trigger .num {
align-self: stretch;
padding: 0;
display: grid;
place-items: center;
font: 760 20px/1 var(--type-data);
text-align: center;
}
.service-trigger > span:nth-child(2) {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.service-trigger .select { display: none; }
.service-trigger h3 { margin: 0 0 9px; }
.service-trigger p { line-height: 1.5; }
.service-detail ul { margin-left: 84px; }
/* The final screen loses the focus reticle; type rises and the footer is readable. */
.contact-orbit { display: none !important; }
.contact-copy h2 {
margin: clamp(48px,7svh,64px) 0 22px;
}
.contact .page-footer {
font: 600 11px/1.55 var(--type-data);
color: rgba(255,255,255,.66);
}
.contact .page-footer .rights { color: rgba(255,255,255,.62); }
@media (max-width:430px) {
.studio-category-grid {
max-width: none;
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 0 6px;
}
.studio-category figure {
width: min(52px,100%);
height: auto;
aspect-ratio: 1;
}
.studio-category h2 { font-size: 10px; letter-spacing: 0; }
.process-trigger { grid-template-columns: 46px minmax(0,1fr) 44px; gap: 10px; }
.process-trigger .num { font-size: 19px; }
.process-trigger .state { width: 44px; height: 44px; }
.process-detail p { margin-left: 56px; margin-right: 54px; }
.service-trigger { grid-template-columns: 48px minmax(0,1fr); gap: 10px; }
.service-trigger .num { font-size: 19px; }
.service-detail ul { margin-left: 76px; }
.contact-copy h2 {
margin-top: clamp(44px,7svh,58px);
font-size: clamp(40px,11.5vw,50px);
}
}
@media (max-width:350px) {
.studio-categories { padding-inline: 12px; }
.studio-category-grid {
grid-template-columns: repeat(6,minmax(0,1fr));
gap-inline: 5px;
}
.studio-category figure { width: min(44px,100%); }
.studio-category h2 { font-size: 9px; }
.process-trigger { grid-template-columns: 42px minmax(0,1fr) 44px; gap: 8px; }
.process-trigger .num { font-size: 18px; }
.process-trigger .state { width: 44px; height: 44px; }
.process-detail p { margin-left: 50px; margin-right: 52px; }
.service-trigger { padding-inline: 14px; grid-template-columns: 46px minmax(0,1fr); gap: 8px; }
.service-trigger .num { font-size: 18px; }
.service-detail ul { margin-left: 68px; }
.contact-copy h2 { font-size: 39px; }
.contact .page-footer { font-size: 10px; }
}
@media (prefers-reduced-motion:reduce) {
.process-trigger .state,
.case-night > .gallery-nav { transition: none !important; }
}
/* V11 / Unified rhythm, scrollable recommendations and merged close --- */
:root {
--space-page: 18px;
--layout-gutter: 18px;
--layout-rhythm: 18px;
}
/* Every primary content edge shares one 18px mobile baseline. */
.topbar { padding-inline: var(--layout-gutter); }
.hero-data,
.hero-copy { left: var(--layout-gutter); right: var(--layout-gutter); }
.orbit-controller { left: var(--layout-gutter); }
.studio-categories,
.product-catalog,
.process,
.about,
.faq,
.contact-copy { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
.weekly-head { margin-left: var(--layout-gutter); margin-right: var(--layout-gutter); }
.weekly-grid {
padding-left: var(--layout-gutter);
padding-right: var(--layout-gutter);
scroll-padding-inline: var(--layout-gutter);
}
.product-tabs { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
.night-head,
.proof-head { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
.gallery-main { margin-left: var(--layout-gutter); margin-right: var(--layout-gutter); }
.filmstrip,
.proof-gallery { padding-left: var(--layout-gutter); padding-right: var(--layout-gutter); }
/* Six shortcuts now align with every following section instead of floating inward. */
.studio-category-grid {
width: 100%;
max-width: none;
grid-template-columns: repeat(6,64px);
justify-content: space-between;
gap: 0;
}
/* Native touch scroll plus mouse drag and keyboard paging. */
.weekly-grid {
grid-auto-columns: min(78vw,310px);
gap: var(--layout-rhythm);
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
cursor: grab;
}
.weekly-grid.is-dragging {
cursor: grabbing;
user-select: none;
scroll-snap-type: none;
}
.weekly-grid:focus-visible {
outline: 2px solid #3157ff;
outline-offset: -2px;
}
.weekly-card,
.weekly-card img {
user-select: none;
-webkit-user-drag: none;
}
.weekly-scroll-cue {
margin: 12px var(--layout-gutter) 0;
display: grid;
grid-template-columns: auto minmax(72px,1fr);
gap: 12px;
align-items: center;
color: #8d8984;
font: 650 8px/1 var(--type-data);
letter-spacing: .12em;
}
.weekly-scroll-cue i {
position: relative;
height: 1px;
overflow: hidden;
background: rgba(67,54,42,.16);
}
.weekly-scroll-cue b {
position: absolute;
inset: 0;
background: #3157ff;
transform: scaleX(.22);
transform-origin: left center;
}
/* The process control keeps the same grid but gains a full gutter on the right. */
.process-trigger { padding: 18px var(--layout-gutter) 18px 0; }
/* Gallery controls sit inside the lower camera readout area. */
.gallery-main > .gallery-nav {
position: absolute;
z-index: 6;
left: 50%;
right: auto;
top: auto;
bottom: var(--layout-rhythm);
width: max-content;
margin: 0;
padding: 4px;
display: flex;
gap: 4px;
border: 1px solid rgba(255,255,255,.42);
border-radius: 999px;
background: rgba(14,20,32,.38);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
transform: translateX(-50%);
}
.gallery-main > .gallery-nav button {
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
color: #fff;
background: transparent;
font-size: 18px;
}
.gallery-main > .gallery-nav button:active { background: rgba(49,87,255,.9); }
.case-night > .filmstrip { padding-top: var(--layout-rhythm); }
/* Product selection is now a compact contact sheet inside the final screen. */
.services { display: none; }
.contact { min-height: 100svh; }
.contact-copy {
min-height: 100svh;
padding-top: 72px;
padding-bottom: max(18px,env(safe-area-inset-bottom));
}
.contact-copy h2 {
margin: 54px 0 var(--layout-rhythm);
letter-spacing: 3px;
}
.contact-copy > p:not(.contact-kicker) { margin-bottom: var(--layout-rhythm); }
.contact-products { margin: 0 0 var(--layout-rhythm); }
.contact-products-head {
margin: 0 0 10px;
display: flex;
align-items: center;
justify-content: space-between;
color: rgba(255,255,255,.66);
font: 650 9px/1 var(--type-data);
letter-spacing: .08em;
}
.contact-products-head b { color: #85a0ff; font-weight: 700; }
.contact-product-grid {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 8px;
}
.contact-product-option {
min-width: 0;
min-height: 88px;
padding: 11px 10px;
border: 1px solid rgba(255,255,255,.18);
border-radius: 8px;
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.045);
text-align: left;
cursor: pointer;
transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease, transform 150ms ease-out;
}
.contact-product-option > span {
display: block;
margin-bottom: 8px;
color: #85a0ff;
font: 700 9px/1 var(--type-data);
}
.contact-product-option strong {
display: block;
font-size: 14px;
line-height: 1.25;
}
.contact-product-option small {
display: block;
margin-top: 6px;
color: rgba(255,255,255,.5);
font-size: 9px;
line-height: 1.4;
}
.contact-product-option.active {
color: #fff;
border-color: rgba(111,139,255,.92);
background: rgba(49,87,255,.24);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.contact-product-option:active { transform: scale(.97); }
.contact-checks { margin-bottom: var(--layout-rhythm); }
.contact .page-footer { margin-top: auto; }
@media (hover:hover) and (pointer:fine) {
.contact-product-option:hover {
border-color: rgba(111,139,255,.7);
background: rgba(49,87,255,.14);
}
}
@media (max-width:430px) {
.studio-category-grid {
grid-template-columns: repeat(6,minmax(0,1fr));
gap: 0 6px;
}
.studio-category figure { width: min(52px,100%); }
}
@media (max-width:350px) {
.studio-category figure { width: min(44px,100%); }
.contact-copy h2 { font-size: 39px; }
.contact-product-option {
min-height: 84px;
padding: 10px 8px;
}
.contact-product-option strong { font-size: 12px; }
.contact-product-option small { font-size: 8px; }
}
@media (prefers-reduced-motion:reduce) {
.weekly-grid { scroll-behavior: auto; }
.contact-product-option { transition: none; }
}
/* V12 / Frosted filters, complete filtered cards and a tighter final screen. */
.product-tabs {
min-height: 60px;
padding-block: 8px;
gap: 7px;
scroll-padding-inline: var(--layout-gutter);
scroll-snap-type: x proximity;
overscroll-behavior-inline: contain;
-webkit-overflow-scrolling: touch;
background:
radial-gradient(circle at 18% 0%,rgba(119,150,255,.34),transparent 42%),
linear-gradient(135deg,rgba(32,73,226,.97),rgba(20,50,171,.95));
box-shadow: inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(4,20,83,.22);
}
.product-tab {
min-width: 68px;
min-height: 44px;
height: 44px;
padding-inline: 13px;
border: 1px solid rgba(255,255,255,.22);
border-radius: 12px;
color: rgba(255,255,255,.86);
background: linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
box-shadow: inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(4,29,112,.12);
-webkit-backdrop-filter: blur(12px) saturate(1.3);
backdrop-filter: blur(12px) saturate(1.3);
scroll-snap-align: start;
touch-action: manipulation;
transition: color 150ms ease,border-color 150ms ease,background-color 150ms ease,transform 120ms cubic-bezier(.215,.61,.355,1);
}
.product-tab.active {
color: #fff;
border-color: rgba(255,255,255,.72);
background: linear-gradient(145deg,rgba(255,255,255,.46),rgba(255,255,255,.16));
box-shadow: inset 0 1px 0 rgba(255,255,255,.72),0 8px 20px rgba(4,29,112,.22);
}
.product-tab:active { transform: scale(.96); }
.product-tab:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.product-card-type,
.product-card-detail { display: none; }
.product-grid.is-filtered { grid-template-columns: minmax(0,1fr); }
.product-grid.is-filtered .product-card:not([hidden]) {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,1fr);
align-items: stretch;
gap: 0;
overflow: hidden;
border: 1px solid #dce2ec;
border-radius: 12px;
background: #f5f7fb;
box-shadow: 0 12px 30px rgba(28,44,78,.08);
}
.product-grid.is-filtered .product-card figure {
height: auto;
min-height: 100%;
margin: 0;
border-radius: 0;
}
.product-grid.is-filtered .product-card-copy {
min-width: 0;
padding: clamp(14px,4vw,22px);
display: flex;
flex-direction: column;
justify-content: center;
}
.product-grid.is-filtered .product-card-type {
display: block;
margin-bottom: 12px;
color: #3157ff;
font: 680 8px/1 var(--type-data);
letter-spacing: .11em;
}
.product-grid.is-filtered .product-card h3 { font-size: clamp(19px,5.2vw,25px); }
.product-grid.is-filtered .product-card p {
margin: 8px 0 14px;
color: #677285;
font-size: clamp(11px,2.9vw,13px);
line-height: 1.65;
}
.product-grid.is-filtered .product-card-detail {
display: block;
padding-top: 12px;
border-top: 1px solid #d7deea;
color: #3157ff;
font-size: clamp(9px,2.5vw,11px);
font-weight: 650;
line-height: 1.65;
}
.gallery-main > .gallery-nav {
width: 99px;
min-height: 54px;
display: grid;
grid-template-columns: 44px 44px;
justify-content: center;
gap: 1px;
border-color: rgba(255,255,255,.38);
background: linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05)),rgba(8,14,26,.42);
box-shadow: 0 10px 26px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.2);
-webkit-backdrop-filter: blur(14px) saturate(130%);
backdrop-filter: blur(14px) saturate(130%);
}
.gallery-main > .gallery-nav::after {
content: "";
position: absolute;
left: 50%;
top: 14px;
bottom: 14px;
width: 1px;
background: rgba(255,255,255,.18);
transform: translateX(-.5px);
pointer-events: none;
}
.gallery-main > .gallery-nav button {
position: relative;
z-index: 1;
padding: 0;
display: grid;
place-items: center;
color: rgba(255,255,255,.94);
cursor: pointer;
transition: transform 120ms cubic-bezier(.215,.61,.355,1),background-color 150ms ease,color 150ms ease;
}
.gallery-main > .gallery-nav svg {
width: 19px;
height: 19px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
pointer-events: none;
}
.gallery-main > .gallery-nav [data-gallery-prev] svg { transform: translateX(-.5px); }
.gallery-main > .gallery-nav [data-gallery-next] svg { transform: translateX(.5px); }
.gallery-main > .gallery-nav button:active {
color: #fff;
background: rgba(49,87,255,.86);
transform: scale(.94);
}
.gallery-main > .gallery-nav button:focus-visible {
outline: 2px solid #9eb2ff;
outline-offset: -3px;
background: rgba(49,87,255,.28);
}
.contact,
.contact-copy { min-height: 0; }
.contact-copy {
--contact-rhythm: 14px;
padding-top: calc(var(--topbar-height) + 12px);
padding-bottom: max(24px,env(safe-area-inset-bottom));
}
.contact-copy h2 { margin: 32px 0 var(--contact-rhythm); }
.contact-copy > p:not(.contact-kicker),
.contact-products,
.contact-checks { margin-bottom: var(--contact-rhythm); }
.contact-copy > p:not(.contact-kicker) { line-height: 1.6; }
.contact-products-head { margin-bottom: 8px; }
.contact-product-option { min-height: 80px; padding: 10px; }
.contact-product-option > span { margin-bottom: 6px; }
.contact-product-option small { margin-top: 4px; }
.contact-checks { padding-block: 10px; }
.contact-action { min-height: 54px; height: 54px; }
.contact .page-footer { margin-top: 24px; padding-top: 12px; }
@media (hover:hover) and (pointer:fine) {
.product-tab:hover { border-color: rgba(255,255,255,.52); background: rgba(255,255,255,.2); }
.gallery-main > .gallery-nav button:hover { color: #fff; background: rgba(255,255,255,.12); }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
.product-tab { background: rgba(255,255,255,.16); }
.gallery-main > .gallery-nav { background: rgba(8,14,26,.86); }
}
@media (max-width:350px) {
.product-tab { min-width: 62px; padding-inline: 10px; font-size: 10px; }
.product-grid.is-filtered .product-card-copy { padding: 12px; }
.product-grid.is-filtered .product-card-type { margin-bottom: 8px; font-size: 7px; }
.product-grid.is-filtered .product-card p { margin: 6px 0 9px; line-height: 1.5; }
.product-grid.is-filtered .product-card-detail { padding-top: 8px; line-height: 1.5; }
.contact-copy h2 { margin-top: 26px; }
}
@media (prefers-reduced-motion:reduce) {
.product-tab,
.gallery-main > .gallery-nav button { transition: none; }
}
/* V14 / portrait-safe framing ---------------------------------------- */
/*
* The new photography is predominantly 2:3. These final ratios keep the
* face and hairline inside the frame instead of forcing a landscape crop.
*/
.studio-category img {
object-position: 50% 0 !important;
}
.weekly-card figure,
.product-card figure {
aspect-ratio: 3/4;
}
.gallery-main {
height: auto;
aspect-ratio: 3/4;
}
.proof-card img {
aspect-ratio: 3/4;
}
.product-grid.is-filtered .product-card:not([hidden]) {
grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr);
align-items: start;
}
.product-grid.is-filtered .product-card figure {
height: auto;
min-height: 0;
aspect-ratio: 3/4;
align-self: start;
}
/* V15 / fuller selected-product card and leaner contact brief -------- */
.product-card-specs { display: none; }
.product-grid.is-filtered .product-card-specs {
margin: 0 0 11px;
padding: 0;
display: grid;
border-top: 1px solid #d7deea;
}
.product-grid.is-filtered .product-card-specs > div {
min-width: 0;
padding: 7px 0;
display: grid;
grid-template-columns: 44px minmax(0,1fr);
gap: 10px;
align-items: baseline;
border-bottom: 1px solid #d7deea;
}
.product-grid.is-filtered .product-card-specs dt {
color: #778397;
font: 650 9px/1.2 var(--type-ui);
}
.product-grid.is-filtered .product-card-specs dd {
min-width: 0;
margin: 0;
color: #172235;
font-size: clamp(10px,2.5vw,12px);
font-weight: 680;
line-height: 1.35;
}
.product-grid.is-filtered .product-card-detail {
padding-top: 0;
border-top: 0;
}
@media (max-width:430px) {
.product-grid.is-filtered .product-card-specs {
margin-bottom: 0;
}
.product-grid.is-filtered .product-card-specs > div {
padding: 5px 0;
grid-template-columns: 36px minmax(0,1fr);
gap: 7px;
}
.product-grid.is-filtered .product-card-specs dt { font-size: 8px; }
.product-grid.is-filtered .product-card-specs dd { font-size: 10px; }
.product-grid.is-filtered .product-card-detail { display: none; }
}