/* Home hero: full-screen photo, transparent header, light headline, trust bento.
   Layout follows the Ouaken reference: copy bottom-left, three cards bottom-right. */

/* ---------- Transparent header over the hero (home only) ---------- */
.has-overlay .header {
  position: fixed; inset: 0 0 auto; height: 84px;
  background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent;
}
.has-overlay .header .wrap { gap: var(--sp-32); }
.has-overlay .header .nav { margin-inline: auto; gap: var(--sp-6); }
.has-overlay .header:not(.scrolled) .brand img { filter: brightness(0) invert(1); height: 22px; }
.has-overlay .header:not(.scrolled) .nav-link { color: rgb(var(--c-white) / .86); background: transparent; font-size: var(--fs-sm); font-weight: var(--fw-book); }
.has-overlay .header:not(.scrolled) .nav-link:hover,
.has-overlay .header:not(.scrolled) .nav-item:focus-within > .nav-link { color: var(--white); background: rgb(var(--c-white) / .1); }
.has-overlay .header:not(.scrolled) .icon-btn { background: rgb(var(--c-white) / .07); border-color: rgb(var(--c-white) / .35); color: var(--white); }
.has-overlay .header:not(.scrolled) .icon-btn:hover { border-color: var(--white); }
.has-overlay .header .btn-quote-cta { --bh: 44px; padding: 0 var(--sp-20); font-weight: var(--fw-medium); }
.has-overlay .header:not(.scrolled) .btn-quote-cta {
  background: rgb(var(--c-white) / .07); color: var(--white); border: 1px solid rgb(var(--c-white) / .45);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: none;
}
.has-overlay .header:not(.scrolled) .btn-quote-cta:hover { background: rgb(var(--c-white) / .14); border-color: var(--white); }
/* Once scrolled past the top it becomes the normal frosted header */
.has-overlay .header.scrolled {
  height: var(--header-h);
  background: color-mix(in oklab, var(--bg) 84%, transparent);
  backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom-color: var(--line);
}
.has-overlay .header { transition: transform .5s var(--ease), height .4s var(--ease), background-color .4s, border-color .4s; }

/* ---------- Hero ---------- */
.xhero { position: relative; isolation: isolate; min-height: 100dvh; display: flex; align-items: flex-end; color: var(--white); overflow: hidden; }
.xhero-bg { position: absolute; inset: 0; z-index: -2; background: var(--sand-900); }
.xhero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.xhero::before {
  /* warm dim like the reference, darker at the bottom where the copy sits */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgb(var(--c-sand) / .75) 0%, rgb(var(--c-sand) / .28) 42%, rgb(var(--c-sand) / .1) 70%, rgb(var(--c-sand) / .45) 100%),
    linear-gradient(90deg, rgb(var(--c-sand) / .45) 0%, rgb(var(--c-sand) / 0) 55%),
    rgb(var(--c-sand) / .2);
}
.xhero-inner {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 360px); gap: var(--sp-48); align-items: end;
  padding-top: 140px; padding-bottom: clamp(36px, 5vh, 56px);
}

.xhero .xhero-title {
  margin: 0; font-size: var(--fs-display); font-weight: var(--fw-light); line-height: var(--lh-none); letter-spacing: var(--tracking-tighter);
  max-width: 15ch; color: var(--white); text-wrap: balance;
}
.xhero-sub { margin-top: var(--sp-20); max-width: 30rem; font-size: var(--fs-lead); line-height: var(--lh-normal); color: rgb(var(--c-white) / .86); }
.xhero-ctas { display: flex; align-items: center; gap: var(--sp-10); margin-top: var(--sp-28); }
.xbtn {
  display: inline-flex; align-items: center; height: 52px; padding: 0 var(--sp-28); border-radius: var(--radius-pill);
  background: var(--white); color: var(--sand-950); font-weight: var(--fw-strong); font-size: var(--fs-md); white-space: nowrap;
  transition: transform .4s var(--ease), background-color .25s, box-shadow .3s;
}
.xbtn:hover { background: var(--sand-50); box-shadow: 0 14px 30px -12px rgb(var(--c-black) / .45); }
.xcirc {
  width: 52px; height: 52px; border-radius: var(--radius-pill); display: grid; place-items: center; flex-shrink: 0;
  background: var(--white); color: var(--sand-950); font-size: var(--fs-xl); transition: transform .4s var(--ease), background-color .25s;
}
.xcirc:hover { background: var(--accent); color: var(--white); }
.xcirc i { transition: transform .4s var(--ease); }
.xcirc:hover i { transform: rotate(45deg); }

/* ---------- Trust bento ---------- */
.xbento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
.xcard {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--white); color: var(--sand-950);
  box-shadow: 0 18px 40px -18px rgb(var(--c-black) / .45);
}
.xcard-wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 120px; min-height: 172px; transition: transform .45s var(--ease); }
.xcard-wide:hover { transform: translateY(-3px); }
.xc-txt { padding: var(--sp-16) 0 var(--sp-16) var(--sp-16); display: flex; flex-direction: column; }
.xc-txt h2 { font-size: var(--fs-lg); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); max-width: 13ch; }
.xc-txt p { margin-top: var(--sp-6); font-size: var(--fs-2xs); line-height: var(--lh-heading); color: var(--sand-600); max-width: 22ch; }
.xc-act { display: flex; align-items: center; gap: var(--sp-6); margin-top: auto; padding-top: var(--sp-14); }
.xpill { white-space: nowrap; display: inline-flex; align-items: center; height: 30px; padding: 0 var(--sp-14); border-radius: var(--radius-pill); background: var(--sand-950); color: var(--white); font-size: var(--fs-2xs); font-weight: var(--fw-strong); }
.xmini { width: 30px; height: 30px; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--sand-50); font-size: var(--fs-sm); transition: background-color .25s, color .25s; }
.xcard-wide:hover .xmini { background: var(--accent); color: var(--white); }
.xc-img { align-self: center; width: 170px; max-width: none; margin-left: -34px; transform: rotate(-14deg); filter: drop-shadow(0 12px 12px rgb(var(--c-black) / .2)); transition: transform .6s var(--ease); }
.xcard-wide:hover .xc-img { transform: rotate(-6deg) scale(1.05); }

.xcard-map, .xcard-stat { min-height: 148px; padding: var(--sp-14); display: flex; flex-direction: column; justify-content: flex-end; }
.xc-map { position: absolute; inset: 10px 6px auto; width: calc(100% - 12px); opacity: .4; }
.xcard-map b, .xcard-stat b { position: relative; font-size: var(--fs-4xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tighter); line-height: var(--lh-none); }
.xcard-map span { position: relative; margin-top: var(--sp-6); font-size: var(--fs-3xs); color: var(--sand-500); }
.xcard-stat { justify-content: flex-start; }
.xcard-stat hr { width: 100%; border: 0; border-top: 1px solid var(--sand-200); margin: var(--sp-12) 0 auto; }
.xcard-stat .xc-label { margin-top: var(--sp-6); }
.xc-foot { display: flex; align-items: center; gap: var(--sp-8); margin-top: var(--sp-14); }
.xc-avatars { display: flex; }
.xc-avatars img { width: 32px; height: 32px; border-radius: var(--radius-pill); object-fit: contain; background: var(--white); border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--sand-200); padding: var(--sp-2); }
.xc-avatars img + img { margin-left: -9px; }
.xc-label { font-size: var(--fs-3xs); color: var(--sand-500); line-height: var(--lh-snug); white-space: nowrap; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .xhero-bg img { transform: scale(1.12) translate3d(0, var(--py, 0), 0); animation: xzoom 2.4s var(--ease) forwards; will-change: transform; }
  @keyframes xzoom { from { scale: 1.08; } to { scale: 1; } }
  .js .xhero .hero-copy > :not(.display) { transition-duration: 1.1s; }
  .js .xbento.stagger > * { transition-delay: calc(.55s + var(--i, 0) * 110ms); }
}

/* ---------- Responsive ---------- */
@media (max-width: 1140px) {
  .has-overlay .header .wrap { gap: var(--sp-12); }
}
@media (max-width: 960px) {
  .xhero-inner { grid-template-columns: 1fr; gap: var(--sp-32); padding-top: var(--sp-120); }
  .xbento { max-width: 420px; }
}
@media (max-width: 520px) {
  .has-overlay .header { height: 68px; }
  .xhero .xhero-title { font-size: var(--fs-6xl); }
  .xhero-inner { padding-top: var(--sp-120); padding-bottom: var(--sp-28); }
  .xbento { max-width: none; }
  .xcard-wide { grid-template-columns: 1fr 104px; }
  .xc-img { width: 130px; }
}

/* Keep the full nav on mid-width desktops (the reference shows it at ~1100px) */
@media (min-width: 1060px) and (max-width: 1140px) {
  .has-overlay .nav { display: flex; }
  .has-overlay .header .btn-quote-cta { display: inline-flex; }
  .has-overlay .menu-btn { display: none; }
  .has-overlay .nav-link { padding: 0 var(--sp-8); font-size: var(--fs-sm) !important; }
  .has-overlay .brand img { height: 18px !important; }
}

/* WhatsApp bubble waits until the visitor leaves the hero */
.wa-float { transition: transform .3s var(--ease), opacity .3s; }
.at-top .wa-float { opacity: 0; transform: scale(.8); pointer-events: none; }

@media (max-width: 1240px) and (min-width: 961px) {
  .xcard-wide { grid-template-columns: 1fr 96px; }
  .xc-img { width: 150px; margin-left: -40px; }
}

/* Container: about 92% of the viewport like the reference (4% side margins) */
.has-overlay .header .wrap, .xhero .wrap { max-width: none; padding-inline: var(--gutter-narrow); }
.xc-txt { position: relative; z-index: 1; }
@media (max-width: 1240px) and (min-width: 961px) {
  .xc-img { width: 132px; margin-left: -14px; }
}

/* ---------- Product rotator (wide trust card) ---------- */
.xprod { --dur: 3600ms; grid-template-columns: minmax(0, 1fr) auto; min-height: 184px; transition: none; }
.xprod:hover { transform: none; }
.xprod .xc-txt { padding: var(--sp-16) var(--sp-4) var(--sp-16) var(--sp-16); }
.xc-kicker { font-size: var(--fs-3xs); font-weight: var(--fw-medium); color: var(--sand-400); letter-spacing: var(--tracking-normal); }
.xp-text { display: grid; margin-top: var(--sp-2); }
.xp-item { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .5s var(--ease), transform .7s var(--ease), filter .5s; pointer-events: none; }
.xp-item.on { opacity: 1; transform: none; filter: none; transition-delay: .18s; pointer-events: auto; }
.xp-item.out { opacity: 0; transform: translateY(-8px); filter: blur(3px); transition-delay: 0s; }
.xp-item h2 { font-size: var(--fs-lg); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); max-width: 14ch; }
.xp-item p { margin-top: var(--sp-6); font-size: var(--fs-2xs); line-height: var(--lh-heading); color: var(--sand-600); max-width: 24ch; }
.xprod .xc-act { margin-top: auto; padding-top: var(--sp-12); }
.xprod .xc-act:hover .xmini { background: var(--accent); color: var(--white); }
.xprod .xc-act:hover .xpill { background: var(--sand-800); }

.xp-media { position: relative; align-self: stretch; aspect-ratio: 1; height: calc(100% - 20px); min-height: 150px; margin: var(--sp-10); border-radius: var(--radius-md); overflow: hidden; background: var(--sand-50); isolation: isolate; }
.xp-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; z-index: 0; opacity: 0; }
.xp-img.prev { opacity: 1; z-index: 1; transform: scale(1.04); transition: transform 1.2s var(--ease); }
.xp-img.on { opacity: 1; z-index: 2; clip-path: inset(0 0 0 0 round 12px); transform: scale(1); }
.xp-bars { position: absolute; z-index: 3; left: 8px; right: 8px; bottom: 8px; display: flex; gap: var(--sp-4); }
.xp-bars button { flex: 1; height: 14px; padding: var(--sp-4) 0; border: 0; background: none; cursor: pointer; }
.xp-bars button::before { content: ""; display: block; height: 3px; border-radius: var(--radius-xs); background: rgb(var(--c-white) / .45); }
.xp-bars button { position: relative; }
.xp-bars span { position: absolute; left: 0; top: 5px; height: 3px; width: 0; border-radius: var(--radius-xs); background: var(--white); }
.xp-bars button.done span { width: 100%; }
.xp-media::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgb(var(--c-black) / .35), transparent); }

@media (prefers-reduced-motion: no-preference) {
  .xp-img.on { animation: xpIn 1s var(--ease) both; }
  @keyframes xpIn { from { clip-path: inset(0 0 0 100% round 12px); transform: scale(1.18); } to { clip-path: inset(0 0 0 0 round 12px); transform: scale(1); } }
  .xprod[data-auto] .xp-bars button.on span { animation: xpFill var(--dur) linear forwards; }
  .xprod[data-auto]:hover .xp-bars button.on span { animation-play-state: paused; }
  @keyframes xpFill { to { width: 100%; } }
}
@media (prefers-reduced-motion: reduce) {
  .xp-bars button.on span { width: 100%; }
}
@media (max-width: 1240px) and (min-width: 961px) { .xp-media { min-height: 140px; } }
@media (max-width: 520px) { .xp-media { min-height: 132px; } }
.xp-media { align-self: center; height: auto; min-height: 0; width: clamp(128px, 10.4vw, 152px); }
.xmini { flex-shrink: 0; }
.xprod { min-height: 172px; }
@media (max-width: 1240px) and (min-width: 961px) { .xp-media { min-height: 0; width: 124px; } }
@media (max-width: 520px) { .xp-media { min-height: 0; width: 132px; } }

/* Secondary navy accents */
.review-tag { background: var(--secondary-soft); color: var(--secondary); }
.form-done i { color: var(--green-600); }
.ruled i, .feature i { color: var(--accent); }

/* ==========================================================================
   Home page design system, taken from the hero bento
   Corners: 16px outer cards and panels / 12px inner media and small boxes / pill for buttons and chips
   Elevation: the hero card shadow, softened for light sections
   Headings: lighter weight, echoing the hero headline
   ========================================================================== */
.page-home { --radius: 16px; --radius-sm: 12px; --card-shadow: 0 18px 40px -24px rgb(var(--c-ink) / .35); }
.page-home .ceo-photo, .page-home .ind-panel, .page-home .cta-panel, .page-home .review,
.page-home .tile, .page-home .hcard, .page-home .xcard { border-radius: var(--radius-lg); }
.page-home .logo-chip, .page-home .ind-tab, .page-home .hcard .hc-img, .page-home .cert .c-img,
.page-home .tile .cut, .page-home .xp-media { border-radius: var(--radius-md); }
.page-home .ind-panel .ip-img { border-radius: 0; }
.page-home .review-photo { border-radius: 0; }
.page-home .review, .page-home .ind-panel, .page-home .tile:hover, .page-home .hcard:hover { box-shadow: var(--card-shadow); }
.page-home .ind-tab[aria-selected="true"] { box-shadow: var(--card-shadow); }
@media (prefers-reduced-motion: no-preference) {
  .js .page-home .wipe { clip-path: inset(100% 0 0 0 round 16px); }
  .js .page-home .wipe.in { clip-path: inset(0 0 0 0 round 16px); }
}
.page-home .h2 { font-weight: var(--fw-regular); letter-spacing: var(--tracking-tighter); }
.page-home .tile h3, .page-home .hcard h3 { font-weight: var(--fw-strong); }
.page-home .ceo blockquote, .page-home .review blockquote { font-weight: var(--fw-regular); }
.page-home .num b { font-weight: var(--fw-regular); }

