/* Do It Right Solutions: site system (redesign 2026-11)
   One set of tokens, one button pair, one card, one photo frame, one app frame.
   Light by default; [data-theme="dark"] and .dark sections share the control-room tokens. */

/* Fonts: self-hosted, latin subset, trimmed to the weights and widths the site uses */
@font-face { font-family: "Archivo"; src: url("../fonts/archivo.woff2") format("woff2"); font-weight: 600 700; font-stretch: 100% 112%; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("../fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --bg: #F4F2EE;
  --bg-2: #EAE6DF;
  --card: #FFFFFF;
  --text: #16130F;
  --text-2: #47423B;
  --text-3: #5F584F;
  --link: #B03A0F;
  --copper-2: #B03A0F;
  --accent: #E8481F;
  --accent-soft: rgba(232, 72, 31, .1);
  --line: #DAD5CC;
  --line-2: #C3BCB1;
  --hover: rgba(22, 19, 15, .05);
  --green: #1E8F4F;
  --grad-btn: linear-gradient(180deg, #C2410C 0%, #B03A0F 100%);   /* white text stays above 4.5:1 */
  --shadow-1: 0 1px 2px rgba(22, 19, 15, .05), 0 10px 24px -14px rgba(22, 19, 15, .22);
  --shadow-2: 0 2px 4px rgba(22, 19, 15, .06), 0 26px 50px -24px rgba(22, 19, 15, .34);
  --header-bg: rgba(244, 242, 238, .96);
  --input-bg: #FFFFFF;
  --placeholder: #857E74;
  --tile: #FFFFFF;
  --map-filter: none;
  color-scheme: light;
}

:root {
  --f-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ease: cubic-bezier(.23, 1, .32, 1);
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --gutter: 40px;
  --header-h: 72px;
  --sec-pad: clamp(72px, 10vh, 104px);
}

/* control-room tokens: dark theme, and the always-dark sections */
:root[data-theme="dark"],
.dark {
  --bg: #0F0E0C;
  --bg-2: #171512;
  --card: #1C1A17;
  --text: #F3EFE9;
  --text-2: #BEB6AB;
  --text-3: #A0978B;
  --link: #FF8A5C;
  --copper-2: #FF8A5C;
  --accent: #FF5A2A;
  --accent-soft: rgba(255, 90, 42, .14);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .2);
  --hover: rgba(255, 255, 255, .06);
  --green: #3CCB7A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 28px -16px rgba(0, 0, 0, .7);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .4), 0 30px 60px -26px rgba(0, 0, 0, .8);
  --header-bg: rgba(15, 14, 12, .96);
  --input-bg: #161411;
  --placeholder: #8E867B;
  --tile: #FFFFFF;
  --map-filter: grayscale(.4) invert(.9) hue-rotate(180deg) contrast(.9);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* site.js drives wheel scrolling itself (smooth wheel); CSS smoothing would fight each frame */
html.is-gliding { scroll-behavior: auto !important; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 var(--f-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
address { font-style: normal; }
::selection { background: var(--accent); color: #fff; }
html { scrollbar-color: var(--line-2) var(--bg); caret-color: var(--accent); }
table, .reqs .v { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* crisper enterprise focus ring on interactive controls: the accent outline plus a soft accent
   halo (outline is never clipped by the buttons' overflow:hidden, so focus stays visible there) */
.btn:focus-visible, .icon-btn:focus-visible, .tlink:focus-visible, a.card:focus-visible,
.card-link:focus-visible, .jump a:focus-visible, .signin-btn:focus-visible,
.nav > a:focus-visible, .social a:focus-visible {
  outline-offset: 3px; box-shadow: 0 0 0 4px var(--accent-soft);
}
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: var(--r-1);
  background: var(--text); color: var(--bg); font-weight: 600;
  transform: translateY(-160%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: none; outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- type ---------- */
h1, h2, h3 {
  font-family: var(--f-display);
  font-stretch: 106%;
  font-weight: 640;
  letter-spacing: -.022em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: clamp(2.6rem, 1.1rem + 4.4vw, 5.4rem); line-height: .98; letter-spacing: -.03em; }
h2 { font-size: clamp(2.1rem, 1.1rem + 2.8vw, 3.9rem); line-height: 1.02; letter-spacing: -.028em; }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -.012em; font-weight: 620; }
p { text-wrap: pretty; }
.lead { font-size: 1.125rem; line-height: 1.6; color: var(--text-2); max-width: 58ch; }
/* small label role: Inter, sentence case. Monospace is kept for data and measurements only. */
.label, .footer-title, .list-title, .prod-lists h3, .edition .for, .edition-tag, .reqs .k, .reach .k, .compare thead th small, .compare .grp th {
  font: 600 .86rem/1.3 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--text-3);
}
.muted { color: var(--text-3); }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), 1280px); margin-inline: auto; }
.sec { position: relative; padding: calc(var(--header-h) + clamp(28px, 5vh, 52px)) 0 clamp(56px, 8vh, 88px); }
.sec.alt { background-color: var(--bg-2); }
.dark { background-color: var(--bg); color: var(--text); }
.dark p, .dark li { line-height: 1.66; letter-spacing: .005em; }
@media (min-width: 1200px) and (min-height: 700px) {
  .sec { min-height: calc(var(--h, 1) * 100svh); }
}
.sec-head { display: grid; gap: 18px; margin-bottom: 48px; max-width: 780px; }
.sec-head.split {
  max-width: none;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  column-gap: 64px; align-items: end;
}
.sec-head.split .lead { justify-self: end; }

/* ---------- buttons and links ---------- */
.btn {
  --bh: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--bh); padding: 0 22px;
  border-radius: var(--r-1);
  font: 600 .98rem/1 var(--f-body); letter-spacing: -.005em; white-space: nowrap;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), background-color .2s, color .2s, filter .2s;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease); }
.btn img { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--grad-btn); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .18); }
.btn-ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn-sm { --bh: 40px; padding: 0 16px; font-size: .92rem; }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { filter: brightness(1.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 10px 22px -10px rgba(194, 65, 12, .7); }
.btn-ghost:hover { background: var(--hover); box-shadow: inset 0 0 0 1px var(--text-3); }
.btn:hover .arr { transform: translateX(3px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

.tlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--link); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s var(--ease), color .2s;
}
.tlink svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.tlink:hover, a:hover .tlink, .card-link:hover .tlink { background-size: 100% 1.5px; }
.tlink:hover svg, .card-link:hover .tlink svg { transform: translateX(3px); }
.prose a, .inline-link {
  color: var(--link); font-weight: 600;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease);
}
.prose a:hover, .inline-link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  transition: background-color .3s, border-color .3s, color .3s;
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-height: 44px; color: var(--text); }
.brand img { width: 44px; height: 36px; }
.brand-name { font: 650 1.02rem/1 var(--f-display); font-stretch: 106%; letter-spacing: -.015em; white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 2px; margin-inline: auto; }
.nav > a {
  position: relative; padding: 8px 12px; border-radius: var(--r-1);
  color: var(--text-2); font-size: .95rem; font-weight: 500;
  transition: color .2s, background-color .2s;
}
.nav > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav > a:hover { color: var(--text); background: var(--hover); }
.nav > a:hover::after, .nav > a[aria-current="page"]::after { transform: scaleX(1); }
.nav > a[aria-current="page"] { color: var(--text); }
.nav-mobile-extra { display: none; }
.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-1);
  color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s, background-color .2s, transform .18s var(--ease);
}
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn:hover { color: var(--text); background: var(--hover); transform: translateY(-1px); }
.icon-btn:active { transform: scale(.94); }
.theme-toggle { position: relative; }
.theme-toggle svg { position: absolute; transition: opacity .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease); }
.theme-toggle .i-sun, :root[data-theme="dark"] .theme-toggle .i-moon { opacity: 0; transform: scale(.6) rotate(-30deg); filter: blur(2px); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 1; transform: none; filter: none; }
.nav-toggle { display: none; }
.nav-toggle .i-close { display: none; }
.nav-toggle[aria-expanded="true"] .i-close { display: block; }
.nav-toggle[aria-expanded="true"] .i-menu { display: none; }

.signin { position: relative; }
.signin-btn .chev { width: 14px; height: 14px; transition: transform .2s; }
.signin.is-open .chev { transform: rotate(180deg); }
.signin-menu {
  position: absolute; right: 0; top: calc(100% + 10px); width: 300px;
  padding: 8px; border-radius: var(--r-2);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-2);
  opacity: 0; visibility: hidden; transform: scale(.96) translateY(-4px); transform-origin: top right;
  transition: opacity .12s ease, transform .12s var(--ease), visibility .12s;
}
.signin.is-open .signin-menu { opacity: 1; visibility: visible; transform: none; transition-duration: .2s; }
.signin-menu a { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: var(--r-1); transition: background-color .2s; }
.signin-menu a:hover { background: var(--hover); }
.signin-menu strong { display: block; font-weight: 600; font-size: .95rem; }
.signin-menu small { display: block; color: var(--text-3); font-size: .84rem; }
.chip-icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--r-1); background: var(--accent-soft); color: var(--link); }
.chip-icon svg { width: 18px; height: 18px; }

/* header over the home hero */
.over .site-header { position: fixed; left: 0; right: 0; }
.over .site-header:not(.is-scrolled) { background: transparent; border-color: transparent; }
.over .site-header:not(.is-scrolled) .brand,
.over .site-header:not(.is-scrolled) .nav > a,
.over .site-header:not(.is-scrolled) .icon-btn,
.over .site-header:not(.is-scrolled) .signin-btn { color: #F3EFE9; }
.over .site-header:not(.is-scrolled) .icon-btn,
.over .site-header:not(.is-scrolled) .signin-btn { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.over .site-header:not(.is-scrolled) .nav > a:hover,
.over .site-header:not(.is-scrolled) .icon-btn:hover,
.over .site-header:not(.is-scrolled) .signin-btn:hover { background: rgba(255, 255, 255, .1); }

@media (max-width: 1120px) {
  .nav > a { padding: 8px 9px; font-size: .92rem; }
  /* hide the name only where the full nav still crowds the bar (961-1120); shown again ≤960 */
  .site-header .brand-name { display: none; }
}
@media (max-width: 960px) {
  .nav-toggle { display: grid; position: relative; z-index: 70; }
  .signin { display: none; }
  /* the hamburger frees the bar, so the company name comes back; it shrinks with an ellipsis
     before it could ever push the theme and menu buttons off the edge */
  .site-header .brand-name { display: block; overflow: hidden; text-overflow: ellipsis; }
  .site-header .brand { flex: 0 1 auto; min-width: 0; }
  .nav {
    position: fixed; inset: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: calc(var(--header-h) + 16px) var(--gutter) 32px;
    background: var(--bg); overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .15s ease, transform .15s var(--ease), visibility .15s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition-duration: .25s; }
  .nav > a {
    padding: 14px 0; border-radius: 0; border-bottom: 1px solid var(--line);
    font: 600 1.6rem/1.2 var(--f-display); font-stretch: 106%; letter-spacing: -.02em; color: var(--text);
  }
  .nav > a::after { display: none; }
  .nav > a:hover { background: none; color: var(--link); }
  .nav-mobile-extra { display: grid; gap: 4px; margin-top: 24px; }
  .nav-mobile-extra a { padding: 10px 0; color: var(--text-2); font-weight: 500; }
  /* the header's backdrop-filter would otherwise become the containing block for the fixed
     full-screen menu on iOS Safari, collapsing it to header height; drop it while the menu is open */
  .nav-open .site-header { background: var(--bg) !important; border-color: var(--line) !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .nav-open .site-header .brand, .nav-open .site-header .icon-btn { color: var(--text) !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
  .nav-open .site-header .brand { box-shadow: none !important; }
  .nav-open { overflow: hidden; }
}
@media (max-width: 560px) {
  .btn-quote { display: none; }
}

/* ---------- cards, frames, photos ---------- */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3);
  overflow: hidden;
}
a.card, .card-link { overflow: visible; transition: transform .25s var(--ease); }
a.card::after, .card-link::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 2px 4px rgba(60, 30, 10, .06), 0 30px 56px -26px rgba(60, 30, 10, .42);
  opacity: 0; transition: opacity .25s var(--ease);
}
a.card:hover::after, .card-link:hover::after { opacity: 1; }
a.card:hover, .card-link:hover { transform: translateY(-2px); }
a.card:active, .card-link:active { transform: translateY(0) scale(.99); transition-duration: .1s; }
.card-body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1; }
.card-body > .tlink:last-child { margin-top: auto; padding-top: 6px; align-self: flex-start; }

.ph { position: relative; overflow: hidden; border-radius: var(--r-3); background: var(--bg-2); }
.ph > img, .ph > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); }
.ph:hover img { transform: scale(1.03); }
.ph.contain img { object-fit: contain; }

.app {
  --app-bg: #12110F;
  position: relative; overflow: hidden;
  background: var(--app-bg); color: #EDE8E1;
  border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-3);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .7), 0 0 0 1px rgba(0, 0, 0, .25);
}
.app-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font: 500 .74rem/1 var(--f-mono); letter-spacing: .04em; color: #A39A8E; white-space: nowrap; overflow: hidden;
}
.app-bar > span:not(.dots) { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.app-bar .end { flex: none; }
.app-bar .dots { display: flex; gap: 6px; }
.app-bar .dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.app-bar b { color: #EDE8E1; font-weight: 600; }
.app-bar .end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.app-shot img { width: 100%; height: auto; }

.ticks { display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 28px; color: var(--text-2); line-height: 1.45; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .2em; width: 18px; height: 18px; border-radius: 5px;
  background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E8481F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.ticks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }

.brand-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-1); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); flex: none; }
.brand-ic img { width: 22px; height: 22px; }

