/* Shine Cleaning — built on the Klara design system tokens */
:root {
  --navy-950: #01004A;
  --navy-900: #020068;
  --navy-700: #2B2A8A;
  --sky-500: #00ADEF;
  --sky-400: #4DC5F3;
  --sky-200: #A8DFF8;
  --sky-100: #E2F4FD;
  --sky-700: #0878B8;
  --accent-300: #BFE6FA;
  --accent-500: #8ED4F5;
  --white: #FFFFFF;
  --surface-alt: #F2F9FE;
  --ink-muted: #4D5A7C;
  --line: #D3E7F4;
  --focus: #00ADEF;

  --grad-sky: linear-gradient(180deg, #00ADEF 0%, #4DC5F3 45%, #A8DFF8 75%, #FFFFFF 100%);

  --f-display: "Albert Sans", system-ui, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;

  --r-tag: 6px;
  --r-card: 12px;
  --r-frame: 20px;
  --r-pill: 999px;
  --shadow-card: 0 12px 32px rgba(2, 0, 104, .10);
  --shadow-nav: 0 4px 20px rgba(2, 0, 104, .08);

  --gutter: 64px;
  --section: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy-900);
  font: 400 15px/24px var(--f-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--navy-900); color: var(--white); padding: 10px 16px; border-radius: var(--r-pill); }
.skip-link:focus { top: 16px; }

.container { width: 100%; max-width: calc(1280px + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; }

/* ---------- Type ---------- */
.display-xl, .display, .h1, .h2, .h3, .numeral { font-family: var(--f-display); font-weight: 500; }
.display-xl { font-size: clamp(56px, 9.4vw, 120px); line-height: .92; letter-spacing: -.04em; }
.display { font-size: clamp(44px, 5.6vw, 72px); line-height: .98; letter-spacing: -.035em; }
.h1 { font-size: clamp(34px, 3.8vw, 48px); line-height: 1.05; letter-spacing: -.03em; }
.h2 { font-size: clamp(26px, 2.5vw, 32px); line-height: 1.15; letter-spacing: -.02em; }
.h3 { font-size: 20px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; }
.numeral { font-size: 64px; line-height: 1; letter-spacing: -.03em; }
.body-lg { font-size: 18px; line-height: 28px; }
.body { font-size: 15px; line-height: 24px; }
.body-sm { font-size: 13px; line-height: 20px; }
.muted { color: var(--ink-muted); }
.eyebrow-text { font: 600 10px/12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; margin: 0; }

.eyebrow {
  display: inline-block; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--r-pill);
  font: 600 10px/12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-900);
}
.eyebrow--light { border-color: rgba(255, 255, 255, .8); color: var(--white); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r-pill);
  font: 600 12px/16px var(--f-body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--ease);
}
.btn svg { width: 14px; height: 14px; transition: transform .2s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn--primary { background: var(--navy-900); color: var(--white); }
.btn--primary:hover { background: var(--navy-700); }
.btn--secondary { background: var(--sky-400); color: var(--navy-900); }
.btn--secondary:hover { background: var(--sky-200); }
.btn--accent { background: var(--accent-300); color: var(--navy-900); }
.btn--accent:hover { background: var(--accent-500); }
.btn--ghost { background: var(--white); color: var(--navy-900); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy-900); }
.btn--sm { padding: 9px 16px; }

.tag {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-tag); background: var(--accent-300);
  font: 600 10px/12px var(--f-body); letter-spacing: .08em; text-transform: uppercase; color: var(--navy-900);
  transition: background-color .2s;
}
.tag:hover { background: var(--accent-500); }

/* ---------- Logo (official SVG, sprite #logo-shine; colours via --logo-* ) ---------- */
.logo { display: inline-flex; align-items: center; line-height: 1; }
.logo__svg { display: block; height: 48px; width: auto; aspect-ratio: 277 / 131; overflow: visible; }
.logo--light { --logo-script: var(--white); --logo-sub: var(--white); --logo-heart: var(--accent-300); }

/* ---------- Nav ---------- */
.nav { position: fixed; inset: 24px 0 auto; z-index: 50; padding: 0 var(--gutter); transition: inset .3s var(--ease); }
.nav__bar {
  max-width: 1280px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: var(--white); border-radius: var(--r-card); padding: 10px 12px 10px 24px; box-shadow: var(--shadow-nav);
}
.nav.is-scrolled { inset: 12px 0 auto; }
.nav__links { display: flex; gap: 28px; font-size: 13px; line-height: 20px; }
.nav__links a { position: relative; padding: 4px 0; }
.nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav__links a:hover::after, .nav__links a.is-active::after { transform: scaleX(1); }
.nav__actions { display: flex; align-items: center; gap: 16px; }
.nav__phone { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; }
.nav__phone svg { width: 18px; height: 18px; color: var(--sky-500); }
.nav__burger { display: none; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill); background: var(--sky-100); position: relative; }
.nav__burger span { position: absolute; left: 13px; right: 13px; height: 2px; background: var(--navy-900); border-radius: 2px; transition: transform .25s var(--ease); }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 24px; }
.nav__burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40; background: var(--navy-900); color: var(--white);
  display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 120px 20px 40px;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu nav { display: flex; flex-direction: column; gap: 8px; }
.mobile-menu nav a { font: 500 40px/1.15 var(--f-display); letter-spacing: -.03em; }
.mobile-menu__phone { font-size: 18px; color: var(--sky-200); }
.mobile-menu .btn { align-self: flex-start; }
body.menu-open { overflow: hidden; }

