/* Alturion LLC, Claude design branch. One stylesheet for Home, Applications and Technical.
   Brand: Alturion slate and copper, Archivo for display, IBM Plex Sans for reading (self-hosted, OFL).
   Motion: one curve (--ease) for everything that moves and one landing curve (--ease-land) for things that
   settle after a press. Each page loads with its headline rising from behind its own baseline; content eases
   in once as it is scrolled to; a clear-coat sheen passes over a surface when it is chosen or pointed at.
   Pointer devices get visible hover; touch gets a press. Reduced motion shows everything at rest. */

:root {
  --ink: #202a32;
  --ink-2: #2d3c46;
  --ink-deep: #182128;
  --copper: #a85d3b;
  --copper-ink: #934728;
  --copper-soft: #d89a72;
  --copper-pale: #edb998;
  --copper-wash: #f7eee8;
  --steel: #50616e;
  --steel-2: #71818c;
  --line: #d9e0e3;
  --line-2: #b9c6ce;
  --mist: #f2f5f6;
  --paper: #fff;
  --on-ink: #dde5e9;
  --on-ink-2: #bac7ce;
  --display: Archivo, "Arial Narrow", Arial, sans-serif;
  --body: "IBM Plex Sans", Arial, Helvetica, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-land: cubic-bezier(.2, 1.45, .35, 1);
  --ease-close: cubic-bezier(.4, 0, .2, 1);
  --rise: 26px;
  --gutter: 16px;
  --header-h: 60px;
  --radius: 10px;
}
@media (min-width: 701px) { :root { --gutter: 32px; --header-h: 72px; } }
@media (min-width: 1100px) { :root { --gutter: 48px; } }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-clearance, 88px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.55 var(--body); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
@media (min-width: 850px) { body { font-size: 17px; } }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.2vw, 66px); letter-spacing: -.035em; }
h2 { font-size: clamp(28px, 3.5vw, 42px); letter-spacing: -.03em; }
h3 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
h4 { margin: 0 0 .5em; font: 600 16px/1.25 var(--display); letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0 0 1em; }
a { color: var(--copper-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (hover: hover) { a:hover { text-decoration-thickness: 2px; } }
:focus-visible { outline: 3px solid var(--copper); outline-offset: 3px; }
.hero :focus-visible, .site-footer :focus-visible, .surface-diagrams :focus-visible { outline-color: var(--copper-soft); }
main:focus { outline: none; }
button, a, [role=button] { -webkit-tap-highlight-color: transparent; }
.container { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { padding-block: 56px; }
@media (min-width: 850px) { .section { padding-block: 88px; } }
.skip-link { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 12px 16px; border-radius: 6px; background: var(--paper); color: var(--ink); box-shadow: 0 10px 24px -12px rgba(24, 33, 40, .5); transition: top .2s var(--ease); }
.skip-link:focus { top: 12px; }

/* Qualification notes stay readable and close to the claim they qualify */
.claim-note { max-width: 78ch; margin: 16px 0 0; padding-left: 14px; border-left: 2px solid var(--copper-soft); font-size: 14px; line-height: 1.6; color: var(--steel); }

/* Header: sticky; once the page moves it gains an edge and the wordmark settles a little smaller.
   Height never changes, so nothing below it shifts. */
.site-header { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .94); border-bottom: 1px solid var(--line); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); transition: box-shadow .35s var(--ease), border-color .35s var(--ease); }
.site-header.is-stuck { border-bottom-color: var(--line-2); box-shadow: 0 14px 30px -26px rgba(24, 33, 40, .6); }
.header-inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; max-width: 1216px; min-height: var(--header-h); margin: 0 auto; padding: 0 var(--gutter); }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-height: 48px; font: 700 19px/1.1 var(--display); letter-spacing: .12em; transform-origin: left center; transition: transform .45s var(--ease); }
.wordmark img { width: 32px; transition: transform .7s var(--ease); }
.wordmark small { display: block; margin-top: 4px; font: 400 11px/1.4 var(--mono); letter-spacing: .07em; color: var(--steel); }
.site-header.is-stuck .wordmark { transform: scale(.94); }
@media (hover: hover) { .wordmark:hover img { transform: rotate(-8deg) scale(1.06); } }
@media (max-width: 819px) { .wordmark small { display: none; } }
#site-navigation { display: flex; flex-wrap: wrap; gap: 4px 28px; }
#site-navigation a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; font: 500 15px/1.2 var(--body); }
#site-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
#site-navigation a[aria-current=page]::after { transform: scaleX(1); }
@media (hover: hover) { #site-navigation a:hover::after { transform: scaleX(1); } }
#site-navigation a[aria-current=page] { color: var(--copper-ink); }
.menu-button { appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-right: -10px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; transition: background-color .2s; }
.menu-button:active { background: var(--mist); }
.menu-strokes { position: relative; display: block; width: 22px; height: 2px; background: currentColor; transition: background-color .2s; }
.menu-strokes::before, .menu-strokes::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: currentColor; transition: transform .45s var(--ease-land), top .25s var(--ease); }
.menu-strokes::before { top: -7px; }
.menu-strokes::after { top: 7px; }
.menu-button[aria-expanded=true] .menu-strokes { background: transparent; }
.menu-button[aria-expanded=true] .menu-strokes::before { top: 0; transform: rotate(45deg); }
.menu-button[aria-expanded=true] .menu-strokes::after { top: 0; transform: rotate(-45deg); }
@media (max-width: 700.98px) {
  .wordmark { font-size: 17px; letter-spacing: .1em; gap: 8px; }
  .wordmark img { width: 28px; }
  .wordmark small { display: none; }
  html:not(.nav-ready) #site-navigation { width: 100%; padding-bottom: 8px; gap: 0 20px; }
  .nav-ready #site-navigation { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 var(--gutter); background: var(--paper); box-shadow: 0 1px 0 var(--line-2), 0 26px 34px -26px rgba(24, 33, 40, .55); }
  .nav-ready #site-navigation::before { content: ""; flex: none; height: 4px; }
  .nav-ready #site-navigation::after { content: ""; flex: none; height: 18px; }
  .nav-ready #site-navigation a { min-height: 54px; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav-ready #site-navigation a::after { display: none; }
  .nav-ready #site-navigation a[aria-current=page] { padding-left: 12px; box-shadow: inset 3px 0 0 var(--copper); }
  .menu-open #site-navigation a { animation: nav-in .5s var(--ease) backwards; animation-delay: calc(40ms + var(--i, 0) * 55ms); }
}
@keyframes nav-in { from { opacity: 0; transform: translateY(-8px); } }

/* Buttons and links: visible on hover, a press on tap */
.button { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px 11px; border: 1px solid transparent; border-radius: 3px; background: var(--paper); color: var(--ink); font: 600 15px/1.3 var(--body); letter-spacing: .01em; text-decoration: none; box-shadow: inset 0 -2px 0 var(--copper); transition: background-color .3s var(--ease), border-color .3s var(--ease), box-shadow .35s var(--ease), transform .25s var(--ease); }
.button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--copper-pale); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.button-outline { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; box-shadow: inset 0 -1px 0 var(--copper-soft); }
@media (hover: hover) {
  .button:hover { box-shadow: inset 0 -3px 0 var(--copper); }
  .button-outline:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .5); box-shadow: inset 0 -2px 0 var(--copper-soft); }
}
.button:active { transform: translateY(1px); }
.button:active::after { transform: scaleX(1); transition-duration: .22s; }
.text-link, .surface-card-grid + p a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; color: var(--copper-ink); font-weight: 600; text-decoration: none;
  background: linear-gradient(var(--copper), var(--copper)) 0 calc(100% - 9px) / 0% 2px no-repeat, linear-gradient(currentColor, currentColor) 0 calc(100% - 9px) / 100% 1px no-repeat;
  transition: background-size .45s var(--ease), color .25s; }
