@charset "UTF-8";

:root {
  --bg: #f6fbfd;
  --surface: rgba(255,255,255,.76);
  --surface-solid: #ffffff;
  --surface-soft: #eaf7fb;
  --text: #17313b;
  --muted: #607986;
  --line: rgba(25,86,108,.14);
  --sea: #139b9a;
  --sea-deep: #0d7574;
  --sky: #7fd9c9;
  --aqua: #79d9d4;
  --sand: #f6d7a8;
  --sun: #e79148;
  --sun-deep: #c96f2e;
  --coral: #f19c88;
  --lavender: #b7aee8;
  --shadow: 0 28px 90px rgba(23,83,103,.16);
  --header-h: 82px;
  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-accent: "Manrope", Inter, ui-sans-serif, sans-serif;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #071a26;
  --surface: rgba(10,32,45,.78);
  --surface-solid: #0c2534;
  --surface-soft: #102f3e;
  --text: #f2fbff;
  --muted: #a1bbc6;
  --line: rgba(183,225,239,.17);
  --sea: #52d0c6;
  --sea-deep: #9aeee2;
  --sky: #2f8f86;
  --aqua: #4eaeb1;
  --sand: #d8b77e;
  --sun: #f0a860;
  --sun-deep: #f6c98c;
  --coral: #e58e7b;
  --lavender: #9b8ed8;
  --shadow: 0 34px 100px rgba(0,0,0,.38);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; font-size: 16px; line-height: 1.55; transition: background .45s ease, color .45s ease; }
