/* Clearcoat - detail studio HTML template
   All colours, fonts and sizes live in the tokens below: change them here, the whole site follows. */

:root {
  --bg: #0b0c0e;
  --surface: #131519;
  --ink: #eef0f2;
  --soft: #b4b9c0;
  --mute: #80868e;
  --dim: #2b2e33;
  --line: rgba(238, 240, 242, .12);
  --accent: #78d802; /* the green of the hero car */
  --on-accent: #0b0c0e;

  --font-title: 'Clash Display', 'Arial Narrow', sans-serif;
  --font-text: 'Satoshi', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --radius: 0;
  --gutter: clamp(20px, 4vw, 48px);
  --max: 1440px;
  --header-h: 72px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  /* every line of light on the site runs at this one angle (lamp, statement, photo wipes), so they are all parallel */
  --tilt: 100deg;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.6 var(--font-text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: var(--on-accent); }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: var(--on-accent); }
.skip:focus { top: 16px; }

/* type */
.label { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.title-xl, .title-lg, .title-md { font-family: var(--font-title); font-weight: 600; letter-spacing: -.02em; line-height: .95; }
.title-xl { font-size: clamp(52px, 10vw, 168px); }
.title-lg { font-size: clamp(38px, 5.6vw, 88px); }
.title-md { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.05; }
.lead { color: var(--soft); max-width: 34em; }

.btn { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px;
       border: 1px solid var(--accent); border-radius: var(--radius); color: var(--on-accent); font: 500 13px/1 var(--font-mono); letter-spacing: .06em;
       text-transform: uppercase; text-decoration: none; cursor: pointer;
       /* a coated surface: light on the top edge, a darker lip at the bottom, a soft glow under it */
       background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0) 46%, rgba(0,0,0,.16)), var(--accent);
       box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.22), 0 2px 0 rgba(0,0,0,.45), 0 10px 24px -10px var(--accent);
       transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s, color .25s; }
/* on hover the lamp passes over the button once, at the same angle as every other light line */
.btn::after { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; transform: translateX(-130%);
              background: linear-gradient(var(--tilt), transparent 30%, rgba(255,255,255,.6) 48%, rgba(255,255,255,.15) 54%, transparent 68%); }
.btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.22), 0 4px 0 rgba(0,0,0,.45), 0 16px 30px -12px var(--accent); }
.btn:hover::after { transform: translateX(130%); transition: transform .9s var(--ease); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 0 rgba(0,0,0,.45), 0 6px 14px -10px var(--accent); }
/* ghost buttons, the menu button and back to top: smoked glass with the same edges */
.btn-ghost, .menu-btn, .to-top { color: var(--ink); border-color: rgba(238, 240, 242, .16);
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.02) 50%, rgba(0,0,0,.2)), rgba(11, 12, 14, .55);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -1px 0 rgba(0,0,0,.5), 0 2px 0 rgba(0,0,0,.45); }
.btn-ghost:hover, .menu-btn:hover { border-color: rgba(238, 240, 242, .34); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.5), 0 4px 0 rgba(0,0,0,.45), 0 14px 28px -14px rgba(0,0,0,.8); }
.btn-sm { min-height: 40px; padding: 0 16px; }
.link { font: 500 13px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.link:hover { color: var(--accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* header */
.header { position: fixed; inset: 0 0 auto; z-index: 20; height: var(--header-h); display: flex; align-items: center; gap: 32px; padding: 0 var(--gutter);
          transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; }
.header.is-scrolled { background: rgba(11, 12, 14, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--line); }
.logo { display: flex; flex-direction: column; font: 600 22px/1 var(--font-title); letter-spacing: -.02em; text-decoration: none; }
.js [data-gaps] { font-kerning: none; letter-spacing: 0; }
[data-gaps] span { display: inline-block; }
.logo small { font: 500 10px/1.6 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.nav-links { display: flex; gap: 28px; margin-left: auto; }
.nav-links a { font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--soft); transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--ink); }
.nav-links a[aria-current] { box-shadow: 0 1px 0 var(--accent); }
.menu-btn { display: none; margin-left: auto; min-height: 40px; padding: 0 16px; border: 1px solid; border-radius: var(--radius);
            font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.menu { position: fixed; inset: 0; z-index: 19; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding: calc(var(--header-h) + 24px) var(--gutter) 40px; background: var(--bg); }
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font: 600 clamp(40px, 11vw, 72px)/1.08 var(--font-title); letter-spacing: -.02em; text-decoration: none; color: var(--soft); }
.menu nav a:hover { color: var(--ink); }
.menu nav a[aria-current] { color: var(--accent); }
.menu .btn { align-self: flex-start; }
@media (max-width: 960px) {
  .nav-links, .header-book { display: none; }
  .menu-btn { display: inline-flex; align-items: center; }
}

/* intro (once per visit): a black screen with the studio name cut out of it, the blurred hero shows through the letters.
   The black then lifts away upwards while the letters stay put, and the hero comes into focus. */
.intro { display: none; }
.motion .intro { display: block; position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.intro svg { display: block; width: 100%; height: 100%; }
.intro text { font-family: var(--font-title); font-weight: 600; }
.intro text.l { transform: translateX(var(--from, -100vw)); }
/* letter by letter from the left: a fast flight, a light knock into the letter already there, a small bounce back */
.intro svg.go text.l { animation: fly .5s var(--d, 0s) forwards; }
.intro svg.go .lg:not(.last) { animation: nudge .42s var(--nd, 0s) both; }
@keyframes fly {
  0% { transform: translateX(var(--from)); animation-timing-function: cubic-bezier(.35, .15, .75, .9); }
  72% { transform: translateX(var(--hit)); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  88% { transform: translateX(calc(var(--hit) * -.3)); }
  100% { transform: none; }
}
@keyframes nudge {
  0%, 100% { transform: none; }
  35% { transform: translateX(calc(var(--hit) * .7)); }
  70% { transform: translateX(calc(var(--hit) * -.15)); }
}
.intro-name { display: none; }
.intro.is-skipped { display: none; }
.intro-on .hero-img { filter: blur(10px) brightness(1.15); }
/* the hero's dark overlay (there for the text) waits until the intro is gone */
.hero::after { transition: opacity 1s var(--ease); }
.intro-on .hero::after { opacity: 0; }
.header { transition: opacity .8s var(--ease) .3s, background .3s, border-color .3s; }
.intro-on .hero-in, .intro-on .header, .intro-on .lamp { opacity: 0; }

/* hero: one soft band of light runs over the paint; the mouse moves it, on touch it sweeps by itself */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; isolation: isolate; }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,12,14,.55) 0%, rgba(11,12,14,0) 30%, rgba(11,12,14,.2) 55%, rgba(11,12,14,.92) 100%); }
.lamp { --lx: 50%; position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen;
        background: linear-gradient(var(--tilt), transparent calc(var(--lx) - 16%), rgba(255,255,255,.07) calc(var(--lx) - 5%), rgba(255,255,255,.22) var(--lx), rgba(255,255,255,.06) calc(var(--lx) + 4%), transparent calc(var(--lx) + 16%)); }
.motion .lamp.is-auto { animation: lamp 7s ease-in-out infinite alternate; }
@property --lx { syntax: '<percentage>'; inherits: false; initial-value: 50%; }
@keyframes lamp { from { --lx: 10%; } to { --lx: 90%; } }
.hero-in { width: 100%; max-width: var(--max); margin: 0 auto; padding: calc(var(--header-h) + 40px) var(--gutter) 40px; display: grid; gap: 20px; }
.hero-in .title-xl { max-width: 11ch; }
/* a soft dark glow behind the small hero texts, so they read on any part of the photo */
.hero-in .label, .hero-in .lead, .bay dd { text-shadow: 0 0 6px rgba(0,0,0,.9), 0 0 18px rgba(0,0,0,.8), 0 0 36px rgba(0,0,0,.6); }
.hero-in .title-xl { text-shadow: 0 0 24px rgba(0,0,0,.45), 0 0 70px rgba(0,0,0,.45), 0 0 140px rgba(0,0,0,.35); }
.hero-in .label { color: var(--soft); }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.bay { display: flex; gap: 1px; margin-top: 16px; border-top: 1px solid var(--line); padding-top: 16px; }
.bay div { flex: 1; }
.bay dd { font: 500 15px/1.4 var(--font-text); margin-top: 4px; }