.text-link::after, .surface-card-grid + p a::after { content: none; }
@media (hover: hover) {
  .text-link:hover, .surface-card-grid + p a:hover { background-size: 100% 2px, 100% 1px; }

}
.text-link:active, .surface-card-grid + p a:active { background-size: 100% 2px, 100% 1px; transition-duration: .2s; }
.return-navigation { padding-block: 28px 56px; }
.return-navigation .text-link::after { content: none; }

/* Chips: page contents on Applications and the topic index on Technical */
.topic-navigation { display: flex; flex-wrap: wrap; gap: 0 22px; margin-top: 22px; border-bottom: 1px solid var(--line); }
.topic-navigation a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 0 1px; color: var(--steel); text-decoration: none; font: 500 14px/1 var(--body); white-space: nowrap; transition: color .25s; }
.topic-navigation a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
@media (hover: hover) { .topic-navigation a:hover { color: var(--ink); } .topic-navigation a:hover::after { transform: scaleX(.3); } }
.topic-navigation a:active::after { transform: scaleX(1); transition-duration: .2s; }
.topic-navigation a.is-active { color: var(--ink); }
.topic-navigation a.is-active::after { transform: none; }

/* The clear-coat sheen: a gloss line that passes across a surface once, like a fresh coat going on.
   It belongs to whatever is chosen or pointed at; it never loops. */
.coat, .surface-card-stage, .selected-scene-media, .path-art { position: relative; overflow: hidden; }
.coat::after, .surface-card-stage::after, .selected-scene-media::after, .path-art::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 10%, rgba(255, 255, 255, .03) 28%, rgba(255, 255, 255, .12) 47%, rgba(255, 244, 236, .09) 56%, rgba(255, 255, 255, .03) 72%, transparent 90%);
  transform: translateX(-70%); }
@keyframes coat-pass { 0% { opacity: 0; transform: translateX(-70%); } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%); } }
@keyframes coat-pass-again { 0% { opacity: 0; transform: translateX(-70%); } 30% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%); } }
.coat.is-passing::after { animation: coat-pass-again 2.8s ease-in-out; }