/* ---------- Yellow stroke ---------- */
.stroke { position: absolute; pointer-events: none; overflow: visible; }
.stroke path { fill: none; stroke: var(--white); stroke-opacity: .85; stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- 3D objects ---------- */
.obj { display: block; filter: drop-shadow(0 18px 18px rgba(2, 0, 104, .16)); will-change: transform; }
.obj--tilt-l { transform: rotate(-12deg); }
.obj--tilt-r { transform: rotate(10deg); }


/* Layout drawn from Klara Concepts 01, 02 and 03. */
:root { --gutter: 48px; --section: 112px; --r-card: 8px; --r-frame: 0px; --shadow-card: none; }
body { max-width: 1920px; margin: 0 auto; }
.container { max-width: 1120px; }
.h1 { font-size: clamp(32px, 3.2vw, 46px); font-weight: 400; }
.h2 { font-weight: 400; }
.h3 { font-weight: 500; }
.eyebrow { padding: 3px 7px; font-size: 9px; letter-spacing: .01em; border-radius: 5px; line-height: 12px; }
.btn { padding: 12px 20px; border-radius: 9px; font-size: 10px; line-height: 14px; }
.tag { padding: 0; border-radius: 0; background: linear-gradient(transparent 25%,var(--accent-300) 25%,var(--accent-300) 80%,transparent 80%); font-size: 9px; }
.nav { inset: 28px 0 auto; padding: 0 40px; }
.nav__bar { max-width: 1504px; padding: 12px 16px 12px 24px; border-radius: 12px; box-shadow: 0 3px 12px rgb(2 0 104 / 7%); }
.nav__links { gap: 30px; font-size: 10px; text-transform: uppercase; }
.nav__phone { font-size: 11px; }
.nav__cta { border-radius: 12px; }
.hero { padding: 0; }
.hero__frame { height: min(820px, 64vw); min-height: 620px; position: relative; overflow: hidden; background: linear-gradient(180deg,var(--sky-100) -18%,var(--sky-200) 13%,var(--sky-400) 53%,var(--sky-700) 100%); }
.hero__person { position: absolute; left: 50%; bottom: -4%; transform: translateX(-50%); height: 96%; width: 86%; object-fit: contain; object-position: center bottom; z-index: 2; }
.hero__stroke { inset: 0; width: 100%; height: 100%; z-index: 1; }
.hero__stroke path { stroke-width: 10px; }
.hero__mission { position: absolute; left: 4%; top: 44%; z-index: 3; color: var(--white); font-size: 14px; line-height: 1.45; width: 260px; }
.hero__mission span { display: block; margin-top: 24px; font-size: 8px; line-height: 1.5; letter-spacing: .05em; }
.hero__cards { position: absolute; right: 4%; top: 43%; z-index: 4; display: flex; gap: 8px; }
.mini-card { width: 112px; height: 120px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 18px; border-radius: 12px; background: var(--white); font: 500 11px/1.15 var(--f-body); text-transform: uppercase; transition: transform .2s; }
.mini-card svg { width: 20px; height: 20px; align-self: flex-end; }
.mini-card:hover { transform: translateY(-5px); }
.mini-card--accent { background: var(--accent-300); }
.hero__title { position: absolute; bottom: 10%; left: 0; width: 100%; text-align: center; white-space: nowrap; color: var(--white); z-index: 5; font: 400 clamp(68px,12.2vw,225px)/.95 var(--f-display); letter-spacing: -.065em; }
.hero__down { position: absolute; bottom: 22px; right: 4%; color: var(--white); z-index: 5; font-size: 28px; }
.intro { padding: 140px 24px; text-align: center; }
.intro__inner { position: relative; max-width: 680px; margin: 0 auto; isolation: isolate; }
.intro__inner::before { content: ''; position: absolute; width: 175px; height: 175px; border-radius: 50%; background: var(--sky-400); left: 50%; top: 45%; transform: translate(-50%,-50%); z-index: -1; }
.intro h2 { margin-top: 28px; font: 400 clamp(25px,2.5vw,36px)/1.2 var(--f-display); letter-spacing: -.035em; }
.strip__grid { display: grid; grid-template-columns: 2.7fr 1fr 1fr 1fr; }
.block { position: relative; padding: 32px; min-height: 390px; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; border-radius: 9px 9px 0 0; }
.block--sky { color: var(--white); background: var(--sky-400); }
.block--sky::after { content:''; position:absolute; width:260px; height:400px; border:8px solid var(--accent-300); border-radius:45% 45% 0 0; right:-160px; top:80px; transform:rotate(30deg); pointer-events:none; }
.block__title { font: 400 24px/1.18 var(--f-display); max-width: 320px; }
.block p { max-width: 270px; font-size: 12px; line-height: 1.6; }
.block--sky p { margin-top: auto; }
.block .btn { margin-bottom: 8px; position: relative; z-index: 1; }
.block--navy { background: var(--navy-900); color: var(--white); }
.block--navy .block__title,.block--accent .block__title { font-size: 18px; }
.block--navy p,.block--accent p { font-size: 11px; line-height: 1.5; }
.block--accent { background: var(--accent-300); }
.block.block--photo { background: var(--sky-700); color: var(--white); isolation: isolate; }
.block--photo img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:80% center; mix-blend-mode:luminosity; opacity:.75; }
.block--photo::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, color-mix(in srgb,var(--navy-900) 78%,transparent) 0%, color-mix(in srgb,var(--sky-700) 35%,transparent) 55%, transparent 100%); }
.block__num { position:absolute; right:18px; bottom:10px; font:400 clamp(70px,8vw,128px)/.9 var(--f-display); letter-spacing:-.05em; }
.block--photo .block__num { color:var(--white); }
.featured .container { max-width: 1000px; }
.section-head { max-width: 570px; margin-bottom: 52px; }
.section-head .eyebrow { margin-bottom: 20px; }
.featured .h1 { font-size: clamp(30px,2.7vw,38px); }
.cards-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 44px; }
.svc-card { display:flex; flex-direction:column; align-items:flex-start; gap:14px; }
.svc-card__art { height:140px; width:100%; display:flex; align-items:center; }
.svc-card__art .obj { width:150px; height:130px; object-fit:contain; }
.svc-card__art .obj--spray { width:88px; }
.svc-card .h3 { max-width: 190px; }
.svc-card .tag { margin-top:auto; }
.why { position:relative; background:linear-gradient(180deg,var(--sky-500),var(--sky-400) 50%,var(--sky-100)); overflow:hidden; padding:100px 0 70px; }
.why__grid { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:30px; }
.why__copy { position:relative; z-index:2; }
.why__title { color:var(--white); margin:24px 0 40px; font-size:clamp(30px,2.7vw,40px); }
.benefits { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.benefits li { display:flex; gap:10px; }
.benefits svg { width:17px; height:17px; flex:none; margin-top:3px; }
.benefits strong { display:block; color:var(--navy-900); font-size:14px; font-weight:500; margin-bottom:7px; }
.benefits span { display:block; color:var(--navy-900); font-size:11px; line-height:1.6; max-width:190px; }
.why__media { position:relative; margin-right:-200px; }
.why__media img { width:100%; height:480px; object-fit:contain; position:relative; z-index:1; }
.why__stroke { inset:-100px 0 0 -80px; width:100%; height:120%; }
.explore { padding-top:0; background:linear-gradient(var(--sky-100),var(--white) 230px); }
.explore > .container { max-width:1600px; }
.explore__title { font-size:clamp(54px,11.8vw,190px); line-height:1.1; letter-spacing:-.065em; font-weight:400; color:var(--sky-400); white-space:nowrap; margin:0 -16px 70px; text-align:center; }
.explore__grid { max-width:1150px; margin:0 auto; display:grid; grid-template-columns:140px 1fr 245px; align-items:center; gap:35px; }
.explore__grid > .eyebrow-text { font-size:9px; font-weight:400; color:var(--ink-muted); }
.explore__list button { display:block; width:100%; text-align:left; background:none; border:0; padding:3px 0; font:400 clamp(27px,3.1vw,46px)/1.18 var(--f-display); letter-spacing:-.045em; transition:color .2s,transform .25s; }
.explore__list button:hover,.explore__list button.is-active { color:var(--sky-500); transform:translateX(22px); }
.explore__media img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; transition:opacity .18s; }
.explore__media img.is-swapping { opacity:0; }
.explore__media figcaption { margin-top:16px; font-size:11px; line-height:1.6; color:var(--ink-muted); }
.explore__cta { max-width:800px; margin:34px auto 0; }
.testimonial { padding-top:0; }
.testimonial .container { max-width:1080px; }
.t-card { display:grid; grid-template-columns:1fr 1.08fr; background:var(--sky-100); border-radius:10px; overflow:hidden; }
.t-card__media { position:relative; min-height:460px; background:var(--sky-400); overflow:hidden; }
.t-card__media img { width:100%; height:100%; position:absolute; object-fit:cover; }
.t-card__stroke { inset:0; width:100%; height:100%; z-index:1; }
.t-card__body { display:flex; flex-direction:column; align-items:flex-start; padding:52px 40px; gap:20px; }
.review-note { font-size:9px; color:var(--ink-muted); margin-top:-13px; }
.t-card__slides { display:grid; }
.t-slide { grid-area:1/1; visibility:hidden; opacity:0; transition:opacity .25s; }
.t-slide.is-active { visibility:visible; opacity:1; }
.t-slide .h2 { font-size:26px; }
.t-slide footer { margin-top:28px; font-size:11px; }
.t-card__nav { display:flex; align-items:center; gap:10px; margin-top:auto; }
.round-btn { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--sky-200); background:none; border-radius:50%; }
.round-btn:hover { background:var(--white); }
.round-btn svg { width:16px; height:16px; }
.t-card__count { font-size:11px; }
.seals { display:flex; justify-content:center; gap:35px; margin-top:35px; font-size:11px; color:var(--ink-muted); }
.seals li { display:flex; align-items:center; gap:8px; }
.seals svg { width:20px; height:20px; }
.marquee { position:relative; overflow:hidden; padding:50px 0; }
.marquee__track { display:flex; gap:32px; align-items:center; width:max-content; animation:marquee 45s linear infinite; }
.marquee__track span { white-space:nowrap; color:var(--sky-400); font:400 50px/1.2 var(--f-display); letter-spacing:-.035em; }
.marquee__icon { width:42px; height:42px; color:var(--accent-500); flex:none; }
@keyframes marquee { to { transform:translateX(-50%); } }
.about__grid { display:grid; grid-template-columns:1fr 1fr; gap:100px; max-width:1000px; }
.about__left h2 { font-size:35px; margin:20px 0 38px; }
.about img { width:100%; aspect-ratio:4/4.6; object-fit:cover; border-radius:8px; }
.about__right p { margin:35px 0 25px; font-size:13px; line-height:1.8; }
.how { padding-top:30px; }
.how > .container { max-width:1000px; }
.steps { display:grid; gap:42px; }
.step { position:relative; min-height:310px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; background:var(--sky-100); border-radius:8px; padding:50px; overflow:hidden; }
.step .numeral { position:absolute; top:34px; left:50px; color:var(--sky-400); font-size:120px; opacity:.8; }
.step > div { max-width:300px; position:relative; z-index:2; padding-top:96px; }
.step .h3 { font-size:25px; margin-bottom:15px; }
.step p { font-size:13px; line-height:1.8; }
.step__obj { width:100%; height:220px; object-fit:contain; position:relative; z-index:1; justify-self:center; }
.step__obj.obj--spray { width:120px; }
.numbers { padding:20px 0 100px; }
.numbers__grid { display:grid; grid-template-columns:repeat(3,1fr); }
.stat { display:flex; flex-direction:column; align-items:center; text-align:center; gap:20px; padding:20px; }
.stat + .stat { border-left:1px solid var(--line); }
.stat .numeral { font-size:80px; color:var(--sky-500); }
.gallery { background:var(--sky-100); }
.gallery .container { max-width:1400px; }
.gallery__head { display:flex; align-items:flex-end; justify-content:space-between; gap:30px; margin-bottom:60px; }
.gallery__head h2 { color:var(--sky-400); font-size:clamp(48px,6vw,88px); letter-spacing:-.055em; }
.gallery__head p { max-width:260px; }
.gallery__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-top:1px solid var(--sky-200); padding-top:36px; }
.gallery__grid img { width:100%; aspect-ratio:1.1; object-fit:cover; border-radius:10px; }
.gallery__grid figcaption { margin-top:18px; }
.faq__grid { display:grid; grid-template-columns:1fr 1fr; gap:75px; align-items:center; }
.faq__photo { position:relative; overflow:hidden; border-radius:9px; }
.faq__photo img { width:100%; aspect-ratio:4/5; object-fit:cover; }
.faq__photo .stroke { inset:0; width:100%; height:100%; }
.accordion > .h1 { margin:20px 0; font-size:34px; }
.accordion > .btn { margin-bottom:30px; }
.accordion details { border-bottom:1px solid var(--line); }
.accordion summary { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 0; font-size:15px; list-style:none; cursor:pointer; }
.accordion summary::-webkit-details-marker { display:none; }
.accordion summary::after { content:'↓'; color:var(--sky-500); font-size:18px; }
.accordion details[open] summary { color:var(--sky-700); }
.accordion details[open] summary::after { content:'↑'; }
.accordion details p { font-size:12px; line-height:1.8; padding:0 25px 24px 0; }
.contact { padding-top:0; }
.contact .container { max-width:1400px; }
.contact__mail { display:inline-block; font:400 clamp(28px,5.5vw,96px)/1.1 var(--f-display); letter-spacing:-.055em; margin:30px 0 80px; overflow-wrap:anywhere; color:var(--navy-900); background:linear-gradient(var(--accent-300),var(--accent-300)) 0 94%/0 .12em no-repeat; transition:background-size .45s var(--ease); }
.contact__mail:hover { background-size:100% .12em; }
.contact__grid { display:grid; grid-template-columns:1fr 1.5fr; align-items:start; gap:70px; max-width:1024px; margin:auto; }
.contact__info { display:grid; gap:24px; font-size:13px; }
.contact__info li { display:flex; align-items:flex-start; gap:12px; }
.contact__info li a { overflow-wrap:anywhere; }
.contact__info svg { width:20px; height:20px; flex:none; color:var(--sky-500); }
.tips { background:var(--sky-100); }
.tips__head { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin-bottom:40px; }
.tips__head h2 { margin-top:20px; }
.tips__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px; }
.tips__grid article { position:relative; }
.tips__grid img { width:100%; aspect-ratio:1.6; object-fit:cover; border-radius:8px; margin-bottom:25px; }
.tips__grid .eyebrow { position:absolute; left:10px; top:10px; background:var(--accent-300); border:0; font-size:8px; }
.tips__grid h3 { font-size:20px; margin-bottom:16px; }
.tips details { font-size:12px; line-height:1.7; }
.tips summary { cursor:pointer; width:max-content; font-size:9px; line-height:1.4; text-transform:uppercase; list-style:none; background:linear-gradient(transparent 30%,var(--accent-300) 30%,var(--accent-300) 80%,transparent 80%); }
.tips details p { margin-top:15px; color:var(--ink-muted); }

