/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4
   Seamline, one stylesheet. Reference grammar: a single loud field color (leather orange) in rounded
   app-like containers floating on a cream page, a floating glass pill header, a hero photo living
   inside organic shapes, swipe rows, marquee bands, a pinned section, cutouts floating on black-navy.
   Mobile first at 390 px, desktop from 900 px. Headings on one line unless set on two on purpose,
   no arrows, no icon fonts, all motion off under prefers-reduced-motion. */

@font-face { font-family: "Unbounded"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("/assets/fonts/unbounded-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/inter-var-latin.woff2") format("woff2"); }
@font-face { font-family: "Audiowide"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/audiowide-400.woff2") format("woff2"); }

:root {
  /* grounds */
  --base: #0A0F1A; --ink: #0F1A2B; --paper: #F6F1E7; --white: #FFFFFF;
  /* text */
  --navy: #0F1A2B; --on-ink: #E6DFD1; --mist: #A9B4C0; --muted: #5A6270;
  /* the loud field and its family */
  --orange: #E8702A; --orange-hi: #F58A48; --orange-ink: #A4460F; --cognac: #B4652D;
  /* tinted card grounds */
  --tint-a: #F7DCC6; --tint-b: #EDE2CE; --tint-c: #DDE3EA;
  /* measured, not painted: the field under its darkest edge vignette, and the smoked credentials band over orange */
  --field-edge: #C75B1F; --smoke: #673821;
  --line: #E2D9C8; --field: #8C8576; --err: #9B2C1F;
  --ease: cubic-bezier(.22,1,.36,1);
  --display: "Unbounded", "Arial Black", Arial, sans-serif;
  --brand: "Audiowide", "Unbounded", Arial, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --rc: 28px; --rs: 20px; --gap: 8px;
  --g: 20px; --pad: 48px; --max: 1200px; --mbar: 76px;
  --edge: max(var(--g), calc((100vw - var(--max)) / 2 + var(--g)));
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { overflow-x: clip; margin: 0; background: var(--paper); color: var(--navy); font: 400 17px/26px var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
picture, figure { display: block; margin: 0; }
a { color: var(--orange-ink); text-underline-offset: 3px; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: -.025em; }
h3 { font: 650 18px/24px var(--sans); letter-spacing: -.01em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.skip { position: absolute; left: 8px; top: 0; z-index: 99; min-height: 48px; display: flex; align-items: center;
  background: var(--white); padding: 0 16px; border-radius: 999px; transform: translateY(-110%); }
.skip:focus { transform: translateY(8px); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--g); container-type: inline-size; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------------------------------------------------------------- type */
/* one-line headings: --n is the rendered width in em of the widest line (build.py measures it) */
.fit { white-space: nowrap; font-size: min(var(--fs), calc(100cqi / var(--n))); }
h1.fit { --fs: 36px; line-height: 1.08; margin-bottom: 14px; }
h2.fit { --fs: 30px; line-height: 1.12; margin-bottom: 16px; }
h2.fit.h-xl { --fs: 44px; }
h2.fit.h-sm { --fs: 20px; }
.fit-2 { line-height: 1.02 !important; }
@media (max-width: 899px) {
  .fit-long { font-family: var(--sans); font-weight: 700; letter-spacing: -.025em; font-size: min(var(--fs), calc(100cqi / var(--ns))); }
}
/* under 360 px a one-line heading would shrink below reading size: it may wrap there */
@media (max-width: 359px) {
  .fit { white-space: normal; font-size: max(19px, min(var(--fs), calc(100cqi / var(--n)))); }
  h1.fit { font-size: max(24px, min(var(--fs), calc(100cqi / var(--n)))); }
  .fit-long { white-space: normal; font-size: max(19px, min(var(--fs), calc(100cqi / var(--ns)))); }
  h1.fit-long { font-size: max(24px, min(var(--fs), calc(100cqi / var(--ns)))); }
}
/* tracked caps label above a heading */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 400 12px/16px var(--brand); letter-spacing: .26em;
  text-transform: uppercase; color: var(--orange-ink); }
.eyebrow::before { content: ""; flex: none; width: 18px; height: 2px; background: currentColor; }
.dark .eyebrow { color: var(--orange); }
.head-c { text-align: center; }
.head-c .eyebrow { justify-content: center; }
.head-c .eyebrow::before { display: none; }
.caption, .note { font-size: 14px; line-height: 20px; color: var(--muted); }
.caption { margin-bottom: 12px; }
.note { margin-top: 12px; }
.dark .note, .dark .caption { color: var(--mist); }
/* AI label: small tag in the corner of the photo, never its own line */
.pic { position: relative; }
.pic figcaption, .illus { position: absolute; right: 0; bottom: 0; z-index: 2; font: 500 11px/14px var(--sans); color: var(--white);
  background: rgba(10,15,26,.55); padding: 2px 8px; border-radius: 8px 0 0 0; opacity: .7; pointer-events: none; white-space: nowrap; }

/* ---------------------------------------------------------------- floating glass pill header */
.hdr { position: fixed; z-index: 50; top: 10px; left: 0; right: 0; pointer-events: none; transition: top .5s var(--ease); }
.hdr-in { pointer-events: auto; position: relative; margin: 0 auto; width: calc(100% - 28px); max-width: 1040px; height: 56px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 6px; border-radius: 999px;
  background: rgba(10,15,26,.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 14px 34px -16px rgba(10,15,26,.55), inset 0 1px 0 rgba(255,255,255,.14);
  transition: max-width .6s var(--ease), height .5s var(--ease), background-color .5s var(--ease); }
.hdr.is-scrolled { top: 6px; }
.hdr.is-scrolled .hdr-in { max-width: 820px; height: 52px; background: rgba(10,15,26,.74); }
.logo { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; text-decoration: none;
  font: 400 21px/1 var(--brand); letter-spacing: .02em; color: var(--white); }
.menu-btn { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; min-width: 44px; padding: 0 12px;
  border: 0; border-radius: 999px; background: transparent; color: var(--white); font: 600 14px/1 var(--sans); cursor: pointer; transition: background-color .3s; }
.menu-btn:hover { background: rgba(255,255,255,.1); }
.mb-ico { display: grid; grid-template-columns: 6px 6px; gap: 3px; }
.mb-ico i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; transition: transform .4s var(--ease); }
.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(1) { transform: translate(4.5px, 4.5px); }
.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(2) { transform: translate(-4.5px, 4.5px); }
.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(3) { transform: translate(4.5px, -4.5px); }
.menu-btn[aria-expanded="true"] .mb-ico i:nth-child(4) { transform: translate(-4.5px, -4.5px); }
.mb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hdr-q { justify-self: end; position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; min-height: 44px;
  padding: 0 16px; border-radius: 999px; background: var(--orange); color: var(--base); font: 650 14px/1 var(--sans); white-space: nowrap; text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35); transition: background-color .3s, transform .3s var(--ease); }
.hdr-q:hover { background: var(--orange-hi); }
/* the menu: a glass sheet under the pill */
.nav { display: none; }
.nav.open { display: grid; position: absolute; top: calc(100% + 8px); left: 0; right: 0; gap: 2px; padding: 10px;
  border-radius: var(--rc); background: rgba(10,15,26,.94); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px -20px rgba(10,15,26,.6); max-height: calc(100svh - 96px); overflow-y: auto;
  animation: sheet .45s var(--ease) both; }
@keyframes sheet { from { opacity: 0; transform: translateY(-8px) scale(.98); } to { opacity: 1; transform: none; } }
.nav a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 18px; color: var(--white); text-decoration: none;
  font: 600 20px/1.2 var(--display); letter-spacing: -.02em; transition: background-color .25s; }
.nav a:hover { background: rgba(255,255,255,.08); }
.nav a[aria-current] { color: var(--orange); }
.nav .nav-cta { margin-top: 8px; justify-content: center; background: var(--orange); color: var(--base); border-radius: 999px; font: 650 16px/1 var(--sans); }
.nav .nav-cta:hover { background: var(--orange-hi); }
.nav .nav-call { font: 600 16px/1 var(--sans); }
@media (max-width: 899px) { html:has(.nav.open) { overflow: hidden; } }

/* ---------------------------------------------------------------- hero: the orange field, the photo inside organic shapes */
.hero { padding: var(--gap) var(--gap) 0; }
.hero-field { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  border-radius: 32px; background: var(--orange); color: var(--base); padding: 78px 20px 28px; container-type: inline-size;
  box-shadow: inset 0 0 90px rgba(122,44,4,.30); }
/* warm light from the upper left, darker leather at the edges */
.hero-field::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(90% 70% at 22% 30%, rgba(255,196,150,.42), rgba(255,196,150,0) 62%),
              radial-gradient(70% 60% at 100% 100%, rgba(122,44,4,.22), rgba(122,44,4,0) 70%); }
.hero-art { position: relative; z-index: 0; height: clamp(280px, 44svh, 400px); margin: -62px -20px 18px; }
.hero-blob { position: absolute; inset: 0;
  -webkit-mask: var(--blob) center / 100% 100% no-repeat; mask: var(--blob) center / 100% 100% no-repeat;
  animation: drift 18s ease-in-out infinite alternate; }
.hero-blob .pic, .hero-blob picture { position: absolute; inset: 0; }
.hero-blob img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform-origin: 60% 50%;
  animation: kenburns 16s var(--ease) both; }
.hero-blob figcaption { border-radius: 8px 0 0 0; }
:root { --blob: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 0H36C43 0 45 12 52 12C59 12 61 0 68 0H100V13C85 18 71 29 59 41C47 53 33 64 18 65C9 66 0 61 0 51Z'/%3E%3Cpath d='M100 25V100H0V78C14 79 29 71 43 60C57 49 74 32 100 25Z'/%3E%3C/svg%3E"); }
/* the glow breathes through the gap between the two shapes */
.hero-glow { position: absolute; z-index: -1; left: 6%; right: 6%; top: 8%; bottom: 8%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(255,244,228,.95), rgba(255,178,120,.6) 45%, rgba(255,178,120,0));
  filter: blur(18px); animation: heroGlowPulse 2s var(--ease) .15s both, breathe 7s ease-in-out 2.2s infinite; }
@keyframes heroGlowPulse { 0% { opacity: 0; transform: scale(1.3); } 20% { opacity: 1; transform: scale(1.65); } to { opacity: 0; transform: scale(1); } }
@keyframes breathe { 0%, 100% { opacity: .5; transform: scale(.92); } 50% { opacity: .95; transform: scale(1.06); } }
@keyframes drift { from { transform: translate3d(-1.2%, .6%, 0) rotate(-.6deg); } to { transform: translate3d(1.2%, -.8%, 0) rotate(.6deg); } }
@keyframes kenburns { from { transform: scale(1.14); } to { transform: scale(1.02); } }
.hero-text { position: relative; z-index: 1; container-type: inline-size; }
.hero h1 { color: var(--base); }
.hero h1 .w { display: inline-block; animation: word .9s var(--ease) both; animation-delay: calc(140ms + var(--i) * 70ms); }
@keyframes word { from { opacity: 0; transform: translateY(.5em); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.lead { font-size: 17px; line-height: 25px; font-weight: 500; margin: 0 0 20px; max-width: 34em; color: var(--base); }
.hero .eyebrow { color: var(--base); margin-bottom: 12px; }
.hero .lead, .hero .hero-go, .hero .eyebrow, .creds { animation: fadeLoad .9s var(--ease) .5s both; }
@keyframes fadeLoad { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.crumbs { flex-wrap: wrap; column-gap: 0; margin-bottom: 4px !important; }
.crumbs::before { display: none; }
.crumbs a { color: var(--base); text-decoration: none; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.crumbs a + a::before { content: ""; width: 5px; height: 5px; margin: 0 .9em; border-radius: 50%; background: currentColor; }
.hero-go { align-self: flex-start; }
.hero--plain .hero-field { padding-top: 104px; padding-bottom: 36px; }
/* credentials strip: four true lines on a smoked band across the bottom of the field */
.cr-t { display: grid; grid-template-columns: 1fr 1fr; }
.creds { position: relative; z-index: 2; margin: 24px -20px -28px; padding: 8px 10px;
  background: rgba(10,15,26,.58); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.creds li { display: flex; align-items: center; gap: 9px; padding: 8px 6px; color: var(--white);
  font: 700 13px/17px var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.creds li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--orange); transform: rotate(45deg); }

/* the lead form sits right under the field, in its own black-navy container */
.hero-form { margin-top: var(--gap); padding: 26px 16px; border-radius: var(--rc); background: var(--base); color: var(--white);
  animation: fadeLoad 1s var(--ease) .6s both; }
.hero-form .lf { background: transparent; padding: 0; color: var(--white); }
.hero-form .lf-t { color: var(--white); font: 700 22px/28px var(--display); letter-spacing: -.02em; }
.hero-form .lf-h, .hero-form .lf-fname { color: var(--mist); }
.hero-form .lf input, .hero-form .lf textarea, .hero-form .lf select { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: var(--white); }
.hero-form .lf-file { border-color: rgba(255,255,255,.34); }
.hero-form .lf-fbtn { background: var(--paper); color: var(--base); }
.hero-form .lf-swap, .hero-form .lf-more summary, .hero-form .lf-files button { color: var(--orange); }
.hero-form .lf-more, .hero-form .lf-files li { border-color: rgba(255,255,255,.14); }
.hero-form .form-msg.err { color: #FFB4A6; }
.hero-form .btn-line { border-color: rgba(255,255,255,.6); color: var(--white); }

/* ---------------------------------------------------------------- buttons: pills with a shine sweep */
.btns { display: grid; gap: 12px; }
.btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 28px; border-radius: 999px; border: 1.5px solid transparent; font: 650 16px/1.1 var(--sans); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), background-color .3s var(--ease), color .3s var(--ease); }
.btn-brass, .btn-wa { background: var(--orange); color: var(--base); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -12px rgba(232,112,42,.9); }
.btn-brass:hover, .btn-wa:hover { background: var(--orange-hi); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 18px 34px -14px rgba(232,112,42,.95); }
.btn-dark { background: var(--base); color: var(--white); box-shadow: 0 14px 30px -14px rgba(10,15,26,.7); }
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 20px 36px -14px rgba(10,15,26,.8); }
.btn-line { border-color: currentColor; color: var(--navy); background: transparent; }
.btn-line:hover { background: var(--navy); border-color: var(--navy); color: var(--paper); transform: translateY(-2px); }
.dark .btn-line { color: var(--white); }
.dark .btn-line:hover { background: var(--paper); border-color: var(--paper); color: var(--base); }
.btn:active, .hdr-q:active, .mbar a:active { transform: translateY(1px) scale(.98); transition-duration: .08s; }
/* pepti-shine: a band of light crosses the pill every few seconds */
.btn-brass::after, .btn-dark::after, .hdr-q::after, .mbar .mb-q::after, .nav .nav-cta::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 60%) 0 0 / 220% 100% no-repeat;
  animation: pepti-shine 5.5s ease-in-out 1.2s infinite both; }