/* Load choreography (CSS only, so nothing flashes before the script runs) */
.lines .ln { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lines .ln > span { display: block; }
@keyframes line-rise { from { transform: translateY(108%); } }
@keyframes load-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes media-settle { from { opacity: 0; transform: scale(1.12); } }
@keyframes build-in { from { opacity: 0; transform: translateY(16px); } }
.lines .ln > span { animation: line-rise 1.05s var(--ease) backwards; animation-delay: .12s; }
.lines .ln:nth-child(2) > span { animation-delay: .25s; }
.lines .ln:nth-child(3) > span { animation-delay: .38s; }
.hero-description, .hero .actions, .hero-scene figcaption, .hero-scene-choices,
.application-intro > p, .application-intro .topic-navigation,
.technical .container > p, .technical .topic-navigation, .technical .topics { animation: load-up .9s var(--ease) backwards; animation-delay: var(--d, .45s); }
.hero-description, .application-intro > p, .technical .container > p { --d: .42s; }
.hero .actions, .application-intro .topic-navigation, .technical .topic-navigation { --d: .54s; }
.hero-scene figcaption { --d: .9s; }
.hero-scene-choices { --d: 1s; }
.technical .topics { --d: .66s; animation-name: fade-in; }
@keyframes fade-in { from { opacity: 0; } }

/* Easing in as you scroll: one curve, one distance, grouped staggers. The script adds these classes only to
   content that starts below the fold, and removes them once it has arrived. */
.reveal:not(.in) { opacity: 0; transform: translateY(var(--rise)); }
.reveal.in { transition: opacity .85s var(--ease) calc(var(--i, 0) * 90ms), transform 1s var(--ease) calc(var(--i, 0) * 90ms); }
.rise { overflow: hidden; padding-bottom: .12em; margin-bottom: .38em; }
.rise > .rise-inner { display: block; text-wrap: balance; }
.reveal-line:not(.in) > .rise-inner { transform: translateY(108%); }
.reveal-line.in > .rise-inner { transition: transform 1.05s var(--ease); }

/* Home hero: the coating in use, chosen by setting */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 88% 30%, rgba(216, 154, 114, .16), transparent 70%), var(--ink); }
.hero::before { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(216, 154, 114, .55), transparent); }
.hero-grid { display: grid; gap: 28px; padding-block: 32px 40px; }
.hero-copy { min-width: 0; will-change: opacity, transform; }
.hero h1 { font-size: clamp(38px, 10.4vw, 46px); margin-bottom: 18px; }
.hero-description { max-width: 52ch; color: var(--on-ink); font-size: 17px; line-height: 1.5; }
.hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.hero-scene { min-width: 0; }
.hero-scene figure { margin: 0; }
.hero-media { border-radius: 10px; aspect-ratio: 4 / 3; background: var(--ink-2); box-shadow: 0 30px 60px -36px rgba(0, 0, 0, .8); }
.hero-drift { position: absolute; inset: min(-7%, -28px) 0; }
@supports not (aspect-ratio: 1 / 1) { .hero-media { height: 0; padding-top: 75%; } }
.hero-drift img { width: 100%; height: 100%; object-fit: cover; animation: media-settle 1.7s var(--ease) .1s backwards; }
.hero-media::after { animation: coat-pass 3.2s ease-in-out 1.2s; }
.hero-scene figcaption { margin-top: 12px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--on-ink-2); }
.hero-scene-choices { position: relative; display: flex; gap: 22px; margin-top: 14px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
html:not(.enhanced) .hero-scene-choices { display: none; }
.hero-scene-choices button { position: relative; min-height: 44px; padding: 0 1px; border: 0; background: transparent; color: var(--on-ink-2); font: 500 14px/1.2 var(--body); cursor: pointer; transition: color .3s var(--ease); }
.hero-scene-choices button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper-soft); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.hero-scene-choices button[aria-pressed=true] { color: #fff; }
.hero-scene-choices button[aria-pressed=true]::after { transform: none; }
@media (hover: hover) { .hero-scene-choices button[aria-pressed=false]:hover { color: #fff; } .hero-scene-choices button[aria-pressed=false]:hover::after { transform: scaleX(.3); } }
.hero-scene-choices button:active::after { transform: scaleX(1); transition-duration: .2s; }
@media (min-width: 850px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 56px; min-height: clamp(480px, 72svh, 640px); padding-block: 56px; }
  .hero h1 { font-size: clamp(50px, 5.4vw, 68px); }
  .hero-description { font-size: 18px; }
}

/* Home: the coating's advantages, three equal claims with a film line that draws in */
#coating .overview { display: grid; gap: 28px; margin: 32px 0 36px; }
.overview > div { position: relative; padding-top: 22px; }
.overview > div::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--copper), var(--copper-soft) 70%, transparent); transform-origin: left; }
.overview > div.reveal::before { transform: scaleX(0); }
.overview > div.reveal.in::before { transform: none; transition: transform 1.2s var(--ease) calc(.15s + var(--i, 0) * 90ms); }
.overview h3 { margin-bottom: 8px; font-size: 21px; }
.overview p { margin: 0; color: var(--steel); }
#coating > p:not(.claim-note) { max-width: 66ch; font-size: 18px; }
@media (min-width: 850px) { #coating .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }

/* Home: two ways in, each a whole-card link */
.paths { display: grid; gap: 16px; padding-block: 8px 72px; }
.path { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); transition: transform .55s var(--ease), box-shadow .55s var(--ease), border-color .3s; }
.path-copy { display: flex; flex-direction: column; align-items: flex-start; padding: 22px 20px 16px; }
.path h2 { font-size: clamp(24px, 2.6vw, 30px); }
.path p { color: var(--steel); }
.path .text-link { margin-top: auto; }
.path .text-link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
@supports selector(:has(*)) {
  .path .text-link:focus-visible { outline: none; }
  .path:has(.text-link:focus-visible) { outline: 3px solid var(--copper); outline-offset: 3px; }
}
.path-art { height: 168px; background: var(--mist); }
.path-materials { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.path-materials > span { position: relative; overflow: hidden; }
.path-materials > span > span { position: absolute; inset: -18px 0; }
.path-materials img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.path-film { background: linear-gradient(180deg, #edf1f3, #e3e9ec); }
.film-base { position: absolute; left: 0; right: 0; bottom: 0; height: 44%; background: repeating-linear-gradient(135deg, rgba(80, 97, 110, .35) 0 1px, transparent 1px 9px), #cdd6db; }
.film-coat { position: absolute; left: 0; right: 0; bottom: 44%; height: 16px; border-top: 2px solid var(--ink); background: linear-gradient(180deg, rgba(168, 93, 59, .2), rgba(168, 93, 59, .48)); transform-origin: left; }
.film-gloss { position: absolute; left: 0; right: 0; bottom: calc(44% + 18px); height: 34%; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .55)); }
.path.reveal .film-coat { transform: scaleX(0); }
.path.reveal.in .film-coat { transform: none; transition: transform 1.3s var(--ease) .35s; }
.path.reveal.in .path-film::after { animation: coat-pass 3s ease-in-out 1.4s; }
@media (hover: hover) {
  .path:hover { transform: translateY(-4px); border-color: var(--line-2); box-shadow: 0 30px 44px -34px rgba(24, 33, 40, .6); }
  .path:hover .path-materials img { transform: scale(1.07); }
  .path:hover .path-art::after { animation: coat-pass-again 2.8s ease-in-out; }
  .path:hover .text-link { background-size: 100% 2px, 100% 1px; }

}
.path:active { transform: scale(.985); transition-duration: .12s; }
@media (min-width: 850px) {
  .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding-bottom: 96px; }
  .path-art { height: 210px; }
  .path-copy { padding: 28px 28px 20px; }
}

/* Applications: intro */
.application-intro { padding-bottom: 8px; }
.application-intro > p { max-width: 62ch; font-size: 18px; color: var(--steel); }
#surfaces, #applications { padding-block: 40px; }
@media (min-width: 850px) { #surfaces, #applications { padding-block: 64px; } }
#surfaces > p { max-width: 66ch; }

/* Surface cards: hover to glance, click or tap to keep one open with its detail and route */
.surface-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 10px; margin-top: 24px; }
@media (min-width: 850px) { .surface-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.surface-card { position: relative; min-width: 0; }
.surface-card-stage { height: 150px; border-radius: var(--radius); background: var(--mist); transition: transform .55s var(--ease-land), box-shadow .45s var(--ease); }
@media (min-width: 480px) { .surface-card-stage { height: 176px; } }
@media (min-width: 850px) { .surface-card-stage { height: 214px; } }
.surface-card-stage > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .6s var(--ease); }
.surface-card-toggle { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius); background: transparent; color: #fff; text-align: left; cursor: pointer; }
.surface-card-toggle:focus { outline: 3px solid var(--copper); outline-offset: -3px; }
.surface-card-toggle:focus:not(:focus-visible) { outline: none; }
@supports selector(:has(*)) {
  .surface-card-toggle:focus-visible { outline: none; }
  .surface-card:has(.surface-card-toggle:focus-visible) .surface-card-stage { outline: 3px solid var(--copper); outline-offset: 3px; }
}
.surface-name-strip { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 46px; padding: 10px 12px; background: linear-gradient(0deg, rgba(24, 33, 40, .92), rgba(24, 33, 40, .5) 75%, rgba(24, 33, 40, 0)); font: 600 16px/1.2 var(--display); letter-spacing: .01em; transition: background-color .35s var(--ease); }
.surface-name-strip > span { display: none; }
.surface-name-strip::after { content: ""; position: absolute; left: 12px; bottom: 8px; width: 16px; height: 2px; background: var(--copper-soft); transition: width .6s var(--ease), background-color .3s; }
.surface-overlay p { margin: 0; }
html:not(.cards-ready) .surface-card-stage .surface-overlay { display: none; }
.cards-ready .surface-overlay { position: absolute; left: 0; right: 0; bottom: 46px; z-index: 2; padding: 12px 12px 10px; background: rgba(24, 33, 40, .86); color: #fff; opacity: 0; transform: translateY(14px); transition: opacity .35s var(--ease), transform .55s var(--ease); pointer-events: none; }
.cards-ready .surface-overlay p { font: 500 14px/1.35 var(--body); }
.surface-card-fallback { display: flex; align-items: center; min-height: 44px; margin: 0; padding-top: 4px; font: 600 16px var(--display); letter-spacing: 0; }
.surface-static-detail { padding: 8px 2px 0; font-size: 14px; line-height: 1.45; color: var(--steel); }
.surface-static-detail p { margin: 0 0 2px; }
.surface-static-detail a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.cards-ready .surface-card-fallback, .cards-ready .surface-static-detail { display: none; }
.cards-ready .surface-card[data-open=true] .surface-static-detail { display: block; animation: build-in .55s var(--ease) backwards .08s; }
.surface-card[data-open=true] .surface-overlay { opacity: 1; transform: none; }
.surface-card[data-open=true] .surface-card-stage { box-shadow: 0 0 0 2px var(--copper), 0 20px 34px -26px rgba(24, 33, 40, .7); }
.surface-card[data-open=true] .surface-card-stage > img { transform: scale(1.05); }
.surface-card[data-open=true] .surface-name-strip { background-color: rgba(24, 33, 40, .92); }
.surface-card[data-open=true] .surface-name-strip::after { width: 44px; background: var(--copper-pale); }
.surface-card[data-open=true] .surface-card-stage::after { animation: coat-pass 2.8s ease-in-out; }
.surface-card:active .surface-card-stage { transform: scale(.97); transition-duration: .12s; }
@media (hover: hover) and (pointer: fine) {
  .surface-card:hover .surface-card-stage { box-shadow: 0 22px 36px -26px rgba(24, 33, 40, .75); }
  .surface-card[data-open=true]:hover .surface-card-stage { box-shadow: 0 0 0 2px var(--copper), 0 22px 36px -26px rgba(24, 33, 40, .75); }
  .surface-card:hover .surface-card-stage > img { transform: scale(1.07); filter: saturate(1.08) contrast(1.03); }
  .surface-card:hover .surface-card-stage::after { animation: coat-pass 2.8s ease-in-out; }
  .cards-ready .surface-card:hover .surface-overlay { opacity: 1; transform: none; }
  .surface-card:hover .surface-name-strip::after { width: 32px; }

}
.cards-ready .surface-card:has(.surface-card-toggle:focus-visible) .surface-overlay { opacity: 1; transform: none; }

/* Application scenes: choose a setting, see it full size */
.scene-explorer { margin-top: 24px; }
html:not(.enhanced) .scene-choices { display: none; }
.scene-choices { position: relative; display: flex; gap: 10px; margin: 0 0 24px; }
.scene-choice { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, box-shadow .45s var(--ease), transform .55s var(--ease-land); }
.scene-choice > img { width: 100%; height: 88px; object-fit: cover; transition: transform 1s var(--ease), filter .5s; }
.scene-choice > span { display: grid; gap: 3px; padding: 10px 12px 13px; }
.scene-choice strong { font: 600 15px/1.2 var(--display); }
.scene-choice > span > span { font-size: 12.5px; line-height: 1.35; color: var(--steel); }
.scene-choice::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.scene-choice[aria-pressed=true] { border-color: var(--copper); }
.scene-choice[aria-pressed=true]::after { transform: none; }
.scene-choice[aria-pressed=true] > img { filter: saturate(1.06); }
@media (hover: hover) {
  .scene-choice:hover { transform: translateY(-3px); box-shadow: 0 20px 32px -26px rgba(24, 33, 40, .65); }
  .scene-choice:hover > img { transform: scale(1.07); }
}
.scene-choice:active { transform: scale(.97); transition-duration: .1s; }
.selected-scene { display: grid; gap: 18px; margin-bottom: 28px; min-width: 0; }
.scene-ready .selected-scene { margin-bottom: 0; }
.selected-scene-media { border-radius: 12px; background: var(--ink); }
.selected-scene-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.selected-scene-copy { min-width: 0; }
.selected-scene-copy h3 { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; margin-bottom: 12px; }
.selected-scene-copy p { max-width: 54ch; color: var(--steel); }
.selected-scene.entering .selected-scene-media img { animation: media-settle .85s var(--ease) backwards; }
.selected-scene.entering .selected-scene-media::after { animation: coat-pass-again 2.8s ease-in-out .3s; }
.selected-scene.entering .selected-scene-copy > * { animation: build-in .6s var(--ease) backwards; animation-delay: .1s; }
.selected-scene.entering .selected-scene-copy > :nth-child(2) { animation-delay: .18s; }
.selected-scene.entering .selected-scene-copy > :nth-child(3) { animation-delay: .26s; }
.scene-image-error { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--mist); color: var(--ink); font-size: 14px; }
@media (max-width: 849px) {
  .scene-choices { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); margin-top: -10px; padding: 10px max(var(--gutter), 40px) 8px var(--gutter); scroll-padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .scene-choices::-webkit-scrollbar { display: none; }
  .scene-choice { flex: 0 0 148px; scroll-snap-align: center; }
  .scene-choices.at-end { -webkit-mask-image: none; mask-image: none; }
  .scene-choice > img { height: 76px; }
}
@media (min-width: 850px) {
  .selected-scene { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: 48px; }
}
#applications > h3 { margin-top: 44px; font-size: 18px; }
.pending-material-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.pending-material-links li { padding: 8px 14px; border: 1px solid var(--line-2); border-radius: 6px; font-size: 14px; color: var(--steel); background: var(--paper); }
/* Other categories: a name and one line of context each, packed two across on phones */
.category-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 850px) { .category-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.category-notes li { display: grid; align-content: start; gap: 6px; min-width: 0; padding: 14px; border-color: var(--line); border-radius: var(--radius); color: var(--steel); }
.category-notes strong { position: relative; padding-top: 10px; font: 600 15px/1.2 var(--display); color: var(--ink); }
.category-notes strong::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 2px; background: var(--copper); }
.category-notes span { font-size: 13px; line-height: 1.45; }
@media (max-width: 380px) { .category-notes { grid-template-columns: 1fr; } }