/* Home container: same ~92% width as the hero (4.1vw side margins) for every section, rails included */
.page-home { --wrap: 100%; --gutter: var(--gutter-narrow); }

/* ---------- Trusted partners (home) ---------- */
.trust { position: relative; isolation: isolate; padding-block: clamp(56px, 6vw, 88px); overflow: hidden;
  background: radial-gradient(900px 300px at 85% 0%, rgb(var(--c-accent) / .07), transparent 70%), radial-gradient(700px 300px at 0% 100%, rgb(var(--c-blue) / .07), transparent 70%), var(--bg); }
.trust::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgb(var(--c-ink) / .1) 1px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, var(--black) 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 70% 50%, var(--black) 20%, transparent 75%); }
.trust-grid { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.trust-tag { display: inline-flex; align-items: center; gap: var(--sp-8); padding: var(--sp-6) var(--sp-14); border-radius: var(--radius-pill); background: var(--secondary-soft); color: var(--secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.trust-tag i { font-size: var(--fs-base); }
.trust-title { margin-top: var(--sp-16); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 14ch; }
.trust-head p { margin-top: var(--sp-12); color: var(--muted); font-size: var(--fs-md); max-width: 32ch; }
.trust-stat { display: flex; align-items: center; gap: var(--sp-14); margin-top: var(--sp-24); padding-top: var(--sp-20); border-top: var(--border); }
.trust-stat b { font-size: var(--fs-6xl); font-weight: var(--fw-regular); letter-spacing: var(--tracking-tightest); line-height: var(--lh-none); }
.trust-stat span { font-size: var(--fs-xs); line-height: var(--lh-heading); color: var(--muted); }

.trust-rows { display: grid; gap: var(--sp-14); min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 9%, var(--black) 91%, transparent); mask-image: linear-gradient(90deg, transparent, var(--black) 9%, var(--black) 91%, transparent); }
.trow { overflow: hidden; padding-block: var(--sp-8); }
.trow-track { display: flex; gap: var(--sp-14); width: max-content; }
.tcopy { display: contents; }
.tcard {
  flex-shrink: 0; width: 184px; height: 96px; display: grid; place-items: center; padding: var(--sp-16) var(--sp-20);
  background: var(--white); border: var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.tcard img { max-width: 100%; max-height: 58px; width: auto; object-fit: contain; transition: transform .5s var(--ease); }
.tcard:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 18px 40px -22px rgb(var(--c-ink) / .45); }
.tcard:hover img { transform: scale(1.06); }
.tcard.spot::after { background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgb(var(--c-accent) / .1), transparent 60%); }

@media (prefers-reduced-motion: no-preference) {
  .trow-track { animation: trust-l 42s linear infinite; }
  .trow.rev .trow-track { animation-name: trust-r; animation-duration: 48s; }
  .trow:hover .trow-track { animation-play-state: paused; }
  @keyframes trust-l { from { transform: translateX(0); } to { transform: translateX(calc(-25% - 3.5px)); } }
  @keyframes trust-r { from { transform: translateX(calc(-25% - 3.5px)); } to { transform: translateX(0); } }
}
@media (prefers-reduced-motion: reduce) {
  .tcopy { display: none; }
  .trow-track { width: auto; flex-wrap: wrap; }
}
@media (max-width: 960px) {
  .trust-grid { grid-template-columns: 1fr; }
  .trust-title { max-width: 20ch; }
}
@media (max-width: 520px) {
  .tcard { width: 148px; height: 80px; padding: var(--sp-12) var(--sp-16); }
  .tcard img { max-height: 46px; }
}
/* Left text spans exactly the height of the two logo rows: tag aligns with the top row, copy ends with the bottom row */
.trust-grid { align-items: stretch; }
.trust-head { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--sp-20); padding-block: var(--sp-8); }
.trust-head .trust-title { margin-top: 0; }
@media (max-width: 960px) { .trust-head { justify-content: flex-start; } }

/* ---------- Two white shades (home) ----------
   Light sections alternate A (--bg) and B (--bg-2). Each keeps its own top and bottom
   padding so the shade change sits in the middle of the gap. */
.tone-a { background-color: var(--bg); }
.tone-b { background-color: var(--bg-2); }
.trust { background: radial-gradient(900px 300px at 85% 0%, rgb(var(--c-accent) / .07), transparent 70%), radial-gradient(700px 300px at 0% 100%, rgb(var(--c-blue) / .07), transparent 70%), var(--bg-2); }
.page-home .cta-sec { background-color: var(--bg-2); }
.page-home main > .section:not(.sec-dark):not(.band) { padding-block: var(--section-y) !important; }
.page-home main > .section-tight { padding-block: var(--section-y-tight) !important; }

/* Trust copy: two text rows that sit beside the two logo rows */
.trust-head { display: grid; grid-template-rows: 1fr 1fr; row-gap: var(--sp-14); padding-block: 0; justify-content: stretch; }
.trust-head .trust-title { align-self: center; margin: 0; font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 15ch; }
.trust-meta { align-self: center; display: grid; gap: var(--sp-6); padding-left: var(--sp-14); border-left: var(--border-accent); }
.trust-meta span { font: var(--fw-medium) var(--fs-3xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--accent-strong); }
.trust-meta p { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--muted); max-width: 28ch; }
@media (max-width: 960px) { .trust-head { grid-template-rows: auto auto; row-gap: var(--sp-16); } }
/* Tighter band around the logo rows */
.trust { padding-block: clamp(28px, 3.2vw, 44px); }
.trust { padding-bottom: calc(clamp(28px, 3.2vw, 44px) - 8px); }


/* ---------- Stats (home): after Friction One's "stats" block ---------- */
.stats-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 96px); align-items: start; }
.stats-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-10); font: var(--fw-medium) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--muted); }
.stats-eyebrow .sq { width: 10px; height: 10px; background: var(--accent); border-radius: var(--radius-xs); }
.stats-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 17ch; }
.stats-title em { font-style: normal; color: var(--accent); }
.stats-lead { margin: 0; padding-top: var(--sp-32); font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); max-width: 46ch; justify-self: end; }

.stats-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(200px, auto)); gap: var(--sp-16); }
.st {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); padding: clamp(20px, 2.2vw, 30px);
  display: flex; flex-direction: column; justify-content: space-between; min-height: 200px;
  background: var(--surface); border: var(--border); color: var(--ink);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
}
.st:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgb(var(--c-ink) / .35); border-color: transparent; }
.st b { display: block; font-size: var(--fs-stat); font-weight: var(--fw-medium); line-height: var(--lh-none); letter-spacing: var(--tracking-tightest); font-feature-settings: "tnum"; }
.st-label { align-self: flex-end; text-align: right; font-size: var(--fs-md); color: var(--ink-2); max-width: 20ch; }

.st-hero { grid-row: 1 / span 2; background: var(--accent-strong); border-color: transparent; color: var(--white); justify-content: flex-start; }
.st-hero .st-sub { margin-top: var(--sp-10); font-size: var(--fs-h4); color: rgb(var(--c-white) / .95); }
.st-hero .st-foot { margin-top: auto; align-self: flex-end; font-size: var(--fs-lg); color: var(--white); }
.st-hero .st-foot strong { font-size: var(--fs-3xl); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); }

/* concentric arcs in a corner of the orange and navy stat cards: they draw in line by line when the grid scrolls
   into view, and on hover alternate lines turn opposite ways like wheels (two small gaps per line show the motion) */
.st-arcs { position: absolute; z-index: -1; width: 240px; height: 240px; pointer-events: none; overflow: visible; }
.st-arcs-tr { right: 0; top: 0; color: rgb(var(--c-white) / .35); }
.st-arcs-bl { left: 0; bottom: 0; width: 200px; height: 200px; color: rgb(var(--c-white) / .14); }
.st-arcs :is(circle, ellipse, line, polygon) { fill: none; stroke: currentColor; stroke-width: 1; }
.st-arcs .ln { transform-box: fill-box; transform-origin: center; animation: arc-cw var(--sp) linear infinite paused; }
.st-arcs circle.ln { stroke-dasharray: 46 2.5 49 2.5; }
.st-arcs g:nth-child(even) .ln { animation-name: arc-ccw; }
.st:hover .st-arcs :is(.ln, .gl-m) { animation-play-state: running; }
@keyframes arc-cw { to { transform: rotate(360deg); } }
@keyframes arc-ccw { to { transform: rotate(-360deg); } }
.st-arcs g { opacity: 0; transform: scale(.6); transform-box: view-box; transition: opacity .3s ease, transform .55s var(--ease); transition-delay: calc(var(--i) * 12ms); }
.st-arcs-tr g { transform-origin: 100% 0; }
.st-arcs-bl g { transform-origin: 0 100%; }
.st-arcs.on g { opacity: 1; transform: none; }
/* white cards: the same line language in ink, warming to the brand orange on hover */
.st-ink { color: rgb(var(--c-navy) / .14); transition: color .5s var(--ease); }
.st:hover .st-ink { color: rgb(var(--c-accent) / .45); }
.st-arcs-tr.st-ink { width: 190px; height: 190px; }
.st-globe { right: -84px; top: -84px; width: 200px; height: 200px; }
.st-globe g { transform-origin: 50% 50%; }
.st-globe .gl-m { transform-box: fill-box; transform-origin: center; animation: globe-turn 6s linear infinite paused; }
@keyframes globe-turn { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .st-arcs g { opacity: 1; transform: none; transition: none; } .st-arcs :is(.ln, .gl-m) { animation: none; } }
.st-dark { background: var(--navy); border-color: transparent; color: var(--white); }
.st-dark .st-label { color: rgb(var(--c-white) / .86); }
/* "established" card: a line-drawn factory that draws in like the arcs, and on hover runs like a working plant -
   gears turn, the press stamps, smoke rises, boxes ride the conveyor and the windows flicker orange */
.st-dark:has(.st-factory) .st-label { align-self: flex-start; text-align: left; }   /* label bottom-left, plant bottom-right */
.st-factory { left: auto; right: 10px; bottom: 0; width: min(230px, 46%); height: auto; aspect-ratio: 3 / 2; color: rgb(var(--c-white) / .2); transition: color .5s var(--ease); }
.st:hover .st-factory { color: rgb(var(--c-white) / .45); }
@media (max-width: 480px) { .st-factory { bottom: 38px; } }   /* small tiles: stand the plant above the label line */
.st-factory :is(rect, polyline) { fill: none; stroke: currentColor; stroke-width: 1; }
.st-factory [class^="fx-"] { transform-box: fill-box; transform-origin: center; animation-play-state: paused; animation-iteration-count: infinite; }
.st-factory .fx-gear { animation: fx-turn 4s linear infinite paused; }
.st-factory .fx-gear-r { animation-name: fx-turn-r; animation-duration: 2.8s; }
.st-factory .fx-press { animation: fx-press .9s cubic-bezier(.5, 0, .5, 1) infinite paused; }
.st-factory .fx-smoke { animation: fx-smoke 2.4s ease-out infinite paused; animation-delay: var(--s); }
.st-factory .fx-box { animation: fx-belt 3.6s linear infinite paused; animation-delay: var(--b); }
.st-factory .fx-win { animation: fx-win 1.8s steps(2, jump-none) infinite paused; animation-delay: var(--w); }
.st:hover .st-factory [class^="fx-"] { animation-play-state: running; }
@keyframes fx-turn { to { transform: rotate(360deg); } }
@keyframes fx-turn-r { to { transform: rotate(-360deg); } }
@keyframes fx-press { 0%, 100% { transform: translateY(0); } 45%, 55% { transform: translateY(9px); } }
@keyframes fx-smoke { 0% { transform: translateY(6px) scale(.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(-16px) scale(1.4); opacity: 0; } }
@keyframes fx-belt { 0% { transform: translateX(0); opacity: 0; } 8%, 88% { opacity: 1; } 100% { transform: translateX(46px); opacity: 0; } }
@keyframes fx-win { 0%, 100% { fill: transparent; } 50% { fill: var(--accent); } }
@media (prefers-reduced-motion: reduce) { .st-factory [class^="fx-"] { animation: none; } }
/* "team members" card: two people drawn as concentric contours in the corner, same line language as the rings -
   head rings turn like the arcs (class .ln), shoulder lines flow along their length on hover */
.st-team path { fill: none; stroke: currentColor; stroke-width: 1; }
.st-team .sh { stroke-dasharray: 46 2.5 49 2.5; animation: sh-flow var(--sp) linear infinite paused; }
.st-team g:nth-child(even) .sh { animation-direction: reverse; }
.st:hover .st-team .sh { animation-play-state: running; }
@keyframes sh-flow { to { stroke-dashoffset: -100; } }
@media (prefers-reduced-motion: reduce) { .st-team .sh { animation: none; } }

@media (max-width: 960px) {
  .stats-head { grid-template-columns: 1fr; }
  .stats-lead { padding-top: 0; justify-self: start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
  .st-hero { grid-row: auto; grid-column: 1 / -1; min-height: 240px; }
}
@media (max-width: 520px) {
  .stats-grid { gap: var(--sp-10); }
  .st { min-height: 150px; padding: var(--sp-16); }
  .st-label { font-size: var(--fs-xs); }
}
/* Stats tiles: square corners, as in the reference */
.st { border-radius: 0; }
.st-label strong { font-weight: var(--fw-semibold); color: var(--ink); }

/* ---------- CEO message (home) ----------
   Photo column stretches to the exact height of the message column.
   A square primary-colour block sits behind the photo, offset right and down (reference),
   and shifts to navy (secondary) on hover. */
.ceo2 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: stretch; }
.ceo2-media { position: relative; margin: 0 var(--sp-20) var(--sp-20) 0; min-height: 420px; }
.ceo2-block {
  position: absolute; inset: 22px -22px -22px 22px; background: var(--accent);
  transition: background-color .5s var(--ease), transform .6s var(--ease);
}
.ceo2-photo { position: absolute; inset: 0; overflow: hidden; background: var(--graphite-800); }
.ceo2-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 1.2s var(--ease); }
.ceo2-media:hover .ceo2-block { background: var(--secondary); transform: translate(6px, 6px); }
.ceo2-media:hover .ceo2-photo img { transform: scale(1.03); }