.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 32px; border-radius: var(--r-card); background: var(--surface-alt); }
.form label { display: grid; gap: 6px; font-size: 13px; font-weight: 500; }
.form__full { grid-column: 1 / -1; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--white); color: var(--navy-900); font: 400 15px/22px var(--f-body);
  transition: border-color .2s, box-shadow .2s;
}
.form textarea { resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.form .btn { justify-self: start; }
.kit-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kit-form [aria-invalid="true"] { border-color: #C8323C; box-shadow: 0 0 0 1px #C8323C; }
.kit-form.is-sent label, .kit-form.is-sent button { display: none; }
.kit-form__error { color: #B42833; font-size: 13px; }
.kit-form__error a { text-decoration: underline; }
.kit-form__ok { font: 500 24px/1.2 var(--f-display); }

/* ---------- Footer ---------- */
.footer { position: relative; overflow: hidden; background: var(--navy-950); color: var(--white); padding: 80px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 24px; }
.footer .logo { align-items: flex-start; }
.footer__note { margin-top: 16px; color: var(--sky-200); }
.footer .eyebrow-text { color: var(--sky-200); margin-bottom: 16px; }
.footer ul { display: grid; gap: 8px; }
.footer ul a:hover { color: var(--accent-300); }
.footer__legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--navy-700); color: var(--sky-200); }
.footer__wordmark {
  font: 500 clamp(64px, 15vw, 220px)/.8 var(--f-display); letter-spacing: -.05em; color: var(--navy-700);
  white-space: nowrap; text-align: center; margin: 24px 0 -.14em; user-select: none;
}

.sticky-cta { display: none; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }


/* Responsive composition: preserve imagery and reading order on small screens. */
@media (min-width:1600px) { .hero__title { font-size:195px; } }
@media (max-width:1200px) {
  .nav__phone { display:none; }
  .nav__links { gap:20px; }
  .hero__mission { font-size:12px; width:195px; }
  .mini-card { width:92px; height:104px; padding:15px; }
  .strip__grid { grid-template-columns:2fr 1fr 1fr 1fr; }
  .block { padding:25px; }
  .block p { max-width:220px; }
  .explore__grid { grid-template-columns:100px 1fr 210px; gap:25px; }
}
@media (max-width:1024px) {
  :root { --gutter:32px; --section:90px; }
  .nav { padding:0 24px; inset:18px 0 auto; }
  .nav__links { display:none; }
  .nav__burger { display:block; }
  .hero__frame { min-height:650px; }
  .hero__person { width:100%; height:88%; }
  .hero__mission { top:25%; left:5%; max-width:180px; }
  .hero__cards { top:28%; right:4%; flex-direction:column; }
  .mini-card { width:85px; height:86px; font-size:9px; }
  .hero__title { bottom:9%; }
  .block { min-height:340px; padding:20px; }
  .block--sky .block__title { font-size:23px; }
  .block--navy .block__title,.block--accent .block__title { font-size:15px; }
  .block--navy p,.block--accent p { font-size:10px; }
  .cards-3 { gap:25px; }
  .why__grid { gap:0; grid-template-columns:1.2fr 1fr; }
  .why__media { margin-right:-100px; }
  .why__media img { height:420px; }
  .explore__grid { grid-template-columns:1fr 200px; max-width:800px; }
  .explore__grid > .eyebrow-text { grid-column:1/-1; }
  .explore__title { margin-bottom:35px; }
  .t-card__body { padding:32px; }
  .t-slide .h2 { font-size:23px; }
  .about__grid { gap:60px; }
  .faq__grid { gap:40px; }
  .contact__grid { gap:30px; }
  .footer__grid { grid-template-columns:1fr 1fr; row-gap:40px; }
  .footer__grid > div:first-child { grid-column:1/-1; }
}
@media (max-width:640px) {
  :root { --gutter:22px; --section:70px; }
  html { scroll-padding-top:100px; }
  .nav { padding:0 14px; inset:14px 0 auto; }
  .nav__bar { padding:10px 10px 10px 15px; gap:10px; }
  .nav__actions { gap:8px; }
  .nav__cta { display:inline-flex; padding:11px 13px; font-size:8px; }
  .logo__svg { height:40px; }
  .nav__burger { width:38px; height:38px; }
  .nav__burger span { left:10px; right:10px; }
  .nav__burger span:first-child { top:15px; }
  .nav__burger span:last-child { top:21px; }
  .hero__frame { height:740px; min-height:0; max-height:960px; }
  .hero__person { height:74%; width:150%; max-width:none; bottom:-1%; left:45%; }
  .hero__mission { top:113px; left:24px; width:210px; font-size:12px; }
  .hero__mission span { margin-top:13px; font-size:7px; max-width:180px; }
  .hero__mission br { display:none; }
  .hero__cards { top:118px; right:20px; gap:6px; }
  .mini-card { width:70px; height:72px; padding:10px; font-size:8px; border-radius:8px; }
  .mini-card svg { width:15px; height:15px; }
  .hero__title { bottom:44px; left:20px; width:calc(100% - 40px); white-space:normal; text-align:left; font-size:clamp(58px,16.2vw,100px); line-height:.92; letter-spacing:-.06em; }
  .hero__down { right:25px; bottom:26px; font-size:24px; }
  .hero__stroke { height:100%; }
  .stroke path,.hero__stroke path { stroke-width:5px; }
  .intro { padding:85px 27px; }
  .intro h2 { font-size:26px; line-height:1.2; }
  .intro__inner::before { width:135px; height:135px; }
  .strip__grid { grid-template-columns:1fr 1fr; }
  .block { border-radius:0; min-height:265px; padding:23px; gap:12px; }
  .block__title,.block--sky .block__title { font-size:21px; }
  .block--sky .eyebrow { font-size:7px; }
  .block--sky p { font-size:10px; max-width:120px; }
  .block--navy .block__title,.block--accent .block__title { font-size:22px; }
  .block--navy p,.block--accent p { font-size:12px; }
  .block .btn { font-size:8px; padding:9px 11px; margin:0 0 15px; }
  .block__num { font-size:66px; right:14px; }
  .block--sky::after { border-width:5px; right:-215px; }
  .section-head { margin-bottom:35px; }
  .cards-3 { grid-template-columns:1fr; gap:35px; }
  .svc-card { display:grid; grid-template-columns:105px 1fr; gap:9px 20px; }
  .svc-card__art { grid-row:1/4; height:130px; align-self:center; }
  .svc-card__art .obj { width:110px; height:120px; }
  .svc-card__art .obj--spray { width:70px; margin:auto; }
  .svc-card .h3 { max-width:none; font-size:20px; }
  .svc-card p { font-size:12px; line-height:1.6; }
  .svc-card .tag { justify-self:start; }
  .why { padding:65px 0 0; }
  .why__grid { grid-template-columns:1fr; }
  .why__title { font-size:32px; margin-bottom:30px; }
  .benefits { gap:26px 20px; }
  .benefits strong { font-size:13px; }
  .benefits span { font-size:11px; }
  .why__media { margin:-10px -45px -10px 60px; }
  .why__media img { height:340px; }
  .why__stroke { inset:-10px 0 0 -70px; height:100%; }
  .explore__title { white-space:normal; font-size:16.3vw; text-align:left; line-height:.95; margin:0 0 38px; }
  .explore__grid { grid-template-columns:1fr; gap:24px; }
  .explore__grid > .eyebrow-text { font-size:8px; }
  .explore__list button { font-size:31px; padding:5px 0; }
  .explore__list button:hover,.explore__list button.is-active { transform:translateX(10px); }
  .explore__media { display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:center; }
  .explore__media img { aspect-ratio:1; }
  .explore__media figcaption { margin:0; }
  .explore__cta { margin-top:27px; }
  .t-card { grid-template-columns:1fr; }
  .t-card__media { min-height:330px; }
  .t-card__body { padding:30px 24px; }
  .t-slide .h2 { font-size:25px; }
  .seals { flex-wrap:wrap; gap:16px 24px; justify-content:flex-start; font-size:10px; }
  .marquee { padding:25px 0; }
  .marquee__track span { font-size:32px; }
  .marquee__icon { width:28px; height:28px; }
  .about__grid { gap:30px; grid-template-columns:1fr; }
  .about__left h2 { font-size:32px; }
  .about img { aspect-ratio:1.15; }
  .about__right img { display:none; }
  .about__right p { margin:0 0 20px; }
  .how { padding-top:0; }
  .steps { gap:22px; }
  .step { grid-template-columns:1fr; padding:30px 25px 15px; min-height:400px; }
  .step > div { max-width:230px; padding-top:72px; }
  .step .h3 { font-size:23px; max-width:195px; }
  .step p { font-size:12px; }
  .step .numeral { font-size:72px; left:25px; top:22px; opacity:.8; }
  .step__obj { height:180px; width:220px; }
  .step__obj.obj--spray { height:180px; }
  .numbers { padding:0 0 60px; }
  .numbers__grid { padding:0 12px; }
  .stat { gap:12px; padding:10px; }
  .stat .numeral { font-size:42px; }
  .stat .body-sm { font-size:10px; line-height:1.5; }
  .gallery__head { display:block; margin-bottom:28px; }
  .gallery__head h2 { font-size:53px; }
  .gallery__head p { margin-top:25px; font-size:13px; }
  .gallery__grid { grid-template-columns:1fr; gap:35px; }
  .gallery__grid img { aspect-ratio:1.3; }
  .faq__grid { grid-template-columns:1fr; gap:35px; }
  .faq__photo img { aspect-ratio:1.1; }
  .accordion > .h1 { font-size:32px; }
  .accordion summary { font-size:15px; }
  .contact__mail { font-size:10.2vw; margin:24px 0 40px; }
  .contact__grid { grid-template-columns:1fr; gap:40px; }
  .form { grid-template-columns:1fr; padding:22px; }
  .form .btn { justify-self:stretch; }
  .tips__head { display:block; }
  .tips__head h2 { font-size:27px; }
  .tips__head .btn { margin-top:25px; }
  .tips__grid { grid-template-columns:1fr; gap:40px; }
  .tips__grid img { margin-bottom:18px; }
  .footer { padding:55px 0 90px; }
  .footer__grid { grid-template-columns:1fr; gap:30px; }
  .footer__grid > div:first-child { grid-column:auto; }
  .footer__legal { margin-top:35px; font-size:10px; }
  .footer__wordmark { font-size:15vw; margin-top:35px; }
  .sticky-cta { display:inline-flex; position:fixed; z-index:30; left:20px; right:20px; bottom:16px; padding:16px 22px; box-shadow:0 6px 24px rgb(2 0 104 / 20%); transition:transform .3s,opacity .3s; }
  .sticky-cta.is-hidden { transform:translateY(140%); opacity:0; pointer-events:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .js .reveal { opacity:1; transform:none; }
}

/* Motion & material: lightweight CSS, native SVG grain, no video. */
.reading-progress { position:fixed; inset:0 0 auto; height:3px; z-index:100; pointer-events:none; background:linear-gradient(90deg,var(--sky-500),var(--accent-300)); transform:scaleX(0); transform-origin:left; }
.hero__frame { isolation:isolate; }
.hero__frame::before { content:''; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 18% 20%,color-mix(in srgb,var(--white) 42%,transparent),transparent 48%),radial-gradient(ellipse at 90% 80%,color-mix(in srgb,var(--sky-200) 35%,transparent),transparent 45%); }
.hero__frame::after,.why::after,.tips::before,.footer::before { content:''; position:absolute; inset:0; background:url('assets/grain.png') repeat; background-size:160px; opacity:.07; pointer-events:none; z-index:6; }
.tips,.footer { position:relative; isolation:isolate; }
.tips::before { opacity:.06; z-index:0; }
.footer::before { opacity:.17; }
.hero__atmosphere { position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.bubble { position:absolute; display:block; width:var(--size); height:var(--size); border:1px solid color-mix(in srgb,var(--white) 65%,transparent); border-radius:50%; background:radial-gradient(circle at 28% 23%,color-mix(in srgb,var(--white) 65%,transparent),transparent 19%),radial-gradient(circle at 65% 75%,transparent 40%,color-mix(in srgb,var(--white) 22%,transparent)); box-shadow:inset -5px -6px 12px color-mix(in srgb,var(--sky-100) 15%,transparent),0 12px 30px color-mix(in srgb,var(--navy-900) 5%,transparent); animation:bubble-drift var(--duration,9s) ease-in-out infinite alternate; animation-play-state:paused; }
.bubble--one { --size:82px; left:8%; top:19%; --duration:9s; }
.bubble--two { --size:38px; left:29%; top:29%; --duration:7s; animation-delay:-3s; }
.bubble--three { --size:125px; right:4%; bottom:12%; --duration:11s; animation-delay:-5s; }
.bubble--four { --size:28px; right:22%; top:19%; --duration:8s; animation-delay:-2s; }
.shine-star { position:absolute; color:var(--accent-300); font-size:35px; animation:shine-turn 8s ease-in-out infinite; animation-play-state:paused; }
.shine-star--one { top:25%; right:15%; }
.shine-star--two { bottom:22%; left:9%; font-size:25px; animation-delay:-4s; }
.hero__title { overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.hero__title span { display:inline-block; animation:title-arrive 1.1s var(--ease) both; }
.hero__title span:last-child { animation-delay:.14s; }
.hero__person { animation:person-arrive 1.4s var(--ease) both; translate:var(--hero-x,0px) calc(var(--hero-y,0px) + var(--hero-scroll,0px)); transition:translate .5s var(--ease); }
.hero__mission,.hero__cards { animation:copy-arrive 1s .3s var(--ease) both; }
.hero__stroke path { animation:line-arrive 1.8s .15s var(--ease) both; }
.hero__down { width:42px; height:42px; display:grid; place-items:center; border:1px solid color-mix(in srgb,var(--white) 45%,transparent); border-radius:50%; animation:scroll-nudge 3s ease-in-out infinite; animation-play-state:paused; }
.motion-visible .bubble,.motion-visible .shine-star,.motion-visible .hero__down { animation-play-state:running; }
.intro__inner::before { background:radial-gradient(circle at 30% 25%,var(--sky-100),var(--sky-200) 70%); box-shadow:0 0 70px color-mix(in srgb,var(--sky-200) 40%,transparent); animation:soft-orbit 12s ease-in-out infinite; animation-play-state:paused; }
.motion-visible .intro__inner::before { animation-play-state:running; }
.why__media img,.step__obj { animation:object-drift 7s ease-in-out infinite; animation-play-state:paused; }
.motion-visible .why__media img,.motion-visible .step__obj { animation-play-state:running; }
.step:nth-child(2) .step__obj { animation-delay:-2.5s; }
.step:nth-child(3) .step__obj { animation-delay:-5s; }
.marquee__track { animation-play-state:paused; }
.marquee.motion-visible .marquee__track { animation-play-state:running; }
.marquee:hover .marquee__track { animation-play-state:paused; }
.js .reveal { transform:translateY(32px); transition:opacity .85s var(--ease),transform .85s var(--ease); transition-delay:var(--reveal-delay,0ms); }
.js .reveal.is-in,.js .reveal:focus-within { opacity:1; transform:none; }
.photo-frame { overflow:hidden; border-radius:10px; }
.photo-frame img { transition:transform .9s var(--ease); }
.tips__grid .photo-frame { margin-bottom:25px; }
.tips__grid .photo-frame img { margin-bottom:0; border-radius:0; }
.gallery__grid figcaption { transition:color .25s; }
.btn { position:relative; overflow:hidden; isolation:isolate; translate:var(--magnet-x,0px) var(--magnet-y,0px); transition:translate .3s var(--ease),background-color .25s,box-shadow .25s; }
.btn::after { content:''; position:absolute; inset:-50% -30%; pointer-events:none; background:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--white) 24%,transparent) 48%,transparent 61%); transform:translateX(-100%); transition:transform .65s var(--ease); }
.btn:hover::after,.btn:focus-visible::after { transform:translateX(100%); }
.btn:hover { box-shadow:0 7px 20px color-mix(in srgb,var(--navy-900) 13%,transparent); }
.nav__bar { transition:box-shadow .4s,background-color .4s; }
.nav.is-scrolled .nav__bar { background:color-mix(in srgb,var(--white) 97%,transparent); box-shadow:0 8px 28px color-mix(in srgb,var(--navy-900) 9%,transparent); }
.step { border:1px solid color-mix(in srgb,var(--sky-200) 35%,transparent); }
.explore__list button::after { content:'↗'; display:inline-block; font-size:.65em; margin-left:15px; opacity:0; transform:translate(-8px,5px); transition:opacity .25s,transform .3s; }
.explore__list button:is(:hover,:focus-visible,.is-active)::after { opacity:1; transform:none; }
.explore__media img { transition:opacity .18s,transform .5s var(--ease); }
.explore__media img.is-swapping { transform:translateY(8px) scale(.98); }
.t-slide { transform:translateY(12px); transition:opacity .4s,transform .4s var(--ease),visibility .4s; }
.t-slide.is-active { transform:none; }
.footer__wordmark { transition:color .8s; }
.footer:hover .footer__wordmark { color:color-mix(in srgb,var(--navy-700) 75%,var(--sky-200)); }
.motion-toggle { position:fixed; left:18px; bottom:20px; z-index:35; display:flex; align-items:center; gap:9px; height:38px; padding:0 13px; border:1px solid var(--line); border-radius:50px; color:var(--navy-900); background:color-mix(in srgb,var(--white) 94%,transparent); box-shadow:0 3px 16px color-mix(in srgb,var(--navy-900) 8%,transparent); font:500 10px/1 var(--f-body); }
.motion-toggle[hidden] { display:none; }
.motion-toggle__icon { width:9px; height:11px; border-inline:3px solid currentColor; }
.motion-toggle[aria-pressed='true'] .motion-toggle__icon { width:0; height:0; border:6px solid transparent; border-right:0; border-left:9px solid currentColor; }
@keyframes title-arrive { from { opacity:0; transform:translateY(105%) rotate(3deg); } to { opacity:1; transform:translateY(0) rotate(0); } }
@keyframes person-arrive { from { opacity:0; scale:1.035; } to { opacity:1; scale:1; } }
@keyframes copy-arrive { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
@keyframes line-arrive { from { stroke-dasharray:1 1800; stroke-dashoffset:500; opacity:0; } to { stroke-dasharray:1800 1800; stroke-dashoffset:0; opacity:1; } }
@keyframes bubble-drift { to { transform:translate3d(12px,-28px,0) rotate(12deg); } }
@keyframes shine-turn { 0%,100% { transform:scale(.8) rotate(0); opacity:.5; } 50% { transform:scale(1.1) rotate(90deg); opacity:1; } }
@keyframes scroll-nudge { 0%,100% { translate:0 0; } 50% { translate:0 6px; } }
@keyframes soft-orbit { 0%,100% { rotate:-8deg; scale:1; } 50% { rotate:8deg; scale:1.08; } }
@keyframes object-drift { 0%,100% { translate:0 0; rotate:-1deg; } 50% { translate:0 -12px; rotate:1deg; } }
@media (hover:hover) and (pointer:fine) {
  .gallery__grid figure:hover img,.tips__grid article:hover img { transform:scale(1.045); }
  .gallery__grid figure:hover figcaption { color:var(--sky-700); }
  .svc-card__art .obj { transition:transform .6s var(--ease); }
  .svc-card:hover .obj { transform:translateY(-9px) rotate(-6deg); }
  .block__num { transition:translate .5s var(--ease); }
  .block:hover .block__num { translate:0 -8px; }
}
@media (max-width:640px) {
  .bubble--one { --size:48px; left:53%; top:13%; }
  .bubble--two,.bubble--four,.shine-star--two { display:none; }
  .bubble--three { --size:75px; bottom:13%; right:-20px; }
  .shine-star--one { top:38%; right:13%; font-size:24px; }
  .hero__down { width:34px; height:34px; }
  .explore__list button::after { font-size:.5em; margin-left:8px; }
  .tips__grid .photo-frame { margin-bottom:18px; }
  .motion-toggle { bottom:82px; left:20px; width:34px; height:34px; padding:0; justify-content:center; }
  .motion-toggle__label { display:none; }
}
html[data-motion='paused'] *,html[data-motion='paused'] *::before,html[data-motion='paused'] *::after { animation:none !important; transition:none !important; }
html[data-motion='paused'] { scroll-behavior:auto; }
html[data-motion='paused'] .reveal { opacity:1; transform:none; }
html[data-motion='paused'] .hero__person,html[data-motion='paused'] .btn { translate:none; }
html[data-motion='paused'] .t-slide.is-active { transform:none; }
html[data-motion='paused'] .photo-frame img { transform:none; }
html[data-page-hidden] *,html[data-page-hidden] *::before,html[data-page-hidden] *::after { animation-play-state:paused !important; }
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .hero__person,.btn { translate:none !important; }
  .photo-frame img,.js .reveal { transform:none !important; }
  .js .reveal { opacity:1; }
  .motion-toggle { display:none; }
}