/* ---------- home hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100svh; display: flex; align-items: center;
  padding: calc(var(--header-h) + 40px) 0 56px;
}
.hero-media { position: absolute; inset: 0; z-index: -2; background: #1A1714 url("../img/hero-poster.webp") center / cover; }
.hero-media video { width: 100%; height: 100%; object-fit: cover; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(12, 11, 10, .94) 0%, rgba(12, 11, 10, .84) 34%, rgba(12, 11, 10, .5) 62%, rgba(12, 11, 10, .62) 100%),
    linear-gradient(180deg, rgba(12, 11, 10, .55) 0%, transparent 22%, transparent 72%, rgba(12, 11, 10, .85) 100%);
}
/* the first view is the message alone: heading, one line, the quick quote and the proof line */
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
.hero-copy { max-width: 860px; }
.hero h1 { margin-top: 0; font-size: clamp(2.8rem, 1rem + 5vw, 6rem); max-width: 15ch; }
.hero .hero-sub { font-size: 1.22rem; max-width: 52ch; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-sub { margin-top: 22px; font-size: 1.14rem; color: var(--text-2); max-width: 46ch; }
.hero .btn-row { margin-top: 32px; }
.hero-quote { display: flex; gap: 10px; margin-top: 32px; max-width: 560px; }
.hero-quote .select { min-width: 190px; }
.hero-quote .select { position: relative; flex: 1 1 auto; min-width: 0; }
.hero-quote select {
  width: 100%; height: 52px; padding: 0 44px 0 16px; appearance: none; -webkit-appearance: none;
  border-radius: var(--r-1); border: 1px solid rgba(255, 255, 255, .26); background: rgba(12, 11, 10, .55); color: var(--text);
  font-weight: 500; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.hero-quote select:hover { border-color: rgba(255, 255, 255, .5); }
.hero-quote select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hero-quote select option { background: #1C1A17; color: #F3EFE9; }
.hero-quote .select svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; pointer-events: none; color: var(--text-2); }
.hero-quote .btn { --bh: 52px; flex: none; }
.hero-alt { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; }
.hero-proof { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text-2); font-size: .97rem; max-width: 52ch; }
.hero-proof strong { color: var(--text); font-weight: 600; }
.media-toggle {
  position: absolute; right: 96px; bottom: 28px; z-index: 2;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: #F3EFE9; background: rgba(12, 11, 10, .5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
  transition: background-color .2s, transform .18s var(--ease);
}
.media-toggle:hover { background: rgba(12, 11, 10, .75); transform: translateY(-1px); }
.media-toggle svg { width: 16px; height: 16px; }
.media-toggle .i-play { display: none; }
.media-toggle[aria-pressed="true"] .i-play { display: block; }
.media-toggle[aria-pressed="true"] .i-pause { display: none; }

/* ---------- SCADA mimic (hero app frame) ---------- */
.hmi-screen { padding: 10px 12px 4px; background: radial-gradient(120% 90% at 50% 0%, #1B1916 0%, #12110F 70%); }
.hmi-screen svg { width: 100%; height: auto; }
.hmi-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .08); font: 500 .8rem/1.2 var(--f-mono); color: #A39A8E; }
.hmi-mode { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 6px; background: rgba(60, 203, 122, .14); color: #5BE08F; font-weight: 600; }
.hmi-mode::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.hmi-step { color: #EDE8E1; font-weight: 600; min-width: 18ch; }
.hmi-cycle { margin-left: auto; }
.hmi-btn { min-height: 32px; padding: 6px 14px; border-radius: 6px; color: #EDE8E1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); font: 600 .78rem/1 var(--f-mono); transition: background-color .2s, transform .15s; }
.hmi-btn:hover { background: rgba(255, 255, 255, .08); }
.hmi-btn:active { transform: scale(.95); }

.m-card { fill: rgba(255, 255, 255, .025); stroke: rgba(255, 255, 255, .1); }
.m-title { fill: #FF8A5C; font: 600 10px var(--f-mono); letter-spacing: .14em; }
.m-label { fill: #9C9387; font: 500 10.5px var(--f-body); }
.m-val { fill: #EDE8E1; font: 600 11.5px var(--f-mono); }
.m-read { fill: #F3EFE9; font: 600 13px var(--f-mono); }
.m-set { fill: #857C70; font: 500 9.5px var(--f-mono); }
.m-eq { fill: #24211D; stroke: #5B544A; stroke-width: 1.4; }
.m-eq-dark { fill: #0E0D0B; stroke: #5B544A; stroke-width: 1.2; }
.m-wheel-hub { fill: #5B544A; }
.m-glass { fill: rgba(94, 164, 214, .35); }
.m-agg { fill: #8C7E6C; }
.m-cem { fill: #A7A099; }
.m-wat { fill: #5EA4D6; }
.m-adm { fill: #C9A86A; }
.m-mix { fill: url(#m-mix-grad); }
.m-fill { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
.m-gate { fill: #4E473F; transition: fill .2s; }
.m-gate.is-on { fill: #FF7A3D; }
.m-pipe { fill: none; stroke: #423C35; stroke-width: 2; }
.m-flow { fill: none; stroke: #FF7A3D; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 3 6; opacity: 0; transition: opacity .25s; }
.m-flow.is-on { opacity: 1; animation: m-dash .45s linear infinite; }
.m-belt { fill: none; stroke: #5B544A; stroke-width: 2; stroke-dasharray: 7 6; }
.m-belt.is-running { stroke: #3CCB7A; animation: m-belt .5s linear infinite; }
.m-conv { fill: none; stroke: #24211D; stroke-width: 11; stroke-linecap: round; }
.m-conv-edge { fill: none; stroke: #5B544A; stroke-width: 13.5; stroke-linecap: round; }
.m-motor { fill: #4E473F; transition: fill .2s; }
.m-motor.is-running { fill: #3CCB7A; }
.m-paddle { transform-box: fill-box; transform-origin: center; }
.m-paddle line { stroke: #B3A99C; stroke-width: 2.2; stroke-linecap: round; }
.m-paddle circle { fill: none; stroke: #7E756A; stroke-width: 1.3; }
.m-paddle.is-running { animation: m-spin 1.1s linear infinite; }
.m-paddle.is-running.rev { animation-direction: reverse; }
.m-drum-stripe { fill: none; stroke: #5B544A; stroke-width: 2; stroke-dasharray: 10 9; }
.m-drum-stripe.is-running { stroke: #3CCB7A; animation: m-drum .6s linear infinite; }
.is-paused .m-flow, .is-paused .m-belt, .is-paused .m-paddle, .is-paused .m-drum-stripe { animation-play-state: paused !important; }
@keyframes m-dash { to { stroke-dashoffset: -9; } }
@keyframes m-belt { to { stroke-dashoffset: -13; } }
@keyframes m-drum { to { stroke-dashoffset: -19; } }
@keyframes m-spin { to { transform: rotate(360deg); } }

/* ---------- editions (home) ---------- */
.editions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-3); overflow: hidden; }
.edition { position: relative; display: flex; flex-direction: column; transition: background-color .25s; }
.edition + .edition { border-left: 1px solid var(--line); }
.edition:hover { background: var(--hover); }
.edition:focus-visible { outline-offset: -3px; }
.edition h3 { font-size: 1.55rem; }

.edition .ticks { margin-top: 4px; }
.edition .level { display: flex; gap: 4px; margin-left: auto; }
.edition .level i { width: 18px; height: 4px; border-radius: 2px; background: var(--line); }
.edition .level i.on { background: var(--accent); }
.edition-top { display: flex; align-items: center; gap: 12px; }
.below-link { margin-top: 28px; }

/* UI fragments inside cards: dark app surface, loops of about 3 s */
.frag {
  position: relative; height: 228px; padding: 20px 22px; overflow: hidden;
  background: #12110F; color: #EDE8E1; border-bottom: 1px solid var(--line);
  font: 500 .78rem/1.3 var(--f-mono);
}
.frag-title { display: flex; justify-content: space-between; color: #8F877C; letter-spacing: .06em; text-transform: uppercase; font-size: .68rem; margin-bottom: 12px; }
.frag-title b { color: #FF8A5C; font-weight: 600; }

/* recipe list (Micro) */
.f-recipes { display: grid; gap: 8px; }
.f-recipes li { padding-block: 9px !important; }
.f-recipes li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 7px 10px; border-radius: 6px; background: rgba(255, 255, 255, .03);
}
.f-recipes li.is-sel { background: rgba(255, 122, 61, .2); color: #fff; }
[data-loop]:hover .f-recipes li, [data-loop]:focus-visible .f-recipes li { animation: f-row 3.2s linear infinite; animation-delay: calc(var(--i) * .8s); }
[data-loop]:hover .f-recipes li.is-sel, [data-loop]:focus-visible .f-recipes li.is-sel { background: rgba(255, 255, 255, .03); }
.f-recipes li span:nth-child(2), .f-recipes li span:nth-child(3) { color: #A39A8E; }
@keyframes f-row {
  0%, 24% { background: rgba(255, 122, 61, .2); color: #fff; }
  25%, 100% { background: rgba(255, 255, 255, .03); }
}

/* in-flight weighing (Ultra) */
.f-weigh { display: grid; gap: 18px; margin-top: 6px; }
.f-weigh li { display: grid; grid-template-columns: 62px 1fr 74px; gap: 12px; align-items: center; }
.f-weigh .bar { position: relative; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .07); overflow: visible; }
.f-weigh .bar i { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #C2410C, #FF7A3D); transform-origin: left; }
[data-loop]:hover .f-weigh .bar i, [data-loop]:focus-visible .f-weigh .bar i { animation: f-fill 3.2s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: calc(var(--i) * .25s); }
.f-weigh .bar::after { content: ""; position: absolute; right: -1px; top: -4px; bottom: -4px; width: 2px; background: #3CCB7A; border-radius: 1px; }
.f-weigh .v { text-align: right; color: #EDE8E1; }
.f-weigh .v small { display: block; color: #857C70; font-size: .66rem; }
.f-weigh .k { color: #A39A8E; }
@keyframes f-fill { 0% { transform: scaleX(0); } 62%, 88% { transform: scaleX(1); } 100% { transform: scaleX(0); opacity: .4; } }
.f-status { position: absolute; left: 20px; right: 20px; bottom: 14px; display: flex; justify-content: space-between; color: #8F877C; font-size: .7rem; }
.f-status b { color: #5BE08F; font-weight: 600; }

/* report lanes (Ultra+): one docket, three channels */
.f-lanes { position: absolute; inset: 50px 18px 16px; }
.f-lanes svg { width: 100%; height: 100%; overflow: visible; }
.lane { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1.5; }
.pulse { fill: none; stroke: #FF7A3D; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 14 400; stroke-dashoffset: 14; opacity: 0; }
[data-loop]:hover .pulse, [data-loop]:focus-visible .pulse { animation: pulse 3s cubic-bezier(.16, 1, .3, 1) infinite; }
@keyframes pulse { 0% { stroke-dashoffset: 14; opacity: 1; } 70% { stroke-dashoffset: -190; opacity: 1; } 71%, 100% { opacity: 0; stroke-dashoffset: -190; } }
.f-node { fill: #1E1C19; stroke: rgba(255, 255, 255, .16); }
.f-node-text { fill: #EDE8E1; font: 600 10px var(--f-mono); }
.f-node-sub { fill: #8F877C; font: 500 8.5px var(--f-mono); }
.frag.is-restart * { animation: none !important; }

/* ---------- real screens band ---------- */
.screens { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.screens-side { display: grid; gap: 24px; }
.screens-side .ticks li { color: var(--text-2); }

/* ---------- portals ---------- */
.portals { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: stretch; }
.portal-cards { display: grid; gap: 20px; }
.portal-shots { display: grid; gap: 16px; align-content: start; }
.portal-shots .app-shot, .prod-visual .app-shot { background: #12110F; }
.portal .card-body { gap: 10px; }
.portal-head { display: flex; align-items: center; gap: 12px; }
.portal-head h3 { font-size: 1.35rem; }
.portal .btn-row { margin-top: 6px; }
.hub { margin: 6px 0 4px; max-width: 380px; }
.hub svg { width: 100%; height: auto; }
.hub .ln { fill: none; stroke: var(--line-2); stroke-width: 1.4; }
.hub .pl { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 10 300; stroke-dashoffset: 10; opacity: 0; }
.portal:hover .hub .pl, .portal:focus-within .hub .pl { animation: hubp 3.4s cubic-bezier(.16, 1, .3, 1) infinite; animation-delay: calc(var(--i) * .22s); }
@keyframes hubp { 0% { stroke-dashoffset: 10; opacity: 1; } 72% { stroke-dashoffset: -150; opacity: 1; } 73%, 100% { opacity: 0; stroke-dashoffset: -150; } }
.hub .nd { fill: var(--card); stroke: var(--line-2); }
.hub .nd-hot { fill: var(--accent); stroke: none; }
.hub text { fill: var(--text-2); font: 500 10px var(--f-mono); }
.hub .t-hot { fill: #fff; font-weight: 600; }

/* live monitor frame */
.lm { display: grid; grid-template-rows: auto 1fr; height: 100%; }
.lm-title { display: flex; justify-content: space-between; gap: 10px; font: 500 .7rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: #8F877C; }
.lm-title b { color: #FF8A5C; font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Matrix Flow dashboard and DRS-Micro tables (live HTML UI) */
.ui-tables { display: grid; gap: 12px; padding: 16px; }
.ui-table { width: 100%; border-collapse: collapse; font: 500 .8rem/1.2 var(--f-mono); color: #CFC7BB; margin-bottom: 8px; }
.ui-table th { padding: 8px 10px; text-align: left; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; color: #7E766B; border-bottom: 1px solid rgba(255, 255, 255, .08); font-weight: 500; }
.ui-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.ui-table td:first-child { color: #FF8A5C; font-weight: 600; }
.ui-table tbody tr { transition: background-color .2s; }
.ui-table tbody tr:hover { background: rgba(255, 255, 255, .04); }

/* ---------- panels bento ---------- */
.panels { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
.panels-copy { display: flex; flex-direction: column; gap: 20px; }
.panels-copy .btn-row { margin-top: 8px; }
.bento { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: 330px 330px; gap: 16px; }
.bento .b1 { grid-column: 1 / 4; grid-row: 1 / 3; }
.bento .b2 { grid-column: 4 / 9; grid-row: 1; }
.bento .b3 { grid-column: 4 / 6; grid-row: 2; background: #fff; }
.bento .b3 img { object-fit: contain; padding: 18px; }
.bento .b4 { grid-column: 6 / 9; grid-row: 2; }

/* ---------- process ---------- */
.process { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.process .ph { min-height: 520px; }
.steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; align-content: start; }
.steps li { padding: 22px 0 26px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 52px 1fr; column-gap: 8px; }
.steps .n { grid-row: span 2; font: 700 1.9rem/1 var(--f-display); font-stretch: 112%; color: var(--accent); letter-spacing: -.03em; }
.steps li { grid-template-columns: 64px 1fr; }
.steps h3 { font-size: 1.15rem; }
.steps p { margin-top: 6px; color: var(--text-2); font-size: .97rem; }

/* ---------- plants wall ---------- */
.wall { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: 290px 290px; gap: 16px; }
.wall .w1 { grid-column: 1 / 6; grid-row: 1; }
.wall .w2 { grid-column: 6 / 9; grid-row: 1 / 3; }
.wall .w3 { grid-column: 9 / 13; grid-row: 1; }
.wall .w4 { grid-column: 1 / 6; grid-row: 2; }
.wall .w5 { grid-column: 9 / 13; grid-row: 2; }

/* ---------- customers + numbers ---------- */
.proof { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px; }
.proof > .ph { min-height: 340px; }
.proof.short > .ph, .proof.short .award { min-height: 280px; }
.proof > .ph.banner { min-height: 0; aspect-ratio: 1600 / 679; align-self: center; }
.ph.banner > img { object-position: 0 50%; }
.proof > .ph img { object-position: 50% 32%; }
.award { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 32px; border-radius: var(--r-3); background: var(--grad-btn); color: #fff; min-height: 340px; }
.award .year { font: 700 clamp(4.5rem, 3rem + 4vw, 6rem)/.9 var(--f-display); font-stretch: 112%; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.award p { font-size: 1.05rem; max-width: 30ch; color: #fff; }
.award strong { text-wrap: balance; display: block; font: 620 1.4rem/1.2 var(--f-display); font-stretch: 106%; color: #fff; margin-bottom: 6px; }
.logos { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
.logos li { display: grid; place-items: center; height: 92px; padding: 12px; border-radius: var(--r-2); background: var(--tile); border: 1px solid var(--line); }
.logos img { filter: grayscale(1) contrast(1.15); opacity: .62; mix-blend-mode: multiply; transition: filter .2s ease, opacity .2s ease; }
.logos li:hover img { filter: none; opacity: 1; }
.logos img { max-height: 60px; width: auto; max-width: 100%; object-fit: contain; }

/* ---------- closing ---------- */
.close { padding: calc(var(--header-h) + 24px) 0 56px; }
.close-title { font-size: clamp(2.6rem, 1rem + 5vw, 6rem); line-height: .98; letter-spacing: -.035em; font-stretch: 110%; max-width: 17ch; }
.close-title em { font-style: normal; color: var(--accent); }
.close-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.close-row .lead { margin-bottom: 20px; }
.reach { display: grid; gap: 14px; }
.reach li { display: flex; align-items: center; gap: 14px; }
.reach .k { display: block; font-size: .8rem; font-weight: 600; }
.reach a, .reach span.v { font-weight: 600; }
.reach .ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-1); background: var(--accent-soft); color: var(--link); flex: none; }
.reach .ic svg { width: 18px; height: 18px; }
.reach a:hover { color: var(--link); }

.close.drench {
  background: #C2410C; border-top: 0; color: #fff;
  --text: #FFFFFF; --text-2: #FFFFFF; --text-3: #FFF6F2; --line: rgba(255, 255, 255, .3); --line-2: rgba(255, 255, 255, .6);
  --link: #FFFFFF; --accent-soft: rgba(255, 255, 255, .16); --hover: rgba(255, 255, 255, .1);
}
.close.drench .close-title em { color: #1A0B05; }
.close.drench .btn-primary { background: #16130F; color: #fff; box-shadow: none; }
.close.drench .btn-primary:hover { background: #000; filter: none; box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .6); }
.close.drench .btn-ghost { background: #fff; color: #16130F; box-shadow: none; }
.close.drench .btn-ghost:hover { background: #FFF1EA; box-shadow: none; }
.close.drench .reach .ic { color: #fff; }
.close.drench ::selection { background: #16130F; }
.close.drench :focus-visible { outline-color: #fff; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-2); padding: 52px 0 24px; font-size: .95rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr) 1.3fr; gap: 32px; }
.footer-brand { display: grid; gap: 14px; align-content: start; }
.footer-brand .brand img { width: 52px; height: 42px; }
.footer-brand p { color: var(--text-2); max-width: 28ch; }
.footer-title { margin-bottom: 14px; color: var(--text); }
.footer-links { display: grid; gap: 8px; }
.footer-links a, .footer-reach a { color: var(--text-2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease), color .2s; }
.footer-links a:hover, .footer-reach a:hover { color: var(--text); background-size: 100% 1px; }
.footer-reach address, .footer-reach p { color: var(--text-2); }
.footer-reach p { margin-top: 10px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-3); font-size: .88rem; }
.social { display: flex; gap: 8px; }
.social a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-1); background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); transition: transform .2s var(--ease), box-shadow .2s; }
.social a:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), var(--shadow-1); }
.social img { width: 18px; height: 18px; }

.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 40;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%;
  background: #25D366; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .45);
  transition: transform .2s var(--ease), box-shadow .2s;
}
.wa-float:hover { transform: translateY(-2px) scale(1.04); }
.wa-float:active { transform: scale(.96); }
.wa-float svg { width: 28px; height: 28px; fill: #fff; }

/* =========================================================
   Inner pages
   ========================================================= */
.page-hero { padding-block: 56px 72px; }
@media (min-width: 1200px) and (min-height: 700px) {
  .page-hero { min-height: calc(100svh - var(--header-h)); display: flex; align-items: center; }
  .page-hero > .wrap { width: min(100% - 2 * var(--gutter), 1280px); }
}
.ph-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.ph-copy { display: flex; flex-direction: column; gap: 22px; }
.ph-copy h1 { font-size: clamp(2.4rem, 1.2rem + 3.3vw, 4.1rem); }
.ph-copy .btn-row { margin-top: 6px; }
.ph-media { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; height: min(640px, 72svh); }
.ph-media .m1 { grid-row: 1 / 3; }
.ph-media.one { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
.ph-media.one .m1 { grid-row: auto; }
/* a transparent product render shown whole on the section ground, no frame */
.render-media { height: auto; place-items: center; }
.render-media .prod-render { width: 100%; height: auto; object-fit: contain;
  filter: drop-shadow(0 26px 34px rgba(60, 30, 10, .16)); }
.jump { display: flex; flex-wrap: wrap; gap: 8px; }
.jump a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: .9rem; font-weight: 500; transition: background-color .2s, color .2s, border-color .2s, transform .18s var(--ease); }
.jump a:hover { color: var(--text); background: var(--hover); border-color: var(--text-3); transform: translateY(-1px); }

/* product rows */
.prod { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.prod.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.prod.flip .prod-copy { order: 2; }
.prod-copy { display: flex; flex-direction: column; gap: 18px; }
.prod-copy .tagline { font: 600 1.25rem/1.35 var(--f-display); font-stretch: 104%; color: var(--text); letter-spacing: -.01em; }
.prod-copy p { color: var(--text-2); }
.prod-lists { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-top: 6px; }
.prod-lists h3, .list-title { margin-bottom: 12px; color: var(--text); font-size: .95rem; }
.prod-visual { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.prod-visual > * { min-width: 0; }
.prod-visual .row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.edition-tag { display: inline-flex; align-items: center; gap: 10px; }
.edition-tag .level { display: flex; gap: 4px; }
.edition-tag .level i { width: 18px; height: 4px; border-radius: 2px; background: var(--line-2); }
.edition-tag .level i.on { background: var(--accent); }
.channels { display: flex; flex-wrap: wrap; gap: 10px; }
.channels li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); font-weight: 500; font-size: .92rem; }
.channels .brand-ic { width: 30px; height: 30px; border-radius: 50%; }
.channels .brand-ic img { width: 16px; height: 16px; }
.channels .glyph { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--link); }
.channels .glyph svg { width: 15px; height: 15px; }

.app.native { width: fit-content; max-width: 100%; }
.app.native .app-shot img { width: auto; max-width: 100%; }
.pick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.pick h3 { font-size: 1.5rem; }
.try .card-body { justify-content: center; }
.ilc { display: flex; gap: 18px; align-items: center; padding: 14px 18px 14px 14px; border-radius: var(--r-3); background: var(--card); border: 1px solid var(--line); }
.ilc-img { width: 72px; flex: none; padding: 6px; border-radius: var(--r-1); background: #fff; }
.ilc h3 { font-size: 1.1rem; }
.ilc p { font-size: .94rem; margin-top: 4px; }
.panel-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 380px 250px; gap: 16px; }
.panel-photos .p3 { grid-column: 1 / -1; }
.factura { margin-top: 24px; }
.factura .card-body { padding: 28px; gap: 14px; }
.factura h3 { font-size: 1.5rem; }
.factura .ticks { margin-top: 4px; }
.about-wall { grid-template-rows: 300px; margin-top: 24px; }
.about-wall .w2 { grid-row: 1; }
.dl-photos { margin-top: 24px; gap: 16px; align-items: stretch; }
.ph.wide, .aside-ph { aspect-ratio: 16 / 10; }
.split .ph.wide { aspect-ratio: 16 / 10; }

/* compare table */
.table-wrap { border: 1px solid var(--line); border-radius: var(--r-3); overflow: auto; background: var(--card); }
.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: .95rem; }
.compare th, .compare td { padding: 12px 20px; border-bottom: 1px solid var(--line); text-align: left; }
.compare thead th { position: sticky; top: 0; background: var(--card); font: 620 1.05rem/1.2 var(--f-display); font-stretch: 106%; vertical-align: bottom; }
.compare thead th small { display: block; margin-top: 4px; }
.compare tbody th { font-weight: 500; color: var(--text-2); }
.compare td { text-align: center; width: 17%; }
.compare .grp th { padding-top: 22px; color: var(--text); background: var(--bg); }
.compare tbody tr:not(.grp):hover { background: var(--hover); }
.yes, .no { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; }
.yes { background: var(--accent-soft); color: var(--link); }
.no { color: var(--text-3); }
.yes svg, .no svg { width: 14px; height: 14px; }

/* requirements */
.reqs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.reqs li { padding: 24px; border-radius: var(--r-3); background: var(--card); border: 1px solid var(--line); }

.reqs .v { display: block; margin-top: 14px; font: 620 1.4rem/1.2 var(--f-display); font-stretch: 106%; }

/* service cards */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1199px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svc .ph { border-radius: 0; height: 200px; }
.svc h2 { font-size: 1.45rem; }
.svc .card-body > p { color: var(--text-2); }

/* split with photo */
.split { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.split-copy { display: flex; flex-direction: column; gap: 20px; }
.split .ph { aspect-ratio: 1; }
.split .ph.tall { aspect-ratio: auto; width: 100%; height: min(72svh, 660px); }

/* values */
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.values li { padding-top: 22px; border-top: 2px solid var(--text); display: grid; gap: 12px; align-content: start; }

.values h3 { font-size: clamp(1.8rem, 1.2rem + 1.4vw, 2.6rem); line-height: 1; }
.values p { color: var(--text-2); }
.quote { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.quote p:first-child { font: 620 clamp(1.5rem, 1rem + 1.4vw, 2.2rem)/1.2 var(--f-display); font-stretch: 106%; letter-spacing: -.02em; text-indent: -.42em; }
.quote p + p { margin-top: 10px; color: var(--text-2); }

/* contact methods */
.methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.methods.rows { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line); }
.methods.rows .method { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.methods.rows .method > .brand-ic, .methods.rows .method > .chip-icon { grid-row: span 3; width: 48px; height: 48px; }
.methods.rows .method h2 { font-size: 1.35rem; }
.methods.rows .method p { color: var(--text-2); }
.methods.rows .method a { justify-self: start; margin-top: 0; padding-block: 10px; }
.method .card-body { gap: 10px; }
.method .top { display: flex; align-items: center; justify-content: space-between; }
.method h2, .method h3 { font-size: 1.3rem; }
.method p { color: var(--text-2); font-size: .97rem; }
.method .big { font: 600 1.05rem/1.3 var(--f-body); color: var(--text); word-break: break-word; }

/* forms */
.form-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.form-aside { display: flex; flex-direction: column; gap: 22px; }
.form-card { padding: 32px; border-radius: var(--r-3); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.field { display: grid; gap: 7px; }
.field.full { grid-column: 1 / -1; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 7px; }
.field label, .field legend { font-weight: 600; font-size: .92rem; color: var(--text); }
.field .opt { color: var(--text-3); font-weight: 400; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border-radius: var(--r-1); border: 1px solid var(--line-2); background: var(--input-bg); color: var(--text);
  transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-3); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field [aria-invalid="true"] { border-color: #B42318; box-shadow: 0 0 0 3px rgba(180, 35, 24, .12); }
.field-error { display: flex; gap: 6px; align-items: flex-start; color: #B42318; font-size: .88rem; font-weight: 500; line-height: 1.4; }
.field-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1 5h2v7h-2zm0 9h2v2h-2z'/%3E%3C/svg%3E") center / contain no-repeat; }
:root[data-theme="dark"] .field-error { color: #FF8A7A; }
:root[data-theme="dark"] .field [aria-invalid="true"] { border-color: #FF8A7A; }
.field select option { background: var(--card); color: var(--text); }
.radios { display: flex; gap: 10px; flex-wrap: wrap; border: 0; }
.radios label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-1); border: 1px solid var(--line-2); font-weight: 500; cursor: pointer; transition: border-color .2s, background-color .2s; }
.radios label:hover { background: var(--hover); }
.radios input { accent-color: var(--accent); width: 16px; height: 16px; min-height: 0; }
.form-foot { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 24px; }
.form-foot p { color: var(--text-3); font-size: .88rem; flex: 1 1 260px; }
.form-done { display: none; }
form.is-sent > :not(.form-done) { display: none; }
form.is-sent .form-done { display: grid; gap: 12px; justify-items: start; transition: opacity .25s var(--ease), translate .25s var(--ease); }
@starting-style { form.is-sent .form-done { opacity: 0; translate: 0 6px; } }
.form-done h2 { font-size: 1.8rem; }
.form-done p { color: var(--text-2); }

.map { border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); height: 100%; min-height: 360px; background: var(--bg-2); }
.map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; filter: var(--map-filter); }

/* downloads */
.downloads { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.dl .card-body { flex-direction: row; align-items: center; gap: 16px; }
.dl .type { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-2); background: var(--accent-soft); color: var(--link); font: 700 .8rem/1 var(--f-body); flex: none; }
.dl strong { display: block; font-weight: 600; }
.dl small { display: block; color: var(--text-3); font-size: .88rem; }
.dl .go { margin-left: auto; color: var(--text-3); transition: transform .25s var(--ease), color .2s; }
.dl .go svg { width: 20px; height: 20px; }
.dl:hover .go { color: var(--link); transform: translateY(2px); }

/* videos */
.yt { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-3); overflow: hidden; background: #000; }
.yt img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease), opacity .2s ease; opacity: .9; }
.yt:hover img { transform: scale(1.03); opacity: 1; }
.yt .play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: var(--grad-btn); color: #fff; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .6); transition: transform .2s var(--ease); }
.yt:hover .play { transform: scale(1.06); }
.yt:active .play { transform: scale(.96); }
.yt .play svg { width: 28px; height: 28px; margin-left: 4px; }
.yt iframe { width: 100%; height: 100%; border: 0; }
.vid h2 { font-size: 1.5rem; margin-top: 18px; }
.vid p { color: var(--text-2); margin-top: 6px; }

/* tick list on its own */
.checklist { display: grid; gap: 0; counter-reset: c; }
.checklist li { display: grid; grid-template-columns: 44px 1fr; align-items: baseline; padding: 16px 0; border-top: 1px solid var(--line); color: var(--text-2); counter-increment: c; }
.checklist li::before { content: counter(c, decimal-leading-zero); font: 600 .84rem/1 var(--f-mono); color: var(--link); }

/* before/after */
.ba { width: 100%; aspect-ratio: 1; max-height: 72svh; }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 90; padding: 12px 18px; border-radius: var(--r-2); background: var(--text); color: var(--bg); font-weight: 500; box-shadow: var(--shadow-2); transform: translate(-50%, 140%); transition: transform .35s var(--ease); }
.toast.is-on { transform: translate(-50%, 0); }

.redirect { padding: 80px 24px; text-align: center; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1180px) {
  .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1.2fr repeat(3, 1fr); }
  .footer-reach { grid-column: 1 / -1; }
}
@media (max-width: 1024px) {
  :root { --gutter: 28px; }
  .reqs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .sec-head.split { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .sec-head.split .lead { justify-self: start; }
  .editions { grid-template-columns: minmax(0, 1fr); }
  .edition { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .edition + .edition { border-left: 0; border-top: 1px solid var(--line); }
  .edition .frag { height: auto; min-height: 228px; border-bottom: 0; }
  .screens, .portals, .panels, .process, .proof, .prod, .prod.flip, .ph-grid, .split, .form-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .prod.flip .prod-copy { order: 0; }
  .process .ph { min-height: 0; aspect-ratio: 16 / 10; }
  .screens-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .ph-media { height: 440px; }
  .split .ph, .split .ph.tall { aspect-ratio: 16 / 11; max-height: none; }
  .methods, .downloads, .pick { grid-template-columns: minmax(0, 1fr); }
  .panel-photos { grid-template-rows: 340px 240px; }
  .values { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .hero { padding-top: calc(var(--header-h) + 32px); }
  .hero-shade { background: linear-gradient(180deg, rgba(12, 11, 10, .9) 0%, rgba(12, 11, 10, .78) 50%, rgba(12, 11, 10, .9) 100%); }
  .bento { grid-template-rows: 260px 220px; }
  .wall { grid-template-rows: 220px 220px; }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; --header-h: 64px; }
  .sec { padding: 64px 0 56px; }
  .sec-head { margin-bottom: 32px; }
  .svc .ph { height: 168px; }
  .svc .card-body { padding: 20px; }
  .svc .ticks.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; font-size: .94rem; }
  .compare th, .compare td { padding: 9px 12px; }
  .edition { display: flex; }
  .edition .frag { min-height: 0; height: 228px; }
  .hero-quote { flex-direction: column; max-width: none; }
  .hero-quote .btn { width: 100%; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 300px 200px 220px; }
  .bento .b1 { grid-column: 1; grid-row: 1; }
  .bento .b2 { grid-column: 2; grid-row: 1; }
  .bento .b3 { grid-column: 1; grid-row: 2; }
  .bento .b4 { grid-column: 2; grid-row: 2; }
  .bento { grid-template-rows: 280px 200px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 200px 260px 200px; }
  .wall .w1 { grid-column: 1 / 3; grid-row: 1; }
  .wall .w2 { grid-column: 1; grid-row: 2; }
  .wall .w3 { grid-column: 2; grid-row: 2; }
  .wall .w4 { grid-column: 1; grid-row: 3; }
  .wall .w5 { grid-column: 2; grid-row: 3; }
  .logos { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .logos li { height: 76px; padding: 10px; }
  .close-row { grid-template-columns: minmax(0, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .screens-side { grid-template-columns: minmax(0, 1fr); }
  .hmi-cycle { margin-left: 0; }
  .prod-lists, .ticks.cols-2, .form-grid, .svc-grid, .reqs, .prod-visual .row2 { grid-template-columns: minmax(0, 1fr); }
  .ui-table th:nth-child(n+5), .ui-table td:nth-child(n+5) { display: none; }
  .ph-media { height: 320px; }
  .panel-photos { grid-template-rows: 260px 200px; }
  .about-wall { grid-template-columns: 1fr 1fr; grid-template-rows: 200px 240px; }
  .about-wall .w1 { grid-column: 1 / -1; grid-row: 1; }
  .about-wall .w2 { grid-column: 1; grid-row: 2; }
  .about-wall .w3 { grid-column: 2; grid-row: 2; }
  .form-card { padding: 22px; }
  .award { min-height: 0; padding: 26px; }
}
@media (max-width: 560px) {
  .btn-row > .btn { width: 100%; }
  .hero .btn-row > .btn { width: 100%; }
  /* tighten the brand so the full company name fits on common phones (360-414px) */
  .site-header .brand { gap: 8px; }
  .site-header .brand img { width: 38px; height: 31px; }
  .site-header .brand-name { font-size: .95rem; letter-spacing: -.02em; }
  .header-inner { gap: 10px; }
  .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .media-toggle { bottom: 16px; }
  .wa-float { right: 14px; bottom: 14px; width: 52px; height: 52px; }
  .compare th, .compare td { padding: 10px 12px; }
}

/* =========================================================
   Frosted glass (user request 2026-11-06)
   Translucent surfaces over soft ambient colour, blurred with backdrop-filter, a fine frost grain,
   a bright top edge and a soft shadow. Falls back to solid surfaces when backdrop-filter is missing,
   with data-fx="lite"/"off", and with prefers-reduced-transparency.
   ========================================================= */
:root {
  --glass: rgba(255, 255, 255, .56);
  --glass-strong: rgba(255, 255, 255, .78);
  --glass-solid: #FFFFFF;
  --glass-line: rgba(255, 255, 255, .85);
  --glass-ring: rgba(22, 19, 15, .08);
  --glass-hi: rgba(255, 255, 255, .9);
  --glass-shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 22px 44px -26px rgba(60, 30, 10, .34);
  --frost: blur(16px) saturate(1.6);
  --frost-strong: blur(20px) saturate(1.7);
  --amb-1: rgba(232, 72, 31, .16);
  --amb-2: rgba(242, 166, 72, .2);
  --amb-3: rgba(255, 255, 255, .7);
  --app-glass: rgba(18, 17, 15, .74);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 42%);
  --glass-header: rgba(244, 242, 238, .62);
  --glass-header-line: rgba(22, 19, 15, .08);
  --glass-menu: rgba(244, 242, 238, .92);
  --ghost-bg: rgba(255, 255, 255, .28);
  --field-bg: rgba(255, 255, 255, .7);
  --group-bg: rgba(255, 255, 255, .22);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"], .dark {
  --glass: rgba(34, 31, 27, .5);
  --glass-strong: rgba(26, 24, 21, .8);
  --glass-solid: #1C1A17;
  --glass-line: rgba(255, 255, 255, .13);
  --glass-ring: rgba(0, 0, 0, .35);
  --glass-hi: rgba(255, 255, 255, .14);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 26px 52px -26px rgba(0, 0, 0, .85);
  --amb-1: rgba(255, 90, 42, .2);
  --amb-2: rgba(242, 150, 60, .1);
  --amb-3: rgba(255, 255, 255, .04);
  --glass-sheen: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, 0) 42%);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  --glass-header: rgba(15, 14, 12, .6);
  --glass-header-line: rgba(255, 255, 255, .08);
  --glass-menu: rgba(15, 14, 12, .94);
  --ghost-bg: rgba(255, 255, 255, .06);
  --field-bg: rgba(10, 9, 8, .45);
  --group-bg: rgba(255, 255, 255, .03);
}

/* ambient colour behind the glass: soft glows that fade out inside their own section, so no glow is
   ever sliced at a section edge; the footer stays flat */
.sec, .page-hero {
  background-image:
    radial-gradient(38% 34% at 88% 30%, var(--amb-1), transparent 72%),
    radial-gradient(36% 32% at 10% 68%, var(--amb-2), transparent 72%),
    radial-gradient(30% 30% at 55% 50%, var(--amb-3), transparent 75%);
}
.sec:nth-of-type(even) {
  background-image:
    radial-gradient(38% 34% at 12% 30%, var(--amb-1), transparent 72%),
    radial-gradient(36% 32% at 90% 68%, var(--amb-2), transparent 72%),
    radial-gradient(30% 30% at 45% 50%, var(--amb-3), transparent 75%);
}
.site-footer { background-image: none; }

/* glass surfaces */
.card, .editions, .table-wrap, .reqs li, .logos li, .form-card, .ilc, .signin-menu, .map, .methods.rows {
  background-color: var(--glass);
  background-image: var(--glass-sheen), var(--grain);
  background-size: auto, 160px 160px;
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 0 0 1px var(--glass-ring), var(--glass-shadow);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
}
.methods.rows { border: 1px solid var(--glass-line); border-radius: var(--r-3); padding: 0 24px; }
.methods.rows .method:last-child { border-bottom: 0; }
.logos li { background-color: rgba(255, 255, 255, .78); }
.compare thead th { background: var(--glass-strong); -webkit-backdrop-filter: var(--frost); backdrop-filter: var(--frost); }
.compare .grp th { background: var(--group-bg); }
.field input, .field select, .field textarea { background-color: var(--field-bg); }

/* header: frosted bar */
.site-header {
  background-color: var(--glass-header);
  -webkit-backdrop-filter: var(--frost-strong);
  backdrop-filter: var(--frost-strong);
  border-bottom-color: var(--glass-header-line);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .5);
}
:root[data-theme="dark"] .site-header { box-shadow: none; }
.over .site-header.is-scrolled { background-color: var(--glass-header); }
.over .site-header:not(.is-scrolled) { -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

/* product screens: dark frosted glass, so the plant video and colour show through the frame */
.app {
  background: var(--app-glass);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 40px 80px -40px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .25);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
}
.hmi-screen { background: radial-gradient(120% 90% at 50% 0%, rgba(40, 36, 31, .55) 0%, rgba(18, 17, 15, .2) 70%); }
.sec:not(.dark) .app, .page-hero .app { background: rgba(18, 17, 15, .93); }
/* over the moving hero video a live blur costs a repaint every video frame: tint without blur there */
.hero .app { background: rgba(16, 15, 13, .86); -webkit-backdrop-filter: none; backdrop-filter: none; }
.hero .hero-quote select, .hero .media-toggle { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(12, 11, 10, .62); }
.app-shot { background: #F0F0F0; }
.frag { background: rgba(18, 17, 15, .9); }

/* glass controls in the hero and on the media button */
.hero-quote select, .media-toggle {
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
}
.btn-ghost { -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); background-color: var(--ghost-bg); }
.close.drench .btn-ghost { background-color: #fff; }

/* the award: orange glass over its own glow */
.award {
  background: linear-gradient(150deg, #C8440E, #9A3412), var(--grain);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 26px 50px -26px rgba(176, 58, 15, .6);
}
.close.drench { background-image: radial-gradient(50% 70% at 90% 0%, rgba(255, 170, 120, .16), transparent 70%), radial-gradient(40% 60% at 0% 100%, rgba(120, 30, 5, .35), transparent 70%); }

/* mobile menu: full-screen frost */
@media (max-width: 960px) {
  .nav { background: var(--glass-menu); -webkit-backdrop-filter: var(--frost-strong); backdrop-filter: var(--frost-strong); }
}
/* lighter blur on phones to keep scrolling smooth */
@media (max-width: 760px) {
  :root { --frost: blur(12px) saturate(1.5); --frost-strong: blur(16px) saturate(1.6); }
}

/* fallbacks: solid surfaces when glass is unavailable or unwanted */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .92); --app-glass: #12110F; }
  :root[data-theme="dark"], .dark { --glass: #1C1A17; }
  .site-header, .over .site-header.is-scrolled { background-color: var(--header-bg); }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .editions, .table-wrap, .reqs li, .logos li, .form-card, .ilc, .signin-menu, .map, .methods.rows, .site-header, .app, .btn-ghost, .hero-quote select, .media-toggle, .nav, .compare thead th {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  }
  .card, .editions, .table-wrap, .reqs li, .form-card, .ilc, .signin-menu, .methods.rows { background-color: var(--glass-solid); }
  .app { background: #12110F; }
  .site-header { background-color: var(--header-bg) !important; }
}
:root[data-fx="lite"] *, :root[data-fx="off"] * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
:root[data-fx="lite"] .card, :root[data-fx="off"] .card, :root[data-fx="lite"] .editions, :root[data-fx="off"] .editions { background-color: var(--glass-solid); }
:root[data-fx="lite"] .app, :root[data-fx="off"] .app { background: #12110F; }
:root[data-fx="lite"] .site-header, :root[data-fx="off"] .site-header { background-color: var(--header-bg); }

/* real screenshots and product hero stack */
.ph.shot { background: #12110F; }
.ph.shot > img { object-position: 50% 0; }
.hero-shots { display: grid; gap: 16px; align-content: center; }
.hero-shots .splash { aspect-ratio: 1000 / 560; width: 78%; justify-self: end; border: 1px solid rgba(255, 255, 255, .14); box-shadow: var(--glass-shadow); }
.proof > .ph.shot > img { object-position: 50% 50%; }
/* the DRS Ultra splash is a graphic, not a photo: on narrow screens match the frame to its ratio
   so the whole splash shows instead of cropping "DRS ULTRA" at the edges */
@media (max-width: 900px) {
  .proof > .ph.shot { min-height: 0; aspect-ratio: 1000 / 560; }
  .proof > .ph.shot > img { object-fit: contain; }
}

/* touch screens: no sticky hover movement (press feedback stays) */
@media (hover: none) {
  .btn:hover, a.card:hover, .card-link:hover, .logos li:hover, .social a:hover, .jump a:hover, .icon-btn:hover, .media-toggle:hover { transform: none; }
  .wa-float:hover { transform: none; }
  .ph:hover img, .yt:hover img { transform: none; }
  .btn:hover .arr, .tlink:hover svg, .card-link:hover .tlink svg { transform: none; }
  .edition:hover { background: transparent; }
}

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  /* no movement: loops stop, nothing slides or scales; colour and opacity changes stay as quick state feedback */
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
    transition-property: color, background-color, border-color, opacity, outline-color !important; transition-duration: .12s !important; }
  .btn:hover, .btn:active, a.card:hover, a.card:active, .card-link:hover, .card-link:active, .logos li:hover, .social a:hover, .jump a:hover,
  .icon-btn:hover, .icon-btn:active, .media-toggle:hover, .wa-float:hover, .wa-float:active, .ph:hover img, .yt:hover img, .yt:hover .play,
  .btn:hover .arr, .tlink:hover svg, .card-link:hover .tlink svg, .dl:hover .go { transform: none !important; }
  .f-weigh .bar i { transform: scaleX(1); }
  .pulse, .hub .pl { opacity: 0; }
}
:root[data-fx="off"] *, :root[data-fx="off"] *::before, :root[data-fx="off"] *::after { animation: none !important; }

@media print {
  .site-header, .wa-float, .media-toggle, .hero-media, .nav-toggle { display: none !important; }
  .dark, :root { --bg: #fff; --text: #000; }
}

/* bolder pass: orange accents that draw on hover (transform only) */
.edition::before, a.card::before, .card-link::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.edition:hover::before, a.card:hover::before, .card-link:hover::before { transform: scaleX(1); }
.sec-head h2::after { content: ""; display: block; width: 56px; height: 4px; margin-top: 22px; border-radius: 2px; background: var(--accent); }
.close .close-title::after, .hero h1::after, .page-hero h1::after { content: none; }
@media (hover: none), (prefers-reduced-motion: reduce) { .edition::before, a.card::before, .card-link::before { transition: none; } }

.ph.banner-2 { aspect-ratio: 1600 / 529; }

/* =========================================================
   Futuristic glass pass (user request 2026-11-07)
   Deeper optical glass, a hairline control-room grid on the dark bands and
   the product frames, HUD corner brackets + a light rim on those frames, a
   faint orange neon rim in dark mode, and a one-shot specular sweep on the
   primary button and the frames on hover. One accent (orange); no perpetual
   background motion. Rests under reduced motion, reduced transparency and
   data-fx, and keeps the solid fallback where backdrop-filter is missing.
   Overrides earlier tokens; the fallbacks are re-asserted at the very end.
   ========================================================= */
:root {
  --frost: blur(22px) saturate(1.7);
  --frost-strong: blur(30px) saturate(1.85);
  --glass: rgba(255, 255, 255, .5);
  --glass-edge: inset 1.4px 1.4px 0 rgba(255, 255, 255, .72), inset -1px -1px 0 rgba(22, 19, 15, .05);
  --glass-shadow: 0 1px 2px rgba(60, 30, 10, .05), 0 12px 22px -16px rgba(60, 30, 10, .3), 0 30px 60px -34px rgba(60, 30, 10, .46);
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .3) 26%, rgba(255, 255, 255, 0) 52%, rgba(22, 19, 15, .1));
  --grid-line: rgba(22, 19, 15, .05);
  --hud: rgba(22, 19, 15, .3);
  --neon: 0 0 0 0 transparent;
  --sweep: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
}
:root[data-theme="dark"], .dark {
  --glass: rgba(34, 31, 27, .42);
  --glass-edge: inset 1.4px 1.4px 0 rgba(255, 255, 255, .14), inset -1px -1px 0 rgba(0, 0, 0, .3);
  --glass-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 30px 60px -30px rgba(0, 0, 0, .85);
  --rim: linear-gradient(140deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06) 26%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, .4));
  --grid-line: rgba(255, 255, 255, .05);
  --hud: rgba(255, 138, 92, .6);
  --neon: 0 0 22px -8px rgba(255, 90, 42, .4), 0 0 0 1px rgba(255, 90, 42, .12);
  --sweep: linear-gradient(100deg, transparent, rgba(255, 170, 130, .26), transparent);
}

/* deeper optical glass on every frosted surface (logos keep their lighter tile) */
.card, .editions, .table-wrap, .reqs li, .form-card, .ilc, .signin-menu, .map, .methods.rows {
  background-color: var(--glass);
  box-shadow: var(--glass-edge), 0 0 0 1px var(--glass-ring), var(--glass-shadow);
  -webkit-backdrop-filter: var(--frost);
  backdrop-filter: var(--frost);
}
.dark .card, :root[data-theme="dark"] .card,
.dark .editions, :root[data-theme="dark"] .editions,
.dark .form-card, :root[data-theme="dark"] .form-card,
.dark .ilc, :root[data-theme="dark"] .ilc,
.dark .signin-menu, :root[data-theme="dark"] .signin-menu {
  box-shadow: var(--glass-edge), var(--glass-shadow), var(--neon);
}

/* hairline control-room grid on the dark bands and the orange closing field */
.dark { position: relative; }
.close { position: relative; }
.dark > .wrap, .close > .wrap { position: relative; z-index: 1; }
.dark::before, .close.drench::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(130% 92% at 50% 0%, #000 28%, transparent 80%);
  mask-image: radial-gradient(130% 92% at 50% 0%, #000 28%, transparent 80%);
}
.close.drench::before { --grid-line: rgba(255, 255, 255, .09); }

/* hairline grid on the hero, weighted to the dark left where the copy sits */
.hero-shade::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 66%);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .35) 42%, transparent 66%);
}

/* product frames: a light rim and HUD corner brackets */
.app { position: relative; }
.app::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  padding: 1px; background: var(--rim);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.app::after {
  content: ""; position: absolute; inset: 11px; z-index: 3; pointer-events: none; opacity: .9;
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud)),
    linear-gradient(var(--hud), var(--hud)), linear-gradient(var(--hud), var(--hud));
  background-size: 15px 1.5px, 1.5px 15px, 15px 1.5px, 1.5px 15px, 15px 1.5px, 1.5px 15px, 15px 1.5px, 1.5px 15px;
  background-position: 0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%;
}

/* one-shot specular sweep on the primary button on hover */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary > * { position: relative; z-index: 1; }
.btn-primary::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: 0;
  background: var(--sweep); transform: translateX(-250%) skewX(-16deg); opacity: 0; pointer-events: none;
}
.btn-primary:hover::after { animation: btn-sweep .65s var(--ease); }
@keyframes btn-sweep {
  0% { transform: translateX(-250%) skewX(-16deg); opacity: 1; }
  100% { transform: translateX(320%) skewX(-16deg); opacity: 0; }
}

/* fallbacks re-asserted after the pass */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --glass: rgba(255, 255, 255, .92); }
  :root[data-theme="dark"], .dark { --glass: #1C1A17; }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --glass: var(--glass-solid); }
  .dark::before, .close.drench::before, .hero-shade::after, .app::after, .app::before { display: none; }
}
:root[data-fx="lite"], :root[data-fx="off"] { --glass: var(--glass-solid); }
:root[data-fx="lite"] .dark::before, :root[data-fx="off"] .dark::before,
:root[data-fx="lite"] .close.drench::before, :root[data-fx="off"] .close.drench::before,
:root[data-fx="lite"] .hero-shade::after, :root[data-fx="off"] .hero-shade::after,
:root[data-fx="lite"] .app::after, :root[data-fx="off"] .app::after,
:root[data-fx="lite"] .app::before, :root[data-fx="off"] .app::before,
:root[data-fx="lite"] .btn-primary::after, :root[data-fx="off"] .btn-primary::after { display: none; }
@media (hover: none) { .btn-primary:hover::after { animation: none; } }
/* lighter blur on phones for smooth scrolling (re-asserted after the deeper desktop frost) */
@media (max-width: 760px) { :root { --frost: blur(16px) saturate(1.6); --frost-strong: blur(22px) saturate(1.7); } }

/* plant-network field: the one ambient scene, behind the dark band's content */
canvas.field {   /* scoped to the canvas: a bare .field also matched every form field (Contact, Support) */
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .8s ease;
  -webkit-mask-image: radial-gradient(135% 115% at 50% 32%, #000 42%, transparent 100%);
  mask-image: radial-gradient(135% 115% at 50% 32%, #000 42%, transparent 100%);
}
canvas.field.is-on { opacity: 1; }
:root[data-fx="lite"] canvas.field, :root[data-fx="off"] canvas.field { display: none; }

/* HMI scan sweep across a product screenshot on hover or keyboard focus (one-shot) */
.app-shot { position: relative; overflow: hidden; }
.app-shot::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 46%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 138, 92, 0), rgba(255, 138, 92, .1) 72%, rgba(255, 138, 92, .45));
  opacity: 0; transform: translateY(-120%);
}
.app:hover .app-shot::after, .app:focus-within .app-shot::after { animation: app-scan 1.1s var(--ease); }
@keyframes app-scan {
  0% { opacity: 0; transform: translateY(-120%); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translateY(240%); }
}
@media (hover: none) { .app:hover .app-shot::after { animation: none; } }
:root[data-fx="lite"] .app-shot::after, :root[data-fx="off"] .app-shot::after { display: none; }

/* =========================================================
   Plant photo carousel (home #plants, user request 2026-11-07)
   A filmstrip at each photo's own shape (4:3 or 3:4) clipped on the .wrap lines, so both
   content edges stay equal and the cut-off next photo says there is more. It moves only when
   the visitor moves it (swipe, sideways scroll, mouse drag, arrow keys, the two buttons);
   nothing autoplays. Native scroll-snap does the resting; site.js eases the button and drag
   glides and turns snapping off while it does. The ink progress line replaces the scrollbar.
   ========================================================= */
.car-aside { display: grid; gap: 28px; justify-items: end; justify-self: end; }
.car-nav { display: flex; gap: 10px; }
.car-btn {
  width: 48px; height: 48px; color: var(--text);
  background-color: var(--glass); box-shadow: var(--glass-edge), inset 0 0 0 1px var(--line-2);
}
.car-btn svg { width: 20px; height: 20px; }
.car-btn:hover { background-color: var(--card); }
.car-btn[aria-disabled="true"] { opacity: .36; cursor: default; background-color: transparent; transform: none; }
.car.is-static .car-bar { display: none; }

.car { position: relative; }
.car-track {
  --slide-h: clamp(300px, calc(100svh - 420px), 560px);   /* fills one 1440x900 screen with the header */
  position: relative;   /* slides measure their offsetLeft from the track (site.js) */
  display: flex; gap: 16px;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: var(--r-3);
  -webkit-tap-highlight-color: transparent;
}
.car-track::-webkit-scrollbar { display: none; }
.car-track:focus-visible { border-radius: var(--r-3); outline-offset: 5px; }
.car-slide { flex: none; height: var(--slide-h); scroll-snap-align: start; }
.car-slide.land { width: min(calc(var(--slide-h) * 4 / 3), 86%); }
.car-slide.port { width: min(calc(var(--slide-h) * 3 / 4), 64%); }
.car-slide > .ph { height: 100%; }
.car-track img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .car-track { cursor: grab; } }
.car-track.is-gliding, .car-track.is-dragging { scroll-snap-type: none; }
.car-track.is-dragging { cursor: grabbing; }
.car-track.is-dragging .ph img { transform: none; }

.car-bar { position: relative; height: 2px; margin-top: 26px; border-radius: 2px; background: var(--line); overflow: hidden; }
.car-bar i { position: absolute; inset: 0 auto 0 0; width: 40%; border-radius: inherit; background: var(--text); will-change: transform; }

@media (max-width: 900px) {
  .car-aside { justify-self: stretch; justify-items: start; gap: 20px; }
  .car-nav { justify-self: end; }
  .car-track { --slide-h: clamp(300px, 56vw, 460px); }   /* tablets: size from the width, keeps photos 4:3 */
}
@media (max-width: 760px) { .car-track { --slide-h: 320px; gap: 12px; } .car-bar { margin-top: 20px; } }
@media (max-width: 560px) { .car-track { --slide-h: 280px; } }

/* =========================================================
   Motion and type pass (user request 2026-11-07: "animations in scrolling, page shifting
   and everything, make text look premium in every page"). Replaces the earlier rule that
   nothing animates on scroll. Three layers, one curve family:
   1. Page to page: a cross-document view transition. The header and the WhatsApp button stay
      put while the old page lifts away fast and the new one rises in.
   2. First screen: the hero heading rises out of a mask, then its copy and media follow.
   3. Scrolling: section headings rise out of a mask and draw their orange bar; copy, cards and
      photos fade up in reading order, 80 ms apart, once. site.js only hides what starts below
      the fold, so nothing flashes and nothing is hidden without JavaScript.
   Only opacity, transform and clip-path move. Reduced motion keeps quick fades only;
   data-fx="off" turns all of it off; print shows everything.
   ========================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-exit: cubic-bezier(.4, 0, .6, .2); }

/* 1. page to page */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.wa-float { view-transition-name: wa-float; }
::view-transition-old(root) { animation: vt-out .22s var(--ease-exit) both; }
::view-transition-new(root) { animation: vt-in .62s var(--ease-out) both; }
::view-transition-group(site-header), ::view-transition-group(wa-float) { animation-duration: .3s; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(22px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* 2. first screen of every page */
@keyframes ld-mask {
  from { clip-path: inset(0 0 100% 0); transform: translateY(.32em); }
  to { clip-path: inset(-12% -4% -22% -4%); transform: none; }
}
@keyframes ld-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes ld-media { from { opacity: 0; transform: translateY(26px) scale(.975); } }
.hero h1, .page-hero h1 { animation: ld-mask 1.05s var(--ease-out) .05s backwards; }
.hero-copy > :not(h1), .page-hero .ph-copy > :not(h1) { animation: ld-rise .9s var(--ease-out) backwards; }
.hero-copy > :nth-child(2), .page-hero .ph-copy > :nth-child(2) { animation-delay: .2s; }
.hero-copy > :nth-child(3), .page-hero .ph-copy > :nth-child(3) { animation-delay: .3s; }
.hero-copy > :nth-child(4), .page-hero .ph-copy > :nth-child(4) { animation-delay: .38s; }
.hero-copy > :nth-child(n+5), .page-hero .ph-copy > :nth-child(n+5) { animation-delay: .46s; }
.page-hero .wrap > :nth-child(2) { animation: ld-media 1.15s var(--ease-out) .24s backwards; }

/* 3. scroll reveal (classes set by site.js, removed again once played) */
.rv { opacity: 0; transform: translateY(30px); }
.rv-mask { clip-path: inset(0 0 100% 0); transform: translateY(.3em); }
.rv-mask::after { transform: scaleX(0); transform-origin: left center; }
.ph.rv > img { transform: scale(1.07); }
.rv.is-in { opacity: 1; transform: none;
  transition: opacity .8s var(--ease-out) var(--rv-d, 0ms), transform 1s var(--ease-out) var(--rv-d, 0ms); }
.rv-mask.is-in { clip-path: inset(-12% -4% -40% -4%); transform: none;
  transition: clip-path 1.05s var(--ease-out) var(--rv-d, 0ms), transform 1.05s var(--ease-out) var(--rv-d, 0ms); }
.rv-mask.is-in::after { transform: scaleX(1); transition: transform .9s var(--ease-out) calc(var(--rv-d, 0ms) + .38s); }
.ph.rv.is-in > img { transform: none; transition: transform 1.5s var(--ease-out) var(--rv-d, 0ms); }
:root[data-fx="off"] .rv, :root[data-fx="off"] .rv-mask { opacity: 1; transform: none; clip-path: none; }
@media print {
  .rv, .rv-mask, .ph.rv > img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* ---------- premium type: tighter optical tracking, a touch wider display cut ---------- */
body { letter-spacing: -.011em; font-kerning: normal; font-variant-ligatures: common-ligatures contextual; }
h1, h2, h3 { font-kerning: normal; }
h1 { font-stretch: 110%; font-weight: 660; letter-spacing: -.036em; line-height: .96; }
h2 { font-stretch: 108%; font-weight: 650; letter-spacing: -.032em; line-height: 1; }
h3 { letter-spacing: -.018em; }
.hero h1 { line-height: .94; }
.lead { letter-spacing: -.014em; line-height: 1.58; }
.hero-sub { letter-spacing: -.016em; }
.btn, .nav > a, .label { letter-spacing: -.006em; }
.dark p, .dark li { letter-spacing: -.004em; }
html { hanging-punctuation: first last; }

/* =========================================================
   Soft premium theme (user request 2026-11-07, see DESIGN.md "Soft premium redesign")
   Calm near-white ground, slate ink, DRS orange used sparingly, pill buttons, 20px cards
   with a 7% ring and long soft shadows, heroes as floating 28px cards, frosted glass only
   over photos and video. Overrides everything above it; dark mode keeps the same shapes.
   ========================================================= */
:root {
  --bg: #FAFAF9; --bg-2: #F3F4F6; --card: #FFFFFF;
  --text: #0F172A; --text-2: #475569; --text-3: #64748B;
  --link: #C2410C; --copper-2: #C2410C; --accent: #EA580C; --accent-soft: rgba(234, 88, 12, .09);
  --line: #E5E7EB; --line-2: #D1D5DB; --hover: rgba(15, 23, 42, .04); --ring: rgba(15, 23, 42, .07);
  --sh-1: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 22px -12px rgba(15, 23, 42, .14);
  --sh-2: 0 2px 6px rgba(15, 23, 42, .05), 0 28px 56px -26px rgba(15, 23, 42, .28);
  --sh-hero: 0 2px 8px rgba(15, 23, 42, .06), 0 44px 90px -42px rgba(15, 23, 42, .5);
  --sh-soft: 0 1px 3px rgba(15, 23, 42, .03), 0 40px 80px -50px rgba(15, 23, 42, .3);
  --shadow-1: var(--sh-1); --shadow-2: var(--sh-2);
  --r-1: 12px; --r-2: 14px; --r-3: 20px; --r-4: 28px;
  --header-bg: rgba(250, 250, 249, .82); --input-bg: #FFFFFF; --placeholder: #94A3B8;
  --glass: #FFFFFF; --glass-strong: #FFFFFF; --glass-solid: #FFFFFF; --glass-ring: var(--ring);
  --glass-edge: 0 0 0 0 transparent; --glass-shadow: var(--sh-1); --neon: 0 0 0 0 transparent;
  --glass-header: rgba(250, 250, 249, .8); --glass-header-line: rgba(15, 23, 42, .07); --glass-menu: rgba(250, 250, 249, .97);
  --amb-1: rgba(234, 88, 12, .045); --amb-2: rgba(100, 116, 139, .07); --amb-3: transparent;
  --grid-line: transparent; --grain: none; --ghost-bg: #FFFFFF; --field-bg: #FFFFFF; --group-bg: rgba(15, 23, 42, .02);
  --hero-card-bg: radial-gradient(85% 95% at 100% 0%, rgba(234, 88, 12, .085), transparent 62%),
                  radial-gradient(70% 80% at 0% 100%, rgba(100, 116, 139, .1), transparent 62%), #FFFFFF;
}
:root[data-theme="dark"], .dark {
  --bg: #0B0D11; --bg-2: #10131A; --card: #151A23;
  --text: #F1F5F9; --text-2: #B4BFCE; --text-3: #94A1B3;
  --link: #FF8A5C; --copper-2: #FF8A5C; --accent: #FF6A33; --accent-soft: rgba(255, 106, 51, .14);
  --line: rgba(255, 255, 255, .08); --line-2: rgba(255, 255, 255, .16); --hover: rgba(255, 255, 255, .05); --ring: rgba(255, 255, 255, .07);
  --sh-1: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .7);
  --sh-2: 0 2px 6px rgba(0, 0, 0, .45), 0 30px 60px -26px rgba(0, 0, 0, .85);
  --sh-hero: 0 44px 90px -40px rgba(0, 0, 0, .9);
  --sh-soft: 0 40px 80px -50px rgba(0, 0, 0, .8);
  --header-bg: rgba(11, 13, 17, .8); --input-bg: #10131A; --placeholder: #7C889A;
  --glass: #151A23; --glass-strong: #151A23; --glass-solid: #151A23; --glass-ring: var(--ring); --glass-shadow: var(--sh-1);
  --glass-header: rgba(11, 13, 17, .78); --glass-header-line: rgba(255, 255, 255, .06); --glass-menu: rgba(11, 13, 17, .97);
  --amb-1: rgba(255, 106, 51, .06); --amb-2: rgba(100, 116, 139, .05); --amb-3: transparent;
  --ghost-bg: rgba(255, 255, 255, .04); --field-bg: #10131A; --group-bg: rgba(255, 255, 255, .02);
  --hero-card-bg: radial-gradient(85% 95% at 100% 0%, rgba(255, 106, 51, .12), transparent 62%),
                  radial-gradient(70% 80% at 0% 100%, rgba(100, 116, 139, .12), transparent 62%), #12161E;
}

/* type: one confident sans voice, smaller and calmer than before */
h1, h2, h3 { font-stretch: 100%; }
h1 { font-weight: 680; letter-spacing: -.034em; line-height: 1.02; }
h2 { font-weight: 680; letter-spacing: -.03em; line-height: 1.06; font-size: clamp(2rem, 1.3rem + 1.9vw, 3.1rem); }
h3 { font-weight: 650; letter-spacing: -.016em; }
.ph-copy h1 { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 3.8rem); }
.sec-head { margin-bottom: 44px; }
.sec-head h2::after { content: none; }
.lead { color: var(--text-2); }
.steps .n { font-stretch: 100%; font-size: 1.5rem; }
.award .year, .award strong { font-stretch: 100%; }
.close-title { font-stretch: 100%; font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); line-height: 1.02; letter-spacing: -.034em; }

/* header: plain translucent bar, small centred links, outline pill call to action */
.site-header { background: var(--glass-header); border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.site-header.is-scrolled { border-bottom-color: var(--glass-header-line); }
.brand-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-radius: 50%; background: var(--accent); }
.nav > a { font-size: .92rem; padding: 8px 14px; border-radius: 999px; }
.nav > a::after { display: none; }
.nav > a[aria-current="page"] { color: var(--text); background: var(--hover); }
.icon-btn { border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.site-header .btn-quote { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); }
.site-header .btn-quote:hover { filter: none; box-shadow: 0 0 0 1px var(--text-3), var(--sh-2); }
.site-header .btn-quote::after { display: none; }

/* buttons: pills */
.btn { --bh: 50px; padding: 0 24px; border-radius: 999px; }
.btn-sm { --bh: 40px; padding: 0 18px; }
.btn-primary { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(194, 65, 12, .7); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 16px 30px -14px rgba(194, 65, 12, .75); }
.btn-ghost { background: var(--card); color: var(--text); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1);
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn-ghost:hover { background: var(--card); box-shadow: 0 0 0 1px var(--text-3), var(--sh-2); }
.btn:focus-visible { border-radius: 999px; }

/* surfaces: opaque white, a 7% ring and a long soft shadow; no borders, no glass */
.card, .table-wrap, .form-card, .ilc, .map, .methods.rows, .signin-menu, .reqs li {
  background-color: var(--card); border: 0; border-radius: var(--r-3);
  box-shadow: 0 0 0 1px var(--ring), var(--sh-1);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.reqs li { border-radius: var(--r-2); }
.signin-menu { box-shadow: 0 0 0 1px var(--ring), var(--sh-2); }
a.card::after, .card-link::after { box-shadow: 0 0 0 1px var(--ring), var(--sh-2); }
a.card:hover, .card-link:hover { transform: translateY(-3px); }
.edition::before, a.card::before, .card-link::before { display: none; }
.editions { gap: 20px; background: none; border: 0; border-radius: 0; overflow: visible; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
.edition { background: var(--card); border-radius: var(--r-3); overflow: hidden;
  box-shadow: 0 0 0 1px var(--ring), var(--sh-1); transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.edition + .edition { border: 0; }
.edition:hover { background: var(--card); transform: translateY(-4px); box-shadow: 0 0 0 1px var(--ring), var(--sh-2); }
.ph { box-shadow: var(--sh-1); }
.card .ph, .ph.contain { box-shadow: none; }
.app { border-radius: var(--r-3); box-shadow: 0 0 0 1px var(--ring), var(--sh-2); }
.app::before, .app::after { display: none; }
.dark::before, .close.drench::before, .hero-shade::after { display: none; }
.logos li { border: 0; border-radius: var(--r-2); box-shadow: 0 0 0 1px var(--ring), var(--sh-1); }
.chip-icon, .reach .ic { border-radius: 12px; }
.ticks li::before { border-radius: 50%; width: 20px; height: 20px; top: .12em; }
.award { border-radius: var(--r-3); box-shadow: 0 30px 60px -30px rgba(194, 65, 12, .6); }
.jump a { background: var(--card); border-color: var(--line); box-shadow: var(--sh-1); }
.site-footer { background: var(--bg); border-top: 1px solid var(--line); }
@media (hover: none) { .edition:hover { transform: none; } }

/* ---------- home hero: the plant video in a floating card, a light glass quick-quote panel ---------- */
.hero { min-height: 0; display: block; overflow: visible; isolation: auto; padding: 16px 0 clamp(40px, 6vh, 64px); }
.hero-card {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center;
  min-height: clamp(560px, calc(100svh - var(--header-h) - 190px), 780px);
  padding: clamp(28px, 4.4vw, 68px); border-radius: var(--r-4); background: #12151C; box-shadow: var(--sh-hero);
}
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .84) 0%, rgba(8, 10, 14, .62) 38%, rgba(8, 10, 14, .2) 70%, rgba(8, 10, 14, .3) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, .3) 0%, transparent 30%, transparent 70%, rgba(8, 10, 14, .45) 100%);
}
.hero-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: 48px; align-items: center; }
.hero-copy { max-width: 660px; }
.hero h1 { font-size: clamp(2.5rem, 1.2rem + 3.3vw, 4.25rem); max-width: 15ch; line-height: 1.02; color: #fff; }
.hero .hero-sub { margin-top: 20px; font-size: 1.12rem; color: rgba(255, 255, 255, .84); max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 32px; }
.hero-actions .tlink { color: #fff; }
.trust {
  display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: 40px; padding: 7px 18px 7px 7px;
  border-radius: 999px; color: rgba(255, 255, 255, .86); font-size: .9rem; line-height: 1.35;
  background: rgba(255, 255, 255, .13); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.trust strong { color: #fff; font-weight: 600; }
.trust-logos { display: flex; flex: none; }
.trust-logos img { width: 36px; height: 36px; padding: 6px; border-radius: 50%; object-fit: contain; background: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.trust-logos img + img { margin-left: -10px; }
.hero-panel {
  --text: #0F172A; --text-2: #475569; --text-3: #5B6779; --line: rgba(15, 23, 42, .1); --link: #C2410C; --accent-soft: rgba(234, 88, 12, .11);
  display: grid; gap: 16px; padding: 24px; border-radius: 22px; color: var(--text);
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(22px) saturate(1.6); backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 1px rgba(255, 255, 255, .45), 0 28px 56px -24px rgba(2, 6, 23, .6);
  animation: ld-media 1.1s var(--ease-out) .32s backwards;
}
.hero-panel p, .hero-panel li { letter-spacing: -.008em; }
.hp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero-panel h2 { font-size: 1.28rem; line-height: 1.2; letter-spacing: -.02em; color: var(--text); }
.hp-ic { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 42, .06), 0 6px 14px -8px rgba(15, 23, 42, .3); }
.hero-panel .hero-quote { display: grid; gap: 10px; margin: 0; max-width: none; }
.hero-panel .hero-quote .select { min-width: 0; }
.hero-panel .hero-quote select { height: 50px; border-radius: var(--r-1); background: #fff; color: var(--text); border: 1px solid rgba(15, 23, 42, .14); }
.hero-panel .hero-quote select:hover { border-color: rgba(15, 23, 42, .3); }
.hero-panel .hero-quote select option { background: #fff; color: #0F172A; }
.hero-panel .select svg { color: var(--text-3); }
.hero-panel .hero-quote .btn { width: 100%; }
.hero-panel .label { padding-top: 16px; border-top: 1px solid var(--line); color: var(--text-3); }
.hero-panel .ticks { gap: 9px; }
.hero-panel .ticks li { font-size: .94rem; color: var(--text-2); }
.hero-card .media-toggle { top: 20px; right: 20px; bottom: auto; }

.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 44px; padding-inline: 8px; }
.features li { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; row-gap: 4px; align-content: start;
  animation: ld-rise .9s var(--ease-out) backwards; }
.features li:nth-child(1) { animation-delay: .5s; }
.features li:nth-child(2) { animation-delay: .58s; }
.features li:nth-child(3) { animation-delay: .66s; }
.features li:nth-child(4) { animation-delay: .74s; }
.features .tile { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--link); }
.features .tile svg { width: 21px; height: 21px; }
.features h3 { font: 650 1rem/1.3 var(--f-body); letter-spacing: -.012em; }
.features p { font-size: .92rem; line-height: 1.5; color: var(--text-3); }

/* ---------- inner page heroes: the same floating card, a soft white-to-warm ground ---------- */
.page-hero { padding: 16px 0 clamp(40px, 6vh, 64px); background-image: none; }
.page-hero > .wrap { position: relative; padding: clamp(28px, 4.4vw, 68px); border-radius: var(--r-4);
  background: var(--hero-card-bg); box-shadow: 0 0 0 1px var(--ring), var(--sh-soft); }
@media (min-width: 1200px) and (min-height: 700px) {
  .page-hero { min-height: 0; display: block; }
  .page-hero > .wrap { min-height: calc(100svh - var(--header-h) - 64px); align-content: center; }
}

/* ---------- closing call to action: a rounded orange card ---------- */
.close.drench { background: transparent; padding: clamp(24px, 4vh, 48px) 0 clamp(48px, 7vh, 80px); }
.close.drench > .wrap {
  position: relative; overflow: hidden; padding: clamp(32px, 5vw, 72px); border-radius: var(--r-4);
  background: radial-gradient(110% 130% at 100% 0%, #C9480F 0%, #B83C0D 48%, #95320F 100%);
  box-shadow: 0 44px 90px -44px rgba(149, 50, 15, .7);
}
.close.drench .btn-primary { background: #fff; color: #9A3412; box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45); }
.close.drench .btn-primary:hover { background: #fff; filter: none; box-shadow: 0 18px 32px -14px rgba(0, 0, 0, .5); }
.close.drench .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55); }
.close.drench .btn-ghost:hover { background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 900px) {
  .hero-card { min-height: 0; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .hero-panel { max-width: 520px; }
}
@media (max-width: 560px) {
  .hero { padding-top: 10px; }
  .hero-card, .page-hero > .wrap, .close.drench > .wrap { border-radius: 22px; }
  .hero-card { padding: 28px 20px 22px; }
  .page-hero > .wrap { padding: 28px 20px; }
  .close.drench > .wrap { padding: 32px 20px; }
  .features { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .trust { border-radius: 18px; }
  .hero-card .media-toggle { top: 12px; right: 12px; }
}
@media (prefers-reduced-transparency: reduce) {
  .hero-panel { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .trust { background: rgba(10, 12, 16, .7); }
}
:root[data-fx="lite"] .hero-panel, :root[data-fx="off"] .hero-panel { background: #fff; }

/* =========================================================
   Scroll moments and word rise (user request 2026-11-07)
   1. Word rise: every h1/h2 is split into words at build time (common.py). Page titles rise
      word by word out of a mask on load; section headings do the same when they scroll in.
   2. Converge moments on the home page, adapted from Skiper UI "Skiper 31 ScrollAnimation_002"
      by Gurvinder Singh (gxuri.me), free version, credited as its licence asks. site.js drives
      them from the scroll position: letters start spread out from the middle and tilted
      (translateX and rotateX of 50 per step from the centre), client logos start fanned out,
      turned and lifted (90px / 50deg / 20px per step, 75% scale), and both settle as the
      section reaches the middle of the screen.
   3. Entrances read as motion, not a pop: a gentler curve, a longer rise and a light blur.
   With "reduce motion" on (Windows "Animation effects" off) nothing moves, but content still
   fades in gently and in order instead of appearing at once.
   ========================================================= */
:root { --ease-word: cubic-bezier(.2, .75, .15, 1); --ease-soft: cubic-bezier(.33, 1, .68, 1); }

/* 1. word rise */
.w { display: inline-block; overflow: hidden; padding: .08em .03em .16em; margin: -.08em -.03em -.16em; vertical-align: top; }
.wi { display: inline-block; }
@keyframes wd-rise { from { transform: translateY(108%); } }
@keyframes wd-fade { from { opacity: 0; } }
@keyframes ld-fade { from { opacity: 0; } }
.hero h1, .page-hero h1 { animation: none; }
.hero h1 .wi, .page-hero h1 .wi { animation: wd-rise 1.15s var(--ease-word) backwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
.rv-mask, .rv-mask.is-in { clip-path: none; transform: none; transition: none; }
.rv-mask .wi { transform: translateY(108%); }
.rv-mask.is-in .wi { transform: none; transition: transform 1.1s var(--ease-word) calc(var(--rv-d, 0ms) + var(--i) * 60ms); }

/* 3. softer, clearly visible entrances for everything else */
.rv { opacity: 0; transform: translateY(44px); filter: blur(5px); }
.rv.is-in { opacity: 1; transform: none; filter: none;
  transition: opacity 1s var(--ease-soft) var(--rv-d, 0ms), transform 1.25s var(--ease-word) var(--rv-d, 0ms), filter 1s var(--ease-soft) var(--rv-d, 0ms); }
.hero-copy > :not(h1), .page-hero .ph-copy > :not(h1) { animation-duration: 1.1s; animation-timing-function: var(--ease-word); }
.page-hero .wrap > :nth-child(2) { animation-duration: 1.3s; animation-timing-function: var(--ease-word); }

/* 2. converge moments: a pinned stage inside a taller section gives the scroll room */
.moment { position: relative; height: 180svh; background: var(--bg-2); }
.moment-logos { height: 160svh; background: var(--bg); }
.moment-stage {
  position: sticky; top: var(--header-h); height: calc(100svh - var(--header-h)); overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: clamp(20px, 3vh, 36px);
  padding: 0 var(--gutter); text-align: center;
}
.moment-words {
  font: 700 clamp(2.7rem, .6rem + 6.4vw, 6rem)/1 var(--f-display); font-stretch: 100%;
  letter-spacing: -.045em; text-transform: uppercase; color: var(--accent); text-wrap: balance;
}
.cv-word { display: inline-block; white-space: nowrap; }
.cv-ch, .cv-tile { display: inline-block; transform-origin: 50% 50%; backface-visibility: hidden; }
.moment-sub {
  display: flex; align-items: center; justify-content: center; gap: 12px; max-width: min(100%, 64ch);
  font: 500 clamp(1.05rem, .85rem + .7vw, 1.5rem)/1.3 var(--f-body); letter-spacing: -.022em; color: var(--text);
}
.moment-sub .bracket { height: clamp(36px, 3.4vw, 48px); width: auto; flex: none; }
.moment-sub .flip { display: flex; transform: scaleX(-1); }
.cv-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(10px, 1.2vw, 16px); max-width: 1280px; }
@media (max-width: 560px) { .cv-logos { max-width: 262px; } }   /* 4 + 4 + 3, centred: no orphan tile */
.cv-tile {
  display: grid; place-items: center; width: clamp(58px, 6.2vw, 92px); aspect-ratio: 1; padding: clamp(9px, 1.1vw, 15px);
  border-radius: 24%; background: var(--tile); box-shadow: 0 0 0 1px var(--ring), var(--sh-2);
}
.cv-tile img { width: 100%; height: 100%; object-fit: contain; }
.moment.is-moving .cv-ch, .moment.is-moving .cv-tile { will-change: transform; }
@media (max-width: 760px) {
  .moment { height: 160svh; }
  .moment-logos { height: 150svh; }
  .moment-sub { gap: 8px; }
}
:root[data-fx="off"] .moment, :root[data-fx="off"] .moment-logos { height: auto; }
:root[data-fx="off"] .moment-stage { position: static; height: auto; padding-block: 96px; }

/* reduce motion: no movement anywhere, but entrances still fade in gently and in order */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .wi, .page-hero h1 .wi { animation: wd-fade .9s ease both !important; animation-delay: calc(var(--i) * 70ms + 100ms) !important; }
  .hero-copy > :not(h1), .page-hero .ph-copy > :not(h1), .page-hero .wrap > :nth-child(2), .hero-panel, .features li {
    animation-name: ld-fade !important; animation-duration: .9s !important; animation-timing-function: ease !important; }
  .rv { transform: none; filter: none; }
  .rv.is-in { transition: opacity .9s ease var(--rv-d, 0ms) !important; }
  .rv-mask .wi { transform: none; opacity: 0; }
  .rv-mask.is-in .wi { opacity: 1; transition: opacity .8s ease calc(var(--rv-d, 0ms) + var(--i) * 60ms) !important; }
  .ph.rv > img { transform: none; }
  .moment, .moment-logos { height: auto; }
  .moment-stage { position: static; height: auto; padding-block: clamp(80px, 14vh, 140px); }
}
@media print {
  .rv-mask .wi { transform: none !important; opacity: 1 !important; }
  .moment, .moment-logos { height: auto; }
  .moment-stage { position: static; height: auto; }
}

/* ---------- hero refinement (user request 2026-11-07, from a 1920px screenshot) ----------
   The hero card is wider than the content column on large screens (up to 1560px), while its
   copy stays on the same line as the logo. The quick-quote panel moved out of the hero so the
   plant image carries the first screen; the quote form now sits in the home closing card. */
.hero-wrap { width: min(100% - 2 * var(--gutter), 1560px); }
.hero-card {
  min-height: clamp(560px, calc(100svh - var(--header-h) - 170px), 820px);
  padding-inline: max(clamp(28px, 4.4vw, 68px), calc((100% - 1280px) / 2));
}
.hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-copy { max-width: 780px; }
.hero h1 { font-size: clamp(2.6rem, 1.2rem + 3.7vw, 4.9rem); max-width: 15ch; }
.hero-shade {
  background:
    linear-gradient(90deg, rgba(8, 10, 14, .82) 0%, rgba(8, 10, 14, .55) 36%, rgba(8, 10, 14, .12) 66%, rgba(8, 10, 14, .06) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, .25) 0%, transparent 28%, transparent 68%, rgba(8, 10, 14, .5) 100%);
}

/* quick quote inside the orange closing card */
.close .hero-quote { margin-top: 4px; max-width: 620px; }
.close .hero-quote select {
  height: 52px; padding-left: 22px; border: 0; border-radius: 999px; background: #fff; color: #0F172A;
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .45); -webkit-backdrop-filter: none; backdrop-filter: none;
}
.close .hero-quote select:hover { border: 0; }
.close .hero-quote select option { background: #fff; color: #0F172A; }
.close .hero-quote .select svg { right: 18px; color: #64748B; }
.close .hero-quote .btn { gap: 10px; }
.close-alt { margin-top: 18px; }
.close-alt .tlink { color: #fff; }

/* ---------- wider layout on large screens (user request 2026-11-07) ----------
   The content column grows with the screen from 1280px (up to ~1660px wide screens) to about
   1480px on a 1920px screen and at most 1600px, so cards, grids and headings use the room on big
   monitors while every section keeps the same left and right edges. The hero card stays a step
   wider than the content, with its copy still on the content line. */
:root { --wrap-max: clamp(1280px, 77vw, 1600px); --hero-max: clamp(1360px, 86vw, 1760px); }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); }
@media (min-width: 1200px) and (min-height: 700px) {
  .page-hero > .wrap { width: min(100% - 2 * var(--gutter), var(--wrap-max)); }
}
.hero-wrap { width: min(100% - 2 * var(--gutter), var(--hero-max)); }
.hero-card { padding-inline: max(clamp(28px, 4.4vw, 68px), calc((100% - var(--wrap-max)) / 2)); }
.cv-logos { max-width: var(--wrap-max); }

/* ---------- user-supplied plant images (2026-11-07) ----------
   The night aerial is the backdrop of the "DO IT RIGHT." moment: dimmed so the orange letters
   carry, and it eases from 114% to 100% as the letters assemble (site.js converge). The day plant
   replaces the illustrated render in the Services hero. */
.moment.night { background: #0B0D11; color: #fff; }
.moment.night .moment-stage { isolation: isolate; }
.moment-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: #0B0D11; }
.moment-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transform-origin: 50% 55%; }
.moment-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(8, 10, 14, .55), rgba(8, 10, 14, .2) 100%),
    linear-gradient(180deg, rgba(8, 10, 14, .55) 0%, rgba(8, 10, 14, .15) 35%, rgba(8, 10, 14, .25) 65%, rgba(8, 10, 14, .8) 100%);
}
.moment.night .moment-words { color: #FF6A33; text-shadow: 0 4px 40px rgba(0, 0, 0, .45); }
.moment.night .moment-sub { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.moment.is-moving .moment-bg img { will-change: transform; }
@media (prefers-reduced-motion: reduce) { .moment.night .moment-stage { min-height: 80svh; place-content: center; } }
:root[data-fx="off"] .moment.night .moment-stage { min-height: 80svh; }
.page-hero .hero-photo { box-shadow: 0 0 0 1px var(--ring), var(--sh-2); }
.page-hero .hero-photo > img { object-position: 40% 50%; }

/* panel cut-out in the home process section (user choice 2026-11-07): the whole panel stands in
   a softly lit tile with a floor shadow, product-shot style, instead of being cropped */
.ph.cutout { background: radial-gradient(75% 65% at 50% 42%, #FFFFFF 0%, #F1F2F4 62%, #E6E8EC 100%); box-shadow: 0 0 0 1px var(--ring), var(--sh-1); }
.ph.cutout > img { object-fit: contain; padding: 6% 10% 8%; filter: drop-shadow(0 26px 28px rgba(15, 23, 42, .24)); }
:root[data-theme="dark"] .ph.cutout { background: radial-gradient(75% 65% at 50% 42%, #2A303B 0%, #1A1F28 62%, #12161E 100%); }
@media (max-width: 1024px) { .process .ph.cutout { aspect-ratio: 4 / 5; max-height: 560px; width: 100%; } }

/* =========================================================
   Premium footer (user request 2026-11-07, after a "premium footer section" reference)
   A rounded white card with a soft orange glow and the brand dot in one corner; filled
   brand-colour social buttons (the real logos in white); column titles in tinted icon tiles and
   links led by small icons that slide on hover; a "Talk to our team" card whose message box opens
   WhatsApp with the text filled in; a quiet bottom bar with a Back to top pill.
   ========================================================= */
.site-footer { background: var(--bg); border-top: 0; padding: 8px 0 32px; }
.footer-card {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(28px, 3.6vw, 52px) clamp(22px, 3.6vw, 52px) 22px;
  border-radius: var(--r-4); background: var(--card);
  box-shadow: 0 0 0 1px var(--ring), var(--sh-soft);
}
.footer-card::before, .footer-card::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
.footer-card::before {
  right: -104px; top: -104px; width: 260px; height: 260px;   /* the brand dot lands ~26px inside the corner */
  background: radial-gradient(circle, var(--accent) 0 5px, transparent 5.5px), radial-gradient(circle, rgba(234, 88, 12, .16), rgba(234, 88, 12, 0) 68%);
}
.footer-card::after { left: -140px; bottom: -160px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(100, 116, 139, .12), rgba(100, 116, 139, 0) 68%); }

.footer-grid { grid-template-columns: 1.25fr 1fr 1fr 1.05fr 1.45fr; gap: 40px 36px; align-items: start; }
.footer-brand { gap: 16px; }
.footer-brand p { max-width: 30ch; font-size: .94rem; line-height: 1.6; color: var(--text-2); }

.footer-title { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font: 650 .95rem/1.2 var(--f-body); letter-spacing: -.01em; color: var(--text); }
.ft-ic { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--accent-soft); color: var(--link); }
.ft-ic svg { width: 16px; height: 16px; }
.ft-ic.wa { background: rgba(37, 211, 102, .13); }
.ft-ic.wa img { width: 18px; height: 18px; }

.footer-links { gap: 2px; }
.footer-links a {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 0;
  font-size: .93rem; color: var(--text-2); background: none;
  transition: color .2s ease, transform .25s var(--ease);
}
.footer-links a svg { width: 15px; height: 15px; flex: none; color: var(--text-3); transition: color .2s ease; }
.footer-links a:hover { color: var(--text); background: none; transform: translateX(3px); }
.footer-links a:hover svg { color: var(--link); }

.social { gap: 10px; }
.social a { width: 44px; height: 44px; border-radius: 50%; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.social a img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.social .s-facebook { background: #0866FF; box-shadow: 0 8px 18px -8px rgba(8, 102, 255, .75); }
.social .s-x { background: #0F1419; box-shadow: 0 8px 18px -8px rgba(15, 20, 25, .6); }
.social .s-linkedin { background: #0A66C2; box-shadow: 0 8px 18px -8px rgba(10, 102, 194, .75); }
.social .s-youtube { background: #FF0000; box-shadow: 0 8px 18px -8px rgba(255, 0, 0, .6); }
.social a:hover { transform: translateY(-3px); }
.social a:active { transform: scale(.94); }
:root[data-theme="dark"] .social .s-x { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2); }

.footer-talk {
  padding: 22px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(234, 88, 12, .075), rgba(234, 88, 12, .015) 62%), var(--bg);
  box-shadow: 0 0 0 1px var(--ring);
}
.footer-talk > p { margin: -4px 0 14px; font-size: .92rem; color: var(--text-2); }
.talk-form {
  display: flex; align-items: center; height: 52px; padding: 5px 5px 5px 18px; border-radius: 999px;
  background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--sh-1); transition: box-shadow .2s ease;
}
.talk-form:focus-within { box-shadow: 0 0 0 2px var(--accent), 0 0 0 6px var(--accent-soft); }
.talk-form input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font-size: 1rem; color: var(--text); }
.talk-form input::placeholder { color: var(--placeholder); }
.talk-form button {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: var(--grad-btn); color: #fff; box-shadow: 0 8px 16px -8px rgba(194, 65, 12, .75);
  transition: transform .18s var(--ease), filter .2s ease;
}
.talk-form button svg { width: 17px; height: 17px; margin: 1px 1px 0 -1px; }
.talk-form button:hover { transform: scale(1.06); filter: brightness(1.06); }
.talk-form button:active { transform: scale(.94); }
.talk-reach { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.talk-reach li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; color: var(--text-2); }
.talk-reach svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--link); }
.talk-reach a { font-weight: 600; color: var(--text); transition: color .2s ease; }
.talk-reach a:hover { color: var(--link); }

.footer-bottom { margin-top: 40px; padding-top: 20px; font-size: .86rem; }
.to-top {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border-radius: 999px;
  font-weight: 600; color: var(--text-2); box-shadow: inset 0 0 0 1px var(--line);
  transition: color .2s ease, background-color .2s ease;
}
.to-top svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.to-top:hover { color: var(--text); background: var(--hover); }
.to-top:hover svg { transform: translateY(-2px); }

@media (max-width: 1200px) {
  .footer-grid { grid-template-columns: 1.2fr 1fr 1fr 1.1fr; }
  .footer-talk { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; }
  .footer-talk > .footer-title, .footer-talk > p, .footer-talk > .talk-form { grid-column: 1; }
  .footer-talk > .talk-reach { grid-column: 2; grid-row: 1 / 4; margin: 0; padding: 0 0 0 40px; border-top: 0; border-left: 1px solid var(--line); align-content: center; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .footer-talk { display: block; }
  .footer-talk > .talk-reach { margin-top: 18px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .footer-links a { padding: 10px 0; }
}
@media (max-width: 560px) {
  .footer-card { padding: 28px 20px 20px; border-radius: 22px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; }
  .footer-talk { grid-column: 1 / -1; padding: 18px; }
  .footer-grid > .footer-col:nth-child(4) { grid-column: 1 / -1; }   /* Help: its own row, no half-empty pair */
}
@media (hover: none) { .footer-links a:hover, .social a:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .footer-links a:hover, .social a:hover, .to-top:hover svg { transform: none; } }

/* =========================================================
   Premium header (user request 2026-11-07: "too stale, no animation, no highlights")
   - The bar is clear at the top of a page; once you scroll it lifts into a floating frosted
     capsule (a pseudo-element, so the bar itself has no backdrop-filter and the phone menu
     stays a true full-screen layer).
   - One highlight pill glides between nav links on hover or keyboard focus (site.js); the
     current page keeps an orange dot under its link.
   - A 2px orange line inside the capsule shows how far down the page you are.
   - "Get a quote" is the orange primary pill with its arrow nudge and sweep.
   - The Sign in menu grows out of its button with a short blur; its items follow 40 ms apart.
   - Phones: the menu icon morphs into an X and the menu items rise in one after another.
   Reduced motion: the glides and morphs become instant, the highlights and colours remain.
   ========================================================= */
.site-header {
  --cap-x: max(8px, calc((100% - min(100% - 2 * var(--gutter), var(--wrap-max))) / 2 - 22px));
  background: transparent !important; border-bottom: 0; box-shadow: none;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.site-header::before {
  content: ""; position: absolute; z-index: -1; top: 8px; bottom: 8px; left: var(--cap-x); right: var(--cap-x);
  border-radius: 999px; pointer-events: none;
  background: var(--glass-header);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
  box-shadow: 0 0 0 1px var(--ring), 0 1px 2px rgba(15, 23, 42, .04), 0 14px 34px -16px rgba(15, 23, 42, .28);
  opacity: 0; transform: translateY(-6px) scale(.985);
  transition: opacity .35s var(--ease), transform .55s var(--ease-out);
}
.site-header.is-scrolled::before { opacity: 1; transform: none; }
:root[data-theme="dark"] .site-header::before { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(0, 0, 0, .8); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .site-header::before { background: var(--card); } }
@media (prefers-reduced-transparency: reduce) { .site-header::before { background: var(--card); -webkit-backdrop-filter: none; backdrop-filter: none; } }
:root[data-fx="lite"] .site-header::before, :root[data-fx="off"] .site-header::before { background: var(--card); }

.hdr-progress {
  position: absolute; left: calc(var(--cap-x) + 28px); right: calc(var(--cap-x) + 28px); bottom: 8px; height: 2px;
  border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left center;
  opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.site-header.is-scrolled .hdr-progress { opacity: .9; }

/* nav: gliding highlight pill + current-page dot (desktop bar only: on phones .nav is the fixed full-screen menu) */
@media (min-width: 961px) { .nav { position: relative; } }
.nav-pill {
  position: absolute; left: 0; top: 50%; height: 38px; width: 0; z-index: -1; border-radius: 999px; pointer-events: none;
  background: rgba(15, 23, 42, .06); opacity: 0;
  transform: translate(0, -50%);
  transition: transform .42s var(--ease-out), width .42s var(--ease-out), opacity .2s ease;
}
.nav-pill.is-on { opacity: 1; }
:root[data-theme="dark"] .nav-pill { background: rgba(255, 255, 255, .08); }
.nav > a { position: relative; z-index: 0; color: var(--text-2); transition: color .2s ease; }
.nav > a:hover, .nav > a:focus-visible { background: transparent; color: var(--text); }
.nav > a[aria-current="page"] { background: transparent; color: var(--text); }
.nav > a::after {
  display: block; content: ""; position: absolute; left: 50%; right: auto; bottom: 1px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--accent); transform: translateX(-50%) scale(0);
  transition: transform .35s var(--ease-out);
}
.nav > a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }

/* call to action: the orange pill */
.site-header .btn-quote { background: var(--grad-btn); color: #fff; padding: 0 16px 0 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 10px 22px -12px rgba(194, 65, 12, .75); }
.site-header .btn-quote:hover { filter: brightness(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 14px 28px -12px rgba(194, 65, 12, .8); }
.site-header .btn-quote::after { display: block; }
.site-header .btn-quote .arr { width: 16px; height: 16px; }

/* Sign in menu: grows from its button, a short blur clears, items follow */
.signin-menu { filter: blur(4px); transition: opacity .14s ease, transform .14s var(--ease), filter .14s ease, visibility .14s; }
.signin.is-open .signin-menu { filter: none; transition: opacity .22s ease, transform .32s var(--ease-out), filter .22s ease, visibility 0s; }
@keyframes menu-item-in { from { opacity: 0; transform: translateY(6px); } }
.signin.is-open .signin-menu a { animation: menu-item-in .35s var(--ease-out) backwards; }
.signin.is-open .signin-menu a:nth-child(2) { animation-delay: .04s; }

/* phones: menu icon morphs into an X, the menu items rise in order */
.burger { position: relative; display: block; width: 18px; height: 14px; }
.burger i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--ease-out), opacity .2s ease; }
.burger i:nth-child(1) { top: 0; }
.burger i:nth-child(2) { top: 6px; }
.burger i:nth-child(3) { top: 12px; }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.nav-toggle[aria-expanded="true"] .burger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (max-width: 960px) {
  .nav-pill, .nav > a::after { display: none; }
  .nav.is-open > a, .nav.is-open .nav-mobile-extra { animation: ld-rise .55s var(--ease-out) backwards; }
  .nav.is-open > a:nth-of-type(1) { animation-delay: .05s; }
  .nav.is-open > a:nth-of-type(2) { animation-delay: .09s; }
  .nav.is-open > a:nth-of-type(3) { animation-delay: .13s; }
  .nav.is-open > a:nth-of-type(4) { animation-delay: .17s; }
  .nav.is-open > a:nth-of-type(5) { animation-delay: .21s; }
  .nav.is-open > a:nth-of-type(6) { animation-delay: .25s; }
  .nav.is-open .nav-mobile-extra { animation-delay: .3s; }
  .nav-open .site-header::before { opacity: 0; }
  .nav-open .hdr-progress { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nav.is-open > a, .nav.is-open .nav-mobile-extra { animation-name: ld-fade !important; animation-duration: .35s !important; }
}
@media print { .site-header::before, .hdr-progress { display: none; } }
.nav > a::after { transform-origin: 50% 50%; }
.nav > a:hover:not([aria-current="page"])::after { transform: translateX(-50%) scale(0); }   /* the pill marks hover; the dot marks the current page */
/* phone menu links: big display type again (the soft theme's .92rem desktop size had leaked into the menu) */
@media (max-width: 960px) {
  .nav > a { padding: 16px 4px; border-radius: 0; border-bottom: 1px solid var(--line);
    font: 650 1.75rem/1.15 var(--f-display); font-stretch: 100%; letter-spacing: -.03em; color: var(--text); }
  .nav > a:hover { color: var(--link); }
  .nav > a[aria-current="page"] { color: var(--link); }
}

/* ---------- page switch: a still header (user request 2026-11-07, "polish it") ----------
   The bar no longer cross-fades between pages. The capsule is held through the switch when the
   old page had it (head script adds .cap-hold) and relaxes once the new page is in; the hover
   pill is cleared before the snapshot (site.js pageswap). Two pieces travel on their own: the
   orange current-page dot slides from the old link to the new one, and the progress line
   rewinds to the start. With reduce motion they are part of the header's short cross-fade. */
.nav > a[aria-current="page"]::after { content: none; }
.nav-dot {
  position: absolute; left: 50%; bottom: 1px; width: 5px; height: 5px; margin-left: -2.5px;
  border-radius: 50%; background: var(--accent); pointer-events: none;
  view-transition-name: nav-dot;
}
@media (max-width: 960px) { .nav-dot { display: none; } }
.hdr-progress { view-transition-name: hdr-progress; }
::view-transition-group(nav-dot) { animation-duration: .55s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }   /* a visible glide, not a jump */
::view-transition-group(hdr-progress) { animation-duration: .5s; animation-timing-function: cubic-bezier(.65, 0, .25, 1); }
::view-transition-group(site-header) { animation-duration: .45s; }
.cap-hold .site-header::before { opacity: 1; transform: none; transition: none; }
.cap-hold .hdr-progress { opacity: .9; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .nav-dot, .hdr-progress { view-transition-name: none; }
}
/* reduce motion: a plain cross-fade between pages. ("animation: none" on the root pair left the old
   and new page drawn on top of each other for the length of the header's fade, which washed the
   screen out to white.) Opacity only, no movement. */
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fade-out .18s ease both; }
  ::view-transition-new(root) { animation: vt-fade-in .32s ease both; }
}

/* =========================================================
   Polish details (audit 2026-11-07 against "Details that make interfaces feel better",
   Interfaces magazine issue 8, Jakub Krehel). Already in place before the audit: balanced
   headings and pretty paragraphs, antialiased text, tabular numbers in tables, transitions for
   interactions, split and staggered entrances, shadows on cards. Added here: the rest.
   ========================================================= */
/* crisp text on Firefox for macOS as well */
body { -moz-osx-font-smoothing: grayscale; }
.steps .n, .award .year { font-variant-numeric: tabular-nums; }

/* concentric radii: outer radius = inner radius + padding */
.site-header { --cap-r: max(4px, calc((100% - min(100% - 2 * var(--gutter), var(--wrap-max))) / 2 - 8px)); }
.site-header::before { right: var(--cap-r); }          /* the 40px quote pill sits 8px in: 20 + 8 = the capsule's 28 */
.hdr-progress { right: calc(var(--cap-r) + 28px); }
.signin-menu { border-radius: 26px; padding: 8px; }    /* 18 + 8 */
.signin-menu a { border-radius: 18px; padding: 10px; } /* 8 + 10 */
.signin-menu .chip-icon { border-radius: 8px; }

/* icons that swap animate in place: opacity, scale and a little blur */
.media-toggle[aria-pressed] .i-play, .media-toggle[aria-pressed] .i-pause {
  display: block; position: absolute;
  transition: opacity .2s var(--ease), transform .25s var(--ease), filter .2s var(--ease);
}
.media-toggle[aria-pressed="false"] .i-play, .media-toggle[aria-pressed="true"] .i-pause { opacity: 0; transform: scale(.4); filter: blur(3px); }
.media-toggle[aria-pressed="false"] .i-pause, .media-toggle[aria-pressed="true"] .i-play { opacity: 1; transform: none; filter: none; }
.car-btn { transition: color .2s ease, background-color .2s ease, opacity .2s ease, transform .18s var(--ease); }

/* subtle exits: the toast fades and drops a few pixels instead of sliding all the way off */
.toast { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); filter: blur(4px);
  transition: opacity .18s ease, transform .2s ease, filter .18s ease; }
.toast.is-on { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); filter: none;
  transition: opacity .25s ease, transform .45s var(--ease-out), filter .25s ease; }

/* optical alignment: 4px less padding on the side that holds an icon */
.btn:has(> :is(.arr, .chev):last-child) { padding-right: 20px; }
.btn:has(> :is(img, svg:not(.arr):not(.chev)):first-child) { padding-left: 20px; }
.btn-sm:has(> :is(.arr, .chev):last-child) { padding-right: 14px; }
.btn-sm:has(> :is(img, svg:not(.arr):not(.chev)):first-child) { padding-left: 14px; }

/* shadows instead of borders: the jump pills on Products */
.jump a { border: 0; padding: 9px 15px; box-shadow: 0 0 0 1px var(--ring), var(--sh-1);
  transition: box-shadow .2s ease, color .2s ease, background-color .2s ease, transform .18s var(--ease); }
.jump a:hover { box-shadow: 0 0 0 1px var(--line-2), var(--sh-2); }

/* a 10% outline on photos and video thumbnails, drawn inside the frame so the hover zoom never moves it */
.ph::after, .yt::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); }
:root[data-theme="dark"] .ph::after, :root[data-theme="dark"] .yt::after, .dark .ph::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.card .ph::after, .ph.cutout::after { content: none; }

/* ---------- new site and panel photos (2026-11-07) ----------
   The carousel's landscape frames are 3:2, the shape of the new site photos (older 4:3 shots
   lose a little top and bottom). Panel cut-outs stand in the lit product tile (.ph.cutout);
   the wide PLC rail gets tighter side padding. */
.car-slide.land { width: min(calc(var(--slide-h) * 3 / 2), 86%); }
@media (max-width: 760px) { .car-track { --slide-h: 260px; } }
@media (max-width: 560px) { .car-track { --slide-h: 230px; } }
.ph.cutout.wide > img { padding: 9% 7%; }
.bento .ph.cutout > img, .panel-photos .ph.cutout > img { padding: 7% 12% 9%; }
.bento .ph.cutout.wide > img { padding: 10% 8%; }
.bento .ph.b1.cutout > img { padding: 6% 9% 7%; }   /* the tall operator panel fills its tall tile */

/* carousel settling (2026-11-07, "it jumps when I let go"): mouse and trackpad never use the
   browser's quick snap; site.js eases the strip into place on a spring instead. Touch keeps the
   phone's own swipe and snap. With reduced motion nothing snaps: the strip stays where it is left. */
@media (hover: hover) and (pointer: fine) { .car-track { scroll-snap-type: none; } }
@media (prefers-reduced-motion: reduce) { .car-track { scroll-snap-type: none; } }
:root[data-fx="off"] .car-track { scroll-snap-type: none; }

/* ---------- carousel depth (user request 2026-11-07, "make it feel 3D") ----------
   The strip runs edge to edge and rests with a photo on the centre line (site.js pads both ends so
   the first and last photo can reach it). The centre photo is full size with a deeper shadow; the
   others ease down to 88% and fade back slightly under a veil of the section colour. No tilt.
   The track's extra top and bottom padding (taken back with negative margins) keeps the deeper
   shadow from being cut off by the scroller. */
.car-track {
  margin: -24px calc(50% - 50vw) -40px; padding-top: 24px; padding-bottom: 40px;
  border-radius: 0; scroll-padding-inline: 0;
}
.car-slide { position: relative; scroll-snap-align: center; transform-origin: 50% 50%; will-change: transform; }
.car-slide::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-3); pointer-events: none;
  background: var(--bg-2); opacity: var(--veil, 0);
}
.car-slide > .ph { transition: box-shadow .45s var(--ease); }
.car-slide.is-center > .ph { box-shadow: 0 0 0 1px var(--ring), 0 34px 64px -30px rgba(15, 23, 42, .5); }
:root[data-theme="dark"] .car-slide.is-center > .ph { box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 34px 64px -30px rgba(0, 0, 0, .9); }
.car-track:focus-visible { outline-offset: -4px; }
:root[data-fx="off"] .car-slide::after { display: none; }
/* photo widths follow the screen, not the strip's inner width (the centring padding would shrink them) */
.car-slide.land { width: min(calc(var(--slide-h) * 3 / 2), 86vw); }
.car-slide.port { width: min(calc(var(--slide-h) * 3 / 4), 64vw); }

/* ---------- page switch without a double image (animation audit 2026-11-09) ----------
   The old page used to fade out on a slow-start curve (--ease-exit) while the new page was
   already fading in, so for about 60-180 ms both pages showed at over 50%, 11 px apart. Now the
   old page clears in 0.14 s on the strong ease-out and the new page starts 30 ms later (it keeps
   its 0.62 s rise): the worst overlap drops from 0.74 to 0.14. Reduce motion: the same timing
   as an opacity-only fade. The view-transition backdrop takes the page colour, so the brief
   moment when both pages are faint never shows white in dark mode. */
::view-transition { background-color: var(--bg); }
::view-transition-old(root) { animation: vt-out .14s var(--ease) both; }
::view-transition-new(root) { animation: vt-in .62s var(--ease-out) .03s both; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation: vt-fade-out .14s var(--ease) both; }
  ::view-transition-new(root) { animation: vt-fade-in .3s var(--ease) .03s both; }
}

/* ---------- touch screens: hover never sticks, presses always show (animation audit 2026-11-09) ----------
   A tap leaves :hover on, and while the finger is down :hover and :active are both on. The hover
   lifts written after the first touch reset are cancelled here, and every press is stated again
   after all the resets so it wins over them (the resets had been switching presses off on phones).
   Reduced motion still removes all of it: its rules use !important. */
@media (hover: none) {
  a.card:hover, .card-link:hover, .talk-form button:hover, .yt:hover .play, .dl:hover .go, .to-top:hover svg { transform: none; }
  .talk-form button:hover { filter: none; }
  .btn:active { transform: scale(.97); }
  .icon-btn:active { transform: scale(.94); }
  a.card:active, .card-link:active { transform: scale(.99); }
  .wa-float:active { transform: scale(.96); }
  .social a:active { transform: scale(.94); }
  .talk-form button:active { transform: scale(.94); }
  .yt:active .play { transform: scale(.96); }
}

/* ---------- light/dark switch: one even cross-fade (animation audit 2026-11-09) ----------
   site.js wraps the theme change in a same-document view transition and sets .theme-vt on <html>
   while it runs. The whole page, header included, cross-fades in 250 ms; old and new use the
   same curve, so the blend never dips or washes out. CSS transitions are off during the switch
   so every colour changes in that one fade (the sun/moon icon keeps its own morph). Higher
   specificity than the page-switch rules, so it also applies under reduced motion (opacity only). */
html.theme-vt::view-transition-group(*) { animation-duration: .25s; animation-timing-function: ease; }
html.theme-vt::view-transition-old(root) { animation: vt-fade-out .25s ease both; }
html.theme-vt::view-transition-new(root) { animation: vt-fade-in .25s ease both; }
html.theme-vt *, html.theme-vt *::before, html.theme-vt *::after { transition: none !important; }
html.theme-vt .theme-toggle svg { transition: opacity .18s var(--ease), transform .18s var(--ease), filter .18s var(--ease) !important; }

/* ---------- form messages ease in (animation audit 2026-11-09) ----------
   A field's error line used to pop in; it now fades in and settles 4 px in 0.18 s, the same
   @starting-style pattern as the "sent" panel. The fields below still move down at once
   (animating height would cost a layout every frame). Reduce motion keeps only the fade. */
.field-error { transition: opacity .18s var(--ease), translate .18s var(--ease); }
@starting-style { .field-error { opacity: 0; translate: 0 -4px; } }

/* ---------- layout pass (impeccable layout, 2026-11-09) ----------
   One screen per section stays (DESIGN.md Layout), but the screen now frames its content: a short
   section centres its content in the space below the header instead of pinning it to the top and
   leaving a band of empty background underneath (up to ~360px at 1440x900 and ~470px at
   1920x1080 before). Every .sec holds a single .wrap, so this only moves it down. The top padding
   still clears the header, so anchor links land the same way. Taller content is unaffected. */
@media (min-width: 1200px) and (min-height: 700px) {
  .sec { display: flex; flex-direction: column; justify-content: center; }
}
/* closing card: the copy and the contact list both hang from the divider line (bottom-aligned,
   the copy floated under a ~90px hole while the contacts started right under the line) */
.close-row { align-items: start; }

/* ---------- About: the founding belief (impeccable bolder + animate, 2026-11-09) ----------
   Bolder: the company's motto was a 2rem line at the foot of the story column, weaker than the
   heading above it. It is now its own screen on the night ground of the home "DO IT RIGHT."
   moment, centred like it: display type at full strength (up to the 6rem cap), the motto's key phrase in the night orange, and the
   caption between the same curly brackets. Nothing new: ground, face, colour and brackets all
   come from that moment.
   Animate: the line assembles so its timing says what it says. "faster rat" lands first and
   fast (0.5 s, strong ease-out), the plain words rise at the site's word-rise pace (60 ms apart),
   and "slower cat." drifts in last and slowly (1.3 s, gentle curve); the caption follows. Once,
   when a third of the quote is on screen; site.js arms it only when it starts below the fold,
   so the words are visible by default. Reduced motion: the same order as plain fades. */
.belief { color: var(--text); }
.belief-fig { margin: 0 auto; max-width: 1180px; display: grid; justify-items: center; text-align: center; }
.belief-quote { margin: 0; }
.belief-quote p {
  font: 680 clamp(2.6rem, 1rem + 5vw, 6rem)/1.02 var(--f-display); font-stretch: 100%;
  letter-spacing: -.04em; max-width: 16ch; margin-inline: auto; text-wrap: balance; color: var(--text);
}
.belief-quote em { white-space: nowrap; }   /* the motto's key phrase never breaks across lines */
.belief-quote em { font-style: normal; color: var(--accent); }
.belief-fig .moment-sub { margin-top: clamp(28px, 4.5vh, 48px); color: var(--text-2); max-width: 46ch; }
.belief-fig .moment-sub .bracket { height: clamp(44px, 4vw, 60px); color: var(--text); }

.belief-fig.is-armed .wi { transform: translateY(108%); }
.belief-fig.is-armed .moment-sub { opacity: 0; transform: translateY(10px); }
.belief-fig.is-in .wi { transform: none; transition: transform 1s var(--ease-word) calc(260ms + var(--i, 0) * 60ms); }
.belief-fig.is-in .fast .wi { transition: transform .5s var(--ease) calc(var(--o) * 70ms); }
.belief-fig.is-in .slow .wi { transition: transform 1.3s var(--ease-soft) calc(1000ms + var(--o) * 220ms); }
.belief-fig.is-in .moment-sub { opacity: 1; transform: none; transition: opacity .8s var(--ease-soft) 1.7s, transform .9s var(--ease-out) 1.7s; }
@media (prefers-reduced-motion: reduce) {
  .belief-fig.is-armed .wi { transform: none; opacity: 0; }
  .belief-fig.is-armed .moment-sub { transform: none; }
  .belief-fig.is-in .wi { opacity: 1; transition: opacity .7s ease calc(260ms + var(--i, 0) * 60ms) !important; }
  .belief-fig.is-in .fast .wi { transition: opacity .3s ease calc(var(--o) * 70ms) !important; }
  .belief-fig.is-in .slow .wi { transition: opacity 1.2s ease calc(1000ms + var(--o) * 220ms) !important; }
  .belief-fig.is-in .moment-sub { transition: opacity .8s ease 1.6s !important; }
}
@media print { .belief-fig .wi, .belief-fig .moment-sub { transform: none !important; opacity: 1 !important; } }

/* ---------- video facade: no black gap while YouTube starts (impeccable animate, 2026-11-09) ----------
   On click the thumbnail stays where it is and its play button turns into a loading ring; once the
   player has loaded it fades in over the thumbnail (0.35 s), which is then removed. Reduced motion:
   the ring holds still and the player fades in quickly. */
.yt > iframe { position: absolute; inset: 0; transition: opacity .35s var(--ease); }
.yt.is-loading > iframe { opacity: 0; }
.yt.is-loading .play { transform: none; }
.yt.is-loading .play svg { opacity: 0; transition: opacity .15s ease; }
.yt.is-loading .play::after {
  content: ""; position: absolute; inset: 22px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .3); border-top-color: #fff;
  animation: yt-spin .8s linear infinite;
}
@keyframes yt-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .yt.is-loading .play::after { animation: none; border-color: rgba(255, 255, 255, .55); } }

/* ---------- type roles (impeccable typeset, 2026-11-09) ----------
   Titles inside cards and lists had drifted to seven sizes between 18.4 and 24.8px, three weights
   and two line-heights for what are two jobs. Now there are two roles, both in the display face:
   card title (1.5rem, 650, 1.2): edition cards, service cards, product cards, the Factura card;
   item title (1.25rem, 650, 1.2): steps, portal heads, support methods.
   The 404 heading had fallen back to the global h1 (81px, larger than the home hero's 72px); it
   now uses the inner-page hero size. Long card descriptions keep a readable measure (68ch). */
:root { --t-card: 1.5rem; --t-item: 1.25rem; }
.edition h3, .svc h2, .card-body h3 { font-size: var(--t-card); font-weight: 650; line-height: 1.2; letter-spacing: -.018em; }
.portal-head h3, .steps h3, .method h2, .method h3, .methods.rows .method h2 {
  font-size: var(--t-item); font-weight: 650; line-height: 1.2; letter-spacing: -.016em; }
.page-hero .split-copy h1 { font-size: clamp(2.3rem, 1.3rem + 2.6vw, 3.8rem); }
.card-body p { max-width: 68ch; }

/* ---------- state colours (impeccable colorize, 2026-11-09) ----------
   Orange stays the one brand accent and keeps its fields. What was missing were the state roles:
   only "error" existed (#B42318). Added, each with a soft tint, light and dark:
   - stop (= the error red): a plant that is stopped;
   - warn (ochre, kept clear of the brand orange): a plant running with a problem;
   - ok (green): something done, here the "Opening WhatsApp" confirmation.
   Used only where a state needs reading: the Support form's "Plant status" choice colours the
   chosen chip (the label still says it, so colour is never the only cue), and a sent form shows a
   green tick above its confirmation. */
:root { --stop: #B42318; --stop-soft: rgba(180, 35, 24, .08); --warn: #A16207; --warn-soft: rgba(202, 138, 4, .12);
  --ok: #15803D; --ok-soft: rgba(22, 163, 74, .12); }
:root[data-theme="dark"], .dark { --stop: #FF8A7A; --stop-soft: rgba(255, 138, 122, .12); --warn: #FACC15; --warn-soft: rgba(250, 204, 21, .12);
  --ok: #4ADE80; --ok-soft: rgba(74, 222, 128, .12); }
.radios label:has(input:checked) { font-weight: 600; }
.radios label:has(input[value="Stopped"]:checked) { border-color: var(--stop); background: var(--stop-soft); box-shadow: inset 0 0 0 1px var(--stop); }
.radios label:has(input[value^="Running"]:checked) { border-color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn); }
.radios input[value="Stopped"] { accent-color: var(--stop); }
.radios input[value^="Running"] { accent-color: var(--warn); }
form.is-sent .form-done::before {
  content: ""; width: 44px; height: 44px; border-radius: 50%;
  background: var(--ok-soft) center / 22px no-repeat;
  -webkit-mask: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 35%, transparent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315803D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] form.is-sent .form-done::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ADE80' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E");
}

/* ---------- touch targets (impeccable adapt, 2026-11-09) ----------
   No page scrolls sideways from 320px to 2560px, phone landscape and tablets included. What fell
   short on phones was the 44px tap size DESIGN.md promises: the footer send button (42px), the
   footer phone and email links (21px tall), text links like "Watch the auto cycle" (28px), the
   Products jump pills (41px), "Back to top" (40px) and the small card buttons (40px). On touch
   screens (pointer: coarse) each now reaches 44px. Text links grow an invisible hit area (padding
   taken back by a negative margin, underline kept in place), so nothing moves visually.
   Long email addresses may wrap at 320px instead of touching the card edge. */
@media (pointer: coarse) {
  .btn-sm { --bh: 44px; }
  .jump a { min-height: 44px; display: inline-flex; align-items: center; }
  .to-top { min-height: 44px; }
  .talk-form { height: 54px; }
  .talk-form button { width: 44px; height: 44px; }
  .tlink { padding: 8px 0 10px; margin: -8px 0; background-position: 0 calc(100% - 8px); }
  .talk-reach a { padding-block: 11px; margin-block: -11px; }
  .methods.rows .method a { padding-block: 11px 13px; background-position: 0 calc(100% - 11px); }   /* Support: Call / Message support / email */
}
.reach a, .talk-reach a { overflow-wrap: anywhere; }

/* ---------- contact map: loads by itself only where it is cheap (impeccable optimize, 2026-11-09) ----------
   The Google map pulled ~500 KB of scripts and ~28 requests into the Contact page, 56% of its weight
   on a phone, where it sits below the form. Like the hero video it now loads by itself only on wide
   screens with a normal connection (site.js); phones, Save-Data and slow networks see the address,
   a "Show the map" button and an "Open in Google Maps" link (which works without JavaScript).
   The map fades in over the address card. */
.map { position: relative; display: grid; }
.map-facade { display: grid; place-content: center; justify-items: center; gap: 16px; min-height: 360px; padding: 32px 24px; text-align: center; }
.map-facade p { color: var(--text-2); line-height: 1.5; }
.map-facade strong { color: var(--text); font-weight: 650; }
.map-pin { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--accent-soft); color: var(--link); }
.map-pin svg { width: 24px; height: 24px; }
.map-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 20px; }
.map > iframe { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; opacity: 0; transition: opacity .35s var(--ease); }
.map.is-ready > iframe { opacity: 1; }
form.is-sent .form-done.is-blocked::before { content: none; }   /* "WhatsApp didn't open" is not a success */

/* ---------- panel polish (emil-design-eng, 2026-11-09) ----------
   1. Press feedback where it was missing: the Products jump pills, Back to top and the Support
      status chips press to 0.97, the Sign in menu items to 0.99 (full-width rows press less).
      100 ms in, back on the element's own 160 ms ease-out. Reduced motion: no scale, a brief dim.
   2. The Sign in menu is a dropdown, so it opens inside the 150-250 ms dropdown budget (it took
      320 ms, its items 350 ms); the phone menu icon morphs in 260 ms instead of 350 ms.
   3. A sent form's green tick pops in (from 60%, a gentle overshoot, 0.5 s): a rare, good moment.
   4. "Edit details" brings the form back with a short fade instead of a jump.
   (The carousel's rubber-band ends live in site.js.) */
.to-top { transition: color .2s ease, background-color .2s ease, transform .16s var(--ease); }
.radios label { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .16s var(--ease); }
.signin-menu a { transition: background-color .2s ease, transform .16s var(--ease); }
.jump a:active, .to-top:active, .radios label:active { transform: scale(.97); transition-duration: .1s; }
.signin-menu a:active { transform: scale(.99); transition-duration: .1s; }

.signin.is-open .signin-menu { transition: opacity .18s ease, transform .22s var(--ease-out), filter .18s ease, visibility 0s; }
.signin.is-open .signin-menu a { animation-duration: .24s; }
.signin.is-open .signin-menu a:nth-child(2) { animation-delay: .03s; }
.burger i { transition: transform .26s var(--ease-out), opacity .16s ease; }

form.is-sent .form-done::before { transition: transform .5s cubic-bezier(.34, 1.36, .64, 1) .12s, opacity .2s var(--ease) .12s; }
@starting-style { form.is-sent .form-done::before { transform: scale(.6); opacity: 0; } }

@keyframes form-back { from { opacity: 0; transform: translateY(6px); } }
form.is-back > :not(.form-done) { animation: form-back .26s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  .jump a:active, .to-top:active, .radios label:active, .signin-menu a:active { transform: none !important; opacity: .78; }
  form.is-sent .form-done::before { transition: opacity .2s ease .1s !important; }
  form.is-back > :not(.form-done) { animation: ld-fade .2s ease both !important; }
}
@media (hover: none) {
  .jump a:active, .to-top:active, .radios label:active { transform: scale(.97); }
}

/* ---------- Apple fluid-interface pass (apple-design, 2026-11-09) ----------
   (The carousel parts, grab-mid-spring and the soft wheel end, live in site.js.)

   1. Increase contrast (the "Increase contrast" setting on macOS, iOS and Android:
      prefers-contrast: more). Secondary text darkens, rings and lines become
      defined edges, the frosted header turns solid with a border, text links keep their underline,
      and text over the hero video loses its transparency. Light and dark. */
@media (prefers-contrast: more) {
  :root { --text-2: #1E293B; --text-3: #334155; --placeholder: #475569;
    --ring: rgba(15, 23, 42, .42); --line: rgba(15, 23, 42, .28); --line-2: rgba(15, 23, 42, .5);
    --glass: #FFFFFF; --glass-header: #FFFFFF; }
  :root[data-theme="dark"], .dark { --text-2: #E2E8F0; --text-3: #CBD5E1; --placeholder: #B4BFCE;
    --ring: rgba(255, 255, 255, .38); --line: rgba(255, 255, 255, .28); --line-2: rgba(255, 255, 255, .5);
    --glass: #151A23; --glass-header: #0B0D11; }
  .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none;
    box-shadow: 0 0 0 1.5px var(--line-2), 0 14px 34px -16px rgba(15, 23, 42, .28); }
  .tlink { background-size: 100% 1.5px; }
  .hero .hero-sub, .trust { color: #fff; }
  .hero-shade { background: linear-gradient(90deg, rgba(8, 10, 14, .9) 0%, rgba(8, 10, 14, .75) 45%, rgba(8, 10, 14, .35) 100%); }
  .trust { background: rgba(8, 10, 14, .7); }
}

/* 2. Size-specific tracking. The body's -0.011em is right for 16px Inter, but letter-spacing inherits
      as a fixed length, so every smaller text (labels, captions, footer links, meta lines) was drawn
      tighter than the body, the opposite of what small text needs. These roles now take Inter's own
      tracking for their size: about -0.006em at 14-15px and -0.003em at 13-14px. :where() keeps the
      rules at zero specificity, so any role that sets its own tracking still wins. */
:where(.field label, .radios label, .footer-links a, .footer-talk > p, .talk-reach li, .footer-brand p,
  .channels li, .form-foot p, .signin-menu small, .dl small, .reach small) { letter-spacing: -.006em; }
:where(small, .footer-bottom, .to-top, .edition-tag, p.for, .compare th small, .compare .grp th, .label) { letter-spacing: -.003em; }

/* 3. Text over moving video reads better a touch heavier and less tight (vibrancy): the hero line and
      the trust chip sit over the plant video. */
.hero .hero-sub { font-weight: 450; letter-spacing: -.008em; }
.trust { font-weight: 450; }