/* CP Luxury Car Detailing
   The chemistry lab. Black room, drifting red smoke, real element tiles, lab-notebook labels.
   One idea per screen. Square corners, hairlines, no cartoon.
   Generated into cp-luxury-site/assets by build.py. Edit this file, not the copy. */

@view-transition { navigation: auto; }

:root {
  --black: #070708;
  --ink-2: #101012;
  --ink-3: #18181b;
  --tile-a: #e01530;
  --tile-b: #7a0a17;
  --red: #c8102e;
  --red-lit: #ff4a5c;           /* red for small text on black: 6:1 */
  --hazmat: #f6c31c;
  --dim: rgba(255, 255, 255, .68);
  --faint: rgba(255, 255, 255, .34);
  --line: rgba(255, 255, 255, .13);
  --line-strong: rgba(255, 255, 255, .34);
  --tile: linear-gradient(150deg, var(--tile-a), var(--tile-b) 82%);

  --serif: 'Young Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Archivo', Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --gutter: clamp(20px, 4vw, 56px);
  --bar: 76px;
  --tab: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html.smooth { scroll-behavior: smooth; }   /* set after load, so a link to /work/#dc5 lands straight there */

html {
  overflow-x: hidden;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--bar) + 24px);
  background: var(--black);
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--black);
  color: #fff;
  font: 400 17px/1.62 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -.012em; }
h1 { font-size: clamp(2.9rem, 7.4vw, 7.2rem); line-height: 1.08; }
h2 { font-size: clamp(2.1rem, 4.6vw, 4.4rem); line-height: 1.08; }
h3 { font-size: clamp(1.5rem, 2.2vw, 2.1rem); line-height: 1.14; }
p { margin: 0; }
sub { font-size: .72em; line-height: 0; }

.wrap { max-width: 1640px; margin-inline: auto; padding-inline: var(--gutter); }

.label {
  display: block;
  font: 500 12.5px/1.4 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
}

.lede { max-width: 56ch; font-size: clamp(1.06rem, 1.4vw, 1.25rem); line-height: 1.58; color: var(--dim); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: #fff; color: var(--black);
}
.skip:focus { top: 12px; }

/* ---------------------------------------------------------- the element tile: the whole brand in one object.
   Inline-block, so its symbol sits on the same baseline as the word around it. */
.el {
  position: relative; display: inline-block; min-width: 1.24em;
  padding: .21em .11em .17em; margin-inline: .04em;
  font: 700 .76em/1 var(--sans); letter-spacing: -.03em; text-align: center; color: #fff;
  background: var(--tile);
  box-shadow: inset 0 0 0 max(1px, .03em) rgba(255, 255, 255, .88);
}
.el::after {
  content: attr(data-n); position: absolute; top: .17em; right: .2em;
  font: 500 .2em/1 var(--mono); letter-spacing: 0;
}

/* ---------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 54px; padding: 0 30px;
  border: 0; background: none; cursor: pointer;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transition: background-color .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), filter .3s var(--ease);
}
.btn-red { background: var(--tile); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78); }
.btn-red:hover { filter: brightness(1.18); }
.btn-line { box-shadow: inset 0 0 0 1px var(--line-strong); color: #fff; }
.btn-line:hover { background: #fff; color: var(--black); box-shadow: none; }

.more {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 0;
  font: 500 12.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.more::after { content: ''; width: 34px; height: 1px; background: currentColor; transition: width .4s var(--ease); }
.more:hover::after { width: 58px; }

/* ---------------------------------------------------------- top bar */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: var(--bar); padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--ease), border-color .4s var(--ease);
  view-transition-name: bar;
}
.bar.is-solid, .plain .bar { background: var(--black); border-bottom-color: var(--line); }

.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 50px; height: auto; }
.brand-name { font: 400 1.14rem/1.1 var(--serif); white-space: nowrap; }
.brand-name small {
  display: block; margin-top: 4px;
  font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim);
}

/* navigation: every word starts on a real element */
.nav { display: flex; align-items: center; gap: clamp(22px, 3vw, 44px); }
.nav a {
  position: relative; display: inline-flex; align-items: center; height: 44px;
  font: 500 15px/1 var(--sans); letter-spacing: .01em;
}
.nav .el { font-size: 13px; min-width: 25px; padding: 6px 3px 5px; margin: 0 1px 0 0; transition: filter .25s; }
.nav .el::after { display: none; }
.nav a:hover .el { filter: brightness(1.25); }
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 3px; height: 1px;
  background: #fff; transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.nav a[aria-current='page']::after { transform: scaleX(1); }
.nav .nav-book { padding-right: 14px; background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .78); transition: filter .25s; }
.nav .nav-book .el { background: none; box-shadow: none; padding-left: 10px; padding-right: 0; min-width: 0; margin: 0; font-size: 15px; font-weight: 500; letter-spacing: .01em; }
.nav .nav-book::after { display: none; }
.nav .nav-book:hover { filter: brightness(1.18); }