.btn-dark::after { background-image: linear-gradient(100deg, rgba(232,112,42,0) 40%, rgba(232,112,42,.55) 50%, rgba(232,112,42,0) 60%); }
@keyframes pepti-shine { 0%, 62% { background-position: 120% 0; } 88%, 100% { background-position: -120% 0; } }

/* ---------------------------------------------------------------- containers: every section is a rounded card on the cream page */
main > .blk { position: relative; margin: var(--gap) var(--gap) 0; border-radius: var(--rc); background: var(--white); padding: var(--pad) 0; }
main > .blk.dark { background: var(--base); color: var(--white); }
main > .blk.ink { background: var(--ink); color: var(--white); }
main > .blk.field { background: var(--orange); color: var(--base); }
main > .blk.bare { background: none; border-radius: 0; margin-left: 0; margin-right: 0; }
.dark h2, .dark h3 { color: var(--white); }
.field .eyebrow { color: var(--base); }
.prose > p { max-width: 64ch; }
.lead-dark { font-size: 17px; margin-bottom: 16px; }
.blk.blk-seo { padding: 24px 0; }

/* check rows: soft pills with an orange check */
.ticks { display: grid; gap: 8px; }
.ticks li { position: relative; padding: 13px 18px 13px 50px; border-radius: 22px; background: var(--paper); font-weight: 500; line-height: 24px; }
.ticks li::before { content: ""; position: absolute; left: 14px; top: 13px; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); }
.ticks li::after { content: ""; position: absolute; left: 23px; top: 18px; width: 6px; height: 11px; border: solid var(--base); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ticks-sm li { font-size: 16px; padding-top: 10px; padding-bottom: 10px; }
.ticks-sm li::before { top: 10px; }
.ticks-sm li::after { top: 15px; }
.dark .ticks li { background: rgba(255,255,255,.06); color: var(--on-ink); }
.dark .ticks li::after { border-color: var(--base); }

/* steps: numbered cards, the order is real */
.steps { display: grid; gap: 10px; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: start; padding: 18px; border-radius: var(--rs);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.step-n { font: 700 30px/1 var(--display); color: var(--orange); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.04em; }
.step h3 { margin: 0 0 4px; }
.step p { color: var(--muted); font-size: 16px; line-height: 24px; }
.dark .step p { color: var(--on-ink); }
.blk-steps:not(.dark) .step { background: var(--paper); border-color: transparent; }

/* materials: tinted tiles */
.mats { display: grid; gap: 10px; }
.mat { padding: 18px 20px; border-radius: var(--rs); background: var(--tint-a); }
.mat:nth-child(3n+2) { background: var(--tint-b); }
.mat:nth-child(3n) { background: var(--tint-c); }
.mat h3 { margin-bottom: 2px; font: 700 17px/24px var(--display); letter-spacing: -.02em; }
.mat h3 a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -8px; }
.mat p { font-size: 16px; line-height: 24px; color: #3E4654; }

/* quote contents and price rows */
.prows { display: grid; gap: 8px; }
.prows li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 18px; border-radius: var(--rs); background: var(--paper); }
.p-l { grid-column: 1 / -1; font: 650 17px/24px var(--sans); }
.p-u { color: var(--muted); font-size: 15px; line-height: 22px; }
.p-v { font-weight: 700; white-space: nowrap; }
.p-h { margin: 24px 0 10px; font: 700 18px/24px var(--display); letter-spacing: -.02em; }
.blk-price .btn { width: 100%; margin-top: 20px; }

.answer { font-size: 19px; line-height: 29px; font-weight: 500; }
.byline { color: var(--muted); font-size: 14px; line-height: 20px; margin-bottom: 12px; }
.seo summary { list-style: none; cursor: pointer; min-height: 48px; display: flex; align-items: center; }
.seo summary::-webkit-details-marker { display: none; }
.seo summary h2 { margin: 0; text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 6px; }
.seo[open] summary { margin-bottom: 12px; }
.seo p { color: var(--muted); }

.tbl { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--rs); background: var(--paper); }
.tbl.tbl-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0,0,0,.25)); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0,0,0,.25)); }
.tbl table { border-collapse: collapse; min-width: 100%; font-size: 15px; line-height: 21px; }
.tbl th, .tbl td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); min-width: 8.5em; }
.tbl thead th { background: var(--base); color: var(--white); font-weight: 600; white-space: nowrap; }
.tbl tbody th { font-weight: 700; min-width: 10.5em; }
.tbl tr:last-child > * { border-bottom: 0; }

/* services grid: tinted cards, the photo in a rounded inner frame */
.cards { display: grid; gap: 8px; }
.card { display: grid; gap: 2px; align-content: center; min-height: 64px; padding: 14px 18px 14px 40px; position: relative; border-radius: var(--rs);
  background: var(--paper); color: var(--navy); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.card::before { content: ""; position: absolute; left: 18px; top: 24px; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.card-img { padding: 10px; border-radius: 26px; background: var(--tint-a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.card-img::before { display: none; }
.card-img.t1 { background: var(--tint-b); }
.card-img.t2 { background: var(--tint-c); }
.card-frame { position: relative; overflow: hidden; border-radius: 18px; }
.card-frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .9s var(--ease); }
.card-cap { display: grid; gap: 2px; padding: 12px 8px 6px; }
.card-t { font: 700 17px/23px var(--display); letter-spacing: -.02em; color: var(--navy); }
.card-l { font-size: 15px; line-height: 21px; color: #3E4654; }
.card-p { font-size: 15px; font-weight: 700; }
a.card:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -24px rgba(10,15,26,.5); }
a.card:hover .card-frame img { transform: scale(1.05); }
a.card .card-t { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
@media (max-width: 899px) {
  .cards:has(> .card-img:nth-child(3)) { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 8px; scroll-padding: 0 var(--g); }
  .cards:has(> .card-img:nth-child(3))::-webkit-scrollbar { display: none; }
  .cards > .card-img { flex: 0 0 78%; scroll-snap-align: start; }
}
.rv blockquote { margin: 0 0 8px; }
.rv figcaption { color: var(--muted); font-size: 14px; }

/* FAQ: rounded rows, the answer slides open */
.faq { display: grid; gap: 8px; }
.qa { border-radius: var(--rs); background: var(--paper); transition: background-color .3s; }
.qa[open] { background: var(--tint-b); }
.qa summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; min-height: 56px; padding: 14px 60px 14px 20px;
  font: 650 17px/24px var(--sans); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before { content: ""; position: absolute; right: 12px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; background: var(--white); }
.qa summary::after { content: ""; position: absolute; right: 23px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--orange-ink), var(--orange-ink)) center / 14px 2px no-repeat, linear-gradient(var(--orange-ink), var(--orange-ink)) center / 2px 14px no-repeat;
  transition: transform .45s var(--ease); }
.qa[open] summary::after { transform: rotate(135deg); }
.qa p { padding: 0 20px 18px; color: #3E4654; }
.qa::details-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease), content-visibility .5s allow-discrete; }
.qa[open]::details-content { grid-template-rows: 1fr; }
.qa::details-content > * { min-height: 0; overflow: hidden; }
.qa p { min-height: 0; overflow: hidden; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--paper); color: var(--navy);
  font-size: 15px; font-weight: 500; text-decoration: none; transition: background-color .3s, color .3s, transform .4s var(--ease); }
a.chip { background: var(--base); color: var(--white); font-weight: 600; }
a.chip:hover { background: var(--orange); color: var(--base); transform: translateY(-2px); }
.src li { padding: 4px 0; font-size: 15px; line-height: 22px; }
.src a { display: inline-flex; min-height: 44px; align-items: center; }
.blk-contact .chan { display: grid; gap: 12px; }

/* call to action: black-navy with a glow rising from below */
.blk-cta { overflow: clip; isolation: isolate; text-align: center; }
.blk-cta .eyebrow { justify-content: center; }
.blk-cta .eyebrow::before { display: none; }
.blk-cta::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -70%; width: 150%; aspect-ratio: 2; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232,112,42,.5), rgba(232,112,42,0)); animation: breatheX 7s ease-in-out infinite; pointer-events: none; }
@keyframes breatheX { 0%, 100% { opacity: .55; transform: translateX(-50%) scale(.94); } 50% { opacity: 1; transform: translateX(-50%) scale(1.06); } }
.cta-t { color: var(--on-ink); margin: 0 auto 22px; max-width: 34em; }
.blk-cta .btns { justify-content: center; }

/* ---------------------------------------------------------------- lead form */
.lf { display: grid; gap: 12px; padding: 18px; border-radius: var(--rc); background: var(--white); color: var(--navy); }
.lf-t { margin: 0; font: 700 19px/24px var(--display); letter-spacing: -.02em; }
.lf label { display: grid; gap: 4px; min-width: 0; }
.lf-l { font-size: 14px; line-height: 20px; font-weight: 600; }
.lf-h { font-size: 13px; line-height: 18px; color: var(--muted); }
.lf input, .lf select, .lf textarea { width: 100%; min-height: 50px; padding: 0 16px; border: 1px solid var(--field); border-radius: 16px;
  font-size: 16px; font-weight: 400; background: var(--white); color: var(--navy); transition: border-color .25s, box-shadow .25s; }
.lf textarea { padding: 12px 16px; min-height: 92px; resize: vertical; }
.lf input:focus, .lf select:focus, .lf textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(232,112,42,.35); }
.lf-file { position: relative; display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 6px; border: 1px dashed var(--field); border-radius: 16px; }
.lf-file input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; min-height: 0; }
.lf-fbtn { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; background: var(--base); color: var(--white);
  font-weight: 600; font-size: 15px; white-space: nowrap; }