.ceo2-body { display: flex; flex-direction: column; justify-content: space-between; gap: var(--sp-24); padding-block: var(--sp-4) var(--sp-20); }
.ceo2-quote { margin: 0; font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tighter); color: var(--ink); }
.ceo2-quote::before { content: "\201C"; display: block; height: .5em; margin-bottom: .2em; font-size: 2.6em; line-height: var(--lh-none); color: var(--accent); font-weight: var(--fw-medium); }
.ceo2-text { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--muted); max-width: 56ch; }
.ceo2-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--sp-16) var(--sp-24); padding-top: var(--sp-20); border-top: var(--border); }
.ceo2-sig b { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); }
.ceo2-sig span { font-size: var(--fs-sm); color: var(--muted); }
.ceo2-link { display: inline-flex; align-items: center; gap: var(--sp-8); font-weight: var(--fw-strong); color: var(--accent-strong); }
.ceo2-link i { transition: transform .4s var(--ease); }
.ceo2-link:hover i { transform: rotate(45deg); }

@media (max-width: 860px) {
  .ceo2 { grid-template-columns: 1fr; }
  .ceo2-media { min-height: 0; aspect-ratio: 4/4.6; max-width: 420px; }
}
.ceo2-photo img { object-position: center top; }

/* CEO v2: photo keeps its full 833x1043 frame (no crop) at ~36% width and sets the row height;
   the message column is sized to that exact height. Type scales with the viewport so both grow together. */
.ceo2 { grid-template-columns: minmax(0, 36fr) minmax(0, 64fr); gap: clamp(40px, 5vw, 88px); align-items: stretch; }
.ceo2-media { min-height: 0; aspect-ratio: 833 / 1043; margin: 0 var(--sp-20) var(--sp-20) 0; }
.ceo2-photo img { object-fit: cover; object-position: center; }
.ceo2-body { height: 0; min-height: 100%; padding-block: 0; gap: 0; justify-content: space-between; }
.ceo2-quote { font-size: var(--fs-h3); line-height: var(--lh-snug); max-width: 32ch; }
.ceo2-quote::before { font-size: 2.2em; height: .45em; margin-bottom: .15em; }
.ceo2-letter { columns: 2; column-gap: clamp(24px, 2.6vw, 44px); font-size: clamp(13.5px, 1.04vw, 16px); line-height: var(--lh-relaxed); color: var(--muted); }
.ceo2-letter p { margin: 0 0 .9em; break-inside: avoid; }
.ceo2-letter p:last-child { margin-bottom: 0; }
.ceo2-foot { padding-top: clamp(14px, 1.4vw, 22px); }
@media (max-width: 960px) {
  .ceo2 { grid-template-columns: 1fr; }
  .ceo2-media { max-width: 400px; width: calc(100% - 22px); }
  .ceo2-body { height: auto; min-height: 0; gap: var(--sp-24); }
  .ceo2-letter { columns: 1; font-size: var(--fs-md); }
}
.ceo2-body { padding-bottom: var(--sp-20); }
@media (min-width: 961px) and (max-width: 1240px) { .ceo2 { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); } }
@media (min-width: 1101px) and (max-width: 1240px) {
  .ceo2-letter { font-size: var(--fs-xs); line-height: var(--lh-relaxed); }
  .ceo2-quote { font-size: var(--fs-2xl); }
}
@media (max-width: 1100px) {
  .ceo2 { grid-template-columns: 1fr; }
  .ceo2-media { max-width: 400px; width: calc(100% - 22px); }
  .ceo2-body { height: auto; min-height: 0; gap: var(--sp-24); padding-bottom: 0; }
  .ceo2-letter { font-size: var(--fs-md); }
}
@media (max-width: 640px) { .ceo2-letter { columns: 1; } }
/* CEO photo hover: no zoom; only the block shifts from primary orange to secondary navy */
.ceo2-media:hover .ceo2-photo img { transform: none; }
.ceo2-photo img { transition: none; }
.ceo2-media:hover .ceo2-block, .ceo2-block:hover { background: var(--secondary); }

/* ---------- Product cards: square product photo, short name, arrow ----------
   Used on the home page, the products overview and "more products" rows. */
.prods-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.prods-grid { margin-top: clamp(32px, 3.6vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-16); }
.pcard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: var(--border); color: var(--ink); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.pcard-media { display: block; aspect-ratio: 1; overflow: hidden; background: var(--white); }
.pcard-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.pcard-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); padding: var(--sp-16) var(--sp-20); border-top: var(--border); }
.pcard h3 { font-size: var(--fs-h5); font-weight: var(--fw-strong); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); }
.pc-arrow { flex: none; width: var(--sp-40); height: var(--sp-40); display: grid; place-items: center; background: var(--secondary); color: var(--white); font-size: var(--fs-lg); transition: background-color var(--dur) var(--ease); }
.pc-arrow i { display: block; line-height: var(--lh-none); transition: transform var(--dur) var(--ease); }
.pcard:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.pcard:hover .pcard-media img { transform: scale(1.05); }
.pcard:hover .pc-arrow { background: var(--accent-strong); }
.pcard:hover .pc-arrow i { transform: translateX(3px); }
@media (max-width: 760px) {
  .prods-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-10); }
  .pcard-foot { padding: var(--sp-12); gap: var(--sp-8); }
  .pcard h3 { font-size: var(--fs-base); }
  .pc-arrow { width: var(--sp-32); height: var(--sp-32); font-size: var(--fs-base); }
}

/* Hero video background, navy overlay to match the secondary colour */
.xhero-bg video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.xhero::before {
  background:
    linear-gradient(0deg, rgb(var(--c-scrim) / .75) 0%, rgb(var(--c-scrim) / .35) 42%, rgb(var(--c-scrim) / .14) 70%, rgb(var(--c-scrim) / .45) 100%),
    linear-gradient(90deg, rgb(var(--c-scrim) / .55) 0%, rgb(var(--c-scrim) / 0) 58%),
    rgb(var(--c-navy) / .2);
}
@media (prefers-reduced-motion: no-preference) {
  .xhero-bg video { transform: scale(1.08) translate3d(0, var(--py, 0), 0); will-change: transform; animation: xzoom 2.4s var(--ease) forwards; }
}
.xhero-bg { background: var(--navy-800); }

/* ---------- Scroll cover: hero + trusted logos pin, "At a glance" slides over them ----------
   .pin-stack sticks when its bottom reaches the viewport bottom (top set by JS = viewport - own height).
   The wrapper limits the pin, so once the stats sheet has covered the screen everything scrolls on together. */
.cover-wrap { position: relative; }
.pin-stack { position: sticky; z-index: 0; transform-origin: 50% 100%; }
.pin-stack::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: rgb(var(--c-scrim) / calc(var(--cover, 0) * .55));
}
.cover-sheet {
  position: relative; z-index: 1; min-height: 100dvh; display: flex; align-items: center;
  padding-block: var(--section-y-feature) !important;
  background-color: var(--bg); border-radius: var(--radius-xl) var(--radius-xl) 0 0; margin-top: -1px;
  box-shadow: 0 -24px 60px -20px rgb(var(--c-scrim) / .45);
}
.cover-sheet > .wrap { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .pin-stack { transform: scale(calc(1 - var(--cover, 0) * .06)); }
}
@media (prefers-reduced-motion: reduce) {
  .pin-stack { position: relative; top: auto !important; }
  .cover-sheet { border-radius: 0; box-shadow: none; }
}

/* CEO quote typing on scroll */
.ceo2-quote .tw { display: inline-block; white-space: nowrap; }
.ceo2-quote.typing .tc { opacity: .14; transition: opacity .18s linear; }
.ceo2-quote.typing .tc.on { opacity: 1; }
.ceo2-quote .tc.cur { position: relative; }
.ceo2-quote .tc.cur::after {
  content: ""; position: absolute; right: -.1em; top: .12em; bottom: .08em; width: 2px; background: var(--accent);
  animation: tw-blink 1s steps(1) infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

/* ---------- About us + video (home) ----------
   Primary-colour band with heading and copy; the video card overlaps the band's lower edge. */
.showcase { position: relative; padding-bottom: clamp(56px, 6vw, 88px); background: var(--bg-2); }
.showcase-band { background: var(--accent-strong); color: var(--white); padding-block: clamp(56px, 6vw, 88px) clamp(150px, 17vw, 270px); position: relative; overflow: hidden; isolation: isolate; }
.showcase-band::after { /* faint grid on the band, same texture family as the dark sections */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(var(--c-white) / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .07) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: linear-gradient(100deg, transparent 35%, var(--black) 95%); mask-image: linear-gradient(100deg, transparent 35%, var(--black) 95%);
}
.showcase-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 112px); align-items: start; }
.sc-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--white); }
.sc-eyebrow i { width: 28px; height: 1px; background: var(--white); }
.showcase-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-book); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 16ch; color: var(--white); }
.showcase-copy { padding-top: var(--sp-32); }
.showcase-copy p { font-size: var(--fs-base); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .86); max-width: 50ch; }
.sc-link { display: inline-flex; align-items: center; gap: var(--sp-10); margin-top: var(--sp-24); font-size: var(--fs-xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--white); }
.sc-link i { font-size: var(--fs-base); transition: transform .4s var(--ease); }
.sc-link:hover i { transform: translate(2px, -2px); }

.showcase-video.vid {
  display: block; width: min(100%, 1180px); margin: calc(clamp(150px, 17vw, 270px) * -1 + 8px) auto 0; aspect-ratio: 16 / 8.4;
  border-radius: var(--radius-lg); background: var(--navy); box-shadow: var(--shadow-xl); position: relative; z-index: 1; cursor: pointer;
}
.showcase-video.vid img { opacity: 1; transition: transform 1.4s var(--ease); }
.showcase-video.vid::before { /* darkening for the title and play button */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgb(var(--c-scrim) / .65), rgb(var(--c-scrim) / .2) 55%, rgb(var(--c-scrim) / .35));
}
.showcase-video.vid:hover img { transform: scale(1.03); }
.sv-play {
  position: absolute; z-index: 2; left: 50%; top: 42%; translate: -50% -50%;
  width: clamp(76px, 7.2vw, 108px); aspect-ratio: 1.25; display: grid; place-items: center;
  border: 3px solid var(--accent); background: rgb(var(--c-scrim) / .28); color: var(--accent); font-size: clamp(30px, 3vw, 44px);
  transition: background-color .35s var(--ease), color .35s, transform .5s var(--ease);
}
.sv-play i { font-weight: var(--fw-bold); }
.showcase-video.vid:hover .sv-play { background: var(--accent); color: var(--white); transform: scale(1.06); }
.sv-title {
  position: absolute; z-index: 2; left: 50%; top: 64%; translate: -50% 0; white-space: nowrap;
  padding-left: var(--sp-16); border-left: 3px solid var(--accent);
  font-size: var(--fs-h3); font-weight: var(--fw-regular); letter-spacing: var(--tracking-normal); text-transform: uppercase; color: var(--white); line-height: var(--lh-tight);
}
.showcase-video.vid iframe { z-index: 3; }

@media (max-width: 860px) {
  .showcase-head { grid-template-columns: 1fr; gap: var(--sp-8); }
  .showcase-copy { padding-top: 0; }
  .sv-title { font-size: var(--fs-lg); white-space: normal; text-align: left; width: 80%; }
}
.showcase-video.vid { margin-top: calc(clamp(150px, 17vw, 270px) * -1 + clamp(40px, 4.5vw, 64px)); }
.showcase-band { padding-bottom: calc(clamp(150px, 17vw, 270px) + clamp(40px, 4.5vw, 64px) - clamp(40px, 4.5vw, 64px)); }
/* overlap tied to the video's own height: ~72% of the card sits on the orange band, as in the reference */
.showcase { --sv-w: min(91.8vw, 1180px); --sv-over: calc(var(--sv-w) * .525 * .72); --sv-gap: clamp(40px, 4.5vw, 64px); }
.showcase-band { padding-bottom: calc(var(--sv-over) + var(--sv-gap)); }
.showcase-video.vid { margin-top: calc(var(--sv-over) * -1); }
.showcase-video.vid::before { background: linear-gradient(0deg, rgb(var(--c-scrim) / .75), rgb(var(--c-scrim) / .45) 55%, rgb(var(--c-scrim) / .55)); }
.sv-play { background: rgb(var(--c-scrim) / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* ---------- Showcase v2: navy band + scroll-to-fullscreen video ---------- */
.showcase-band { background: var(--navy); }
.showcase-band::after { background-image: linear-gradient(rgb(var(--c-white) / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .04) 1px, transparent 1px); }
.showcase-band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(700px circle at 88% 0%, rgb(var(--c-accent) / .2), transparent 60%); }
.sc-eyebrow i { background: var(--accent); }
.showcase { --sv-h0: calc(min(91.8vw, 1180px) * .525); --sv-over: calc(var(--sv-h0) * .72); padding-bottom: 0; }
.showcase-band { padding-bottom: calc(var(--sv-over) + var(--sv-gap)); }
/* track: scroll distance for the opening; frame: sticky viewport-sized stage */
.sv-track { position: relative; z-index: 1; height: 230dvh; margin-top: calc((var(--sv-over) + (100dvh - var(--sv-h0)) / 2) * -1); pointer-events: none; }
.sv-frame { position: sticky; top: 0; height: 100dvh; width: 100%; }
.sv-frame .showcase-video.vid {
  pointer-events: auto; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none;
  clip-path: inset(calc((100dvh - var(--sv-h0)) / 2) calc((100% - min(91.8vw, 1180px)) / 2) round 16px); --box-h: var(--sv-h0);
}
.sv-frame .showcase-video.vid img { transform: none; }
.sv-frame .sv-play { top: 50%; }
.sv-frame .sv-title { top: calc(50% + var(--box-h) * .2); }
.sv-frame .showcase-video.is-full .sv-title { font-size: var(--fs-h2); }
.sv-frame .sv-title { transition: font-size .5s var(--ease); }
/* reduced motion / no smooth scroll: a normal card */
.sv-track.no-expand { height: auto; margin-top: calc(var(--sv-over) * -1); }
.sv-track.no-expand .sv-frame { position: relative; height: auto; width: min(91.8vw, 1180px); margin-inline: auto; aspect-ratio: 16 / 8.4; }
.sv-track.no-expand .showcase-video.vid { clip-path: none; border-radius: var(--radius-lg); --box-h: 100%; }
.showcase-title { max-width: none; white-space: nowrap; font-size: var(--fs-h2); }
@media (max-width: 560px) { .showcase-title { white-space: normal; } .showcase-title br { display: none; } }
/* video first, heading and copy below: the card's top ~28% sits on the light section, the rest on navy */
.showcase.sv-top { display: flow-root; /* keep the track's negative margin from collapsing through and dragging the section up */ --sv-navy-y: calc(var(--sv-gap) + var(--sv-h0) * .28); background: linear-gradient(var(--bg-2) var(--sv-navy-y), var(--navy) 0); }
.sv-top .sv-track { margin-top: calc(var(--sv-gap) - (100dvh - var(--sv-h0)) / 2); }
.sv-top .sv-track.no-expand { margin-top: var(--sv-gap); }

/* ---------- Footer call to action (all pages): dark card riding on the footer's top edge ---------- */
:root { --fcta-over: clamp(200px, 20vw, 300px); }
main { padding-bottom: var(--fcta-over); }
/* the strip beside the footer card shows main's background: match it to the last section so there is no seam */
main:has(> section:last-of-type.tone-b) { background-color: var(--bg-2); }
.footer { overflow: visible; margin-top: 0; }
.footer > .wrap:not(.f-cta-wrap) { padding-top: clamp(56px, 6vw, 80px); }
.f-cta-wrap { position: relative; z-index: 2; margin-top: calc(var(--fcta-over) * -1); padding-block: 0 !important; }
.f-cta {
  position: relative; isolation: isolate; overflow: hidden; min-height: clamp(360px, 31vw, 440px);
  display: flex; align-items: center; background: var(--navy-900); color: var(--white);
  box-shadow: 0 40px 80px -40px rgb(var(--c-scrim) / .65);
}
.f-cta-img { position: absolute; inset: 0 0 0 auto; width: 52%; z-index: -2; }
.f-cta-img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: grayscale(.25); }
.f-cta-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-900) 0%, rgb(var(--c-scrim) / .75) 30%, rgb(var(--c-scrim) / .28) 75%, rgb(var(--c-scrim) / .1)); }
.f-cta-arcs {
  position: absolute; left: -120px; bottom: -120px; width: 320px; height: 320px; z-index: -1; pointer-events: none; border-radius: var(--radius-round);
  background: repeating-radial-gradient(circle at center, transparent 0 9px, rgb(var(--c-white) / .1) 9px 10px);
  -webkit-mask-image: radial-gradient(circle, var(--black) 30%, transparent 70%); mask-image: radial-gradient(circle, var(--black) 30%, transparent 70%);
}
.f-cta-body { position: relative; padding: clamp(36px, 5vw, 72px); max-width: 640px; }
.f-cta-title { font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); color: var(--white); }
.f-cta-body p { margin-top: var(--sp-20); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .86); max-width: 42ch; }
.f-cta-btns { display: flex; flex-wrap: wrap; gap: var(--sp-14); margin-top: var(--sp-32); }
.f-btn { display: inline-flex; align-items: center; gap: var(--sp-12); height: 50px; padding: 0 var(--sp-20); font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; transition: background-color .3s, color .3s, border-color .3s; }
.f-btn i { font-size: var(--fs-base); transition: transform .4s var(--ease); }
.f-btn:hover i { transform: translate(2px, -2px); }
.f-btn-primary { background: var(--accent-strong); color: var(--white); }
.f-btn-primary:hover { background: color-mix(in oklab, var(--accent-strong) 85%, black); }
.f-btn-ghost { border: 1px solid rgb(var(--c-white) / .65); color: var(--white); }
.f-btn-ghost:hover { background: var(--white); color: var(--navy); }
.footer-word { margin-top: var(--sp-40); }
/* footer wordmark: outlined company name; a spotlight under the pointer fills it with the brand gradient.
   site.js fits the font size to the row and feeds --mx/--my; touch screens get a slow sweep instead. */