/* Technical: a reading surface. Phone: a sticky index under the header. Desktop: an index beside the text. */
.technical { padding-block: 40px 24px; background: var(--mist); }
.technical h1 { margin-bottom: 12px; }
.technical .container > p { max-width: 62ch; font-size: 17px; color: var(--steel); }
@media (max-width: 1099px) {
  .enhanced .technical .topic-navigation { position: sticky; top: var(--header-live, var(--header-h)); z-index: 5; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 18px calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter); background: rgba(242, 245, 246, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter); }
  .enhanced .technical .topic-navigation::-webkit-scrollbar { display: none; }
  .enhanced .technical .topic-navigation a { flex: none; scroll-snap-align: start; }
}
@media (min-width: 1100px) {
  .technical .container { display: grid; grid-template-columns: 200px minmax(0, 1fr); column-gap: 56px; align-items: start; }
  .technical .container > h1, .technical .container > p { grid-column: 1 / -1; }
  .technical .topic-navigation { grid-column: 1; position: sticky; top: calc(var(--header-live, var(--header-h)) + 32px); flex-direction: column; flex-wrap: nowrap; gap: 2px; margin-top: 24px; border-bottom: 0; border-left: 2px solid var(--line-2); }
  .technical .topic-navigation a::after { display: none; }
  .technical .topic-navigation a { justify-content: flex-start; min-height: 44px; margin-left: -2px; padding: 0 0 0 16px; border: 0; border-left: 2px solid transparent; border-radius: 0; background: none; transition: border-color .35s var(--ease), color .25s, padding-left .45s var(--ease); }
  .technical .topic-navigation a.is-active { border-left-color: var(--copper); background: none; color: var(--copper-ink); }
  .technical .topics { grid-column: 2; }
}
@media (hover: hover) and (min-width: 1100px) {
  .technical .topic-navigation a:hover { padding-left: 20px; }
}

/* Topics: each opens and builds its contents in order */
.topics { margin-top: 24px; border-top: 1px solid var(--line-2); }
.topic { border-bottom: 1px solid var(--line-2); }
.topic-heading { margin: 0; font-size: inherit; letter-spacing: 0; }
.plain-topic-title { display: block; padding: 22px 0; font: 600 22px/1.25 var(--display); }
.enhanced .plain-topic-title { display: none; }
.topic-toggle { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 20px 2px 20px 0; border: 0; background: none; color: var(--ink); font: 600 20px/1.25 var(--display); text-align: left; cursor: pointer; transition: color .3s, padding-left .5s var(--ease); }
.topic-toggle small { display: block; margin-top: 4px; font: 400 14px/1.45 var(--body); color: var(--steel); }
.topic-toggle::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease); }
.topic-toggle[aria-expanded=true] { color: var(--copper-ink); }
.topic-toggle[aria-expanded=true]::after { transform: none; }
.toggle-icon { flex: none; position: relative; padding: 6px 0 7px; font-size: 0; line-height: 0; color: var(--steel); transition: color .3s; }
.toggle-icon::before { content: "Open"; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.toggle-icon::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-2); transform-origin: left; transition: background-color .3s, height .3s; }
.topic-toggle[aria-expanded=true] .toggle-icon::before { content: "Close"; }
.topic-toggle[aria-expanded=true] .toggle-icon::after { height: 2px; background: var(--copper); }
@keyframes line-run { from { transform: scaleX(0); } }
.topic-toggle:active .toggle-icon::after { animation: line-run .35s var(--ease); }
.topic-toggle[aria-expanded=true] .toggle-icon { color: var(--copper-ink); }

