/* ============================================
   MARS GROUP — inner pages
   Builds on style.css: tokens, header, footer, lead form (lf-), FAQ (fq-)
   ============================================ */
html.free-scroll{ scroll-snap-type: none; }
/* the home page and the robots landing keep their own one-screen sections (style.css) */
body:not(.page-home):not(.page-robots-landing) .section{ min-height: 0; padding: clamp(80px, 11vh, 130px) 0; }

/* reveal: children rise out of a soft blur, one after another */
@keyframes rv-up{ from{ opacity: 0; transform: translateY(36px); filter: blur(8px); } }
.rvg:not(.is-visible) > *{ opacity: 0; }
.rvg.is-visible > *{ animation: rv-up 1s var(--ease) backwards; }
.rvg.is-visible > :nth-child(2){ animation-delay: .08s; }
.rvg.is-visible > :nth-child(3){ animation-delay: .16s; }
.rvg.is-visible > :nth-child(4){ animation-delay: .24s; }
.rvg.is-visible > :nth-child(5){ animation-delay: .32s; }
.rvg.is-visible > :nth-child(6){ animation-delay: .4s; }
.rvg.is-visible > :nth-child(7){ animation-delay: .48s; }
.rvg.is-visible > :nth-child(8){ animation-delay: .56s; }
.rvg.is-visible > :nth-child(n+9){ animation-delay: .6s; }

/* section heading */
.sh{ max-width: 820px; }
.sh-row{ max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.sh-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.6vw, 54px); line-height: 1.04; letter-spacing: -0.03em; }
.sh-lead{ margin-top: 16px; max-width: 60ch; font-size: clamp(15.5px, 1.2vw, 18px); line-height: 1.6; color: var(--muted-2); }
.sh-link{ font-family: var(--font-display); font-weight: 600; font-size: 15px; border-bottom: 1px solid rgba(10,10,12,.25); padding-bottom: 2px; transition: color .25s, border-color .25s; }
.sh-link span{ color: var(--accent); }
.is-dark .sh-lead, .ap2 .sh-lead, .br .sh-lead, .vd .sh-lead{ color: rgba(255,255,255,.64); }
.ap2 .eyebrow, .br .eyebrow, .vd .eyebrow, .ph .eyebrow{ color: var(--accent-2); }
.ap2 .eyebrow::before, .br .eyebrow::before, .vd .eyebrow::before{ background: var(--accent-2); }

/* ============================================
   PAGE HERO
   ============================================ */