/* ==========================================================================
   Experience v2 — section transitions, smooth scroll, texture, cursor
   (experience.js adds the classes; everything turns off with paused/reduced motion)
   ========================================================================== */

/* ---------- Texture: dotted paper + fixed film grain ---------- */
body {
  background-color: var(--white);
  background-image: url('assets/grain-soft.png'), radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--navy-900) 8%, transparent) 1px, transparent 0);
  background-size: 180px 180px, 24px 24px;
}
.featured, .how, .contact, .about, .faq { position: relative; }
.featured, .how, .contact, .explore, .why, .hero { overflow-x: clip; }
.featured::before, .how::before, .contact::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none; width: 520px; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--sky-200) 38%, transparent), transparent 68%);
}
.featured::before { top: 4%; right: -160px; }
.how::before { top: 30%; left: -220px; }
.contact::before { bottom: 0; right: -180px; background: radial-gradient(circle, color-mix(in srgb, var(--accent-300) 34%, transparent), transparent 68%); }
main { position: relative; z-index: 0; overflow-x: clip; }

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Intro curtain (first visit per session) ---------- */
.intro-curtain { display: none; }
html.has-intro .intro-curtain {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 400; pointer-events: none;
  background: linear-gradient(160deg, var(--sky-400), var(--sky-500) 55%, var(--sky-700));
}
html.has-intro.is-loaded .intro-curtain { animation: curtain-lift .95s .45s cubic-bezier(.76, 0, .24, 1) forwards; }
html.has-intro .intro-curtain::after { content: ''; position: absolute; inset: 0; background: url('assets/grain.png'); background-size: 180px; opacity: .12; }
.intro-curtain__logo { position: relative; z-index: 1; --logo-script: var(--white); --logo-sub: var(--white); --logo-heart: var(--white); animation: curtain-logo .7s var(--ease) both; }
.intro-curtain__logo .logo__svg { height: clamp(110px, 18vw, 200px); }
.intro-curtain__logo .logo-heart { transform-box: fill-box; transform-origin: 50% 100%; animation: heart-pop .55s .45s cubic-bezier(.34, 1.56, .64, 1) both; }
.intro-curtain__logo .logo-sub { animation: copy-arrive .7s .35s var(--ease) both; }
@keyframes curtain-lift { to { transform: translateY(-104%); border-radius: 0 0 50% 50% / 0 0 22% 22%; } }
@keyframes curtain-logo { from { opacity: 0; transform: translateY(24px) scale(.96); } }
@keyframes heart-pop { from { transform: scale(0); } }
html.has-intro .hero__title span { animation-delay: 1s; }
html.has-intro .hero__title span:last-child { animation-delay: 1.14s; }
html.has-intro .hero__person { animation-delay: .75s; }
html.has-intro .hero__mission, html.has-intro .hero__cards { animation-delay: 1.25s; }
html.has-intro .hero__stroke path { animation-delay: .95s; }
html.has-intro .nav { animation: nav-drop .8s 1.1s var(--ease) both; }
/* Hero entrance waits (paused) until the preloader finishes */
html.has-intro:not(.is-loaded) :is(.hero__title span, .hero__person, .hero__mission, .hero__cards, .hero__stroke path, .nav) { animation-play-state: paused; }
@keyframes nav-drop { from { opacity: 0; translate: 0 -24px; } }