@property --fw-r { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --fw-x { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.f-word { position: relative; font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif; font-weight: var(--fw-black); font-size: 6vw; letter-spacing: var(--tracking-tight); /* a static face: the variable Geist shows its overlapping contours when outlined */ -webkit-text-stroke: 0; cursor: default; --fw-r: 0px;
  transition: --fw-r .6s var(--ease); }
.f-word .fw-line { display: inline-block; color: transparent; -webkit-text-stroke: 1px rgb(var(--c-white) / .14); }
.f-word .fw-fill {
  position: absolute; inset: 0; color: transparent; pointer-events: none;
  background: linear-gradient(100deg, var(--orange-300) 0%, var(--accent) 30%, var(--amber-500) 62%, var(--orange-200) 100%); -webkit-background-clip: text; background-clip: text;
  /* narrow, tall ellipse: --fw-r is the half-width, the height is 1.5x so whole letters light */
  -webkit-mask-image: radial-gradient(var(--fw-r) calc(var(--fw-r) * 1.5) at var(--mx, 50%) var(--my, 60%), var(--black) 0%, rgb(var(--c-black) / .86) 30%, transparent 100%);
  mask-image: radial-gradient(var(--fw-r) calc(var(--fw-r) * 1.5) at var(--mx, 50%) var(--my, 60%), var(--black) 0%, rgb(var(--c-black) / .86) 30%, transparent 100%);
}
.f-word:hover { --fw-r: clamp(90px, 10vw, 150px); }
.f-word.is-auto { --fw-r: clamp(60px, 14vw, 110px); --mx: var(--fw-x); animation: fw-sweep 9s ease-in-out infinite alternate; }
@keyframes fw-sweep { from { --fw-x: 8%; } to { --fw-x: 92%; } }
@media (prefers-reduced-motion: reduce) { .f-word, .f-word.is-auto { transition: none; animation: none; } }
@media (max-width: 860px) {
  .f-cta-img { width: 100%; }
  .f-cta-img::after { background: linear-gradient(180deg, rgb(var(--c-scrim) / .55), rgb(var(--c-scrim) / .95) 55%); }
}
.footer { display: flow-root; }

/* ---------- Why choose us (home) ---------- */
.why-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.why-head { position: sticky; top: calc(var(--header-h) + 32px); }
.why-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 13ch; }
.why-head > p { margin-top: var(--sp-16); font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--muted); max-width: 40ch; }
.why-wa {
  margin-top: var(--sp-32); display: inline-flex; align-items: center; gap: var(--sp-14); padding: var(--sp-12) var(--sp-16) var(--sp-12) var(--sp-12);
  background: var(--navy); color: var(--white); border-radius: var(--radius-lg); transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.why-wa:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgb(var(--c-navy) / .55); }
.why-wa-ic { width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--green-600); font-size: var(--fs-3xl); }
.why-wa b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.why-wa small { display: block; margin-top: var(--sp-2); font-size: var(--fs-xs); color: rgb(var(--c-white) / .65); }
.why-wa > i { margin-left: var(--sp-6); font-size: var(--fs-lg); transition: transform .4s var(--ease); }
.why-wa:hover > i { transform: translate(2px, -2px); }

.why-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--border); }
.why-item { position: relative; padding: var(--sp-32) var(--sp-28) var(--sp-32) 0; border-bottom: var(--border); }
.why-item:nth-child(odd) { border-right: var(--border); }
.why-item:nth-child(even) { padding-left: var(--sp-32); padding-right: 0; }
.why-ic { width: 46px; height: 46px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-2xl); transition: background-color .35s, color .35s, transform .5s var(--ease); }
.why-item:hover .why-ic { background: var(--accent-strong); color: var(--white); transform: rotate(-6deg); }
.why-item h3 { margin-top: var(--sp-20); font-size: var(--fs-xl); font-weight: var(--fw-strong); letter-spacing: var(--tracking-snug); }
.why-item p { margin-top: var(--sp-8); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--muted); max-width: 30ch; }
.why-item.spot::after { border-radius: 0; }
@media (max-width: 960px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-head { position: static; }
}
@media (max-width: 560px) {
  .why-list { grid-template-columns: 1fr; }
  .why-item, .why-item:nth-child(even) { padding: var(--sp-24) 0; border-right: 0; }
}

/* Cover v2: only the hero pins; the trust + stats block slides over it as one sheet */
.cover-sheet { min-height: 0; display: block; padding-block: 0 !important; overflow: clip; background-color: var(--bg-2); }
.cover-sheet .trust { border-radius: 0; }
.cover-sheet .stats { min-height: 0; }
/* as the hero recedes behind the sheet, its corners round off so it reads as a card */
.pin-stack .xhero { border-radius: calc(var(--cover, 0) * 28px); }
.pin-stack { background: var(--bg-2); }

/* ---------- Footer CTA v2: steps + quick quote form ---------- */
.f-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 0; min-height: 0; background: var(--navy); }
.f-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(600px circle at 0% 0%, rgb(var(--c-accent) / .14), transparent 60%),
              linear-gradient(rgb(var(--c-white) / .04) 1px, transparent 1px) 0 0 / 72px 72px, linear-gradient(90deg, rgb(var(--c-white) / .04) 1px, transparent 1px) 0 0 / 72px 72px; }
.f-cta-body { max-width: none; padding: clamp(36px, 4.4vw, 64px); }
.f-cta-eyebrow { display: inline-flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--white); }
.f-cta-eyebrow i { width: 28px; height: 1px; background: var(--accent); }
.f-cta-title { margin-top: var(--sp-16); }
.f-steps { list-style: none; margin: var(--sp-32) 0 0; padding: 0; display: grid; gap: 0; }
.f-steps li { position: relative; display: flex; gap: var(--sp-16); padding-bottom: var(--sp-20); }
.f-steps li:last-child { padding-bottom: 0; }
.f-steps li:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 1px; background: rgb(var(--c-white) / .2); }
.f-step-n { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--radius-pill); display: grid; place-items: center; border: 1px solid rgb(var(--c-white) / .28); font: var(--fw-semibold) var(--fs-sm)/var(--lh-none) var(--font-mono); color: var(--white); }
.f-steps li:first-child .f-step-n { background: var(--accent-strong); border-color: transparent; }
.f-steps b { display: block; font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--white); }
.f-steps span:not(.f-step-n) { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: rgb(var(--c-white) / .75); }

.f-cta-form { position: relative; margin: var(--sp-14); padding: clamp(24px, 3vw, 40px); background: rgb(var(--c-white) / .04); border: 1px solid rgb(var(--c-white) / .1); border-radius: var(--radius-lg); color: var(--white); }
.f-form-title { font-size: var(--fs-2xl); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); color: var(--white); }
.f-form-grid { margin-top: var(--sp-20); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-14); }
.f-form-grid .full { grid-column: 1 / -1; }
.f-cta-form .field label { color: var(--white); font-size: var(--fs-xs); }
.f-cta-form .field label .opt { color: rgb(var(--c-white) / .55); }
.f-cta-form .field input, .f-cta-form .field select, .f-cta-form .field textarea {
  height: 46px; background: rgb(var(--c-white) / .07); border: 1px solid rgb(var(--c-white) / .2); color: var(--white); border-radius: var(--radius-md);
}
.f-cta-form .field textarea { height: auto; min-height: 84px; }
.f-cta-form .field select option { color: var(--ink); }
.f-cta-form .field input::placeholder, .f-cta-form .field textarea::placeholder { color: rgb(var(--c-white) / .45); }
.f-cta-form .field input:focus, .f-cta-form .field select:focus, .f-cta-form .field textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--c-accent) / .28); }
.f-cta-form .field .err { color: var(--orange-300); }
.f-cta-form .f-cta-btns { margin-top: var(--sp-20); }
.f-btn { border: 0; cursor: pointer; font-family: inherit; }
.f-btn-wa { background: var(--green-600); color: var(--white); }
.f-btn-wa:hover { background: var(--green-700); }
.f-btn-wa i { font-size: var(--fs-lg); }
.f-cta-form .form-done { color: var(--white); }
.f-cta-form .form-done p { color: rgb(var(--c-white) / .75); }
.f-cta-form.sent form { display: none; }
@media (max-width: 960px) {
  .f-cta { grid-template-columns: 1fr; }
  .f-cta-form { margin: 0 var(--sp-14) var(--sp-14); }
}
@media (max-width: 520px) { .f-form-grid { grid-template-columns: 1fr; } }

/* ---------- Review + certification proof (home) ---------- */
.proof-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 20ch; }
.proof-grid { margin-top: clamp(32px, 3.6vw, 48px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-16); align-items: stretch; }
.proof-review { grid-template-columns: minmax(200px, 38%) 1fr; margin: 0; }
.proof-review .review-photo { min-height: 0; }
.proof-review blockquote { font-size: var(--fs-h4); max-width: 22ch; }
.cert-proof {
  position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radius-lg); padding: clamp(28px, 3vw, 40px);
  background: var(--navy); color: var(--white); display: flex; flex-direction: column; gap: var(--sp-16);
}
.cert-proof::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at 100% 0%, rgb(var(--c-accent) / .2), transparent 60%),
              linear-gradient(rgb(var(--c-white) / .04) 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, rgb(var(--c-white) / .04) 1px, transparent 1px) 0 0 / 48px 48px; }
.cp-ic { width: 52px; height: 52px; border-radius: var(--radius-md); display: grid; place-items: center; background: rgb(var(--c-accent) / .14); color: var(--accent); font-size: var(--fs-3xl); }
.cert-proof h3 { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.cert-proof > p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: rgb(var(--c-white) / .75); }
.cp-badges { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 0; border-top: 1px solid rgb(var(--c-white) / .14); }
.cp-badges li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-12); padding: var(--sp-12) 0; border-bottom: 1px solid rgb(var(--c-white) / .14); }
.cp-badges b { font: var(--fw-semibold) var(--fs-sm)/var(--lh-snug) var(--font-mono); letter-spacing: var(--tracking-slight); color: var(--white); }
.cp-badges span { font-size: var(--fs-xs); color: rgb(var(--c-white) / .65); text-align: right; }
.cp-cta { margin-top: auto; align-self: flex-start; }
@media (max-width: 1000px) { .proof-grid { grid-template-columns: 1fr; } }