.ph{ position: relative; overflow: hidden; background: #08080a; color: #fff; padding: calc(76px + clamp(28px, 6vh, 64px)) 0 clamp(28px, 5vh, 56px); }
.ph-bg{ position: absolute; inset: 0; pointer-events: none; }
.ph-glow{ position: absolute; inset: 0; background:
  radial-gradient(40% 60% at 76% 48%, rgba(250,90,32,.26), rgba(250,90,32,0) 70%),
  radial-gradient(50% 60% at 0% 0%, rgba(40,42,52,.6), rgba(40,42,52,0) 70%); }
.ph-grid{ position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 30%, transparent 85%); mask-image: radial-gradient(ellipse 70% 70% at 70% 40%, #000 30%, transparent 85%); }
.ph-wrap{ position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; }
.ph-h1{ font-family: var(--font-display); font-weight: 700; font-size: clamp(36px, 4.8vw, 74px); line-height: 1; letter-spacing: -0.035em; }
.ph-h1-s{ font-size: clamp(32px, 3.9vw, 60px); }
.ph-h1 em{ display: block; font-style: normal;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.ph-lead{ margin-top: 22px; max-width: 54ch; font-size: clamp(15.5px, 1.25vw, 18px); line-height: 1.6; color: rgba(255,255,255,.68); }
.ph-actions{ margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.ph-cta{ gap: 14px; padding: 6px 6px 6px 24px; }
.ph-cta-icon{ display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); transition: transform .5s var(--ease); }
.ph-ghost{ color: #fff; border-color: rgba(255,255,255,.28); }
.ph-visual{ position: relative; aspect-ratio: 1; max-width: 560px; justify-self: end; width: 100%; }
.ph-sun{ position: absolute; left: 52%; top: 44%; width: 66%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 40% 35%, #2a2a31 0%, #17171b 60%, #101013 100%);
  box-shadow: inset 0 0 0 1px rgba(255,140,70,.5), inset 0 0 70px rgba(250,90,32,.35), 0 0 120px rgba(250,90,32,.18); }
.ph-img{ position: relative; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 14%); mask-image: linear-gradient(0deg, transparent 0%, #000 14%); }
.ph-facts{ grid-column: 1 / -1; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.12); }
.ph-fact{ display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 18px 0 0; }
.ph-fact + .ph-fact{ padding-left: 18px; border-left: 1px solid rgba(255,255,255,.08); }
.ph-fact dd{ margin: 0; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(20px, 2.2vw, 34px); letter-spacing: -0.02em; white-space: nowrap; }
.ph-fact dd i{ margin-left: .3em; font-family: var(--font-display); font-style: normal; font-weight: 600; font-size: .45em; letter-spacing: 0; color: var(--accent-2); }
.ph-fact dt{ font-size: 13.5px; color: rgba(255,255,255,.55); }
@keyframes ph-in{ from{ opacity: 0; transform: translateY(26px); filter: blur(8px); } }
/* hero text is visible from the first paint and only slides up a little: a fade-in held the first screen
   (the largest text block) back by up to 4 s on a slow phone in PageSpeed (2026-10-15) */
@keyframes ph-rise{ from{ transform: translateY(18px); } }
.ph-copy > *{ animation: ph-rise .9s var(--ease) backwards; }
.ph-fact{ animation: ph-in 1s var(--ease) backwards; }
.ph-copy > :nth-child(2){ animation-delay: .08s; } .ph-copy > :nth-child(3){ animation-delay: .16s; } .ph-copy > :nth-child(4){ animation-delay: .24s; }
.ph-fact{ animation-delay: calc(.4s + var(--i) * .08s); }
.ph-visual{ animation: ph-vis 1.4s var(--ease) .1s backwards; }
@keyframes ph-vis{ from{ opacity: 0; transform: translateX(40px) scale(.94); } }

/* ============================================
   MODEL RANGE — cards with a pressure scale
   ============================================ */
.mr{ background: var(--paper); padding: clamp(90px, 12vh, 140px) 0; }
.mr-scale{ margin-top: 40px; display: flex; align-items: center; gap: 20px; }
.mr-scale > span{ flex: none; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mr-scale ol{ position: relative; flex: 1; height: 22px; border-bottom: 1px solid rgba(10,10,12,.2); }
.mr-scale li{ position: absolute; left: var(--p); bottom: 4px; transform: translateX(-50%); font-family: 'Unbounded', var(--font-display); font-size: 11px; font-weight: 700; color: var(--muted-2); }
.mr-scale li::after{ content: ""; position: absolute; left: 50%; bottom: -9px; width: 1px; height: 8px; background: rgba(10,10,12,.35); }
.mr-grid{ margin-top: 26px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mr-card a{
  position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,12,.07);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s;
}
.mr-media{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e6df; }
.mr-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.mr-body{ display: flex; flex-direction: column; flex: 1; padding: 18px 20px 22px; }
.mr-name{ font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.2; }
.mr-bar b{ display: block; margin-top: 8px; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: -0.02em; color: var(--accent-ink); }
.mr-track{ position: relative; display: block; height: 6px; margin-top: 12px; border-radius: 6px; background: repeating-linear-gradient(90deg, rgba(10,10,12,.12) 0 2px, transparent 2px 10px); }
.mr-track i{ position: absolute; top: 0; bottom: 0; left: var(--a); right: calc(100% - var(--b)); min-width: 6px; border-radius: 6px;
  background: linear-gradient(90deg, #ffb61c, var(--accent)); box-shadow: 0 0 10px rgba(250,90,32,.45);
  transform-origin: left; }
.mr-grid.is-visible .mr-track i{ animation: mr-fill 1.2s var(--ease) calc(.5s + var(--i, 0) * .08s) backwards; }
.mr-card{ --i: 0; }
@keyframes mr-fill{ from{ transform: scaleX(0); } }
.mr-use{ margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.mr-go{ position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(10,10,12,.72); color: #fff; transition: background-color .3s, transform .5s var(--ease); }

/* ============================================
   APPLICATIONS
   ============================================ */
.ap2{ background: var(--ink); color: #fff; padding: clamp(90px, 12vh, 140px) 0; }
.ap2-wrap{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px clamp(28px, 5vw, 90px); align-items: start; }
.ap2-ind-label{ margin-top: 34px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.ap2-ind{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.ap2-ind li{ padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: 14px; }
.ap2-list{ border-top: 1px solid rgba(255,255,255,.12); }
.ap2-list a, .ap2-plain{
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 4px; border-bottom: 1px solid rgba(255,255,255,.12);
  font-family: var(--font-display); font-weight: 600; font-size: clamp(17px, 1.5vw, 22px);
}
.ap2-list a::before{ content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.ap2-list a span{ transition: transform .5s var(--ease), color .3s; }
.ap2-list a i{ font-style: normal; color: var(--accent-2); opacity: .5; transition: opacity .3s, transform .5s var(--ease); }
.ap2-plain{ color: rgba(255,255,255,.72); }

/* ============================================
   CONFIGURATION
   ============================================ */
.cf{ background: var(--paper); padding: clamp(90px, 12vh, 140px) 0; }
.cf-grid{ margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cf-col{ padding: 22px 22px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.cf-h{ font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.cf-col ul{ margin-top: 14px; display: grid; gap: 9px; }
.cf-col li{ position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.45; color: var(--muted-2); }
.cf-col li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--accent); }
.cf-kit{ margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); border-radius: 28px; overflow: hidden; background: var(--ink); color: #fff; }
.cf-kit-media{ min-height: 360px; }
.cf-kit-media img{ width: 100%; height: 100%; object-fit: cover; }
.cf-kit-copy{ padding: clamp(26px, 3.4vw, 52px); }
.cf-kit-title{ font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.4vw, 34px); }
.cf-kit-list{ margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.cf-kit-list li{ display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 15px; line-height: 1.35; }
.cf-kit-list span{ flex: none; font-family: 'Unbounded', var(--font-display); font-size: 11px; font-weight: 700; color: var(--accent-2); padding-top: 3px; }
.cf-note{ margin-top: 20px; padding: 14px 16px; border-radius: 14px; background: rgba(250,90,32,.12); border: 1px solid rgba(250,90,32,.3); font-size: 14.5px; line-height: 1.5; }

/* ============================================
   BRAND MG
   ============================================ */
.br{ background: #101013; color: #fff; padding: clamp(90px, 12vh, 140px) 0; }
.br-wrap{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 40px clamp(28px, 5vw, 90px); align-items: center; }
.br-block{ margin-top: 30px; }
.br-label{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.br-models{ margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.br-models li{ padding: 12px 18px; border-radius: 14px; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 22px);
  background: linear-gradient(160deg, rgba(250,90,32,.18), rgba(255,255,255,.03)); border: 1px solid rgba(250,90,32,.35); }
.br.is-visible .br-models li, .br-wrap.is-visible .br-models li{ animation: br-pop .7s cubic-bezier(.2,1.4,.4,1) calc(.4s + var(--i) * .06s) backwards; }
@keyframes br-pop{ from{ opacity: 0; transform: scale(.6); } }
.br-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.br-text{ margin-top: 10px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); }
.br-cert{ margin: 0; justify-self: center; text-align: center; }
.br-cert-btn{ display: block; padding: 10px; border: 0; border-radius: 18px; background: #fff; cursor: zoom-in; rotate: 3deg; box-shadow: 0 30px 60px rgba(0,0,0,.5); transition: rotate .6s var(--ease), transform .6s var(--ease); }
.br-cert-btn img{ width: min(300px, 60vw); height: auto; border-radius: 8px; }
.br-cert figcaption{ margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.55); }
.br-cert figcaption b{ display: block; font-family: var(--font-display); font-size: 15px; color: #fff; }

/* ============================================
   VIDEO — click-to-load facades
   ============================================ */
.vd{ background: var(--ink); color: #fff; padding: 0 0 clamp(90px, 12vh, 140px); }
.vd-grid{ margin-top: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vd-item{ margin: 0; }
.vd-play{ position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 24px; overflow: hidden; background: #000; cursor: pointer; }
.vd-play img{ width: 100%; height: 100%; object-fit: cover; opacity: .75; transition: transform 1.2s var(--ease), opacity .4s; }
.vd-icon{ position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 10px rgba(250,90,32,.25); transition: transform .5s var(--ease); }
.vd-icon svg{ width: 28px; height: 28px; margin-left: 4px; fill: #fff; }
.vd-play iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vd-item figcaption{ margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.vd-item figcaption span{ font-weight: 500; font-size: 13px; color: rgba(255,255,255,.5); }

/* ============================================
   PROJECTS
   ============================================ */
.pr{ background: var(--paper); padding: clamp(90px, 12vh, 140px) 0; }
.pr-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pr-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pr-card a{ display: flex; flex-direction: column; height: 100%; }
.pr-media{ display: block; aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden; background: #ddd; }
.pr-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pr-tag{ margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.pr-name{ margin-top: 6px; font-family: var(--font-display); font-weight: 600; font-size: 18px; line-height: 1.25; }

/* ============================================
   ORDER
   ============================================ */
.or{ background: var(--paper-2); padding: clamp(90px, 12vh, 140px) 0; }
.or-steps{ margin-top: 40px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: or; }
.or-steps li{ position: relative; padding: 24px 22px 26px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.or-steps li:not(:last-child)::after{ content: "→"; position: absolute; right: -14px; top: 26px; z-index: 1; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; }
.or-n{ font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(10,10,12,.3); }
.or-steps h3{ margin-top: 16px; font-family: var(--font-display); font-weight: 700; font-size: 19px; }
.or-steps p{ margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.or-bottom{ margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.or-files{ display: grid; gap: 10px; }
.or-files a{ display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 18px; background: var(--ink); color: #fff; transition: transform .5s var(--ease), background-color .3s; }
.or-file-icon{ flex: none; display: grid; place-items: center; width: 48px; height: 56px; border-radius: 8px 16px 8px 8px; background: var(--accent); font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 11px; }
.or-files b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 16px; }
.or-files small{ display: block; margin-top: 2px; font-size: 13px; color: rgba(255,255,255,.55); }
.or-files i{ margin-left: auto; font-style: normal; font-size: 18px; color: var(--accent-2); transition: transform .4s var(--ease); }
.or-dept{ padding: 22px 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.or-dept .br-label{ color: var(--muted); }
.or-phone{ display: block; margin-top: 10px; font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -0.02em; }
.or-mail{ display: inline-block; margin-top: 6px; font-size: 15px; color: var(--muted-2); border-bottom: 1px solid rgba(10,10,12,.2); }

/* zoom dialog */
.zm{ width: min(900px, 94vw); max-height: 92vh; padding: 0; border: 0; background: transparent; overflow: visible; }
.zm::backdrop{ background: rgba(10,10,12,.85); }
.zm img{ display: block; width: 100%; height: auto; max-height: 88vh; object-fit: contain; border-radius: 10px; background: #fff; }
.zm-close{ position: absolute; right: 0; top: -52px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3); background: transparent; color: #fff; font-size: 20px; cursor: pointer; }

/* ============================================
   HOVER
   ============================================ */
@media (hover: hover) and (pointer: fine){
  .ph-cta:hover .ph-cta-icon{ transform: translate(3px, -1px) scale(1.06); }
  .ph-ghost:hover{ border-color: var(--accent); color: var(--accent-2); }
  .sh-link:hover{ color: var(--accent-ink); border-color: var(--accent); }
  .mr-card a:hover{ transform: translateY(-6px); box-shadow: 0 30px 60px rgba(10,10,12,.12); border-color: rgba(250,90,32,.35); }
  .mr-card a:hover .mr-media img{ transform: scale(1.06); }
  .mr-card a:hover .mr-go{ background: var(--accent); transform: rotate(-45deg); }
  .ap2-list a:hover::before{ transform: scaleX(1); }
  .ap2-list a:hover span{ transform: translateX(8px); color: var(--accent-2); }
  .ap2-list a:hover i{ opacity: 1; transform: translateX(4px); }
  .br-cert-btn:hover{ rotate: 0deg; transform: scale(1.03); }
  .vd-play:hover img{ transform: scale(1.05); opacity: .9; }
  .vd-play:hover .vd-icon{ transform: scale(1.1); }
  .pr-card a:hover img{ transform: scale(1.06); }
  .pr-card a:hover .pr-name{ color: var(--accent-ink); }
  .or-files a:hover{ transform: translateY(-3px); background: #1a1a1f; }
  .or-files a:hover i{ transform: translateY(3px); }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1100px){
  .mr-grid, .pr-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .or-steps{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .or-steps li:not(:last-child)::after{ display: none; }
  .br-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 900px){
  .ph-wrap{ grid-template-columns: minmax(0, 1fr); }
  .ph-visual{ justify-self: center; max-width: 420px; order: -1; margin-bottom: -20px; }
  .ph-facts{ grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .ph-fact:nth-child(3){ border-left: 0; padding-left: 0; }
  .ap2-wrap, .cf-kit, .or-bottom{ grid-template-columns: 1fr; }
  .cf-kit-media{ min-height: 260px; }
}
@media (max-width: 760px){
  .ph{ padding-top: 96px; }
  .ph-visual{ max-width: 230px; margin-bottom: -8px; }
  .ph-actions .btn{ flex: 1 1 auto; justify-content: center; }
  .mr-scale{ display: none; }
  .mr-grid, .pr-grid{ grid-template-columns: 1fr; gap: 12px; }
  .mr-card a{ flex-direction: row; border-radius: 20px; }
  .mr-media{ flex: 0 0 38%; aspect-ratio: auto; }
  .mr-body{ padding: 14px 14px 16px; }
  .mr-name{ font-size: 16px; padding-right: 30px; }
  .mr-bar b{ font-size: 16px; }
  .mr-use{ font-size: 13px; }
  .mr-go{ width: 32px; height: 32px; top: 10px; right: 10px; }
  .pr-grid{ display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: -18px; padding-inline: 18px; }
  .pr-grid::-webkit-scrollbar{ display: none; }
  .pr-card{ flex: 0 0 72vw; scroll-snap-align: start; }
  .cf-grid, .or-steps{ grid-template-columns: 1fr; }
  .cf-kit-list{ grid-template-columns: 1fr; }
  .br-row{ grid-template-columns: 1fr; }
  .vd-grid{ grid-template-columns: 1fr; }
  .ap2-list a, .ap2-plain{ font-size: 17px; padding: 14px 2px; }
}


/* ============================================
   PRODUCT PAGES — generic blocks
   ============================================ */
.bk{ padding: clamp(80px, 11vh, 130px) 0; }
.tone-light{ background: var(--paper); }
.tone-paper2{ background: var(--paper-2); }
.tone-dark{ background: var(--ink); color: #fff; }
.tone-dark .sh-lead{ color: rgba(255,255,255,.64); }
.tone-dark .eyebrow{ color: var(--accent-2); }
.tone-dark .eyebrow::before{ background: var(--accent-2); }
.tone-dark .sh-link{ border-color: rgba(255,255,255,.3); }
.bk-lines{ padding: 56px 0 64px; }

/* hero with a framed photo */
.ph-photo .ph-visual{ aspect-ratio: 4 / 3.4; }
.ph-frame{ position: absolute; inset: 0; border-radius: 30px; overflow: hidden; padding: 7px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 40px 80px rgba(0,0,0,.5); }
.ph-photo-img{ width: 100%; height: 100%; object-fit: cover; border-radius: 23px; }
.ph-frame::after{ content: ""; position: absolute; inset: 7px; border-radius: 23px; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,0) 40%); }
.ph-badge{ position: absolute; left: 22px; bottom: 22px; z-index: 1; padding: 8px 14px; border-radius: 999px;
  background: rgba(10,10,12,.78); border: 1px solid rgba(255,255,255,.14); font-family: var(--font-display); font-weight: 600; font-size: 13px; }
.ph-photo .ph-visual::before{ content: ""; position: absolute; right: -8%; top: -10%; width: 60%; aspect-ratio: 1; border-radius: 50%;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, var(--accent-2) 78%, var(--accent) 100%); opacity: .95; }
.ph-price{ display: inline-flex; align-items: center; padding: 0 20px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.3);
  font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }

/* intro */
.in-wrap{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 32px clamp(28px, 5vw, 90px); align-items: start; }
.in-text{ margin-top: 18px; max-width: 58ch; font-size: clamp(15.5px, 1.15vw, 17.5px); line-height: 1.65; color: var(--muted-2); }
.tone-dark .in-text{ color: rgba(255,255,255,.66); }
.in-side{ padding: 26px 28px; border-radius: 26px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.in-list-title{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.in-list{ margin-top: 14px; }
.in-list li{ position: relative; padding: 12px 0 12px 32px; border-top: 1px solid rgba(10,10,12,.08); font-size: 16px; line-height: 1.4; }
.in-list li:first-child{ border-top: 0; }
.in-list li::before{ content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px; border-radius: 50%; background: rgba(250,90,32,.14); }
.in-list li::after{ content: ""; position: absolute; left: 6px; top: 18px; width: 4px; height: 7px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* specs sheet */
.sp2{ margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 16px; align-items: stretch; }
.sp2-table{ margin: 0; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); }
.sp2-row{ display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 16px; padding: 16px 24px; border-top: 1px solid rgba(255,255,255,.08); }
.sp2-row:first-child{ border-top: 0; }
.sp2-row:nth-child(odd){ background: rgba(255,255,255,.03); }
.sp2-row dt{ font-size: 14.5px; color: rgba(255,255,255,.56); }
.sp2-row dd{ margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 16.5px; }
.sp2-row dd ul{ display: grid; gap: 4px; }
.sp2-row dd li{ font-weight: 500; font-size: 15px; }
.sp2-row dd li::before{ content: "— "; color: var(--accent-2); }
.sp2-aside{ display: flex; flex-direction: column; gap: 12px; }
.sp2-aside img{ width: 100%; flex: 1; min-height: 200px; object-fit: cover; border-radius: 22px; background: #fff; }
.sp2-note{ padding: 16px 18px; border-radius: 18px; background: rgba(250,90,32,.12); border: 1px solid rgba(250,90,32,.3); font-size: 14.5px; line-height: 1.5; }
.tone-light .sp2-table, .tone-paper2 .sp2-table{ border-color: rgba(10,10,12,.08); background: #fff; }
.tone-light .sp2-row, .tone-paper2 .sp2-row{ border-color: rgba(10,10,12,.07); }
.tone-light .sp2-row:nth-child(odd), .tone-paper2 .sp2-row:nth-child(odd){ background: rgba(10,10,12,.02); }
.tone-light .sp2-row dt, .tone-paper2 .sp2-row dt{ color: var(--muted); }

/* options */
.op-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.op-item{ display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px 16px; border-radius: 20px; background: #fff; border: 1px solid rgba(10,10,12,.06); text-align: center;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.op-img{ display: block; width: 78%; aspect-ratio: 1; }
.op-img img{ width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s var(--ease); }
.op-name{ font-family: var(--font-display); font-weight: 600; font-size: 13.5px; line-height: 1.25; }

/* models */
.md-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.md-n3, .md-n6{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.md-n5{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.md-n5 > li{ grid-column: span 2; }
.md-n5 > li:nth-child(n+4){ grid-column: span 3; }
.md-card > a, .md-in{ position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid rgba(10,10,12,.07);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.md-media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e6df; }
.md-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.md-body{ display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.md-tag{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.md-name{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 21px); letter-spacing: -0.01em; }
.md-text{ font-size: 15px; color: var(--muted-2); }
.md-go{ position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(10,10,12,.72); color: #fff; transition: background-color .3s, transform .5s var(--ease); }

/* cards */
.cd-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cd-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-card > a, .cd-in{ display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,12,.07);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .3s; }
.tone-dark .cd-card > a, .tone-dark .cd-in{ background: #16161a; border-color: rgba(255,255,255,.09); }
.cd-media{ display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e9e6df; }
.cd-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.cd-contain{ background: #fff; }
.cd-contain img{ object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cd-body{ display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 24px; }
.cd-kicker{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.tone-dark .cd-kicker{ color: var(--accent-2); }
.cd-name{ font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.cd-text{ font-size: 14.5px; line-height: 1.5; color: var(--muted-2); }
.tone-dark .cd-text{ color: rgba(255,255,255,.62); }
.cd-specs{ display: grid; gap: 6px; margin-top: 4px; }
.cd-specs > span{ display: flex; justify-content: space-between; gap: 12px; padding-top: 6px; border-top: 1px dashed rgba(10,10,12,.14); font-size: 14px; }
.tone-dark .cd-specs > span{ border-color: rgba(255,255,255,.14); }
.cd-specs i{ font-style: normal; color: var(--muted); }
.cd-specs b{ font-family: var(--font-display); font-weight: 600; text-align: right; }
.cd-more{ margin-top: auto; padding-top: 10px; font-family: var(--font-display); font-weight: 600; font-size: 14.5px; color: var(--accent-ink); }
.tone-dark .cd-more{ color: var(--accent-2); }
.cd-more span{ display: inline-block; transition: transform .4s var(--ease); }
.cd-card:not(.cd-has-img) .cd-body{ padding-top: 26px; }
.cd-card:not(.cd-has-img) .cd-name::before{ content: ""; display: block; width: 28px; height: 3px; margin-bottom: 16px; border-radius: 3px; background: var(--accent); }

/* features */
.ft2-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ft2-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft2-n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ft2-item{ position: relative; padding: 26px 24px 28px; border-radius: 24px; border: 1px solid rgba(255,255,255,.1); background: linear-gradient(160deg, rgba(250,90,32,.12), rgba(255,255,255,.02) 60%); }
.tone-light .ft2-item, .tone-paper2 .ft2-item{ background: #fff; border-color: rgba(10,10,12,.07); }
.ft2-mark{ display: block; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(168deg, #ffd01a 0%, #ff9827 54%, var(--accent) 100%); position: relative; }
.ft2-mark::after{ content: ""; position: absolute; left: 15px; top: 11px; width: 7px; height: 13px; border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ft2-item h3{ margin-top: 18px; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.2; }
.ft2-item p{ margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.62); }
.tone-light .ft2-item p, .tone-paper2 .ft2-item p{ color: var(--muted-2); }

/* mounts */
.mt-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.mt-item{ display: flex; flex-direction: column; gap: 8px; }
.mt-img{ display: block; aspect-ratio: 400 / 262; border-radius: 16px; overflow: hidden; background: #fff; }
.mt-img img{ width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.mt-name{ font-size: 13px; line-height: 1.35; color: var(--muted-2); }

/* table */
.tb-wrap{ margin-top: 36px; overflow-x: auto; border-radius: 22px; border: 1px solid rgba(10,10,12,.08); background: #fff; }
.tb{ width: 100%; border-collapse: collapse; min-width: 560px; }
.tb th, .tb td{ padding: 16px 22px; text-align: left; font-size: 15px; line-height: 1.45; border-top: 1px solid rgba(10,10,12,.07); }
.tb thead th{ border-top: 0; font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: rgba(10,10,12,.02); }
.tb tbody th{ font-family: var(--font-display); font-weight: 600; }
.tb-chips{ margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.tb-chips li{ padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px; }

/* gallery */
.gl-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gl-n2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gl-n4{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gl-btn{ display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: 20px; overflow: hidden; background: #ddd; cursor: zoom-in; }
.gl-btn img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.vd-n1{ grid-template-columns: minmax(0, 1fr); max-width: 900px; }

/* sibling lines */
.ln-title{ font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.ln-grid{ margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.ln-grid a{ display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid rgba(10,10,12,.07); transition: border-color .3s, transform .5s var(--ease); }
.ln-name{ font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.ln-grid b{ font-family: 'Unbounded', var(--font-display); font-size: 14px; color: var(--accent-ink); }
.ln-grid .mr-track{ margin-top: 8px; }

/* split */
.spl{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px clamp(28px, 5vw, 90px); align-items: center; }
.spl-flip .spl-media{ order: -1; }
.spl-media img{ width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 28px; }
.spl-list{ margin-top: 20px; }
.spl-cta{ margin-top: 28px; }
.tone-dark .in-list li{ border-color: rgba(255,255,255,.1); }
.tone-dark .in-list li::after{ border-color: var(--accent-2); }

.or-online{ background: #fff !important; color: var(--ink) !important; border: 1px dashed rgba(10,10,12,.25); }
.or-online .or-file-icon{ background: var(--ink); color: #fff; font-size: 10px; }
.or-online small{ color: var(--muted) !important; }

@media (hover: hover) and (pointer: fine){
  .op-item:hover{ transform: translateY(-4px); border-color: rgba(250,90,32,.35); box-shadow: 0 16px 30px rgba(10,10,12,.08); }
  .op-item:hover img{ transform: scale(1.08); }
  .md-card > a:hover{ transform: translateY(-5px); box-shadow: 0 28px 56px rgba(10,10,12,.12); }
  .md-card > a:hover img{ transform: scale(1.05); }
  .md-card > a:hover .md-go{ background: var(--accent); transform: rotate(-45deg); }
  .cd-card > a:hover{ transform: translateY(-5px); box-shadow: 0 26px 52px rgba(10,10,12,.12); border-color: rgba(250,90,32,.35); }
  .cd-card > a:hover img{ transform: scale(1.05); }
  .cd-card > a:hover .cd-more span{ transform: translateX(4px); }
  .mt-item:hover img{ transform: scale(1.08); }
  .gl-btn:hover img{ transform: scale(1.05); }
  .ln-grid a:hover{ border-color: var(--accent); transform: translateY(-3px); }
}
@media (max-width: 1100px){
  .op-grid, .mt-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cd-grid, .cd-cols-4, .ft2-grid, .ln-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-n3, .md-n6, .md-n5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-n5 > li, .md-n5 > li:nth-child(n+4){ grid-column: auto; }
  .sp2{ grid-template-columns: 1fr; }
  .sp2-aside{ flex-direction: row; }
  .sp2-aside img{ max-width: 40%; }
}
@media (max-width: 900px){
  .in-wrap, .spl{ grid-template-columns: 1fr; }
  .spl-flip .spl-media{ order: 0; }
  .ph-photo .ph-visual{ max-width: 520px; order: 0; margin: 8px 0 0; justify-self: stretch; }
  .gl-grid, .gl-n4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .bk{ padding: 64px 0; }
  .op-grid, .mt-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .op-item{ padding: 10px 6px 12px; border-radius: 16px; }
  .op-name{ font-size: 11.5px; }
  .md-grid, .md-n3, .md-n6, .md-n5, .cd-grid, .cd-cols-2, .cd-cols-4, .ft2-grid, .ft2-n2, .ft2-n3{ grid-template-columns: 1fr; }
  .ln-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ln-name, .ln-grid b{ overflow-wrap: anywhere; hyphens: auto; }
  .ln-grid b{ font-size: 12.5px; }
  .sp2-aside{ flex-direction: column; }
  .sp2-aside img{ max-width: none; }
  .sp2-row{ grid-template-columns: 1fr; gap: 4px; padding: 14px 18px; }
  .in-side{ padding: 20px; }
  .ph-price{ padding: 12px 18px; justify-content: center; }
  .ph-badge{ left: 14px; bottom: 14px; font-size: 12px; }
  .gl-grid, .gl-n2, .gl-n4{ grid-template-columns: 1fr 1fr; gap: 8px; }
  .gl-btn{ border-radius: 14px; }
}


/* ============================================
   QUESTIONNAIRE + model code decoder
   ============================================ */
.ph-slim{ padding-bottom: clamp(40px, 7vh, 72px); }
.ph-slim .ph-h1{ max-width: 16ch; }
.dc{ margin-top: clamp(32px, 6vh, 56px); padding: clamp(22px, 3vw, 36px); border-radius: 28px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.dc-label{ font-family: var(--font-display); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.dc-code{ margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: clamp(22px, 4.1vw, 58px); letter-spacing: -0.02em; }
.dc-seg{ padding: .08em .18em; border: 0; border-radius: .18em; background: transparent; color: rgba(255,255,255,.45); font: inherit; cursor: pointer;
  transition: color .3s, background-color .3s, transform .4s var(--ease); }
.dc-seg[data-active]{ color: var(--ink); background: linear-gradient(168deg, #ffd01a 0%, #ff9827 54%, var(--accent) 100%); transform: translateY(-4px); }
.dc-sep{ color: rgba(255,255,255,.25); }
.dc-list{ margin: 18px 0 0; display: grid; }
.dc-item{ grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .35s, transform .5s var(--ease), visibility 0s linear .35s; }
.dc-item[data-active]{ opacity: 1; visibility: visible; transform: none; transition: opacity .35s, transform .5s var(--ease), visibility 0s; }
.dc-item dt{ display: flex; align-items: baseline; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.dc-item dt b{ font-family: 'Unbounded', var(--font-display); color: var(--accent-2); }
.dc-item dd{ margin: 6px 0 0; max-width: 90ch; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.7); }

.oq{ background: var(--paper); padding: clamp(64px, 9vh, 110px) 0; }
.oq-wrap{ display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, .8fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.oq-form{ display: grid; gap: 16px; }
.oq-set{ margin: 0; padding: clamp(20px, 2.6vw, 32px); border: 1px solid rgba(10,10,12,.07); border-radius: 26px; background: #fff; min-width: 0; }
.oq-set legend{ float: left; width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0; font-family: var(--font-display); font-weight: 700; font-size: 21px; }
.oq-set legend span{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: #fff; font-family: 'Unbounded', var(--font-display); font-size: 13px; }
.oq-set legend + *{ clear: both; }
.oq-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.oq-wide{ grid-column: 1 / -1; }
.oq .field label{ font-size: 13px; font-weight: 600; color: var(--muted-2); }
.oq .field input, .oq .field select, .oq .field textarea{ width: 100%; padding: 12px 14px; border: 1px solid rgba(10,10,12,.14); border-radius: 12px; background: var(--paper); font: 15px var(--font-body); color: var(--ink); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.oq .field textarea{ resize: vertical; }
.oq .field input:focus, .oq .field select:focus, .oq .field textarea:focus{ outline: none; border-color: var(--accent); background: #fff; box-shadow: 0 0 0 3px rgba(250,90,32,.18); }
.oq-checks{ display: flex; flex-wrap: wrap; gap: 8px; }
.oq-chip{ position: relative; }
.oq-chip input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.oq-chip span{ display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(10,10,12,.16); font-size: 14.5px; transition: background-color .25s, border-color .25s, color .25s; }
.oq-chip span::before{ content: "+"; font-weight: 700; color: var(--accent); transition: transform .3s var(--ease); }
.oq-chip input:checked + span{ background: var(--ink); border-color: var(--ink); color: #fff; }
.oq-chip input:checked + span::before{ transform: rotate(45deg); color: var(--accent-2); }
.oq-chip input:focus-visible + span{ outline: 2px solid var(--accent); outline-offset: 2px; }
.oq-file{ position: relative; margin-top: 14px; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px dashed rgba(10,10,12,.25); border-radius: 12px; font-size: 14px; color: var(--muted-2); cursor: pointer; }
.oq-file input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.oq-file .lf-file-icon{ background: var(--ink); color: #fff; }
.oq-agree{ margin-top: 16px; display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--muted-2); }
.oq-agree input{ margin-top: 2px; accent-color: var(--accent); }
.oq-agree a{ border-bottom: 1px solid rgba(10,10,12,.3); }
.oq-submit{ padding: 18px 28px; font-size: 16px; }
.oq-aside{ position: sticky; top: 96px; display: grid; gap: 12px; }
.oq-card{ padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.oq-card .br-label{ color: var(--muted); }
.oq-card-dark{ background: var(--ink); color: #fff; border-color: var(--ink); }
.oq-card-dark .br-label{ color: rgba(255,255,255,.5); }
.oq-mail{ display: inline-block; margin-top: 6px; font-size: 15px; color: rgba(255,255,255,.7); }
.oq-next{ margin-top: 12px; display: grid; gap: 10px; counter-reset: q; }
.oq-next li{ display: flex; gap: 12px; font-size: 15px; line-height: 1.4; }
.oq-next li::before{ counter-increment: q; content: counter(q); flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(250,90,32,.14); color: var(--accent-ink); font-family: 'Unbounded', var(--font-display); font-size: 10px; font-weight: 700; }
.oq-drawing{ margin: 0; border-radius: 22px; overflow: hidden; background: #fff; }
.oq-drawing img{ width: 100%; height: auto; }
@media (max-width: 900px){
  .oq-wrap{ grid-template-columns: 1fr; }
  .oq-aside{ position: static; }
}
@media (max-width: 760px){
  .oq-grid{ grid-template-columns: 1fr; }
  .dc-item dd{ font-size: 14px; }
}

/* ============================================
   STAGE 3 blocks: stats (big numbers), chips (industries)
   ============================================ */
.stx{ margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid rgba(255,255,255,.14); }
.stx-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stx-n5{ grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tone-light .stx, .tone-paper2 .stx{ border-color: rgba(10,10,12,.12); }
.stx-item{ display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding: 28px 24px 4px 0; min-width: 0; }
.stx-item + .stx-item{ padding-left: 24px; border-left: 1px solid rgba(255,255,255,.1); }
.tone-light .stx-item + .stx-item, .tone-paper2 .stx-item + .stx-item{ border-color: rgba(10,10,12,.08); }
.stx-item dd{ margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.stx-item dd b{ white-space: nowrap; font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: clamp(30px, 3.6vw, 56px); line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tone-light .stx-item dd b, .tone-paper2 .stx-item dd b{ background: none; color: var(--ink); }
.stx-item dd i{ font-style: normal; font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--accent-2); }
.tone-light .stx-item dd i, .tone-paper2 .stx-item dd i{ color: var(--accent-ink); }
.stx-item dt{ max-width: 24ch; font-size: 14.5px; line-height: 1.45; color: rgba(255,255,255,.62); }
.tone-light .stx-item dt, .tone-paper2 .stx-item dt{ color: var(--muted-2); }
.stx-note{ margin-top: 26px; max-width: 80ch; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.45); }
.tone-light .stx-note, .tone-paper2 .stx-note{ color: var(--muted); }

.chp-wrap{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 28px clamp(28px, 5vw, 80px); align-items: start; }
.chp{ display: flex; flex-wrap: wrap; gap: 10px; }
.chp li{ display: inline-flex; align-items: center; gap: 12px; padding: 14px 22px 14px 18px; border-radius: 999px; border: 1px solid rgba(10,10,12,.12); background: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.2;
  transition: background-color .35s, color .35s, border-color .35s, transform .5s var(--ease); }
.chp li::before{ content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(168deg, #ffd01a, var(--accent)); }
.tone-dark .chp li{ background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14); color: #fff; }
.chp-wrap.is-visible .chp li{ animation: rv-up .9s var(--ease) backwards; animation-delay: calc(var(--i) * 45ms + .15s); }
.chp-wrap:not(.is-visible) .chp li{ opacity: 0; }

.ft2-n6, .ft2-n9{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft2-n5{ grid-template-columns: repeat(6, minmax(0, 1fr)); }
.ft2-n5 > li{ grid-column: span 2; }
.ft2-n5 > li:nth-child(n+4){ grid-column: span 3; }

@media (hover: hover) and (pointer: fine){
  .chp li:hover{ background: var(--ink); border-color: var(--ink); color: #fff; transform: translateY(-2px); }
  .tone-dark .chp li:hover{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
}
@media (max-width: 1100px){
  .stx, .stx-n5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stx-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stx-item:nth-child(odd){ padding-left: 0; border-left: 0; }
  .stx-n3 .stx-item:nth-child(odd){ padding-left: 24px; border-left: 1px solid rgba(255,255,255,.1); }
  .stx-n3 .stx-item:first-child{ padding-left: 0; border-left: 0; }
  .chp-wrap{ grid-template-columns: 1fr; }
  .ft2-n6, .ft2-n9, .ft2-n5{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ft2-n5 > li, .ft2-n5 > li:nth-child(n+4){ grid-column: auto; }
}
@media (max-width: 760px){
  .stx, .stx-n3, .stx-n5{ grid-template-columns: 1fr 1fr; column-gap: 16px; }
  .stx .stx-item, .stx .stx-item:nth-child(odd){ padding: 20px 0 4px; border-left: 0; }
  .ft2-n6, .ft2-n9, .ft2-n5{ grid-template-columns: 1fr; }
  .chp li{ padding: 11px 16px 11px 14px; }
}

/* ============================================
   STAGE 4: buy block (shop CTA + docs), product cut-outs
   ============================================ */
.buy{ display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px clamp(28px, 5vw, 80px); align-items: center; }
.buy-text{ margin-top: 16px; max-width: 56ch; font-size: 16.5px; line-height: 1.6; color: rgba(255,255,255,.7); }
.tone-light .buy-text, .tone-paper2 .buy-text{ color: var(--muted-2); }
.buy-actions{ margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.buy-cta{ padding: 16px 26px; font-size: 15.5px; }
.buy-ghost{ padding: 16px 24px; }
.tone-dark .buy-ghost{ color: #fff; border-color: rgba(255,255,255,.25); }
.buy-docs{ margin-top: 22px; display: grid; gap: 8px; max-width: 520px; }
.buy-docs a{ display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); color: #fff;
  transition: background-color .3s, transform .5s var(--ease); }
.tone-light .buy-docs a, .tone-paper2 .buy-docs a{ background: #fff; border-color: rgba(10,10,12,.08); color: var(--ink); }
.buy-docs .or-file-icon{ width: 40px; height: 46px; font-size: 10px; color: var(--ink); }
.buy-docs b{ display: block; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.buy-docs small{ display: block; margin-top: 2px; font-size: 12.5px; opacity: .6; }
.buy-docs i{ margin-left: auto; font-style: normal; color: var(--accent-2); transition: transform .4s var(--ease); }
.buy-media{ position: relative; display: grid; place-items: center; aspect-ratio: 1; max-width: 460px; width: 100%; justify-self: center; }
.buy-sun{ position: absolute; inset: 12%; border-radius: 50%; background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); }
.buy-media img{ position: relative; width: 88%; height: auto; max-height: 88%; object-fit: contain; filter: drop-shadow(0 30px 40px rgba(0,0,0,.35)); }
.buy.is-visible .buy-sun{ animation: buy-sun 1.4s var(--ease) backwards; }
@keyframes buy-sun{ from{ transform: scale(.6); opacity: 0; } }

/* product cut-outs sit on a soft plate in cards */
.cd-contain{ background: #fff; }
.cd-contain img{ padding: 8%; }

@media (hover: hover) and (pointer: fine){
  .buy-docs a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.1); }
  .tone-light .buy-docs a:hover, .tone-paper2 .buy-docs a:hover{ background: #fff; box-shadow: 0 10px 30px -18px rgba(10,10,12,.35); }
  .buy-docs a:hover i{ transform: translateY(3px); }
}
@media (max-width: 900px){
  .buy{ grid-template-columns: 1fr; }
  .buy-media{ order: -1; max-width: 320px; }
}

@media (max-width: 480px){
  .ph-h1{ font-size: clamp(30px, 8.4vw, 36px); hyphens: auto; overflow-wrap: break-word; }
}

@media (max-width: 760px){
  .cd-grid.cd-m2{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .cd-m2 .cd-body{ padding: 14px 14px 16px; }
  .cd-m2 .cd-name{ font-size: 15px; }
  .cd-m2 .cd-text{ display: none; }
}

/* ============================================
   STAGE 5: projects, articles, hubs
   ============================================ */
.pjh-tags{ margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.pjh-tags span{ padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.8); }
.pjh-tags span:first-child{ background: var(--accent); border-color: var(--accent); color: var(--ink); }
.pjh-h1, .arh-h1{ font-size: clamp(30px, 3.6vw, 54px); line-height: 1.05; }
.pjh-facts dd{ font-size: clamp(18px, 1.7vw, 24px); }

/* prose: article/project bodies from the old site */
.pz{ max-width: 760px; font-size: 17px; line-height: 1.7; color: #26272b; }
.pz > * + *{ margin-top: 1em; }
.pz h2{ margin-top: 1.8em; font-family: var(--font-display); font-weight: 700; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); scroll-margin-top: 96px; }
.pz h3{ margin-top: 1.5em; font-family: var(--font-display); font-weight: 700; font-size: 20px; line-height: 1.3; color: var(--ink); }
.pz > h2:first-child, .pz > h3:first-child{ margin-top: 0; }
.pz a{ color: var(--accent-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.pz ul, .pz ol{ display: grid; gap: 8px; padding-left: 0; }
.pz ul > li{ position: relative; padding-left: 26px; }
.pz ul > li::before{ content: ""; position: absolute; left: 4px; top: .68em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(168deg, #ffd01a, var(--accent)); }
.pz ol{ counter-reset: pz; }
.pz ol > li{ position: relative; padding-left: 36px; counter-increment: pz; }
.pz ol > li::before{ content: counter(pz); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: #fff; font-family: 'Unbounded', var(--font-display); font-size: 10px; font-weight: 700; }
.pz strong{ font-weight: 700; color: var(--ink); }
.pz blockquote{ padding: 18px 22px; border-left: 3px solid var(--accent); background: #fff; border-radius: 0 16px 16px 0; }
.pz table{ width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.pz td, .pz th{ padding: 10px 12px; border-bottom: 1px solid rgba(10,10,12,.1); text-align: left; vertical-align: top; }
.pz-fig{ margin: 1.6em 0; }
.pz-fig img{ width: 100%; height: auto; border-radius: 20px; background: #fff; }

/* project layout */
.pj-body{ padding-top: clamp(56px, 8vh, 96px); }
.pj-grid{ display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 5vw, 72px); align-items: start; }
.pj-aside{ position: sticky; top: 96px; display: grid; gap: 12px; }
.pj-card{ display: block; padding: 22px 24px; border-radius: 22px; background: #fff; border: 1px solid rgba(10,10,12,.07); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pj-card .br-label{ color: var(--muted); }
.pj-facts{ margin-top: 12px; display: grid; gap: 12px; }
.pj-facts dt{ font-size: 12.5px; color: var(--muted); }
.pj-facts dd{ margin: 2px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 15.5px; line-height: 1.35; }
.pj-card-dark{ background: var(--ink); border-color: var(--ink); color: #fff; }
.pj-card-dark .br-label{ color: rgba(255,255,255,.5); }
.pj-card b{ display: block; margin-top: 4px; font-family: var(--font-display); font-weight: 700; font-size: 19px; line-height: 1.25; }
.pj-card span{ display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 14px; opacity: .7; }
.pj-card i{ font-style: normal; color: var(--accent-2); }
.pj-card-accent{ background: linear-gradient(168deg, #ffd01a 0%, #ff9827 54%, var(--accent) 100%); border: 0; color: var(--ink); }
.pj-card-accent span{ opacity: .8; }
.pj-card-accent i{ color: var(--ink); }

/* article layout */
.ar-body{ padding-top: 0; }
.ar-cover{ margin: calc(-1 * clamp(24px, 4vh, 48px)) 0 0; position: relative; z-index: 2; border-radius: 28px; overflow: hidden; background: #e9e6df; box-shadow: 0 30px 60px -40px rgba(10,10,12,.5); }
.ar-cover img{ width: 100%; height: auto; max-height: 520px; object-fit: cover; }
.ar-grid{ margin-top: clamp(40px, 6vh, 72px); display: grid; grid-template-columns: 260px minmax(0, 760px); gap: clamp(28px, 5vw, 80px); justify-content: center; }
.ar-toc{ position: sticky; top: 96px; align-self: start; }
.ar-toc .br-label{ color: var(--muted); }
.ar-toc ol{ margin-top: 12px; display: grid; gap: 4px; counter-reset: toc; border-left: 1px solid rgba(10,10,12,.12); }
.ar-toc li{ counter-increment: toc; }
.ar-toc a{ display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--muted-2); transition: color .25s, border-color .25s; }
.ar-toc a[aria-current]{ color: var(--ink); border-color: var(--accent); font-weight: 600; }
.ar-cta{ margin-top: 2.4em !important; padding: 28px; border-radius: 26px; background: var(--ink); color: #fff; }
.ar-cta .br-label{ color: var(--accent-2); }
.ar-cta-title{ margin-top: 6px; font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1.2; color: #fff; }
.ar-cta-text{ margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: rgba(255,255,255,.7); }
.ar-cta-actions{ margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.ar-cta .btn-ghost{ color: #fff; border-color: rgba(255,255,255,.25); }
.ar-cta a{ text-decoration: none; }

/* hubs */
.hbh-facts{ margin-top: clamp(28px, 5vh, 48px); }
.hb{ padding-top: clamp(40px, 6vh, 72px); }
.hb-filter{ display: flex; flex-wrap: wrap; gap: 8px; }
.hb-chip{ display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 999px; border: 1px solid rgba(10,10,12,.14); background: #fff; font: 600 14.5px var(--font-display); color: var(--ink); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.hb-chip i{ font-style: normal; font-size: 12px; color: var(--muted); }
.hb-chip[aria-pressed="true"]{ background: var(--ink); border-color: var(--ink); color: #fff; }
.hb-chip[aria-pressed="true"] i{ color: var(--accent-2); }
.hb-chip:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-grid{ margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hb-card a{ display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,12,.07); transition: transform .6s var(--ease), box-shadow .6s var(--ease); }
.hb-card[hidden]{ display: none; }
.hb-media{ display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #e9e6df; }
.hb-media img{ width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hb-body{ display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 22px; }
.hb-meta{ display: flex; gap: 10px; align-items: center; font-size: 12.5px; color: var(--muted); }
.hb-meta b{ padding: 3px 9px; border-radius: 999px; background: rgba(250,90,32,.12); color: var(--accent-ink); font-weight: 700; font-size: 11.5px; letter-spacing: .03em; }
.hb-name{ font-family: var(--font-display); font-weight: 700; font-size: 17.5px; line-height: 1.3; }
.hb-text{ font-size: 14px; line-height: 1.5; color: var(--muted-2); }
.hb-featured > .hb-card:first-child{ grid-column: span 2; grid-row: span 2; }
.hb-featured > .hb-card:first-child .hb-media{ aspect-ratio: auto; flex: 1; min-height: 280px; }
.hb-featured > .hb-card:first-child .hb-name{ font-size: clamp(22px, 2vw, 28px); }
.hb-grid.is-filtered > .hb-card:first-child{ grid-column: auto; grid-row: auto; }
.hb-grid.is-filtered > .hb-card:first-child .hb-media{ aspect-ratio: 16 / 10; flex: none; min-height: 0; }
.hb-n3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hb-card.hb-in{ animation: rv-up .7s var(--ease) backwards; animation-delay: calc(var(--i) * 40ms); }

@media (hover: hover) and (pointer: fine){
  .hb-card a:hover{ transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(10,10,12,.35); }
  .hb-card a:hover img{ transform: scale(1.05); }
  .hb-chip:hover{ border-color: var(--ink); }
  .pj-card[href]:hover{ transform: translateY(-3px); box-shadow: 0 20px 40px -28px rgba(10,10,12,.4); }
  .ar-toc a:hover{ color: var(--ink); }
}
@media (max-width: 1100px){
  .pj-grid{ grid-template-columns: 1fr; }
  .pj-aside{ position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .ar-grid{ grid-template-columns: 1fr; }
  .ar-toc{ position: static; padding: 18px 20px; border-radius: 20px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
  .hb-grid, .hb-n3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .pz{ font-size: 16px; }
  .hb-grid, .hb-n3{ grid-template-columns: 1fr; }
  .hb-featured > .hb-card:first-child{ grid-column: auto; grid-row: auto; }
  .hb-featured > .hb-card:first-child .hb-media{ aspect-ratio: 16 / 10; flex: none; min-height: 0; }
  .hb-filter{ flex-wrap: nowrap; overflow-x: auto; margin-inline: -18px; padding: 2px 18px 6px; scrollbar-width: none; }
  .hb-filter::-webkit-scrollbar{ display: none; }
  .hb-chip{ flex: none; }
  .ar-cover{ border-radius: 20px; }
  .ar-cta{ padding: 22px; }
}

/* long crumbs and model codes must never widen the hero */
.ph-copy{ min-width: 0; }
.ph .crumbs li{ min-width: 0; }
.ph .crumbs [aria-current]{ overflow-wrap: anywhere; }
.pjh-h1, .pjh-facts dd{ overflow-wrap: anywhere; }
.hb-more{ margin: 28px auto 0; display: flex; }
.hb-more[hidden]{ display: none; }

/* ============================================
   STAGE 6: contacts, client logos, documents, 404
   ============================================ */
.lg-grid{ margin-top: 36px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.lg-item{ display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid rgba(10,10,12,.06); }
.lg-item img{ max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; filter: grayscale(1) contrast(1.08); opacity: .8; transition: filter .4s, opacity .4s; }

.ct-main{ margin-top: clamp(28px, 5vh, 48px); display: grid; gap: 6px; }
.ct-phone{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: clamp(28px, 4vw, 56px); letter-spacing: -0.02em; color: #fff; }
.ct-mail{ font-size: 18px; color: var(--accent-2); }
.ct-hours{ margin-top: 6px; font-size: 14.5px; color: rgba(255,255,255,.55); }
.ct-depts{ margin-top: 36px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ct-dept{ display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.ct-num{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 13px; color: var(--accent); }
.ct-dept h3{ font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.2; }
.ct-dept p{ font-size: 14.5px; line-height: 1.55; color: var(--muted-2); }
.ct-lines{ margin-top: 6px; display: grid; gap: 4px; }
.ct-dphone{ font-family: 'Unbounded', var(--font-display); font-weight: 700; font-size: 17px; }
.ct-dmail{ font-size: 14.5px; color: var(--accent-ink); overflow-wrap: anywhere; }
.ct-link{ margin-top: auto; padding-top: 12px; font-weight: 600; font-size: 14.5px; }
.ct-link span{ color: var(--accent); }
.ct-places{ margin-top: 36px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-place{ overflow: hidden; border-radius: 26px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.ct-place-media{ display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #e9e6df; }
.ct-place-media img{ width: 100%; height: 100%; object-fit: cover; }
.ct-place-body{ padding: 22px 26px 28px; display: grid; gap: 10px; justify-items: start; }
.ct-place-body .br-label{ color: var(--muted); }
.ct-place-body h3{ font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.25; }
.ct-place-body p{ font-size: 15px; line-height: 1.55; color: var(--muted-2); }
.ct-place-body .btn{ margin-top: 6px; }
.ct-docs-wrap{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px clamp(28px, 5vw, 80px); }
.ct-files{ margin-top: 24px; }
.ct-deliv{ margin-top: 20px; }
.ct-more{ margin-top: 18px; font-size: 15px; color: var(--muted-2); }
.ct-more a{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }

.doc-body .pz{ font-size: 16px; }
.doc-body .pz h2{ font-size: clamp(22px, 2vw, 26px); }

.nf{ min-height: calc(100svh - 76px); display: grid; place-items: center; text-align: center; padding: 120px 0 80px; }
.nf-code{ font-family: 'Unbounded', var(--font-display); font-weight: 800; font-size: clamp(96px, 18vw, 220px); line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(168deg, #ffd01a 0%, #ffb61c 30%, #ff9827 54%, #ff7a3d 78%, #fa5a20 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf h1{ margin-top: 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 40px); color: #fff; }
.nf p{ margin: 12px auto 0; max-width: 46ch; color: rgba(255,255,255,.65); }
.nf-links{ margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.nf-links .btn-ghost{ color: #fff; border-color: rgba(255,255,255,.25); }

@media (hover: hover) and (pointer: fine){
  .lg-item:hover img{ filter: none; opacity: 1; }
  .ct-link:hover{ color: var(--accent-ink); }
}
@media (max-width: 1100px){
  .lg-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ct-depts{ grid-template-columns: 1fr; }
}
@media (max-width: 760px){
  .lg-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .lg-item{ padding: 10px; border-radius: 14px; }
  .ct-places, .ct-docs-wrap{ grid-template-columns: 1fr; }
}

/* ============================================
   SMC catalogue (/smc)
   ============================================ */
.smc-hero{ overflow: visible; overflow-x: clip; z-index: 3; }   /* clip only sideways: the picture slides in from the right; search hints still hang below */
.smc-hero .ph-bg{ overflow: hidden; }
.smc-facts{ margin-top: clamp(28px, 5vh, 44px); }
.smc-h1{ font-size: clamp(30px, 3.8vw, 56px); line-height: 1.05; overflow-wrap: anywhere; }
.smc-hero .eyebrow{ margin-top: 14px; }
.smc-search{ position: relative; margin-top: clamp(24px, 4vh, 40px); max-width: 760px; display: flex; align-items: center; gap: 10px;
  padding: 8px 8px 8px 20px; border-radius: 999px; background: #fff; box-shadow: 0 20px 50px -30px rgba(0,0,0,.6); }
.smc-search > svg{ flex: none; width: 20px; height: 20px; color: var(--muted); }
.smc-search input{ flex: 1; min-width: 0; height: 44px; border: 0; background: transparent; font: 16px var(--font-body); color: var(--ink); }
.smc-search input:focus{ outline: none; }
.smc-search:focus-within{ box-shadow: 0 0 0 3px rgba(250,90,32,.35), 0 20px 50px -30px rgba(0,0,0,.6); }
.smc-search .btn{ flex: none; padding: 12px 22px; }
.smc-suggest{ position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 8px); padding: 6px; border-radius: 20px; background: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.45); max-height: 60vh; overflow-y: auto; }
.smc-suggest a{ display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; color: var(--ink); }
.smc-suggest a b{ font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.smc-suggest a span{ font-size: 12.5px; color: var(--muted); }
.smc-suggest a:hover, .smc-suggest a:focus-visible{ background: #f3f1ec; outline: none; }
.smc-suggest-all{ color: var(--accent-ink) !important; font-weight: 600; }

.smc-groups{ margin-top: 32px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.smc-group{ padding: 20px; border-radius: 24px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.smc-group-head{ display: flex; align-items: center; gap: 16px; }
.smc-group-media{ flex: none; width: 76px; height: 76px; border-radius: 16px; background: #fff; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(10,10,12,.06); }
.smc-group-media img{ width: 100%; height: 100%; object-fit: contain; }
.smc-group-title{ display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.25; }
.smc-group-count{ display: block; margin-top: 4px; font-size: 13px; color: var(--accent-ink); font-weight: 600; }
.smc-group-links{ margin-top: 14px; display: grid; gap: 2px; border-top: 1px solid rgba(10,10,12,.07); padding-top: 10px; }
.smc-group-links a{ display: block; padding: 5px 0; font-size: 14px; line-height: 1.35; color: var(--muted-2); }
.smc-group-links .smc-more{ color: var(--accent-ink); font-weight: 600; }

.smc-block + .smc-block{ margin-top: 44px; }
.smc-block-head{ display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(10,10,12,.1); }
.smc-block-head h2{ font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.smc-block-head span{ font-family: 'Unbounded', var(--font-display); font-size: 13px; color: var(--muted); }
.smc-block-head a{ font-weight: 600; font-size: 14.5px; color: var(--accent-ink); }
.smc-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.smc-tile{ display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 20px; background: #fff; border: 1px solid rgba(10,10,12,.07); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.smc-tile-media{ display: grid; place-items: center; aspect-ratio: 1; padding: 12px; background: #fff; }
.smc-tile-media img{ width: 100%; height: 100%; object-fit: contain; }
.smc-tile-section{ font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); background: #f6f5f2; aspect-ratio: 3 / 1; }
.smc-tile-body{ display: grid; gap: 6px; padding: 12px 16px 16px; border-top: 1px solid rgba(10,10,12,.05); }
.smc-tile-title{ font-family: var(--font-display); font-weight: 600; font-size: 14.5px; line-height: 1.35; overflow-wrap: anywhere; }
.smc-tile-meta{ font-size: 12.5px; color: var(--muted); }
.smc-help{ margin-top: 40px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; border-radius: 22px; background: var(--ink); color: #fff; }
.smc-help p{ max-width: 60ch; color: rgba(255,255,255,.75); }
.smc-help b{ color: #fff; }

.smc-product-grid{ display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.smc-product-media{ margin: 0; padding: 24px; border-radius: 28px; background: #fff; border: 1px solid rgba(10,10,12,.07); }
.smc-product-media img{ width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.smc-product-media figcaption{ margin-top: 10px; font-size: 12px; color: var(--muted); text-align: right; }
.smc-product-info h2{ font-family: var(--font-display); font-weight: 700; font-size: 24px; }
.smc-feats{ margin-top: 16px; }
.smc-actions{ margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.smc-note{ margin-top: 20px; max-width: 62ch; font-size: 14.5px; line-height: 1.6; color: var(--muted-2); }
.smc-product .smc-block{ margin-top: clamp(48px, 7vh, 80px); }
.smc-results-count{ margin-bottom: 20px; font-weight: 600; color: var(--muted-2); }

@media (hover: hover) and (pointer: fine){
  .smc-tile:hover{ transform: translateY(-3px); border-color: rgba(250,90,32,.4); box-shadow: 0 20px 40px -28px rgba(10,10,12,.35); }
  .smc-group-links a:hover, .smc-group-head:hover .smc-group-title{ color: var(--accent-ink); }
}
@media (max-width: 1100px){
  .smc-groups{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .smc-groups{ grid-template-columns: 1fr; }
  .smc-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .smc-tile-body{ padding: 10px 12px 12px; }
  .smc-tile-title{ font-size: 13.5px; }
  .smc-product-grid{ grid-template-columns: 1fr; }
  .smc-product-media{ max-width: 360px; }
  .smc-search{ padding-left: 14px; }
  .smc-search .btn{ padding: 12px 16px; }
  .smc-search input{ font-size: 15px; }
}

.ar-cover-wrap{ margin: calc(-1 * clamp(24px, 4vh, 48px)) 0 0; position: relative; z-index: 2; }
.ar-cover-wrap .ar-cover{ margin: 0; }
.ar-cover-pair{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ar-cover-pair .ar-cover img{ max-height: 380px; }
@media (max-width: 760px){ .ar-cover-pair{ grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce){
  .rvg > *, .rvg.is-visible > *, .chp-wrap .chp li, .buy .buy-sun, .hb-card.hb-in{ opacity: 1 !important; animation: none !important; }
  .ph-copy > *, .ph-fact, .ph-visual, .br-models li, .mr-track i{ animation: none !important; }
}

/* /hydrostation (product-line): the first screen incl. the facts row fits short laptop screens (1536×730, 1366×768) */
@media (min-width: 901px) and (max-height: 780px){
  .page-product-line .ph{ padding-top: calc(76px + 16px); padding-bottom: 20px; }
  .page-product-line .ph-h1{ font-size: clamp(30px, 3.5vw, 52px); }
  .page-product-line .ph-lead{ margin-top: 14px; font-size: 15.5px; }
  .page-product-line .ph-actions{ margin-top: 18px; }
  .page-product-line .ph-visual{ max-width: clamp(300px, 54svh, 460px); }
  .page-product-line .ph-fact{ padding-top: 13px; }
}

/* SMC (2026-10-16, the owner's picture of SMC components): on /smc the slim hero gets it on a white card to the right,
   on /products-smc it replaces the collage of four cut-outs (wide card in the proportions of the picture) */
.smc-hero-grid{ position: relative; z-index: 1;      /* above the hero glow, which otherwise tints the white card */
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.smc-hero-copy{ min-width: 0; }
.smc-hero-figure{ margin: 0; padding: clamp(14px, 1.6vw, 22px); border-radius: clamp(22px, 2.2vw, 30px); background: #fff; box-shadow: 0 40px 80px -40px rgba(0,0,0,.55); animation: ph-vis 1.4s var(--ease) .1s backwards; }
.smc-hero-figure img{ display: block; width: 100%; height: auto; }
@media (max-width: 900px){
  .smc-hero-grid{ grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .smc-hero-figure{ max-width: 560px; order: -1; }      /* on phones the picture leads, as on /products-smc */
}
.pnh-page .pnh-visual.pnh-photo.pnh-photo-wide{ aspect-ratio: 16 / 9; max-width: 640px; padding: clamp(12px, 1.6vw, 20px); }
.pnh-photo.pnh-photo-wide img{ width: 100%; max-height: none; }
@media (max-width: 900px){ .pnh-page .pnh-visual.pnh-photo.pnh-photo-wide{ max-width: 520px; } }
@media (max-width: 760px){ .pnh-page .pnh-visual.pnh-photo.pnh-photo-wide{ max-width: 100%; padding: 10px; } }
@media (prefers-reduced-motion: reduce){ .smc-hero-figure{ animation: none; } }

/* /hydrostation: second card grid (by drive and purpose) and the design office / production block (2026-10-26) */
.mr-2{ background: #fff; }
.kb{ background: #fff; }
.kb .kb-row{ margin-top: 40px; }
.kb .kb-row + .kb-row{ margin-top: 16px; }
.kb-text{ margin-top: 14px; font-size: 15.5px; line-height: 1.6; color: rgba(255,255,255,.78); max-width: 62ch; }
.kb-list{ margin-top: 18px; display: grid; gap: 9px; }
.kb-list li{ position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: rgba(255,255,255,.86); }
.kb-list li::before{ content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 50%; border: 2px solid var(--accent-2); }
@media (min-width: 1001px){
  .kb-flip{ grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .kb-flip .cf-kit-media{ order: 2; }
}