body.is-locked { overflow: hidden; }
body, img { -webkit-user-drag: none; }
body:not(.allow-select) { user-select: none; -webkit-user-select: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
button, a { outline: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(62,181,225,.62); outline-offset: 4px; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

#app { transition: filter .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); transform-origin: center top; }
body.is-modal-open #app,body.is-modal-open .site-header { filter: blur(16px) saturate(.85); transform: scale(.94); }
.site-header { transition: background .35s ease, border-color .35s ease, height .35s ease, filter .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }

::view-transition-old(root),::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

.ambient { position: fixed; inset: 0; overflow: hidden; z-index: -2; pointer-events: none; }
.ambient-orb { position: absolute; width: 38vw; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: .2; }
.orb-one { background: var(--sky); top: -16vw; right: -10vw; animation: drift 16s ease-in-out infinite alternate; }
.orb-two { background: var(--coral); left: -18vw; top: 42vh; animation: drift 21s ease-in-out infinite alternate-reverse; }
.ambient-ripples { position: absolute; width: 420px; height: 420px; right: -160px; bottom: 4vh; border: 1px solid var(--line); border-radius: 50%; opacity: .45; }
.ambient-ripples::before,.ambient-ripples::after { content:""; position:absolute; inset:40px; border:1px solid var(--line); border-radius:50%; }
.ambient-ripples::after { inset:100px; }
@keyframes drift { to { transform: translate3d(6vw,6vh,0) scale(1.14); } }

.boot-screen { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; background: #eaf8ff; overflow: hidden; opacity: 1; transition: opacity .6s ease, visibility 0s linear .6s; }
html[data-theme="dark"] .boot-screen { background: #071a26; }
.boot-screen.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.boot-mark { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; animation: bootMark 1.05s cubic-bezier(.16,1,.3,1) forwards; }
.boot-mark img { width: clamp(160px,26vw,320px); height: auto; object-fit: contain; filter: drop-shadow(0 18px 40px rgba(15,90,120,.28)); }
html[data-theme="dark"] .boot-mark img { filter: brightness(0) invert(1) drop-shadow(0 18px 40px rgba(0,0,0,.4)); }
.boot-wave { position:absolute; left:-10%; right:-10%; bottom:-50%; height:65%; background:linear-gradient(180deg,#77d9ef,#248dbb); border-radius:50% 50% 0 0 / 22% 22% 0 0; animation:bootWave 1.3s cubic-bezier(.65,0,.2,1) forwards; }
.boot-wave::before { content:""; position:absolute; left:-4%; top:-34px; width:108%; height:72px; background:rgba(255,255,255,.44); filter:blur(11px); border-radius:50%; }
@keyframes bootMark { 0%{opacity:0;transform:translateY(24px) scale(.92)} 45%{opacity:1;transform:none} 78%{opacity:1} 100%{opacity:0;transform:translateY(-26px) scale(1.05)} }
@keyframes bootWave { 0%{transform:translateY(120%) scaleX(.7)} 52%{transform:translateY(-75%) scaleX(1.12)} 100%{transform:translateY(-220%) scaleX(1.35)} }

.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); padding: 0 clamp(20px,4vw,68px); display:flex; align-items:center; justify-content:space-between; gap:30px; border-bottom:1px solid transparent; transition:background .35s ease, border-color .35s ease, height .35s ease, transform .35s ease; }
.site-header.is-scrolled { height:68px; background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%); border-color:var(--line); }
.brand { display:flex; align-items:center; gap:13px; min-width:max-content; }
.brand-mark { width:48px; height:48px; display:flex; align-items:center; justify-content:center; border-radius:16px; overflow:hidden; box-shadow:0 9px 30px rgba(24,127,160,.16); transition:transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.brand-copy strong { font-family: var(--font-display); font-weight:600; }
.brand-mark img { width:100%; height:100%; object-fit:cover; }
.brand:hover .brand-mark { transform:rotate(-6deg) scale(1.06); box-shadow:0 14px 34px rgba(24,127,160,.26); }
.brand-copy { display:grid; line-height:1.05; }
.brand-copy strong { font-size:15px; letter-spacing:.03em; }
.brand-copy small { color:var(--muted); font-size:10px; margin-top:5px; letter-spacing:.08em; text-transform:uppercase; }
.main-nav { display:flex; align-items:center; gap:clamp(16px,2.2vw,34px); }
.nav-link { border:0; background:none; padding:10px 0; cursor:pointer; font-size:13px; font-family:var(--font-accent); font-weight:700; letter-spacing:.01em; color:color-mix(in srgb,var(--text) 68%,transparent); position:relative; transition:color .3s ease, transform .25s ease; }
.nav-link::after { content:""; position:absolute; left:50%; bottom:2px; width:0; height:3px; border-radius:999px; background:linear-gradient(90deg,var(--sun),var(--sea)); transform:translateX(-50%); opacity:0; transition:width .4s cubic-bezier(.16,1,.3,1), opacity .3s ease; }
.nav-link:hover,.nav-link.is-active { color:var(--text); }
.nav-link:hover { transform:translateY(-1px); }
.nav-link:active { transform:scale(.94); }
.nav-link:hover::after { width:100%; opacity:.55; }
.nav-link.is-active::after { width:64%; opacity:1; }
.header-actions { display:flex; gap:8px; }
.icon-button { width:44px; height:44px; border:1px solid var(--line); border-radius:15px; display:grid; place-items:center; background:var(--surface); backdrop-filter:blur(14px); cursor:pointer; transition:transform .25s ease, background .25s ease; }
.icon-button:hover { transform:translateY(-2px); background:var(--surface-solid); }
.icon-button:active { transform:scale(.93); }
.icon-button svg { width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
html[data-theme="dark"] .sun-icon, html:not([data-theme="dark"]) .moon-icon { display:none; }
.menu-toggle { display:none; position:relative; }
.menu-toggle span { position:absolute; width:18px; height:1.5px; background:currentColor; transition:.3s ease; }
.menu-toggle span:first-child { transform:translateY(-4px); }
.menu-toggle span:last-child { transform:translateY(4px); }
.menu-toggle.is-open span:first-child { transform:rotate(45deg); }
.menu-toggle.is-open span:last-child { transform:rotate(-45deg); }
.mobile-menu { display:none; }

.page-view { display:none; min-height:100vh; opacity:0; transform:translateY(22px) scale(.985); filter:blur(10px); transform-origin:center top; will-change:transform,opacity,filter; }
.page-view.is-active { display:block; opacity:1; transform:none; filter:none; }
.page-view.is-entering { animation:pageIn .78s cubic-bezier(.16,1,.3,1) forwards; }
.page-view.is-leaving { display:block; position:relative; z-index:1; pointer-events:none; animation:pageOut .34s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pageIn { 0% { opacity:0; transform:translateY(28px) scale(.985); filter:blur(12px); } 100% { opacity:1; transform:none; filter:none; } }
@keyframes pageOut { 0% { opacity:1; transform:none; filter:none; } 100% { opacity:0; transform:translateY(-10px) scale(.992); filter:blur(8px); } }
.section { width:min(1200px,calc(100% - 64px)); margin-inline:auto; padding-block:clamp(76px,9vw,138px); position:relative; }
.eyebrow { margin:0 0 20px; color:inherit; font-size:11px; line-height:1; letter-spacing:.2em; text-transform:uppercase; font-weight:800; }
.eyebrow.sea { color:var(--sea); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { line-height:1.06; letter-spacing:-.03em; font-family: var(--font-display); font-weight:600; }
h1 { font-size:clamp(48px,7vw,104px); }
h2 { font-size:clamp(36px,5vw,72px); }
h3 { font-size:clamp(22px,2.5vw,32px); }
p { color:var(--muted); }

.hero { position:relative; min-height:100svh; color:white; overflow:hidden; background:#0b3444; }
.hero-media,.hero-slide { position:absolute; inset:0; }
.hero-slide { opacity:0; transform:scale(1.03); filter:blur(14px) saturate(.88) brightness(.92); transition:opacity 1.65s cubic-bezier(.22,1,.36,1), transform 1.9s cubic-bezier(.22,1,.36,1), filter 1.55s ease; }
.hero-slide::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 72% 28%, rgba(255,231,185,.24), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%); mix-blend-mode:screen; opacity:.55; }
.hero-slide.is-active { opacity:1; transform:scale(1); filter:none; }
.hero-slide.is-prev { opacity:0; transform:scale(1.08); filter:blur(8px) saturate(.95) brightness(.95); }
.hero-slide img { width:100%; height:100%; object-fit:cover; object-position:center 43%; transform:scale(1.04); transition:transform 10s linear; }
.hero-slide.is-active img { transform:scale(1.115); }
.hero-shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,30,41,.75) 0%,rgba(6,34,45,.42) 46%,rgba(4,26,37,.12) 75%),linear-gradient(180deg,rgba(0,0,0,.22),transparent 36%,rgba(5,25,34,.45)); }
.hero-water { position:absolute; left:-5%; right:-5%; bottom:-3px; height:26%; overflow:hidden; opacity:.74; filter:blur(.2px); }
.hero-water i { position:absolute; left:-8%; bottom:-45%; width:116%; height:100%; border-radius:48% 52% 0 0 / 27% 28% 0 0; background:rgba(208,247,255,.18); border-top:1px solid rgba(255,255,255,.48); animation:heroWave 7s ease-in-out infinite alternate; }
.hero-water i:nth-child(2){bottom:-56%;opacity:.6;animation-duration:9s;animation-direction:alternate-reverse}
.hero-water i:nth-child(3){bottom:-68%;opacity:.45;animation-duration:12s}
@keyframes heroWave { to{transform:translate3d(4%, -9%,0) scaleX(1.06)} }
.hero-content { position:relative; z-index:3; width:min(1200px,calc(100% - 64px)); min-height:100svh; margin:auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding-top:var(--header-h); }
.hero-content h1 { max-width:940px; margin-bottom:24px; text-wrap:balance; }
.hero-lead { color:rgba(255,255,255,.82); max-width:610px; font-size:clamp(17px,1.5vw,21px); }
.hero-actions { display:flex; gap:12px; margin-top:24px; }
.primary-button,.glass-button { min-height:54px; border-radius:18px; padding:0 22px; border:1px solid rgba(255,255,255,.28); cursor:pointer; transition:.3s cubic-bezier(.2,.8,.2,1); position:relative; overflow:hidden; }
.primary-button::before,.glass-button::before { content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.5) 48%,transparent 76%); transform:translateX(-120%); transition:transform .7s cubic-bezier(.16,1,.3,1); pointer-events:none; }
.primary-button:hover::before,.glass-button:hover::before { transform:translateX(120%); }
.primary-button { background:white; color:#163746; display:flex; align-items:center; gap:22px; font-weight:750; }
.primary-button b { font-size:20px; transition:transform .25s ease; }
.primary-button:hover { transform:translateY(-4px); box-shadow:0 16px 38px rgba(0,0,0,.2); }
.primary-button:hover b { transform:translateX(4px); }
.primary-button:active,.glass-button:active { transform:scale(.96); }
.glass-button { color:white; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); }
.glass-button:hover { background:rgba(255,255,255,.17); transform:translateY(-3px); }
.reveal { opacity:0; animation:revealUp .9s cubic-bezier(.16,1,.3,1) forwards; }
.hero-content .reveal:nth-child(1){animation-delay:.55s}.hero-content .reveal:nth-child(2){animation-delay:.66s}.hero-content .reveal:nth-child(3){animation-delay:.78s}.hero-content .reveal:nth-child(4){animation-delay:.9s}
@keyframes revealUp { to{opacity:1;transform:none} from{opacity:0;transform:translateY(26px)} }
.hero-progress { position:absolute; right:clamp(20px,4vw,68px); bottom:34px; z-index:4; display:flex; gap:7px; }
.hero-progress button { width:36px; height:4px; border:0; padding:0; border-radius:999px; background:rgba(255,255,255,.22); overflow:hidden; cursor:pointer; backdrop-filter:blur(12px); transition:transform .25s ease, background .25s ease; }
.hero-progress button:hover { transform:scaleY(1.4); background:rgba(255,255,255,.38); }
.hero-progress button::after { content:""; display:block; width:0; height:100%; background:linear-gradient(90deg,#ffffff,#9de8ff); box-shadow:0 0 18px rgba(255,255,255,.55); }
.hero-progress button.is-active::after { animation:heroTimer var(--slide-duration,5500ms) linear forwards; }
@keyframes heroTimer { to{width:100%} }
.scroll-cue { position:absolute; z-index:4; left:50%; bottom:26px; transform:translateX(-50%); display:grid; justify-items:center; gap:8px; color:white; border:0; background:none; cursor:pointer; opacity:.78; }
.scroll-cue span { width:1px; height:32px; background:linear-gradient(white,transparent); animation:scrollCue 1.7s ease-in-out infinite; }
.scroll-cue small { font-size:9px; letter-spacing:.14em; text-transform:uppercase; }
@keyframes scrollCue { 50%{transform:scaleY(.55);transform-origin:bottom} }

.section-number { position:absolute; top:100px; left:-30px; color:var(--line); font-size:90px; font-weight:800; line-height:1; }
.intro-section { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(48px,8vw,120px); align-items:center; }
.intro-copy h2 { margin-bottom:30px; }
.intro-copy>p:not(.eyebrow) { max-width:560px; font-size:18px; line-height:1.75; }
.text-link { margin-top:20px; border:0; background:none; color:var(--text); padding:9px 0; border-bottom:1px solid var(--line); cursor:pointer; font-weight:700; transition:border-color .3s ease, transform .25s ease, opacity .3s ease; }
.text-link span { margin-left:14px; color:var(--sea); display:inline-block; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.text-link:hover { border-color:var(--sea); opacity:.82; }
.text-link:hover span { transform:translateX(5px); }
.text-link:active { transform:scale(.97); }
.intro-visual { position:relative; min-height:560px; }
.image-frame { position:absolute; inset:0; border-radius:34px; overflow:hidden; box-shadow:var(--shadow); background-size:cover; background-position:center; }
.image-frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(3,33,44,.16); }
.floating-note { position:absolute; right:-32px; bottom:48px; width:210px; padding:20px; display:grid; gap:5px; background:var(--surface); border:1px solid rgba(255,255,255,.44); backdrop-filter:blur(24px); border-radius:20px; box-shadow:var(--shadow); }
.floating-note strong { color:var(--sun); font-size:22px; }
.floating-note span { color:var(--muted); font-size:12px; }
.wave-divider { height:130px; margin-top:-60px; overflow:hidden; color:var(--surface-soft); }
.wave-divider svg { width:100%; height:100%; }
.wave-divider path { fill:currentColor; animation:waveDrift 11s ease-in-out infinite; transform-origin:center; }
@keyframes waveDrift { 0%,100%{transform:translateX(0) scaleY(1)} 50%{transform:translateX(-2.5%) scaleY(1.04)} }
.values-section { width:100%; background:var(--surface-soft); padding-inline:max(32px,calc((100vw - 1200px)/2)); }
.section-heading { max-width:760px; }
.section-heading>p:not(.eyebrow) { font-size:18px; max-width:660px; }
.value-grid { margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.value-grid .value-card:nth-child(2){transition-delay:.08s}.value-grid .value-card:nth-child(3){transition-delay:.16s}
.value-card { position:relative; min-height:360px; border-radius:30px; overflow:hidden; contain:paint; padding:34px; border:1px solid var(--line); background:var(--surface); backdrop-filter:blur(18px); box-shadow:0 14px 34px rgba(23,83,103,.07); transition:transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s cubic-bezier(.16,1,.3,1); }
.value-card:hover { transform:translateY(-10px) scale(1.02); box-shadow:0 42px 100px rgba(23,83,103,.22); }
.value-card h3 { margin-top:50px; margin-bottom:14px; }
.value-card p { font-size:15px; }
.value-icon { width:70px; height:70px; border-radius:24px; display:flex; align-items:center; justify-content:center; background:linear-gradient(145deg,rgba(113,211,235,.28),rgba(255,255,255,.36)); color:var(--sea-deep); }
.value-icon span { font-size:26px; font-weight:800; }.value-icon small{font-weight:800}.health-mark{font-size:36px}.chat-bubbles{gap:4px}.chat-bubbles i{width:9px;height:9px;border-radius:50%;background:currentColor}.chat-bubbles i:nth-child(2){transform:translateY(-6px)}
.support-card .value-icon{background:linear-gradient(145deg,rgba(231,145,72,.3),rgba(255,255,255,.4));color:var(--sun-deep)}
.health-card .value-icon{background:linear-gradient(145deg,rgba(241,156,136,.34),rgba(255,255,255,.4));color:#c65a3f}
.brand-badges { display:flex; gap:10px; margin-top:18px; position:relative; z-index:2; }
.brand-badges img { width:34px; height:34px; object-fit:contain; border-radius:11px; background:rgba(255,255,255,.6); padding:6px; box-shadow:0 8px 18px rgba(20,90,120,.12); transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.brand-badges img:hover { transform:translateY(-4px) scale(1.08); box-shadow:0 14px 26px rgba(20,90,120,.2); }
html[data-theme="dark"] .brand-badges img { background:rgba(255,255,255,.12); }
.card-ripple { position:absolute; width:230px; height:230px; border:1px solid var(--line); border-radius:50%; right:-100px; bottom:-100px; transition:transform .8s ease; }
.card-ripple::before,.card-ripple::after { content:""; position:absolute; inset:26px; border:1px solid var(--line); border-radius:50%; }.card-ripple::after{inset:60px}.value-card:hover .card-ripple{transform:scale(1.2)}
.inline-heading { display:flex; align-items:end; justify-content:space-between; max-width:none; }
.stream-controls { display:flex; gap:8px; }
.stream-controls button { width:48px; height:48px; border-radius:16px; border:1px solid var(--line); background:var(--surface); cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .25s ease; }
.stream-controls button:hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(20,90,120,.16); }
.stream-controls button:active { transform:scale(.92); }
.photo-stream { display:flex; gap:18px; overflow-x:auto; scrollbar-width:none; scroll-snap-type:x mandatory; padding:18px max(32px,calc((100vw - 1200px)/2)) 44px; margin-inline:calc(50% - 50vw); }
.photo-stream::-webkit-scrollbar { display:none; }
.stream-card { flex:0 0 clamp(260px,30vw,420px); height:430px; border-radius:28px; overflow:hidden; scroll-snap-align:center; position:relative; background:var(--surface-soft); cursor:zoom-in; }
.stream-card.portrait { flex-basis:300px; }
.stream-card img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.16,1,.3,1); }
.stream-card:hover img { transform:scale(1.055); }
.stream-card::after { content:"Открыть"; position:absolute; right:16px; bottom:16px; padding:8px 12px; border-radius:12px; background:rgba(6,35,47,.48); color:white; backdrop-filter:blur(12px); font-size:11px; opacity:0; transform:translateY(8px); transition:.3s ease; }
.stream-card:hover::after { opacity:1; transform:none; }
.reveal-on-scroll { opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-on-scroll.is-visible { opacity:1; transform:none; }

.page-hero { position:relative; min-height:80svh; overflow:hidden; display:flex; align-items:end; color:white; }
.page-hero-image { position:absolute; inset:0; background-size:cover; background-position:center; }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,32,42,.72),rgba(5,32,42,.14)),linear-gradient(0deg,rgba(5,25,34,.55),transparent); }
.page-hero-content { position:relative; z-index:2; width:min(1200px,calc(100% - 64px)); margin:auto; padding:calc(var(--header-h) + 90px) 0 100px; }
.page-hero-content h1 { margin-bottom:22px; }
.page-hero-content p:not(.eyebrow) { color:rgba(255,255,255,.78); max-width:600px; font-size:20px; }
.foam-line { position:absolute; left:-6%; right:-6%; bottom:-46px; height:100px; background:var(--bg); border-radius:50% 50% 0 0 / 44% 44% 0 0; filter:drop-shadow(0 -10px 20px rgba(220,249,255,.3)); animation:foamBob 6s ease-in-out infinite; }
@keyframes foamBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }
.story-section { display:grid; grid-template-columns:280px 1fr; gap:clamp(50px,8vw,130px); }
.story-aside { position:sticky; top:120px; height:max-content; }
.story-aside span { font-size:70px; font-weight:850; letter-spacing:-.08em; color:var(--sun); }
.story-aside p { max-width:210px; }
.large-copy { font-size:clamp(21px,2.3vw,31px); line-height:1.55; max-width:870px; color:var(--text); }
.mission-list { display:grid; grid-template-columns:1fr 1fr; gap:40px 60px; margin-top:70px; }
.mission-list article:nth-child(2){transition-delay:.06s}.mission-list article:nth-child(3){transition-delay:.12s}.mission-list article:nth-child(4){transition-delay:.18s}
.mission-list article { border-top:1px solid var(--line); padding-top:24px; }
.mission-list span { color:var(--sea); font-size:12px; font-weight:800; }
.mission-list h3 { margin:18px 0 10px; font-size:25px; }
.mission-list p { font-size:14px; }
.breed-band { min-height:700px; display:grid; grid-template-columns:1fr 1fr; background:#0c3b50; color:white; }
.breed-band-photo { background-size:cover; background-position:center; min-height:520px; }
.breed-band-copy { padding:clamp(60px,8vw,130px); align-self:center; }
.breed-band-copy p { color:rgba(255,255,255,.7); max-width:560px; }

.dogs-header { padding-top:calc(var(--header-h) + 100px); padding-bottom:68px; display:flex; justify-content:space-between; align-items:end; }
.dogs-header h1,.litters-hero h1,.contact-copy h1 { margin-bottom:20px; }
.water-signature { width:240px; height:100px; position:relative; }
.water-signature i { position:absolute; border:1px solid var(--line); border-radius:50%; width:180px; height:40px; right:0; top:30px; animation:ripple 3s ease-in-out infinite; }
.water-signature i:nth-child(2){animation-delay:1s;transform:scale(.65)}.water-signature i:nth-child(3){animation-delay:2s;transform:scale(.35)}
@keyframes ripple { 0%,100%{opacity:.25;transform:scale(.5)}50%{opacity:.8;transform:scale(1)} }
.dog-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; padding-top:0; }
.dog-card { height:min(70vw,720px); min-height:580px; position:relative; overflow:hidden; cursor:pointer; color:white; clip-path:inset(0 round 34px); border-radius:34px; transition:clip-path .5s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.3,0,.2,1), box-shadow .28s ease, filter .28s ease; box-shadow:var(--shadow); isolation:isolate; background:#173441; }
.dog-card::before { content:""; position:absolute; inset:0; border-radius:inherit; border:1px solid rgba(255,255,255,.16); z-index:3; pointer-events:none; }
.dog-card:hover { transform:translateY(-10px) scale(1.01); box-shadow:0 36px 90px rgba(16,61,78,.24); }
.dog-card:active { transform:scale(.988); }
.dog-card.is-opening { transform:translateY(-16px) scale(.92); filter:saturate(.85) brightness(.95); box-shadow:0 20px 60px rgba(8,32,44,.4); }
.dog-card-bg { position:absolute; inset:0; overflow:hidden; }
.dog-card-bg-layer { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.05); filter:blur(12px) saturate(.84); transition:opacity 1.45s cubic-bezier(.22,1,.36,1), transform 8s linear, filter 1.2s ease; }
.dog-card-bg-layer.is-active { opacity:1; transform:scale(1.14); filter:none; }
.dog-card-bg-layer.is-prev { opacity:0; transform:scale(1.02); filter:blur(7px) saturate(.95); }
.dog-card:hover .dog-card-bg-layer.is-active { transform:scale(1.17); }
.dog-card-vignette { position:absolute; inset:0; background:linear-gradient(180deg,rgba(7,27,36,.06) 18%,rgba(6,30,40,.42) 56%,rgba(3,17,23,.84) 100%); z-index:1; transition:opacity .45s ease; }
.dog-card-index { position:absolute; top:24px; right:26px; width:48px; height:48px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:16px; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); font-size:12px; z-index:2; transition:opacity .34s ease, transform .45s cubic-bezier(.16,1,.3,1), filter .34s ease; }
.dog-card-copy { position:absolute; left:clamp(24px,4vw,50px); right:clamp(24px,4vw,50px); bottom:clamp(34px,5vw,65px); z-index:2; transition:opacity .4s ease, transform .55s cubic-bezier(.16,1,.3,1), filter .4s ease; }
.dog-card-copy p { color:rgba(255,255,255,.72); font-size:11px; letter-spacing:.13em; text-transform:uppercase; }
.dog-card-copy h2 { font-size:clamp(38px,4.2vw,64px); margin-bottom:26px; }
.dog-card-copy span { display:inline-flex; align-items:center; gap:14px; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:8px; font-size:13px; }
.dog-card-copy b { transition:transform .3s ease; }
.dog-card:hover .dog-card-copy b { transform:translate(4px,-4px); }
.dog-card.is-opening .dog-card-copy,.dog-card.is-opening .dog-card-index { opacity:0; transform:translateY(20px); filter:blur(8px); transition:opacity .68s cubic-bezier(.4,0,.2,1), transform .68s cubic-bezier(.4,0,.2,1), filter .5s ease; }
.dog-card-shape { position:absolute; right:-8%; bottom:-12%; width:58%; aspect-ratio:1; border-radius:38% 62% 49% 51%; background:radial-gradient(circle at 30% 30%, rgba(144,230,255,.26), rgba(73,160,194,.16) 42%, transparent 72%); filter:blur(2px); opacity:.85; z-index:0; transition:transform .8s cubic-bezier(.16,1,.3,1), opacity .45s ease; }
.dog-card:hover .dog-card-shape { transform:scale(1.06) translateY(-8px); }
.dog-card.is-opening .dog-card-shape { transform:scale(.88) translateY(18px); opacity:.32; }
.documents-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding-top:40px; }
.documents-strip>div:nth-child(2){transition-delay:.06s}.documents-strip>div:nth-child(3){transition-delay:.12s}
.documents-strip>div { padding:32px; border:1px solid var(--line); border-radius:22px; display:flex; align-items:center; gap:20px; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.documents-strip>div:hover { transform:translateY(-4px); box-shadow:0 20px 44px rgba(20,90,120,.14); }
.documents-strip span { color:var(--sea); font-weight:850; font-size:25px; }
.documents-strip p { margin:0; font-size:13px; }

.litters-page { background:linear-gradient(180deg,color-mix(in srgb,var(--sand) 12%,var(--bg)),var(--bg) 35%); }
.litters-hero { padding-top:calc(var(--header-h) + 110px); padding-bottom:70px; display:flex; align-items:end; justify-content:space-between; }
.litter-bubbles { width:280px; height:200px; position:relative; }
.litter-bubbles i { position:absolute; border:1px solid var(--line); border-radius:50%; animation:bubbleFloat 5s ease-in-out infinite; }
.litter-bubbles i:nth-child(1){width:80px;height:80px;right:10px;bottom:0}.litter-bubbles i:nth-child(2){width:42px;height:42px;right:110px;bottom:70px;animation-delay:-1s}.litter-bubbles i:nth-child(3){width:24px;height:24px;right:50px;bottom:120px;animation-delay:-2s}.litter-bubbles i:nth-child(4){width:56px;height:56px;right:170px;bottom:10px;animation-delay:-3s}
@keyframes bubbleFloat { 50%{transform:translateY(-20px);opacity:.35} }
.litter-family { padding-top:55px; border-top:1px solid var(--line); }
.family-dog { display:flex; align-items:center; gap:24px; margin-bottom:38px; }
.family-dog.reverse { flex-direction:row-reverse; text-align:right; }
.family-photo { width:96px; height:96px; border-radius:31px; background-size:cover; background-position:center; box-shadow:var(--shadow); }
.family-dog p,.family-dog span { margin:0; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.12em; }
.family-dog h2 { font-size:clamp(30px,4vw,54px); margin:8px 0; }
.litter-demo-card { display:grid; grid-template-columns:1.2fr .8fr; min-height:530px; border-radius:34px; overflow:hidden; background:var(--surface-solid); border:1px solid var(--line); box-shadow:var(--shadow); }
.litter-demo-card.alt { grid-template-columns:.8fr 1.2fr; }
.litter-demo-card.alt .litter-demo-gallery{order:2}.litter-demo-card.alt .litter-demo-copy{order:1}
.litter-demo-gallery { display:grid; grid-template-columns:1fr 1fr; gap:8px; background:transparent; padding:8px; }
.litter-demo-gallery img { width:100%; height:100%; object-fit:cover; min-height:260px; border-radius:18px; }
.litter-demo-copy { padding:clamp(40px,6vw,80px); align-self:center; }
.litter-demo-copy>span { color:var(--sea); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:800; }
.litter-demo-copy h3 { font-size:clamp(30px,3.4vw,48px); margin:18px 0; }
.litter-demo-copy button { margin-top:20px; padding:15px 19px; border-radius:15px; border:1px solid var(--line); background:var(--surface-soft); cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease, box-shadow .25s ease; }
.litter-demo-copy button:hover { transform:translateY(-3px); background:var(--surface-solid); box-shadow:0 12px 26px rgba(20,90,120,.14); }
.litter-demo-copy button:active { transform:scale(.96); }

.contacts-page { min-height:100svh; position:relative; overflow:hidden; background:linear-gradient(145deg,#f7d7b0 0%,#f4b9aa 35%,#88cbe3 100%); color:#183746; }
html[data-theme="dark"] .contacts-page { background:linear-gradient(145deg,#261d35 0%,#633d4d 34%,#154f68 100%); color:white; }
.contact-ocean { position:absolute; inset:0; overflow:hidden; }
.sunset-orb { position:absolute; width:42vw; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,#fff3c7 0%,rgba(255,223,159,.2) 45%,transparent 70%); right:-8vw; top:5vh; filter:blur(2px); }
.contact-wave { position:absolute; left:-10%; width:120%; height:34%; bottom:-12%; border-radius:50% 50% 0 0 / 25% 25% 0 0; background:rgba(238,252,255,.28); border-top:1px solid rgba(255,255,255,.55); animation:contactWave 8s ease-in-out infinite alternate; }
.contact-wave.two { bottom:-20%; opacity:.7; animation-duration:11s; animation-direction:alternate-reverse; }
@keyframes contactWave { to{transform:translateX(4%) translateY(-8%)} }
.contact-layout { min-height:100svh; padding-top:calc(var(--header-h) + 90px); display:grid; grid-template-columns:1fr .9fr; gap:clamp(50px,8vw,120px); align-items:center; }
.contact-copy p:not(.eyebrow) { color:color-mix(in srgb,currentColor 70%,transparent); max-width:560px; font-size:19px; }
.contact-note { margin-top:48px; display:flex; align-items:center; gap:18px; max-width:450px; }
.contact-note b { font-size:44px; letter-spacing:-.07em; }.contact-note span{font-size:13px;max-width:230px}
.contact-panel { position:relative; z-index:2; padding:18px; border-radius:32px; background:rgba(255,255,255,.47); border:1px solid rgba(255,255,255,.58); backdrop-filter:blur(24px) saturate(120%); box-shadow:0 30px 90px rgba(65,56,78,.18); }
html[data-theme="dark"] .contact-panel { background:rgba(6,27,39,.45); border-color:rgba(255,255,255,.2); }
.contact-row { min-height:92px; border-bottom:1px solid rgba(255,255,255,.45); display:grid; grid-template-columns:54px 1fr 30px; align-items:center; gap:14px; padding:12px; border-radius:20px; transition:.3s ease; }
.contact-row:hover { background:rgba(255,255,255,.45); transform:translateX(4px); }
html[data-theme="dark"] .contact-row:hover { background:rgba(255,255,255,.08); }
.contact-row:active { transform:translateX(4px) scale(.984); }
.contact-row:last-of-type { border-bottom:0; }
.contact-icon { width:48px; height:48px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.65); color:#1c607d; font-weight:850; overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1); }
.contact-icon img { width:28px; height:28px; object-fit:contain; }
.contact-row:hover .contact-icon { transform:scale(1.08) rotate(-4deg); }
.contact-row small { display:block; opacity:.65; font-size:11px; }.contact-row strong{font-size:18px}.contact-caption{padding:18px 16px 8px;font-size:11px;opacity:.62}
.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:14px 12px 4px; }
.social-card { display:flex; flex-direction:column; gap:12px; padding:20px 16px; border-radius:22px; background:rgba(255,255,255,.5); border:1px solid rgba(255,255,255,.6); position:relative; transition:transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, box-shadow .35s ease; }
.social-card:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 24px 50px rgba(20,90,120,.2); background:rgba(255,255,255,.78); }
.social-card:active { transform:translateY(-2px) scale(.98); }
html[data-theme="dark"] .social-card { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14); }
html[data-theme="dark"] .social-card:hover { background:rgba(255,255,255,.12); }
.social-icon { width:44px; height:44px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.7); transition:transform .35s cubic-bezier(.16,1,.3,1); }
html[data-theme="dark"] .social-icon { background:rgba(255,255,255,.14); }
.social-card:hover .social-icon { transform:scale(1.08) rotate(-4deg); }
.social-icon img { width:26px; height:26px; object-fit:contain; }
.social-card strong { font-size:15px; }
.social-card small { opacity:.62; font-size:11px; }
.social-card b { position:absolute; top:18px; right:18px; opacity:.45; transition:transform .3s ease, opacity .3s ease; }
.social-card:hover b { opacity:1; transform:translate(3px,-3px); }

.site-footer { min-height:190px; width:min(1200px,calc(100% - 64px)); margin:auto; display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; border-top:1px solid var(--line); padding-block:44px; }
.footer-brand { display:flex; align-items:center; gap:16px; }.footer-brand>div{display:grid;gap:8px}.footer-mark{width:52px;height:52px;border-radius:17px;object-fit:cover;box-shadow:var(--shadow);flex-shrink:0;transition:transform .4s cubic-bezier(.16,1,.3,1)}.footer-brand:hover .footer-mark{transform:rotate(-6deg) scale(1.05)}.footer-lockup{height:24px;width:auto}html[data-theme="dark"] .footer-lockup{filter:brightness(0) invert(1)}.footer-brand span,.footer-meta{color:var(--muted);font-size:12px}.footer-links{display:flex;gap:26px}.footer-links button{border:0;background:none;cursor:pointer;color:var(--muted);transition:color .25s ease,transform .25s ease}.footer-links button:hover{color:var(--text);transform:translateY(-2px)}.footer-links button:active{transform:scale(.94)}.footer-meta{grid-column:1/-1;display:flex;justify-content:space-between}

.detail-overlay { position:fixed; inset:0; z-index:500; visibility:hidden; pointer-events:none; }
.detail-overlay.is-open { visibility:visible; pointer-events:auto; }
.detail-shell { position:absolute; inset:0; overflow-y:auto; background:var(--bg); border-radius:0; clip-path:inset(0px 0px 0px 0px); overscroll-behavior:contain; backface-visibility:hidden; will-change:clip-path,border-radius,transform; isolation:isolate; transform-origin:center; }
.detail-close { position:fixed; z-index:8; top:22px; right:22px; width:54px; height:54px; border-radius:18px; border:1px solid rgba(255,255,255,.32); background:rgba(5,31,42,.24); backdrop-filter:blur(18px); cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease; }
.detail-close:hover { background:rgba(5,31,42,.4); transform:scale(1.07) rotate(90deg); }
.detail-close:active { transform:scale(.92) rotate(90deg); }
.detail-close span { position:absolute; left:16px; right:16px; height:1.5px; background:white; transform:rotate(45deg); }.detail-close span:last-child{transform:rotate(-45deg)}
.detail-hero { height:min(86svh,920px); min-height:600px; position:relative; overflow:hidden; display:flex; align-items:flex-end; justify-content:center; color:white; }
.detail-backdrop { position:absolute; inset:-35px; background-size:cover; background-position:center; filter:blur(35px) saturate(.8); transform:scale(1.1); opacity:.75; }
.detail-hero>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.detail-hero-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(4,26,35,.7),transparent 55%),linear-gradient(90deg,rgba(4,26,35,.22),transparent); }
.detail-title { position:relative; z-index:2; width:min(1200px,calc(100% - 64px)); padding-bottom:70px; }
.detail-title p { color:rgba(255,255,255,.7); text-transform:uppercase; letter-spacing:.14em; font-size:11px; }.detail-title h2{font-size:clamp(52px,8vw,112px);margin:12px 0}.detail-title span{font-size:12px;opacity:.7}
.detail-content { width:min(1200px,calc(100% - 64px)); margin:auto; padding:70px 0 120px; }
.detail-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.detail-facts>div { padding:24px; border:1px solid var(--line); border-radius:20px; }.detail-facts small{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-bottom:8px}
.detail-story { display:grid; grid-template-columns:.75fr 1.25fr; gap:70px; padding:110px 0; }.detail-story h3{font-size:clamp(38px,4vw,64px)}.detail-story>p{font-size:20px;line-height:1.75}
.media-head { display:flex; justify-content:space-between; align-items:end; margin-bottom:34px; }.media-head h3{font-size:clamp(34px,4vw,56px);margin:0}.media-tabs{display:flex;border:1px solid var(--line);border-radius:16px;padding:4px}.media-tabs button{border:0;background:none;padding:10px 16px;border-radius:12px;cursor:pointer;transition:background .3s ease,transform .25s ease,box-shadow .3s ease}.media-tabs button:hover{transform:translateY(-1px)}.media-tabs button:active{transform:scale(.95)}.media-tabs button.is-active{background:var(--surface-solid);box-shadow:0 5px 16px rgba(30,80,100,.1)}
.detail-gallery { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:190px; gap:14px; }
.detail-gallery button { grid-column:span 4; grid-row:span 2; border:0; padding:0; border-radius:24px; overflow:hidden; cursor:zoom-in; background:var(--surface-soft); }
.detail-gallery button:nth-child(3n+1) { grid-column:span 8; }.detail-gallery button:nth-child(4n){grid-row:span 3}.detail-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }.detail-gallery button:hover img{transform:scale(1.045)}
.video-placeholder { display:none; min-height:480px; border:1px solid var(--line); border-radius:28px; background:linear-gradient(145deg,var(--surface-soft),var(--surface)); place-items:center; text-align:center; padding:40px; gap:18px; }.video-placeholder.is-active{display:grid}
.detail-video { width:min(360px,80%); aspect-ratio:9/16; border-radius:26px; background:#0c2733; box-shadow:0 30px 70px rgba(16,61,78,.28); object-fit:cover; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.detail-video:hover { transform:translateY(-4px); }
.video-caption { color:var(--muted); font-size:13px; margin:0; }
.detail-contact { margin-top:110px; border-radius:34px; padding:clamp(42px,7vw,90px); background:linear-gradient(135deg,#dff5fb,#f8e4c8); color:#17313b; position:relative; overflow:hidden; }.detail-contact::after{content:"";position:absolute;width:350px;height:350px;border-radius:50%;border:1px solid rgba(20,120,155,.2);right:-130px;bottom:-180px;box-shadow:0 0 0 40px rgba(20,120,155,.04),0 0 0 90px rgba(20,120,155,.03)}.detail-contact h3{font-size:clamp(34px,4vw,56px);margin-bottom:12px}.detail-contact p{color:#55717b;max-width:580px}.detail-contact a{display:inline-flex;gap:16px;margin-top:20px;padding:15px 18px;border-radius:15px;background:#153949;color:white;position:relative;z-index:2}.detail-contact a span{opacity:.7}

.lightbox { position:fixed; inset:0; z-index:800; background:rgba(2,14,20,.94); color:white; display:grid; grid-template-columns:80px 1fr 80px; align-items:center; opacity:0; visibility:hidden; transition:.35s ease; }
.lightbox.is-open { opacity:1; visibility:visible; }
.lightbox-stage { position:relative; height:100%; display:grid; place-items:center; overflow:hidden; padding:40px; }
.lightbox-blur { position:fixed; inset:0; background-size:cover; background-position:center; filter:blur(80px) saturate(1.15); opacity:.4; transform:scale(1.15); transition:opacity .3s ease; }
.lightbox-stage img { position:relative; z-index:2; max-height:calc(100vh - 100px); max-width:100%; object-fit:contain; border-radius:14px; box-shadow:0 30px 100px rgba(0,0,0,.5); }
.lightbox-close,.lightbox-arrow { border:1px solid rgba(255,255,255,.2); color:white; background:rgba(255,255,255,.08); backdrop-filter:blur(12px); cursor:pointer; transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s ease; }
.lightbox-close:hover,.lightbox-arrow:hover { background:rgba(255,255,255,.18); transform:scale(1.06); }
.lightbox-close:active,.lightbox-arrow:active { transform:scale(.9); }
.lightbox-close { position:absolute; z-index:4; top:20px; right:20px; width:50px; height:50px; border-radius:16px; font-size:28px; }
.lightbox-arrow { width:52px; height:64px; border-radius:18px; justify-self:center; z-index:3; }
.lightbox-count { position:absolute; z-index:3; bottom:18px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.35); padding:7px 12px; border-radius:12px; font-size:11px; }
.toast { position:fixed; z-index:1000; left:50%; bottom:25px; transform:translate(-50%,30px); padding:12px 18px; border-radius:14px; background:#123747;color:white;box-shadow:var(--shadow);opacity:0;pointer-events:none;transition:.35s ease;font-size:13px}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.page-transition { position:fixed; inset:0; z-index:450; pointer-events:none; visibility:hidden; overflow:hidden; opacity:0; backdrop-filter:blur(0px); transition:opacity .5s ease, backdrop-filter .5s ease; }
.page-transition.is-active{visibility:visible;opacity:1;backdrop-filter:blur(6px) saturate(1.15)}
.page-transition i{position:absolute;left:-10%;width:120%;height:78%;bottom:-78%;border-radius:50% 50% 0 0 / 25% 25% 0 0;background:linear-gradient(180deg,#67d2f0,#158cba);animation:transitionWave .92s cubic-bezier(.6,0,.2,1)}
.page-transition i+ i{background:linear-gradient(180deg,#d7f5ff,#84dff6);animation-delay:.08s;opacity:.62}
@keyframes transitionWave{40%{transform:translateY(-104%)}100%{transform:translateY(-255%)}}

@media (max-width: 1040px) {
  .main-nav { display:none; }
  .menu-toggle { display:grid; }
  .mobile-menu { position:fixed; inset:0; z-index:90; background:var(--bg); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; opacity:0; visibility:hidden; transform:translateY(-12px); transition:.35s ease; overflow:hidden; }
  .mobile-menu.is-open { opacity:1; visibility:visible; transform:none; }
  .mobile-menu button { position:relative; z-index:2; border:0; background:none; font-size:clamp(28px,5vw,50px); font-weight:750; letter-spacing:-.04em; cursor:pointer; padding:5px 20px; transition:color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
  .mobile-menu button:hover { color:var(--sea); transform:translateX(6px); }
  .mobile-menu button:active { transform:scale(.95); }
  .mobile-menu-wave { position:absolute; width:120%; height:40%; bottom:-20%; border-radius:50% 50% 0 0/20% 20% 0 0; background:linear-gradient(180deg,rgba(83,199,227,.3),rgba(27,129,166,.4)); animation:heroWave 7s ease-in-out infinite alternate; }
  .intro-section { grid-template-columns:1fr; }.intro-visual{min-height:620px}.floating-note{right:25px}
  .value-grid{grid-template-columns:1fr 1fr}.value-card:last-child{grid-column:1/-1}
  .contact-layout{grid-template-columns:1fr;gap:20px}.contact-panel{max-width:720px}.contact-copy{padding-top:45px}
  .litter-demo-card,.litter-demo-card.alt{grid-template-columns:1fr}.litter-demo-card.alt .litter-demo-gallery{order:1}.litter-demo-card.alt .litter-demo-copy{order:2}
}

@media (max-width: 760px) {
  :root{--header-h:72px}.site-header{padding:0 18px}.brand-copy small{display:none}.brand-mark{width:42px;height:42px;border-radius:14px}.theme-toggle{display:none}
  .section,.hero-content,.page-hero-content,.detail-content,.detail-title,.site-footer{width:calc(100% - 36px)}
  .hero-content{justify-content:flex-end;padding-bottom:126px}.hero-content h1{font-size:clamp(46px,13vw,72px)}.hero-lead{font-size:16px}.hero-actions{width:100%;flex-direction:column}.primary-button,.glass-button{justify-content:space-between;width:100%}.scroll-cue{display:none}.hero-progress{left:18px;right:auto;bottom:30px}
  .section{padding-block:76px}.section-number{display:none}.intro-copy h2{font-size:42px}.intro-visual{min-height:460px}.image-frame{border-radius:26px}.floating-note{left:18px;right:18px;bottom:18px;width:auto}
  .wave-divider{height:95px}.values-section{padding-inline:18px}.value-grid{grid-template-columns:1fr}.value-card:last-child{grid-column:auto}.value-card{min-height:330px}
  .inline-heading{align-items:start}.stream-controls{display:none}.photo-stream{padding-inline:18px}.stream-card{height:390px;flex-basis:82vw}
  .page-hero{min-height:78svh}.page-hero-content{padding-bottom:75px}.page-hero-content h1{font-size:58px}.page-hero-content p:not(.eyebrow){font-size:16px}.foam-line{height:75px}
  .story-section{grid-template-columns:1fr;gap:32px}.story-aside{position:relative;top:auto}.story-aside span{font-size:58px}.story-aside p{max-width:320px}.mission-list{grid-template-columns:1fr;margin-top:45px;gap:28px}.breed-band{grid-template-columns:1fr}.breed-band-copy{padding:64px 22px}.breed-band-photo{min-height:480px}
  .dogs-header,.litters-hero{padding-top:calc(var(--header-h) + 65px);display:block}.water-signature,.litter-bubbles{display:none}.dog-grid{grid-template-columns:1fr;gap:18px}.dog-card{height:78svh;min-height:540px;border-radius:28px}.dog-card-copy h2{font-size:46px}.documents-strip{grid-template-columns:1fr}.documents-strip>div{padding:24px}
  .family-dog,.family-dog.reverse{align-items:flex-start;flex-direction:column;text-align:left}.family-photo{width:110px;height:110px}.litter-demo-gallery{min-height:410px}.litter-demo-gallery img{min-height:204px}.litter-demo-copy{padding:36px 24px}
  .contact-layout{padding-top:calc(var(--header-h) + 55px);padding-bottom:80px}.contact-copy h1{font-size:58px}.contact-note{margin-top:30px}.contact-panel{padding:10px}.contact-row{min-height:82px;grid-template-columns:48px 1fr 20px}.contact-icon{width:44px;height:44px}.contact-row strong{font-size:16px}.social-grid{grid-template-columns:1fr;margin:12px 4px 0}
  .site-footer{grid-template-columns:1fr;gap:24px}.footer-links{flex-wrap:wrap}.footer-meta{grid-column:auto;display:grid;gap:6px}
  .detail-hero{min-height:620px;height:90svh}.detail-title{padding-bottom:46px}.detail-title h2{font-size:55px}.detail-close{top:14px;right:14px;width:48px;height:48px}.detail-facts{grid-template-columns:1fr;gap:10px}.detail-story{grid-template-columns:1fr;gap:24px;padding:74px 0}.detail-story>p{font-size:17px}.media-head{align-items:start;gap:20px;flex-direction:column}.detail-gallery{grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:8px}.detail-gallery button,.detail-gallery button:nth-child(3n+1){grid-column:span 1;grid-row:span 2}.detail-gallery button:nth-child(3n+1){grid-column:span 2}.detail-gallery button:nth-child(4n){grid-row:span 2}.detail-contact{margin-top:70px;padding:38px 24px}
  .lightbox{grid-template-columns:1fr}.lightbox-arrow{position:absolute;bottom:16px;height:48px}.lightbox-arrow.prev{left:16px}.lightbox-arrow.next{right:16px}.lightbox-stage{padding:20px}.lightbox-stage img{max-height:calc(100vh - 90px)}
}

@media (min-width: 1700px) {
  .section,.hero-content,.page-hero-content,.detail-content,.detail-title,.site-footer{width:min(1480px,calc(100% - 120px))}.main-nav{gap:42px}.nav-link{font-size:15px}.dog-card{min-height:760px}.hero-content h1{font-size:112px}.intro-visual{min-height:680px}.stream-card{height:520px}
}

@media (hover:none) {
  .stream-card::after{opacity:1;transform:none}.value-card:hover,.dog-card:hover{transform:none}.contact-row:hover,.social-card:hover{transform:none}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}


/* v6 motion, summer palette and custom video player */
:root { --summer-cream:#fff5df; --summer-peach:#ffd1a6; --summer-pink:#f6a6a7; --summer-lilac:#cdb9ec; --summer-sun:#ffc65c; }
html[data-theme="dark"] { --bg:#211b2a; --surface:rgba(53,38,53,.82); --surface-solid:#37293c; --surface-soft:#49384c; --line:rgba(255,228,190,.16); --text:#fff7eb; --muted:#e6cfc1; --shadow:0 30px 85px rgba(26,12,29,.34); }
body { background:radial-gradient(circle at 9% 22%,color-mix(in srgb,var(--summer-peach) 25%,transparent),transparent 27%),radial-gradient(circle at 88% 48%,color-mix(in srgb,var(--summer-lilac) 22%,transparent),transparent 32%),var(--bg); }
html[data-theme="dark"] body { background:radial-gradient(circle at 12% 25%,rgba(255,170,108,.15),transparent 28%),radial-gradient(circle at 88% 60%,rgba(185,137,218,.16),transparent 30%),var(--bg); }
html.theme-switching body, html.theme-switching .contact-panel, html.theme-switching .social-card, html.theme-switching .site-header { transition:background .45s ease,color .45s ease,border-color .45s ease,box-shadow .45s ease; }
.wave-divider { height:136px; margin-top:-36px; color:var(--summer-cream); background:transparent; }
.wave-divider svg { display:block; width:100%; height:100%; overflow:hidden; }
.wave-divider path { animation:none; transform:none; }
.values-section { background:linear-gradient(130deg,var(--summer-cream),color-mix(in srgb,var(--summer-peach) 44%,var(--surface-soft)) 50%,color-mix(in srgb,var(--summer-lilac) 30%,var(--surface-soft))); }
html[data-theme="dark"] .values-section { background:linear-gradient(130deg,#49384c,#573d4a 52%,#453951); }
.value-card { min-width:0; background:color-mix(in srgb,var(--surface) 86%,var(--summer-cream)); box-shadow:0 14px 34px rgba(138,81,79,.12); transition:transform .48s cubic-bezier(.16,1,.3,1),box-shadow .48s cubic-bezier(.16,1,.3,1),border-color .48s ease,background .48s ease; }
.value-card:hover { transform:translateY(-10px) scale(1.035); border-color:color-mix(in srgb,var(--sun) 55%,var(--line)); box-shadow:0 28px 70px rgba(232,130,82,.30),0 0 0 6px rgba(255,197,92,.10); }
.value-card h3 { margin-top:34px; overflow-wrap:anywhere; font-size:clamp(21px,2.15vw,31px); }
.card-ripple { opacity:.42; transition:transform .75s cubic-bezier(.16,1,.3,1),opacity .48s ease,border-color .48s ease; }
.value-card:hover .card-ripple { transform:scale(1.25); opacity:1; border-color:var(--sun); }
.stream-card { background:var(--summer-peach); isolation:isolate; }
.stream-card img { position:absolute; inset:0; max-width:none; width:100%; height:100%; object-fit:cover; object-position:center; }
.photo-stream { scroll-behavior:smooth; overscroll-behavior-x:contain; }
.dog-card { transition:transform .48s cubic-bezier(.16,1,.3,1),box-shadow .48s ease,filter .38s ease,top .62s cubic-bezier(.16,1,.3,1),left .62s cubic-bezier(.16,1,.3,1),width .62s cubic-bezier(.16,1,.3,1),height .62s cubic-bezier(.16,1,.3,1),border-radius .62s cubic-bezier(.16,1,.3,1); }
.dog-card-bg-layer { filter:none; transform:scale(1.04); transition:opacity .85s ease,transform 7s linear; }
.dog-card-bg-layer.is-active,.dog-card:hover .dog-card-bg-layer.is-active { filter:none; transform:scale(1.1); }
.dog-card-bg-layer.is-prev { filter:none; transform:scale(1.04); }
.dog-card.is-opening { transform:none; filter:none; box-shadow:none; clip-path:none; }
.dog-card.is-opening .dog-card-copy,.dog-card.is-opening .dog-card-index,.dog-card.is-opening .dog-card-shape { opacity:0; visibility:hidden; }
.detail-overlay { background:var(--bg); opacity:0; transition:opacity .2s ease; }
.detail-overlay.is-open { opacity:1; }
.detail-shell { opacity:0; transition:opacity .3s ease; }
.detail-overlay.show-content .detail-shell { opacity:1; }
.detail-overlay.is-transitioning .detail-shell { pointer-events:none; }
.detail-overlay.is-transitioning .detail-close { opacity:0; pointer-events:none; }
.video-placeholder { background:linear-gradient(135deg,color-mix(in srgb,var(--summer-peach) 35%,var(--surface-soft)),color-mix(in srgb,var(--summer-lilac) 35%,var(--surface))); }
.custom-player { position:relative; width:min(440px,100%); aspect-ratio:9/16; overflow:hidden; border-radius:28px; background:#1e1823; box-shadow:0 30px 70px rgba(60,32,43,.35); }
.detail-video { width:100%; height:100%; border-radius:0; display:block; object-fit:cover; transform:none !important; box-shadow:none; }
.player-gradient { position:absolute; inset:35% 0 0; pointer-events:none; background:linear-gradient(transparent,rgba(14,9,16,.82)); }
.player-big-play { position:absolute; inset:0; margin:auto; width:72px; height:72px; border:1px solid rgba(255,255,255,.45); border-radius:50%; background:rgba(255,255,255,.16); color:#fff; backdrop-filter:blur(10px); cursor:pointer; font-size:23px; transition:transform .3s ease,opacity .3s ease; }
.player-big-play:hover { transform:scale(1.1); }.custom-player[data-state="playing"] .player-big-play{opacity:0;pointer-events:none}
.player-controls { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:16px; display:flex; align-items:center; gap:10px; color:white; transition:opacity .3s ease,transform .3s ease; }
.player-button { border:0; background:none; color:inherit; padding:4px; cursor:pointer; font-size:19px; line-height:1; }.player-pause-icon{display:none}.custom-player[data-state="playing"] .player-play-icon{display:none}.custom-player[data-state="playing"] .player-pause-icon{display:inline}
.player-timeline { flex:1; height:16px; position:relative; display:grid; align-items:center; }.player-timeline input { position:absolute; inset:0; z-index:2; width:100%; opacity:0; cursor:pointer; }.player-timeline::before,.player-progress{content:"";height:4px;border-radius:99px;position:absolute;left:0;right:0;background:rgba(255,255,255,.35)}.player-progress{right:auto;width:0;background:var(--summer-sun)}
.player-time { font-size:10px; white-space:nowrap; }.player-volume{width:58px;accent-color:var(--summer-sun)}
.custom-player:fullscreen { width:100vw; height:100vh; max-width:none; aspect-ratio:auto; border-radius:0; background:#000; display:grid; place-items:center; }.custom-player:fullscreen .detail-video{width:auto;height:100%;max-width:100%;object-fit:contain;}
@media(max-width:1040px){.value-card h3{font-size:25px}.value-card{padding:28px}}


/* v7 stability, alignment and mobile polish */
body{overflow-x:clip}.boot-screen{background:linear-gradient(145deg,#fff4dd,#f8d9c3 50%,#d9c7ef);transition:opacity .72s cubic-bezier(.16,1,.3,1),visibility 0s linear .72s}.boot-mark{animation:bootMarkV7 1.55s cubic-bezier(.16,1,.3,1) forwards}.boot-wave{bottom:-72%;background:linear-gradient(180deg,#ffd08c,#ec9d80);animation:bootWaveV7 1.75s cubic-bezier(.6,0,.2,1) forwards}@keyframes bootMarkV7{0%{opacity:0;transform:translateY(20px) scale(.94)}35%,74%{opacity:1;transform:none}100%{opacity:1;transform:scale(1.02)}}@keyframes bootWaveV7{0%{transform:translateY(100%) scaleX(.82)}60%{transform:translateY(-52%) scaleX(1.08)}100%{transform:translateY(-155%) scaleX(1.18)}}
.wave-divider{height:104px;margin:0;background:var(--summer-cream);color:var(--summer-cream);line-height:0}.wave-divider svg{height:106px;transform:translateY(-1px)}.values-section{margin-top:0}.page-view{transition:opacity .48s ease,transform .58s cubic-bezier(.16,1,.3,1),filter .58s ease}.page-view.is-leaving{animation:pageOutV7 .65s cubic-bezier(.4,0,.2,1) forwards}.page-view.is-entering{animation:pageInV7 .72s cubic-bezier(.16,1,.3,1) forwards}@keyframes pageInV7{0%{opacity:0;transform:translateY(20px) scale(.992);filter:blur(9px)}55%{filter:blur(2px)}100%{opacity:1;transform:none;filter:none}}@keyframes pageOutV7{0%{opacity:1;transform:none;filter:none}100%{opacity:0;transform:translateY(-14px) scale(.992);filter:blur(9px)}}.page-transition{background:rgba(24,30,43,.08);backdrop-filter:blur(0);transition:opacity .35s ease,backdrop-filter .52s ease}.page-transition.is-active{opacity:1;backdrop-filter:blur(4px)}.page-transition i{display:none}
.icon-button,.stream-controls button{display:grid;place-items:center;line-height:1}.icon-button svg{display:block}.stream-controls button{font-size:22px;padding:0}.social-grid-full{grid-template-columns:repeat(2,1fr)}.social-grid-full .social-card{min-height:170px}.social-card strong{line-height:1.25}.contact-caption{line-height:1.45}
.dog-card{transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease,opacity .38s ease,filter .38s ease}.dog-card.is-opening{transform:scale(.985);opacity:.18;filter:blur(3px);pointer-events:none}.detail-overlay{background:color-mix(in srgb,var(--bg) 96%,#241e32);opacity:0;transition:opacity .48s ease}.detail-shell{opacity:0;transform:scale(.975);transform-origin:var(--detail-origin,50% 50%);transition:opacity .48s ease,transform .54s cubic-bezier(.16,1,.3,1);will-change:opacity,transform}.detail-overlay.show-content .detail-shell{opacity:1;transform:scale(1)}.detail-overlay.is-transitioning .detail-shell{pointer-events:none}.detail-overlay.is-transitioning .detail-close{opacity:0;pointer-events:none}.detail-overlay.show-content .detail-close{transition:opacity .25s ease .2s}.detail-close{display:grid;place-items:center}.detail-close span{left:15px;right:15px}
.dog-card-bg-layer{transition:opacity 1.05s cubic-bezier(.22,1,.36,1),transform 8.5s linear;will-change:opacity,transform}.dog-card-bg-layer.is-active,.dog-card:hover .dog-card-bg-layer.is-active{transform:scale(1.07)}.dog-card-bg-layer.is-prev{transform:scale(1.03)}.photo-stream{scroll-snap-type:x mandatory;scroll-padding-inline:18px}.stream-card{scroll-snap-stop:always}.stream-card::after{pointer-events:none}
@media(max-width:760px){.wave-divider{height:70px}.wave-divider svg{height:72px}.site-header{backdrop-filter:blur(14px)}.detail-shell{transform:translateY(14px) scale(.992);transform-origin:center bottom}.detail-overlay.show-content .detail-shell{transform:none}.detail-hero{min-height:100svh;height:100svh}.detail-title{padding-bottom:72px}.detail-title h2{font-size:clamp(46px,14vw,64px)}.detail-content{padding-top:50px}.social-grid-full{grid-template-columns:1fr}.social-grid-full .social-card{min-height:128px;display:grid;grid-template-columns:48px 1fr auto;grid-template-rows:auto auto;align-items:center;column-gap:13px;row-gap:3px}.social-grid-full .social-icon{grid-row:1/3}.social-grid-full strong{grid-column:2}.social-grid-full small{grid-column:2}.social-grid-full b{position:static;grid-column:3;grid-row:1/3;justify-self:end}.dog-card.is-opening{transform:scale(.99);opacity:.1;filter:blur(2px)}}


/* v8: theme-aware wave fix, wider readable cards, blur-in card motion, calmer close button,
   synced photo crossfades, glass surfaces, news/litter feeds, radial theme reveal, real contacts */
:root{ --glass-bg:rgba(255,255,255,.56); --glass-border:rgba(255,255,255,.62); --glass-blur:blur(22px) saturate(160%); --bg-light:#fff5df; --bg-dark:#211b2a; }
html[data-theme="dark"]{ --glass-bg:rgba(30,22,36,.46); --glass-border:rgba(255,255,255,.14); }

/* --- Wave divider: was hardcoded to the light cream color, so in dark mode it sat on top of a
   much darker values-section background with a hard, mismatched edge. Now it is theme-aware and
   built from a simple radius arc instead of a squished SVG, so it always renders as a clean curve. */
.wave-divider{ position:relative; height:120px; margin-top:-58px; overflow:visible; background:transparent; z-index:2; pointer-events:none; }
.wave-divider svg{ display:none; }
.wave-divider::before{ content:""; position:absolute; left:-8%; right:-8%; bottom:-2px; height:160%; background:var(--summer-cream); border-radius:50% 50% 0 0/60% 60% 0 0; transition:background .45s ease; }
html[data-theme="dark"] .wave-divider::before{ background:#49384c; }

/* --- Value cards: text was breaking mid-word because overflow-wrap:anywhere forced ugly breaks
   inside a column that was too narrow for the max font size. Cards are wider with calmer type. */
.value-grid{ grid-template-columns:repeat(3,minmax(230px,1fr)); gap:20px; }
.value-card{ padding:30px 26px; min-height:320px; }
.value-card h3{ margin-top:32px; overflow-wrap:normal; word-break:normal; hyphens:none; font-size:clamp(19px,1.9vw,26px); line-height:1.18; }
.value-card p{ font-size:14.5px; line-height:1.6; }
@media(max-width:1300px) and (min-width:1041px){ .value-grid{ gap:16px; } .value-card{ padding:30px 26px; } .value-card h3{ font-size:clamp(20px,2vw,24px); margin-top:42px; } }

/* --- Dog card open/close: adds an actual blur-in reveal (previously only opacity+scale animated,
   so the requested "blur appearing" motion never showed), and softens the source card fade. */
.detail-shell{ filter:blur(20px); will-change:opacity,transform,filter; transition:opacity .5s ease, transform .56s cubic-bezier(.16,1,.3,1), filter .58s cubic-bezier(.16,1,.3,1); }
.detail-overlay.show-content .detail-shell{ filter:blur(0); }
.dog-card.is-opening{ transform:scale(.98); opacity:.16; filter:blur(6px); }

/* --- Close button: the 90deg spin plus a separately delayed opacity fade read as glitchy.
   Now it fades and scales in together, and hover uses a gentler 45deg turn. */
.detail-close{ opacity:0; transform:scale(.82) rotate(0deg); transition:opacity .34s ease, transform .34s cubic-bezier(.34,1.56,.64,1), background .25s ease; }
.detail-overlay.show-content .detail-close{ opacity:1; transform:scale(1) rotate(0deg); }
.detail-close:hover{ background:rgba(5,31,42,.42); transform:scale(1.08) rotate(45deg); }
.detail-close:active{ transform:scale(.92) rotate(45deg); }

/* --- Radial theme toggle: a plain full-screen color overlay grows from the button using the Web
   Animations API (no View Transition DOM snapshot), so backdrop-filter surfaces never flicker. */
.theme-reveal{ position:fixed; inset:0; z-index:9998; pointer-events:none; }
.theme-reveal[data-theme="dark"]{ background:var(--bg-dark); }
.theme-reveal[data-theme="light"]{ background:var(--bg-light); }

/* --- Contacts: the dog-card CTA no longer exposes a tappable phone number (it isn't the place to
   call from); the number stays visible for reference and a clear button routes to Contacts, the
   one place where calling is actually offered. */
.detail-contact-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-top:22px; position:relative; z-index:2; }
.detail-contact-phone{ font-weight:750; font-size:16px; opacity:.75; letter-spacing:.01em; user-select:text; }
.detail-contact-cta{ display:inline-flex; align-items:center; gap:14px; border:0; padding:15px 18px; border-radius:15px; background:#153949; color:white; cursor:pointer; font-weight:700; transition:transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.detail-contact-cta:hover{ transform:translateY(-3px); box-shadow:0 16px 34px rgba(15,55,73,.32); }
.detail-contact-cta:active{ transform:scale(.97); }

/* --- Glass surfaces: a consistent frosted-glass treatment across secondary cards for a more
   current look, instead of a few flat, fully opaque panels. */
.litter-demo-card{ background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.social-card{ backdrop-filter:blur(16px) saturate(150%); -webkit-backdrop-filter:blur(16px) saturate(150%); }
.stream-controls button{ backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); }
.documents-strip>div{ background:var(--glass-bg); backdrop-filter:blur(16px) saturate(140%); -webkit-backdrop-filter:blur(16px) saturate(140%); }
.detail-facts>div{ background:var(--glass-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }

/* --- News + litters feed: structural placeholders now, wired to real VK posts / Google Sheet rows
   later without changing the layout. */
.news-badge{ align-self:center; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:9px 14px; border-radius:99px; color:var(--sea-deep); background:var(--glass-bg); border:1px solid var(--glass-border); }
.news-grid{ margin-top:34px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.news-card{ position:relative; padding:30px; border-radius:26px; background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.news-card-tag{ display:inline-block; margin-bottom:16px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--sea-deep); background:color-mix(in srgb,var(--sea) 16%,transparent); padding:6px 12px; border-radius:99px; }
.news-card h3{ font-size:22px; margin-bottom:10px; }
.news-card p{ font-size:14.5px; }
.news-card-link{ display:inline-flex; align-items:center; gap:10px; margin-top:18px; font-weight:700; color:var(--sea-deep); }
.litters-feed-grid{ margin-top:30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.litter-feed-card{ padding:28px; border-radius:24px; background:var(--glass-bg); border:1px solid var(--glass-border); backdrop-filter:var(--glass-blur); -webkit-backdrop-filter:var(--glass-blur); }
.litter-feed-status{ display:inline-block; margin-bottom:14px; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:99px; background:color-mix(in srgb,var(--sun) 22%,transparent); color:var(--sun-deep); }
.litter-feed-card.alt .litter-feed-status{ background:color-mix(in srgb,var(--sea) 18%,transparent); color:var(--sea-deep); }
.litter-feed-card h3{ font-size:21px; margin-bottom:8px; }
.litter-feed-card p{ font-size:14px; }

@media(max-width:760px){ .value-grid{ grid-template-columns:1fr; } .news-section .inline-heading,.litters-feed .inline-heading{ align-items:flex-start; flex-direction:column; gap:12px; } .detail-contact-actions{ flex-direction:column; align-items:flex-start; } }


/* --- v10: slim custom scrollbar (Firefox + WebKit/Chromium) --- */
html{ scrollbar-width:thin; scrollbar-color:var(--sea) transparent; }
::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--sea) 55%, transparent); border-radius:10px; border:2px solid transparent; background-clip:content-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--sea); background-clip:content-box; }

/* --- v10: wave-divider final fix. Previous v8 patch matched only one flat colour against a
   gradient values-section (still left a seam) and killed the wave animation entirely. Now the
   wave is two animated layered paths (real shimmer motion) and values-section is forced to the
   exact same flat colour as the wave, so the edge always lines up in both themes. */
.wave-divider::before{ display:none; }
.wave-divider{ position:relative; height:132px; margin-top:-60px; overflow:hidden; background:transparent; color:var(--summer-cream); z-index:2; pointer-events:none; }
html[data-theme="dark"] .wave-divider{ color:#49384c; }
.wave-divider svg{ display:block; width:100%; height:100%; }
.wave-divider path{ animation:none; transform:none; }
.wave-divider .wave-back{ fill:currentColor; opacity:.5; animation:waveShimmerBack 13s ease-in-out infinite; transform-origin:50% 100%; }
.wave-divider .wave-front{ fill:currentColor; opacity:1; animation:waveShimmerFront 9s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes waveShimmerFront{ 0%,100%{ transform:translateX(0) scaleY(1); } 50%{ transform:translateX(-2.6%) scaleY(1.05); } }
@keyframes waveShimmerBack{ 0%,100%{ transform:translateX(0) scaleY(1); } 50%{ transform:translateX(3%) scaleY(1.08); } }
.values-section{ background:var(--summer-cream); }
html[data-theme="dark"] .values-section{ background:#49384c; }
@media(prefers-reduced-motion:reduce){ .wave-divider .wave-back,.wave-divider .wave-front{ animation:none; } }

/* --- v10: dedicated News page header (reuses .news-grid/.news-card from the home teaser) --- */
.news-header{ padding-top:calc(var(--header-h) + 100px); padding-bottom:40px; }
.news-grid-section{ padding-top:0; }

/* --- v10: Hardbrick maintenance mode --- */
html.maintenance-mode body>*:not(.maintenance-screen){ display:none !important; }
.maintenance-screen{ display:none; }
html.maintenance-mode .maintenance-screen{ position:fixed; inset:0; z-index:999999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; padding:32px; background:linear-gradient(160deg,var(--bg-light,#fff5df),var(--sea-deep,#1b81a6)); color:#0c3b50; }
html[data-theme="dark"].maintenance-mode .maintenance-screen{ background:linear-gradient(160deg,#141a24,#0c3b50); color:#eaf8ff; }
.maintenance-screen img{ width:96px; height:96px; border-radius:30px; box-shadow:0 20px 50px rgba(10,40,55,.25); }
.maintenance-screen h1{ font-size:clamp(28px,4vw,42px); margin:0; }
.maintenance-screen p{ max-width:520px; font-size:16px; opacity:.85; margin:0; }
.maintenance-screen .maintenance-wave{ position:absolute; inset:auto 0 0 0; height:120px; background:currentColor; opacity:.12; border-radius:50% 50% 0 0/70% 70% 0 0; animation:waveShimmerFront 9s ease-in-out infinite; }


/* --- v13: definitive value-card sizing/readability + calm maintenance decoration --- */
/* Use more of the desktop viewport: at wide/zoomed layouts the old 1200px cap made all
   three cards look unnecessarily narrow even when plenty of space was available. */
.values-section{
  padding-inline:max(24px,calc((100vw - 1500px)/2));
}
.value-grid{
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.value-card{
  min-width:0;
  min-height:340px;
  padding:34px 32px;
}
.value-card h3{
  margin-top:34px;
  font-size:clamp(21px,1.35vw,25px);
  line-height:1.16;
  overflow-wrap:normal;
  word-wrap:normal;
  word-break:normal;
  hyphens:none;
  text-wrap:balance;
}
.value-card p{
  font-size:15px;
  line-height:1.65;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
@media(max-width:1040px){
  .values-section{ padding-inline:24px; }
  .value-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .value-card:last-child{ grid-column:1/-1; }
  .value-card h3{ font-size:24px; }
}
@media(max-width:680px){
  .values-section{ padding-inline:18px; }
  .value-grid{ grid-template-columns:1fr; gap:16px; }
  .value-card,.value-card:last-child{ grid-column:auto; min-height:0; padding:28px 24px; }
  .value-card h3{ font-size:23px; text-wrap:wrap; }
}

/* The old maintenance element reused the page-wave transform (horizontal movement + scaleY),
   which distorted a full-width rounded rectangle. Replace it with a stable layered shoreline. */
.maintenance-screen{ overflow:hidden; isolation:isolate; }
.maintenance-screen>*:not(.maintenance-wave){ position:relative; z-index:2; }
.maintenance-screen .maintenance-wave{
  display:block;
  position:absolute;
  z-index:1;
  left:-6%;
  right:-6%;
  bottom:-88px;
  height:180px;
  background:rgba(255,255,255,.16);
  border-radius:50% 50% 0 0/30% 30% 0 0;
  opacity:1;
  animation:none;
  transform:none;
}
.maintenance-screen .maintenance-wave::before{
  content:"";
  position:absolute;
  left:-3%;
  right:-3%;
  top:28px;
  height:100%;
  border-radius:50% 50% 0 0/24% 24% 0 0;
  background:rgba(16,112,145,.16);
}


/* --- v14: full-bleed values background, gap-proof animated waves, glass scrollbar --- */
/* .section normally has a 1200px width cap. This particular section is a full-bleed colour band,
   so cancel that cap and pull it to both viewport edges while keeping its content padded. */
.values-section{
  width:100vw;
  max-width:none;
  margin-inline:calc(50% - 50vw);
  padding-inline:max(24px,calc((100vw - 1500px)/2));
}

/* Horizontal path movement exposed the SVG's left/right edges. Both layers now slightly
   overscan the viewport and animate vertically only, so no rectangular holes can appear. */
.wave-divider{
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
}
.wave-divider svg{
  width:104%;
  max-width:none;
  margin-left:-2%;
  overflow:hidden;
}
.wave-divider .wave-front{
  animation:waveShimmerFrontSafe 9s ease-in-out infinite;
  transform-origin:50% 100%;
}
.wave-divider .wave-back{
  animation:waveShimmerBackSafe 13s ease-in-out infinite;
  transform-origin:50% 100%;
}
@keyframes waveShimmerFrontSafe{
  0%,100%{ transform:scaleX(1.02) scaleY(1); }
  50%{ transform:scaleX(1.035) scaleY(1.055); }
}
@keyframes waveShimmerBackSafe{
  0%,100%{ transform:scaleX(1.025) scaleY(1.015); opacity:.42; }
  50%{ transform:scaleX(1.04) scaleY(1.075); opacity:.58; }
}

/* Compact translucent glass scrollbar. The browser applies backdrop blur where supported;
   elsewhere the layered translucent gradient keeps the same visual character. */
html{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--sea) 48%,transparent) transparent;
}
::-webkit-scrollbar{ width:6px; height:6px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  min-height:42px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sea) 58%,transparent),
    color-mix(in srgb,var(--lavender) 42%,transparent));
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 12px rgba(15,89,111,.16);
  -webkit-backdrop-filter:blur(8px) saturate(150%);
  backdrop-filter:blur(8px) saturate(150%);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--sea) 78%,transparent),
    color-mix(in srgb,var(--lavender) 60%,transparent));
  background-clip:padding-box;
}
@media(max-width:1040px){
  .values-section{ padding-inline:24px; }
}
@media(max-width:680px){
  .values-section{ padding-inline:18px; }
  ::-webkit-scrollbar{ width:4px; height:4px; }
}
@media(prefers-reduced-motion:reduce){
  .wave-divider .wave-front,.wave-divider .wave-back{ animation:none; }
}