/* ---------- Headings: words rise out of a mask ---------- */
.split .w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: 0 .04em .14em; margin: 0 -.04em -.14em; }
.js .split .w__i { display: inline-block; transform: translateY(112%) rotate(4deg); transform-origin: left bottom; transition: transform 1s var(--ease) calc(var(--wi) * 38ms); }
.js .split.is-shown .w__i { transform: none; }

/* ---------- Image curtains ---------- */
.js .curtain { clip-path: inset(100% 0 0 0); transition: clip-path 1.25s cubic-bezier(.7, 0, .2, 1); }
.js .curtain.is-shown { clip-path: inset(0); }
.js .photo-frame.curtain img { scale: 1.18; transition: scale 1.8s var(--ease), transform .9s var(--ease); }
.js .photo-frame.curtain.is-shown img { scale: 1; }
.gallery__grid figure:nth-child(2) .curtain { transition-delay: .12s; }
.gallery__grid figure:nth-child(3) .curtain { transition-delay: .24s; }

/* ---------- Counters + footer wordmark ---------- */
.stat .numeral { font-variant-numeric: tabular-nums; }
.footer__wordmark span { display: inline-block; }
.js .footer__wordmark span { transform: translateY(70%); opacity: 0; transition: transform 1.1s var(--ease) calc(var(--li) * 40ms), opacity .8s calc(var(--li) * 40ms); }
.js .footer__wordmark.is-shown span { transform: none; opacity: 1; }