/* Buttons: no cursor-following movement; hover is a colour change only */
.magnetic { transform: none !important; }
.btn-primary:hover { transform: none; box-shadow: none; }
/* "Request a quote" is solid orange everywhere, including the header over the hero */
.has-overlay .header .btn-quote-cta,
.has-overlay .header:not(.scrolled) .btn-quote-cta { background: var(--accent-strong); color: var(--white); border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.has-overlay .header .btn-quote-cta:hover,
.has-overlay .header:not(.scrolled) .btn-quote-cta:hover,
.btn-primary:hover { background: var(--orange-700); border-color: transparent; }
.xbtn { background: var(--accent-strong); color: var(--white); transition: background-color .25s; }
.xbtn:hover { background: var(--orange-700); box-shadow: none; }

/* Square corners: Inside Shans video, review card and certification card */
.sv-frame .showcase-video.vid { clip-path: inset(calc((100dvh - var(--sv-h0)) / 2) calc((100% - min(91.8vw, 1180px)) / 2)); }
.sv-track.no-expand .showcase-video.vid, .showcase-video.vid { border-radius: 0; }
.proof .review, .proof .review-photo, .proof .review-photo img, .cert-proof { border-radius: 0; }
.proof .review-tag { border-radius: 0; }

/* ---------- Review card v3 (reference: quote mark, indented quote, person + round arrows) ---------- */
.rv-card { position: relative; display: flex; flex-direction: column; padding: clamp(28px, 3.2vw, 44px); background: var(--surface); border: var(--border); min-height: 100%; }
.rv-mark { width: clamp(44px, 4vw, 58px); height: auto; fill: var(--accent); }
.rv-slides { display: grid; flex: 1; }
.rv-slide { grid-area: 1 / 1; margin: 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility .5s; }
.rv-slide.on { opacity: 1; visibility: visible; }
.rv-slide blockquote { margin: clamp(22px, 2.4vw, 32px) 0 0 clamp(0px, 4.2vw, 64px); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-normal); letter-spacing: var(--tracking-snug); color: var(--ink-2); max-width: 34ch; }
.rv-person { margin-top: auto; padding-top: var(--sp-32); display: flex; align-items: center; gap: var(--sp-14); padding-right: var(--sp-120); }
.rv-person img { width: 56px; height: 56px; border-radius: var(--radius-pill); object-fit: cover; object-position: center 18%; }
.rv-person b { display: block; font-size: var(--fs-base); font-weight: var(--fw-strong); color: var(--navy); }
.rv-person small { display: block; margin-top: var(--sp-2); font: var(--fw-medium) var(--fs-3xs)/var(--lh-heading) var(--font-sans); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--muted); }
.rv-nav { position: absolute; right: clamp(28px, 3.2vw, 44px); bottom: clamp(28px, 3.2vw, 44px); display: flex; gap: var(--sp-12); }
.rv-btn { width: 52px; height: 52px; border-radius: var(--radius-pill); border: var(--border); background: var(--bg); color: var(--navy); display: grid; place-items: center; font-size: var(--fs-lg); cursor: pointer; transition: background-color .3s, color .3s, border-color .3s; }
.rv-btn:hover:not([disabled]) { background: var(--navy); color: var(--white); border-color: var(--navy); }
.rv-btn[disabled] { opacity: .45; cursor: default; }
@media (max-width: 560px) {
  .rv-slide blockquote { margin-left: 0; }
  .rv-person { padding-right: 0; }
  .rv-nav { position: static; margin-top: var(--sp-20); }
}
/* review text left-aligned with the quote mark; placeholder avatar */
.rv-slide blockquote { margin-left: 0; max-width: 40ch; }
.rv-initial { width: 56px; height: 56px; flex-shrink: 0; border-radius: var(--radius-pill); display: grid; place-items: center; background: var(--secondary-soft); color: var(--navy); font-size: var(--fs-2xl); }
.rv-slide { transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease), visibility .6s; }
.rv-slide.on { transform: none; }
/* review: typed quote (ghost text filling in with a caret) and a premium hand-over between reviews */
.rv-slide .tw { display: inline-block; white-space: nowrap; }
.rv-slide .tc { opacity: .13; transition: opacity .2s linear; }
.rv-slide .tc.on { opacity: 1; }
.rv-slide .tc.cur { position: relative; }
.rv-slide .tc.cur::after { content: ""; position: absolute; right: -.08em; top: .14em; bottom: .1em; width: 2px; background: var(--accent); animation: tw-blink 1s steps(1) infinite; }
.rv-slide { transform: none; transition: opacity .55s var(--ease), visibility .55s; }
.rv-slide blockquote { transition: opacity .5s ease, transform .6s var(--ease), filter .5s ease; }
.rv-slide.out blockquote { opacity: 0; transform: translateY(-14px); filter: blur(6px); }
.rv-slide.on :is(.rv-person img, .rv-initial) { animation: rvAvatar .8s var(--ease) both; }
.rv-slide.on .rv-person b { animation: rvWipe .7s var(--ease) .12s both; }
.rv-slide.on .rv-person small { animation: rvWipe .7s var(--ease) .22s both; }
@keyframes rvAvatar { from { opacity: 0; transform: scale(.6) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes rvWipe { from { clip-path: inset(0 100% 0 0); transform: translateX(-6px); } to { clip-path: inset(0 -2% 0 0); transform: none; } }
.rv-mark { transform-origin: 20% 80%; }
.rv-mark.pop { animation: rvMark .7s var(--ease); }
@keyframes rvMark { 40% { transform: scale(1.16) rotate(-7deg); } 100% { transform: none; } }
.rv-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.rv-progress.run { animation: rvBar var(--hold, 4.5s) linear forwards; }
@keyframes rvBar { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .rv-slide.on :is(.rv-person img, .rv-initial), .rv-slide.on .rv-person :is(b, small), .rv-mark.pop { animation: none; }
  .rv-slide.out blockquote { filter: none; transform: none; }
}

/* Certificate rows: link + hover peek */
.cp-badges li { padding: 0; }
.cp-badges a { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-12); width: 100%; padding: var(--sp-12) 0; color: inherit; transition: padding-left .4s var(--ease); }
.cp-badges a:hover, .cp-badges a:focus-visible { padding-left: var(--sp-8); }
.cp-badges a:hover b, .cp-badges a:focus-visible b { color: var(--accent); }
/* certificate preview: a fixed slot in the box's top-right corner; the intro text dims while a certificate shows */
.cp-peek { position: absolute; z-index: 2; top: clamp(28px, 3vw, 40px); right: clamp(28px, 3vw, 40px); width: clamp(130px, 36%, 180px); aspect-ratio: 170 / 236; pointer-events: none; }
.cp-peek img { position: absolute; inset: 0; width: 100%; height: 100%; padding: var(--sp-6); background: var(--white); object-fit: cover; object-position: top;
  box-shadow: 0 26px 50px -18px rgb(var(--c-black) / .65); opacity: 0; transform: translateY(16px) rotate(4deg) scale(.92);
  transition: opacity .3s ease, transform .55s var(--ease); }
.cp-peek img.on { opacity: 1; transform: rotate(-2.5deg); }
.cp-text { display: grid; gap: var(--sp-16); transition: opacity .35s ease; }
.cert-proof.peeking .cp-text { opacity: .22; }
@media (prefers-reduced-motion: reduce) { .cp-peek img, .cp-text { transition: opacity .2s; transform: none; } }

/* ---------- Our factory (home): after Friction One's plant showcase ---------- */
.factory-statement { margin-top: var(--sp-16); font-size: var(--fs-h3); font-weight: var(--fw-regular); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--ink); max-width: 46ch; }
.factory-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: var(--sp-16); align-items: stretch; }
.plant { background: var(--surface); border: var(--border); display: flex; flex-direction: column; }
.plant-img { position: relative; aspect-ratio: 1600 / 760; overflow: hidden; }
.plant-img img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.plant-tag { position: absolute; left: 16px; top: 16px; padding: var(--sp-8) var(--sp-14); background: var(--accent-strong); color: var(--white); font-size: var(--fs-md); font-weight: var(--fw-strong); }
.plant-specs { margin: 0; padding: clamp(20px, 2.4vw, 30px); display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-14) var(--sp-28); }
.plant-specs div:nth-child(2), .plant-specs div:nth-child(3), .plant-specs div:nth-child(4) { grid-column: span 1; }
.plant-specs div { display: flex; flex-direction: column; gap: var(--sp-2); }
.plant-specs dt { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--ink); }
.plant-specs dd { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--muted); }

.plant-map { position: relative; overflow: hidden; isolation: isolate; background: var(--navy); color: var(--white); padding: clamp(22px, 2.6vw, 32px); display: flex; flex-direction: column; gap: var(--sp-20); }
.plant-map::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(360px circle at 75% 35%, rgb(var(--c-accent) / .2), transparent 65%); }
.pm-map { position: relative; margin-top: var(--sp-8); }
.pm-map img { width: 100%; height: auto; display: block; }
.pm-pin { position: absolute; translate: -50% -50%; display: flex; align-items: center; gap: var(--sp-8); }
.pm-pin i { position: relative; width: 14px; height: 14px; border-radius: var(--radius-pill); background: var(--accent); box-shadow: 0 0 0 4px rgb(var(--c-accent) / .28); }
.pm-pin i::after { content: ""; position: absolute; inset: -4px; border-radius: var(--radius-pill); border: var(--border-accent); animation: pin-pulse 2.2s var(--ease) infinite; }
@keyframes pin-pulse { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.pm-pin span { position: absolute; right: calc(100% + 10px); white-space: nowrap; padding: var(--sp-4) var(--sp-12); border-radius: var(--radius-pill); background: var(--white); color: var(--accent-strong); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border: 1px solid var(--accent); }
.pm-stats { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgb(var(--c-white) / .14); margin-top: auto; }
.pm-stats div { padding-top: var(--sp-16); }
.pm-stats div + div { padding-left: var(--sp-16); border-left: 1px solid rgb(var(--c-white) / .14); }
.pm-stats b { display: block; font-size: var(--fs-h2); font-weight: var(--fw-book); line-height: var(--lh-none); letter-spacing: var(--tracking-tightest); }
.pm-stats span { display: block; margin-top: var(--sp-8); font-size: var(--fs-xs); color: rgb(var(--c-white) / .65); }
.pm-cta { align-self: flex-start; }
@media (prefers-reduced-motion: reduce) { .pm-pin i::after { animation: none; } }
@media (max-width: 1000px) { .factory-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .plant-specs { grid-template-columns: 1fr; } }
/* factory: square photo reveal, map fills the panel */
@media (prefers-reduced-motion: no-preference) {
  .js .page-home .plant-img.wipe { clip-path: inset(100% 0 0 0); }
  .js .page-home .plant-img.wipe.in { clip-path: inset(0 0 0 0); }
}
.pm-map { flex: 1; display: flex; align-items: center; margin: 0 -8px; }
.pm-map-inner { position: relative; width: 100%; }
.pm-cap { font-size: var(--fs-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgb(var(--c-white) / .55); }
.f-btn-ghost.pm-cta { border: 1px solid rgb(var(--c-white) / .55); }
/* Footer CTA: square form panel and fields */
.f-cta-form { border-radius: 0; }
.f-cta-form .field input, .f-cta-form .field select, .f-cta-form .field textarea { border-radius: 0; }

/* ---------- Inside Shans (home): after Friction One's "How we support you" ---------- */
.inside-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.inside-title em { font-style: normal; color: var(--accent); }
.inside-lead { margin-top: var(--sp-20); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-12) var(--sp-28); }
.inside-lead p { margin: 0; font-size: var(--fs-base); line-height: var(--lh-relaxed); color: var(--muted); max-width: 62ch; }
.ins-grid { margin-top: clamp(36px, 4vw, 56px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-12); }
/* Sustainability cards: full-bleed image, the title alone at rest on a deep bottom fade; hover darkens the image,
   lifts the title and slides the detail in (always shown on touch screens) */
.ins-card { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; overflow: hidden; background: var(--navy); color: var(--white); }
.ins-card > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s var(--ease); }
.ins-card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--c-scrim) / .28) 0%, rgb(var(--c-scrim) / 0) 22%, rgb(var(--c-scrim) / 0) 42%, rgb(var(--c-scrim) / .65) 70%, rgb(var(--c-scrim) / .95) 100%); }
.ins-card::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: rgb(var(--c-scrim) / .45); opacity: 0; transition: opacity .6s var(--ease); }
.ins-num { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: var(--sp-10); font: var(--fw-medium) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wider); color: rgb(var(--c-white) / .95); text-shadow: 0 1px 8px rgb(var(--c-black) / .35); }
.ins-num::after { content: ""; width: 22px; height: 1px; background: rgb(var(--c-white) / .65); transition: width .6s var(--ease); }
.ins-go { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-round); border: 1px solid rgb(var(--c-white) / .45); background: rgb(var(--c-scrim) / .2); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-size: var(--fs-base); transition: background-color .4s var(--ease), border-color .4s, transform .5s var(--ease); }
.ins-body { display: block; padding: 0 var(--sp-20) var(--sp-24); }
.ins-body h3 { position: relative; padding-top: var(--sp-16); font-size: var(--fs-h4); font-weight: var(--fw-medium); line-height: var(--lh-tight); letter-spacing: var(--tracking-snug); text-shadow: 0 2px 18px rgb(var(--c-black) / .45); }
.ins-body h3::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--accent); transition: width .6s var(--ease); }
.ins-more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease); }
.ins-more > div { overflow: hidden; }
.ins-more p { margin-top: var(--sp-12); font-size: var(--fs-sm); line-height: var(--lh-normal); color: rgb(var(--c-white) / .86); opacity: 0; transform: translateY(10px); transition: opacity .45s ease, transform .6s var(--ease); }
.ins-card:is(:hover, :focus-visible) > img { transform: scale(1.07); }
.ins-card:is(:hover, :focus-visible)::after { opacity: 1; }
.ins-card:is(:hover, :focus-visible) .ins-more { grid-template-rows: 1fr; }
.ins-card:is(:hover, :focus-visible) .ins-more p { opacity: 1; transform: none; transition-delay: .08s; }
.ins-card:is(:hover, :focus-visible) h3::before { width: 56px; }
.ins-card:is(:hover, :focus-visible) .ins-num::after { width: 40px; }
.ins-card:is(:hover, :focus-visible) .ins-go { background: var(--accent); border-color: var(--accent); transform: rotate(45deg); }
.ins-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (hover: none) { .ins-more { grid-template-rows: 1fr; } .ins-more p { opacity: 1; transform: none; } }
@media (max-width: 1000px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .ins-grid { grid-template-columns: 1fr; } }

/* Footer CTA: quieter background so the text and form lead */
.f-cta { background: var(--navy-900); border: 1px solid rgb(var(--c-white) / .07); box-shadow: 0 24px 50px -32px rgb(var(--c-scrim) / .45); }
.f-cta::before { background: radial-gradient(520px circle at 0% 0%, rgb(var(--c-accent) / .07), transparent 60%); }
.f-cta-arcs { display: none; }
.f-cta-form { background: rgb(var(--c-white) / .04); border-color: rgb(var(--c-white) / .07); }

/* ---------- FAQ (home) ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.faq-head { position: sticky; top: calc(var(--header-h) + 32px); }
.faq-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); max-width: 12ch; }
/* "Still have some questions?" card: copy and split button left, product assortment right */
.faq-ask { margin-top: clamp(40px, 6vw, 96px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 44%); align-items: center; gap: var(--sp-16); padding: clamp(22px, 2.2vw, 30px); background: var(--surface); }
.faq-ask-title { margin: 0 0 clamp(20px, 2vw, 28px); font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); color: var(--slate-700); }
.faq-ask-title em { display: block; font-style: normal; color: var(--accent); }
.faq-ask-btn { display: inline-flex; align-items: stretch; height: 54px; text-decoration: none; }
.fab-ic { width: 54px; display: grid; place-items: center; background: var(--slate-500); color: var(--white); font-size: var(--fs-base); transition: background-color .3s; }
.fab-tx { display: flex; align-items: center; padding: 0 clamp(14px, 1.3vw, 18px); background: var(--bg); color: var(--slate-500); font-size: var(--fs-md); letter-spacing: var(--tracking-slight); text-transform: uppercase; white-space: nowrap; transition: color .3s; }
.faq-ask-btn:hover .fab-ic, .faq-ask-btn:focus-visible .fab-ic { background: var(--accent-strong); }
.faq-ask-btn:hover .fab-tx, .faq-ask-btn:focus-visible .fab-tx { color: var(--accent-strong); }
.faq-ask-btn:hover .fab-ic i { transform: translate(2px, -2px); }
.fab-ic i { transition: transform .3s var(--ease); }
.faq-ask-img { width: 100%; height: auto; }
@media (max-width: 420px) { .faq-ask { grid-template-columns: 1fr; } .faq-ask-img { max-width: 260px; } }
.faq-list { border-top: var(--border); }
.faq-item { border-bottom: var(--border); }
.faq-item summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-24);
  padding: var(--sp-20) 0; font-size: var(--fs-h5); font-weight: var(--fw-strong); color: var(--ink); transition: color .25s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent-strong); }