/* sections */
section.wrap { padding-top: clamp(96px, 14vw, 200px); }
.section-head { display: grid; gap: 16px; margin-bottom: clamp(40px, 5vw, 72px); }
.section-head .title-lg { max-width: 14ch; }

/* statement: the inspection lamp passes over the text once, the paint behind it comes up clean */
.statement { display: grid; gap: 24px; }
.statement-text { font: 500 clamp(28px, 4.2vw, 64px)/1.12 var(--font-title); letter-spacing: -.02em; max-width: 22ch; }
.motion .statement-text { color: transparent; -webkit-background-clip: text; background-clip: text; background-size: 300% 100%; background-position: 100% 0;
  background-image: linear-gradient(var(--tilt), var(--ink) 0 38%, #fff 44%, var(--accent) 46.5%, #fff 49%, var(--dim) 55% 100%);
  transition: background-position 2.6s cubic-bezier(.45, .05, .25, 1); }
.motion .statement-text.is-in { background-position: 0 0; }
.statement-text .w { white-space: nowrap; }
.statement-text .ch { transition: color 1.6s var(--ease); }
.statement-text .ch.hot { color: var(--accent); transition: color 0s; }
/* the cursor over the statement: a ring of lamp light instead of the text cursor */
@media (pointer: fine) { .motion .statement-text { cursor: none; } }
.spot { position: fixed; left: -22px; top: -22px; z-index: 40; width: 44px; height: 44px; border-radius: 50%; pointer-events: none; opacity: 0;
        border: 1px solid var(--accent); background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent) 0 3px, transparent 4px),
        radial-gradient(circle, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%);
        box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 35%, transparent); transition: opacity .2s; }
.spot.on { opacity: 1; }