.lf-fname { font-size: 15px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lf-file:focus-within { box-shadow: 0 0 0 3px rgba(232,112,42,.45); }
.lf .btn { width: 100%; }
.lf .bad { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.lf-contact { display: grid; gap: 2px; }
.lf-swap { display: none; justify-self: start; background: none; border: 0; padding: 0 2px; min-height: 44px; min-width: 44px; color: var(--orange-ink);
  font-size: 14px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.js .lf-swap { display: inline-flex; align-items: center; }
.js .lf-contact { gap: 0; }
.lf-more { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.lf-more summary { list-style: none; min-height: 48px; display: flex; align-items: center; font-weight: 600; font-size: 15px; color: var(--orange-ink); cursor: pointer; }
.lf-more summary::-webkit-details-marker { display: none; }
.lf-more[open] { padding-bottom: 12px; }
.lf-more[open] label + label { margin-top: 12px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { font-size: 15px; line-height: 22px; font-weight: 600; margin: 0; }
.form-msg:empty { display: none; }
.form-msg.err { color: var(--err); }
.form-msg.ok { color: var(--base); background: var(--tint-a); padding: 12px 16px; border-radius: 16px; }
.lf-files:empty { display: none; }
.lf-files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.lf-files li.bad { box-shadow: none; border-color: var(--line); }
.lf-files li.bad .lf-fn { color: var(--err); }
.lf-fn { min-width: 0; overflow-wrap: anywhere; }
.lf-files button { flex: none; min-height: 44px; min-width: 44px; padding: 0 8px; background: none; border: 0; color: var(--orange-ink); font-weight: 600; text-decoration: underline; cursor: pointer; }
.lf button[type=submit]:disabled { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- footer: the last dark container, the wordmark set large */
.ftr { margin: var(--gap); border-radius: var(--rc); background: var(--base); color: var(--on-ink); overflow: clip;
  padding: 36px 0 calc(24px + var(--mbar) + env(safe-area-inset-bottom)); font-size: 15px; line-height: 22px; }
.ftr a { color: var(--white); }
.ftr-in { display: grid; gap: 18px; }
.f-logo { margin: 0 0 6px; font: 400 min(16cqi, 180px)/.9 var(--brand); letter-spacing: -.01em; color: transparent;
  -webkit-text-stroke: 1px rgba(232,112,42,.55); white-space: nowrap; }
.f-col { container-type: inline-size; min-width: 0; }
.f-name { font-family: var(--display); font-weight: 700; line-height: 1.3; color: var(--white); --fs: 20px; margin-bottom: 6px; letter-spacing: -.02em; }
.f-name.fit-long { font-family: var(--sans); font-size: min(var(--fs), calc(100cqi / var(--ns))); }
.f-nap { display: flex; flex-wrap: wrap; gap: 0 18px; }
.f-nap a, .f-links a { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; }
.f-links { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; border-top: 1px solid rgba(255,255,255,.12); padding-top: 4px; }
.f-links a { text-decoration: none; }
.f-links a:hover { color: var(--orange); }
.f-h { color: var(--white); font: 400 12px/16px var(--brand); letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.f-areas { line-height: 26px; }
.f-areas a { text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.35); }
.f-note { color: var(--mist); }
.f-legal { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.12); color: var(--mist); font-size: 14px; }

/* ---------------------------------------------------------------- sticky phone bar: pills */
.mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); pointer-events: none; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.mbar-2 { grid-template-columns: 1.2fr 1fr; }
.mbar a { pointer-events: auto; position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; justify-content: center; min-height: 54px;
  border-radius: 999px; font-weight: 650; font-size: 16px; text-decoration: none; color: var(--white); background: var(--base); white-space: nowrap;
  box-shadow: 0 10px 26px -8px rgba(10,15,26,.5); }
.mbar .mb-q { background: var(--orange); color: var(--base); }
.js .mbar { transform: translateY(110%); opacity: 0; transition-duration: .2s; }
.js .mbar.show { transform: none; opacity: 1; transition-duration: .5s; }
.js body.typing .mbar { transform: translateY(110%); opacity: 0; transition-duration: .2s; }

/* ---------------------------------------------------------------- swipe rows (explore, before and after) */
.xrow, .barow { display: flex; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding: 8px var(--edge) 28px; scroll-padding: 0 var(--edge); }
.xrow::-webkit-scrollbar, .barow::-webkit-scrollbar { display: none; }
.xrow.dragging { scroll-snap-type: none; cursor: grabbing; }
.xrow.dragging a { pointer-events: none; }

/* explore: tall tinted cards, the photo in a rounded inner frame with drawn light around the subject */
.blk-explore { padding-top: 56px; padding-bottom: 20px; }
.xrow { gap: 14px; }
.xcard { flex: 0 0 74%; max-width: 360px; scroll-snap-align: start; display: flex; flex-direction: column; padding: 10px; border-radius: 30px;
  background: var(--tint-a); color: var(--navy); text-decoration: none; box-shadow: 0 22px 44px -28px rgba(10,15,26,.45), inset 0 0 0 1px rgba(255,255,255,.6);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.xcard.t1 { background: var(--tint-b); }
.xcard.t2 { background: var(--tint-c); }
.xcard:hover { transform: translateY(-8px); box-shadow: 0 34px 56px -30px rgba(10,15,26,.55), inset 0 0 0 1px rgba(255,255,255,.6); }
.xc-frame { position: relative; isolation: isolate; overflow: hidden; border-radius: 22px; aspect-ratio: 1 / 1.1; background: var(--cognac); }
.xc-frame .pic, .xc-frame picture { position: absolute; inset: 0; }
.xc-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.xcard:hover .xc-frame img { transform: scale(1.06); }
.xc-frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,15,26,.55) 0%, rgba(10,15,26,0) 45%), radial-gradient(60% 50% at 50% 45%, rgba(232,112,42,.18), rgba(232,112,42,0)); }
/* the drawn ambient shapes: concentric glowing rounded outlines, breathing */
.xc-amb, .xc-amb::before, .xc-amb::after { position: absolute; border-radius: 44%; border: 1.5px solid rgba(255,232,210,.8);
  box-shadow: 0 0 20px 2px rgba(255,160,96,.55), inset 0 0 20px 2px rgba(255,160,96,.4); }
.xc-amb { z-index: 2; inset: 14% 18% 12%; pointer-events: none; mix-blend-mode: screen; animation: amb 7s ease-in-out infinite; }
.xc-amb::before { content: ""; inset: -12% -14%; opacity: .55; }
.xc-amb::after { content: ""; inset: 16% 18%; opacity: .7; border-radius: 40%; }
.xcard.t1 .xc-amb { animation-delay: -2.3s; }
.xcard.t2 .xc-amb { animation-delay: -4.6s; }
@keyframes amb { 0%, 100% { transform: scale(.97); opacity: .75; } 50% { transform: scale(1.03); opacity: 1; } }
.xc-name { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14%; padding: 0 16px; text-align: center; color: var(--white);
  font: 700 25px/1.1 var(--display); letter-spacing: -.03em; text-shadow: 0 2px 16px rgba(10,15,26,.6); }
.xc-frame .illus { z-index: 4; }
.xc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 6px 4px 8px; }
.xc-t { font: 650 16px/20px var(--sans); }
.xc-go { flex: none; display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: var(--white);
  font: 650 13px/1 var(--sans); box-shadow: 0 6px 14px -8px rgba(10,15,26,.45); transition: background-color .3s, color .3s; }
.xcard:hover .xc-go { background: var(--base); color: var(--white); }

/* ---------------------------------------------------------------- before and after */
.blk-ba { overflow: clip; }
.blk-ba h2 { color: var(--white); }
.ba-lead { color: var(--mist); margin: -2px 0 8px; }
.barow { gap: 14px; padding-top: 16px; padding-bottom: 8px; }
.bacard { flex: 0 0 88%; max-width: 640px; scroll-snap-align: center; }
.barow.one { justify-content: center; }
.barow.one .bacard { flex-basis: 100%; }
.barow.dragging { scroll-snap-type: none; cursor: grabbing; }
.barow.dragging .ts-shot { pointer-events: none; }
/* before and after: phones stack the frames as a curtain, After clipped from the divider at --x to the right edge */
.ts-stage { --x: 50%; position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 20px; background: var(--navy); cursor: ew-resize;
  -webkit-user-select: none; user-select: none; }
.ts-shot { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; outline-offset: -3px; }
.ts-shot .pic, .ts-shot picture { position: absolute; inset: 0; }
.ts-shot img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; transition: transform .8s var(--ease); }
.ts-a { clip-path: inset(0 0 0 var(--x)); }
.ts-ease .ts-a { transition: clip-path .4s var(--ease); }
.ts-ease .ts-h { transition: left .4s var(--ease); }
.ts-shot:focus-visible { outline: 3px solid var(--orange); }
/* the divider: a 44 px touch strip, a hairline and a round knob; only this strip takes the finger, the row scrolls elsewhere */
.ts-h { position: absolute; z-index: 4; top: 0; bottom: 0; left: var(--x); width: 44px; margin-left: -22px; touch-action: none; cursor: ew-resize; outline: 0; }
.ts-h::before { content: ""; position: absolute; top: 0; bottom: 0; left: 21px; width: 2px; background: var(--white); box-shadow: 0 0 10px rgba(10,15,26,.35); }
.ts-h i { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--white);
  box-shadow: 0 6px 18px -6px rgba(10,15,26,.6); transition: transform .25s var(--ease); }
.ts-h i::before, .ts-h i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.ts-h i::before { left: 7px; border-right-color: var(--base); }
.ts-h i::after { right: 7px; border-left-color: var(--base); }
.ts-drag .ts-h i, .ts-h:focus-visible i { transform: scale(1.12); }
.ts-h:focus-visible i { outline: 3px solid var(--orange); outline-offset: 2px; }
.ba-tag { position: absolute; top: 12px; z-index: 3; padding: 6px 10px; border-radius: 999px; font: 400 10px/1 var(--brand); letter-spacing: .16em; text-transform: uppercase;
  color: var(--white); background: rgba(10,15,26,.72); pointer-events: none; }
.ba-tag-b { left: 12px; }
.ba-tag-a { right: 12px; background: var(--orange); color: var(--base); }
.ts-a .illus { opacity: .5; font-size: 10px; }
.ts-b .illus { display: none; }
@media (min-width: 900px) {
  .bacard { flex-basis: min(980px, 82vw); max-width: none; }
  .barow.one .bacard { flex-basis: min(980px, 100%); }
  .ts-stage { display: flex; gap: 10px; aspect-ratio: 2.3 / 1; overflow: visible; background: none; border-radius: 0; cursor: default; }
  .ts-shot { position: relative; inset: auto; flex: 1 1 0; min-width: 0; opacity: 1; visibility: visible; border-radius: 22px;
    background: var(--navy); cursor: zoom-in; transition: flex-grow .7s var(--ease); }
  .ts-stage:hover .ts-shot:hover, .ts-shot:focus-visible { flex-grow: 1.8; }
  .ts-stage:hover .ts-shot:hover img, .ts-shot:focus-visible img { transform: scale(1.03); }
  .ts-a { clip-path: none; }
  .ts-h { display: none; }
  .ba-tag { padding: 7px 12px; font-size: 11px; }
  .ba-tag-a { right: auto; left: 12px; }
  .ts-b .illus { display: block; }
  .ts-a .illus { opacity: .7; font-size: 11px; }
  /* four pairs and more: a two-column grid on desktop, the swipe row stays on phones */
  .barow.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; overflow: visible;
    max-width: 1280px; margin: 0 auto; scroll-snap-type: none; cursor: default; }
  .barow.grid .bacard { flex: none; max-width: none; }
  .barow.grid .ts-stage { aspect-ratio: 2.1 / 1; }
}
.ba-l { margin: 12px 6px 0; color: var(--on-ink); font: 600 15px/21px var(--sans); text-align: center; }

/* ---------------------------------------------------------------- marquee bands: words left, photos right */
.blk-marq { padding: 0 !important; }
.mq { display: flex; overflow: hidden; }
.mq-track { display: flex; flex: none; align-items: center; width: max-content; animation: scrollLeft 42s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-words { margin: 0 var(--gap); padding: 20px 0; border-radius: var(--rc); background: var(--orange); box-shadow: inset 0 0 60px rgba(122,44,4,.25); }
.mq-words span { padding: 0 24px; font: 700 32px/1.1 var(--display); letter-spacing: -.03em; color: var(--base); white-space: nowrap; }
.mq-words i { flex: none; width: 12px; height: 12px; background: var(--base); transform: rotate(45deg); }
.mq-pics { margin-top: var(--gap); }
.mq-pics .mq-track { animation-name: scrollRight; animation-duration: 70s; }
.mq-p { position: relative; flex: none; width: 200px; margin-right: 10px; overflow: hidden; border-radius: 22px; }
.mq-p img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@keyframes scrollLeft { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes scrollRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes scrollUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes scrollDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* ---------------------------------------------------------------- pinned clean room: the photo stays, the three lines play across two screens */
.blk-pin { padding: 0 !important; overflow: clip; }
.pin-stick { position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; border-radius: inherit; }
.pin-media { position: absolute; inset: 0; }
.pin-media .pic, .pin-media picture { height: 100%; }
.pin-media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); transition: transform 1.6s var(--ease); }
.blk-pin.s1 .pin-media img { transform: scale(1.05) translateX(-1.5%); }
.blk-pin.s2 .pin-media img { transform: scale(1.0); }
.pin-media::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(10,15,26,.96) 0%, rgba(10,15,26,.8) 38%, rgba(10,15,26,.2) 70%, rgba(10,15,26,.45) 100%); }
.pin-media .illus { z-index: 2; top: 0; bottom: auto; right: 0; border-radius: 0 0 0 8px; }
.pin-txt { position: relative; z-index: 1; padding-top: 120px; padding-bottom: 36px; }
.pin-lines { display: grid; }
.pin-lines li { display: grid; grid-template-columns: 36px 1fr; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.16);
  font: 600 19px/1.3 var(--display); letter-spacing: -.02em; color: var(--white); transition: color .7s var(--ease), transform .7s var(--ease); }
.pin-n { font: 400 13px/1.9 var(--brand); color: var(--orange); }
.pin-steps { display: none; }
.mo .blk-pin { height: 200svh; }
.mo .pin-stick { position: sticky; top: 0; height: 100svh; min-height: 0; }
.mo .pin-steps { display: grid; grid-template-rows: repeat(3, 1fr); position: absolute; inset: 0; pointer-events: none; }
.mo .pin-lines li { color: rgba(255,255,255,.3); }
.mo .pin-lines li.on { color: var(--white); transform: translateX(6px); }

/* ---------------------------------------------------------------- colors and combinations: two moving columns on the orange field */
.blk-gal.field { overflow: clip; }
.gal-in { display: grid; gap: 22px; }
.gal-head { container-type: inline-size; }
.gal-list { display: grid; gap: 6px; }
.gal-list li { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; line-height: 22px; }
.gal-list li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--base); }
.gal-cols { display: grid; gap: 10px; margin: 0 calc(-1 * var(--g)); }
.gcol { overflow: hidden; }
.gtrack { display: flex; width: max-content; animation: scrollLeft 46s linear infinite; }
.gcol-1 .gtrack { animation-name: scrollRight; animation-duration: 54s; }
.gal-move .gal-i { position: relative; flex: none; width: 210px; margin-right: 10px; overflow: hidden; border-radius: 22px; box-shadow: 0 16px 30px -18px rgba(10,15,26,.55); }
.gal-move .gal-i img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.gal-move .gal-c { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; padding: 7px 12px; border-radius: 14px; background: rgba(255,255,255,.92);
  color: var(--base); font: 600 12px/16px var(--sans); }