.faq-ic { position: relative; flex-shrink: 0; width: 34px; height: 34px; border: var(--border); background: var(--surface); transition: background-color .3s, border-color .3s; }
.faq-ic::before, .faq-ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--ink); translate: -50% -50%; transition: transform .35s var(--ease), background-color .3s; }
.faq-ic::after { transform: rotate(90deg); }
.faq-item[open] .faq-ic { background: var(--accent-strong); border-color: var(--accent-strong); }
.faq-item[open] .faq-ic::before, .faq-item[open] .faq-ic::after { background: var(--white); }
.faq-item[open] .faq-ic::after { transform: rotate(0deg); }
.faq-a p { margin: 0; padding: 0 var(--sp-64) var(--sp-24) 0; font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); max-width: 64ch; }
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-a { animation: faq-in .45s var(--ease); }
  @keyframes faq-in { from { opacity: 0; transform: translateY(-6px); } }
}
@media (max-width: 960px) {
  .faq-grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .faq-head { position: static; }
  .faq-a p { padding-right: 0; }
}
/* CEO block hover: colour change only, no movement */
.ceo2-media:hover .ceo2-block, .ceo2-block:hover { transform: none; }
.ceo2-block { transition: background-color .5s var(--ease); }

/* Footer steps: the orange marker travels 1 -> 2 -> 3 */
.f-steps li:first-child .f-step-n { background: transparent; border-color: rgb(var(--c-white) / .28); }
.f-step-n { transition: background-color .5s var(--ease), border-color .5s var(--ease); }
.f-steps li b { transition: color .5s var(--ease); }
.f-steps li.on .f-step-n { background: var(--accent-strong); border-color: transparent; }
.f-steps li.on b { color: var(--white); }
.f-steps li:not(.on) b { color: rgb(var(--c-white) / .86); }
/* the oversized footer word must not extend the page (the CTA above still overlaps freely) */
.footer > .wrap:not(.f-cta-wrap) { overflow: hidden; }

/* Our factory header: label + heading left, paragraph + link right */
.inside-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(32px, 6vw, 112px); align-items: end; }
.inside-head .stats-eyebrow { grid-column: 1; grid-row: 1; }
.inside-head .inside-title { grid-column: 1; grid-row: 2; }
.inside-head .inside-lead { grid-column: 2; grid-row: 2; margin-top: 0; flex-direction: column; align-items: flex-start; gap: var(--sp-16); justify-self: end; max-width: 46ch; padding-bottom: var(--sp-6); }
.inside-head .inside-lead p { max-width: none; }
@media (max-width: 900px) {
  .inside-head { grid-template-columns: 1fr; }
  .inside-head .inside-lead { grid-column: 1; grid-row: 3; margin-top: var(--sp-20); justify-self: start; }
}
.inside-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.inside-head .inside-title { font-size: var(--fs-h2); }
@media (min-width: 901px) { .inside-head .inside-title { white-space: nowrap; } }
@media (max-width: 560px) { .inside-head .inside-title { font-size: var(--fs-4xl); } .inside-head .inside-title br { display: none; } }
.sc-btn { margin-top: var(--sp-24); }
.f-btn-primary:hover, .sc-btn:hover { background: var(--orange-700); }

/* Footer steps v2: progress path */
.f-step-n { position: relative; }
.f-step-n em { font-style: normal; transition: opacity .3s, transform .3s var(--ease); }
.f-step-n i { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-base); opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease); }
.f-steps li .f-step-n { background: transparent; border-color: rgb(var(--c-white) / .28); }
/* active: solid orange with a soft pulse */
.f-steps li.on .f-step-n { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: 0 0 0 0 rgb(var(--c-accent) / .45); animation: step-pulse 1.6s var(--ease) infinite; }
@keyframes step-pulse { 70% { box-shadow: 0 0 0 9px rgb(var(--c-accent) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--c-accent) / 0); } }
/* done: tinted orange with a tick */
.f-steps li.done .f-step-n { background: rgb(var(--c-accent) / .2); border-color: var(--accent); color: var(--accent); animation: none; box-shadow: none; }
.f-steps li.done .f-step-n em { opacity: 0; transform: scale(.5); }
.f-steps li.done .f-step-n i { opacity: 1; transform: none; }
.f-steps li.done b { color: var(--white); }
/* connector: grey track with an orange fill that runs down while the step is active */
.f-steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 4px; width: 2px; margin-left: -.5px;
  background: linear-gradient(var(--accent), var(--accent-strong)); transform-origin: top; transform: scaleY(0);
}
.f-steps li.on:not(:last-child)::after { transform: scaleY(1); transition: transform 2.4s linear; }
.f-steps li.done:not(:last-child)::after { transform: scaleY(1); transition: none; }

/* ---------- Hero v2 fixes ---------- */
.xhero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.xhero .xhero-title { max-width: 17ch; }
.xbtn-ghost {
  display: inline-flex; align-items: center; gap: var(--sp-10); height: 52px; padding: 0 var(--sp-24); border-radius: var(--radius-pill);
  border: 1px solid rgb(var(--c-white) / .55); color: var(--white); font-weight: var(--fw-strong); font-size: var(--fs-md); white-space: nowrap;
  background: rgb(var(--c-white) / .07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .25s, border-color .25s;
}
.xbtn-ghost:hover { background: rgb(var(--c-white) / .14); border-color: var(--white); }
.xbtn-ghost i { font-size: var(--fs-base); }
/* certification card replaces the duplicate 3000+ card */
.xcard-cert { min-height: 148px; padding: var(--sp-14); display: flex; flex-direction: column; color: var(--sand-950); transition: transform .45s var(--ease); }
.xcard-cert:hover { transform: translateY(-3px); }
.xcc-ic { width: 30px; height: 30px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-base); }
.xcard-cert b { margin-top: var(--sp-10); font-size: var(--fs-lg); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-tight); line-height: var(--lh-tight); }
.xcard-cert .xc-label { margin-top: var(--sp-4); }
.xcard-cert hr { width: 100%; border: 0; border-top: 1px solid var(--sand-200); margin: auto 0 var(--sp-10); }
.xcc-tags { display: flex; gap: var(--sp-6); }
.xcc-tags span { padding: var(--sp-2) var(--sp-8); border-radius: var(--radius-pill); background: var(--sand-50); font: var(--fw-semibold) var(--fs-3xs)/var(--lh-heading) var(--font-mono); color: var(--sand-700); }
/* stats now sit outside the cover sheet */
main > .stats { min-height: 0; }
.xhero .xhero-title { max-width: none; font-size: var(--fs-display); line-height: var(--lh-tight); }
@media (max-width: 1240px) and (min-width: 961px) { .xhero .xhero-title { font-size: var(--fs-7xl); } }
@media (max-width: 560px) { .xhero .xhero-title br { display: none; } }

/* Why choose us: square primary CTA + WhatsApp text link */
.why-ctas { margin-top: var(--sp-32); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-14) var(--sp-20); }
.why-chat { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-md); font-weight: var(--fw-strong); color: var(--ink); border-bottom: var(--border); padding-bottom: var(--sp-2); transition: color .25s, border-color .25s; }
.why-chat i { font-size: var(--fs-lg); color: var(--green-600); }
.why-chat:hover { color: var(--accent-strong); border-color: var(--accent-strong); }

/* At a glance heading: exactly two lines on desktop */
.stats-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.stats-title { max-width: none; font-size: var(--fs-h2); }
@media (min-width: 961px) { .stats-title { white-space: nowrap; } }
@media (max-width: 560px) { .stats-title br { display: none; } }
@media (max-width: 560px) { .stats-title { font-size: var(--fs-4xl); } }
@media (max-width: 960px) { .stats-head { grid-template-columns: 1fr; } }
/* Why choose us: WhatsApp as a filled green button beside the quote button */
.why-chat.f-btn { border-bottom: 0; padding: 0 var(--sp-20); color: var(--white); background: var(--green-600); font-size: var(--fs-sm); }
.why-chat.f-btn i { color: var(--white); }
.why-chat.f-btn:hover { background: var(--green-700); color: var(--white); }
.proof-title { max-width: none; font-size: var(--fs-h2); }
@media (min-width: 640px) { .proof-title { white-space: nowrap; } }
/* CEO photo: no offset block behind it */
.ceo2-media { margin: 0; }
.ceo2-body { padding-bottom: 0; }

/* ---------- About the company (home): text, wide photo, overlapping info cards ---------- */
.abc { padding-bottom: clamp(56px, 6vw, 88px) !important; }
.abc-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 112px); align-items: end; }
.abc-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tighter); }
.abc-title em { font-style: normal; color: var(--accent); }
.abc-lead { padding-left: var(--sp-24); border-left: var(--border-accent); }
.abc-lead p { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--muted); }
.abc-lead .link { margin-top: var(--sp-14); }
.abc-media { margin-top: clamp(36px, 4vw, 56px); height: clamp(320px, 38vw, 560px); overflow: hidden; }
.abc-media img { width: 100%; height: 118%; object-fit: cover; transform: translate3d(0, var(--py, 0), 0); }
.abc-cards { position: relative; z-index: 1; margin-top: calc(clamp(80px, 9vw, 140px) * -1); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-16); }
.abc-card { position: relative; overflow: hidden; background: linear-gradient(180deg, rgb(var(--c-white) / .86), var(--white) 55%); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgb(var(--c-white) / .55); box-shadow: 0 24px 50px -30px rgb(var(--c-ink) / .45); padding: var(--sp-20); min-height: 230px; color: var(--ink); }
.abc-why { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--sp-16); }
.abc-why-t { display: flex; flex-direction: column; justify-content: space-between; padding: var(--sp-14) var(--sp-4) var(--sp-6) var(--sp-14); }
.abc-why-t h3 { font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--tracking-tight); color: var(--navy); }
.abc-more { display: inline-flex; align-items: center; gap: var(--sp-8); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.abc-more i { width: 26px; height: 26px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); font-size: var(--fs-xs); font-style: normal; transition: background-color .25s, color .25s; }
.abc-more:hover i { background: var(--accent-strong); color: var(--white); }
.abc-inner { background: var(--white); border: var(--border); padding: var(--sp-20); display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sp-6); min-height: 190px; }
.abc-inner > i { font-size: var(--fs-3xl); color: var(--accent-strong); margin-bottom: auto; }
.abc-inner span { font-size: var(--fs-sm); color: var(--muted); }
.abc-inner b { font-size: var(--fs-h4); font-weight: var(--fw-book); letter-spacing: var(--tracking-tight); color: var(--navy); line-height: var(--lh-tight); }
.abc-thumb { overflow: hidden; }
.abc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.abc-why:hover .abc-thumb img { transform: scale(1.05); }
.abc-cert { display: block; transition: box-shadow .4s var(--ease); }
.abc-cert:hover { box-shadow: 0 30px 60px -30px rgb(var(--c-ink) / .55); }
.abc-inner-wide { height: 100%; }
.abc-avs { display: flex; margin-top: var(--sp-10); }
.abc-avs img { width: 38px; height: 38px; border-radius: var(--radius-pill); object-fit: cover; object-position: top; border: 2px solid var(--white); box-shadow: 0 0 0 1px var(--line); background: var(--white); }
.abc-avs img + img { margin-left: -10px; }
.abc-photo { padding: var(--sp-20); display: flex; align-items: stretch; }
.abc-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.abc-glass { position: relative; width: 62%; background: rgb(var(--c-white) / .75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-color: rgb(var(--c-white) / .65); }
@media (max-width: 1100px) {
  .abc-cards { grid-template-columns: 1fr 1fr; }
  .abc-why { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .abc-head { grid-template-columns: 1fr; }
  .abc-cards { grid-template-columns: 1fr; margin-top: -60px; }
  .abc-why { grid-template-columns: 1fr 1fr; }
  .abc-why-t { grid-column: 1 / -1; gap: var(--sp-16); }
  .abc-glass { width: 100%; }
}
.abc-glass { width: 72%; }
.abc-glass b { white-space: nowrap; font-size: var(--fs-h4); }
.abc-media img { object-position: center 40%; }

/* ---------- All pages: 80% container (10% side margins), balanced ---------- */
.page-home { --gutter: var(--gutter-wide); }
.page-home .header .wrap, .page-home .xhero .wrap { padding-inline: var(--gutter); }
@media (max-width: 900px) { .page-home { --gutter: var(--gutter-narrow); } }
/* home hero balanced for the 80% container */
@media (min-width: 961px) { .is-home .xhero-inner { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 340px); gap: var(--sp-40); } }
.is-home .xhero .xhero-title { font-size: var(--fs-h1); }
/* hero product card: image sized from the bento width so it never runs past the card edge */
.xbento { container-type: inline-size; }
.is-home .xprod { grid-template-columns: minmax(0, 1fr) auto; }
.is-home .xp-media { width: clamp(112px, 42cqw, 152px); margin: var(--sp-10) var(--sp-10) var(--sp-10) var(--sp-4); align-self: center; height: auto; aspect-ratio: 1; }
.is-home .xprod .xc-txt { padding: var(--sp-16) var(--sp-8) var(--sp-16) var(--sp-16); }
@container (max-width: 330px) { .is-home .xprod .xmini { display: none; } .is-home .xp-item p { font-size: var(--fs-2xs); } }
/* home: video card follows the 80% container */
.is-home .showcase { --svw: min(calc(100vw - 2 * var(--gutter)), 1180px); --sv-h0: calc(var(--svw) * .525); }
.is-home .sv-frame .showcase-video.vid { clip-path: inset(calc((100dvh - var(--sv-h0)) / 2) calc((100% - var(--svw)) / 2)); }
.is-home .sv-track.no-expand .sv-frame { width: var(--svw); }
/* hero cert card: let the label wrap instead of clipping */
.xcard-cert .xc-label { white-space: normal; }
.is-home .showcase { --svw: min(calc(100vw - 2 * var(--gutter)), 1600px); }

/* ---------- Loading screen (first page of a session) ---------- */
.site-loader { display: none; }
.show-loader .site-loader {
  display: grid; place-items: center; position: fixed; inset: 0; z-index: 100; background: var(--navy); color: var(--white);
  clip-path: inset(0 0 0 0); transition: clip-path 1s cubic-bezier(.77, 0, .18, 1);
}
.show-loader .site-loader::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgb(var(--c-white) / .04) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--c-white) / .04) 1px, transparent 1px);
  background-size: 72px 72px; -webkit-mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, var(--black), transparent 80%); mask-image: radial-gradient(ellipse 60% 60% at 50% 50%, var(--black), transparent 80%); }