/* services: the word in the middle of the screen lights up, the photo beside it follows */
.services-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.services-body { display: grid; grid-template-columns: 1fr minmax(220px, 26vw); gap: clamp(24px, 5vw, 80px); align-items: start; }
.services-list a { display: grid; gap: 6px; padding: clamp(14px, 2vw, 24px) 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.services-name { font: 600 clamp(34px, 5.4vw, 84px)/1 var(--font-title); letter-spacing: -.02em; color: var(--ink); transition: color .35s, transform .5s var(--ease); }
.services-list:hover .services-name { color: var(--dim); }
.services-list a:hover .services-name, .services-list a:focus-visible .services-name { color: var(--ink); transform: translateX(12px); }
.services-meta { color: var(--accent); min-height: 1.4em; }
/* with a mouse the price only shows on hover (and types itself); on touch screens it is always there */
@media (hover: hover) {
  .services-meta { opacity: 0; transition: opacity .2s; }
  .services-list a:hover .services-meta, .services-list a:focus-visible .services-meta { opacity: 1; }
}
.services-thumb { position: sticky; top: calc(50vh - 17vw); aspect-ratio: 4 / 5; margin-top: 40px; overflow: hidden; border-radius: var(--radius); }
@media (max-width: 760px) {
  .services-body { grid-template-columns: 1fr; }
  .services-thumb { display: none; }
}

/* process: the same photo twice, sharp in a frame and blurred over the whole screen behind it */
.process { position: relative; margin-top: clamp(96px, 14vw, 200px); }
.motion .process { height: calc(var(--n, 4) * 100svh); }
.process-stage { padding: 64px 0; position: relative; overflow: hidden; }
.motion .process-stage { position: sticky; top: 0; height: 100svh; padding: 0; overflow: hidden; }
.process-stage { display: flex; align-items: center; }
.process-bg { position: absolute; inset: -40px; }
.process-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .7s; }
.motion .process-bg img { opacity: 0; }
.process-bg img { filter: blur(36px) brightness(.45) saturate(1.2); transform: scale(1.1); }
.motion .process-bg img.on { opacity: 1; }
.process-bar { display: none; }
.motion .process-bar { display: flex; gap: 6px; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 32px; max-width: calc(var(--max) - var(--gutter) * 2); margin: 0 auto; }
.process-bar i { flex: 1; height: 2px; background: var(--line); overflow: hidden; }
.process-bar i::before { content: ""; display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--f, 0)); }
.process-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 6vw, 96px); align-items: center; }
.process-frame { position: relative; aspect-ratio: 1 / 1; max-height: 70svh; width: 100%; overflow: hidden; border-radius: var(--radius); }
.process-steps { display: grid; gap: 40px; }
.motion .process-steps li { grid-area: 1 / 1; }
.process-steps li { display: grid; gap: 16px; align-content: center; max-width: 30em; }
.process-steps li p:last-child { color: var(--soft); }
.process-no { color: var(--accent); }
.motion .process-steps li { opacity: 0; transform: translateY(20px); transition: opacity .5s, transform .6s var(--ease); pointer-events: none; }
.motion .process-steps li.on { opacity: 1; transform: none; pointer-events: auto; }
@media (max-width: 760px) {
  .process-in { grid-template-columns: 1fr; align-content: center; }
  .process-frame { aspect-ratio: 4 / 3; max-height: 42svh; }
}

/* work: photos come in pixelated and sharpen, like a finish being polished */
.work-grid { display: grid; align-items: start; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px) clamp(16px, 3vw, 40px); }
.job { display: grid; gap: 16px; text-decoration: none; }
.job:nth-child(even) { margin-top: clamp(0px, 8vw, 120px); }
.job-img { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); }
/* parallax: the photo is a little taller than its frame and drifts inside it as the page scrolls */
.job-img img { width: 100%; height: 100%; object-fit: cover; transform: translateY(var(--py, 0)) scale(var(--hs, 1)); transition: --hs 1.2s var(--ease); }
.js .job-img img { position: absolute; left: 0; top: -9%; height: 118%; }
@property --hs { syntax: '<number>'; inherits: false; initial-value: 1; }
.job:hover .job-img img { --hs: 1.04; }
.job-meta { display: grid; gap: 4px; }
.job-meta .label:last-child { color: var(--accent); min-height: 1.4em; }
.job-title { font: 600 clamp(22px, 2vw, 30px)/1.1 var(--font-title); letter-spacing: -.01em; }
.work-more { margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 640px) {
  .work-grid { grid-template-columns: 1fr; }
  .job:nth-child(even) { margin-top: 0; }
}

/* packages */
.packages-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); }
.package { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 3vw, 40px); border-right: 1px solid var(--line); }
.package:last-child { border-right: 0; }
.package-main { background: var(--surface); box-shadow: inset 0 2px 0 var(--accent); }
.price { font: 600 clamp(34px, 3.4vw, 52px)/1 var(--font-title); letter-spacing: -.02em; }
.price .label { display: block; margin-bottom: 6px; }
.package ul { display: grid; gap: 10px; flex: 1; color: var(--soft); }
.package li { padding-left: 20px; position: relative; }
.package li::before { content: ""; position: absolute; left: 0; top: .7em; width: 8px; height: 1px; background: var(--accent); }
.package .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .packages-grid { grid-template-columns: 1fr; }
  .package { border-right: 0; border-bottom: 1px solid var(--line); }
  .package:last-child { border-bottom: 0; }
}