/* ---------- Marquee leans with scroll velocity ---------- */
.marquee { transform: skewX(var(--skew, 0deg)); }

/* ---------- Scroll-driven transitions (Chrome, Edge, Safari 26+) ---------- */
@supports (animation-timeline: view()) {
  /* Coloured sections unfold from a rounded card to full width as they arrive */
  .why, .explore, .gallery, .tips {
    animation: section-unfold linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
  @keyframes section-unfold { from { scale: .93; translate: 0 40px; } to { scale: 1; translate: 0 0; } }
  /* Hero settles back as the page scrolls past it */
  .hero__frame { animation: hero-recede linear both; animation-timeline: scroll(root); animation-range: 0px 760px; }
  @keyframes hero-recede { to { scale: .94; } }
  .hero__title { animation: title-lift linear both; animation-timeline: scroll(root); animation-range: 0px 700px; }
  @keyframes title-lift { to { translate: 0 -70px; opacity: .2; } }
  /* Big titles drift sideways */
  .explore__title { animation: drift-x linear both; animation-timeline: view(); animation-range: entry 0% exit 30%; }
  @keyframes drift-x { from { translate: 9% 0; } to { translate: -5% 0; } }
  /* Intro paragraph lights up word by word */
  .scrub .ws { animation: word-scrub linear both; animation-timeline: view(); animation-range: cover calc(12% + var(--wi) * 1.1%) cover calc(26% + var(--wi) * 1.1%); }
  @keyframes word-scrub { from { opacity: .14; } }
  /* Step cards tilt in */
  .step { animation: step-in linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  @keyframes step-in { from { scale: .92; rotate: -1.5deg; opacity: .4; } }
  .step:nth-child(even) { animation-name: step-in-r; }
  @keyframes step-in-r { from { scale: .92; rotate: 1.5deg; opacity: .4; } }
}

/* ---------- Custom cursor ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor :is(input, textarea) { cursor: text !important; }
.has-cursor select { cursor: default !important; }
.cursor { position: fixed; inset: 0 auto auto 0; z-index: 350; pointer-events: none; transition: opacity .25s; }
.cursor.is-hidden, .cursor.is-text { opacity: 0; }
/* The arrow tip is the exact pointer position; only its name badge trails. */
.cursor__pointer, .cursor__badge { position: fixed; top: 0; left: 0; pointer-events: none; will-change: transform; }
.cursor__pointer { width: 36px; height: 43px; margin: -2px 0 0 -2px; }
.cursor__pointer svg { display: block; width: 100%; height: 100%; transform-origin: 2px 2px; transition: scale .2s var(--ease), rotate .2s var(--ease); }
.cursor__badge { margin: 45px 0 0 10px; display: flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid rgb(255 255 255 / 80%); border-radius: 8px; background: linear-gradient(135deg, var(--sky-700), var(--navy-900)); color: var(--white); box-shadow: 0 3px 0 var(--navy-900), 0 6px 12px rgb(2 0 104 / 18%); white-space: nowrap; }
.cursor__name { font: 600 12px/1 var(--f-body); }
.cursor__label { font: 500 9px/1 var(--f-body); color: var(--accent-300); }
.cursor__label:empty { display: none; }
.cursor__label:not(:empty) { border-left: 1px solid rgb(255 255 255 / 35%); padding-left: 7px; }
.cursor.is-link .cursor__pointer svg, .cursor.is-view .cursor__pointer svg { scale: 1.13; rotate: -7deg; }
.cursor.is-down .cursor__pointer svg { scale: .9; rotate: 0deg; }
html[data-motion='paused'] .cursor__pointer svg { transition: none; }
@media (prefers-reduced-motion: reduce) { .cursor__pointer svg { transition: none; } }
.cursor-spark {
  position: fixed; z-index: 349; pointer-events: none; translate: -50% -50%;
  color: var(--accent-500); font-size: 12px; line-height: 1; text-shadow: 0 0 6px rgb(255 255 255 / 90%);
  animation: spark .65s var(--ease) forwards;
}
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.3) rotate(120deg); opacity: 0; } }