.sl-inner { position: relative; width: min(360px, 78vw); display: flex; flex-direction: column; gap: var(--sp-20); }
.sl-logo { height: 26px; width: auto; align-self: center; filter: brightness(0) invert(1); opacity: 0; transform: translateY(8px); animation: sl-in .8s var(--ease) .1s forwards; }
.sl-bar { height: 2px; background: rgb(var(--c-white) / .14); overflow: hidden; }
.sl-bar span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--sl, 0)); transition: transform .25s linear; }
.sl-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-2xs); color: rgb(var(--c-white) / .55); opacity: 0; animation: sl-in .8s var(--ease) .25s forwards; }
.sl-count { font: var(--fw-medium) var(--fs-xs)/var(--lh-none) var(--font-mono); color: var(--white); }
.sl-count::after { content: "%"; color: rgb(var(--c-white) / .45); }
@keyframes sl-in { to { opacity: 1; transform: none; } }
.show-loader.loader-done .site-loader { clip-path: inset(0 0 100% 0); pointer-events: none; }
.show-loader.loader-gone .site-loader { display: none; }
.show-loader:not(.loader-done) body { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .show-loader .site-loader { transition: opacity .3s; }
  .show-loader.loader-done .site-loader { clip-path: none; opacity: 0; }
  .sl-logo, .sl-meta { animation: none; opacity: 1; transform: none; }
}

/* ---------- Industries orbit (home): the company at the centre, industries on the ring,
   that industry's products as white cards scattered on the left ---------- */
.orbit-sec { padding-block: var(--section-y-feature) !important; }
/* backdrop: our moulding machine, desaturated and sunk into near-black navy; a vignette keeps the centre calm for the ring */
.orbit-sec { background: var(--navy-950); }
.orbit-sec::before { display: none; }
.orbit-sec::after { background: radial-gradient(ellipse 48% 58% at 50% 50%, var(--navy-950) 35%, rgb(var(--c-scrim) / .86) 62%, rgb(var(--c-scrim) / .45) 100%),
  linear-gradient(180deg, var(--navy-950), transparent 18%, transparent 82%, var(--navy-950)); }
.orbit-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.orbit-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: .55;
  filter: grayscale(1) contrast(1.2) brightness(.5) sepia(.35) hue-rotate(180deg) saturate(1.4); transform: scale(1.06); animation: orbit-drift 40s ease-in-out infinite alternate; }
@keyframes orbit-drift { to { transform: scale(1.14) translate(-1.5%, -1%); } }
.orbit-head { display: grid; justify-items: center; gap: var(--sp-12); text-align: center; }
.orbit-title { margin-top: var(--sp-16); font-size: var(--fs-h2); font-weight: var(--fw-book); letter-spacing: var(--tracking-tighter); line-height: var(--lh-tight); color: var(--white); }
.orbit-lede { color: var(--ink-2); font-size: var(--fs-base); line-height: var(--lh-relaxed); max-width: 44ch; }
.orbit-grid { position: relative; margin-top: clamp(36px, 4.5vw, 64px); }
.orbit-side { position: relative; z-index: 1; width: min(100%, 580px, 44vw); margin-inline: auto; }
.orbit { position: relative; width: 100%; aspect-ratio: 1; }
.orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit-lines circle { fill: none; stroke: rgb(var(--c-white) / .1); stroke-width: .18; }
.orbit-lines .ol-faint { stroke: rgb(var(--c-white) / .07); }
.orbit-lines .ol-dots { stroke: rgb(var(--c-white) / .2); stroke-dasharray: .25 .9; stroke-linecap: round; stroke-width: .3; }
.ol-spoke { stroke: rgb(var(--c-white) / .1); stroke-width: .18; transition: stroke .4s; }
.ol-spoke.on { stroke: var(--accent); stroke-width: .35; stroke-dasharray: 1 1; animation: ol-flow 1.2s linear infinite; }
@keyframes ol-flow { to { stroke-dashoffset: -2; } }
.orbit-sat { position: absolute; inset: 0; animation: orbit-spin 26s linear infinite; pointer-events: none; }
.orbit-sat i { position: absolute; left: 50%; top: 21%; width: 9px; height: 9px; translate: -50% -50%; border-radius: var(--radius-round); background: var(--amber-500); box-shadow: 0 0 12px 2px rgb(var(--c-amber) / .55); }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
.orbit-core {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 33%; aspect-ratio: 1; border-radius: var(--radius-round);
  display: grid; place-content: center; justify-items: center; gap: var(--sp-2); text-align: center;
  border: 2px solid transparent;
  background: radial-gradient(circle at 35% 25%, var(--navy-600), var(--navy-900) 70%) padding-box, conic-gradient(from 200deg, var(--accent), rgb(var(--c-blue) / .86), rgb(var(--c-white) / .1), var(--accent)) border-box;
  box-shadow: 0 0 0 10px rgb(var(--c-white) / .04), 0 30px 60px -20px rgb(var(--c-black) / .65);
}
.oc-mark { /* the logo's S badge, drawn in CSS: the only logo file is 24px tall */
  width: clamp(30px, 9vw, 54px); aspect-ratio: 1; margin-bottom: var(--sp-12); display: grid; place-items: center; border-radius: 14%;
  background: var(--accent); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--white);
  font: italic 700 clamp(1.2rem, 4vw, 2.1rem)/1 Georgia, "Times New Roman", serif; color: var(--white);
}
.orbit-core b { font-size: clamp(.95rem, 2.2vw, 1.3rem); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--white); line-height: var(--lh-none); }
.oc-sub { font: 500 clamp(8px, 1.3vw, 10px)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.orbit-node {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: clamp(46px, 13%, 76px); aspect-ratio: 1; border-radius: var(--radius-round);
  display: grid; place-items: center; cursor: pointer; color: var(--white); font-size: clamp(18px, 4vw, 26px);
  background: var(--navy-700); border: 1px solid rgb(var(--c-white) / .2); box-shadow: 0 12px 30px -12px rgb(var(--c-black) / .65);
  transition: background-color .4s var(--ease), border-color .4s, box-shadow .5s var(--ease), scale .5s var(--ease), color .3s;
}
.orbit-node::after { content: ""; position: absolute; right: 9%; top: 9%; width: 7px; height: 7px; border-radius: var(--radius-round); background: var(--blue-400); }
.orbit-node:nth-of-type(even)::after { background: var(--amber-500); }
.orbit-node:hover, .orbit-node:focus-visible { border-color: rgb(var(--c-white) / .55); }
.orbit-node:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
.orbit-node.on { background: var(--accent); border-color: var(--accent); scale: 1.14; box-shadow: 0 0 0 9px rgb(var(--c-accent) / .2), 0 0 46px 6px rgb(var(--c-accent) / .45); }
.orbit-node.on::after { background: var(--white); }
.on-label { position: absolute; top: calc(100% + 10px); left: 50%; translate: -50% 0; white-space: nowrap; font: var(--fw-medium) var(--fs-3xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); transition: color .3s; }
.orbit-node.on .on-label { color: var(--white); }
.orbit-cap { display: grid; margin-top: clamp(28px, 3vw, 44px); text-align: center; }
.oc-item { grid-area: 1 / 1; display: grid; justify-items: center; gap: var(--sp-10); opacity: 0; translate: 0 10px; transition: opacity .45s var(--ease), translate .6s var(--ease); }
.oc-item.on { opacity: 1; translate: 0 0; }
.oc-num { font: var(--fw-medium) var(--fs-3xs)/var(--lh-none) var(--font-mono); letter-spacing: .18em; text-transform: uppercase; color: var(--accent-strong); }
.oc-item h3 { font-size: var(--fs-h4); font-weight: var(--fw-medium); letter-spacing: var(--tracking-tight); color: var(--white); }
.oc-item p { color: var(--ink-2); max-width: 46ch; line-height: var(--lh-relaxed); }
.oc-item .chips { justify-content: center; }
.oc-item .link { color: var(--white); margin-top: var(--sp-4); }

/* small product cards scattered either side of the ring: one set per industry, the active set flies out from the centre */
.scatter { position: absolute; inset: 0; z-index: 2; pointer-events: none; perspective: 1200px; }
.sc-set { position: absolute; inset: 0; pointer-events: none; }
.sc-set.on .scard { pointer-events: auto; }
.scard {
  position: absolute; left: var(--x); top: var(--y); width: clamp(104px, 9.2vw, 132px); z-index: 1;
  opacity: 0; transform: translate3d(var(--fx, 0px), 20px, 0) rotate(calc(var(--r) * 3)) scale(.6);
  transition: transform .5s var(--ease), opacity .3s ease; /* leaving: quick, no stagger */
}
.sc-set.on .scard { opacity: 1; transform: rotate(var(--r)); transition: transform 1.1s var(--ease) var(--dl), opacity .6s ease var(--dl); }
.sc-set:not(.on) .scard { transform: translate3d(-18px, 24px, 0) rotate(var(--r)) scale(.9); }
.sc-set.on .scard:hover, .sc-set.on .scard:focus-visible { z-index: 5; transform: rotate(0deg) scale(1.06); transition: transform .6s var(--ease); }
.sc-float { display: block; animation: sc-bob var(--fl) ease-in-out infinite alternate; }
@keyframes sc-bob { from { translate: 0 -5px; } to { translate: 0 5px; } }
.scard:hover .sc-float { animation-play-state: paused; }
.sc-in {
  display: block; padding: var(--sp-6); border-radius: var(--radius-md); background: var(--white); color: var(--navy-800);
  box-shadow: 0 1px 0 rgb(var(--c-white) / .86) inset, 0 2px 4px rgb(var(--c-scrim) / .28), 0 28px 50px -22px rgb(var(--c-black) / .75);
  transform: rotateX(var(--ty, 0deg)) rotateY(var(--tx, 0deg)); transform-style: preserve-3d;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.scard:hover .sc-in { transition: transform .12s linear, box-shadow .5s var(--ease); box-shadow: 0 1px 0 var(--white) inset, 0 4px 8px rgb(var(--c-scrim) / .28), 0 44px 70px -24px rgb(var(--c-black) / .86), 0 0 0 1px rgb(var(--c-accent) / .45); }
.sc-top { display: grid; gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-6); }
.sc-label { font: var(--fw-semibold) 8.5px/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--orange-600); }
.sc-top b { font-size: var(--fs-3xs); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sc-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(160deg, var(--slate-50), var(--slate-200)); }
.sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.sc-img.contain img { object-fit: contain; padding: 10%; mix-blend-mode: multiply; } /* hanger shots sit on white */
.scard:hover .sc-img img { transform: scale(1.08); }
.sc-img::after { /* glare that follows the pointer */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(160px circle at var(--gx, 50%) var(--gy, 0%), rgb(var(--c-white) / .55), transparent 60%);
}
.scard:hover .sc-img::after { opacity: 1; }
.scard:focus-visible { outline: none; }
.scard:focus-visible .sc-in { box-shadow: 0 0 0 3px var(--white), 0 28px 50px -22px rgb(var(--c-black) / .75); }

@media (max-width: 1100px) {
  .orbit-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
  .orbit-side { order: 1; width: min(100%, 560px); }
  /* cards become a swipeable row under the ring */
  .scatter { order: 2; position: static; pointer-events: auto; perspective: none; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--sp-28); }
  .sc-set { position: static; grid-area: 1 / 1; display: flex; gap: var(--sp-14); overflow-x: auto; padding: var(--sp-8) var(--sp-2) var(--sp-16); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .sc-set:not(.on) { visibility: hidden; }
  .scard { position: relative; left: auto; top: auto; flex: 0 0 140px; width: auto; scroll-snap-align: start; }
  .sc-set.on .scard { transform: none; }
  .sc-float { animation: none; }
}
@media (max-width: 600px) {
  .on-label { display: none; }
  .orbit-node::after { width: 5px; height: 5px; }
  .oc-mark { margin-bottom: var(--sp-4); box-shadow: inset 0 0 0 1.5px var(--accent), inset 0 0 0 3px var(--white); }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-sat, .ol-spoke.on, .sc-float, .orbit-bg img { animation: none; }
  .scard, .sc-set.on .scard { transition: opacity .3s; transform: rotate(var(--r)); }
}

/* ---------- Loading screen v2: outlined SHANS wordmark filling with water, full-width bottom line ---------- */
.show-loader .site-loader { display: block; }
.sl-inner { display: none; }
.sl-word { position: absolute; left: 50%; top: 46%; translate: -50% -50%; width: min(1100px, 88vw); height: auto; overflow: visible; }
.sl-t1 { font: var(--fw-bold) 196px/var(--lh-none) var(--font-sans); letter-spacing: var(--tracking-tightest); }
.sl-t2 { font: var(--fw-medium) var(--fs-7xl)/var(--lh-none) var(--font-sans); letter-spacing: .32em; }
.sl-outline { fill: none; stroke: rgb(var(--c-white) / .28); stroke-width: 1.2px; }
.sl-level { transition: transform .35s linear; }
.sl-wave path { fill: var(--accent); }
.sl-wave { animation: sl-wave 2.2s linear infinite; }
.sl-wave2 { opacity: .45; animation-duration: 3.4s; animation-direction: reverse; }
.sl-wave2 path { fill: var(--orange-300); }
@keyframes sl-wave { from { transform: translateX(0); } to { transform: translateX(-1000px); } }
.sl-foot { position: absolute; left: 0; right: 0; bottom: 0; }
.sl-foot .sl-meta { display: flex; justify-content: space-between; align-items: baseline; padding: 0 var(--gutter, 40px) var(--sp-14); opacity: 1; animation: none; font: var(--fw-medium) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgb(var(--c-white) / .55); }
.sl-foot .sl-count { font: 500 clamp(2.4rem, 6vw, 5rem)/.9 var(--font-sans); letter-spacing: var(--tracking-tightest); color: var(--white); text-transform: none; }
.sl-foot .sl-count::after { content: "%"; font-size: .4em; color: rgb(var(--c-white) / .45); margin-left: var(--sp-4); vertical-align: top; }
.sl-foot .sl-bar { height: 4px; background: rgb(var(--c-white) / .1); }
.sl-foot .sl-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--sl, 0)); transition: transform .25s linear; }
@media (prefers-reduced-motion: reduce) { .sl-wave { animation: none; } }
/* stats bento now sits under the About-the-company cards */
.abc-stats .stats-grid { margin-top: var(--sp-16); }
/* About section: nine cards, one look. A soft cool-grey section ground lets pure white cards stand out without any
   shadow; every card gets the same hairline edge, which warms to the brand orange on hover. */