.gal-move .illus { top: 0; bottom: auto; border-radius: 0 0 0 8px; }
/* three or fewer photos: a still row */
.gal:not(.gal-cols) { display: grid; gap: 12px; }
.gal .gal-i .pic, .gal .gal-i picture { overflow: hidden; border-radius: 22px; }
.gal .gal-i img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .9s var(--ease); }
.gal .gal-i:hover img { transform: scale(1.04); }
.gal .gal-c { margin: 10px 4px 0; font: 600 14px/20px var(--sans); }
@media (max-width: 899px) {
  .gal { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 4px; scroll-padding: 0 var(--g); }
  .gal::-webkit-scrollbar { display: none; }
  .gal .gal-i { flex: 0 0 80%; scroll-snap-align: start; }
  .gal-1 .gal-i { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- cutouts on black-navy: the product floats, drifts with the scroll */
.blk-cut { overflow: clip; isolation: isolate; background: radial-gradient(80% 60% at 70% 45%, #16233A 0%, var(--base) 68%) !important; }
.cut-in { display: grid; gap: 8px; }
.cut-txt { container-type: inline-size; min-width: 0; }
@media (max-width: 899px) { .cut-art { order: -1; margin-top: -12px; } .gal-list { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }
.cut-art { position: relative; height: 380px; margin: 0 calc(-1 * var(--g)); }
.cut { position: absolute; transform: translate3d(0, calc(var(--py, 0) * var(--sp) * 1px), 0); will-change: transform; }
.cut-f { animation: bob 8s ease-in-out infinite alternate; }
.cut-2 .cut-f { animation-delay: -3s; }
.cut-3 .cut-f { animation-delay: -5s; }
@keyframes bob { from { transform: translateY(-8px) rotate(-.8deg); } to { transform: translateY(8px) rotate(.8deg); } }
.cut img { width: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(closest-side, #000 58%, rgba(0,0,0,0) 100%); }
.cut-1 { left: 8%; right: 8%; top: 0; z-index: 2; }
.cut-2 { left: -6%; width: 54%; bottom: 0; z-index: 3; }
.cut-3 { right: -6%; width: 54%; bottom: 18px; z-index: 1; }
.cut-glow { position: absolute; z-index: 0; inset: 12% 12% 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(232,112,42,.42), rgba(232,112,42,0));
  filter: blur(20px); animation: breathe 8s ease-in-out infinite; pointer-events: none; }
.cut-list { display: grid; gap: 8px; margin-top: 8px; }
.cut-list li { padding: 16px 18px; border-radius: var(--rs); background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.cut-list h3 { font: 700 17px/24px var(--display); letter-spacing: -.02em; margin-bottom: 2px; }
.cut-list h3 a { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -8px; }
.cut-list p { color: var(--on-ink); font-size: 16px; line-height: 24px; }

/* ---------------------------------------------------------------- showcase, still version */
.blk-show { overflow: clip; padding-top: 0 !important; }
.show-media { position: relative; }
.show-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.show-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--base) 0%, rgba(10,15,26,0) 40%); pointer-events: none; }
.show-in { padding-top: 24px; }
.show--plain .show-in { padding-top: var(--pad); }
.show-txt { container-type: inline-size; }
.facts li { padding: 14px 0; border-top: 1px solid rgba(255,255,255,.16); color: var(--on-ink); }

/* ---------------------------------------------------------------- scroll reveals (motion.js adds .rv, then .in) */
.rv { opacity: 0; transform: translateY(48px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
.card.rv.in, .xcard.rv.in { transition: opacity .9s var(--ease), transform .6s var(--ease), box-shadow .6s var(--ease); }
/* the logo catches the light once on load */
.logo { background: linear-gradient(100deg, #fff 0% 42%, #FFB27A 50%, #fff 58% 100%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; animation: logoShine 1.6s ease-out .3s both; }
@keyframes logoShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }

/* ---------------------------------------------------------------- desktop */
@media (min-width: 900px) {
  :root { --g: 40px; --pad: 88px; --gap: 14px; --rc: 40px; --rs: 24px; }
  body { font-size: 18px; line-height: 28px; }
  .mbar { display: none; }
  h1.fit { --fs: 80px; line-height: 1.02; margin-bottom: 22px; }
  h2.fit { --fs: 56px; line-height: 1.06; margin-bottom: 24px; }
  h2.fit.h-xl { --fs: 96px; }
  h2.fit.h-sm { --fs: 26px; }
  .eyebrow { font-size: 13px; margin-bottom: 18px; }

  .hdr { top: 14px; }
  .hdr-in { height: 64px; padding: 0 8px; }
  .hdr.is-scrolled { top: 10px; }
  .hdr.is-scrolled .hdr-in { height: 56px; }
  .logo { font-size: 26px; }
  .mb-t { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .hdr-q { min-height: 46px; padding: 0 22px; font-size: 15px; }
  .nav.open { grid-template-columns: repeat(4, 1fr); padding: 14px; gap: 4px; }
  .nav .nav-cta { grid-column: 1 / -1; min-height: 56px; }

  /* hero: text left on the field, the photo composition right, bleeding off the edges, credentials across the bottom */
  .hero { padding: var(--gap) var(--gap) 0; }
  .hero-field { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-rows: 1fr auto; column-gap: 24px;
    min-height: clamp(640px, calc(100svh - 28px), 920px); padding: 120px 0 0 56px; border-radius: 40px; box-shadow: inset 0 0 160px rgba(122,44,4,.32); }
  .hero-art { grid-column: 2; grid-row: 1 / span 2; height: auto; margin: -120px -2% 0 0; }
  .hero--home .hero-blob figcaption { bottom: 76px; }
  .hero-text { grid-column: 1; grid-row: 1; align-self: center; padding-bottom: 56px; }
  .hero--plain .hero-field { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 150px 56px 64px; }
  .hero--plain .hero-text { padding-bottom: 0; }
  .lead { font-size: 20px; line-height: 30px; margin-bottom: 30px; }
  .hero--form .hero-go { display: none; }
  .hero--home .hero-go { display: inline-flex; }
  .creds { grid-column: 1 / -1; grid-row: 2; margin: 0 0 0 -56px; padding: 0 40px; }
  .cr-t { grid-template-columns: repeat(4, 1fr); }
  .cr-dup { display: none !important; }
  .creds li { justify-content: center; min-height: 76px; border-left: 1px solid rgba(255,255,255,.12); font-size: 12px; letter-spacing: .16em; }
  .creds li:first-child { border-left: 0; }
  .hero-form { margin-top: var(--gap); padding: 40px 48px; border-radius: 40px; }
  .hero-form .lf { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 14px; align-items: start; }
  .hero-form .lf-t { grid-column: 1 / -1; font-size: 34px; line-height: 40px; margin-bottom: 6px; }
  .hero-form .lf-photos { grid-column: 1; grid-row: 2; }
  .hero-form .lf-files { grid-column: 1; grid-row: 3; }
  .hero-form .lf-contact { grid-column: 2; grid-row: 2; }
  .hero-form .lf > label:not(.lf-photos) { grid-column: 3; grid-row: 2; }
  .hero-form .lf-more { grid-column: 1 / span 2; grid-row: 4; }
  .hero-form .lf .btn-brass { grid-column: 3; grid-row: 4; align-self: start; }
  .hero-form .form-msg { grid-column: 1 / -1; }
  .hero-form .lf-wa { grid-column: 3; }

  .btns { display: flex; flex-wrap: wrap; gap: 14px; }
  .btn { min-height: 56px; padding: 0 32px; font-size: 17px; }

  .ticks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .ticks li { padding: 18px 22px 18px 58px; border-radius: 26px; }
  .ticks li::before { left: 20px; top: 20px; }
  .ticks li::after { left: 29px; top: 25px; }
  .ticks-sm { grid-template-columns: 1fr; }
  .ticks-sm li { padding-top: 12px; padding-bottom: 12px; }
  .ticks-sm li::before { top: 14px; }
  .ticks-sm li::after { top: 19px; }
  .mats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .mat { padding: 26px 28px; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .step { grid-template-columns: 1fr; gap: 18px; padding: 28px; }
  .step-n { font-size: 56px; }
  /* quote contents left, what moves the price right */
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) { display: grid; grid-template-columns: 1fr 1fr; column-gap: 48px; align-items: start; }
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) > * { grid-column: 1 / -1; }
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) > .ticks:not(.ticks-sm) { grid-column: 1; grid-row: 3 / span 2; }
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) > .p-h { grid-column: 2; grid-row: 3; margin-top: 0; }
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) > .ticks-sm { grid-column: 2; grid-row: 4; }
  .blk-price .wrap:has(> .ticks:not(.ticks-sm)) > .btn { justify-self: start; }
  .blk-price .ticks { grid-template-columns: 1fr; }
  .blk-price .btn { width: auto; }
  .prows { grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .prows li { grid-template-columns: 1fr auto; align-items: baseline; }
  .p-l { grid-column: 1; grid-row: 1; }
  .p-u { grid-column: 1; grid-row: 2; }
  .p-v { grid-column: 2; grid-row: 1; text-align: right; }
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .card-img { padding: 12px; border-radius: 32px; }
  .card-frame { border-radius: 22px; }
  .card-cap { padding: 16px 10px 8px; }
  .card-t { font-size: 20px; line-height: 26px; }
  .faq { max-width: 920px; }
  .blk-areas .chips { max-width: 920px; }
  .blk-cta { padding: 120px 0; }
  .blk-contact .chan { grid-template-columns: repeat(4, max-content); }
  .ftr { margin: var(--gap); padding: 56px 0 40px; }
  .ftr-in { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; }
  .f-logo { grid-column: 1 / -1; margin-bottom: 8px; }

  .blk-explore { padding-top: 110px; padding-bottom: 40px; }
  .xrow { gap: 20px; scroll-snap-type: x proximity; cursor: grab; padding-bottom: 44px; }
  .xcard { flex: 0 0 360px; padding: 12px; border-radius: 34px; }
  .xc-frame { border-radius: 24px; }
  .xc-name { font-size: 30px; }
  .xc-foot { padding: 16px 8px 6px 10px; }
  .xc-t { font-size: 17px; }
  .barow { gap: 20px; padding-top: 28px; }
  .bacard { flex: 0 0 min(980px, 82vw); max-width: none; }
  .ba-l { font-size: 16px; }
  .mq-words { padding: 30px 0; }
  .mq-words span { font-size: 64px; padding: 0 40px; }
  .mq-words i { width: 18px; height: 18px; }
  .mq-p { width: 300px; margin-right: 14px; border-radius: 28px; }
  .pin-stick { align-items: center; }
  .pin-txt { padding-top: 110px; padding-bottom: 60px; max-width: var(--max); }
  .pin-txt > * { max-width: 720px; }
  .pin-lines li { grid-template-columns: 56px 1fr; padding: 22px 0; font-size: 30px; }
  .pin-media::after { background: linear-gradient(90deg, rgba(10,15,26,.95) 0%, rgba(10,15,26,.82) 40%, rgba(10,15,26,.15) 72%, rgba(10,15,26,.3) 100%); }
  .gal-move .gal-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 56px; align-items: center; }
  .gal-move .gal-cols { grid-template-columns: 1fr 1fr; gap: 16px; height: 680px; margin: calc(-1 * var(--pad)) 0;
    -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
  .gal-move .gtrack { flex-direction: column; width: auto; animation-name: scrollUp; animation-duration: 38s; }
  .gal-move .gcol-1 .gtrack { animation-name: scrollDown; animation-duration: 44s; }
  .gal-move .gal-i { width: auto; margin: 0 0 16px; border-radius: 28px; }
  .gal-list li { font-size: 18px; line-height: 26px; }
  .gal:not(.gal-cols) { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .cut-in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 40px; align-items: center; }
  .cut-art { height: 640px; margin: -40px 0; }
  .cut-1 { left: 8%; right: 14%; top: 0; }
  .cut-2 { left: -8%; width: 46%; bottom: 0; }
  .cut-3 { right: -14%; width: 50%; bottom: 150px; }
  .blk-show { min-height: 680px; display: flex; align-items: center; padding: 88px 0 !important; }
  .show-media { position: absolute; inset: 0; }
  .show-media .pic, .show-media picture { height: 100%; }
  .show-media img { height: 100%; aspect-ratio: auto; }
  .show-media::after { background: linear-gradient(90deg, rgba(10,15,26,.95) 0%, rgba(10,15,26,.8) 38%, rgba(10,15,26,.1) 70%); }
  .show-in { position: relative; padding-top: 0; }
  .show-txt { max-width: 640px; }
}
@media (min-width: 1500px) {
  .xcard { flex-basis: 380px; }
}
@media (hover: none) { .xrow { cursor: auto; } }
@media (max-width: 359px) { .f-name.fit-long { white-space: normal; font-size: 16px; } }

/* ---------------------------------------------------------------- package calculator: boat, level, add-ons, a live total */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lf.est { grid-template-columns: minmax(0, 1fr); padding: 0; background: transparent; }
.calc-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.cs { border-radius: var(--rs); background: var(--paper); }
.cs-h { margin: 0; font: inherit; }
.cs-t { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; min-height: 60px; padding: 8px 16px; border: 0; background: none; text-align: left; cursor: pointer; color: var(--navy); }
.cs-n { grid-row: span 2; width: 30px; height: 30px; border-radius: 50%; background: var(--base); color: var(--orange); font: 700 13px/30px var(--display); text-align: center; }
.cs-name { grid-column: 2; font: 700 17px/22px var(--display); letter-spacing: -.02em; }
.cs-v { grid-column: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: 15px; line-height: 20px; }
.cs-ch { grid-column: 3; grid-row: 1 / span 2; color: var(--orange-ink); font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.cs.open .cs-v, .cs.open .cs-ch, html:not(.js) .cs-v, html:not(.js) .cs-ch { display: none; }
.js .cs:not(.open) .cs-b { display: none; }
.cs.open .cs-n, html:not(.js) .cs-n { grid-row: auto; }
.cs-b { padding: 0 10px 14px; }
.cs fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bts { display: grid; gap: 6px; }
.bt, .lv, .lc, .aoc { position: relative; display: block; cursor: pointer; }
.bt input, .lv input, .lc input, .aoc input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bt-in { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; align-items: center; min-height: 64px; padding: 6px 12px 6px 6px;
  border-radius: 18px; background: var(--white); border: 2px solid transparent; transition: border-color .3s, box-shadow .3s, transform .3s var(--ease); }
.bt-in:not(:has(.bt-ico)) { grid-template-columns: minmax(0, 1fr); padding-left: 16px; }
.bt-ico, .tz-ico, .cut-ico, .how-ico { display: grid; place-items: center; overflow: hidden; background: var(--ibg, #0b0b0c); }
.bt-ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; }
.ico { width: 100%; height: 100%; object-fit: cover; }
.bt-t { font: 700 16px/21px var(--display); letter-spacing: -.02em; }
.bt-h { font-size: 14px; line-height: 19px; color: var(--muted); }
.bt input:checked + .bt-in { border-color: var(--orange); box-shadow: 0 12px 26px -16px rgba(232,112,42,.9); }
.bt:hover .bt-in { transform: translateY(-2px); }
.bt input:focus-visible + .bt-in, .lv input:focus-visible + .lv-in, .lc input:focus-visible + span, .aoc input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 3px; }
.lg { margin-top: 14px !important; }
.lg-l { padding: 0 4px 8px; font-size: 14px; font-weight: 600; color: var(--muted); }
.js .lg:not(.on) { display: none; }
.lcs { display: flex; flex-wrap: wrap; gap: 8px; }
.lc span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--white); border: 1px solid var(--line);
  font-weight: 600; font-size: 15px; transition: background-color .25s, color .25s; }
.lc input:checked + span { background: var(--base); border-color: var(--base); color: var(--white); animation: pop .4s var(--ease); }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.07); } 100% { transform: scale(1); } }

/* level cards: Basic cream, Premium navy, Ultra on the orange field */
.lvs { display: grid; gap: 10px; padding-top: 4px; }
.lv-in { position: relative; display: grid; gap: 4px; padding: 18px 18px 20px; border-radius: 24px; background: var(--tint-b); color: var(--navy);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.lv-1 .lv-in { background: var(--base); color: var(--white); }
.lv-2 .lv-in { background: var(--orange); color: var(--base); box-shadow: inset 0 0 60px rgba(122,44,4,.25); }
.lv-t { font: 700 22px/28px var(--display); letter-spacing: -.02em; }
.lv-g { font-size: 15px; line-height: 21px; opacity: .88; }
.lv-p { margin: 6px 0 4px; font: 800 18px/24px var(--sans); font-variant-numeric: tabular-nums; }
.lv-in::after { content: ""; position: absolute; top: 16px; right: 16px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid currentColor; opacity: .35;
  transition: background-color .3s, opacity .3s, border-color .3s; }
.lv input:checked + .lv-in { transform: translateY(-6px);
  box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--orange), 0 26px 48px -18px rgba(232,112,42,.95); }
.lv input:checked + .lv-in::after { opacity: 1; border-color: var(--orange); background: var(--orange)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%230A0F1A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; }
.lv-2 input:checked + .lv-in::after { border-color: var(--base); background-color: var(--base);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23E8702A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.lv-2 input:checked + .lv-in { box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--base), 0 26px 48px -18px rgba(232,112,42,.95), inset 0 0 60px rgba(122,44,4,.25); }

/* small check dots of the design system: they tick in when the list comes into view */
.cdots { display: grid; gap: 6px; margin-top: 4px; }
.cdots > span { position: relative; padding-left: 28px; font-size: 15px; line-height: 21px; }
.cdots > span::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%; background: var(--orange); }
.cdots > span::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 9px; border: solid var(--base); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.lv-2 .cdots > span::before { background: var(--base); }
.lv-2 .cdots > span::after { border-color: var(--orange); }
.mo .cdots > span::before, .mo .cdots > span::after, .mo .ticks li::before, .mo .ticks li::after { scale: 0; }
.mo .tk > span::before, .mo .tk > span::after, .mo .tk > li::before, .mo .tk > li::after { animation: tick .55s cubic-bezier(.34,1.56,.64,1) both; scale: 1; }
.mo .tk > :nth-child(2)::before, .mo .tk > :nth-child(2)::after { animation-delay: .09s; }
.mo .tk > :nth-child(3)::before, .mo .tk > :nth-child(3)::after { animation-delay: .18s; }
.mo .tk > :nth-child(4)::before, .mo .tk > :nth-child(4)::after { animation-delay: .27s; }
@keyframes tick { from { scale: 0; } to { scale: 1; } }