.bar-call { display: none; align-items: center; gap: 8px; min-height: 44px; font: 500 14px/1 var(--mono); }
.bar-call svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------- title sequence */
.hero { position: relative; display: flex; min-height: 100svh; background: var(--black); overflow: hidden; }
.hero-img { position: absolute; inset: 0; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; animation: lights 3.2s var(--ease) both; }
@keyframes lights {
  0%, 30% { opacity: .02; }   /* not 0: the image counts as painted from the first frame */
  100% { opacity: .9; }
}
.smoke { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; opacity: 0; mix-blend-mode: screen; pointer-events: none; transition: opacity 2.4s ease; }
.smoke.on { opacity: 1; }
.hero::before { content: ''; position: absolute; inset: 0 0 auto 0; z-index: 2; height: 180px; background: linear-gradient(rgba(7, 7, 8, .82), transparent); pointer-events: none; }
.hero::after { content: ''; position: absolute; inset: auto 0 0 0; z-index: 2; height: 62%; background: linear-gradient(transparent, rgba(7, 7, 8, .66) 58%, var(--black)); pointer-events: none; }

.hero-copy {
  position: relative; z-index: 3; align-self: flex-end; width: 100%;
  padding-block: 0 clamp(34px, 4.6vw, 64px);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px clamp(32px, 5vw, 80px);
}
.hero-copy .label { margin-bottom: clamp(16px, 2vw, 28px); color: rgba(255, 255, 255, .86); }
.title { font-size: clamp(2.75rem, 8.1vw, 8.3rem); line-height: 1.14; }
.title .ln { display: block; white-space: nowrap; }
.title .ln + .ln { margin-left: 1.12em; }
.title .tx { animation: type-in 1.8s 1.5s var(--ease) both; }
.title .el { animation: tile-in 1.3s var(--ease) both; }
.title .ln:first-child .el { animation-delay: .5s; }
.title .ln + .ln .el:first-of-type { animation-delay: .85s; }
.title .ln + .ln .el:last-of-type { animation-delay: 1.1s; }
@keyframes tile-in {
  0% { opacity: 0; filter: brightness(2.2) blur(6px); }
  100% { opacity: 1; filter: none; }
}
@keyframes type-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.hero-side { padding-bottom: 8px; animation: type-in 1.6s 2s var(--ease) both; }
.hero-sub { max-width: 32ch; margin-bottom: 24px; color: rgba(255, 255, 255, .86); }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.hero-note { position: absolute; z-index: 3; right: var(--gutter); top: calc(var(--bar) + 26px); text-align: right; font: 400 12.5px/1.5 var(--mono); color: rgba(255, 255, 255, .62); animation: type-in 2s 2.4s ease both; }

/* ---------------------------------------------------------- section rhythm */
.block { padding-block: clamp(76px, 9.4vw, 156px); }
.head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px clamp(16px, 2vw, 32px); align-items: end; margin-bottom: clamp(36px, 4.6vw, 68px); }
.head > :first-child { grid-column: 1 / span 7; }
.head > :last-child:not(:first-child) { grid-column: 8 / -1; }
.head .label { margin-bottom: 14px; }

/* ---------------------------------------------------------- the periodic table: all 118, five of them lit.
   Symbols are drawn from data attributes so the page text stays clean for crawlers. */