.section.abc { background-color: var(--slate-100); }
.abc-card, .abc-stats .st { background: var(--white); border: 1px solid rgb(var(--c-navy) / .1); box-shadow: none; transition: border-color .35s var(--ease), transform .5s var(--ease); }
.abc-card:hover, .abc-cert:hover, .abc-stats .st:hover { border-color: rgb(var(--c-accent) / .45); box-shadow: none; }
.abc-stats .st-hero { background: var(--accent-strong); border-color: var(--accent-strong); }
.abc-stats .st-dark { background: var(--navy); border-color: var(--navy); }
.abc-stats .st-hero:hover, .abc-stats .st-dark:hover { border-color: rgb(var(--c-navy) / .45); }
/* image stat card: factory photo under a navy wash, white figures */
.abc-stats .st-img { background: var(--navy); border-color: var(--navy); color: var(--white); }
.st-img > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.st-img::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgb(var(--c-navy) / .35), rgb(var(--c-navy) / .86)); }
.st-img .st-label { color: rgb(var(--c-white) / .86); }
.st-img:hover > img { transform: scale(1.06); }
.abc-inner { border-color: rgb(var(--c-navy) / .07); }
@media (min-width: 1101px) { .abc-stats .stats-grid { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); } }
.stats .stats-head { margin-bottom: 0; }
.abc-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.abc-title { font-size: var(--fs-h2); }
@media (min-width: 901px) { .abc-title { white-space: nowrap; } }
@media (max-width: 560px) { .abc-title { font-size: var(--fs-4xl); } .abc-title br { display: none; } }
@media (max-width: 900px) { .abc-head { grid-template-columns: 1fr; } }

/* ---------- Home: first-scroll pop-in for text and cards (classes added by site.js) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .pop:not(.in) { opacity: 0; }
  .js .pop.in { animation: popIn .9s var(--ease) var(--pd, 0s) both; }
  @keyframes popIn { from { opacity: 0; translate: 0 18px; scale: .985; filter: blur(3px); } }
}

/* ---------- Home spacing: one shorter rhythm for every section ---------- */
.is-home { --sec-pad: var(--section-y); }
.is-home.page-home main .section:not(.tl-pin):not(.band) { padding-block: var(--sec-pad) !important; }
/* order builder continues the products section: same background, no second top padding */
.is-home.page-home main .section.prods + .section.ob { padding-top: 0 !important; }

/* ---------- Industries: copy on the left, the ring on the right, product cards in a row underneath ---------- */
.orbit-sec::after { background: radial-gradient(ellipse 40% 58% at 70% 46%, var(--navy-950) 32%, rgb(var(--c-scrim) / .86) 60%, rgb(var(--c-scrim) / .55) 100%),
  linear-gradient(180deg, var(--navy-950), transparent 18%, transparent 82%, var(--navy-950)); }
.orbit-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(40px, 5vw, 88px); row-gap: clamp(36px, 4vw, 56px); align-items: center; }
.orbit-left { display: grid; gap: clamp(28px, 3vw, 40px); align-content: center; min-width: 0; }
.orbit-head { justify-items: start; text-align: left; gap: var(--sp-14); }
.orbit-lede { max-width: 40ch; }
.orbit-cap { margin-top: 0; text-align: left; padding-top: var(--sp-28); border-top: 1px solid rgb(var(--c-white) / .1); }
.oc-item { justify-items: start; }
.oc-item .chips { justify-content: flex-start; }
.orbit-side { width: 100%; max-width: 600px; margin: 0 auto; padding: 7%; }
.orbit { overflow: visible; }

/* numbered labels around the ring */
.orbit-lbl { position: absolute; left: var(--x); top: var(--y); display: grid; gap: var(--sp-2); white-space: nowrap; pointer-events: none;
  font: var(--fw-medium) var(--fs-3xs)/var(--lh-tight) var(--font-mono); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgb(var(--c-white) / .45); transition: color .35s; }
.orbit-lbl i { font-style: normal; font-size: 10px; color: rgb(var(--c-white) / .35); transition: color .35s; }
.orbit-lbl.on { color: var(--white); }
.orbit-lbl.on i { color: var(--accent); }
.orbit-lbl[data-side="ct"] { translate: -50% -100%; justify-items: center; text-align: center; }
.orbit-lbl[data-side="cb"] { translate: -50% 0; justify-items: center; text-align: center; }
.orbit-lbl[data-side="rt"], .orbit-lbl[data-side="rb"] { translate: 0 -50%; }
.orbit-lbl[data-side="lt"], .orbit-lbl[data-side="lb"] { translate: -100% -50%; justify-items: end; text-align: right; }

/* minimal ring: one hairline, a comet of light circling it, an accent arc that glides to the active node,
   a single connector that draws in with a pulse riding it, and a quiet ping on the active node */
.orbit-lines .ol-ring { fill: none; stroke: rgb(var(--c-white) / .14); stroke-width: .16; }
.ol-comet { fill: none; stroke-width: .3; stroke-linecap: round; transform-box: view-box; transform-origin: 50% 50%; animation: orbit-spin 14s linear infinite; }
.ol-arc { fill: none; stroke: var(--accent); stroke-width: .45; stroke-linecap: round; transform-box: view-box; transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg)); transition: transform 1.1s var(--ease); filter: drop-shadow(0 0 1px rgb(var(--c-accent) / .65)); }
.ol-spoke path { fill: none; stroke: rgb(var(--c-accent) / .75); stroke-width: .22; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s ease; animation: none; }
.ol-spoke.on path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s var(--ease) .25s; }
.ol-spoke, .ol-spoke.on { stroke: none; animation: none; }
.ol-spoke circle { stroke: none; fill: var(--white); opacity: 0; transition: opacity .3s; filter: drop-shadow(0 0 1px var(--white)); }
.ol-spoke.on circle { opacity: .9; transition: opacity .4s 1s; }

.orbit-core { border: 1px solid rgb(var(--c-white) / .1); background: radial-gradient(circle at 50% 30%, var(--navy-700), var(--navy-900) 72%); box-shadow: 0 30px 60px -24px rgb(var(--c-black) / .75); overflow: visible; }
.orbit-core::before { /* a slow light sweep travelling round the core's edge */
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-round); padding: 1px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 70%, rgb(var(--c-white) / .55) 88%, var(--accent) 96%, transparent 100%);
  -webkit-mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: orbit-spin 9s linear infinite; }
.orbit-core::after { content: ""; position: absolute; inset: -14%; border-radius: var(--radius-round); z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--c-accent) / .1), transparent); }
.oc-mark { width: clamp(28px, 7.5vw, 44px); margin-bottom: var(--sp-10); }

.orbit-node { width: clamp(42px, 11%, 62px); font-size: clamp(16px, 3.4vw, 22px); color: rgb(var(--c-white) / .75);
  background: rgb(var(--c-scrim) / .86); border: 1px solid rgb(var(--c-white) / .14); box-shadow: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.orbit-node::after { content: none; }
.orbit-node:hover, .orbit-node:focus-visible { color: var(--white); border-color: rgb(var(--c-white) / .45); }
.orbit-node.on { color: var(--white); background: var(--accent); border-color: var(--accent); scale: 1.08; box-shadow: 0 0 0 6px rgb(var(--c-accent) / .14), 0 12px 30px -10px rgb(var(--c-accent) / .65); }
.orbit-node::before { content: ""; position: absolute; inset: -1px; border-radius: var(--radius-round); border: 1px solid var(--accent); opacity: 0; pointer-events: none; }
.orbit-node.on::before { animation: node-ping 2.6s var(--ease) infinite; }
@keyframes node-ping { 0% { opacity: .7; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .ol-comet, .orbit-core::before, .orbit-node.on::before { animation: none; } .ol-spoke circle { display: none; } }

/* product cards: six white shells in a row under both columns; only their content changes */
.scatter { grid-column: 1 / -1; position: relative; inset: auto; pointer-events: auto; perspective: none;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-14); }
.scard { position: relative; left: auto; top: auto; width: auto; opacity: 1; transform: none; transition: transform .5s var(--ease); }
.scard:hover { transform: translateY(-4px); }
.sc-in { display: grid; padding: var(--sp-6); border-radius: var(--radius-md); }
/* hover shine: a soft diagonal band of light sweeps across the card from left to right, once per hover */
.sc-in { position: relative; overflow: hidden; isolation: isolate; }
.sc-in::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, transparent 30%, rgb(var(--c-white) / .2) 42%, rgb(var(--c-white) / .75) 50%, rgb(var(--c-white) / .2) 58%, transparent 70%);
  transform: translateX(-110%); }
.scard:hover .sc-in::after, .scard:focus-visible .sc-in::after { transform: translateX(110%); transition: transform .9s cubic-bezier(.3, .6, .2, 1); }
@media (prefers-reduced-motion: reduce) { .sc-in::after { display: none; } }
.sc-layer { grid-area: 1 / 1; display: grid; color: inherit; text-decoration: none; visibility: hidden; transition: visibility 0s .5s; }
.sc-layer.on { visibility: visible; transition: none; }
.sc-img { aspect-ratio: 16 / 10; }
.sc-top b { -webkit-line-clamp: 1; }
/* text: the outgoing line drops and blurs out, the new one rises in (hero rotator style) */
.sc-layer .sc-top { opacity: 0; transform: translateY(-6px); filter: blur(3px); transition: opacity .35s ease, transform .45s var(--ease), filter .35s; }
.sc-layer.on .sc-top { opacity: 1; transform: none; filter: none; transition: opacity .55s ease calc(var(--dl) + .2s), transform .8s var(--ease) calc(var(--dl) + .2s), filter .55s calc(var(--dl) + .2s); }
/* image: the new picture wipes in from left to right over the old one */
.sc-layer .sc-img { z-index: 0; transition: opacity .3s ease .45s; opacity: 0; }
.sc-layer.on .sc-img { z-index: 1; opacity: 1; transition: none; animation: scWipe .95s var(--ease) var(--dl) both; }
.sc-layer.on .sc-img img { animation: scZoom 1.2s var(--ease) var(--dl) both; }
@keyframes scWipe { from { clip-path: inset(0 100% 0 0 round 7px); } to { clip-path: inset(0 0 0 0 round 7px); } }
@keyframes scZoom { from { transform: scale(1.15); } to { transform: scale(1); } }
.sc-empty { display: block; }

/* industry title: wipes in from left to right */
.oc-item h3 { clip-path: inset(0 100% 0 0); transition: clip-path .45s var(--ease); }
.oc-item.on h3 { clip-path: inset(0 -2% 0 0); transition: clip-path 1s var(--ease) .12s; }

@media (max-width: 1100px) {
  .scatter { display: flex; gap: var(--sp-14); overflow-x: auto; padding: var(--sp-8) var(--sp-2) var(--sp-16); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .scard { flex: 0 0 150px; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) {
  .sc-layer.on .sc-img, .sc-layer.on .sc-img img { animation: none; }
  .oc-item h3 { clip-path: none; transition: none; }
}
@media (max-width: 1100px) {
  .orbit-layout { grid-template-columns: minmax(0, 1fr); row-gap: var(--sp-28); }
  .orbit-left { display: contents; }
  .orbit-head { order: 1; }
  .orbit-side { order: 2; padding: 9%; }
  .orbit-cap { order: 3; }
  .scatter { order: 4; margin-top: 0; }
}
@media (max-width: 600px) {
  .orbit-lbl { font-size: 9px; letter-spacing: var(--tracking-wider); }
  .orbit-lbl i { font-size: 8.5px; }
  .orbit-side { padding: 10% 18%; }
}

/* ---------- Why choose us: six separate cards; the hovered one lifts and lights up, the rest step back ---------- */
.why-list { border-top: 0; gap: var(--sp-14); }
.why-card, .why-card:nth-child(even), .why-card:nth-child(odd) {
  display: flex; flex-direction: column; padding: var(--sp-24) var(--sp-24) var(--sp-28); border: var(--border); border-right: var(--border);
  background: var(--surface); overflow: hidden; outline: none;
  transition: transform .5s var(--ease), border-color .35s, box-shadow .5s var(--ease), opacity .4s, background-color .35s; }
.why-top { display: flex; justify-content: space-between; align-items: flex-start; }
.why-n { font: var(--fw-medium) var(--fs-2xs)/var(--lh-none) var(--font-mono); letter-spacing: var(--tracking-widest); color: var(--slate-300); transition: color .35s; }
.why-card h3 { margin-top: var(--sp-20); }
.why-card p { max-width: 34ch; }
.why-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.why-card:hover, .why-card:focus-visible { transform: translateY(-6px); border-color: rgb(var(--c-accent-strong) / .45); background: var(--white);
  box-shadow: 0 28px 50px -30px rgb(var(--c-navy) / .45), 0 0 0 1px rgb(var(--c-accent-strong) / .1); }
.why-card:hover .why-n, .why-card:focus-visible .why-n { color: var(--accent-strong); }
.why-card:hover .why-bar, .why-card:focus-visible .why-bar { transform: scaleX(1); }
.why-card:focus-visible .why-ic { background: var(--accent-strong); color: var(--white); transform: rotate(-6deg); }
@media (hover: hover) { .why-list:hover .why-card:not(:hover) { opacity: .55; } }
@media (max-width: 900px) { .why-card, .why-card:nth-child(even) { padding: var(--sp-20) var(--sp-20) var(--sp-24); } }

/* auto-typed heading (site.js): characters keep their space while hidden; the caret leads and fades when done */
.typing .tc { visibility: hidden; }
.typing .tc.on { visibility: visible; }
.t-caret { display: inline-block; width: 3px; height: .92em; margin: 0 -3px 0 0; vertical-align: -.08em; background: var(--accent); animation: tcBlink 1s steps(1) infinite; transition: opacity .5s; }
.t-caret.done { opacity: 0; }
@keyframes tcBlink { 50% { opacity: 0; } }

/* block reveal: an orange bar sweeps across each line left to right, the words appear as it leaves */
.blk-l { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .blk-l, .js .blk-l em { color: transparent; }
  .js .blk-l::after { content: ""; position: absolute; inset: 4% -2px 2%; background: var(--accent); transform: scaleX(0); transform-origin: left; pointer-events: none; }
  .js .blk.in .blk-l { animation: blkText .01s linear calc(var(--bd, 0s) + .42s) forwards; }
  .js .blk.in .blk-l em { animation: blkEm .01s linear calc(var(--bd, 0s) + .42s) forwards; }
  .js .blk.in .blk-l::after { animation: blkBar .85s cubic-bezier(.77, 0, .18, 1) var(--bd, 0s) forwards; }
  @keyframes blkBar { 0% { transform: scaleX(0); transform-origin: left; } 49% { transform: scaleX(1); transform-origin: left; } 51% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
  @keyframes blkText { to { color: var(--navy); } }
  @keyframes blkEm { to { color: var(--accent); } }
}