/* add-ons: chips that pop when picked, a panel count beside the enclosure */
.aos { display: grid; gap: 8px; }
.ao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.aoc { flex: 1 1 200px; }
.aoc span { display: grid; min-height: 52px; align-content: center; padding: 7px 18px; border-radius: 22px; background: var(--white); border: 1px solid var(--line);
  transition: background-color .25s, color .25s, border-color .25s; }
.aoc b { font-size: 15px; line-height: 20px; font-weight: 650; }
.aoc small { font-size: 13px; line-height: 18px; color: var(--muted); }
.aoc input:checked + span { background: var(--base); border-color: var(--base); color: var(--white); animation: pop .4s var(--ease); }
.aoc input:checked + span small { color: var(--mist); }
.cnt { display: inline-flex; align-items: center; gap: 6px; }
.ao:not(:has(input:checked)) .cnt { display: none; }
.cnt button { position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--base); color: var(--white); cursor: pointer; }
.cnt i { position: absolute; left: 15px; top: 21px; width: 14px; height: 2px; background: currentColor; }
.cnt .pl::after { content: ""; position: absolute; left: 6px; top: -6px; width: 2px; height: 14px; background: currentColor; }
.cnt input { width: 56px; min-height: 44px; padding: 0; border: 1px solid var(--field); border-radius: 14px; background: var(--white); text-align: center; font-weight: 700;
  -moz-appearance: textfield; appearance: textfield; }
.cnt input::-webkit-outer-spin-button, .cnt input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* summary: boat, level, add-ons, the total range, one line of fine print, the request button */
.calc-sum { container-type: inline-size; display: grid; gap: 4px; padding: 20px; border-radius: var(--rc); background: var(--base); color: var(--white);
  box-shadow: 0 30px 60px -34px rgba(10,15,26,.8); }
.sum-t { margin: 0 0 6px; font: 700 20px/26px var(--display); letter-spacing: -.02em; }
.sum-l { display: grid; gap: 6px; margin: 0; }
.sum-l div { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 10px; }
.sum-l dt { color: var(--mist); font-size: 14px; line-height: 21px; }
.sum-l dd { margin: 0; font-size: 15px; line-height: 21px; font-weight: 600; }
.sum-tot { display: grid; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.14); }
.sum-k { color: var(--mist); font-size: 14px; line-height: 20px; }
.sum-v { font: 800 min(30px, 10.4cqi)/1.2 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--white); }
.sum-v small { font-size: .56em; font-weight: 600; color: var(--on-ink); letter-spacing: 0; }
.sum-v.bump { animation: glowT .7s var(--ease); }
@keyframes glowT { 40% { color: var(--orange-hi); text-shadow: 0 0 22px rgba(232,112,42,.7); } }
.sum-n { margin: 2px 0 12px; color: var(--mist); font-size: 14px; line-height: 20px; }
.calc-sum .btn { width: 100%; }
.calc-send { margin: 14px 0 0; font: 700 20px/26px var(--display); letter-spacing: -.02em; scroll-margin-top: 90px; }

/* ---------------------------------------------------------------- home teaser: three packages, from the lowest level */
.tz { display: grid; gap: 8px; }
.tz-a, .tz-i:not(:has(.tz-a)) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 76px; padding: 10px 18px 10px 10px;
  border-radius: 22px; background: var(--tint-a); color: var(--navy); text-decoration: none; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.tz-i.t1 .tz-a, .tz-i.t1:not(:has(.tz-a)) { background: var(--tint-b); }