/* reviews */
.reviews { display: grid; gap: 40px; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.reviews blockquote p { font: 500 clamp(20px, 1.8vw, 26px)/1.3 var(--font-title); letter-spacing: -.01em; }
.reviews figcaption { display: grid; gap: 2px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } }

/* call to action */
.cta { display: grid; gap: 28px; padding-bottom: clamp(96px, 14vw, 200px); }
.cta .label { color: var(--accent); min-height: 1.4em; }

/* footer */
.footer { border-top: 1px solid var(--line); padding: 0 var(--gutter); }
.footer-top { max-width: var(--max); margin: 0 auto; padding: clamp(56px, 7vw, 96px) 0 48px; display: grid; gap: 48px; }
.footer-name { font: 600 clamp(64px, 17vw, 260px)/.8 var(--font-title); letter-spacing: -.04em; color: var(--dim); }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-cols p:not(.label) { margin-top: 10px; color: var(--soft); }
.footer-cols a { text-decoration: none; }
.footer-cols a:hover { color: var(--ink); }
.footer-bottom { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0 28px; border-top: 1px solid var(--line); }
.footer-bottom p { font: 500 12px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--mute); }
.footer-bottom a { text-decoration: none; }
@media (max-width: 760px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* photo swap (services, process): the new photo is wiped in along a slanted edge at the same angle as the lamp,
   a band of light rides that edge, the photo underneath dims as it is covered. --k (edge slant) is set by the script from the box size. */
@property --p { syntax: '<percentage>'; inherits: true; initial-value: 130%; }
.swipe { --k: 18%; }
.swipe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--z, 1)); }
.motion .swipe img { opacity: 0; }
.motion .swipe img.was { opacity: 1; z-index: 0; filter: brightness(.5); transition: filter 1.1s var(--ease); }
/* the left corners sit far outside the box, so before the wipe starts not even a hairline of the photo shows */
.motion .swipe img.on { opacity: 1; z-index: 1; clip-path: polygon(-60% 0, var(--p) 0, calc(var(--p) - var(--k)) 100%, -60% 100%); }
.swipe::after, .reveal::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.28) 80%, rgba(255,255,255,.7));
  clip-path: polygon(calc(var(--p) - 10%) 0, var(--p) 0, calc(var(--p) - var(--k)) 100%, calc(var(--p) - var(--k) - 10%) 100%); }