@media (hover: hover) {
  .topic-toggle:hover { padding-left: 8px; }
  .topic-toggle:hover .toggle-icon { color: var(--copper-ink); }
  .topic-toggle:hover .toggle-icon::after { background: var(--copper); }

}
.panel-inner { padding: 8px 0 44px; }
.topic-panel.opening .panel-inner > :not(.reveal):not(.property-grid) { animation: build-in .65s var(--ease) backwards; animation-delay: calc(.06s + var(--i, 0) * 70ms); }
.topic-panel.opening .property:not(.reveal) { animation: build-in .6s var(--ease) backwards; animation-delay: calc(.14s + var(--j, 0) * 38ms); }
.topic-intro { max-width: 64ch; margin-top: 12px; font-size: 17px; color: var(--steel); }
.panel-inner .section-intro { max-width: 66ch; margin: 28px 0 18px; }
.panel-inner .section-intro h3 { margin-bottom: .4em; font-size: clamp(24px, 2.6vw, 30px); font-weight: 700; letter-spacing: -.03em; }
.panel-inner .section-intro p { color: var(--steel); }
.panel-inner > h3 { margin: 36px 0 12px; font-size: 20px; }
.subheading { margin: 36px 0 12px; font-size: 20px; }

/* Performance properties: dense spec tiles, the value first */
.property-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 20px 0 32px; }
@media (min-width: 700px) { .property-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 1100px) { .property-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.property { display: flex; flex-direction: column; min-width: 0; padding: 16px 14px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.property-value { margin: 0 0 10px; font: 700 clamp(21px, 2.4vw, 27px)/1.05 var(--display); letter-spacing: -.02em; color: var(--copper); font-variant-numeric: tabular-nums; }
.property-value [data-count] { display: inline-block; text-align: left; }
.property h4 { margin: 0 0 4px; font-size: 15px; line-height: 1.25; }
.property p:last-child { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--steel); }
@media (hover: hover) { .property:hover { transform: translateY(-3px); border-color: var(--copper-soft); box-shadow: 0 18px 30px -26px rgba(24, 33, 40, .65); } }

/* Grouped benefits and application methods */
.benefit-grid { display: grid; gap: 10px; margin: 14px 0 24px; }
@media (min-width: 700px) { .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s var(--ease); }
.card h4 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 2px solid var(--copper); font-size: 17px; }
.card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.card li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.4; }
.card li::before { content: ""; position: absolute; left: 0; top: .66em; width: 10px; height: 2px; background: var(--copper-soft); }
.card p { margin: 0; font-size: 15px; color: var(--steel); }
@media (hover: hover) { .card:hover { transform: translateY(-3px); border-color: var(--copper-soft); box-shadow: 0 18px 30px -26px rgba(24, 33, 40, .65); } }

/* Comparison: side by side at every width, the Alturion column carried in copper */
#difference { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line-2); }
table { width: 100%; margin-top: 8px; border-collapse: separate; border-spacing: 0; font-size: 15px; }
caption { caption-side: top; padding-bottom: 12px; text-align: left; font: 500 12px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--steel); }
th { padding: 14px 18px; text-align: left; font: 600 14px/1.3 var(--display); background: var(--paper); border-bottom: 2px solid var(--line-2); }
th:first-child { border-radius: 10px 0 0 0; }
th:last-child { border-radius: 0 10px 0 0; border-bottom-color: var(--copper); background: var(--ink); color: #fff; }
td { width: 50%; padding: 14px 18px; vertical-align: top; border-bottom: 1px solid var(--line); background: var(--paper); transition: background-color .3s; }
td:first-child { color: var(--steel); }
td:last-child { background: var(--copper-wash); border-bottom-color: #ecd9cd; color: var(--copper-ink); font-weight: 600; }
.mobile-label { display: none; }
@media (hover: hover) { tbody tr:hover td { background: #fbfcfc; } tbody tr:hover td:last-child { background: #f3e2d7; } }
@media (max-width: 700.98px) {
  table, tbody, tr, td { display: block; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  caption { display: block; }
  tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); }
  td { width: auto; padding: 12px; border: 0; font-size: 14px; line-height: 1.4; }
  .mobile-label { display: block; margin-bottom: 4px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--steel); }
  td:last-child .mobile-label { color: var(--copper-ink); }
}
.brand-statement { position: relative; margin: 32px 0 16px; padding: 4px 0 4px 22px; font: 700 clamp(22px, 3vw, 32px)/1.2 var(--display); letter-spacing: -.02em; }
.brand-statement::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--copper); transform-origin: top; }
.brand-statement.reveal::before { transform: scaleY(0); }
.brand-statement.reveal.in::before { transform: none; transition: transform .9s var(--ease) .25s; }