/* ---------- Motion off: show everything in its final state ---------- */
html[data-motion='paused'] .intro-curtain { display: none; }
html[data-motion='paused'] .split .w__i,
html[data-motion='paused'] .footer__wordmark span { transform: none; opacity: 1; }
html[data-motion='paused'] .curtain { clip-path: none; }
html[data-motion='paused'] .photo-frame img { scale: 1; }
html[data-motion='paused'] .marquee { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-curtain { display: none !important; }
  .split .w__i, .footer__wordmark span { transform: none !important; opacity: 1 !important; }
  .curtain { clip-path: none !important; }
  .photo-frame img { scale: 1 !important; }
  .marquee { transform: none !important; }
}
@media (max-width: 640px) {
  @supports (animation-timeline: view()) {
    @keyframes section-unfold { from { scale: .96; translate: 0 24px; } to { scale: 1; translate: 0 0; } }
  }
  .featured::before, .how::before, .contact::before { width: 320px; }
}

/* ---------- Preloader: loading dots, then bubbles rise as the curtain lifts ---------- */
.intro-curtain__dots { display: flex; justify-content: center; gap: 8px; margin-top: 26px; transition: opacity .3s; }
.intro-curtain__dots i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, var(--white) 85%, transparent); box-shadow: inset -2px -2px 4px color-mix(in srgb, var(--sky-700) 35%, transparent); animation: dot-bob .9s ease-in-out infinite; }
.intro-curtain__dots i:nth-child(2) { animation-delay: .15s; }
.intro-curtain__dots i:nth-child(3) { animation-delay: .3s; }
html.is-loaded .intro-curtain__dots { opacity: 0; }
@keyframes dot-bob { 0%, 100% { transform: translateY(0) scale(.85); opacity: .6; } 50% { transform: translateY(-9px) scale(1); opacity: 1; } }

.preloader-bubbles { display: none; }
html.has-intro .preloader-bubbles { display: block; position: fixed; inset: 0; z-index: 410; pointer-events: none; overflow: hidden; }
.preloader-bubbles span {
  position: absolute; left: var(--x); bottom: calc(-1 * var(--s) - 20px); width: var(--s); height: var(--s); border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--white) 75%, transparent);
  background: radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--white) 85%, transparent), transparent 22%), radial-gradient(circle at 65% 72%, transparent 42%, color-mix(in srgb, var(--white) 30%, transparent));
  box-shadow: inset -4px -5px 10px color-mix(in srgb, var(--sky-200) 25%, transparent), 0 8px 24px color-mix(in srgb, var(--navy-900) 8%, transparent);
  opacity: 0;
}
html.has-intro.is-loaded .preloader-bubbles span { animation: bubble-rise var(--t) var(--d) cubic-bezier(.3, .6, .4, 1) forwards; }
@keyframes bubble-rise {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  12% { opacity: 1; }
  50% { transform: translate(var(--w), -60vh) scale(1); }
  85% { opacity: .9; }
  100% { opacity: 0; transform: translate(calc(var(--w) * -0.5), -120vh) scale(1.08); }
}
html[data-motion='paused'] .preloader-bubbles { display: none; }
@media (prefers-reduced-motion: reduce) { .preloader-bubbles { display: none !important; } }