.swipe.run { animation: swipe 1.2s cubic-bezier(.65, .05, .25, 1) both; }
.swipe.run::after { animation: swipe-light 1.2s linear both; }
.reveal.run::after { animation: swipe-light 1.1s linear var(--rd, 0s) both; }
@keyframes swipe { from { --p: -3%; } to { --p: 130%; } }
/* every other photo frame on the site comes in with the same wipe, once, when it scrolls into view */
.reveal { --k: 18%; }
.motion .reveal:not(td):not(th) { position: relative; }
/* hidden with visibility (not with the clip) until it starts: a fully clipped element is never reported as "in view" by the browser */
.motion .reveal:not(.run) { visibility: hidden; }
.motion .reveal.run { clip-path: polygon(-60% 0, var(--p) 0, calc(var(--p) - var(--k)) 100%, -60% 100%); }
.motion .reveal.run { animation: swipe 1.1s cubic-bezier(.65, .05, .25, 1) var(--rd, 0s) both; }
.motion .reveal.done { clip-path: none; }
@keyframes swipe-light { 0% { opacity: 0; } 8%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* hero: the title's lines drive in from alternate sides, like the intro */
[data-drive] .ln { display: block; width: max-content; max-width: 100%; }
.motion [data-drive].measuring .ln { transition: none !important; }
.motion [data-drive] .ln { transform: translateX(var(--from, -110vw)); transition: transform .8s cubic-bezier(.12, .9, .16, 1) var(--d, 0s); }
.motion [data-drive].is-in .ln { transform: none; }
.motion [data-drive]:not(.is-in) { visibility: hidden; }
.motion [data-drive]:not(.is-in) .ln { visibility: visible; }
/* the small texts do not fly: they simply appear just after the title has braked, so the title stays the one movement */
/* no fade: they are simply there the moment the title has braked */
.motion .hero-foot { transition: visibility 0s .8s; }
.motion .hero-in:not(.is-in) .hero-foot { visibility: hidden; transition: none; }

/* service names: letter by letter like the intro logo (same flight and knock, see .intro) */
[data-fly] .w { white-space: nowrap; }
[data-fly] .fg, [data-fly] .fc { display: inline-block; }
.motion [data-fly]:not(.is-in) .fc { visibility: hidden; }
.motion [data-fly].is-in .fc { animation: fly .5s var(--d, 0s) both; }
.motion [data-fly].is-in .fg:not(.last) { animation: nudge .42s var(--nd, 0s) both; }
.motion .menu .btn:not(.is-in) { visibility: hidden; }
.motion .menu .btn.is-in:not(.done) { animation: fly .5s var(--d, 0s) both; }

/* labels type themselves */
.motion [data-type] .c { visibility: hidden; }
.motion [data-type] .c.on { visibility: visible; }

/* back to top: shown once you are a screen down, on every page taller than three screens */
.to-top { position: fixed; right: var(--gutter); bottom: 24px; z-index: 18; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid;
          border-radius: var(--radius); cursor: pointer;
          opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity .3s, transform .3s var(--ease), visibility .3s, background .25s, border-color .25s; }
.to-top.is-on { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.to-top svg { width: 18px; height: 18px; }

/* mail links copy the address too */
.copied-tip { position: fixed; z-index: 60; padding: 6px 10px; background: var(--ink); color: var(--bg); font: 500 11px/1 var(--font-mono); letter-spacing: .06em;
              text-transform: uppercase; pointer-events: none; transform: translate(-50%, -140%); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= inner pages ================= */

/* page head: label, big title, a short lead; optional wide photo under it */
.page-head { padding-top: calc(var(--header-h) + clamp(56px, 9vw, 140px)); display: grid; gap: 24px; }
.page-head:not(:has(.page-photo)) { min-height: 78svh; align-content: end; }
.page-head .title-xl { max-width: 12ch; }
.page-head .lead { font-size: clamp(17px, 1.4vw, 20px); }
.page-photo { margin-top: clamp(40px, 6vw, 88px); aspect-ratio: 21 / 9; overflow: hidden; position: relative; }
.page-photo img, .service-img img, .job-gallery img, .job-stack img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; transform: translateY(var(--py, 0)); }
@media (max-width: 640px) { .page-photo { aspect-ratio: 4 / 3; } }

/* text blocks */
.prose { display: grid; gap: 18px; color: var(--soft); max-width: 38em; }
.prose h2, .prose h3 { color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } }
.ticks { display: grid; gap: 10px; color: var(--soft); }
.ticks li { padding-left: 20px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .72em; width: 8px; height: 1px; background: var(--accent); }

/* services page: one block per service, photo and text swap sides */
.service-list { display: grid; gap: clamp(96px, 12vw, 180px); }
.service { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; scroll-margin-top: calc(var(--header-h) + 24px); }
.service:nth-child(even) .service-img { order: 2; }
.service-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.service-body { display: grid; gap: 22px; }
.service-body .actions { margin-top: 4px; }
.service-facts { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.service-facts div { flex: 1 1 120px; padding: 14px 16px 14px 0; }
.service-facts dd { font: 600 22px/1.2 var(--font-title); margin-top: 4px; }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; } .service:nth-child(even) .service-img { order: 0; } .service-img { aspect-ratio: 4 / 3; } }

/* work filter */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }
.chip { min-height: 40px; padding: 0 16px; border: 1px solid var(--line); border-radius: var(--radius); background: none; color: var(--soft); cursor: pointer;
        font: 500 12px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s; }