.tz-i.t2 .tz-a, .tz-i.t2:not(:has(.tz-a)) { background: var(--tint-c); }
.tz-a:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(10,15,26,.5); }
.tz-ico { width: 56px; height: 56px; border-radius: 16px; }
.tz-t { display: grid; }
.tz-t b { font: 700 16px/21px var(--display); letter-spacing: -.02em; }
.tz-t span { font-size: 14px; line-height: 20px; color: #3E4654; }
.tz-p { font: 800 17px/22px var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tz-c { margin: 14px 0 16px; }
.blk-teaser .btn { width: 100%; }

/* ---------------------------------------------------------------- packages by boat table */
.pkg-t { width: 100%; }
.pkg-t th, .pkg-t td { min-width: 0 !important; padding: 10px 6px; }
.pkg-t tr > :first-child { padding-left: 12px; }
.pkg-t tbody th[scope=row] { font-weight: 600; white-space: nowrap; }
.pkg-t .pk-g th { padding-top: 14px; background: var(--tint-b); font: 700 15px/20px var(--display); letter-spacing: -.02em; }
.pkg-t td.pk-v { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 14px; line-height: 19px; }
.pkg-t td.pk-v span { display: block; white-space: nowrap; }
.pkg-t td.pk-v span + span { font-weight: 500; font-size: 13px; color: var(--muted); }
.pkg-t tbody th[scope=row], .pkg-t thead th { font-size: 14px; }
.pk-go { margin: 20px 0 0; }
.pk-go .btn { width: 100%; }

/* ---------------------------------------------------------------- how it works: four icons, a dotted line that draws on scroll */
.how-in { position: relative; }
.how { position: relative; z-index: 1; display: grid; gap: 22px; }
.how::before { content: ""; position: absolute; z-index: -1; left: 34px; top: 36px; bottom: 36px; border-left: 4px dotted var(--orange); }
.mo .how::before { display: none; }
.how-s { display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: 16px; align-items: center; }
.how-ico { width: 72px; height: 72px; border-radius: 22px; box-shadow: 0 16px 30px -16px rgba(10,15,26,.7); }
.how-ico--n { background: var(--base); color: var(--orange); font: 700 24px/1 var(--display); }
.how-tx h3 { font: 700 17px/23px var(--display); letter-spacing: -.02em; margin-bottom: 2px; }
.how-tx p { margin: 0; font-size: 15px; line-height: 22px; color: #3E4654; }
.how-line { display: none; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.mo .how-line { display: block; }
.how-d { fill: none; stroke: var(--orange); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0 12; }
.how-m { fill: none; stroke: #fff; stroke-width: 14; }
.mo .how-ico { scale: .5; opacity: 0; transition: scale .7s cubic-bezier(.34,1.56,.64,1), opacity .4s; }
.mo .how-s.on .how-ico { scale: 1; opacity: 1; }

/* material lines with their icons */
.cut-list li.has-ico { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
.cut-list li.has-ico > :not(.cut-ico) { grid-column: 2; }
.cut-ico { grid-row: span 2; width: 56px; height: 56px; border-radius: 16px; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }

/* the eyebrow rule grows in when its section is revealed; moving rows rest under the pointer */
.mo .eyebrow.rv::before { width: 0; transition: width .9s var(--ease) .3s; }
.mo .eyebrow.rv.in::before { width: 18px; }
.gcol:hover .gtrack { animation-play-state: paused; }

@media (min-width: 900px) {
  .tz { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .tz-a, .tz-i:not(:has(.tz-a)) { grid-template-columns: 1fr; justify-items: start; gap: 12px; padding: 16px 20px 22px; border-radius: 30px; }
  .tz-ico { width: 88px; height: 88px; border-radius: 22px; }
  .tz-t b { font-size: 20px; line-height: 26px; }
  .tz-p { font-size: 24px; line-height: 30px; }
  .blk-teaser .btn, .pk-go .btn { width: auto; }
  .pkg-t th, .pkg-t td { padding: 12px 16px; }
  .pkg-t td.pk-v { font-size: 16px; }
  .pkg-t td.pk-v span { display: inline; }
  .pkg-t td.pk-v span + span { color: inherit; font-weight: inherit; }
  .how-tx h3 { font-size: 18px; white-space: nowrap; }
  .how { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
  .how::before { left: 12.5%; right: 12.5%; top: 52px; bottom: auto; border-left: 0; border-top: 4px dotted var(--orange); }
  .how-s { grid-template-columns: 1fr; justify-items: center; text-align: center; row-gap: 18px; align-items: start; }
  .how-ico { width: 104px; height: 104px; border-radius: 28px; }
  .how-tx h3 { font-size: 20px; line-height: 26px; }
  .how-tx p { font-size: 16px; line-height: 24px; max-width: 250px; margin: 0 auto; }
  .blk-calc .wrap { max-width: 1440px; }
  .lvs { gap: 14px; }
}
/* wide screens: the three steps side by side, the summary sticky on the right */
@media (min-width: 1100px) {
  .lf.est { grid-template-columns: repeat(3, minmax(0, 1fr)) 330px; column-gap: 18px; row-gap: 14px; align-items: start; }
  .lf.est > * { grid-column: 1 / 4; }
  .calc-steps { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, .95fr); gap: 14px; align-items: start; }
  .lf.est .cs .cs-b { display: block; padding: 0 12px 16px; }
  .cs-t { cursor: default; }
  .cs-n { grid-row: auto !important; }
  .cs-v, .cs-ch { display: none !important; }
  .lf.est > .calc-sum { grid-column: 4; grid-row: 1 / span 12; position: sticky; top: 92px; padding: 26px; }
  .lf.est > .lf-photos { grid-column: 1; }
  .lf.est > .lf-contact { grid-column: 2; }
  .lf.est > label:not(.lf-photos) { grid-column: 3; }
  .lf.est > .lf-files { grid-column: 1 / 4; }
  .lf.est > .lf-more { grid-column: 1 / 3; }
  .lf.est > .btn-brass, .lf.est > .lf-wa { grid-column: 3; }
  .aoc { flex-basis: 100%; }
}

/* ---------------------------------------------------------------- gallery2: bento of scenes, Details strip, lightbox */
.g2-lead { color: var(--muted); margin: -6px 0 16px; }
.g2-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 128px; grid-auto-flow: dense; gap: 8px; }
.g2-i.tall { grid-row: span 2; }
.g2-open { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 18px; overflow: hidden;
  background: var(--ink); color: var(--white); text-align: left; cursor: zoom-in; isolation: isolate; }
.g2-open .pic, .g2-open picture { position: absolute; inset: 0; }
.g2-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.g2-open:hover img { transform: scale(1.05); }
.g2-grid .g2-open::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,15,26,.82) 0%, rgba(10,15,26,.35) 32%, rgba(10,15,26,0) 55%); }
.g2-c { position: absolute; left: 10px; right: 10px; bottom: 9px; z-index: 2; font: 600 12px/16px var(--sans); color: var(--white);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g2-open .illus { top: 0; bottom: auto; border-radius: 0 0 0 8px; font-size: 10px; }
.g2-more { display: none; }
@media (max-width: 899px) {
  .js .g2-grid:not(.open) > .g2-x { display: none; }
  .js .g2-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 10px; border: 1.5px solid var(--navy);
    border-radius: 999px; background: none; color: var(--navy); font: 650 15px/1 var(--sans); cursor: pointer; }
}
.g2-dh { margin: 22px 0 10px; font: 400 12px/16px var(--brand); letter-spacing: .22em; text-transform: uppercase; color: var(--orange-ink); }
.g2-det { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 4px; scroll-padding: 0 var(--g); }
.g2-det::-webkit-scrollbar { display: none; }
.g2-det li { flex: 0 0 40%; scroll-snap-align: start; }
.g2-det .g2-open { aspect-ratio: 1; height: auto; border-radius: 16px; }
.g2-dl { display: block; margin-top: 8px; font: 600 13px/18px var(--sans); color: var(--navy); }
@media (min-width: 900px) {
  .g2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 210px; gap: 12px; }
  .g2-open { border-radius: 22px; }
  .g2-c { left: 16px; right: 16px; bottom: 14px; font-size: 14px; line-height: 19px; }
  .g2-det { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; overflow: visible; margin: 0; padding: 0; }
  .g2-dh { margin-top: 30px; }
}
.lb { width: min(1120px, calc(100vw - 16px)); max-width: none; max-height: calc(100svh - 16px); margin: auto; padding: 10px; border: 0; border-radius: 22px;
  background: var(--base); color: var(--white); box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.lb::backdrop { background: rgba(10,15,26,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lb-f { position: relative; border-radius: 16px; overflow: hidden; background: #000; }
.lb-f .pic, .lb-f picture { position: static; }
.lb-f img { width: 100%; height: auto; max-height: calc(100svh - 170px); object-fit: contain; }
.lb-f .illus { display: none; }
.lb-cap { margin: 12px 6px 2px; font: 600 16px/22px var(--sans); color: var(--white); }
.lb-nav { display: flex; gap: 8px; margin-top: 12px; }
.lb-nav button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--white);
  font: 650 15px/1 var(--sans); cursor: pointer; }
.lb-nav button:hover { background: rgba(255,255,255,.18); }
.lb-nav .lb-x { margin-left: auto; background: var(--orange); color: var(--base); }
html.lb-open { overflow: hidden; }

/* ---------------------------------------------------------------- lines and colors: a table on desktop, cards on phones */
.ln-t { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 21px; }
.ln-t th, .ln-t td { text-align: left; vertical-align: top; }
.ln-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ln-chips li { padding: 4px 10px; border-radius: 999px; background: var(--tint-b); color: var(--navy); font: 500 13px/18px var(--sans); white-space: nowrap; }
.ln-s a { font-weight: 650; }
@media (max-width: 899px) {
  .ln-t, .ln-t tbody, .ln-t tr, .ln-t th, .ln-t td { display: block; }
  .ln-t thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ln-t tr { padding: 16px; margin-bottom: 10px; border-radius: 20px; background: var(--paper); }
  .ln-n { font: 650 18px/24px var(--sans); margin-bottom: 4px; }
  .ln-m { color: var(--muted); font-size: 14px; margin-bottom: 6px; }
  .ln-w { margin-bottom: 10px; }
  .ln-s { margin-top: 10px; }
  .ln-s a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (min-width: 900px) {
  .ln-t thead th { padding: 0 12px 10px; font: 400 11px/14px var(--brand); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
    border-bottom: 2px solid var(--line); }
  .ln-t tbody th, .ln-t tbody td { padding: 14px 12px; border-bottom: 1px solid var(--line); }
  .ln-n { font-weight: 650; width: 17%; }
  .ln-m { width: 11%; color: var(--muted); }
  .ln-w { width: 24%; }
  .ln-s { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; }
  .rv { opacity: 1; transform: none; }
  .logo { background: none; -webkit-text-fill-color: currentColor; }
  .mq, .gcol { overflow-x: auto; scrollbar-width: none; }
  .cut { transform: none; }
  .cdots > span::before, .cdots > span::after, .ticks li::before, .ticks li::after, .how-ico { scale: 1 !important; opacity: 1 !important; }
  .lv input:checked + .lv-in { transform: none; }
}
.xcard.rv.in:hover { transform: translateY(-8px); }

/* hero slideshow: each slide plays a 1.5 s zoom, the next one starts the moment it ends */
.hero-slides .hs { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.hero-slides .hs.is-on { opacity: 1; visibility: visible; z-index: 1; }
.hero-slides .hs.is-out { opacity: 0; visibility: visible; transition: opacity .18s linear; }
.hero-slides .hs img { animation: none; transform-origin: 55% 50%; }
.hero-slides .hs.is-on img { animation: slideZoom 1.5s linear both; }
@keyframes slideZoom { from { transform: scale(1); } to { transform: scale(1.09); } }
.hero-slides .hs .illus { display: none; }
.hero-slides .hs.is-on .illus { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-slides .hs.is-on img { animation: none; } }

/* ---------------------------------------------------------------- objects living in the containers: parallax from --py, a slow bob */
.has-obj { overflow: clip; isolation: isolate; }
.has-obj > .wrap { position: relative; z-index: 1; }
.obj { position: absolute; z-index: 0; pointer-events: none; transform: translate3d(0, calc(var(--py, 0) * var(--sp, .08) * 1px), 0); will-change: transform; }
.obj-f { animation: bob 9s ease-in-out infinite alternate; }
.obj-2 .obj-f { animation-delay: -4s; }
.obj img { width: 100%; -webkit-mask-image: radial-gradient(closest-side, #000 60%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(closest-side, #000 60%, rgba(0,0,0,0) 100%); }
.obj .illus { font-size: 10px; opacity: .6; }

/* package table: the dark container with an object on each edge */
.blk-pkg.dark .tbl { color: var(--navy); }
.blk-pkg.has-obj .obj-1 { top: 112px; right: -3%; width: 116px; }
.blk-pkg.has-obj .obj-2 { display: none; }
.blk-pkg.has-obj .caption { max-width: calc(100% - 110px); }
/* city and about: the object above the heading on phones, beside it on desktop */
.blk-cta .obj-cta { position: relative; width: min(64%, 260px); margin: -18px auto 0; }
/* business steps */
.blk-steps.has-obj .obj-1 { position: relative; width: min(52%, 210px); margin: -28px auto -6px; }
.blk-steps.has-obj .obj-2 { display: none; }

/* ---------------------------------------------------------------- layers: the exploded object with three pins and their labels */
.blk-lay { overflow: clip; isolation: isolate; background: radial-gradient(70% 55% at 50% 58%, #16233A 0%, var(--base) 70%) !important; }
.lay-lead { color: var(--on-ink); max-width: 56ch; margin: 0 auto; }
.lay-stage { --l0: 0%; --iw: 1; position: relative; margin-top: 18px; }
.lay-move { position: relative; transform: translate3d(0, calc(var(--py, 0) * .05px), 0); }
.lay-obj { position: relative; animation: bob 10s ease-in-out infinite alternate; }
.lay-obj img { width: 100%; -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 64%, rgba(0,0,0,0) 100%); mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 64%, rgba(0,0,0,0) 100%); }
.lay-glow { position: absolute; z-index: -1; left: 10%; right: 10%; top: 12%; bottom: 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(232,112,42,.34), rgba(232,112,42,0)); animation: breathe 8s ease-in-out infinite; }
.lay-pin { position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 28px; height: 28px; margin: -14px 0 0 -14px;
  display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--base); font: 700 13px/1 var(--display);
  box-shadow: 0 0 0 4px rgba(232,112,42,.25); }
.lay-pin::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.mo .lay-pin::after { animation: ping 2.8s ease-out infinite; animation-delay: calc(var(--k) * .9s); }
@keyframes ping { 0% { transform: scale(.8); opacity: .9; } 70%, 100% { transform: scale(2); opacity: 0; } }
.lay-ln { display: none; }
.lay-list { display: grid; gap: 8px; margin-top: 10px; }
.lay-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 12px 16px; border-radius: var(--rs);
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.lay-n { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--base); font: 700 13px/1 var(--display); }
.lay-t b { display: block; font: 700 16px/22px var(--display); letter-spacing: -.02em; color: var(--white); }
.lay-t b a { color: var(--white); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lay-t span { display: block; font-size: 15px; line-height: 21px; color: var(--on-ink); }
.mo .lay-pin { scale: .3; opacity: 0; transition: scale .6s cubic-bezier(.34,1.56,.64,1), opacity .3s; transition-delay: calc(.2s + var(--k) * .25s); }
.mo .blk-lay.on .lay-pin { scale: 1; opacity: 1; }

/* ---------------------------------------------------------------- how to choose: photo cards on a cream container */
main > .blk.blk-choose { background: var(--tint-b); }
.ch-lead { max-width: 60ch; color: #3E4654; margin-bottom: 4px; }
.ch-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(80vw, 320px); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 12px calc(-1 * var(--g)) 0; padding: 4px var(--g) 8px; scroll-padding: 0 var(--g); scrollbar-width: none; }
.ch-row::-webkit-scrollbar { display: none; }
.ch-card { scroll-snap-align: start; display: flex; flex-direction: column; border-radius: var(--rs); background: var(--white); overflow: hidden;
  box-shadow: 0 18px 36px -26px rgba(10,15,26,.45); }
.ch-ph { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--base); }
.ch-ph .pic, .ch-ph picture { height: 100%; }
.ch-ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.ch-card:hover .ch-ph img { transform: scale(1.04); }
.ch-tx { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.ch-tx h3 { font: 700 17px/23px var(--display); letter-spacing: -.02em; }
.ch-tx h3 a { color: var(--navy); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px;
  display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0 -8px; }
.ch-opts { display: grid; gap: 6px; }
.ch-opts li { padding: 8px 12px; border-radius: 14px; background: var(--paper); font-size: 14px; line-height: 19px; color: #3E4654; }
.ch-opts b { display: block; font-weight: 700; color: var(--navy); }
.ch-best { font-size: 15px; line-height: 21px; color: #3E4654; }
.ch-best span { display: block; font: 600 11px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.ch-chip { align-self: flex-start; margin-top: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--navy); color: var(--white); font: 600 14px/1 var(--sans); text-decoration: none; transition: background .3s, transform .3s var(--ease); }
.ch-chip:hover { background: var(--orange-ink); transform: translateY(-2px); }

/* ---------------------------------------------------------------- stitch patterns: one photo, names under each panel */
.st-ph { position: relative; margin-top: 12px; border-radius: var(--rs); overflow: hidden; background: var(--base); }
.st-ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.st-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.st-names li { padding: 12px 10px; border-radius: 16px; background: var(--paper); text-align: center; }
.st-names h3 { font: 700 15px/20px var(--display); letter-spacing: -.02em; }
.st-names p { margin-top: 2px; font-size: 13px; line-height: 18px; color: #3E4654; }

/* ---------------------------------------------------------------- materials hero: the object drifts inside the shape */
.hero--obj .hero-blob { background: #07090d; }
.hero--obj .hero-blob img { object-position: 50% 50%; animation: objDrift 14s ease-in-out infinite alternate; }
@keyframes objDrift { from { transform: scale(1.06) translate3d(-1.4%, 1%, 0) rotate(-1deg); } to { transform: scale(1.1) translate3d(1.4%, -1.2%, 0) rotate(1deg); } }

/* ---------------------------------------------------------------- guide: a small object tile beside the answer */
.ans-obj { float: right; width: 120px; margin: 0 0 8px 14px; border-radius: 22px; background: radial-gradient(closest-side, #16233A, var(--base)); overflow: hidden; }
.ans-obj .obj { position: relative; }
/* estimate: the exploded seat behind the summary, desktop only */
.calc-sum .obj { display: none; }

@media (min-width: 900px) {
  .blk-pkg.has-obj .obj-1 { top: -46px; right: 3%; width: 250px; }
  .blk-pkg.has-obj .obj-2 { display: block; right: 2%; bottom: -54px; width: 230px; }
  .blk-pkg.has-obj .caption { max-width: none; }
  .blk-cta.has-obj .obj-cta { position: absolute; margin: 0; width: 270px; right: 4%; top: 50%; translate: 0 -50%; }
  .blk-cta.has-obj .wrap { padding-right: 300px; padding-left: 300px; }
  .blk-steps.has-obj .obj-1 { position: absolute; margin: 0; top: -36px; right: 1%; width: 220px; }
  .blk-steps.has-obj .obj-2 { display: block; left: -2%; bottom: -70px; width: 240px; }
  .lay-stage { --l0: 27%; --iw: .46; }
  .lay-obj { width: 46%; margin: 0 auto; }
  .lay-ln { display: block; position: absolute; z-index: 2; top: calc(var(--y) * 1%); height: 1px; pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,.7), var(--orange)); }
  .lay-ln.lay-l { left: 25%; width: calc(var(--l0) + var(--x) * var(--iw) * 1% - 25%); transform-origin: 0 50%; }
  .lay-ln.lay-r { left: calc(var(--l0) + var(--x) * var(--iw) * 1%); width: calc(75% - var(--l0) - var(--x) * var(--iw) * 1%);
    transform-origin: 100% 50%; background: linear-gradient(90deg, var(--orange), rgba(255,255,255,.7)); }
  .mo .lay-ln { transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(.35s + var(--k) * .25s); }
  .mo .blk-lay.on .lay-ln { transform: none; }
  .lay-list { display: block; margin: 0; }
  .lay-list li { position: absolute; top: calc(var(--y) * 1%); width: 24%; translate: 0 -50%; }
  .lay-list li.lay-l { left: 0; }
  .lay-list li.lay-r { right: 0; }
  .ch-row { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; margin: 16px 0 0; padding: 0; gap: 16px; }
  .ch-tx { padding: 20px 22px 22px; }
  .st-names { gap: 14px; }
  .st-names li { padding: 16px; }
  .st-names h3 { font-size: 18px; line-height: 24px; }
  .st-names p { font-size: 15px; line-height: 21px; }
  .ans-obj { width: 260px; margin: 0 0 16px 28px; }
  .calc-sum { position: relative; overflow: hidden; isolation: isolate; }
  .calc-sum > :not(.obj) { position: relative; z-index: 1; }
  .calc-sum .obj { display: block; right: -18%; bottom: -8%; width: 90%; opacity: .16; }
}
@media (prefers-reduced-motion: reduce) {
  .obj, .lay-move { transform: none; }
  .lay-pin, .lay-ln { scale: 1 !important; opacity: 1 !important; transform: none !important; }
}
.blk-contact.has-obj .obj-1 { position: relative; width: min(56%, 220px); margin: -24px auto -8px; }
@media (min-width: 900px) {
  .blk-contact.has-obj .obj-1 { position: absolute; margin: 0; top: 50%; right: 3%; width: 320px; translate: 0 -50%; }
}
/* how it works: the dotted path keeps marching, each icon gives one extra pop as the line reaches it */
.mo .how-d { animation: march 1.4s linear infinite; }
@keyframes march { to { stroke-dashoffset: -12; } }
.mo .how-s.on .how-ico .ico { animation: pop .7s var(--ease) .45s both; }
.lay-t b a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0 -11px; }

/* ================================================================ materials pages */
/* what it is: a big macro photo that drifts, three numbered one-line facts */
.blk-what { overflow: clip; }
.what-in { display: grid; gap: 22px; }
.what-ph { position: relative; border-radius: var(--rs); overflow: hidden; background: var(--base); box-shadow: 0 30px 60px -40px rgba(10,15,26,.6); }
.what-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.what-ph img { scale: 1.1; translate: 0 calc(var(--py, 0) * -.03px); }
.mo .what-ph img { animation: objDrift 16s ease-in-out infinite alternate; }
.mac-f .illus { font-size: 9.5px; padding: 1px 6px; }
.what-tx { container-type: inline-size; min-width: 0; }
.what-facts { display: grid; gap: 8px; counter-reset: wf; }
.what-facts li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 14px 16px; border-radius: 20px; background: var(--paper);
  font-weight: 500; line-height: 23px; }
.wf-n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--orange); color: var(--base); font: 700 13px/1 var(--display); }

/* swatch carousel: pills per line, one scroll-snap row of maker swatches, attribution under every row */
main > .blk.blk-sw { background: var(--tint-b); }
.sw-lead { max-width: 60ch; color: #3E4654; }
.sw-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 14px calc(-1 * var(--g)) 4px; padding: 2px var(--g) 8px; scrollbar-width: none; }
.sw-tabs::-webkit-scrollbar { display: none; }
.sw-tab { flex: none; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--white); color: var(--navy); font: 600 14px/1 var(--sans);
  cursor: pointer; transition: background .3s, color .3s; }
.sw-tab[aria-selected="true"] { background: var(--navy); color: var(--white); }
.sw-js .sw-line:not(.on) { display: none; }
.sw-line { margin-top: 10px; }
.sw-line + .sw-line { margin-top: 26px; }
.sw-js .sw-line + .sw-line { margin-top: 10px; }
.sw-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.sw-head h3 { font: 700 18px/24px var(--display); letter-spacing: -.02em; }
.sw-mk { font: 600 13px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.sw-what { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 21px; color: #3E4654; }
.sw-row { display: grid; grid-auto-flow: column; grid-auto-columns: 152px; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 12px calc(-1 * var(--g)) 0; padding: 4px var(--g) 10px; scroll-padding: 0 var(--g); scrollbar-width: none; }
.sw-row::-webkit-scrollbar { display: none; }
.sw-row-ph { grid-auto-columns: min(78vw, 340px); }
.sw-t { scroll-snap-align: start; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 20px; background: var(--white);
  box-shadow: 0 14px 28px -22px rgba(10,15,26,.5); transition: transform .5s var(--ease); }
.sw-t:hover { transform: translateY(-4px); }
.sw-f { display: grid; gap: 8px; }
.sw-f img, .sw-chip { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; background: var(--paper); }
.sw-ph .sw-f img { aspect-ratio: 3 / 2; }
.sw-chip { background: var(--sw); box-shadow: inset 0 0 0 1px rgba(10,15,26,.12); }
.sw-approx { font-size: 13px; line-height: 17px; color: var(--muted); }
.sw-f figcaption { display: grid; gap: 1px; padding: 0 4px; }
.sw-f figcaption b { font-size: 14px; line-height: 19px; }
.sw-f figcaption span { font-size: 12px; line-height: 16px; color: var(--muted); }
.sw-ask { margin-top: auto; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 8px; border-radius: 999px;
  background: var(--navy); color: var(--white); font: 600 13px/1.1 var(--sans); text-align: center; text-decoration: none; transition: background .3s; }
.sw-ask:hover, .sw-ask.sw-added { background: var(--orange-ink); }
.sw-attr { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: #3E4654; }
.sw-attr a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 650; }

/* where it goes on the boat: the drawn console boat, pins that pulse and open a label */
.blk-boat { overflow: clip; isolation: isolate; background: radial-gradient(80% 60% at 50% 60%, #16233A 0%, var(--base) 72%) !important; }
.bm { position: relative; scale: 1.28; margin: calc(6% + 8px) 0 6%; }
.bm-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bm-sea { fill: #13365A; opacity: .55; }
.mo .bm-sea { animation: seaMove 6s ease-in-out infinite alternate; }
@keyframes seaMove { from { transform: translateX(-30px); } to { transform: translateX(0); } }
.bm-hullp { fill: url(#bm-hull); }
.bm-rub { fill: none; stroke: #5F6C7C; stroke-width: 4; stroke-linecap: round; }
.bm-post { fill: none; stroke: #C9D2DC; stroke-width: 6; stroke-linecap: round; }
.bm-console { fill: #DCE3EA; }
.bm-wind { fill: url(#bm-glass); stroke: #C9D2DC; stroke-width: 2; }
.bm-motor { fill: #2A3342; stroke: #4A5566; stroke-width: 2; stroke-linejoin: round; }
.bm-svg [class^="p-"] { transition: fill .6s, stroke .6s, opacity .6s; }
.p-top { fill: #45505E; }
.p-curtain { fill: url(#bm-glass); stroke: #7F8C9A; stroke-width: 2; }
.p-front, .p-aft { fill: none; stroke: #7F8C9A; stroke-width: 5; stroke-linecap: round; opacity: .6; }
.p-console { fill: #B9C3CE; }
.p-seat { fill: #F3EEE4; }
.p-bolster, .p-bow { fill: #F3EEE4; }
.p-floor { fill: none; stroke: #8A96A4; stroke-width: 5; stroke-linecap: round; }
.p-cover { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 3; stroke-dasharray: 10 10; }
.on-top .p-top, .on-console .p-console, .on-seat .p-seat, .on-bolster .p-bolster, .on-bow .p-bow { fill: var(--orange); }
.on-curtain .p-curtain { fill: rgba(245,138,72,.45); stroke: var(--orange); }
.on-front .p-front, .on-aft .p-aft, .on-floor .p-floor { stroke: var(--orange); opacity: 1; }
.on-cover .p-cover { stroke: var(--orange); }
.mo .on-cover .p-cover { animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -40; } }
.bm-pin { position: absolute; z-index: 3; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.bm-pin .bm-n { position: relative; }
.bm-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--orange); color: var(--base); font: 700 12px/1 var(--display);
  box-shadow: 0 0 0 4px rgba(232,112,42,.28); }
.bm-pin .bm-n::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--orange); opacity: 0; }
.mo .bm-pin .bm-n::after { animation: ping 2.6s ease-out infinite; animation-delay: calc(var(--k) * .6s); }
.bm-l { position: absolute; bottom: calc(100% + 2px); left: 50%; translate: -50% 6px; width: max-content; max-width: 200px; padding: 8px 12px; border-radius: 12px;
  background: var(--white); color: var(--navy); font: 600 13px/17px var(--sans); text-align: center; opacity: 0; pointer-events: none;
  transition: opacity .25s, translate .25s var(--ease); box-shadow: 0 12px 24px -12px rgba(0,0,0,.5); }
.bm-pin:hover .bm-l, .bm-pin:focus-visible .bm-l, .bm-pin[aria-expanded="true"] .bm-l { opacity: 1; translate: -50% 0; }
.mo .bm-pin .bm-n { scale: .3; opacity: 0; transition: scale .6s cubic-bezier(.34,1.56,.64,1), opacity .3s; transition-delay: calc(.2s + var(--k) * .18s); }
.mo .blk-boat.on .bm-pin .bm-n { scale: 1; opacity: 1; }
.bm-list { display: grid; gap: 8px; margin-top: 14px; }
.bm-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 18px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); color: var(--on-ink); font-size: 15px; line-height: 21px; }
.bm-list b { display: block; color: var(--white); font-weight: 650; }

/* compare: the side by side photo and three numbered cards */
.cmp-ph { position: relative; border-radius: var(--rs); overflow: hidden; background: var(--base); }
.cmp-ph img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 1.2s var(--ease); }
.cmp-ph:hover img { transform: scale(1.03); }
.cmp-cards { display: grid; gap: 8px; margin-top: 10px; }
.cmp-c { position: relative; padding: 16px 18px 16px 58px; border-radius: 20px; background: var(--tint-a); }
.cmp-c.t1 { background: var(--tint-b); }
.cmp-c.t2 { background: var(--tint-c); }
.cmp-n { position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white);
  font: 700 12px/1 var(--display); }
.cmp-c h3 { font: 700 16px/22px var(--display); letter-spacing: -.02em; }
.cmp-c p { margin: 2px 0 0; font-size: 15px; line-height: 21px; color: #3E4654; }

/* macro gallery: close-ups on black-navy, each at its own parallax speed */
.blk-macro { overflow: clip; }
.mac-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mac-3 .mac-i:first-child { grid-column: 1 / -1; }
.mac-f { position: relative; border-radius: 18px; overflow: hidden; background: #07090d; }
.mac-f img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform 1s var(--ease); }
.mac-3 .mac-i:first-child img { aspect-ratio: 16 / 10; }
.mac-i:hover img { transform: scale(1.06); }
.mac-c { margin: 8px 2px 0; font-size: 14px; line-height: 19px; color: var(--on-ink); }

/* canvas vs vinyl: air passes through the left sheet, drops bead on the right one */
.vs-g { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vs-col { padding: 10px; border-radius: var(--rs); background: var(--paper); }
.vs-1 { background: var(--tint-c); }
.vs-col h3 { font: 700 15px/20px var(--display); letter-spacing: -.02em; margin: 10px 0 4px; }
.vs-col li { display: grid; gap: 1px; padding: 6px 0; border-top: 1px solid rgba(15,26,43,.1); font-size: 15px; line-height: 21px; }
.vs-col li span { font: 600 13px/17px var(--sans); letter-spacing: .02em !important; text-transform: none !important; letter-spacing: .12em; text-transform: uppercase; color: var(--orange-ink); }
.vs-art { position: relative; height: 80px; border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, #CFE6F5, #F6F1E7); }
.vs-sheet { position: absolute; left: 10%; right: 10%; top: 36px; height: 14px; border-radius: 4px; }
.vs-0 .vs-sheet { background: repeating-linear-gradient(90deg, #1F3556 0 6px, #2B4A73 6px 9px); }
.vs-1 .vs-sheet { background: linear-gradient(180deg, #F4F1EA, #D9D4C9); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.vs-art i { position: absolute; top: 0; left: calc(18% + var(--d) * 15%); }
.vs-0 .vs-art i { width: 2px; height: 22px; border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff); opacity: .9; }
.mo .vs-0 .vs-art i { animation: airUp 2.6s linear infinite; animation-delay: calc(var(--d) * -.5s); }
@keyframes airUp { from { transform: translateY(100px); opacity: 0; } 20% { opacity: .9; } to { transform: translateY(-24px); opacity: 0; } }
.vs-1 .vs-art i { width: 10px; height: 10px; border-radius: 50% 50% 50% 0; rotate: -45deg; background: #6FB6E3; }
.mo .vs-1 .vs-art i { animation: beadOn 3s ease-in infinite; animation-delay: calc(var(--d) * -.6s); }
@keyframes beadOn { 0% { transform: translateY(-12px); opacity: 0; } 15% { opacity: 1; } 55%, 80% { transform: translateY(var(--bead, 25px)); opacity: 1; } 100% { transform: translate(-10px, var(--bead, 25px)); opacity: 0; } }

/* gauge: four clear sheets from thin to rigid, the thin ones sway, the rigid one stands */
.gg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.gg-i { display: grid; gap: 2px; align-content: start; padding: 14px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.gg-i b { color: var(--white); font: 700 15px/20px var(--display); letter-spacing: -.02em; margin-top: 10px; }
.gg-i > span { color: var(--on-ink); font-size: 14px; line-height: 19px; }
.gg-art { position: relative; height: 110px; border-radius: 14px; background: linear-gradient(180deg, #16325A, #0E1C33); overflow: hidden; }
.gg-sheet { position: absolute; left: 50%; bottom: 12px; height: 84px; width: calc(var(--t) * 4px); margin-left: calc(var(--t) * -2px); border-radius: 3px;
  background: linear-gradient(90deg, rgba(190,227,245,.35), rgba(255,255,255,.9) 50%, rgba(190,227,245,.35)); box-shadow: 0 0 18px rgba(190,227,245,.35);
  transform-origin: 50% 100%; }
.mo .gg-art:not(.gg-rigid) .gg-sheet { animation: sway calc(2.2s + var(--t) * .8s) ease-in-out infinite alternate; }
@keyframes sway { from { transform: skewX(calc(14deg / var(--t)));  } to { transform: skewX(calc(-14deg / var(--t))); } }
.gg-rigid .gg-sheet { box-shadow: 0 0 0 2px rgba(232,112,42,.8), 0 0 22px rgba(190,227,245,.4); }

/* drain: open cells let the drops through, closed cells keep them on top */
.dr-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dr-c { padding: 14px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09); }
.dr-c h3 { font: 700 15px/20px var(--display); letter-spacing: -.02em; margin-top: 12px; }
.dr-c p { margin: 2px 0 0; color: var(--on-ink); font-size: 14px; line-height: 19px; }
.dr-art { position: relative; height: 150px; border-radius: 14px; overflow: hidden; background: linear-gradient(180deg, #16325A, #0E1C33); }
.dr-block { position: absolute; left: 14%; right: 14%; top: 48px; height: 58px; border-radius: 8px; }
.dr-open .dr-block { background: radial-gradient(circle at 50% 50%, transparent 3px, #3C4452 4px) 0 0 / 11px 11px, #262C36; }
.dr-closed .dr-block { background: linear-gradient(180deg, #F3F3F0, #D5D6D2); }
.dr-art i { position: absolute; top: 0; left: calc(20% + var(--d) * 11%); width: 7px; height: 10px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7CC3F0; }
.mo .dr-open .dr-art i { animation: dropThrough 1.8s linear infinite; animation-delay: calc(var(--d) * -.3s); }
.mo .dr-closed .dr-art i { animation: dropBead 2.6s ease-in infinite; animation-delay: calc(var(--d) * -.43s); }
@keyframes dropThrough { from { transform: translateY(-12px); opacity: 0; } 10% { opacity: 1; } 40% { opacity: .5; } 60% { opacity: .5; } to { transform: translateY(160px); opacity: 1; } }
@keyframes dropBead { 0% { transform: translateY(-12px) scale(1); opacity: 0; } 12% { opacity: 1; } 40%, 70% { transform: translateY(38px) scale(1.3, .8); opacity: 1; }
  100% { transform: translate(34px, 38px) scale(1.3, .8); opacity: 0; } }
.dr-open p::before, .dr-closed p::before { content: ""; }

@media (min-width: 900px) {
  .what-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
  .what-facts li { padding: 18px 20px; font-size: 18px; line-height: 26px; }
  .sw-row { grid-auto-columns: 168px; gap: 14px; margin: 16px calc(-1 * var(--g)) 0; padding: 4px var(--g) 12px; }
  .sw-row-ph { grid-auto-columns: 340px; }
  .sw-tabs { flex-wrap: wrap; overflow: visible; margin: 18px 0 6px; padding: 0; }
  .bm { scale: none; max-width: 980px; margin: 8px auto 0; }
  .bm-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bm-n { width: 30px; height: 30px; font-size: 13px; }
  .bm-l { font-size: 14px; }
  .cmp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
  .mac-g { grid-template-columns: repeat(var(--mc, 4), minmax(0, 1fr)); gap: 16px; }
  .mac-2 { --mc: 2; } .mac-3 { --mc: 3; }
  .mac-i { transform: translate3d(0, calc(var(--py, 0) * var(--sp) * 1px), 0); }
  .mac-3 .mac-i:first-child { grid-column: auto; }
  .mac-3 .mac-i:first-child img { aspect-ratio: 1; }
  .mac-c { font-size: 15px; }
  .vs-g { grid-template-columns: 1fr 1fr; gap: 16px; }
  .vs-col { padding: 22px; }
  .vs-col h3 { font-size: 18px; line-height: 24px; }
  .vs-col li { padding: 9px 0; }
  .vs-art { height: 130px; }
  .vs-sheet { top: 64px; }
  .vs-art { --bead: 53px; }
  .gg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .gg-art { height: 160px; }
  .gg-sheet { height: 128px; }
  .dr-g { gap: 16px; max-width: 900px; }
  .dr-art { height: 200px; }
  .dr-block { top: 70px; height: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .mac-i { transform: none; }
  .what-ph img { translate: none; }
  .bm-pin { scale: 1 !important; opacity: 1 !important; }
}

/* boat map, express cruiser cutaway for the interior material pages */
@media (max-width: 899px) { .bm.bm-cr { scale: 1.08; } }
.bm-house { fill: #DCE3EA; }
.bm-cab { fill: #2A3342; }
.bm-cock { fill: #4A5566; opacity: .55; }
.bm-bulk { fill: none; stroke: #4A5566; stroke-width: 4; }
.bm-helmc { fill: #B9C3CE; }
.bm-drive { fill: #2A3342; stroke: #4A5566; stroke-width: 2; }
.p-swim { fill: #C9D2DC; }
.p-pilot, .p-ceil, .p-fwd { fill: none; stroke: #8A96A4; stroke-width: 7; stroke-linecap: round; }
.p-csole, .p-cabsole, .p-helm { fill: none; stroke: #8A96A4; stroke-width: 6; stroke-linecap: round; }
.p-gunwale { fill: none; stroke: #C9D2DC; stroke-width: 6; stroke-linecap: round; }
.on-swim .p-swim { fill: var(--orange); }
.on-pilot .p-pilot, .on-ceil .p-ceil, .on-fwd .p-fwd, .on-csole .p-csole, .on-cabsole .p-cabsole,
.on-helm .p-helm, .on-gunwale .p-gunwale { stroke: var(--orange); }

/* ---------------------------------------------------------------- phone polish: one-row chip groups, quiet labels, 20 px rhythm */
@media (max-width: 899px) {
  :root { --rc: 20px; --mbar: 68px; }
  .eyebrow { font-size: 11px; line-height: 14px; margin-bottom: 12px; }
  h2.fit { --fs: 26px; line-height: 30px; }
  h2.fit.fit-2 { line-height: 30px !important; }
  h2.fit.h-sm { --fs: 20px; line-height: 26px; }
  .hero-field, .card-img, .xcard, .lv-in, .tz-a, .tz-i:not(:has(.tz-a)), .mq-p, .gal-move .gal-i, .gal .gal-i .pic, .gal .gal-i picture, .g2-open { border-radius: 20px; }
  .ticks li { border-radius: 20px; }
  .xc-frame, .card-frame { border-radius: 14px; }

  /* chip groups never wrap into ragged rows: one line that scrolls sideways, bleeding to the screen edges */
  .chips { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--g)); padding: 0 var(--g) 2px; scroll-padding: 0 var(--g); gap: 6px; }
  .chips::-webkit-scrollbar { display: none; }
  .chip { flex: none; scroll-snap-align: start; white-space: nowrap; padding: 0 16px; font-size: 14px; }
  /* related pages: a plain list of text links, a hairline between */
  .chips.rel { display: grid; gap: 0; overflow: visible; margin: 0; padding: 0; border-bottom: 1px solid var(--line); }
  .chips.rel .chip { justify-content: flex-start; min-height: 48px; padding: 0; border-top: 1px solid var(--line); border-radius: 0; background: none;
    color: var(--navy); font-size: 16px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 5px; }
  .chips.rel .chip:hover { background: none; color: var(--orange-ink); transform: none; }

  /* galleries: no captions on the photos (the lightbox keeps them), the AI label small and quiet */
  .gal-move .gal-c, .gal .gal-c, .g2-c { display: none; }
  .g2-grid .g2-open::after { display: none; }
  .gal-move .illus, .gal .illus, .g2-open .illus { font-size: 10px; line-height: 13px; opacity: .5; padding: 1px 6px; }

  /* home hero credentials: one quiet line gliding sideways */
  .creds { margin: 20px -20px -28px; padding: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 20px), transparent 100%); }
  .cr-t { display: flex; width: max-content; animation: scrollLeft 32s linear infinite; }
  .creds li { flex: none; gap: 8px; padding: 12px 22px 12px 0; font: 500 12px/16px var(--sans); letter-spacing: .08em; white-space: nowrap; color: rgba(255,255,255,.86); }
  .creds li::before { width: 6px; height: 6px; }

  /* footer: brand, email, one line of areas, hairline, legal */
  .ftr { padding-top: 28px; }
  .ftr-in { gap: 12px; }
  .f-desc, .f-note, .f-h { display: none; }
  .f-links, .f-areas { overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; white-space: nowrap;
    margin: 0 calc(-1 * var(--g)); padding: 0 var(--g); }
  .f-links { display: flex; flex-wrap: nowrap; }
  .f-links::-webkit-scrollbar, .f-areas::-webkit-scrollbar { display: none; }
  .f-links { gap: 20px; padding-top: 0; }
  .f-links a { flex: none; }
  .f-areas { line-height: 44px; color: var(--mist); font-size: 14px; }
  .f-legal { margin-top: 12px; padding-top: 14px; font-size: 13px; }

  /* sticky bar: slimmer, 16 px from the edges, a lighter shadow */
  .mbar { padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .mbar a { min-height: 44px; font-size: 15px; box-shadow: 0 6px 16px -8px rgba(10,15,26,.45); }

  /* pinned workshop: a shorter play, marquee words in a 40 px band */
  .mo .blk-pin { height: 120svh; }
  .mq-words { padding: 0; height: 40px; }
  .mq-words span { padding: 0 16px; font-size: 18px; line-height: 40px; }
  .mq-words i { width: 8px; height: 8px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .cr-t { animation: none; }
  .creds { overflow-x: auto; scrollbar-width: none; }
  .cr-dup { display: none !important; }
}

/* ---------------------------------------------------------------- custom projects: dark hero, colorway chips, pair anchors */
.hero--dark .hero-field { background: var(--base); color: var(--white); box-shadow: inset 0 0 90px rgba(0,0,0,.5); }
.hero--dark .hero-field::before { background: radial-gradient(90% 70% at 22% 30%, rgba(232,112,42,.22), rgba(232,112,42,0) 62%); }
.hero--dark h1, .hero--dark .lead, .hero--dark .eyebrow, .hero--dark .crumbs a { color: var(--white); }
.hero--dark .hero-go { background: var(--orange); color: var(--base); border-color: var(--orange); }
.bacard[id] { scroll-margin-top: 96px; }
.bacard:target .ts-stage { outline: 3px solid var(--orange); outline-offset: 4px; }
.cw { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.cw-c { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 14px; border-radius: 16px; text-decoration: none;
  background: linear-gradient(90deg, var(--c) calc(100% - 18px), var(--c2) 0); color: var(--base); font: 650 14px/18px var(--sans);
  box-shadow: inset 0 0 0 1px rgba(10,15,26,.12); transition: transform .35s var(--ease); }
.cw-dk { color: var(--white); }
a.cw-c:hover { transform: translateY(-3px); }
.cw-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.xc-frame:has(.xc-sub) .xc-name { bottom: 23%; }
.xc-sub { position: absolute; z-index: 3; left: 0; right: 0; bottom: 14%; padding: 0 16px; text-align: center; color: var(--white);
  font: 600 14px/18px var(--sans); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
@media (min-width: 900px) { .cw { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } }

/* custom projects hero: the field takes the color of the interior on the current slide */
.hero--tint .hero-field { background: var(--tint, var(--orange)); color: var(--tint-ink, var(--base)); transition: background 1.2s var(--ease), color 1.2s var(--ease); box-shadow: inset 0 0 90px rgba(0,0,0,.22); }
.hero--tint .hero-field::before { background: radial-gradient(90% 70% at 22% 30%, rgba(255,255,255,.28), rgba(255,255,255,0) 62%), radial-gradient(70% 60% at 100% 100%, rgba(0,0,0,.28), rgba(0,0,0,0) 70%); }
.hero--tint h1, .hero--tint .lead, .hero--tint .eyebrow, .hero--tint .crumbs a { color: var(--tint-ink, var(--base)); }
.hero--tint .hero-go { background: var(--tint-ink, var(--base)); color: var(--tint, var(--orange)); border-color: var(--tint-ink, var(--base)); }