.obs-page { min-height:100vh; color:var(--ink,#18313c); background:#0b1e28; }
.obs-background,.obs-veil { position:fixed; inset:0; pointer-events:none; }
.obs-background { z-index:-2; background:center/cover no-repeat url("../assets/hero-day-1600.b690997b52.webp"); transform:scale(1.04); }
html[data-theme="dark"] .obs-background { background-image:url("../assets/hero-night-1600.76ef21349f.webp"); }
.obs-veil { z-index:-1; background:rgba(7,24,34,.58); -webkit-backdrop-filter:blur(13px) saturate(82%); backdrop-filter:blur(13px) saturate(82%); }
.obs-page .site-header { background:transparent; }
.obs-page .nav-shell { background:rgba(255,250,241,.72); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
html[data-theme="dark"] .obs-page .nav-shell { background:rgba(8,24,34,.74); border-color:rgba(136,179,202,.22); }
.obs-main { width:min(1240px,calc(100% - 32px)); min-height:100dvh; display:grid; place-items:center; margin:0 auto; padding:clamp(100px,10vw,132px) 0 clamp(28px,4vw,52px); box-sizing:border-box; }
.obs-gallery { width:100%; border:1px solid rgba(255,255,255,.34); border-radius:30px; padding:clamp(20px,3vw,38px); background:color-mix(in srgb,var(--paper,#fffaf1) 88%,transparent); box-shadow:0 30px 90px rgba(0,0,0,.28); -webkit-backdrop-filter:blur(24px) saturate(120%); backdrop-filter:blur(24px) saturate(120%); }
html[data-theme="dark"] .obs-gallery { border-color:rgba(136,179,202,.26); background:rgba(8,24,34,.86); color:#eef7fb; }
.obs-heading { max-width:760px; margin:0 auto 20px; text-align:center; }
.obs-heading h1 { margin:8px 0 12px; font-size:clamp(2.4rem,6vw,5rem); line-height:.96; letter-spacing:-.045em; }
.obs-heading>p:last-child { max-width:680px; margin:0; color:var(--muted,#61737a); font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.65; }
html[data-theme="dark"] .obs-heading>p:last-child { color:#b5c7d0; }
.obs-feature { margin:0; }
.obs-feature-frame { overflow:hidden; width:min(100%,calc((100dvh - 420px) * 1.333)); max-width:900px; max-height:calc(100dvh - 420px); margin:0 auto; aspect-ratio:4/3; border-radius:24px; background:#d8e1e5; box-shadow:0 18px 48px rgba(7,24,34,.2); }
.obs-feature-frame img { display:block; width:100%; height:100%; object-fit:cover; opacity:1; transform:scale(1); transition:opacity 280ms ease,transform 650ms cubic-bezier(.2,.75,.2,1); }
.obs-feature-frame img.is-changing { opacity:.2; transform:scale(1.018); }
.obs-feature figcaption { padding:18px 2px 2px; font-size:clamp(1.4rem,2.5vw,2rem); font-weight:800; text-align:center; }
.obs-thumbnails { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); align-items:start; gap:8px; overflow:visible; padding:4px 0 12px; }
.obs-thumbnails button { appearance:none; min-width:0; padding:6px 5px 10px; border:2px solid transparent; border-radius:16px; color:inherit; background:rgba(255,255,255,.48); cursor:pointer; scroll-snap-align:center; transition:border-color 180ms ease,transform 180ms ease,background 180ms ease; }
html[data-theme="dark"] .obs-thumbnails button { background:rgba(255,255,255,.06); }
.obs-thumbnails button:hover { transform:translateY(-2px); }
.obs-thumbnails button[aria-current="true"] { border-color:#016fde; background:rgba(1,111,222,.13); }
.obs-thumbnails button:focus-visible { outline:3px solid #e09a52; outline-offset:3px; }
.obs-thumbnails img { display:block; width:100%; height:auto; aspect-ratio:4/3; border-radius:10px; object-fit:cover; }
.obs-thumbnails span { display:block; margin-top:8px; font-size:.82rem; font-weight:800; line-height:1.2; }
.obs-footer-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:18px; }
.obs-back-button,.comfort-privacy-cta .button { box-shadow:0 4px 0 color-mix(in srgb,currentColor 24%,transparent),0 10px 20px rgba(7,24,34,.14); transform:translateY(0); }
.obs-back-button:active,.comfort-privacy-cta .button:active { box-shadow:0 1px 0 color-mix(in srgb,currentColor 24%,transparent); transform:translateY(3px); }
.comfort-privacy-cta { grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:18px; margin-top:16px; padding:22px 24px; text-align:center; border:1px solid color-mix(in srgb,currentColor 18%,transparent); border-radius:18px; background:color-mix(in srgb,var(--paper,#fffaf1) 72%,transparent); }
.comfort-privacy-cta p { margin:0; max-width:760px; font-weight:650; line-height:1.5; }
.comfort-privacy-cta .button { flex:0 0 auto; }
@media (max-width:720px) { .obs-main{width:min(100% - 18px,1240px);min-height:100svh;padding-top:86px;padding-bottom:18px;place-items:start center}.obs-gallery{border-radius:22px;padding:18px 12px 24px}.obs-feature-frame{width:100%;max-height:38svh;border-radius:17px}.obs-thumbnails{grid-template-columns:repeat(8,104px);overflow-x:auto;padding-inline:4px}.comfort-privacy-cta{align-items:stretch}.comfort-privacy-cta .button{width:100%;justify-content:center} }
@media (prefers-reduced-motion:reduce) { .obs-feature-frame img,.obs-thumbnails button{transition:none} }