.chip:hover { color: var(--ink); border-color: rgba(238, 240, 242, .34); }
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.job[hidden] { display: none; }
.work-grid.is-filtered .job:nth-child(even) { margin-top: 0; }

/* job page */
.job-head { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 96px)); display: grid; gap: 20px; }
.job-head .title-xl { max-width: 14ch; }
.job-sheet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.job-sheet div { padding: 18px 20px; border-right: 1px solid var(--line); }
.job-sheet div:last-child { border-right: 0; }
.job-sheet dd { font: 600 clamp(18px, 1.6vw, 24px)/1.2 var(--font-title); margin-top: 6px; }
@media (max-width: 760px) { .job-sheet { grid-template-columns: 1fr 1fr; } .job-sheet div:nth-child(2) { border-right: 0; } .job-sheet div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }
.job-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
.job-gallery figure { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.job-gallery figure.wide { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .job-gallery { grid-template-columns: 1fr; } .job-gallery figure.wide { aspect-ratio: 4 / 3; } }
/* layout B: the facts stay put on the left while the photos scroll by on the right */
.job-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.job-split-side { position: sticky; top: calc(var(--header-h) + 32px); display: grid; gap: 24px; }
.job-split-side .job-sheet { grid-template-columns: 1fr 1fr; }
.job-split-side .job-sheet div:nth-child(2) { border-right: 0; }
.job-split-side .job-sheet div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
.job-stack { display: grid; gap: clamp(12px, 2vw, 24px); }
.job-stack figure { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.job-stack figure:first-child { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .job-split { grid-template-columns: 1fr; } .job-split-side { position: static; } }
.next-job { display: grid; gap: 12px; margin-top: clamp(96px, 12vw, 160px); padding: clamp(48px, 7vw, 96px) 0; border-top: 1px solid var(--line); text-decoration: none; }
.next-job .title-lg { transition: color .3s, transform .5s var(--ease); }
.next-job:hover .title-lg { color: var(--accent); transform: translateX(12px); }

/* packages page */
.table-wrap { overflow-x: auto; }
.compare { width: 100%; min-width: 560px; border-collapse: collapse; }
.compare th, .compare td { padding: 16px 12px; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.compare thead th { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
.compare thead th:not(:first-child), .compare td { text-align: center; width: 18%; }
.compare tbody th { color: var(--soft); }
/* phones: each row becomes a small block, the three packages side by side under its name */
@media (max-width: 640px) {
  .compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); padding: 14px 0; }
  .compare tbody th { grid-column: 1 / -1; border: 0; padding: 0 0 10px; color: var(--ink); }
  .compare td { width: auto; border: 0; padding: 0 4px; display: grid; gap: 6px; justify-items: center; align-content: start; font-size: 14px; }
  .compare td::before { content: attr(data-label); font: 500 10px/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); }
}
.yes { display: inline-block; width: 10px; height: 10px; background: var(--accent); }
.no { display: inline-block; width: 10px; height: 1px; background: var(--mute); vertical-align: middle; }
.addons { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.addons div { padding: 22px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: grid; gap: 6px; }
.addons strong { font: 600 20px/1.2 var(--font-title); }
.addons .label { color: var(--accent); }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 22px 0; font: 600 clamp(18px, 1.6vw, 24px)/1.3 var(--font-title); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 400 24px/1 var(--font-mono); color: var(--accent); transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; max-width: 46em; color: var(--soft); }

/* about page */
.numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.numbers div { padding: 24px 16px 0 0; display: grid; gap: 8px; }
.numbers strong { font: 600 clamp(40px, 5vw, 76px)/1 var(--font-title); letter-spacing: -.02em; }
@media (max-width: 760px) { .numbers { grid-template-columns: 1fr 1fr; row-gap: 32px; } }
.team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 40px); }
.team figure { display: grid; gap: 14px; }
.team .ph { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.team img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter .6s; }
.team figure:hover img { filter: none; }
.team figcaption { display: grid; gap: 2px; }
.team figcaption span:first-child { font: 600 22px/1.2 var(--font-title); }
@media (max-width: 760px) { .team { grid-template-columns: 1fr; } }