.pt { position: relative; display: grid; grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 3px; }
.cell {
  position: relative; display: block; aspect-ratio: 1 / 1.1; min-width: 0;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--faint);
}
.cell::before { content: attr(data-s); position: absolute; left: 8%; bottom: 9%; font: 600 clamp(9px, 1.02vw, 16px)/1 var(--sans); letter-spacing: -.01em; }
.cell::after { content: attr(data-n); position: absolute; right: 8%; top: 8%; font: 400 clamp(6px, .56vw, 9px)/1 var(--mono); }
.cell.lit { background: var(--tile); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .88); color: #fff; transition: filter .25s, transform .4s var(--ease); }
.cell.lit::before { font-size: clamp(11px, 1.7vw, 25px); font-weight: 700; left: 50%; bottom: auto; top: 54%; transform: translate(-50%, -50%); }
.cell.lit:hover, .cell.lit.is-on { filter: brightness(1.28); transform: scale(1.1); z-index: 2; }
.cell.us { background: #fff; color: var(--black); box-shadow: none; }
.cell.us::before { font-weight: 700; }

.pt-panel { position: relative; grid-row: 1 / span 3; grid-column: 3 / span 10; margin: 0 0 clamp(8px, 1vw, 16px) clamp(6px, 1vw, 16px); }
.pt-card { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(14px, 1.6vw, 26px); opacity: 0; pointer-events: none; transition: opacity .45s var(--ease); }
.pt-card.is-on { opacity: 1; pointer-events: auto; }
.pt-card .frame { height: 100%; }
.pt-card .frame picture { height: 100%; }
.pt-card .frame img { height: 100%; object-fit: cover; }
.pt-card[data-card='washing'] img { object-position: 50% 82%; }   /* keep the GLE 300 d badge in frame */
.pt-card[data-card='ceramic-coating'] img { object-position: 50% 56%; }
.pt-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.pt-text .label { margin-bottom: 8px; color: var(--red-lit); }
.pt-text h3 { margin-bottom: 8px; }
.pt-text p { font-size: 15.5px; line-height: 1.45; color: var(--dim); }
.pt-list { display: none; }

/* ---------------------------------------------------------- photographs: figures in a lab report */
.frame { position: relative; display: block; overflow: hidden; background: var(--ink-2); }
.frame img { width: 100%; transition: transform 1.3s var(--ease); }
a.frame:hover img, button.frame:hover img { transform: scale(1.025); }
.spec { margin: 0; }
.spec .frame::after {
  content: ''; position: absolute; inset: 10px; pointer-events: none; mix-blend-mode: difference;
  background:
    linear-gradient(#fff, #fff) 0 0 / 15px 1px, linear-gradient(#fff, #fff) 0 0 / 1px 15px,
    linear-gradient(#fff, #fff) 100% 0 / 15px 1px, linear-gradient(#fff, #fff) 100% 0 / 1px 15px,
    linear-gradient(#fff, #fff) 0 100% / 15px 1px, linear-gradient(#fff, #fff) 0 100% / 1px 15px,
    linear-gradient(#fff, #fff) 100% 100% / 15px 1px, linear-gradient(#fff, #fff) 100% 100% / 1px 15px;
  background-repeat: no-repeat;
}
figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 11px; font: 400 12.5px/1.4 var(--mono); color: var(--dim); }

.figs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(16px, 2vw, 32px); align-items: start; }
.figs .spec:nth-child(1) { grid-column: 1 / span 5; }
.figs .spec:nth-child(2) { grid-column: 6 / span 4; margin-top: clamp(40px, 8vw, 132px); }
.figs .spec:nth-child(3) { grid-column: 10 / -1; margin-top: clamp(16px, 3vw, 48px); }
.figs-foot { display: flex; justify-content: flex-end; margin-top: clamp(24px, 3vw, 44px); }

.facts { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.facts li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.facts span:first-child { padding-top: 2px; font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.facts a { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.facts a:hover { text-decoration-color: currentColor; }
.facts code { display: block; margin-bottom: 4px; font: 500 15px/1.4 var(--mono); color: #fff; }
.copy .more, .elem .more { margin-top: 22px; }

/* ---------------------------------------------------------- closing call, in the smoke */
.close { position: relative; overflow: hidden; border-top: 1px solid var(--line); text-align: center; }
.close::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(7, 7, 8, .9) 30%, transparent 100%); pointer-events: none; }
.close .wrap { position: relative; z-index: 1; }
.close h2 { max-width: 16em; margin: 0 auto 16px; }
.close .lede { margin: 0 auto 30px; }
.close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* ---------------------------------------------------------- inner page heads */
.page-head { padding-block: calc(var(--bar) + clamp(48px, 7vw, 112px)) clamp(36px, 4.4vw, 68px); }
.page-head .label { margin-bottom: 18px; }
.page-head h1 { line-height: 1.14; }
.page-head .lede { margin-top: 20px; }

/* ---------------------------------------------------------- jump bar */
.jump { position: sticky; top: var(--bar); z-index: 20; background: var(--black); border-block: 1px solid var(--line); }
.jump ul { display: flex; gap: clamp(20px, 3vw, 44px); margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a { display: inline-flex; align-items: center; min-height: 52px; font: 400 13.5px/1 var(--mono); color: var(--dim); white-space: nowrap; transition: color .25s; }
.jump a:hover { color: #fff; }

/* ---------------------------------------------------------- services: one element per screen */
.elem { padding-block: clamp(56px, 7vw, 116px); border-bottom: 1px solid var(--line); scroll-margin-top: 29px; }
.elem:last-of-type { border-bottom: 0; }
.elem-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(16px, 2vw, 32px); align-items: center; }
.elem-grid > .elem-copy { grid-column: 1 / span 5; }
.elem-grid > .spec { grid-column: 7 / -1; }
.elem-grid.flip > .spec { grid-column: 1 / span 6; grid-row: 1; }
.elem-grid.flip > .elem-copy { grid-column: 8 / -1; grid-row: 1; }
.big-el { display: inline-block; margin: 0 0 clamp(18px, 2vw, 28px); font-size: clamp(4rem, 8vw, 7.4rem); }
.elem h2 { margin-bottom: 16px; font-size: clamp(2rem, 3.6vw, 3.4rem); }
.elem .frame { aspect-ratio: 5 / 6; }
.elem .frame picture { height: 100%; }
.elem .frame img { height: 100%; object-fit: cover; }

/* ---------------------------------------------------------- work: batches */
.batch { padding-block: clamp(56px, 7vw, 112px); border-bottom: 1px solid var(--line); scroll-margin-top: 29px; }
.work { columns: 3; column-gap: clamp(14px, 1.6vw, 24px); }
.work.few { columns: 2; }
.work figure { margin: 0 0 clamp(14px, 1.6vw, 24px); break-inside: avoid; }
.work button.frame { display: block; width: 100%; padding: 0; border: 0; cursor: zoom-in; }

/* ---------------------------------------------------------- full-size viewer */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--black); color: #fff; }
.lightbox::backdrop { background: var(--black); }
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 64px clamp(12px, 7vw, 110px) 74px; }
.lb-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.lb-bar { position: absolute; inset: auto 0 0 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 66px; padding-inline: var(--gutter); font: 400 13px/1.3 var(--mono); color: var(--dim); }
.lb-btn { position: absolute; display: grid; place-items: center; width: 54px; height: 54px; border: 0; background: none; cursor: pointer; color: #fff; transition: color .25s; }
.lb-btn svg { width: 24px; height: 24px; }
.lb-close { top: 8px; right: 10px; }
.lb-prev { left: 10px; top: 50%; translate: 0 -50%; }
.lb-next { right: 10px; top: 50%; translate: 0 -50%; }
.lb-btn:hover { color: var(--red-lit); }

/* ---------------------------------------------------------- lab page: why CP */
.cp-eq { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(14px, 2vw, 28px); margin-bottom: clamp(22px, 3vw, 36px); font: 400 clamp(1.6rem, 3vw, 2.8rem)/1 var(--mono); color: var(--dim); }
.cp-eq .el { font-size: clamp(3.4rem, 6.4vw, 6rem); margin: 0; }
.cp-eq .el.white { background: #fff; color: var(--black); box-shadow: none; }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(16px, 2vw, 32px); align-items: center; }
.split > .media { grid-column: 1 / span 6; grid-row: 1; }
.split > .copy { grid-column: 8 / -1; grid-row: 1; }
.split.rev > .media { grid-column: 7 / -1; }   /* photo on the right; it still comes first on phones */
.split.rev > .copy { grid-column: 1 / span 5; }
.label.hazmat { color: var(--hazmat); }
.copy > .label { margin-bottom: 16px; }
.copy > h2 { margin-bottom: 16px; }
.copy > .lede + .lede { margin-top: 14px; }
.copy .btn { margin-top: 26px; }

.map { position: relative; aspect-ratio: 4 / 3; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: invert(.92) hue-rotate(180deg) saturate(.75) contrast(.95); }

/* ---------------------------------------------------------- book page */
.book { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(36px, 5vw, 72px) clamp(16px, 2vw, 32px); align-items: start; }
.book-form { grid-column: 1 / span 7; }
.book-side { grid-column: 9 / -1; }

.field { display: block; margin-bottom: 22px; }
.field > span { display: block; margin-bottom: 8px; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.field input, .field select, .field textarea {
  display: block; width: 100%; min-height: 54px; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: 0; background: var(--ink-2); color: #fff;
  font-size: 17px; line-height: 1.4; appearance: none; -webkit-appearance: none;
  transition: border-color .25s;
}
.field select {
  background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(-45deg, transparent 50%, #fff 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px; background-repeat: no-repeat;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: #fff; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--red-lit); }
.field .err { display: none; margin-top: 7px; font-size: 14px; color: var(--red-lit); }
.field.bad .err { display: block; }
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(14px, 1.6vw, 24px); }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { margin-top: 14px; font-size: 14.5px; line-height: 1.5; color: var(--dim); }
.form-status { min-height: 1.5em; margin-top: 12px; font-size: 15px; color: var(--red-lit); }

/* contact card, same build as the Green Plot "Prefer to talk?" card, in this site's materials */
.talk { display: grid; gap: 16px; padding: 24px; border: 1px solid var(--line); background: rgba(255, 255, 255, .03); }
.talk-t { font: 400 24px/1.1 var(--serif); }
.qbtns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.qbtn {
  display: grid; justify-items: center; gap: 8px; min-width: 0; padding: 14px 4px 12px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, .02);
  font: 600 13px/1.2 var(--sans); color: var(--dim); text-align: center;
  transition: border-color .25s, background-color .25s, color .25s;
}
.qbtn-ic { display: grid; place-items: center; width: 46px; height: 46px; background: rgba(224, 21, 48, .14); color: var(--red-lit); }
.qbtn-ic svg { width: 21px; height: 21px; }
.qbtn-ic img { width: auto; height: 24px; }
.qbtn:active { scale: .96; }
@media (hover: hover) { .qbtn:hover { border-color: rgba(255, 74, 92, .55); background: rgba(224, 21, 48, .07); color: #fff; } }
.talk-note { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.5; color: var(--dim); }
.talk-note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--red-lit); }
.book-photo { margin-top: 30px; }

/* ---------------------------------------------------------- faq */
.faq { max-width: 880px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: 72px; padding-block: 18px; cursor: pointer; list-style: none;
  font: 400 clamp(1.2rem, 1.8vw, 1.5rem)/1.28 var(--serif);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; flex: none; width: 13px; height: 13px; background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1px no-repeat, linear-gradient(currentColor, currentColor) 50% 50% / 1px 100% no-repeat; transition: transform .4s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { max-width: 68ch; padding-bottom: 24px; color: var(--dim); }
.faq details a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); padding-block: clamp(46px, 5vw, 76px) 28px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px clamp(16px, 2vw, 32px); }
.foot-logo { grid-column: 1 / span 4; }
.foot-logo img { width: min(220px, 60vw); }
.foot-col { grid-column: span 2; }
.foot-col:last-child { grid-column: span 4; }
.foot-col .label { margin-bottom: 14px; }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li { margin-bottom: 8px; }
.foot-col a { display: inline-flex; align-items: center; gap: 10px; min-height: 30px; transition: color .25s; }
.foot-col a:hover { color: var(--red-lit); }
.foot-col img { width: 18px; height: 18px; }
.foot-note { display: flex; align-items: center; gap: 14px; margin-top: clamp(32px, 4vw, 52px); padding-top: 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--dim); }
.foot-note .el { flex: none; font-size: 26px; margin: 0; }
.foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 22px; font: 400 12.5px/1.5 var(--mono); color: var(--dim); }
.foot-base a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------------- 404 */
.lost { display: flex; align-items: center; min-height: 86svh; padding-top: var(--bar); }
.lost h1 { margin: 16px 0 20px; }
.lost .lede { margin-bottom: 28px; }

/* ---------------------------------------------------------- reveal on scroll */
.pre { opacity: 0; transform: translateY(26px); }
.in { opacity: 1; transform: none; transition: opacity 1s var(--ease), transform 1.2s var(--ease); }

/* ---------------------------------------------------------- page change */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(bar), ::view-transition-group(tabs) { animation-duration: 0s; }

/* ---------------------------------------------------------- tablet */
@media (max-width: 1080px) {
  .work { columns: 2; }
  .foot-logo { grid-column: 1 / -1; }
  .foot-col, .foot-col:last-child { grid-column: span 4; }
  .book-form { grid-column: 1 / span 7; }
  .book-side { grid-column: 8 / -1; }
  .qbtns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-text h3 { font-size: 1.3rem; }
  .pt-text p { display: none; }
  .brand-name { display: none; }
}

/* ---------------------------------------------------------- phone: the nav moves to a tab bar under the thumb */
@media (max-width: 760px) {
  :root { --bar: 64px; --tab: 60px; }
  body { font-size: 16.5px; padding-bottom: calc(var(--tab) + env(safe-area-inset-bottom)); }

  .bar-call { display: inline-flex; }
  .brand img { width: 44px; }
  .brand-name { display: block; }

  .nav {
    position: fixed; inset: auto 0 0 0; z-index: 41;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
    height: calc(var(--tab) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--black); border-top: 1px solid var(--line);
    view-transition-name: tabs;
  }
  .nav a { justify-content: center; height: 100%; font-size: 14px; }
  .nav .el { min-width: 23px; padding: 5px 2px 4px; font-size: 12.5px; }
  .nav a::after { left: 20%; right: 20%; top: -1px; bottom: auto; height: 2px; background: var(--red-lit); }
  .nav .nav-book { height: 100%; padding: 0; box-shadow: none; }
  .nav .nav-book .el { padding: 0; font-size: 14px; }

  .hero { min-height: calc(100svh - var(--tab)); }
  .hero-img img { object-position: 50% 30%; }
  .hero-copy { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 24px; }
  .title { font-size: clamp(2rem, 11.5vw, 4rem); }
  .title .ln + .ln { margin-left: .5em; }
  .hero-side { padding-bottom: 0; }
  .hero-sub { margin-bottom: 18px; }
  .hero-cta .btn { flex: 1 1 100%; }
  .hero-note { top: calc(var(--bar) + 14px); font-size: 11.5px; }

  .head { display: block; }
  .head > :last-child:not(:first-child) { margin-top: 14px; }

  .pt { gap: 1.5px; margin-bottom: 30px; }
  .cell::after { display: none; }
  .cell::before { left: 50%; top: 50%; bottom: auto; transform: translate(-50%, -50%); font-size: 2.25vw; letter-spacing: -.03em; }
  .cell.lit::before { top: 50%; font-size: 2.8vw; }
  .cell { box-shadow: inset 0 0 0 .5px var(--line); }
  .cell.lit { box-shadow: 0 0 0 .5px rgba(255, 255, 255, .8); }
  .pt-panel { display: none; }
  .pt-list { display: block; margin: 0; padding: 0; list-style: none; }
  .pt-list li { margin-bottom: 30px; }
  .pt-list .frame { aspect-ratio: 4 / 3; margin-bottom: 14px; }
  .pt-list .frame picture { height: 100%; }
  .pt-list .frame img { height: 100%; object-fit: cover; }
  .pt-name { display: flex; align-items: center; gap: 12px; font: 400 1.5rem/1.15 var(--serif); }
  .pt-name .el { flex: none; font-size: 1.5rem; margin: 0; }
  .pt-note { display: block; margin-top: 8px; color: var(--dim); }

  .figs { display: block; }
  .figs .spec { margin: 0 0 24px; }
  .figs .spec:nth-child(n) { margin-top: 0; }
  .figs-foot { justify-content: flex-start; margin-top: 0; }

  .elem-grid, .elem-grid.flip { display: block; }
  .elem-grid .spec { margin-top: 26px; }

  .split { display: block; }
  .split > .media { margin-bottom: 26px; }
  .copy + .media { margin-top: 28px; margin-bottom: 0; }

  .facts li { grid-template-columns: 92px minmax(0, 1fr); }

  .work, .work.few { columns: 1; }

  .book { display: block; }
  .book-side { margin-top: 44px; }
  .talk { padding: 20px 16px; }
  .qbtns { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .qbtn { padding: 12px 2px 10px; font-size: 12px; }
  .qbtn-ic { width: 42px; height: 42px; }
  .pair { grid-template-columns: minmax(0, 1fr); }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-logo, .foot-col:last-child { grid-column: 1 / -1; }
  .foot-col { grid-column: span 1; }

  .lb-prev, .lb-next { display: none; }
  .lb-stage { padding: 58px 0 70px; }
}

@media (max-width: 380px) {
  .brand-name small { display: none; }
  .qbtn { font-size: 10.5px; letter-spacing: -.01em; }
}

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html.smooth { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hero-img img { opacity: .9; }
  .pre { opacity: 1; transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------- table positions (generated) */
.r1 { grid-row: 1; }
.r2 { grid-row: 2; }
.r3 { grid-row: 3; }
.r4 { grid-row: 4; }
.r5 { grid-row: 5; }
.r6 { grid-row: 6; }
.r7 { grid-row: 7; }
.r8 { grid-row: 8; }
.r9 { grid-row: 9; }
.r10 { grid-row: 10; }
.c1 { grid-column: 1; }
.c2 { grid-column: 2; }
.c3 { grid-column: 3; }
.c4 { grid-column: 4; }
.c5 { grid-column: 5; }
.c6 { grid-column: 6; }
.c7 { grid-column: 7; }
.c8 { grid-column: 8; }
.c9 { grid-column: 9; }
.c10 { grid-column: 10; }
.c11 { grid-column: 11; }
.c12 { grid-column: 12; }
.c13 { grid-column: 13; }
.c14 { grid-column: 14; }
.c15 { grid-column: 15; }
.c16 { grid-column: 16; }
.c17 { grid-column: 17; }
.c18 { grid-column: 18; }

/* ---------------------------------------------------------- neumorphic layer with embedded tiles.
   Added after site.css by build.py. Set NEUMORPHIC = False there to remove all of it.
   Soft shadows need a surface lighter than black to fall on, so the room goes to graphite.
   Controls are soft and pressable, photographs stay sharp, and the element tiles are pressed
   into the surface. Full-bleed scenes (title, lab) stay flat and dark. */

:root {
  --black: #1a1a1e;
  --ink-2: #1a1a1e;
  --ink-3: #222227;
  --scene: #08080a;
  --line: rgba(255, 255, 255, .07);
  --lift: rgba(255, 255, 255, .06);
  --drop: rgba(0, 0, 0, .72);
  --raise: -7px -7px 16px var(--lift), 9px 9px 20px var(--drop);
  --raise-s: -3px -3px 7px var(--lift), 4px 4px 10px var(--drop);
  --press: inset 6px 6px 13px var(--drop), inset -5px -5px 11px var(--lift);
  --press-s: inset 3px 3px 7px var(--drop), inset -3px -3px 6px var(--lift);
  --glow: 0 0 22px rgba(224, 21, 48, .3);
  --hide: url(/assets/grain.webp) 0 0 / 320px 320px, var(--black);
  --r: 26px;
  --r-s: 16px;
}

/* buttons: raised, and they press in */
.btn { border-radius: 14px; }
.btn-red { box-shadow: var(--raise-s), var(--glow), inset 0 0 0 1px rgba(255, 255, 255, .24); }
.btn-red:active { box-shadow: inset 4px 4px 9px rgba(50, 0, 6, .75), inset -3px -3px 7px rgba(255, 120, 130, .22); }
.btn-line { box-shadow: var(--raise-s); }
.btn-line:hover { color: #fff; box-shadow: var(--raise); }
.btn-line:active { box-shadow: var(--press-s); }

/* top bar */
.bar.is-solid, .plain .bar { border-bottom-color: transparent; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, .55); }
.nav a::after { display: none; }
.nav .nav-book { border-radius: 12px; box-shadow: var(--raise-s), inset 0 0 0 1px rgba(255, 255, 255, .24); }
.nav .nav-book[aria-current='page'] { box-shadow: inset 3px 3px 7px rgba(50, 0, 6, .75), inset -2px -2px 5px rgba(255, 120, 130, .2); }

@media (min-width: 761px) {
  .nav { gap: clamp(10px, 1.6vw, 22px); }
  .nav a:not(.nav-book) { padding: 0 12px; border-radius: 12px; transition: box-shadow .3s var(--ease); }
  .nav a:not(.nav-book):hover { box-shadow: var(--raise-s); }
  .nav a:not(.nav-book)[aria-current='page'] { box-shadow: var(--press-s); }
}

/* title: the scene stays dark and fades down into the graphite room */
.hero { background: var(--scene); }
.hero::before { background: linear-gradient(rgba(8, 8, 10, .82), transparent); }
.hero::after { background: linear-gradient(transparent, rgba(8, 8, 10, .68) 56%, var(--black)); }

.pt-panel { border-radius: 18px; box-shadow: inset 3px 3px 7px var(--drop), inset -2px -2px 5px var(--lift); }
.pt-card { inset: 10px; }
.pt-card .frame { border-radius: 11px; }

/* photographs: sharp, in soft raised frames */
.spec .frame { padding: 10px; border-radius: 20px; box-shadow: var(--raise); transition: box-shadow .35s var(--ease); }
.spec .frame img { border-radius: 11px; }
.spec .frame::after { inset: 20px; }
a.frame:hover img, button.frame:hover img { transform: none; }
.spec a.frame:hover, .spec button.frame:hover { box-shadow: -9px -9px 20px var(--lift), 12px 12px 26px rgba(0, 0, 0, .72); }
.spec button.frame:active { box-shadow: var(--press); }
.work { column-gap: clamp(20px, 2.2vw, 32px); padding: 6px; }
.work button.frame { padding: 10px; }
.work figure { margin-bottom: clamp(20px, 2.2vw, 32px); }

/* wells */
.facts { padding: 4px 18px; border: 0; border-radius: var(--r-s); box-shadow: var(--press-s); }
.facts li:last-child { border-bottom: 0; }

.field input, .field select, .field textarea { border: 0; border-radius: 14px; background-color: rgba(0, 0, 0, .12); box-shadow: var(--press-s), 0 0 0 1px rgba(255, 255, 255, .2); transition: box-shadow .25s; }
.field input:focus, .field select:focus, .field textarea:focus { box-shadow: var(--press-s), 0 0 0 2px rgba(255, 255, 255, .78); }
.field.bad input, .field.bad select, .field.bad textarea { box-shadow: var(--press-s), 0 0 0 2px var(--red-lit); }

/* contact card */
.talk { border: 0; border-radius: var(--r); box-shadow: var(--raise); }
.qbtns { gap: 12px; }
.qbtn { border: 0; border-radius: var(--r-s); box-shadow: var(--raise-s); }
.qbtn-ic { border-radius: 50%; background: none; box-shadow: var(--press-s); }
.qbtn:active { scale: 1; box-shadow: var(--press-s); }
@media (hover: hover) { .qbtn:hover { box-shadow: var(--raise); } }

/* faq */
.faq { display: grid; gap: 14px; }
.faq details, .faq details:first-of-type { border: 0; border-radius: 18px; padding-inline: 22px; box-shadow: var(--raise-s); transition: box-shadow .3s var(--ease); }
.faq details[open] { box-shadow: var(--press-s); }

/* map, lab photos */
.map { border-radius: 20px; box-shadow: var(--raise); }
.map iframe { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); border-radius: 11px; }

/* section edges */
.elem, .batch { border-bottom: 0; }
.close { border-top: 0; }
.close::after { background: radial-gradient(ellipse 62% 78% at 50% 50%, rgba(26, 26, 30, .92) 30%, transparent 100%); }
.jump { border-block: 0; box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .6); }
.foot { border-top: 0; box-shadow: inset 0 16px 24px -16px var(--drop); }

/* full-size viewer */
.lb-btn { border-radius: 50%; box-shadow: var(--raise-s); }
.lb-btn:active { box-shadow: var(--press-s); }

@media (max-width: 760px) {
  .nav { box-shadow: 0 -10px 24px -6px rgba(0, 0, 0, .6); border-top: 0; padding-inline: 4px; }
  .nav a { height: 48px; margin: 6px 3px; border-radius: 12px; }
  .nav a[aria-current='page']:not(.nav-book) { box-shadow: var(--press-s); }
  .nav .nav-book { height: 48px; box-shadow: var(--raise-s); }

  .pt-list li { margin-bottom: 22px; }
  .pt-list a { display: block; padding: 12px 12px 16px; border-radius: 20px; box-shadow: var(--raise-s); }
  .pt-list a:active { box-shadow: var(--press-s); }
  .pt-list .frame { border-radius: 11px; }

  .spec .frame, .work button.frame { padding: 8px; border-radius: 18px; box-shadow: var(--raise-s); }
  .spec .frame::after { inset: 18px; }
  .qbtns { gap: 8px; }
}

/* ---------------------------------------------------------- embedded elements.
   Pressed into soft graphite with a light leather grain, filled with crimson enamel, lit
   from the top left. Nothing is raised and nothing floats, so a tile has a shadow inside it
   and a highlight on its lower lip. */

body, .bar.is-solid, .plain .bar, .jump, .btn-line, .btn-line:hover, .talk, .qbtn, .pt, .spec .frame, .lb-btn {
  background: var(--hide); background-blend-mode: overlay;
}

.el, .cell.lit {
  background: url(/assets/grain.webp) 0 0 / 320px 320px, linear-gradient(150deg, #cf1b31, #8d0f1e 86%);
  background-blend-mode: overlay;
}

.el {
  border-radius: .035em;
  text-shadow: 0 -.02em 0 rgba(60, 0, 8, .75), 0 .018em .02em rgba(255, 255, 255, .14);
  box-shadow:
    inset .09em .09em .15em rgba(20, 0, 3, .92),
    inset -.03em -.03em .06em rgba(255, 170, 170, .26),
    -.03em -.03em .04em rgba(0, 0, 0, .95),
    .03em .03em .035em rgba(255, 255, 255, .18),
    0 0 0 max(1px, .016em) rgba(0, 0, 0, .7);
}
.el::after { text-shadow: 0 1px 0 rgba(60, 0, 8, .6); }
.el.white, .cell.us {
  background: url(/assets/grain.webp) 0 0 / 320px 320px, #efedea;
  background-blend-mode: overlay; color: var(--ink-2); text-shadow: 0 .018em 0 rgba(255, 255, 255, .7);
}
.cp-eq .el.white {
  box-shadow: inset .09em .09em .15em rgba(0, 0, 0, .58), inset -.03em -.03em .06em #fff,
    -.03em -.03em .04em rgba(0, 0, 0, .95), .03em .03em .035em rgba(255, 255, 255, .18), 0 0 0 max(1px, .016em) rgba(0, 0, 0, .7);
}

/* the table: a soft raised pad */
.pt {
  gap: 5px; padding: clamp(26px, 2.6vw, 38px); border-radius: var(--r);
  box-shadow: var(--raise), inset 2px 2px 2px rgba(255, 255, 255, .06), inset -3px -3px 6px rgba(0, 0, 0, .55);
}

/* the other 113: the surface itself pressed in */
.cell {
  border-radius: 4px; background: rgba(0, 0, 0, .28); color: #808088;
  text-shadow: -1px -1px 0 rgba(0, 0, 0, .85), 1px 1px 0 rgba(255, 255, 255, .06);
  box-shadow:
    inset 4px 4px 7px rgba(0, 0, 0, .9), inset 1px 1px 2px #000,
    inset -1px -1px 1px rgba(255, 255, 255, .07),
    1.5px 1.5px 1px rgba(255, 255, 255, .08), -1.5px -1.5px 1px rgba(0, 0, 0, .75);
}

/* the five: the same pocket, filled with enamel */
.cell.lit {
  border-radius: 3px; color: #fff; text-shadow: 0 -1px 0 rgba(60, 0, 8, .8), 0 1px 0 rgba(255, 255, 255, .16);
  box-shadow:
    inset 6px 6px 10px rgba(20, 0, 3, .9), inset -1.5px -1.5px 3px rgba(255, 170, 170, .28),
    1.5px 1.5px 1px rgba(255, 255, 255, .14), -1.5px -1.5px 1px rgba(0, 0, 0, .9), 0 0 0 1px rgba(0, 0, 0, .75);
  transition: filter .3s, box-shadow .3s var(--ease);
}
.cell.lit:hover, .cell.lit.is-on {
  transform: none; filter: brightness(1.22);
  box-shadow:
    inset 6px 6px 10px rgba(20, 0, 3, .78), inset 0 0 14px rgba(255, 70, 90, .55), inset -1.5px -1.5px 3px rgba(255, 170, 170, .34),
    1.5px 1.5px 1px rgba(255, 255, 255, .14), -1.5px -1.5px 1px rgba(0, 0, 0, .9), 0 0 16px rgba(224, 21, 48, .38);
}
.cell.us {
  border-radius: 3px; text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
  box-shadow:
    inset 6px 6px 10px rgba(0, 0, 0, .52), inset -1.5px -1.5px 3px #fff,
    1.5px 1.5px 1px rgba(255, 255, 255, .14), -1.5px -1.5px 1px rgba(0, 0, 0, .9);
}

@media (max-width: 760px) {
  .pt { gap: 2px; margin-inline: -12px; padding: 14px 10px; border-radius: 16px; box-shadow: var(--raise-s); }
  .cell { border-radius: 2px; background: rgba(0, 0, 0, .32); color: #a8a8b0; text-shadow: none; box-shadow: inset 1.5px 1.5px 2px #000, inset -.5px -.5px 0 rgba(255, 255, 255, .09), .5px .5px 0 rgba(255, 255, 255, .09); }
  .cell.lit { box-shadow: inset 2px 2px 3px rgba(20, 0, 3, .9), .5px .5px 0 rgba(255, 255, 255, .16), 0 0 0 .5px #000; }
  .cell.us { box-shadow: inset 2px 2px 3px rgba(0, 0, 0, .55), 0 0 0 .5px #000; }
}