/* ---------- Hero shade: keeps the title and mission legible over the photo ---------- */
.hero__shade {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 58%, transparent) 0%, color-mix(in srgb, var(--navy-900) 22%, transparent) 26%, transparent 50%),
    linear-gradient(90deg, color-mix(in srgb, var(--navy-900) 16%, transparent) 0%, transparent 32%);
}
.hero__mission { text-shadow: 0 1px 14px color-mix(in srgb, var(--navy-900) 35%, transparent); }
@media (max-width: 640px) {
  .hero__shade {
    background:
      linear-gradient(0deg, color-mix(in srgb, var(--navy-900) 62%, transparent) 0%, color-mix(in srgb, var(--navy-900) 25%, transparent) 30%, transparent 52%),
      linear-gradient(180deg, color-mix(in srgb, var(--navy-900) 34%, transparent) 0%, color-mix(in srgb, var(--navy-900) 12%, transparent) 22%, transparent 34%);
  }
  .hero__person { height: 84%; width: 170%; left: 46%; }
  .hero__mission { font-size: 13px; font-weight: 500; text-shadow: 0 1px 10px color-mix(in srgb, var(--navy-900) 55%, transparent), 0 0 2px color-mix(in srgb, var(--navy-900) 30%, transparent); }
  .hero__mission span { font-size: 8px; }
}

/* ---------- Ambient bubbles (experience.js builds .amb-field in each section) ---------- */
.has-bubbles { position: relative; isolation: isolate; }
.amb-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.amb-bubble {
  position: absolute; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sky-400) 55%, transparent);
  background:
    radial-gradient(circle at 30% 26%, color-mix(in srgb, var(--white) 95%, transparent), transparent 20%),
    radial-gradient(circle at 70% 76%, color-mix(in srgb, var(--white) 55%, transparent), transparent 14%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--sky-100) 30%, transparent) 40%, color-mix(in srgb, var(--sky-400) 30%, transparent));
  box-shadow: inset -4px -6px 12px color-mix(in srgb, var(--sky-400) 16%, transparent);
  animation: amb-float var(--fd) ease-in-out infinite alternate; animation-play-state: paused;
  transition: opacity .9s var(--ease), scale .9s var(--ease);
}
.amb-field.is-active .amb-bubble { animation-play-state: running; }
.amb-bubble.is-popped { opacity: 0; scale: 1.45; transition: opacity .22s ease-out, scale .22s ease-out; }
.why .amb-bubble, .footer .amb-bubble { border-color: color-mix(in srgb, var(--white) 60%, transparent); }
@keyframes amb-float {
  0% { translate: 0 0; rotate: -6deg; }
  50% { translate: var(--fx) calc(var(--fy) * .5); }
  100% { translate: calc(var(--fx) * -.5) var(--fy); rotate: 8deg; }
}
.amb-drop {
  position: fixed; z-index: 349; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; pointer-events: none;
  background: var(--white); box-shadow: 0 0 0 1px color-mix(in srgb, var(--sky-400) 55%, transparent);
  animation: amb-drop .5s var(--ease) forwards;
}
@keyframes amb-drop { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@supports (animation-timeline: view()) {
  /* Bubbles drift a little faster than the page for depth */
  .amb-field { animation: amb-parallax linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes amb-parallax { from { translate: 0 70px; } to { translate: 0 -70px; } }
}
@media (max-width: 640px) {
  .amb-bubble:nth-child(3n) { display: none; }
  .amb-bubble { width: calc(var(--s) * .7); height: calc(var(--s) * .7); margin: calc(var(--s) * -.35) 0 0 calc(var(--s) * -.35); }
}
html[data-motion='paused'] .amb-field { translate: none; }

/* ---------- Before / after comparison (gallery) ---------- */
.ba__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: 10px; touch-action: pan-y; }
.gallery__grid .ba .ba__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; }
.ba__after { clip-path: inset(0 0 0 var(--pos)); }
.ba__tag { position: absolute; top: 14px; z-index: 2; padding: 5px 10px; border-radius: 999px; font: 600 10px/1 var(--f-body); letter-spacing: .08em; text-transform: uppercase; }
.ba__tag--before { left: 14px; background: color-mix(in srgb, var(--navy-900) 75%, transparent); color: var(--white); }
.ba__tag--after { right: 14px; background: var(--white); color: var(--navy-900); }
.ba__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 2; width: 3px; margin-left: -1.5px; background: var(--white);
  box-shadow: 0 0 12px color-mix(in srgb, var(--navy-900) 30%, transparent); pointer-events: none;
}
.ba__handle svg {
  position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 11px; border-radius: 50%;
  background: var(--white); color: var(--navy-900); box-shadow: 0 6px 18px color-mix(in srgb, var(--navy-900) 22%, transparent);
}
.ba__range { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.ba__range:focus-visible ~ .ba__handle svg, .ba__frame:has(.ba__range:focus-visible) .ba__handle svg { outline: 2px solid var(--sky-500); outline-offset: 3px; }
.ba.is-hinting .ba__after, .ba.is-hinting .ba__handle { transition: clip-path .9s var(--ease), left .9s var(--ease); }

/* ---------- Recent work strip (opens the kit lightbox) ---------- */
.work-strip { margin-top: 56px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.work-strip__track { display: flex; gap: 14px; width: max-content; animation: marquee 60s linear infinite; animation-play-state: paused; }
.work-strip.is-active .work-strip__track { animation-play-state: running; }
.work-strip:hover .work-strip__track, .work-strip:focus-within .work-strip__track { animation-play-state: paused; }
.work-strip__item { flex: none; width: 180px; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; }
.work-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.work-strip__item:hover img { transform: scale(1.06); }
html[data-motion='paused'] .work-strip { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) { .work-strip { overflow-x: auto; } }
@media (max-width: 640px) {
  .work-strip { margin-top: 36px; }
  .work-strip__item { width: 130px; }
  .ba__frame { aspect-ratio: 1 / 1; }
}

/* ---------- Lightbox in brand colours ---------- */
.kit-lb { --kit-lb-bg: color-mix(in srgb, var(--navy-950) 94%, transparent); --kit-lb-accent: var(--sky-400); --kit-lb-radius: 12px; }

/* ==========================================================================
   Lite mode (html.perf-lite): set up front for low-end machines, or switched on
   by experience.js when scrolling drops frames. Same animations, fewer layers.
   ========================================================================== */
.perf-lite .amb-bubble:nth-child(n+3) { display: none; }
.perf-lite .amb-bubble { box-shadow: none; }
.perf-lite .amb-field { animation: none !important; translate: none; }
.perf-lite .scrub .ws { animation: none !important; }
.perf-lite .bubble--two, .perf-lite .bubble--four, .perf-lite .shine-star--two { display: none; }
.perf-lite .hero__person { transition: none; translate: none; }
.perf-lite .marquee { transform: none; }
.perf-lite .obj { filter: none; }
.perf-lite .hero__frame::after, .perf-lite .why::after, .perf-lite .tips::before, .perf-lite .footer::before { display: none; }
.perf-lite .work-strip__track { animation-duration: 90s; }