/* How the coating works: the stepped illustration and its controls */
.mechanism { display: grid; gap: 20px; margin: 16px 0 28px; }
@media (min-width: 900px) { .mechanism { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; } }
.coating-figure { margin: 0; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.coating-figure svg { display: block; width: 100%; height: auto; }
.coating-figure figcaption { margin-top: 10px; font-size: 13.5px; color: var(--steel); }
.coating-figure figcaption strong { display: block; font: 600 14px var(--display); color: var(--ink); }
.coating-figure figcaption > span { display: block; margin-top: 4px; }
.mechanism-state { min-height: 3em; margin: 12px 0; font: 500 16px/1.45 var(--body); color: var(--ink); }
.particle, .positive-charge, .contact-arrow { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.coating-film, .film-edge { transition: opacity .5s var(--ease); }
.film-edge { opacity: .3; }
.cured-label { display: none; }
.mechanism:not([data-state="1"]) .film-edge { opacity: 1; }
.mechanism:not([data-state="1"]) .cured-label { display: inline; }
.mechanism[data-state="3"] .particle { opacity: 1; transform: translateY(-6px); }
.mechanism[data-state="4"] .particle { opacity: 1; transform: translateY(2px); }
.mechanism[data-state="4"] .positive-charge, .mechanism[data-state="4"] .contact-arrow, .mechanism[data-state="6"] .positive-charge { opacity: 1; }
.mechanism[data-state="5"] .particle { opacity: .3; transform: translateY(4px) scale(.6); }
.mechanism[data-state="6"] .coating-film { opacity: .8; }
.mechanism-controls { position: relative; display: grid; gap: 6px; padding-top: 16px; }
.mechanism-controls::before, .mechanism-controls::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 3px; }
.mechanism-controls::before { background: var(--line); }
.mechanism-controls::after { background: var(--copper); transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform .7s var(--ease); }
.mechanism-controls button[data-mechanism-step] { appearance: none; display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .3s, background-color .3s, transform .5s var(--ease-land); }
.mechanism-controls strong { display: block; font: 600 15px/1.3 var(--display); }
.mechanism-controls button > span { display: block; margin-top: 2px; font-size: 13.5px; color: var(--steel); }
.mechanism-controls button[aria-pressed=true] { border-color: var(--copper); background: var(--copper-wash); }
.selected-label { display: block; visibility: hidden; margin-top: 4px; font: normal 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--copper-ink); }
.mechanism-controls button[aria-pressed=true] .selected-label { visibility: visible; }
@media (hover: hover) { .mechanism-controls button[data-mechanism-step][aria-pressed=false]:hover { border-color: var(--copper-soft); } }
.mechanism-controls button:active { transform: scale(.98); transition-duration: .1s; }
.mechanism-play { appearance: none; position: relative; justify-self: start; min-height: 44px; margin-top: 6px; padding: 10px 18px 11px; border: 1px solid var(--ink); border-radius: 3px; background: var(--ink); color: #fff; font: 600 14px/1.2 var(--body); cursor: pointer; box-shadow: inset 0 -2px 0 var(--copper-soft); transition: background-color .25s, transform .25s var(--ease); }
.mechanism-play:active { transform: translateY(1px); }
@media (hover: hover) { .mechanism-play:hover { background: var(--ink-2); } }
.mechanism-controls .claim-note { margin-top: 6px; }
@media (max-width: 700.98px) {
  .mechanism-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mechanism-controls button[data-mechanism-step] > span, .mechanism-controls .selected-label { display: none; }
  .mechanism-controls .mechanism-play, .mechanism-controls .claim-note { grid-column: 1 / -1; }
}
.surface-diagrams { display: grid; gap: 12px; margin: 24px 0; }
@media (min-width: 700px) { .surface-diagrams { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.surface-diagrams article { padding: 20px; border-radius: 12px; background: var(--ink); color: #fff; }
.surface-diagrams h4 { color: #fff; font-size: 18px; }
.surface-diagrams p { margin: 0; font-size: 15px; color: var(--on-ink-2); }
.surface { display: flex; justify-content: space-around; align-items: flex-end; min-height: 84px; margin-bottom: 18px; border-bottom: 10px solid #88949b; font: 400 22px var(--mono); color: #c9d3d9; }
.surface.active { border-bottom-color: var(--copper-soft); color: var(--copper-pale); }
.surface span { display: inline-block; }
@keyframes draw-down { from { transform: translateY(-22px); opacity: 0; } }
.topic-panel.opening .surface.active span, .surface-diagrams article.shown .surface.active span, .surface-diagrams article.reveal.in .surface.active span { animation: draw-down .9s var(--ease-land) backwards; }
.surface.active span:nth-child(2) { animation-delay: .12s; }
.surface.active span:nth-child(3) { animation-delay: .24s; }

/* Sequences: a film line connects the steps; on Application it marks dry to touch apart from full cure */
.science-steps, .application-steps { position: relative; display: grid; margin: 28px 0 8px; padding: 0; list-style: none; }
.science-steps li, .application-steps li { position: relative; min-width: 0; padding: 0 0 22px 44px; }
.science-steps li::before, .application-steps li::before { content: ""; position: absolute; left: 9px; top: 3px; z-index: 1; width: 12px; height: 12px; border: 2px solid var(--copper); border-radius: 2px; background: var(--paper); transition: transform .7s var(--ease-land), opacity .4s; }
.science-steps li::after, .application-steps li::after { content: ""; position: absolute; left: 15px; top: 21px; bottom: 0; width: 2px; background: var(--line-2); transform-origin: top; transition: transform .9s var(--ease) .15s; }
.science-steps li:last-child::after, .application-steps li:last-child::after { display: none; }
.science-steps li.reveal::before, .application-steps li.reveal::before { opacity: 0; transform: scale(.3); }
.science-steps li.reveal.in::before, .application-steps li.reveal.in::before { opacity: 1; transform: none; }
.science-steps li.reveal::after, .application-steps li.reveal::after { transform: scaleY(0); }
.science-steps li.reveal.in::after, .application-steps li.reveal.in::after { transform: none; }
.step-number { display: block; margin-bottom: 6px; font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--copper-ink); }
.science-steps h4, .application-steps h4 { margin: 0 0 4px; font-size: 16px; }
.science-steps p, .application-steps p { margin: 0; font-size: 14.5px; color: var(--steel); }
.application-steps .claim-note { margin-top: 8px; font-size: 13px; }
.application-steps li:nth-child(3)::before { border-style: dashed; }
.application-steps li:nth-child(3)::after { background: repeating-linear-gradient(180deg, var(--copper-soft) 0 5px, transparent 5px 9px); }
.application-steps li:nth-child(4)::before, .application-steps li:nth-child(5)::before { background: var(--copper); }
@media (min-width: 900px) {
  .science-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 16px; }
  .application-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 16px; }
  .science-steps li, .application-steps li { padding: 34px 6px 0 0; }
  .science-steps li::before, .application-steps li::before { left: 0; top: 0; }
  .science-steps li::after, .application-steps li::after { left: 20px; right: -12px; top: 7px; bottom: auto; width: auto; height: 2px; transform-origin: left; }
  .application-steps li:nth-child(3)::after { background: repeating-linear-gradient(90deg, var(--copper-soft) 0 5px, transparent 5px 9px); }
  .science-steps li.reveal::after, .application-steps li.reveal::after { transform: scaleX(0); }
}

/* Evaluated organisms and their qualification */
.organisms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 20px; }
@media (min-width: 700px) { .organisms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.organisms > div { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .5s var(--ease), border-color .3s; }
.organisms > div:last-child { border-style: dashed; border-color: var(--copper-soft); }
.organisms dt { font: 700 22px/1.1 var(--display); letter-spacing: -.01em; }
@media (max-width: 340px) { .methods .card:not(.method-primary) { padding-inline: 8px; } .organisms dt { font-size: 19px; } }
.organisms dd { margin: 6px 0 0; font-size: 13.5px; color: var(--steel); }
@media (hover: hover) { .organisms > div:hover { transform: translateY(-3px); border-color: var(--copper-soft); } }
.qualification { padding: 18px 20px; border-left: 3px solid var(--copper); border-radius: 0 var(--radius) var(--radius) 0; background: var(--paper); }
.qualification p { margin: 0 0 8px; font-size: 14.5px; }
.qualification p:last-child { margin: 0; }

/* Application methods: spray first, the other three as options */
.methods { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.methods .card:not(.method-primary) { padding: 14px 12px; }
.methods .card:not(.method-primary) h3 { font-size: 15px; }
.methods .card:not(.method-primary) p { font-size: 13.5px; line-height: 1.4; }
@media (min-width: 850px) { .methods { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 12px; } .methods .card:not(.method-primary) { padding: 20px; } }
.method-primary { grid-column: 1 / -1; background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 850px) { .method-primary { grid-column: auto; } }
.method-primary h4 { color: #fff; border-bottom-color: var(--copper-soft); }
.method-primary p { color: var(--on-ink); }
.methods-note { max-width: 70ch; font-size: 15px; color: var(--steel); }
/* The film, in one line before the illustration */
.film-intro { max-width: 62ch; margin: 12px 0 20px; }
.film-lead { margin-bottom: 6px; font: 600 clamp(20px, 2.2vw, 24px)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.film-intro p:last-child { color: var(--steel); }

/* Compatible surfaces list */
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 8px; padding: 0; list-style: none; }
.category-grid li { padding: 12px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); font: 600 14.5px/1.2 var(--display); text-align: center; }

/* Footer: brand and line, the site, then how to reach Alturion LLC; copyright beneath a film line */
.site-footer { padding-block: 44px calc(28px + env(safe-area-inset-bottom, 0px)); background: var(--ink-deep); color: var(--on-ink-2); }
.footer-grid { display: grid; gap: 28px; }
@media (min-width: 850px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, .8fr) minmax(0, 1.1fr); gap: 40px; align-items: start; } }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: #fff; text-decoration: none; font: 700 16px var(--display); letter-spacing: .14em; }
.footer-brand img { width: 34px; transition: transform .7s var(--ease); }
@media (hover: hover) { .footer-brand:hover img { transform: rotate(-8deg) scale(1.05); } }
.footer-line { margin: 14px 0 0; font: 600 clamp(22px, 2.6vw, 28px)/1.15 var(--display); letter-spacing: -.02em; color: #fff; max-width: 16ch; }
.footer-heading { margin: 0 0 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--copper-soft); }
.site-footer nav { display: flex; flex-direction: column; }
.site-footer nav a { position: relative; display: inline-flex; align-items: center; align-self: flex-start; min-height: 44px; color: var(--on-ink); text-decoration: none; }
.footer-lines { margin: 0 0 10px; padding: 0; list-style: none; }
.footer-lines a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--on-ink); text-decoration: none; font-variant-numeric: tabular-nums; }
.footer-lines a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--copper-soft); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
@media (hover: hover) { .footer-lines a:hover::after { transform: none; } }
.site-footer address { font-style: normal; font-size: 14px; line-height: 1.6; color: var(--on-ink); }
.site-footer address span { display: block; color: var(--on-ink-2); font-size: 13px; }
.footer-legal { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid transparent; border-image: linear-gradient(90deg, rgba(216, 154, 114, .6), rgba(255, 255, 255, .12) 40%, rgba(255, 255, 255, .06)) 1; font-size: 13px; color: var(--on-ink-2); }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.footer-legal p { margin: 0; }
.site-footer .footer-policies { flex-direction: row; flex-wrap: wrap; gap: 0 18px; }
.site-footer .footer-policies a { min-height: 44px; font-size: 13px; color: var(--on-ink-2); }
@media (hover: hover) { .site-footer .footer-policies a:hover { color: #fff; } }

/* Policy pages: one readable column, no motion on the prose, open items marked where they sit */
.legal { max-width: 72ch; padding-block: 36px 56px; }
@media (max-width: 700.98px) { .legal { width: calc(100% - 40px); } }
.legal-kicker { margin-bottom: 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.legal-kicker a { color: inherit; text-decoration: none; }
@media (hover: hover) { .legal-kicker a:hover { color: var(--copper-ink); } }
.legal h1 { font-size: clamp(34px, 5vw, 52px); }
.legal-draft { padding: 12px 14px; border-left: 3px solid var(--copper); border-radius: 0 8px 8px 0; background: var(--copper-wash); font-size: 14px; color: var(--copper-ink); }
.legal-intro { font-size: 18px; color: var(--steel); }
.legal-contents { margin: 24px 0 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--mist); }
.legal-contents h2, .legal-siblings h2 { margin: 0 0 8px; font: 500 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.legal-contents ol { margin: 0; padding-left: 20px; columns: 2 220px; column-gap: 28px; }
.legal-contents li { break-inside: avoid; }
.legal-contents a { display: inline-block; padding-block: 6px; }
.legal-body section { padding-top: 12px; }
.legal-body h2 { margin: 28px 0 10px; font-size: 24px; }
.legal-body p { line-height: 1.6; }
mark.confirm { padding: 1px 5px; border-radius: 4px; background: #fbe6d7; color: var(--copper-ink); font: 500 .86em/1.4 var(--mono); }
.legal-siblings { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); }
.legal-siblings h2 { flex-basis: 100%; }
.legal-return { margin-top: 20px; }
.text-link.back::after { content: none; }

@media print { .legal-contents, .legal-siblings, .legal-return { display: none; } mark.confirm { background: none; border: 1px solid #000; } }
.site-footer nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 2px; background: var(--copper-soft); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.site-footer nav a[aria-current=page]::after { transform: none; }
@media (hover: hover) { .site-footer nav a:hover::after { transform: none; } }

/* Reduced motion: everything at rest, the same content */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .coat::after, .surface-card-stage::after, .selected-scene-media::after, .path-art::after { display: none; }
}

/* Print: every topic open, no controls */
@media print {
  .site-header, .skip-link, .menu-button, .hero-scene-choices, .scene-choices, .topic-toggle, .mechanism-controls, .site-footer nav { display: none !important; }
  .hero, .technical, .site-footer { background: #fff !important; color: #000 !important; }
  .hero-description, .hero-scene figcaption, .claim-note, .surface-diagrams p { color: #000 !important; }
  .topic-panel[hidden], .selected-scene[hidden] { display: block !important; }
  .topic-panel { height: auto !important; overflow: visible !important; }
  .plain-topic-title { display: block !important; }
  .surface-diagrams article { background: #fff; color: #000; border: 1px solid #999; }
  .surface-diagrams h4 { color: #000; }
  .cards-ready .surface-static-detail { display: block !important; }
  .cards-ready .surface-overlay { display: none !important; }
  .reveal, .reveal-line > .rise-inner { opacity: 1 !important; transform: none !important; }
  .property, .card, .organisms > div, .qualification, tr { break-inside: avoid; }
}

/* Focus never lands in transparent content; script-moved focus shows no ring unless the keyboard moved it */
.reveal:focus-within { opacity: 1; transform: none; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* Before the script runs (the head marks html.js), match the enhanced layout so nothing jumps */
.js:not(.enhanced) .topic-panel { display: none; }
.js:not(.enhanced) .selected-scene ~ .selected-scene { display: none; }
.js:not(.cards-ready) .surface-card-fallback, .js:not(.cards-ready) .surface-static-detail { display: none; }
@media (max-width: 700.98px) {
  .js:not(.nav-ready) #site-navigation { display: none; }
  .js:not(.nav-ready) .header-inner::after { content: ""; width: 48px; height: 48px; margin-right: -10px; }
}

/* Print: dark blocks become outlined, light text becomes black, held decorations show */
@media print {
  .hero *, .site-footer * { color: #000 !important; }
  .button, .button-outline, th:last-child, .method-primary, .method-primary *, .topic-navigation a.is-active { background: #fff !important; color: #000 !important; border-color: #000 !important; }
  .cards-ready .surface-card-fallback { display: flex !important; }
  .surface-card-toggle, .surface-name-strip { display: none !important; }
  .reveal::before, .reveal::after { opacity: 1 !important; transform: none !important; }
  .reveal .film-coat, .hero-copy, .hero-copy h1, [data-drift] { opacity: 1 !important; transform: none !important; }
}

/* Legal: one page after the EverIntent shared legal package, laid out like Technical (sticky index, cards) */
.legal-page .container > .legal-kicker { margin: 0 0 14px; font: 500 12px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--steel); }
.legal-page .container > .legal-draft { max-width: 72ch; margin: 0 0 14px; padding: 12px 14px; border-left: 3px solid var(--copper); border-radius: 0 8px 8px 0; background: var(--copper-wash); font-size: 14px; color: var(--copper-ink); }
.legal-page .container > .legal-lead { max-width: 66ch; font-size: 17px; color: var(--steel); }
.legal-page h1 { font-size: clamp(36px, 5.4vw, 56px); }
.legal-sections { display: grid; gap: 14px; padding-top: 18px; border-top: 0; }
.legal-card { min-width: 0; padding: 26px 22px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
@media (min-width: 850px) { .legal-card { padding: 34px 40px; } }
.legal-card > h2 { position: relative; margin: 0 0 14px; padding-bottom: 14px; font-size: clamp(24px, 2.6vw, 30px); }
.legal-card > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: var(--copper); }
.legal-sub { max-width: 70ch; }
.legal-sub + .legal-sub { margin-top: 18px; }
.legal-sub h3 { margin: 0 0 6px; font-size: 17px; }
.legal-sub p, .legal-sub li { line-height: 1.62; }
.legal-sub p { margin: 0 0 .75em; }
.legal-sub ul { margin: 0 0 .75em; padding-left: 20px; }
.legal-sub li { margin-block: 4px; }
.legal-sub address { margin: 0 0 .75em; font-style: normal; line-height: 1.6; }
#calls-and-texts, #do-not-sell-or-share { margin-top: 22px; padding: 18px 20px; border-radius: 10px; background: var(--mist); }
.legal-card:target, .legal-sub:target { scroll-margin-top: 0; }
@media print { .legal-page .topic-navigation { display: none !important; } .legal-card { border: 0; padding: 0; } }

/* Scene choices: the method line slides up over the thumbnail on hover (desktop); the card's subtitle
   already names the method on phones */
.scene-choice > .scene-choice-detail { position: absolute; left: 0; right: 0; top: 0; z-index: 1; display: flex; align-items: flex-end; height: 88px; padding: 8px 10px; background: linear-gradient(0deg, rgba(24, 33, 40, .86), rgba(24, 33, 40, 0) 75%); color: #fff; font: 500 11.5px/1.3 var(--body); opacity: 0; transform: translateY(6px); transition: opacity .35s var(--ease), transform .5s var(--ease); pointer-events: none; }
@media (hover: hover) and (min-width: 850px) {
  .scene-choice:hover > .scene-choice-detail, .scene-choice:focus-visible > .scene-choice-detail { opacity: 1; transform: none; }
}
@media (max-width: 849px) { .scene-choice > .scene-choice-detail { display: none; } }
@media print { .scene-choice-detail { display: none; } }

/* Cookies and Preferences (panel and dialog) and the data-rights request form: hairline rows, square checks,
   two-tone buttons of equal weight, inputs that draw a copper line on focus */
.prefs-panel { margin-top: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.prefs { display: grid; gap: 12px; }
.prefs-list { display: grid; border-top: 1px solid var(--line); }
.prefs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.prefs-row h3 { margin: 0 0 2px; font-size: 16px; }
.prefs-row h3 label { cursor: pointer; }
.prefs-row:first-child { cursor: default; }
.prefs-use { margin-top: 2px !important; font-size: 13px !important; color: var(--steel-2) !important; }
.prefs-check:disabled { opacity: .45; cursor: not-allowed; }
.prefs-signal { margin: 0; padding: 10px 12px; border-left: 2px solid var(--copper); background: var(--copper-wash); font-size: 14px; line-height: 1.45; color: var(--ink); }
html.prefs-open { overflow: hidden; }
.prefs-row p { margin: 0; font-size: 14px; color: var(--steel); }
.prefs-fixed { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); padding-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.prefs-check, .choice input[type=checkbox], .choice input[type=radio] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--steel-2); border-radius: 3px; background: var(--paper); display: grid; place-items: center; cursor: pointer; transition: border-color .2s, background-color .2s, box-shadow .2s; }
.choice input[type=radio] { border-radius: 50%; }
.prefs-check::after, .choice input[type=checkbox]::after { content: ""; width: 10px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transform-origin: center; margin-top: -2px; transition: transform .25s var(--ease); }
.choice input[type=radio]::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--copper); transform: scale(0); transition: transform .25s var(--ease); }
.prefs-check:checked, .choice input[type=checkbox]:checked { border-color: var(--copper); background: var(--copper); }
.prefs-check:checked::after, .choice input[type=checkbox]:checked::after { transform: rotate(-45deg) scale(1); }
.choice input[type=radio]:checked { border-color: var(--copper); }
.choice input[type=radio]:checked::after { transform: scale(1); }
.prefs-note { margin: 0; font-size: 14px; color: var(--steel); }
.prefs-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.prefs-button { width: 100%; background: var(--paper); border-color: var(--line-2); font-size: 14px; padding-inline: 10px; }
.prefs-reset { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--copper-ink); font: 600 14px var(--body); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prefs-status { min-height: 1.4em; margin: 0; font-size: 14px; color: var(--ink); }
@media (max-width: 520px) { .prefs-actions { grid-template-columns: 1fr; } }
.prefs-dialog { width: min(560px, calc(100% - 32px)); max-height: calc(100% - 48px); margin: auto; padding: 22px 22px 18px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: inset 0 3px 0 var(--copper), 0 30px 60px -30px rgba(24, 33, 40, .6); }
.prefs-dialog::backdrop { background: rgba(24, 33, 40, .45); }
.prefs-dialog[open] { animation: build-in .4s var(--ease) both; }
.prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prefs-head h2 { margin: 0; font-size: 24px; }
.prefs-close { min-height: 44px; padding: 0 2px; border: 0; background: none; color: var(--steel); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.prefs-intro { margin: 10px 0 6px; font-size: 15px; color: var(--steel); }

.privacy-request { margin-top: 24px; padding: 22px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: inset 0 3px 0 var(--copper); }
.privacy-request > h3 { margin: 0 0 14px; font-size: 20px; }
.privacy-request form { display: grid; gap: 16px; }
.privacy-request fieldset { margin: 0; padding: 0; border: 0; display: grid; gap: 2px; }
.privacy-request legend, .privacy-request label:not(.choice) { margin-bottom: 6px; font: 600 14px/1.3 var(--display); color: var(--ink); }
.choice { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 11px 0; border-bottom: 1px solid var(--line); cursor: pointer; font-size: 15px; line-height: 1.4; }
.choice span { padding-top: 1px; }
.field { display: grid; }
.field input, .field textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 4px; background: var(--paper); color: var(--ink); font: 400 16px/1.4 var(--body); box-shadow: inset 0 -1px 0 transparent; transition: border-color .2s, box-shadow .25s var(--ease); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--steel-2); box-shadow: inset 0 -2px 0 var(--copper); }
.field-pair { display: grid; gap: 16px; }
@media (min-width: 640px) { .field-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field-hint { margin: -6px 0 0; font-size: 13.5px; color: var(--steel); }
.field-check { border-bottom: 0; }
.field-error { margin: 6px 0 0; font-size: 14px; color: #a3311d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.privacy-request .button { justify-self: start; background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: inset 0 -2px 0 var(--copper-soft); }
.privacy-request .button[disabled] { opacity: .7; cursor: progress; }
.privacy-result { margin-top: 14px; padding: 16px 18px; border-left: 3px solid var(--copper); border-radius: 0 8px 8px 0; background: var(--copper-wash); }
.privacy-result.is-error { border-left-color: #a3311d; background: #fbeeea; }
.privacy-result h3 { margin: 0 0 6px; font-size: 18px; }
.privacy-result p { margin: 0 0 6px; }
.privacy-print { font: 400 12px/1.5 var(--mono); color: var(--steel); overflow-wrap: anywhere; }
.privacy-notice { margin: 0; padding: 12px 14px; border-left: 2px solid var(--line-2); font-size: 14px; line-height: 1.5; color: var(--steel); }
.privacy-notice a { color: var(--copper-ink); }
@media print { .prefs-panel, .privacy-request { display: none; } }