/* forms (booking, contact): our own fields, no browser bubbles or pickers */
.form { display: grid; gap: 28px; }
.field { display: grid; gap: 8px; }
.field label, .field legend { font: 500 12px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 0; }
.field input, .field textarea { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink);
  font: 400 18px/1.4 var(--font-text); outline: none; transition: border-color .2s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field input::placeholder, .field textarea::placeholder { color: var(--mute); }
.field.is-bad input, .field.is-bad textarea { border-color: #ff5a4f; }
.field-error { font: 500 12px/1.4 var(--font-mono); color: #ff7a70; min-height: 1.4em; }
.fields-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
@media (max-width: 640px) { .fields-2 { grid-template-columns: 1fr; } }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.pick { display: flex; flex-wrap: wrap; gap: 8px; }
.pick label { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick span { display: inline-flex; flex-direction: column; gap: 4px; min-height: 44px; justify-content: center; padding: 10px 16px; border: 1px solid var(--line);
  color: var(--soft); font: 500 13px/1.2 var(--font-mono); letter-spacing: .04em; text-transform: uppercase; transition: color .2s, border-color .2s, background .2s; }
.pick span small { font-size: 11px; color: var(--mute); text-transform: none; letter-spacing: 0; }
.pick label:hover span { border-color: rgba(238, 240, 242, .34); color: var(--ink); }
.pick input:checked + span { border-color: var(--accent); color: var(--ink); box-shadow: inset 0 0 0 1px var(--accent); }
.pick input:checked + span small { color: var(--accent); }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
.form-note { font: 500 12px/1.5 var(--font-mono); letter-spacing: .04em; color: var(--mute); }
.form-done { display: grid; gap: 16px; padding: 32px; border: 1px solid var(--accent); }
.form-done[hidden] { display: none; }

/* booking: four steps with a progress line and a summary beside them */
.book { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.steps-bar { display: none; }
.js .steps-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.steps-bar i { flex: 1; height: 2px; background: var(--line); transition: background .3s; }
.steps-bar i.on { background: var(--accent); }
.step-panel { display: grid; gap: 28px; border: 0; margin: 0; padding: 0; min-width: 0; }
.js .step-panel:not(.on) { display: none; }
.step-nav { display: none; }
.js .step-nav { display: flex; gap: 12px; flex-wrap: wrap; }
.summary { position: sticky; top: calc(var(--header-h) + 32px); border: 1px solid var(--line); padding: 24px; display: grid; gap: 14px; background: var(--surface); }
.summary dl { display: grid; gap: 12px; }
.summary dd { color: var(--ink); margin-top: 2px; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--line); font: 600 28px/1 var(--font-title); }
@media (max-width: 900px) { .book { grid-template-columns: 1fr; } .summary { position: static; } }

/* contact page */
.contact-side { display: grid; gap: 40px; }
.contact-big { display: grid; gap: 6px; font: 600 clamp(28px, 3.6vw, 56px)/1.1 var(--font-title); letter-spacing: -.02em; }
.contact-big a { text-decoration: none; transition: color .2s; overflow-wrap: anywhere; }
.contact-big a:hover { color: var(--accent); }
.map { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--line); display: block; text-decoration: none;
  background: linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 48px 48px, var(--surface); }
.map::before { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent), 0 0 0 24px color-mix(in srgb, var(--accent) 8%, transparent); }
.map span { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); white-space: nowrap; }
.map:hover span { color: var(--ink); }

/* 404 */
.lost { min-height: 100svh; display: grid; align-content: center; gap: 24px; padding-top: var(--header-h); padding-bottom: 64px; }
.lost-no { font: 600 clamp(120px, 30vw, 420px)/.8 var(--font-title); letter-spacing: -.04em; }